/* ========================================================================== Engineering Alliance Inc. — Design Tokens "Warm Regalia": a light, warm ground — creams and parchment — carrying the brand's imperial purple, a deep teal and a bronze-gold accent. The purple is taken exactly from the official logo artwork (assets/brand/logo-original.svg); the teal is sampled from the wordmark. The light ground is deliberate: the logo's plates are filled, and that stacked-plate depth only reads over a light page. ========================================================================== */ :root { /* ---------- Brand ---------- */ --royal: #7C287D; /* exact stroke colour of the official artwork */ --royal-lift: #A63DA8; --royal-deep: #5A1A5C; --plum: #2E1530; /* deep aubergine, for accent bands */ --plum-deep: #1D0C1F; --teal: #0E5A5E; --teal-lift: #17878D; --teal-glow: #2FB6BD; /* ---------- Warm accents ---------- */ --gold: #C9A227; /* decorative rules and large marks */ --gold-soft: #E6C766; --gold-ink: #8A6114; /* the gold that is safe to set small text in */ --amber: #C2703A; /* terracotta, for warmth */ --amber-ink: #9A4C1B; /* the terracotta that is safe for small text */ --amber-soft: #F0D3BC; --blush: #F7E6D8; /* ---------- Warm neutrals ---------- */ --cream: #FBF7F1; /* page ground */ --cream-2: #F5EDE3; /* alternating band */ --cream-3: #EEE3D5; /* deeper band */ --parchment: #FFFFFF; /* raised surfaces */ --sand: #E4D7C6; /* hairlines on warm ground */ --ink: #2A1E28; /* warm near-black */ --ink-2: #453845; /* ---------- Semantic (light ground, the site default) ---------- */ --bg: var(--cream); --bg-alt: var(--cream-2); --bg-deep: var(--cream-3); --surface: var(--parchment); --surface-2: var(--cream-2); --border: rgba(42 30 40 / .13); --border-strong: rgba(42 30 40 / .26); --text: var(--ink); --text-2: #5B4E57; --text-3: #736571; --accent-ink: var(--gold-ink); /* eyebrows, small accent text */ --danger: #B3352B; --success: #1F7A55; /* Text used on top of a dark band or a photograph */ --on-dark: #FBF7F1; --on-dark-2: rgba(251 247 241 / .80); --on-dark-3: rgba(251 247 241 / .60); /* Fill for the logo mark's plates. It tracks the ground it sits on, so the plates occlude correctly and the mark reads as clean line art. */ --logo-plate: var(--bg); /* ---------- Gradients ---------- */ --grad-royal: linear-gradient(135deg, var(--royal) 0%, var(--royal-lift) 58%, var(--teal-lift) 100%); --grad-gold: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold-soft) 50%, var(--gold) 82%, transparent); --grad-rule: linear-gradient(90deg, transparent, rgba(138 97 20 / .42), transparent); --grad-warm: linear-gradient(165deg, #FDF7EE 0%, #F7E9D8 52%, #FBF7F1 100%); --grad-glow: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(240 211 188 / .70), transparent 70%); --grad-plum: linear-gradient(160deg, var(--plum) 0%, var(--plum-deep) 100%); --grad-text: linear-gradient(100deg, var(--royal) 8%, var(--amber) 52%, var(--royal) 94%); /* Warm scrims for laying text over photography */ --scrim-light: linear-gradient(100deg, rgba(251 247 241 / .97) 0%, rgba(251 247 241 / .88) 44%, rgba(251 247 241 / .58) 100%); --scrim-dark: linear-gradient(180deg, rgba(46 21 48 / 0) 0%, rgba(46 21 48 / .58) 62%, rgba(29 12 31 / .93) 100%); /* ---------- Type ---------- */ --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --font-sans: "Manrope", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace; /* Fluid scale: 320px -> 1600px */ --fs-xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem); --fs-sm: clamp(0.82rem, 0.79rem + 0.16vw, 0.92rem); --fs-base: clamp(0.95rem, 0.91rem + 0.22vw, 1.08rem); --fs-md: clamp(1.06rem, 0.99rem + 0.34vw, 1.28rem); --fs-lg: clamp(1.28rem, 1.14rem + 0.68vw, 1.72rem); --fs-xl: clamp(1.62rem, 1.36rem + 1.28vw, 2.55rem); --fs-2xl: clamp(2.05rem, 1.58rem + 2.32vw, 3.70rem); --fs-3xl: clamp(2.45rem, 1.72rem + 3.60vw, 4.90rem); --fs-4xl: clamp(2.85rem, 1.85rem + 4.95vw, 6.20rem); --lh-tight: 1.06; --lh-snug: 1.20; --lh-body: 1.74; --ls-wide: .18em; --ls-mid: .08em; --ls-tight: -.020em; /* ---------- Space ---------- */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.75rem; --sp-8: 3.5rem; --sp-9: 5rem; --sp-10: 7rem; --sp-11: 9.5rem; --section-y: clamp(4.25rem, 3rem + 6vw, 9rem); --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 3rem); --container: 1280px; --container-wide: 1560px; --container-narrow: 880px; /* ---------- Shape ---------- */ --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px; /* ---------- Elevation — warm shadows, never neutral black ---------- */ --sh-sm: 0 1px 2px rgba(74 48 66 / .06), 0 2px 8px rgba(74 48 66 / .05); --sh-md: 0 4px 12px rgba(74 48 66 / .07), 0 14px 34px rgba(74 48 66 / .09); --sh-lg: 0 12px 26px rgba(74 48 66 / .10), 0 34px 68px rgba(74 48 66 / .13); --sh-royal: 0 10px 28px rgba(124 40 125 / .26); --sh-gold: 0 0 0 1px rgba(201 162 39 / .48), 0 8px 26px rgba(201 162 39 / .22); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --t-fast: .18s; --t-mid: .38s; --t-slow: .72s; /* ---------- Layers ---------- */ --z-base: 1; --z-sticky: 40; --z-header: 60; --z-drawer: 80; --z-overlay: 90; --z-cursor: 100; --z-loader: 110; color-scheme: light; } /* -------------------------------------------------------------------------- Dark accent band. Used sparingly — the footer, the drawer, and anything laid over a photograph. Only the semantic layer flips; the brand hues stay fixed, and --logo-plate follows the new ground so the mark keeps working. -------------------------------------------------------------------------- */ .ground-dark { --bg: var(--plum); --bg-alt: var(--plum-deep); --bg-deep: var(--plum-deep); --surface: rgba(255 255 255 / .05); --surface-2: rgba(255 255 255 / .09); --border: rgba(251 247 241 / .14); --border-strong: rgba(251 247 241 / .28); --text: var(--on-dark); --text-2: var(--on-dark-2); --text-3: var(--on-dark-3); --accent-ink: var(--gold-soft); --logo-plate: var(--plum); --grad-rule: linear-gradient(90deg, transparent, rgba(230 199 102 / .55), transparent); color-scheme: dark; }