/* ============================================================================ Act 60 Sprint — design tokens + base type Source of truth: _ops/ACT60-UI-DESIGN-SYSTEM.md Self-contained (no third-party requests). Link this LAST in so the heading display face wins over each page's inline styles: Opt-in components are namespaced .a60-* so they never collide with page CSS. ============================================================================ */ /* Playfair Display — self-hosted variable font (OFL), latin subset. The closest free Didone to the collateral's Didot display face. */ @font-face{ font-family:"Playfair Display"; font-style:normal; font-weight:400 800; /* variable weight axis */ font-display:swap; src:url("/styles/fonts/playfair-display-latin-var.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root{ /* core palette */ --ink:#0f1d28; --navy:#0b1a26; --navy-panel:#13283a; --muted:#5d6f7c; --faint:#8aa0ab; --teal:#0e6e63; --teal-dark:#0a4f48; --teal-tint:#e4f1ee; --gold:#9a7b34; --gold-tint:#f3ecd9; --alert:#b1483a; --line:#e3ebef; --hair:#eff4f6; --paper:#fcfdfd; --cream:#f6f8f8; --white:#fff; /* on-dark accents */ --teal-bright:#46d8c6; --teal-soft:#7fd9cb; --ink-on-dark:#cddbe1; --faint-on-dark:#8197a2; /* type */ --font-display:"Playfair Display","Didot","Hoefler Text",Garamond,"Times New Roman",serif; --font-sans:"Helvetica Neue",Helvetica,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; /* spacing / radius / lines */ --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px; --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-pill:999px; --hairline:1px solid var(--line); } /* --- Global heading upgrade (the one intentional override) ---------------- */ h1,h2,.a60-display{ font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; } /* ============================================================================ Opt-in components (namespaced .a60-*) ============================================================================ */ .a60-eyebrow{font:500 .75rem/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-dark);margin:0 0 .5rem;} .a60-rule{display:block;width:58px;height:2.4px;background:var(--teal);margin:.55rem 0;border:0;} .a60-lead{font:300 1.125rem/1.5 var(--font-sans);color:var(--muted);} .a60-quoteline{font-family:var(--font-display);font-weight:400;} /* logo lockup */ .a60-mark{display:inline-flex;align-items:center;gap:.6em;} .a60-chip{position:relative;display:inline-flex;width:1.9em;height:1.9em;border-radius:.42em;background:var(--navy);flex:0 0 auto;} .a60-chip b{font-family:var(--font-display);color:#fff;font-size:1.05em;line-height:1;position:absolute;left:.24em;top:.04em;} .a60-chip i{font-style:normal;font-weight:700;color:var(--teal-bright);font-size:.5em;position:absolute;left:.95em;top:1em;} .a60-word{font-family:var(--font-sans);font-weight:500;letter-spacing:.14em;} .a60-on-dark .a60-chip{background:#17324b;box-shadow:inset 0 0 0 1px #3c5d72;} /* buttons */ .a60-btn{font:500 .95rem var(--font-sans);padding:.7em 1.4em;border-radius:var(--radius-pill);background:var(--teal);color:#fff;border:0;cursor:pointer;text-decoration:none;display:inline-block;transition:background .15s ease;} .a60-btn:hover{background:var(--teal-dark);} .a60-btn--ghost{background:transparent;color:var(--teal-dark);box-shadow:inset 0 0 0 1.5px var(--line);} .a60-btn:focus-visible{outline:2px solid var(--teal-dark);outline-offset:2px;} /* chips */ .a60-chip-tag{display:inline-block;font:500 .7rem var(--font-sans);letter-spacing:.08em;text-transform:uppercase;padding:.4em .8em;border-radius:var(--radius-pill);} .a60-chip-tag.is-light{background:var(--teal-tint);color:var(--teal-dark);} .a60-chip-tag.is-dark{color:#fff;box-shadow:inset 0 0 0 1.5px #3a5666;} /* accent card */ .a60-card{background:var(--paper);border:var(--hairline);border-left:3px solid var(--teal);border-radius:var(--radius-md);padding:1rem 1.1rem;} .a60-card__num{font:500 .75rem var(--font-sans);color:var(--teal);} .a60-card__title{font-family:var(--font-display);font-size:1.3125rem;margin:.15rem 0 .35rem;color:var(--ink);} .a60-card__body{font-size:.95rem;color:var(--muted);margin:0;} /* note / callout */ .a60-note{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;border-radius:var(--radius-sm);padding:.8rem 1rem;border-left:3px solid var(--teal);background:var(--teal-tint);} .a60-note.is-gold{border-left-color:var(--gold);background:var(--gold-tint);} .a60-note__label{font:500 .72rem var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dark);} .a60-note.is-gold .a60-note__label{color:#7a5b1e;} .a60-note__body{font-weight:500;color:var(--ink);} /* metric strip */ .a60-metrics{display:grid;grid-auto-flow:column;background:var(--cream);border:var(--hairline);border-radius:var(--radius-sm);} .a60-metric{padding:.9rem 1rem;border-left:var(--hairline);} .a60-metric:first-child{border-left:0;} .a60-metric__val{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4vw,2.75rem);color:var(--ink);line-height:1;} .a60-metric__lab{font:500 .68rem var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--teal-dark);margin-top:.4rem;} /* data table */ .a60-table{width:100%;border-collapse:collapse;font-size:.8125rem;} .a60-table thead th{background:var(--navy);color:#fff;font:500 .72rem var(--font-sans);letter-spacing:.04em;text-transform:uppercase;text-align:left;padding:.65rem .6rem;} .a60-table td{padding:.6rem;border-bottom:var(--hairline);color:var(--muted);vertical-align:top;} .a60-table td:first-child{color:var(--ink);} .a60-table tbody tr:nth-child(even){background:#fafcfc;} .a60-status{font-weight:500;} .a60-status.is-done{color:var(--teal-dark);} .a60-status.is-attn{color:var(--gold);} .a60-status.is-neutral{color:var(--muted);} .a60-status.is-blocked{color:var(--alert);} /* before / after */ .a60-ba{display:grid;gap:1rem;grid-template-columns:1fr 1fr;} .a60-ba__col{border:var(--hairline);border-left:3px solid #c4ccd0;border-radius:var(--radius-sm);padding:1rem 1.1rem;background:var(--hair);list-style:none;margin:0;} .a60-ba__col.is-after{border-left-color:var(--teal);background:var(--teal-tint);} .a60-ba__col li{list-style:none;margin:.5rem 0;font-size:1rem;color:var(--muted);} .a60-ba__col li::before{content:"\2715";color:#a4544a;margin-right:.6em;} .a60-ba__col.is-after li{color:var(--ink);} .a60-ba__col.is-after li::before{content:"\2713";color:var(--teal);} /* dark pull-quote block */ .a60-quote{background:var(--navy);color:#fff;padding:clamp(2rem,6vw,5rem);} .a60-quote .a60-quote__rule{width:64px;height:4px;background:var(--gold);margin:0 0 1rem;border:0;} .a60-quote blockquote{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,3vw,2rem);line-height:1.25;max-width:24ch;margin:0;} .a60-quote cite{display:block;margin-top:1rem;font:500 .75rem var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-soft);font-style:normal;} @media (max-width:640px){ .a60-ba{grid-template-columns:1fr;} .a60-metrics{grid-auto-flow:row;} .a60-metric{border-left:0;border-top:var(--hairline);} .a60-metric:first-child{border-top:0;} }