/* ============================================================================ base.css — the FIXED classical foundation ---------------------------------------------------------------------------- The motif-agnostic ground every artifact stands on. Tokens (colour ramps, modular type scale, 8pt spacing, elevation, grain), a reset, typography, the grid, and core components. Components read SEMANTIC vars (--ground, --ink, --accent…) so a skin in skins.css can recolour the whole thing with one class. Pair with skins.css. Usage: … ← sampling is one class See classical-principles.md (the canon) and directions-library.md (the motifs). ========================================================================== */ /* ── Type (load once per page) ─────────────────────────────────────────────── @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,600;9..144,900&family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap'); (Kept commented so callers control the network request; copy into .) */ :root{ /* ── CONSTANT IDENTITY — the three brights never change ──────────────────── */ --orange:#FF6A2B; --pink:#FF2E88; --purple:#7C3AED; /* Tonal ramps (fixed). 100 tint → 700 shade. Relational colour: tune in context. */ --o-100:#FFE7D8; --o-300:#FFB089; --o-500:#FF6A2B; --o-700:#C73F08; --p-100:#FFD9E8; --p-300:#FF7FB2; --p-500:#FF2E88; --p-700:#C00659; --v-100:#E9DEFD; --v-300:#B794F6; --v-500:#7C3AED; --v-700:#4C1D95; /* The earned focal gradient — one light source per view, never wallpaper. */ --grad:linear-gradient(115deg,var(--orange) 0%,var(--pink) 48%,var(--purple) 100%); /* ── SEMANTIC tokens — light "Aurora" defaults; skins override these ─────── */ --ground:#FBFAF7; /* page background */ --surface:#FFFFFF; /* raised card background */ --ink:#16121C; /* primary text */ --muted:#6B6577; /* secondary text */ --hair:#ECE8F0; /* hairline dividers/borders */ --accent:var(--pink); /* the single focal hue */ --on-grad:#FFFFFF; /* text that sits on --grad */ /* ── Modular type scale (ratio 1.25, base 16px) — proportion, not arbitrary ─ */ --t-xs:0.7rem; /* 11.2px caption/kicker */ --t-sm:0.8rem; /* 12.8px small */ --t-base:1rem; /* 16px body */ --t-md:1.25rem; /* 20px lead / h4 */ --t-lg:1.563rem; /* 25px h3 */ --t-xl:1.953rem; /* 31px h2 */ --t-2xl:2.441rem; /* 39px h1 */ --t-3xl:3.815rem; /* 61px display */ --t-hero:clamp(2.6rem,7vw,5.4rem); /* fluid hero */ /* ── 8pt spacing scale ──────────────────────────────────────────────────── */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; /* ── Radii ──────────────────────────────────────────────────────────────── */ --r-sm:11px; --r:18px; --r-lg:28px; --r-pill:999px; /* ── Elevation ladder — layered soft shadow + luminous hairline ─────────── */ --e0:none; --e1:0 1px 2px rgba(22,18,28,.04), 0 1px 1px rgba(22,18,28,.03), inset 0 0 0 1px rgba(255,255,255,.6); --e2:0 2px 4px rgba(22,18,28,.05), 0 6px 14px rgba(22,18,28,.06), 0 0 0 1px var(--hair); --e3:0 4px 8px rgba(22,18,28,.05), 0 14px 32px rgba(124,58,237,.10), 0 0 0 1px rgba(124,58,237,.08); --e4:0 8px 18px rgba(255,46,136,.10), 0 24px 60px rgba(124,58,237,.16), 0 0 0 1px rgba(255,255,255,.5); /* ── Type families ──────────────────────────────────────────────────────── */ --font-display:'Fraunces',Georgia,serif; --font-body:'Inter',system-ui,-apple-system,sans-serif; --font-mono:'Space Grotesk','SF Mono',ui-monospace,monospace; /* technical kicker/chips */ /* ── Body measure (45–75ch canon) + reading rhythm ──────────────────────── */ --measure:66ch; } /* ── Reset ─────────────────────────────────────────────────────────────────── */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ font-family:var(--font-body); color:var(--ink); background:var(--ground); -webkit-font-smoothing:antialiased; line-height:1.55; letter-spacing:-.01em; } img,svg{display:block;max-width:100%} a{color:inherit} /* ── Grain — kills banding, adds tactile depth. Add class="grain" to any box. ─ */ .grain{position:relative} .grain::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:25; opacity:.4; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } /* page-wide fixed grain for light layouts */ .grain-page::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.5; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"); } /* ── Layout ────────────────────────────────────────────────────────────────── */ .wrap{max-width:1080px; margin:0 auto; padding:var(--s9) var(--s6) var(--s10)} .grid{display:grid; gap:var(--s5)} .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} .row{display:flex; gap:var(--s4); flex-wrap:wrap} @media(max-width:720px){.g2,.g3{grid-template-columns:1fr}} /* ── Typography ──────────────────────────────────────────────────────────────── */ .disp{font-family:var(--font-display); font-weight:900; letter-spacing:-.025em; line-height:1.02} h1,.h1{font-family:var(--font-display); font-weight:900; font-size:var(--t-2xl); letter-spacing:-.025em; line-height:1.05} h2,.h2{font-family:var(--font-display); font-weight:600; font-size:var(--t-xl); letter-spacing:-.02em; line-height:1.1} h3,.h3{font-family:var(--font-display); font-weight:600; font-size:var(--t-lg); letter-spacing:-.02em} p{font-size:var(--t-base); max-width:var(--measure)} .lead{font-size:var(--t-md); color:var(--muted); max-width:var(--measure)} .muted{color:var(--muted)} .kicker{font-family:var(--font-mono); font-size:var(--t-xs); font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)} .grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent} .section-label{font-family:var(--font-body); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:var(--s9) 0 var(--s5); display:flex; align-items:center; gap:var(--s3)} .section-label::after{content:""; flex:1; height:1px; background:var(--hair)} /* ── Hero — the one earned focal moment ─────────────────────────────────────── */ .hero{position:relative; border-radius:var(--r-lg); padding:var(--s8) var(--s7); overflow:hidden; box-shadow:var(--e4); color:var(--on-grad); background:var(--grad)} .hero::after{content:""; position:absolute; inset:0; background: radial-gradient(120% 120% at 12% 8%, rgba(255,255,255,.45), transparent 42%), radial-gradient(90% 90% at 92% 100%, rgba(76,29,149,.55), transparent 55%);} .hero > *{position:relative; z-index:1} .hero .kicker{color:rgba(255,255,255,.85)} .hero h1,.hero .h1{font-size:var(--t-hero); margin:var(--s3) 0 var(--s4)} .hero p{font-size:var(--t-md); max-width:46ch; color:rgba(255,255,255,.92)} .hero .row{margin-top:var(--s6)} /* ── Buttons ─────────────────────────────────────────────────────────────────── */ .btn{font-family:var(--font-body); font-size:15px; font-weight:600; border:0; border-radius:13px; padding:13px 22px; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; letter-spacing:-.01em; display:inline-block; text-decoration:none} .btn:hover{transform:translateY(-1px)} .btn-grad{background:var(--grad); color:#fff; box-shadow:0 6px 16px rgba(255,46,136,.35)} .btn-solid{background:var(--ink); color:var(--ground)} .btn-line{background:transparent; color:var(--accent); box-shadow:inset 0 0 0 1.5px currentColor} .btn-ghost{background:rgba(255,255,255,.16); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)} .btn-ghost.dark{background:#fff; color:var(--ink); box-shadow:var(--e2)} /* ── Cards & stats ──────────────────────────────────────────────────────────── */ .card{background:var(--surface); border-radius:var(--r); padding:var(--s5); box-shadow:var(--e2)} .card.float{box-shadow:var(--e3)} .card h3,.card .h3{margin-bottom:var(--s2)} .card p{font-size:14.5px; color:var(--muted)} .stat{font-family:var(--font-display); font-weight:900; font-size:52px; letter-spacing:-.03em; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent} .stat-l{font-size:13px; color:var(--muted); font-weight:600; margin-top:var(--s1)} /* ── Badges ──────────────────────────────────────────────────────────────────── */ .badges{display:flex; gap:10px; flex-wrap:wrap} .badge{font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:var(--r-pill)} .b-o{background:var(--o-100); color:var(--o-700)} .b-p{background:var(--p-100); color:var(--p-700)} .b-v{background:var(--v-100); color:var(--v-700)} /* ── Chart — honest, minimal ink, brights for emphasis only (Tufte) ─────────── */ .chart{display:flex; align-items:flex-end; gap:16px; height:180px; padding-top:10px} .bar{flex:1; border-radius:8px 8px 3px 3px; background:var(--v-100); position:relative; transition:.2s} .bar.hot{background:var(--grad)} .bar span{position:absolute; bottom:-24px; left:0; right:0; text-align:center; font-size:11px; color:var(--muted); font-weight:600} /* ── Footer ──────────────────────────────────────────────────────────────────── */ .footer{margin-top:var(--s9); padding-top:var(--s5); border-top:1px solid var(--hair); color:var(--muted); font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s2)}