/* ══════════════════════════════════════════════════════════════════════════ GOAT Academy — Roadmap Placement Assessment Shared stylesheet for the assessment (index.html) and the coach dashboard (dashboard.html). Built to sit beside the Trading Roadmap: near-black surfaces, the roadmap's blue as the primary accent and its lime as the earned/complete accent, rounded flat cards, uppercase tracked labels, large ghosted numerals. THEME Dark is the base palette (bare :root), matching the roadmap. A viewer whose device prefers light gets light; the header toggle stamps data-theme on and wins over both. Every colour is a token — nothing below defines a colour inside a media query or a [data-theme] block. ══════════════════════════════════════════════════════════════════════════ */ :root{ /* surfaces */ --bg:#08090b; --surface:#121216; --surface-2:#17181d; --surface-hi:#1e2027; --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.17); /* ink */ --text:#f4f6f8; --text-2:#a7adb8; --text-3:#767d89; /* accents */ --blue:#2aa8f2; --blue-hi:#5cc0ff; --blue-wash:rgba(42,168,242,.13); --lime:#b4f035; --lime-ink:#b4f035; --lime-wash:rgba(180,240,53,.12); --amber:#f2a93b; --amber-wash:rgba(242,169,59,.13); --on-accent:#08090b; /* feature card (the roadmap's welcome panel) */ --feature:#0b2620; --feature-border:rgba(180,240,53,.20); /* header gradient */ --band:linear-gradient(90deg,#062622 0%,#0a5f8f 55%,#2aa8f2 100%); --on-band:#ffffff; --on-band-2:rgba(255,255,255,.80); --band-tile:rgba(255,255,255,.16); --band-tile-hi:rgba(255,255,255,.26); --band-line:rgba(255,255,255,.30); --track:rgba(255,255,255,.10); --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.28); --sans:'Poppins','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; --mono:'SF Mono','Cascadia Code',Menlo,Consolas,monospace; --r-xl:20px; --r-lg:14px; --r-md:11px; --r-sm:9px; --maxw:1180px; } @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]){ --bg:#eef1f5; --surface:#ffffff; --surface-2:#f6f8fa; --surface-hi:#eef1f5; --border:rgba(10,14,20,.11); --border-strong:rgba(10,14,20,.22); --text:#0d1117; --text-2:#4d5765; --text-3:#79828f; --blue:#0d7fc4; --blue-hi:#0a6ba6; --blue-wash:rgba(13,127,196,.10); --lime:#a5df22; --lime-ink:#5b7a06; --lime-wash:rgba(165,223,34,.20); --amber:#b3730c; --amber-wash:rgba(242,169,59,.20); --on-accent:#08090b; --feature:#e9f6f0; --feature-border:rgba(91,122,6,.24); --track:rgba(10,14,20,.10); --shadow:0 1px 2px rgba(10,14,20,.05), 0 8px 24px rgba(10,14,20,.07); } } :root[data-theme="light"]{ --bg:#eef1f5; --surface:#ffffff; --surface-2:#f6f8fa; --surface-hi:#eef1f5; --border:rgba(10,14,20,.11); --border-strong:rgba(10,14,20,.22); --text:#0d1117; --text-2:#4d5765; --text-3:#79828f; --blue:#0d7fc4; --blue-hi:#0a6ba6; --blue-wash:rgba(13,127,196,.10); --lime:#a5df22; --lime-ink:#5b7a06; --lime-wash:rgba(165,223,34,.20); --amber:#b3730c; --amber-wash:rgba(242,169,59,.20); --on-accent:#08090b; --feature:#e9f6f0; --feature-border:rgba(91,122,6,.24); --track:rgba(10,14,20,.10); --shadow:0 1px 2px rgba(10,14,20,.05), 0 8px 24px rgba(10,14,20,.07); } /* ── base ─────────────────────────────────────────────────────────────── */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ font-family:var(--sans);background:var(--bg);color:var(--text); font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased; } [hidden]{display:none !important} a{color:var(--blue)} :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px} .band{background:var(--band)} .band .top{ max-width:var(--maxw);margin:0 auto;padding:13px 22px;min-height:74px; } .band .wordmark{color:var(--on-band);font-size:clamp(16px,2vw,19px)} .band .brand-sub{color:var(--on-band-2);font-size:12.5px;margin-top:1px} .band .brand-mark{ width:42px;height:42px;flex:0 0 42px;border-radius:11px; background:var(--band-tile);border:1px solid var(--band-line);color:var(--on-band); } .band .brand-mark svg{width:22px;height:22px} .band .pill{background:var(--band-tile);border-color:var(--band-line);color:var(--on-band)} .band .pill.accent{background:var(--lime);border-color:transparent;color:var(--on-accent)} .band .icon-btn{background:var(--band-tile);border-color:var(--band-line);color:var(--on-band)} .band .icon-btn:hover{background:var(--band-tile-hi);color:var(--on-band)} @media (max-width:560px){.band .top{padding:11px 16px;min-height:64px}} .shell{max-width:var(--maxw);margin:0 auto;padding:34px 22px 90px} /* Framed in the community (app.js stamps data-embed), the tail of that padding is not breathing room, it is dead space inside someone else's card — and height the frame is asked to grow to. */ html[data-embed] .shell{padding-bottom:34px} .narrow{max-width:820px;margin:0 auto} /* ── header ───────────────────────────────────────────────────────────── */ .top{display:flex;align-items:center;gap:16px;padding:22px 0 18px;flex-wrap:wrap} .brand{display:flex;align-items:center;gap:14px;min-width:0} .brand-mark{ width:52px;height:52px;flex:0 0 52px;border-radius:14px; background:linear-gradient(150deg,var(--blue-hi),var(--blue)); display:flex;align-items:center;justify-content:center;color:#fff; } .brand-mark svg{width:26px;height:26px} .wordmark{ font-size:clamp(19px,2.6vw,25px);font-weight:800;line-height:1.02; letter-spacing:.005em;text-transform:uppercase;color:var(--blue); } .brand-sub{font-size:13.5px;color:var(--text-2);margin-top:3px} .top-right{margin-left:auto;display:flex;align-items:center;gap:10px} .pill{ font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; padding:8px 15px;border-radius:999px;background:var(--surface); border:1px solid var(--border);color:var(--text-2);white-space:nowrap; } .pill.accent{background:var(--lime);border-color:var(--lime);color:var(--on-accent);letter-spacing:.06em} .pill.blue{background:var(--blue-wash);border-color:transparent;color:var(--blue)} .icon-btn{ width:40px;height:40px;border-radius:999px;border:1px solid var(--border); background:var(--surface);color:var(--text-2);cursor:pointer; display:flex;align-items:center;justify-content:center; } .icon-btn:hover{color:var(--text);border-color:var(--border-strong)} .icon-btn svg{width:18px;height:18px} /* ── tabs ─────────────────────────────────────────────────────────────── */ .tabs{ display:flex;gap:30px;border-bottom:1px solid var(--border); margin-bottom:26px;overflow-x:auto;scrollbar-width:none; } .tabs::-webkit-scrollbar{display:none} .tab{ background:none;border:none;cursor:pointer;padding:12px 0 14px;white-space:nowrap; font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.11em; text-transform:uppercase;color:var(--text-3);border-bottom:2px solid transparent; } .tab:hover{color:var(--text-2)} .tab[aria-selected="true"]{color:var(--blue);border-bottom-color:var(--blue)} /* ── cards ────────────────────────────────────────────────────────────── */ .card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); padding:24px; } .card + .card{margin-top:18px} .card.feature{background:var(--feature);border-color:var(--feature-border)} .card.flush{padding:0;overflow:hidden} .label{ font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--blue); } .label.muted{color:var(--text-3)} .label.lime{color:var(--lime-ink)} h1{font-size:clamp(26px,4.4vw,36px);font-weight:800;line-height:1.12;letter-spacing:-.02em;text-wrap:balance} h2{font-size:21px;font-weight:700;letter-spacing:-.01em} h3{font-size:16px;font-weight:700} .lede{color:var(--text-2);font-size:16px;line-height:1.6} .small{font-size:13.5px;color:var(--text-2);line-height:1.55} .tiny{font-size:12.5px;color:var(--text-3)} .rule{ display:flex;align-items:center;gap:12px;margin-bottom:14px; font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3); } .rule::after{content:'';flex:1;height:1px;background:var(--border)} .quote{ font-size:17px;line-height:1.45;font-style:italic;color:var(--text); border-left:2px solid var(--lime);padding-left:16px; } /* ── buttons ──────────────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:inherit;font-size:15px;font-weight:700;line-height:1;cursor:pointer; padding:14px 24px;border-radius:999px;border:1px solid transparent; background:var(--blue);color:#fff;text-decoration:none;transition:filter .15s,background .15s; } .btn:hover{filter:brightness(1.08)} .btn:disabled{opacity:.45;cursor:not-allowed;filter:none} .btn.lime{background:var(--lime);color:var(--on-accent)} .btn.ghost{background:transparent;border-color:var(--border-strong);color:var(--text)} .btn.ghost:hover{background:var(--surface-2)} .btn.link{ background:none;border:none;padding:8px 2px;color:var(--text-2); font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:3px; } .btn.link:hover{color:var(--text);filter:none} .btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .btn-row .grow{flex:1} /* ── progress bar (assessment) ────────────────────────────────────────── */ .progress{position:sticky;top:0;z-index:10;background:var(--bg);padding:12px 0 16px} .progress-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px} .progress-label{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)} .progress-pct{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums} .track{height:6px;border-radius:999px;background:var(--track);overflow:hidden} .track-fill{height:100%;border-radius:999px;background:var(--blue);transition:width .35s cubic-bezier(.22,1,.36,1)} .track-fill.lime{background:var(--lime)} /* ── questions ────────────────────────────────────────────────────────── */ .q-kicker{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:12px} .q-text{font-size:23px;font-weight:700;line-height:1.3;letter-spacing:-.015em;margin-bottom:22px;text-wrap:pretty} .opts{display:flex;flex-direction:column;gap:10px} .opt{ display:flex;gap:13px;align-items:flex-start;cursor:pointer; background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md); padding:15px 16px;transition:border-color .15s,background .15s; } .opt:hover{border-color:var(--border-strong)} .opt input{position:absolute;opacity:0;width:0;height:0} .opt .dot{ flex:0 0 20px;width:20px;height:20px;margin-top:2px;border-radius:999px; border:2px solid var(--text-3);display:flex;align-items:center;justify-content:center;transition:.15s; } .opt .dot::after{content:'';width:9px;height:9px;border-radius:999px;background:transparent;transition:.15s} .opt span.txt{font-size:15px;line-height:1.5;color:var(--text-2)} .opt:has(input:checked){border-color:var(--blue);background:var(--blue-wash)} .opt:has(input:checked) .dot{border-color:var(--blue)} .opt:has(input:checked) .dot::after{background:var(--blue)} .opt:has(input:checked) span.txt{color:var(--text)} .opt:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px} /* ── forms ────────────────────────────────────────────────────────────── */ .field{margin-bottom:16px} .field label{ display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--text-3);margin-bottom:7px; } .field input{ width:100%;font-family:inherit;font-size:16px;color:var(--text); background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 15px; } .field input::placeholder{color:var(--text-3)} .field input:focus{outline:none;border-color:var(--blue)} .err{color:var(--amber);font-size:14px;margin-top:10px} /* ── result layout ────────────────────────────────────────────────────── */ .result-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start} .rail{display:flex;flex-direction:column;gap:18px;position:sticky;top:18px} @media (max-width:940px){ .result-grid{grid-template-columns:minmax(0,1fr)} .rail{position:static} } .month-hero{display:flex;align-items:flex-start;gap:20px} .month-numeral{ font-size:clamp(58px,9vw,86px);font-weight:800;line-height:.85;letter-spacing:-.05em; color:var(--text);opacity:.13;font-variant-numeric:tabular-nums; } .month-name{font-size:clamp(24px,4vw,32px);font-weight:800;letter-spacing:-.025em;line-height:1.1} .month-tag{font-size:15px;color:var(--text-2);font-style:italic;margin-top:6px} /* ── the "do this next" plan ──────────────────────────────────────────── */ .plan{display:flex;flex-direction:column;gap:2px} .plan-item{display:flex;gap:15px;padding:15px 0;border-top:1px solid var(--border)} .plan-item:first-child{border-top:none;padding-top:4px} .plan-key{ flex:0 0 34px;height:34px;border-radius:var(--r-sm);background:var(--blue-wash);color:var(--blue); display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px; } .plan-item.first .plan-key{background:var(--lime);color:var(--on-accent)} .plan-body{min-width:0} .plan-title{font-weight:700;font-size:15.5px;line-height:1.4} .plan-why{font-size:13.5px;color:var(--text-2);margin-top:4px;line-height:1.5} /* ── steps list ───────────────────────────────────────────────────────── */ .steps{list-style:none;counter-reset:s;display:flex;flex-direction:column} .steps li{ counter-increment:s;display:flex;gap:14px;padding:13px 0; border-top:1px solid var(--border); } .steps li:first-child{border-top:none} .steps li::before{ content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:12px;font-weight:700; color:var(--blue);flex:0 0 auto;padding-top:2px;font-variant-numeric:tabular-nums; } .steps .st{display:block;font-weight:700;font-size:15px} .steps .sb{display:block;font-size:13.5px;color:var(--text-2);margin-top:3px;line-height:1.5} .bullets{list-style:none;display:flex;flex-direction:column;gap:10px} .bullets li{display:flex;gap:11px;font-size:15px;color:var(--text-2);line-height:1.5} .bullets li::before{content:'';flex:0 0 6px;width:6px;height:6px;border-radius:999px;background:var(--blue);margin-top:9px} .obj{list-style:none;display:flex;flex-direction:column;gap:9px} .obj li{ font-style:italic;font-size:15px;color:var(--text-2);line-height:1.45; border-left:2px solid var(--border);padding-left:14px; } .callout{ border-radius:var(--r-md);padding:15px 17px;background:var(--surface-2); border-left:3px solid var(--lime);font-size:14.5px;color:var(--text-2);line-height:1.55; } .callout .label{display:block;margin-bottom:5px} .homework{ border:1px dashed var(--border-strong);border-radius:var(--r-md); padding:15px 17px;font-size:14px;color:var(--text-2);line-height:1.55; } .chips{display:flex;flex-wrap:wrap;gap:9px} .chips a{ font-size:12.5px;font-weight:600;text-decoration:none;color:var(--text-2); border:1px solid var(--border);border-radius:999px;padding:8px 14px;background:var(--surface-2); } .chips a:hover{border-color:var(--blue);color:var(--blue)} /* ── skill bars ─────────────────────────────────────────────────────── Magnitude, one hue. The band (Strong / Developing / Foundation) is always written out beside the bar — never carried by colour alone. */ .skills{display:flex;flex-direction:column;gap:18px} .skill-top{display:flex;align-items:baseline;gap:10px;margin-bottom:7px;flex-wrap:wrap} .skill-name{font-weight:700;font-size:14.5px} .skill-band{ font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:3px 9px;border-radius:999px; } .skill-band.strong{background:var(--lime-wash);color:var(--lime-ink)} .skill-band.developing{background:var(--blue-wash);color:var(--blue)} .skill-band.foundation{background:var(--amber-wash);color:var(--amber)} .skill-pct{ margin-left:auto;font-family:var(--mono);font-size:13px;font-weight:700; font-variant-numeric:tabular-nums;color:var(--text); } .skill-track{height:9px;border-radius:999px;background:var(--track);overflow:hidden} .skill-fill{height:100%;border-radius:999px;background:var(--blue);transition:width .5s cubic-bezier(.22,1,.36,1)} .skill-fill.is-focus{background:var(--amber)} .skill-note{font-size:13px;color:var(--text-3);margin-top:6px;line-height:1.5} /* ── donut (placement / progress) ─────────────────────────────────────── */ .donut{display:flex;align-items:center;gap:16px} .donut svg{flex:0 0 88px;width:88px;height:88px;transform:rotate(-90deg)} .donut .ring-track{stroke:var(--track)} .donut .ring-fill{stroke:var(--blue);stroke-linecap:round;transition:stroke-dasharray .6s cubic-bezier(.22,1,.36,1)} .donut-num{font-size:26px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums} .donut-sub{font-size:13px;color:var(--text-2);margin-top:4px} /* ── history ──────────────────────────────────────────────────────────── */ .history{display:flex;flex-direction:column;gap:0} .h-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border)} .h-row:first-child{border-top:none} .h-month{ flex:0 0 auto;font-family:var(--mono);font-size:12px;font-weight:700; padding:5px 10px;border-radius:999px;background:var(--surface-hi);color:var(--text); } .h-row.latest .h-month{background:var(--lime);color:var(--on-accent)} .h-when{font-size:13px;color:var(--text-3)} .h-delta{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--lime-ink)} .h-delta.flat{color:var(--text-3)} /* ── dashboard ────────────────────────────────────────────────────────── */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:18px} .tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px} .tile-label{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)} .tile-value{font-size:34px;font-weight:800;line-height:1.05;margin-top:10px;font-variant-numeric:tabular-nums} .tile-note{font-size:13px;color:var(--text-2);margin-top:5px} .dist{display:flex;flex-direction:column;gap:12px} .dist-row{display:flex;align-items:center;gap:14px} .dist-key{flex:0 0 152px;font-size:13.5px;font-weight:700;line-height:1.3} .dist-key span{display:block;font-size:12px;font-weight:400;color:var(--text-3)} .dist-track{flex:1;height:22px;border-radius:6px;background:var(--track);overflow:hidden} .dist-fill{height:100%;border-radius:6px;background:var(--blue);transition:width .4s} .dist-val{ flex:0 0 auto;font-family:var(--mono);font-size:13px;font-weight:700; font-variant-numeric:tabular-nums;min-width:56px;text-align:right; } .table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)} table.data{width:100%;border-collapse:collapse;font-size:14px;min-width:720px} table.data th{ text-align:left;padding:13px 16px;font-size:11px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--border);white-space:nowrap; } table.data td{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:middle} table.data tr:last-child td{border-bottom:none} table.data td.num{font-family:var(--mono);font-variant-numeric:tabular-nums} .tag{ display:inline-block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; padding:4px 10px;border-radius:999px;background:var(--surface-hi);color:var(--text-2);white-space:nowrap; } .tag.review{background:var(--amber-wash);color:var(--amber)} .tag.ok{background:var(--lime-wash);color:var(--lime-ink)} .tag.blue{background:var(--blue-wash);color:var(--blue)} .empty{padding:44px 24px;text-align:center;color:var(--text-3);font-size:14.5px} /* ── misc ─────────────────────────────────────────────────────────────── */ .stack{display:flex;flex-direction:column;gap:18px} .gap-sm{display:flex;flex-direction:column;gap:10px} .mt{margin-top:22px} .mt-s{margin-top:12px} .foot{margin-top:36px;font-size:12.5px;color:var(--text-3);line-height:1.6;max-width:70ch} @media (max-width:560px){ .shell{padding:24px 16px 70px} .card{padding:19px} .q-text{font-size:20px} .month-hero{gap:14px} } @media (prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important} html{scroll-behavior:auto} } @media print{ .no-print{display:none !important} body{background:#fff;color:#000} .card{break-inside:avoid;border-color:#ccc} } /* ── month card ──────────────────────────────────────────────────────── The anatomy of a month on the roadmap: a large ghosted numeral, the month label above its title, an italic tagline, a completion ring on the right, and a hairline progress line under the header. Mirrored here so a member meets their month in the shape they will meet it again on the roadmap. */ .mcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden} .mcard.feature{background:var(--feature);border-color:var(--feature-border)} .mcard-head{display:flex;align-items:center;gap:22px;padding:26px 26px 20px} .mcard-num{ font-size:clamp(52px,8vw,76px);font-weight:800;line-height:.82;letter-spacing:-.05em; color:var(--text);opacity:.12;font-variant-numeric:tabular-nums;flex:0 0 auto; } .mcard-title{min-width:0;flex:1} .mcard-title h2{font-size:clamp(21px,3.4vw,29px);font-weight:800;letter-spacing:-.025em;line-height:1.12;margin-top:5px} .mcard-tag{font-size:14.5px;font-style:italic;color:var(--text-2);margin-top:6px} .mcard-meta{display:flex;align-items:center;gap:14px;flex:0 0 auto} .mcard-meta .ring-label{font-size:12.5px;color:var(--text-2);text-align:right;max-width:104px;line-height:1.35} .mcard-line{height:3px;background:var(--track)} .mcard-line i{display:block;height:100%;background:var(--blue)} .mcard-body{padding:20px 26px 26px} @media (max-width:620px){ .mcard-head{flex-wrap:wrap;gap:14px;padding:20px 19px 16px} .mcard-meta{width:100%;justify-content:flex-start} .mcard-body{padding:16px 19px 20px} } /* ── the six-month path ──────────────────────────────────────────────── The roadmap's M01–M06 strip. Here it marks where a member joins it. */ .segbar{display:flex;gap:7px} .seg{flex:1;text-align:center} .seg i{display:block;height:6px;border-radius:999px;background:var(--track)} .seg.before i{background:var(--blue);opacity:.45} .seg.here i{background:var(--lime)} .seg span{ display:block;margin-top:8px;font-family:var(--mono);font-size:10.5px;font-weight:700; letter-spacing:.04em;color:var(--text-3); } .seg.here span{color:var(--lime-ink)} /* ── next up ───────────────────────────────────────────────────────────── */ .nextup .label{display:block;margin-bottom:6px} .nextup h3{font-size:17px;line-height:1.3;letter-spacing:-.01em} .nextup p{font-size:13.5px;color:var(--text-2);margin-top:6px;line-height:1.5} .nextup a.go{ display:inline-flex;align-items:center;gap:7px;margin-top:14px;text-decoration:none; font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--lime-ink); } .nextup a.go:hover{filter:brightness(1.15)} .ring{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 80px} .ring b{ position:absolute;font-size:16px;font-weight:800;letter-spacing:-.02em; font-variant-numeric:tabular-nums;color:var(--text); } .path-month{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1;margin-bottom:16px} /* The main container is focused programmatically after each screen change so screen readers announce it. That must not paint a focus ring — only real keyboard focus on real controls should. */ #app:focus,#app:focus-visible{outline:none}