/* ========================================================================== Lumora Projects Co — design tokens Single source of truth for colour, type, spacing and shadow. Change a brand value here and it changes everywhere. Do not hard-code hex values anywhere in main.css. Palette and typography follow the brand style guide dated 13 Aug 2026, which replaced the earlier dark/emerald direction wholesale. ========================================================================== */ /* --- Fonts --------------------------------------------------------------- Self-hosted variable fonts, latin subset. One file per family covers every weight. Playfair Display for headings, Inter for body, per the guide. The `.1` in the filename is a cache version, and it matters. `_headers` serves fonts with `immutable, max-age=31536000`, so a font replaced in place would keep serving stale to returning visitors for a year with no way to bust it. Replacing a font means bumping the number here and in the seven preload tags, which changes the URL and makes that impossible. -------------------------------------------------------------------------- */ @font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-var.1.woff2') format('woff2-variations'); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-var.1.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* --- Brand palette ----------------------------------------------------- The five colours the guide declares, verbatim. Note there is no dark neutral: forest green is the darkest brand colour, and everything that used to be charcoal is now either forest or ink. -------------------------------------------------------------------- */ --forest: #2E6B57; /* primary. CTAs, headings, the dark band */ --sage: #A7C3B0; /* surface only — see the contrast note below */ --mist: #DDE8E1; /* quiet fills, wells, alternating sections */ --stone: #F3F1ED; /* the main alternating section background */ --gold: #D8C8A1; /* decorative only — 1.65:1 on white */ --white: #FFFFFF; /* --- Derived tones ----------------------------------------------------- The guide declares no text colour, but its own body copy sets at roughly #151414. These fill that gap; everything else is a tint or shade of a declared brand colour. -------------------------------------------------------------------- */ --ink: #1C1B1A; /* body copy. 17.2:1 on white, 9.1:1 on sage */ --ink-muted: #4A5C53; /* secondary copy, green-cast. 7.1:1 on white */ --forest-dark: #20493C; /* button hover. white on it is 10.1:1 */ --forest-tint: #EAF1EC; /* the faintest wash, between mist and white */ --rule: #E2E0DA; /* hairlines on light backgrounds */ --rule-dark: #43806A; /* hairlines on the forest band */ /* --- Contrast rules, measured, not guessed ----------------------------- PASS forest on white 6.3 · on stone 5.6 · on mist 5.0 PASS white on forest 6.3 · stone on forest 5.6 · mist on forest 5.0 FAIL white on sage 1.9 — sage never hosts white text FAIL forest on sage 3.3 — large headings only, never body copy FAIL sand gold on white 1.65 — decorative only, never text FAIL sage on forest 3.3, gold on forest 3.8 — large/UI only Sage and mist are surfaces. Ink is what reads on them. -------------------------------------------------------------------- */ /* --- Type --- */ --font-heading: 'Playfair Display', 'Canela', Georgia, 'Times New Roman', serif; --font-body: 'Inter', 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Fluid scale, 375px → 1440px viewport */ --t-label: 0.75rem; /* small uppercase labels: field names, footer headings */ --t-small: 0.875rem; --t-body: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem); --t-lead: clamp(1.125rem, 1.07rem + 0.24vw, 1.25rem); --t-h4: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem); --t-h3: clamp(1.3125rem, 1.19rem + 0.53vw, 1.625rem); --t-h2: clamp(1.875rem, 1.5rem + 1.6vw, 2.875rem); --t-h1: clamp(2.125rem, 1.3rem + 3.5vw, 4.125rem); /* Measured, not guessed. Playfair Display reports a font box of 1.33em (ascent 1.08 + descent 0.25), against Inter's 1.21. Any leading under 1.33 makes its line boxes collide, which is why wrapped card headings looked like they were overlapping. Snug now clears that floor; tight stays under it deliberately, for single- or two-line display sizes where the crowding reads as intent rather than a fault. */ --lh-tight: 1.16; --lh-snug: 1.4; --lh-body: 1.65; --ls-label: 0.18em; --ls-logo: 0.2em; --ls-tight: -0.015em; /* Playfair needs less negative tracking than Montserrat */ /* --- Spacing (4px base) --- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-9: 4rem; --s-10: 5rem; /* Vertical rhythm between full-width sections */ --section-y: clamp(3.5rem, 2.6rem + 3.8vw, 6.5rem); --section-y-s: clamp(2.5rem, 2rem + 2.1vw, 4rem); /* --- Layout --- */ --container: 1200px; --container-narrow: 780px; --gutter: clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem); --nav-h: 72px; /* --- Corners --- Everything is square. The template sits its cards at about 8px, but 8px rounded cards with a soft shadow is the house style of every SaaS marketing page going, and on photographs the clipped corner also picks up visible stair-stepping where the radius crosses a gradient. Square edges suit a serif wordmark and a premium advisory positioning better, and they match the buttons, which the template already draws square. True circles remain where the shape is the point: the decorative rings and the brand arc. */ --radius-btn: 0; --radius-sm: 0; --radius: 0; --radius-pill: 0; /* Shadows are green-cast now, not neutral grey — a warm brand with cold shadows looks subtly wrong. */ --shadow-sm: 0 1px 2px rgba(28, 40, 34, 0.05), 0 2px 8px rgba(28, 40, 34, 0.04); --shadow: 0 2px 4px rgba(28, 40, 34, 0.04), 0 12px 28px rgba(28, 40, 34, 0.07); --shadow-lg: 0 4px 8px rgba(28, 40, 34, 0.05), 0 24px 56px rgba(28, 40, 34, 0.10); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); }