/* ============================================================================ Ascend design system — tokens + base + components The single apply primitive for /apply-ascend-brand. Link this after the four Google Fonts, set theme with (default light) or . Token reference: references/design-system.md ========================================================================== */ /* ---- LIGHT (canonical) --------------------------------------------------- */ :root{ /* surfaces */ --bg:#FFFFFF; --surface:#FFFFFF; --band:#F2F2F2; --bg-alt:#F2F2F2; --bg-inset:#F7F7F5; /* nav rail / inset chrome — sits behind content */ --black-20:#CBCBCB; /* neutral track — utilization bars, dividers on fills */ /* foreground ramp */ --fg:#111111; --fg-muted:#2C2B2B; --fg-subtle:#5E5E5E; --fg-faint:#989898; /* accent (Blue 60) */ --accent:#2D7DD2; --accent-hover:#1E72C8; --accent-press:#104B8A; --accent-10:#EAF2FB; --accent-80:#1A4E86; --on-accent:#FFFFFF; /* caution (Gold 60) — attention only, never decoration, never the regulated marker */ --gold:#B78428; --secondary:#B78428; --warning:#A8751A; --gold-10:#FFF5E3; --gold-80:#7A5616; /* success (Green) */ --green:#1F7A4B; --success:#1F7A4B; --green-10:#E8F4EE; --green-80:#145C37; /* danger (Red) */ --red:#A4262C; --danger:#A4262C; --red-10:#FBEBEC; --red-80:#7A1B20; /* lines + elevation */ --hair:rgba(17,17,17,0.10); --border:rgba(17,17,17,0.10); --hair-2:rgba(17,17,17,0.18); --border-strong:rgba(17,17,17,0.20); --focus-ring:#629EDE; --shadow-1:0 4px 10px rgba(0,0,0,0.05); /* radii */ --radius-sm:2px; --r-btn:8px; --radius-md:8px; --r-card:12px; --radius-lg:12px; --radius-xl:16px; --r-pill:999px; --radius-pill:999px; /* spacing scale: 2 4 8 12 24 36 60 80 */ --space-xxs:2px; --space-xs:4px; --space-s:8px; --space-m:12px; --space-l:24px; --space-xl:36px; --space-xxl:60px; --space-xxxl:80px; /* display sizes — hero metric only (sole exception to the 24px Inter ceiling) */ --fs-hero:48px; --fs-hero-mobile:36px; /* type */ --sans:"Figtree",system-ui,sans-serif; --ui:"Inter",system-ui,sans-serif; --serif:"Literata",Georgia,serif; --mono:"JetBrains Mono",ui-monospace,monospace; /* motion */ --motion-fast:150ms ease-out; --motion-base:200ms ease-out; } /* ---- DARK ---------------------------------------------------------------- Canonical · ratified by the Ascend design owner (2026-06-18). Derived from the Foundations seed (page #111111, card #1E1E1E, accent -> Blue 40 #629EDE, semantic ramps inverted to translucent-fill + light-ink, borders rgba(255,255,255,0.08)) extended to a complete map. The regulated layer is marked by form, not hue, so it survives this theme unchanged. Derivation recipe: references/voice-and-usage.md. ------------------------------------------------------------------------- */ [data-theme="dark"]{ --bg:#111111; --surface:#1B1B1D; --band:#242427; --bg-alt:#242427; --bg-inset:#0B0B0B; /* nav rail — darkest surface */ --black-20:rgba(255,255,255,0.14); /* neutral track on dark */ --fg:#F2F2F2; --fg-muted:#D4D4D6; --fg-subtle:#9B9BA0; --fg-faint:#6E6E73; --accent:#629EDE; --accent-hover:#7FB0E6; --accent-press:#4A8AD0; --accent-10:rgba(98,158,222,0.16); --accent-80:#A7CBEF; --on-accent:#111111; --gold:#D6A23C; --secondary:#D6A23C; --warning:#D6A23C; --gold-10:rgba(214,162,60,0.16); --gold-80:#E8C685; --green:#3FA76B; --success:#3FA76B; --green-10:rgba(63,167,107,0.18); --green-80:#7DD3A6; --red:#E0575C; --danger:#E0575C; --red-10:rgba(224,87,92,0.18); --red-80:#F3A1A4; --hair:rgba(255,255,255,0.08); --border:rgba(255,255,255,0.08); --hair-2:rgba(255,255,255,0.16); --border-strong:rgba(255,255,255,0.16); --focus-ring:#7FB0E6; --shadow-1:0 4px 12px rgba(0,0,0,0.50); } /* ---- base ---------------------------------------------------------------- */ *{box-sizing:border-box;} .pagehead[id],section[id]{scroll-margin-top:72px;} /* anchor offset: clears the sticky .topnav on in-page jumps (single mechanism, ~72px below nav) */ html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--ui); font-size:13.5px;line-height:1.45;-webkit-font-smoothing:antialiased; transition:background var(--motion-base),color var(--motion-base);} .wrap{max-width:1200px;margin:0 auto;padding:20px 36px 48px;} h1,h2,h3{font-family:var(--sans);font-weight:600;margin:0;letter-spacing:-0.01em;color:var(--fg);} h1{font-size:26px;line-height:1.12;} h2{font-size:15px;font-weight:600;margin:0 0 4px;} h3{font-size:13px;font-weight:600;} p{margin:0;} a{color:var(--accent);text-decoration:none;} a:hover{text-decoration:underline;} .num{font-variant-numeric:tabular-nums;} .mono,.addr{font-family:var(--mono);font-variant-numeric:tabular-nums;overflow-wrap:break-word;} .eyebrow{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:0.10em; text-transform:uppercase;color:var(--fg-faint);} .sub{color:var(--fg-subtle);font-size:13px;max-width:70ch;} .lede{font-size:14.5px;color:var(--fg);max-width:80ch;margin-top:10px;} .fine{font-family:var(--serif);font-style:italic;font-size:12px;color:var(--fg-subtle);line-height:1.45;} /* focus + reduced motion (a11y) */ :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:3px;} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none!important;animation:none!important;} } /* ---- theme-switch guard -------------------------------------------------- * Suppress transitions for exactly the flip frame so a theme change SNAPS instead of letting every element animate its colour on its own clock (the staggered "blotty" wipe). The toggle adds `theme-switching` to , flips the theme, then removes it on the next frame — so hover/other transitions are untouched. Reduced-motion is already handled by the rule above; this only covers the normal theme-switch case. MUST stay outside any media query. */ html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after{transition:none!important;} /* ---- top nav ------------------------------------------------------------- */ .topnav{display:flex;align-items:center;justify-content:space-between;gap:24px; border-bottom:1px solid var(--hair);padding:14px 0;position:sticky;top:0; background:var(--bg);z-index:5;} .topnav .left{display:flex;align-items:center;gap:22px;} .logo{height:24px;width:auto;display:block;} .navlinks{display:flex;gap:4px;} .navlinks a{font-size:12.5px;font-weight:600;color:var(--fg-subtle);padding:5px 11px; border-radius:var(--r-pill);transition:background var(--motion-fast),color var(--motion-fast);} .navlinks a:hover{background:var(--band);color:var(--fg);text-decoration:none;} .navlinks a.active{background:var(--accent-10);color:var(--accent-80);} .tag{font-size:10.5px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase; color:var(--fg-subtle);border:1px solid var(--hair);border-radius:var(--r-pill); padding:3px 10px;white-space:nowrap;} /* mobile nav — a horizontal nav must collapse on phones, or the links run off-screen and force horizontal page scroll. Pair the .nav-toggle hamburger button (markup + a small ascendToggleNav() handler) with .topnav; the links become a dropdown <=760px. */ .nav-toggle{display:none;align-items:center;justify-content:center;height:30px;width:34px;padding:0; border:1px solid var(--hair);border-radius:8px;background:var(--bg);color:var(--fg);cursor:pointer;} .nav-toggle svg{width:16px;height:16px;display:block;} @media(max-width:760px){ .nav-toggle{display:inline-flex;} .topnav{gap:12px;} .topnav .left{gap:14px;} .tag{display:none;} .navlinks{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:2px;margin:0; background:var(--bg);border-bottom:1px solid var(--hair);box-shadow:0 10px 24px rgba(0,0,0,.07); padding:8px 16px 14px;max-height:0;overflow:hidden;opacity:0;pointer-events:none; transition:max-height var(--motion-fast),opacity var(--motion-fast);} .topnav.nav-open .navlinks{max-height:75vh;overflow:auto;opacity:1;pointer-events:auto;} .navlinks a{font-size:14px;padding:10px 12px;} } /* overflow guards: grid/flex items must shrink below their content's intrinsic width so a wide child (table/diagram) scrolls inside .tbl-scroll/.dgm-scroll instead of flooring the track at min-content on mobile (the classic grid/flex min-width:auto overflow). */ .kpi-strip>*,.tbl-scroll,.dgm-scroll{min-width:0;} /* ---- application shell (sidenav + topbar) -------------------------------- */ /* token-driven replacements for the prototype's inline React styles (AdminShell). */ .app-sidenav{width:240px;border-right:1px solid var(--hair);background:var(--bg-inset);} .nav-group-eyebrow{font-family:var(--ui);font-weight:500;font-size:10px;line-height:14px; letter-spacing:0.08em;text-transform:uppercase;color:var(--fg-subtle);} .nav-item{display:flex;align-items:center;gap:10px;color:var(--fg-muted); transition:color var(--motion-fast),background var(--motion-fast);} .nav-item:hover{color:var(--fg);} .nav-item.active{background:var(--accent-10);color:var(--accent-80);box-shadow:inset 3px 0 0 var(--accent);} .app-topbar{height:56px;border-bottom:1px solid var(--hair);background:var(--bg);} /* env tag: regulated layer marked by FORM (outline pill + gold caution dot), not a fill hue */ .env-tag{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px; border:1px solid var(--hair-2);border-radius:var(--r-pill);font-family:var(--ui); font-size:12px;font-weight:500;color:var(--fg);white-space:nowrap;} .env-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;} .pagehead{padding:24px 0 4px;} section{margin-top:24px;} .sec-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;} .sec-head .n{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:500;} /* ---- cards --------------------------------------------------------------- */ .card{border:1px solid var(--hair);border-radius:var(--r-card);padding:20px;background:var(--surface);} .card.lead{border-color:var(--accent);box-shadow:var(--shadow-1);background:var(--accent-10);} .card.accent-top{border-top:3px solid var(--accent);} /* ---- hero KPI + hairline strip (one hero metric, never equal-weight cards) */ .kpi{display:flex;flex-direction:column;gap:6px;} .kpi .k-label{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:0.06em; text-transform:uppercase;color:var(--fg-subtle);} /* hero display metric: the one number 24px or larger per view — the sole exception to the Inter ceiling. Exactly one .k-value per view; supporting stats stay ≤ 24px. */ .kpi .k-value{font-family:var(--ui);font-weight:700;font-size:var(--fs-hero);line-height:52px; letter-spacing:-0.018em;font-variant-numeric:tabular-nums;color:var(--fg);} @media(max-width:760px){ .kpi .k-value{font-size:var(--fs-hero-mobile);line-height:40px;} } .kpi .k-sub{font-size:12px;color:var(--fg-subtle);} .kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair); border:1px solid var(--hair);border-radius:var(--r-btn);overflow:hidden;margin-top:16px;} .kpi-strip .cell{background:var(--surface);padding:12px 14px;display:flex;flex-direction:column;gap:3px;} .kpi-strip .cell .l{font-size:10.5px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--fg-faint);} .kpi-strip .cell .v{font-family:var(--ui);font-weight:600;font-size:18px;font-variant-numeric:tabular-nums;color:var(--fg);} .kpi-strip .cell .d{font-size:10.5px;color:var(--fg-subtle);line-height:1.3;} @media(max-width:760px){ .kpi-strip{grid-template-columns:repeat(2,1fr);} } @media(max-width:440px){ .kpi-strip{grid-template-columns:1fr;} } /* ---- buttons ------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px; border-radius:var(--r-btn);font-family:var(--ui);font-size:13px;font-weight:500; border:1px solid transparent;cursor:pointer;text-decoration:none; transition:background var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast);} .btn-primary{background:var(--accent);color:var(--on-accent);} .btn-primary:hover{background:var(--accent-hover);text-decoration:none;} .btn-secondary{background:transparent;border-color:var(--hair-2);color:var(--fg);} .btn-secondary:hover{background:var(--band);text-decoration:none;} .btn-ghost{background:transparent;color:var(--accent);} .btn-ghost:hover{background:var(--accent-10);text-decoration:none;} /* caution-tier confirm only (Pause / at-risk) — the ONLY interactive gold */ .btn-caution{background:var(--gold);color:var(--on-accent);} .btn-caution:hover{filter:brightness(1.05);text-decoration:none;} /* disabled — --band fill + --fg-faint ink + --hair border, identical in both themes, never opacity (at 50% the accent reads "broken" in light but "enabled-dim" in dark) */ .btn:disabled,.btn[disabled],.btn[aria-disabled="true"]{background:var(--band);color:var(--fg-faint); border-color:var(--hair);cursor:not-allowed;filter:none;} input:disabled,select:disabled,textarea:disabled{background:var(--band);color:var(--fg-faint); border-color:var(--hair);cursor:not-allowed;} /* ---- status pills + chips ------------------------------------------------ */ .pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600; border-radius:var(--r-pill);padding:3px 10px;line-height:1.4;white-space:nowrap;} .pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;} .pill.nominal{background:var(--green-10);color:var(--green-80);} .pill.caution{background:var(--gold-10);color:var(--gold-80);} .pill.critical{background:var(--red-10);color:var(--red-80);} .pill.neutral{background:var(--band);color:var(--fg-subtle);} .chip{display:inline-flex;align-items:center;font-size:10px;font-weight:600; border-radius:var(--r-pill);padding:2px 8px;background:var(--accent-10);color:var(--accent-80);} .chip.gold{background:var(--gold-10);color:var(--gold-80);} .chip.neutral{background:var(--band);color:var(--fg-subtle);} /* token chip: mark + symbol */ .token-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;} .token-chip .tk-mark{width:14px;height:14px;border-radius:50%;background:var(--accent-10); display:inline-flex;align-items:center;justify-content:center;font-size:8px;color:var(--accent-80);} /* ---- mono address (click-to-copy) --------------------------------------- */ .addr{font-size:12.5px;color:var(--fg);cursor:pointer;border-bottom:1px dotted var(--hair-2);} .addr:hover{color:var(--accent);} /* ---- tables -------------------------------------------------------------- */ table.matrix{width:100%;border-collapse:collapse;font-size:12px;} table.matrix th,table.matrix td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--hair); vertical-align:top;line-height:1.35;} table.matrix th{font-family:var(--ui);font-weight:700;font-size:10px;letter-spacing:0.04em; text-transform:uppercase;color:var(--fg-faint);} table.matrix td.num{font-variant-numeric:tabular-nums;text-align:right;} table.matrix th.num{text-align:right;} .tbl-scroll{overflow-x:auto;} @media(max-width:767px){ table.matrix{min-width:560px;} } /* ---- utilization / capacity bar (two-tier: blue default, gold above 80%) ----- */ /* The documented markup (references/components.md §10) is a wrapping an inline-by-default fill: . A bare inline ignores height/overflow and gives the no box to size against, so the track must be forced to a block: display:block + width:100% makes the a full-width sized track; .util>i is display:block;height:100% with its width driven by the inline style. .util.warn>i is the gold variant >80%. */ .util{display:block;width:100%;height:3px;background:var(--black-20);border-radius:var(--radius-sm);overflow:hidden;} .util.standalone{height:6px;} .util>i{display:block;height:100%;background:var(--accent);border-radius:var(--radius-sm);} .util.warn>i{background:var(--gold);} /* ---- mock-data strip (caution register) ---------------------------------- */ .mockstrip{background:var(--gold-10);border:1px solid var(--gold);border-color:color-mix(in srgb,var(--gold) 35%,transparent); border-radius:var(--r-btn);padding:7px 12px;font-size:11px;color:var(--gold-80); display:flex;align-items:center;gap:8px;} .mockstrip svg{width:13px;height:13px;flex:none;} /* quiet whole-page register — sticky footer strip (no chip glyph, neutral ink) */ .mockstrip.footer{position:sticky;bottom:0;left:0;right:0;justify-content:center; background:var(--surface);border:none;border-top:1px solid var(--hair);border-radius:0; color:var(--fg-faint);font-size:12px;padding:6px 24px;z-index:2;} .mockstrip.footer svg{display:none;} /* ---- key-insight / decision card (top-accent) ---------------------------- */ .keyinsight{border:1px solid var(--hair);border-top:3px solid var(--accent);border-radius:var(--r-card); padding:14px 16px;font-size:13.5px;line-height:1.5;background:var(--surface);} .keyinsight .kihead{display:flex;align-items:center;gap:8px;margin-bottom:8px;} .keyinsight .kihead svg{width:15px;height:15px;color:var(--accent);} /* ---- disclosure ---------------------------------------------------------- */ .disclosure{border:1px solid var(--hair);border-radius:var(--r-btn);background:var(--surface);} .disclosure>summary{cursor:pointer;padding:11px 14px;font-family:var(--sans);font-weight:600; font-size:12.5px;list-style:none;display:flex;align-items:center;gap:8px;color:var(--fg);} .disclosure>summary::-webkit-details-marker{display:none;} .disclosure>summary::before{content:"+";font-family:var(--mono);color:var(--accent);font-weight:700;} .disclosure[open]>summary::before{content:"\2013";} .disclosure .dbody{padding:0 14px 14px;} /* ---- tooltip (abbr) ------------------------------------------------------ */ abbr[data-tip]{position:relative;text-decoration:underline dotted;text-decoration-thickness:1px; text-underline-offset:2px;cursor:help;} abbr[data-tip]:hover::after{ content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 7px);z-index:30; width:max-content;max-width:250px;background:var(--fg);color:var(--bg); font-family:var(--ui);font-style:normal;font-weight:400;font-size:11.5px;line-height:1.45; letter-spacing:0;text-transform:none;text-align:left;padding:8px 11px;border-radius:var(--r-btn); box-shadow:var(--shadow-1);white-space:normal;pointer-events:none;} abbr[data-tip]:hover::before{content:"";position:absolute;left:9px;bottom:calc(100% + 2px);z-index:30; border:5px solid transparent;border-top-color:var(--fg);pointer-events:none;} /* ---- footer / signature block -------------------------------------------- */ .foot{margin-top:28px;border-top:1px solid var(--hair);padding-top:14px; display:flex;flex-direction:column;gap:11px;} .foot .frow{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;} .foot .dleft{display:flex;gap:9px;align-items:flex-start;max-width:88ch;} .foot .dleft svg{width:14px;height:14px;color:var(--fg-faint);margin-top:1px;flex:none;} .foot .meta{font-size:11px;color:var(--fg-faint);} .author{display:flex;align-items:center;gap:11px;} .avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1.5px solid var(--accent);display:block;} /* initials avatar — use when there is no person photo (the mountain Mark is logo only, never an avatar) */ .avatar-initials{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--accent);background:var(--accent-10); display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:700;font-size:14px;color:var(--accent-80);} .author .an{font-family:var(--sans);font-weight:600;font-size:13px;color:var(--fg);} .author .at{font-size:11px;color:var(--fg-subtle);margin-top:1px;} /* ---- theme toggle (utility) --------------------------------------------- */ .theme-toggle{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px; border:1px solid var(--hair-2);border-radius:var(--r-pill);background:transparent; color:var(--fg-subtle);font-family:var(--ui);font-size:11.5px;font-weight:600;cursor:pointer; transition:background var(--motion-fast),color var(--motion-fast);} .theme-toggle:hover{background:var(--band);color:var(--fg);} /* ---- print --------------------------------------------------------------- */ @media print{ @page{size:A4;margin:12mm;} html,body{background:#fff;color:#111;} .wrap{padding:0;max-width:none;} .topnav{position:static;} .theme-toggle{display:none;} section{break-inside:avoid;} .card,.kpi-strip,.keyinsight{box-shadow:none;} }