/* ============================================================================ THE FORT — UNIFIED PALETTE ("Lisa Frank, not Edgar Allan Poe") Single source of truth for every Fort web property. Canonical home: fort-central-config/design/fort-palette.css Every subdomain pulls these tokens; recolor here, it propagates everywhere. v1 — 2026-06-20 ---------------------------------------------------------------------------- DESIGN INTENT - Bright dreamscape ground, not black void. Deep readable ink, not pure black. - A saturated rainbow spine (pink / purple / cyan / blue / lime / sun / coral). - Signature gradient = the dolphin-sky: pink -> purple -> cyan. - Accessible by construction: bright tints are for FILLS and BIG type; the *-ink variants are the AA-safe versions for small text/links on light. ========================================================================== */ :root { /* ---- GROUNDS (bright, dreamy, never black) ---- */ --fort-bg: #fff6fc; /* primary page ground — warm pink-white */ --fort-bg-2: #f3ecff; /* lavender mist — alt sections */ --fort-bg-3: #eafcff; /* iced cyan — alt sections */ --fort-surface: #ffffff; /* cards / panels */ --fort-surface-tint:#fdeffaee;/* frosted card over gradient */ /* ---- INK (deep readable, reads as bright-world not gothic) ---- */ --fort-ink: #2c1450; /* body text — deep grape, AA on all grounds */ --fort-ink-soft: #5b3d86; /* secondary text */ --fort-ink-faint: #8f78b5; /* muted / captions */ /* ---- THE RAINBOW SPINE (bright fills, gradients, big type) ---- */ --fort-pink: #ff48cf; /* hot magenta — the signature */ --fort-purple: #9d4dff; /* electric violet */ --fort-cyan: #2fe3d8; /* turquoise */ --fort-blue: #3d6dff; /* electric blue */ --fort-lime: #aaff3c; /* chartreuse pop (use sparingly) */ --fort-sun: #ffd23f; /* sunny yellow */ --fort-coral: #ff7a45; /* tangerine / coral */ /* ---- INK-SAFE ACCENTS (AA on light grounds — links, small accent text) ---- */ --fort-pink-ink: #c20098; /* magenta text/link */ --fort-purple-ink: #7322d6; /* violet text/link */ --fort-cyan-ink: #06857c; /* teal text/link */ --fort-blue-ink: #2a4fd6; /* blue text/link */ --fort-coral-ink: #d2470f; /* coral text/link */ /* ---- SIGNATURE GRADIENTS ---- */ --fort-sky: linear-gradient(120deg, #ff48cf 0%, #9d4dff 48%, #2fe3d8 100%); --fort-sky-soft: linear-gradient(120deg, #ffd9f4 0%, #e7d9ff 50%, #d4fbf6 100%); --fort-sunset: linear-gradient(120deg, #ffd23f 0%, #ff7a45 50%, #ff48cf 100%); --fort-aurora: linear-gradient(120deg, #3d6dff 0%, #2fe3d8 45%, #aaff3c 100%); --fort-rainbow: linear-gradient(90deg,#ff48cf,#ff7a45,#ffd23f,#aaff3c,#2fe3d8,#3d6dff,#9d4dff); /* ---- STATE ---- */ --fort-good: #16b878; --fort-warn: #ff9f1c; --fort-bad: #ff3b6b; /* ---- FX ---- */ --fort-shadow: 0 10px 30px rgba(157, 77, 255, 0.18); --fort-shadow-pink: 0 8px 24px rgba(255, 72, 207, 0.28); --fort-radius: 18px; --fort-radius-sm: 12px; --fort-ring: 0 0 0 3px rgba(255, 72, 207, 0.35); /* ---- PER-PROPERTY ACCENT HOOK ---- Each site sets --fort-accent / --fort-accent-ink to its lane color, but pulls everything else from this one file. Default = pink. */ --fort-accent: var(--fort-pink); --fort-accent-ink: var(--fort-pink-ink); } /* Optional opt-in base layer. Sites can @import the tokens only, or also adopt these base rules by adding class="fort" to . */ .fort { background: radial-gradient(900px 600px at 12% -8%, #ffe1f6 0%, transparent 60%), radial-gradient(900px 600px at 92% 4%, #ddeaff 0%, transparent 60%), var(--fort-bg); color: var(--fort-ink); font-family: "Poppins","Quicksand",ui-rounded,"Segoe UI",system-ui,sans-serif; -webkit-font-smoothing: antialiased; } .fort h1, .fort h2, .fort h3 { color: var(--fort-ink); letter-spacing: -0.01em; } .fort a { color: var(--fort-accent-ink); text-decoration-color: var(--fort-accent); } .fort a:hover { color: var(--fort-pink-ink); } .fort .fort-card { background: var(--fort-surface); border: 1px solid #f0e3fb; border-radius: var(--fort-radius); box-shadow: var(--fort-shadow); } .fort .fort-btn { display: inline-block; padding: 0.7em 1.4em; border-radius: 999px; border: 0; font-weight: 700; color: #fff; background: var(--fort-sky); box-shadow: var(--fort-shadow-pink); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; } .fort .fort-btn:hover { transform: translateY(-2px); } .fort .fort-btn:focus-visible { outline: 0; box-shadow: var(--fort-ring); } .fort .fort-hero { background: var(--fort-sky); color: #fff; border-radius: var(--fort-radius); }