/* ============================================================================ FORT STYLE — the design system as a service (served by the fort-style worker) ONE file. TOKENS + COMPONENTS + THEMES. This is the spine: every spoke links it and uses the .fort-* classes; spokes carry (almost) no style of their own. A theme = a different set of values for the same tokens. Switch instantly with: document.documentElement.dataset.theme = 'noir' Default (no attribute) = Prism. When a page needs a new kind of component, add it HERE, named — not on the page. ========================================================================== */ :root, [data-theme="prism"] { --fort-page: radial-gradient(900px 600px at 12% -8%,#ffe1f6 0,transparent 60%), radial-gradient(900px 600px at 92% 4%,#ddeaff 0,transparent 60%), #fff6fc; --fort-bg:#fff6fc; --fort-surface:#ffffff; --fort-border:#f0e3fb; --fort-ink:#2c1450; --fort-soft:#5b3d86; --fort-faint:#8f78b5; --fort-accent:#ff48cf; --fort-accent-ink:#c20098; --fort-link:#9d4dff; --fort-rainbow:linear-gradient(90deg,#ff48cf,#ff7a45,#ffd23f,#aaff3c,#2fe3d8,#3d6dff,#9d4dff); --fort-shadow:0 10px 30px rgba(157,77,255,.18); --fort-shadow-hot:0 8px 24px rgba(255,72,207,.28); /* feature-panel ground: a deliberately dark band, per theme (so its light text stays readable) */ --fort-panel:#2c1450; --fort-on-panel:#ffffff; --fort-on-panel-soft:rgba(255,255,255,.7); } /* Dark theme. */ [data-theme="noir"] { --fort-page: radial-gradient(circle at center,#1a100a 0%,#0b0705 55%,#000 100%); --fort-bg:#0a0705; --fort-surface:#1b120e; --fort-border:#32261e; --fort-ink:#f8e7c4; --fort-soft:#e6c48a; --fort-faint:#a98c63; --fort-accent:#d46a2e; --fort-accent-ink:#e6c48a; --fort-link:#e6c48a; --fort-rainbow:linear-gradient(90deg,#7a1f0f,#b22222,#d46a2e,#d4af37,#a8481b); --fort-shadow:0 10px 30px rgba(0,0,0,.6); --fort-shadow-hot:0 0 28px rgba(212,106,46,.4); --fort-panel:#120c08; --fort-on-panel:#f8e7c4; --fort-on-panel-soft:rgba(248,231,196,.7); } /* Clean neutral theme. */ [data-theme="classic"] { --fort-page:#faf9f5; --fort-bg:#faf9f5; --fort-surface:#ffffff; --fort-border:#e6e2d8; --fort-ink:#181818; --fort-soft:#3d3d3a; --fort-faint:#73706a; --fort-accent:#d97757; --fort-accent-ink:#b85a3c; --fort-link:#b85a3c; --fort-rainbow:linear-gradient(90deg,#d97757,#c2613f,#181818); --fort-shadow:0 10px 30px rgba(0,0,0,.10); --fort-shadow-hot:0 8px 24px rgba(217,119,87,.28); --fort-panel:#1b1b1b; --fort-on-panel:#ffffff; --fort-on-panel-soft:rgba(255,255,255,.72); } /* Theme-independent sizing. */ :root { --fort-radius:18px; --fort-radius-sm:12px; --fort-ring:0 0 0 3px rgba(255,72,207,.35); --fort-shadow-pink:var(--fort-shadow-hot); /* legacy alias spokes used */ --fort-font: "Poppins","Quicksand",ui-rounded,"Segoe UI",system-ui,sans-serif; --fort-mono: "JetBrains Mono",ui-monospace,monospace; --fort-display: "Archivo Black",var(--fort-font); } /* ============================================================================ BASE — opt in by putting class="fort" on (or use the components alone) ========================================================================== */ .fort{background:var(--fort-page);color:var(--fort-ink);font-family:var(--fort-font); -webkit-font-smoothing:antialiased;line-height:1.6;} /* ============================================================================ RAINBOW — the Prism signature. A prism makes a rainbow, so the accent IS the rainbow. As TEXT it's gradient-clipped; as a FILL it's the gradient itself. In Noir/Classic --fort-rainbow becomes that theme's gradient automatically. ========================================================================== */ .fort-rainbow-text{background:var(--fort-rainbow);-webkit-background-clip:text; background-clip:text;-webkit-text-fill-color:transparent;color:transparent;} .fort-rainbow-fill{background:var(--fort-rainbow);color:var(--fort-ink);} .fort-rule{border:0;height:3px;background:var(--fort-rainbow);} /* rainbow bar */ .fort-divider{border:0;height:1px;background:var(--fort-border);width:100%;} /* ============================================================================ TYPOGRAPHY ========================================================================== */ .fort-h1{font-family:var(--fort-display);font-size:clamp(2.5rem,7vw,5.5rem); font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--fort-ink);} .fort-h2{font-family:var(--fort-display);font-size:clamp(1.5rem,3vw,2rem); font-weight:800;text-transform:uppercase;letter-spacing:-.01em;color:var(--fort-ink);} .fort-h3{font-family:var(--fort-display);font-size:1.15rem;font-weight:700; text-transform:uppercase;letter-spacing:.06em;color:var(--fort-ink);} .fort-lead{color:var(--fort-soft);font-size:1.1rem;line-height:1.75;} .fort-muted{color:var(--fort-faint);} /* Eyebrow / kicker / section label — small mono, uppercase, RAINBOW by default. */ .fort-eyebrow,.fort-label{font-family:var(--fort-mono);font-size:.68rem;font-weight:700; text-transform:uppercase;letter-spacing:.22em;display:inline-block;margin-bottom:1rem; background:var(--fort-rainbow);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent;} /* ============================================================================ CARD ========================================================================== */ .fort-card{background:var(--fort-surface);border:1px solid var(--fort-border); border-radius:var(--fort-radius);padding:24px;box-shadow:var(--fort-shadow); transition:transform .15s ease,box-shadow .15s ease;} .fort-card:hover{transform:translateY(-2px);box-shadow:var(--fort-shadow-hot);} .fort-card h3,.fort-card .fort-card-title{font-family:var(--fort-display); text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem;color:var(--fort-ink);} .fort-card p{color:var(--fort-soft);} /* ============================================================================ BUTTON — pill, rainbow fill. ========================================================================== */ .fort-btn{display:inline-block;padding:.85em 1.8em;border-radius:999px;border:0; font-family:var(--fort-display);font-size:.8rem;text-transform:uppercase; letter-spacing:.08em;color:#fff;background:var(--fort-rainbow); box-shadow:var(--fort-shadow-hot);cursor:pointer;text-decoration:none; transition:transform .12s ease,box-shadow .12s ease;} .fort-btn:hover{transform:translateY(-2px);} .fort-btn:focus-visible{outline:0;box-shadow:var(--fort-ring);} .fort-btn-ghost{background:transparent;color:var(--fort-accent-ink); border:1px solid var(--fort-accent-ink);box-shadow:none;} /* ============================================================================ PILL / BADGE — rainbow fill, readable ink. ========================================================================== */ .fort-pill,.fort-badge{display:inline-block;font-family:var(--fort-mono); font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em; padding:.25em .8em;border-radius:999px;background:var(--fort-rainbow); color:var(--fort-ink);} /* ============================================================================ HERO ========================================================================== */ .fort-hero{min-height:80vh;display:flex;flex-direction:column;justify-content:center; align-items:center;text-align:center;padding:5rem 2rem;position:relative;overflow:hidden;} .fort-hero-eyebrow{font-family:var(--fort-mono);font-size:.7rem;text-transform:uppercase; letter-spacing:.25em;color:var(--fort-faint);margin-bottom:1.5rem;} .fort-hero-title{font-family:var(--fort-display);font-size:clamp(2.5rem,7vw,5.5rem); line-height:1.05;letter-spacing:-.02em;color:var(--fort-ink);margin-bottom:1.5rem;max-width:14ch;} .fort-hero-title .accent{background:var(--fort-rainbow);-webkit-background-clip:text; background-clip:text;-webkit-text-fill-color:transparent;color:transparent;} .fort-hero-subtitle{font-size:1.15rem;color:var(--fort-soft);max-width:600px; margin-bottom:2.5rem;line-height:1.7;} /* ============================================================================ FEATURE PANEL — a deliberately dark band (themed dark), light text on it. ========================================================================== */ .fort-panel{background:var(--fort-panel);color:var(--fort-on-panel); border-bottom:4px solid;border-image:var(--fort-rainbow) 1;} .fort-panel .fort-muted,.fort-panel-soft{color:var(--fort-on-panel-soft);} /* ============================================================================ LAYOUT — container, grids, section. ========================================================================== */ .fort-container{max-width:1100px;margin:0 auto;padding:0 22px;} .fort-section{padding:5rem 2rem;} .fort-section-label{font-family:var(--fort-mono);font-size:.7rem;font-weight:700; text-transform:uppercase;letter-spacing:.25em;margin-bottom:1rem; background:var(--fort-rainbow);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent;} .fort-grid{display:grid;gap:2rem;} .fort-grid-2{grid-template-columns:repeat(2,1fr);} .fort-grid-3{grid-template-columns:repeat(3,1fr);} .fort-grid-auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));} @media (max-width:1024px){.fort-grid-3{grid-template-columns:repeat(2,1fr);}} @media (max-width:640px){.fort-grid-2,.fort-grid-3{grid-template-columns:1fr;}}