/* ============================================================ RUBICON — INNER CIRCLE FLOW The house design language. Lifted from mockups/youre-in-v7.html so every screen in this flow is cohesive by construction. Edit this file and all 22 screens change together. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap'); :root{ /* ---- core palette (do not drift) ---- */ --bg:#07090f; --card-top:#0c1018; --card-bot:#090c13; --line:#1b2130; --line-soft:#161c29; --ink:#e8ecf5; --ink-2:#c2ccdd; --ink-3:#93a8c2; --ink-4:#6e7793; --ink-5:#5b6480; --blue:#5ab6ff; --teal:#4fd2f0; --pink:#f06ba8; --violet:#b283ff; --green:#3ddc84; --red:#ff6b6b; --grad:linear-gradient(90deg,#6ec2ff,#b283ff); /* ---- per-section tint, overridden on ---- */ --tint:90,182,255; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; overflow-x:hidden; padding:56px 20px 112px; display:flex; align-items:center; justify-content:center; } body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; background: radial-gradient(620px 420px at 50% 18%, rgba(var(--tint),.16), transparent 70%), radial-gradient(520px 380px at 78% 82%, rgba(165,107,255,.13), transparent 70%), radial-gradient(420px 300px at 16% 76%, rgba(61,220,132,.07), transparent 70%); } /* ---- the three drifting blobs ---- */ .amb{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0} .amb i{position:absolute;display:block;border-radius:50%;filter:blur(80px)} .amb .a1{width:640px;height:480px;left:6%;top:-12%;background:rgba(var(--tint),.17); animation:drift1 26s ease-in-out infinite, breathe 15s ease-in-out infinite} .amb .a2{width:560px;height:440px;right:-2%;bottom:-6%;background:rgba(165,107,255,.14); animation:drift2 33s ease-in-out infinite, breathe 19s ease-in-out -6s infinite} .amb .a3{width:500px;height:400px;left:-10%;bottom:8%;background:rgba(79,210,240,.12); animation:drift3 29s ease-in-out infinite, breathe 13s ease-in-out -3s infinite} @keyframes breathe{0%,100%{opacity:.30}50%{opacity:.85}} @keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(130px,60px) scale(1.18)}66%{transform:translate(50px,120px) scale(.92)}} @keyframes drift2{0%,100%{transform:translate(0,0) scale(1.1)}33%{transform:translate(-120px,-70px) scale(.9)}66%{transform:translate(-40px,-130px) scale(1.14)}} @keyframes drift3{0%,100%{transform:translate(0,0) scale(.94)}33%{transform:translate(110px,-60px) scale(1.16)}66%{transform:translate(140px,40px) scale(1)}} /* ---- the card every screen sits in ---- */ .card{ position:relative; z-index:1; width:100%; max-width:600px; padding:48px 46px 40px; background:linear-gradient(180deg,var(--card-top) 0%,var(--card-bot) 100%); border:1px solid var(--line); border-radius:22px; box-shadow:0 40px 120px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.03); } .card.wide{max-width:900px} .card.full{max-width:1180px} /* ---- lockup ---- */ /* ACROSS THE RUBICON is the brand. INNER CIRCLE is the product inside it. */ .lockup{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0 0 28px} .lockup .wordmark{margin:0} .rmark{width:46px;height:46px;display:block; filter:drop-shadow(0 0 18px rgba(110,194,255,.35))} .wordmark{text-align:center;margin:0 0 28px;white-space:nowrap; font-family:Orbitron,-apple-system,sans-serif;font-weight:700;font-size:12px;line-height:1} .wordmark .b1{color:#3ec9f0;letter-spacing:.18em} .wordmark .b2{color:#78879a;letter-spacing:.18em;margin-left:.24em;font-weight:500} .wordmark .b3{display:block;margin-top:9px;font-weight:500;font-size:9.5px; letter-spacing:.42em;margin-right:-.42em;color:#4a5468} /* which surface a screen lives on: Telegram, or the Rubicon Inner Circle */ .surfmark{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 20px; font-family:Orbitron,sans-serif;font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:rgba(var(--tint),.9)} .surfmark .ico{width:26px;height:26px;flex:0 0 26px} .ico{display:block} /* ---- type ---- */ h1{text-align:center;font-size:34px;line-height:1.15;margin:0 0 10px; letter-spacing:-.02em;font-weight:700} h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .subhead{text-align:center;margin:0;font-family:Orbitron,-apple-system,sans-serif; font-weight:500;font-size:13px;letter-spacing:.2em;margin-right:-.2em; text-transform:uppercase;color:var(--ink-3)} .lede{text-align:center;font-size:15.5px;line-height:1.55;color:var(--ink-2);margin:16px 0 0} .gap{height:32px} /* ---- the travelling rainbow ring. Gen's "moving sign" ---- */ @property --ang{syntax:'';initial-value:0deg;inherits:false} .ring{position:relative;border-radius:15px} .ring::before{ content:"";position:absolute;inset:-1px;border-radius:16px;padding:1.6px;pointer-events:none; background:conic-gradient(from var(--ang), rgba(90,182,255,0) 0deg, rgba(90,182,255,.95) 26deg, rgba(79,210,240,1) 54deg, rgba(240,107,168,.95) 82deg, rgba(240,107,168,0) 112deg, rgba(90,182,255,0) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; animation:trace 4.6s linear infinite; } @keyframes trace{to{--ang:360deg}} @keyframes stepGlow{ 0%,100%{box-shadow:0 0 34px rgba(90,182,255,.16)} 33%{box-shadow:0 0 44px rgba(79,210,240,.20)} 66%{box-shadow:0 0 44px rgba(240,107,168,.18)}} /* ---- entrance ---- */ .rise{opacity:0;animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards} @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .d1{animation-delay:.10s}.d2{animation-delay:.22s}.d3{animation-delay:.34s} .d4{animation-delay:.46s}.d5{animation-delay:.58s}.d6{animation-delay:.70s} /* ---- buttons ---------------------------------------------------------- THE house button. Outlined pill, travelling light on the edge, the light speeds up on hover. Lifted from welcome-v1.html — Gen's reference for "the button with the line around the outside". Every clickable button in the flow uses this. */ .btn { position:relative; display:flex; align-items:center; justify-content:center; gap:13px; /* grows with its label instead of wrapping it onto two lines, but never shrinks below the house width, and never wider than its container */ width:fit-content; min-width:min(100%,300px); max-width:100%; white-space:nowrap; margin:0 auto; padding:16px 34px; border-radius:999px; border:1px solid rgba(120,160,215,.22); background:linear-gradient(180deg,rgba(35,80,150,.16),rgba(20,30,50,.10)); font-family:Orbitron,-apple-system,sans-serif; font-weight:700; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#9fd4ff; text-align:center; text-decoration:none; cursor:pointer; transition:color .3s ease, transform .3s cubic-bezier(.2,.8,.3,1.2), background .3s ease, box-shadow .3s ease, letter-spacing .3s ease; animation:btnGlow 9s ease-in-out infinite; } .btn::before { content:""; position:absolute; inset:-1px; border-radius:999px; padding:1.6px; pointer-events:none; background:conic-gradient(from var(--ang), rgba(90,182,255,0) 0deg, rgba(90,182,255,.95) 26deg, rgba(79,210,240,1) 54deg, rgba(240,107,168,.95) 82deg, rgba(240,107,168,0) 112deg, rgba(90,182,255,0) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; animation:trace 4.6s linear infinite; } .btn:hover { color:#f2f9ff; letter-spacing:.26em; transform:translateY(-3px) scale(1.045); background:linear-gradient(180deg,rgba(60,120,200,.26),rgba(30,45,70,.16)); box-shadow:0 0 60px rgba(90,182,255,.34), 0 10px 30px rgba(0,0,0,.45); } .btn:hover::before { animation-duration:1.5s; } .btn .arrow { display:inline-block; margin-left:9px; transition:transform .25s ease; } .btn:hover .arrow { transform:translateX(4px); } /* .btn sets `animation`, which would clobber .rise and leave opacity at 0 */ .btn.rise { opacity:0; animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards, btnGlow 9s ease-in-out infinite; } @keyframes btnGlow { 0%,100% { box-shadow:0 0 34px rgba(90,182,255,.16); } 33% { box-shadow:0 0 44px rgba(79,210,240,.20); } 66% { box-shadow:0 0 44px rgba(240,107,168,.18); } } /* not yet pressable: dark, inert, no travelling light */ .btn[disabled], .btn.off { cursor:not-allowed; color:#3d4657; border-color:#1b2130; animation:none; opacity:1; background:linear-gradient(180deg,#111726,#0d1220); box-shadow:none; } .btn[disabled]::before, .btn.off::before { opacity:0; } .btn[disabled]:hover, .btn.off:hover { color:#3d4657; letter-spacing:.22em; transform:none; box-shadow:none; background:linear-gradient(180deg,#111726,#0d1220); } /* The one action that leaves the platform. Still THE house button — same pill, same travelling light. Only the light and the glass turn Telegram blue, so the button never changes shape mid-flow. Declares no `animation`, so .btn.rise is never clobbered. */ .btn.tg { border:1px solid rgba(42,171,238,.30); color:#a8dcff; background:linear-gradient(180deg,rgba(42,171,238,.17),rgba(20,40,62,.10)); } .btn.tg::before { opacity:1; background:conic-gradient(from var(--ang), rgba(42,171,238,0) 0deg, rgba(42,171,238,.95) 26deg, rgba(124,212,255,1) 54deg, rgba(236,250,255,.95) 80deg, rgba(42,171,238,0) 112deg, rgba(42,171,238,0) 360deg); } .btn.tg:hover { color:#f2fbff; background:linear-gradient(180deg,rgba(42,171,238,.30),rgba(30,60,92,.16)); box-shadow:0 0 60px rgba(42,171,238,.44), 0 10px 30px rgba(0,0,0,.45); } .btn.tg .tgmark { width:25px; height:25px; flex:0 0 25px; } /* leaves the platform, so the arrow leaves the button */ .btn .arrow.out { margin-left:7px; } .btn:hover .arrow.out { transform:translate(4px,-4px); } .btn.ghost { background:transparent; border:1px solid var(--line); color:var(--ink-3); animation:none; opacity:1; } .btn.ghost::before { opacity:0; } /* ---- section pill ---- */ .pill{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700; letter-spacing:.2em;text-transform:uppercase;border-radius:20px;padding:6px 13px; color:rgb(var(--tint));background:rgba(var(--tint),.10); border:1px solid rgba(var(--tint),.30)} /* ============================================================ PLACEHOLDER FURNITURE Everything below is scaffolding. When a screen gets designed, delete its .todo block. Nothing else here is load-bearing. ============================================================ */ .todo{ margin:28px 0 0;padding:34px 26px;border-radius:15px; border:1px dashed rgba(var(--tint),.30); background:linear-gradient(180deg,rgba(var(--tint),.055),rgba(20,30,50,.10)); text-align:center;animation:stepGlow 9s ease-in-out infinite; } /* .todo sets `animation`, which would clobber .rise and leave opacity at 0. Same trap as .btn. Any rule that sets `animation` needs its .rise twin. */ .todo.rise{opacity:0; animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards, stepGlow 9s ease-in-out infinite;} .todo .mark{font-family:Orbitron,sans-serif;font-size:11px;letter-spacing:.24em; text-transform:uppercase;color:rgba(var(--tint),.85)} .todo .big{font-size:15px;color:var(--ink-2);margin:12px 0 0;line-height:1.55} .jobs{list-style:none;margin:26px 0 0;padding:22px 0 0;border-top:1px solid var(--line-soft)} .jobs h2{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-5); text-align:center;margin:0 0 18px;font-weight:600} .jobs li{display:flex;gap:13px;align-items:flex-start;font-size:14px;line-height:1.55; color:var(--ink-2);padding:9px 0} .jobs li::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%; margin-top:8px;background:rgba(var(--tint),.75); box-shadow:0 0 10px rgba(var(--tint),.6)} .ref{margin:22px 0 0;font-size:12.5px;color:var(--ink-4);text-align:center;line-height:1.6} .ref a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(90,182,255,.3)} /* ---- the flow rail: walk the journey ---- */ .rail{position:fixed;left:0;right:0;bottom:0;z-index:50; display:flex;align-items:center;justify-content:center;gap:14px; padding:13px 18px;backdrop-filter:blur(14px); background:linear-gradient(180deg,rgba(7,9,15,.55),rgba(7,9,15,.94)); border-top:1px solid var(--line-soft)} .rail a,.rail span{font-size:12px;text-decoration:none;color:var(--ink-4)} .rail a{padding:8px 14px;border:1px solid var(--line);border-radius:9px;color:var(--ink-3); transition:.18s} .rail a:hover{color:var(--ink);border-color:rgba(var(--tint),.5);background:rgba(var(--tint),.08)} .rail .pos{font-family:Orbitron,sans-serif;font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--ink-5);padding:0 6px} .rail .dis{opacity:.28;pointer-events:none} .vswitch{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden} .rail .vswitch .vbtn{border:0;border-radius:0;padding:8px 13px;font-size:11px; letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);background:transparent} .rail .vswitch .vbtn+.vbtn{border-left:1px solid var(--line)} .rail .vswitch .vbtn.on{color:#06080d;background:var(--grad);font-weight:700} .rail .vswitch .vbtn.on:hover{color:#06080d;background:var(--grad)} body.clean .rail{display:none} .hidebtn{position:fixed;top:14px;right:16px;z-index:51;font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-5);border:1px solid var(--line);background:transparent; border-radius:20px;padding:6px 13px;cursor:pointer;font-family:inherit} .hidebtn:hover{color:var(--ink-3)} @media (max-width:640px){ body{padding:34px 14px 104px} .card{padding:34px 24px 30px} h1{font-size:27px} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} .rise,.btn.rise{opacity:1!important} } /* ============================================================ ONBOARDING QUESTIONS — the split-screen pattern Shared by every "tell us about you" step. Image plate left with the lockup over it, question right. Add a step by copying the markup, not the styles. ============================================================ */ body.q { display:block; padding:0; min-height:100vh; } .split { display:grid; grid-template-columns:36% 1fr; min-height:100vh; } .plate { position:relative; overflow:hidden; background:#05070c; } .plate img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72; } .plate::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,9,15,.30) 0%,rgba(7,9,15,.10) 55%, rgba(7,9,15,.92) 100%), linear-gradient(180deg,rgba(7,9,15,.55) 0%,transparent 30%,rgba(7,9,15,.6) 100%); } .mark { position:absolute; z-index:2; left:38px; top:36px; display:flex; align-items:center; gap:14px; } .mark img { position:static; width:44px; height:44px; opacity:1; filter:drop-shadow(0 0 18px rgba(110,194,255,.4)); } .mark .lock { font-family:Orbitron,sans-serif; font-size:11px; line-height:1; } .mark .b1 { color:#3ec9f0; letter-spacing:.2em; font-weight:700; } .mark .b2 { color:#78879a; letter-spacing:.2em; font-weight:500; } .pane { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 56px 130px; } .inner { width:100%; max-width:620px; } .back { position:absolute; left:34px; top:34px; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:transparent; display:grid; place-items:center; cursor:pointer; transition:.2s; } .back:hover { border-color:rgba(120,160,215,.5); background:rgba(90,182,255,.07); } .back svg { width:15px; height:15px; stroke:#93a8c2; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; } .steps { display:flex; gap:7px; justify-content:center; margin:0 0 54px; } .steps i { width:26px; height:3px; border-radius:2px; background:#1b2130; display:block; } .steps i.on { background:var(--grad); box-shadow:0 0 12px rgba(110,194,255,.55); } .q h1 { font-size:33px; line-height:1.25; margin:0 0 12px; } .qsub { text-align:center; font-size:15px; color:#7e8aa5; margin:0 0 40px; } /* ---- option cards ---- */ .grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .opt { position:relative; text-align:left; cursor:pointer; padding:20px 20px 18px; border-radius:15px; border:1px solid var(--line); font:inherit; background:linear-gradient(180deg,var(--card-top),var(--card-bot)); transition:border-color .22s, transform .22s cubic-bezier(.2,.8,.3,1.2), box-shadow .22s, background .22s; } .opt:hover { transform:translateY(-3px); border-color:rgba(120,160,215,.4); box-shadow:0 16px 40px rgba(0,0,0,.5); } .opt .ico { width:26px; height:26px; stroke:#7e8aa5; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; display:block; transition:stroke .22s; } .opt .lab { display:block; margin-top:44px; font-size:14.5px; font-weight:600; color:#c2ccdd; line-height:1.4; transition:color .22s; } .opt .des { display:block; margin-top:6px; font-size:12.5px; color:#6e7793; line-height:1.5; transition:color .22s; } .opt .pip { position:absolute; right:18px; top:18px; width:19px; height:19px; border-radius:50%; border:1.5px solid #2a3346; display:grid; place-items:center; transition:.22s; } .opt .pip svg { width:9px; height:9px; stroke:#06080d; stroke-width:3.2; fill:none; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity .22s; } .opt.on { border-color:rgba(130,170,225,.48); background:linear-gradient(180deg,#151d2c,#111823); box-shadow:0 0 30px rgba(90,182,255,.10); } .opt.on .ico { stroke:#9fd4ff; } .opt.on .lab { color:#e8ecf5; } .opt.on .des { color:#93a8c2; } .opt.on .pip { border-color:transparent; background:var(--grad); } .opt.on .pip svg { opacity:1; } /* ---- chips, for a question with many short answers ---- */ .chips { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; } .chip { display:inline-flex; align-items:center; gap:9px; cursor:pointer; font:inherit; padding:12px 20px; border-radius:999px; border:1px solid var(--line); background:linear-gradient(180deg,var(--card-top),var(--card-bot)); font-size:13.5px; font-weight:600; color:#c2ccdd; transition:border-color .2s, background .2s, color .2s, transform .2s; } .chip:hover { transform:translateY(-2px); border-color:rgba(120,160,215,.4); } .chip .ico { width:17px; height:17px; stroke:#7e8aa5; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:stroke .2s; } .chip.on { border-color:rgba(130,170,225,.48); color:#e8ecf5; background:linear-gradient(180deg,#151d2c,#111823); box-shadow:0 0 26px rgba(90,182,255,.10); } .chip.on .ico { stroke:#9fd4ff; } .go { margin:38px 0 0; } @media (max-width:940px){ .split { grid-template-columns:1fr; } .plate { height:210px; } .pane { padding:44px 24px 130px; } .grid { grid-template-columns:1fr; } } /* ---- image placeholder. Charcoal, dark-mode, deliberately blank. Put a real image in and delete the .ph class. ---- */ .ph { position:relative; background:#101318; overflow:hidden; background-image: radial-gradient(ellipse 70% 55% at 50% 20%, rgba(150,170,205,.10), transparent 70%), linear-gradient(180deg,#141821 0%,#0d1016 100%); } .ph::before { content:""; position:absolute; inset:0; opacity:.5; background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size:34px 34px; } .ph::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 42%, rgba(110,194,255,.10), transparent 60%); } /* ---- SKIP. The real page control, top right of every question screen. It used to sit at the brightness of its own resting state and Gen could not find it, so the pill now rests at what used to be its hover, and hover itself glows red. Defined here once: a question screen carries the markup, never the styles. ---- */ .skip { position:fixed; z-index:5; top:30px; right:34px; font-family:Orbitron,-apple-system,sans-serif; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:#93a8c2; border:1px solid rgba(120,160,215,.28); background:rgba(7,9,15,.8); border-radius:20px; padding:8px 14px; cursor:pointer; text-decoration:none; transition:.2s; } .skip:hover { color:#ff8a94; border-color:rgba(255,77,94,.55); background:rgba(30,10,14,.72); box-shadow:0 0 20px rgba(255,77,94,.30), inset 0 0 12px rgba(255,77,94,.10); } /* ---- RUBI, guiding. She hovers over the step notches on every question screen and bobs on her own. The float sits on the img and never on .guide, because .guide carries .rise and a second animation on the same element clobbers the entrance. ---- */ .guide { position:relative; display:flex; justify-content:center; margin:-16px 0 36px; pointer-events:none; } .guide::before { content:""; position:absolute; left:50%; top:52%; width:172px; height:172px; margin:-86px 0 0 -86px; border-radius:50%; background:radial-gradient(circle, rgba(var(--tint),.30), rgba(110,194,255,.10) 46%, transparent 70%); animation:guidepulse 5s ease-in-out infinite; } .guide img { position:relative; width:96px; height:auto; display:block; filter:drop-shadow(0 10px 20px rgba(0,0,0,.6)); animation:guidefloat 5.6s ease-in-out infinite; } @keyframes guidefloat { 0%,100% { transform:translateY(0) rotate(-1.5deg); } 50% { transform:translateY(-9px) rotate(1.5deg); } } @keyframes guidepulse { 0%,100% { opacity:.65; transform:scale(1); } 50% { opacity:1; transform:scale(1.07); } } /* ---- the coin marks. coins.js draws them, this sizes them. ---- */ .coin { display:block; width:100%; height:100%; } /* ============================================================ MOBILE. Everything below 720px, and a tighter tier below 430px. The shell carries as much of this as it can, so a question screen is markup and never its own set of breakpoints. Two rules the whole set depends on: nothing may make the document wider than the viewport, and nothing decorative may be allowed to do it either - the drifting blobs are already clipped by .amb, and every plate clips its own artwork. ============================================================ */ @media (max-width:720px){ /* the two-column question screen becomes one column, art on top */ .split { grid-template-columns:1fr; min-height:100dvh; } .plate { height:180px; } .pane { padding:30px 20px 120px; justify-content:flex-start; } .inner { max-width:none; } /* the plate's lockup shrinks with it */ .mark { left:20px; top:18px; gap:10px; } .mark img { width:32px; height:32px; } .mark .lock { font-size:9px; } /* the back arrow and the skip pill move in off the corners */ .back { left:16px; top:16px; width:34px; height:34px; } .skip { top:16px; right:16px; font-size:8.5px; padding:7px 11px; } /* Rubi is smaller and closer, so the question still leads */ .guide { margin:-4px 0 20px; } .guide img { width:70px; } .guide::before { width:124px; height:124px; margin:-62px 0 0 -62px; } .steps { margin:0 0 30px; } .steps i { width:20px; } /* type comes down a step, and the headline is allowed to breathe */ .q h1 { font-size:25px; line-height:1.28; margin:0 0 18px; } .qsub { font-size:13.5px; margin:0 0 26px; } h1 { font-size:27px; } .lede { font-size:14.5px; } /* one column of options, and a button you can hit with a thumb */ .grid { grid-template-columns:1fr; gap:11px; } .opt { padding:16px 16px 15px; } .go { margin:30px 0 0; } .btn { width:100%; max-width:none; height:52px; letter-spacing:.16em; } .btn:hover { letter-spacing:.18em; } /* the centred card screens */ .card { padding:34px 22px 30px; border-radius:16px; } .card.wide, .card.full { max-width:none; } .gap { height:22px; } .wordmark { font-size:11px; } .rmark { width:40px; height:40px; } /* nothing decorative may widen the page */ body { overflow-x:hidden; } .amb, .amb i { pointer-events:none; } } @media (max-width:430px){ .pane { padding:24px 16px 116px; } .plate { height:150px; } .q h1 { font-size:22px; } .card { padding:28px 17px 24px; } .guide img { width:62px; } .btn { height:50px; font-size:11px; } .steps i { width:16px; } }