/* ============================================================ ay-brand.css — AY · STRUCTURAL · v1 · LOCKED Single source of truth for all AY web surfaces (Law 01). Web pages LINK this file. Never inline these values, never redeclare a hex locally. Tokens transcribed verbatim from AY_Brand_Guidelines_Master_Book_v1.html — do not edit until after founding client #5 (Law 05), and then only by versioned amendment (STRUCTURAL v1.1) with a changelog entry. ============================================================ */ :root{ /* core — 95% of all work */ --graphite:#17191C; /* ink, dark surfaces */ --bone:#F5F1E8; /* paper, primary bg */ --steel:#6E7378; /* structure, labels ≥13px, hairlines — never body copy */ --ember:#C4471F; /* accent, ≤5% of any surface */ /* extended */ --ink-70:#3A3D42; --paper-raised:#FBF9F3; --panel:#ECE7DB; --hairline:#CFC9BC; --steel-tint:rgba(110,115,120,.12); /* dark surfaces */ --ink-surface:#121316; --ink-elevated:#1B1D21; --on-dark:#EFEBE1; --steel-on-dark:#9A9EA4; /* functional — dashboard state only, NOT brand colors */ --fn-positive:#4E7A52; --fn-negative:#9E3B2E; --fn-warning:#B8862F; /* alt accent — software/AI-agency ICP surfaces only, replaces ember 1:1 */ --signal-blue:#2F53E0; --grid:24px; /* ---------- motion (AY · STRUCTURAL · v1 · motion layer) ---------- These are law. No animation uses a value not on this list. */ --t-micro:120ms; /* hover, focus, affordance */ --t-element:200ms; /* accordion, tick draw, state */ --t-entrance:300ms; /* section + hero reveal */ --t-draw:400ms; /* hairline rules */ --t-diagram:500ms; /* diagram bars, node sequences */ --e-out:cubic-bezier(.16,1,.3,1); /* default — decelerates hard into place */ --e-standard:cubic-bezier(.4,0,.2,1); /* state changes, two-way */ --e-linear:linear; /* progress bars only */ --m-rise:12px; /* entrance travel — never more */ --m-stagger:80ms; /* between siblings */ /* accent indirection — Law 02: one accent per surface. Components reference --accent, never --ember directly, so the Signal Blue swap is one attribute, not a find-and-replace. */ --accent:var(--ember); } /* Software/AI-agency ICP surfaces: set data-accent="signal" on . This is the ONLY sanctioned way to use Signal Blue. Never mix accents. */ :root[data-accent="signal"]{ --accent:var(--signal-blue); } /* ---------- base ---------- */ *{box-sizing:border-box;} body{ margin:0; background:var(--bone); color:var(--graphite); font-family:'Inter',system-ui,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{margin:0;} p{margin:0 0 14px;} a{color:inherit;} img{max-width:100%;display:block;} .wrap{max-width:960px;margin:0 auto;padding:0 32px;} /* ---------- type scale (Part 3.3 — sizes/weights/tracking are law) ---------- Fraunces: headlines + statement numbers ONLY. Never body copy. Labels: always mono, uppercase, wide-tracked. Max two weights per face per layout. */ .serif{font-family:'Fraunces',Georgia,serif;} .mono{font-family:'IBM Plex Mono',monospace;} .display{font-family:'Fraunces',Georgia,serif;font-size:48px;line-height:1.04;font-weight:400;letter-spacing:-.02em;} .h1{font-family:'Fraunces',Georgia,serif;font-size:34px;line-height:1.1;font-weight:400;letter-spacing:-.015em;} .h2{font-family:'Fraunces',Georgia,serif;font-size:24px;line-height:1.2;font-weight:500;letter-spacing:-.01em;} .h3{font-family:'Inter',system-ui,sans-serif;font-size:18px;line-height:1.35;font-weight:600;} .body{font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.6;font-weight:400;} .caption{font-family:'Inter',system-ui,sans-serif;font-size:13px;line-height:1.5;font-weight:400;} .label,.eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1.4; font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--steel); } .lead{font-size:18px;color:var(--ink-70);max-width:62ch;} .muted{color:var(--steel);} /* labels ≥13px and captions only */ .footnote{font-size:12.5px;color:var(--steel);max-width:64ch;} /* statement number — Fraunces when a statement, mono when data */ .stat{font-family:'Fraunces',Georgia,serif;font-weight:400;letter-spacing:-.02em;} /* ---------- motif (Part 3.4) ---------- Density law: ONE motif moment per viewport. The motif frames; it never fills. */ /* blueprint grid — 24px unit, steel @ ~12% opacity. Never behind running body text. */ .frame{ position:relative; border:.5px solid var(--hairline); background-image: linear-gradient(var(--steel-tint) .5px,transparent .5px), linear-gradient(90deg,var(--steel-tint) .5px,transparent .5px); background-size:var(--grid) var(--grid); } /* corner ticks — 16px arms, 2px stroke, two diagonal accent + two graphite. Full four-corner set is for COVERS only; content surfaces use tl + br. */ .tick{position:absolute;width:16px;height:16px;} .tick.tl{top:-1px;left:-1px;border-top:2px solid var(--accent);border-left:2px solid var(--accent);} .tick.tr{top:-1px;right:-1px;border-top:2px solid var(--graphite);border-right:2px solid var(--graphite);} .tick.bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--graphite);border-left:2px solid var(--graphite);} .tick.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent);} .dark .tick.tr{border-color:var(--on-dark);} .dark .tick.bl{border-color:var(--on-dark);} /* spec tag — LAYER · MODULE · VERSION. Every cover, every footer. */ .spec{ font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.05em; color:var(--graphite);border:.5px solid var(--steel);padding:3px 9px; display:inline-block;white-space:nowrap; } .dark .spec{color:var(--on-dark);} /* ---------- components ---------- */ .card{background:var(--paper-raised);border:.5px solid var(--hairline);padding:22px;} .card h4{font-size:15px;font-weight:600;margin-bottom:6px;} .card p{font-size:14px;color:var(--ink-70);margin:0;} .tbl{border:.5px solid var(--hairline);background:var(--paper-raised);overflow-x:auto;} .tbl table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px;} .tbl th,.tbl td{text-align:left;padding:11px 12px;border-bottom:.5px solid var(--hairline);vertical-align:top;} .tbl th{ font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em; text-transform:uppercase;color:var(--steel);font-weight:500; } /* do/don't — functional colors are state, not brand */ .dd{display:grid;grid-template-columns:1fr;gap:14px;} @media(min-width:720px){.dd{grid-template-columns:1fr 1fr;}} .do,.dont{padding:18px 20px;border:.5px solid var(--hairline);background:var(--paper-raised);} .do{border-left:2px solid var(--fn-positive);} .dont{border-left:2px solid var(--fn-negative);} /* dark panel — ink-surface + grid at 8% */ .dark{ background:var(--ink-surface); color:var(--on-dark); background-image: linear-gradient(rgba(154,158,164,.08) .5px,transparent .5px), linear-gradient(90deg,rgba(154,158,164,.08) .5px,transparent .5px); background-size:var(--grid) var(--grid); } .dark .eyebrow{color:var(--steel-on-dark);} .dark .muted,.dark .footnote{color:var(--steel-on-dark);} /* button — accent bg, bone text. ONE per surface (Ember discipline). Never on a panel that already carries both diagonal ticks. */ .btn{ display:inline-block;background:var(--accent);color:var(--bone); font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:500; padding:10px 18px;border:none;text-decoration:none;cursor:pointer; } /* text link */ .link{color:var(--graphite);text-decoration:none;border-bottom:1px solid var(--hairline);} .link:hover{border-bottom-color:var(--accent);} /* hairline rule */ .rule{border:none;border-top:.5px solid var(--hairline);margin:0;} /* ---------- layout helpers ---------- */ .grid2{display:grid;grid-template-columns:1fr;gap:20px;} .grid3{display:grid;grid-template-columns:1fr;gap:16px;} .grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;} @media(min-width:720px){ .grid2{grid-template-columns:1fr 1fr;} .grid3{grid-template-columns:repeat(3,1fr);} .grid4{grid-template-columns:repeat(4,1fr);} } /* ---------- motion ---------- */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;} }