/* ============================================================================ Account Finder — site design system One stylesheet, five pages. Themes are CSS custom properties swapped on ; every page shares the same grid, rhythm and signatures. ========================================================================== */ /* --- fixed palette (from lib/brand.ts + site/styles.css) ----------------- */ :root{ --bone:#fbfaf8; --tint:#f7ecec; --paper:#f4f1ec; --deep:#2b0f0f; --night:#141010; --ox:#7f1d1d; --ox-d:#5c1414; --ink:#1e2430; --muted:#5b6472; --line:#e5e2dd; --line-2:#d4d0c9; --green:#1b7f4f; --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); /* section rhythm — the single vertical unit that makes 5 files feel like 1 */ --rhythm:clamp(64px,9vw,128px); --promo-h:36px; --nav-h:64px; } /* --- theme sets ---------------------------------------------------------- */ :root,[data-theme="bone"]{ --bg:var(--bone); --text:var(--ink); --dim:var(--muted); --rule:var(--line); --rule-2:var(--line-2); --accent:var(--ox); --on-accent:var(--bone); --panel:#fff; --panel-rule:var(--line); --ghost:rgba(30,36,48,.06); --wine:var(--ox-d); } [data-theme="tint"]{ --bg:var(--tint); --text:var(--ink); --dim:#6b5656; --rule:#e6d5d5; --rule-2:#dcc6c6; --accent:var(--ox); --on-accent:var(--tint); --panel:#fdf7f7; --panel-rule:#e6d5d5; --ghost:rgba(127,29,29,.07); --wine:var(--ox-d); } [data-theme="paper"]{ --bg:var(--paper); --text:var(--ink); --dim:var(--muted); --rule:#e2ded6; --rule-2:var(--line-2); --accent:var(--ox); --on-accent:var(--paper); --panel:#faf8f4; --panel-rule:#e2ded6; --ghost:rgba(30,36,48,.06); --wine:var(--ox-d); } [data-theme="deep"]{ --bg:var(--deep); --text:#f4ebe8; --dim:#b99b96; --rule:rgba(247,236,236,.16); --rule-2:rgba(247,236,236,.26); --accent:#f7ecec; --on-accent:var(--deep); --panel:#3a1616; --panel-rule:rgba(247,236,236,.16); --ghost:rgba(247,236,236,.07); --wine:var(--ox); } /* On near-black, oxblood is unreadable as text — so the dark themes promote the brand's own tint to the accent role and keep oxblood for filled ground. No colour outside the brand palette is introduced anywhere on the site. */ [data-theme="night"]{ --bg:var(--night); --text:#efe7e4; --dim:#8d7c78; --rule:rgba(239,231,228,.14); --rule-2:rgba(239,231,228,.26); --accent:var(--tint); --on-accent:var(--night); --panel:#1c1616; --panel-rule:rgba(239,231,228,.14); --ghost:rgba(239,231,228,.06); --wine:var(--ox); } /* --- reset --------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--bg); color:var(--text); font-family:"Instrument Sans",-apple-system,sans-serif; font-size:clamp(1rem,.94rem + .3vw,1.125rem); line-height:1.55; -webkit-font-smoothing:antialiased; transition:background-color .55s var(--ease),color .55s var(--ease); overflow-x:hidden; } img,svg,canvas{display:block;max-width:100%} a{color:inherit} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} hr{border:0;border-top:1px solid var(--rule);margin:0} ::selection{background:var(--ox);color:#fff} /* --- type ---------------------------------------------------------------- */ .display,h1{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-variation-settings:"SOFT" 0,"WONK" 1; font-size:clamp(2.75rem,1.2rem + 7.5vw,8.5rem); line-height:.88; letter-spacing:-.032em; margin:0; text-wrap:balance; } .display--sm{font-size:clamp(2.2rem,1rem + 5vw,5rem)} h2,.h2{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-variation-settings:"SOFT" 0,"WONK" 0; font-size:clamp(1.75rem,1rem + 2.8vw,3.25rem); line-height:1.02; letter-spacing:-.018em; margin:0; text-wrap:balance; } h3,.h3{ font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:clamp(1.05rem,.98rem + .4vw,1.3rem); line-height:1.25; letter-spacing:-.01em; margin:0; } p{margin:0 0 1em;max-width:64ch} p:last-child{margin-bottom:0} .lede{font-size:clamp(1.05rem,.98rem + .6vw,1.35rem);line-height:1.5;color:var(--dim);max-width:52ch} .lede strong{color:var(--text);font-weight:500} .mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-feature-settings:"tnum"} /* signature (b) — micro-label: 4px dot, 24px rule, then the text. The marks LEAD the label so a long eyebrow can wrap to two lines without stranding them mid-air at the end of line one. */ .micro{ display:flex;align-items:flex-start;gap:10px; font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; line-height:1.45; color:var(--dim); margin:0 0 18px; } .micro::after{content:"";order:-1;flex:0 0 4px;height:4px;border-radius:50%; background:var(--accent);margin-top:.45em} .micro::before{content:"";flex:0 0 24px;height:1px;background:var(--rule-2);margin-top:.65em} /* signature (c) — every statistic in tabular mono, underlined to digit width */ .stat{ font-family:"IBM Plex Mono",monospace;font-feature-settings:"tnum"; font-size:1.4em;font-weight:500;letter-spacing:-.02em; display:inline-block;padding-bottom:2px; border-bottom:2px solid var(--accent); } /* --- grid ---------------------------------------------------------------- */ .grid{ display:grid;grid-template-columns:repeat(16,1fr); column-gap:clamp(10px,1.4vw,22px); padding-inline:clamp(18px,4vw,40px); max-width:1560px;margin-inline:auto; } .inset{grid-column:3/15} /* THE break rule: only display type and full-bleed visuals may leave the inset, and only by reaching column 1 or 17 — so a break always touches an edge and reads as intent, never as a stray column. */ .bleed-r{grid-column:3/17} .bleed-l{grid-column:1/15} .bleed{grid-column:1/-1} /* Below the desktop breakpoint the 16-column field collapses to 4 and every band goes full width. This lived in each concept page's own