/* ========================================================================== Feral Strength Club — design tokens Derived from Brand Guidelines v2 (Evergreen route). Two layers: PRIMITIVES are the guidelines' ramp steps, verbatim. ROLES are what components are allowed to touch. Nothing in site.css should ever reference a primitive directly. ========================================================================== */ :root { /* ---- PRIMITIVES · Evergreen ramp ------------------------------------ */ --evergreen-100: #CCD4D2; --evergreen-200: #99AAA6; --evergreen-300: #667F79; --evergreen-400: #33554D; --evergreen-500: #012B21; /* the brand colour */ --evergreen-600: #00261D; --evergreen-700: #00221A; --evergreen-800: #001E17; --evergreen-900: #001510; /* ---- PRIMITIVES · core + accents ------------------------------------ */ --bone: #FBF7EF; --tuskan-sun: #FFDC4D; --tuskan-sun-400: #FFE370; --tuskan-sun-600: #B29A35; --crimson-violet: #4E0623; --pine-blue: #2B7574; --amaranth: #DB324D; --black: #000C09; /* reproduction only — not a brand colour */ /* ---- ROLES · grounds ------------------------------------------------ */ --ground: var(--evergreen-500); --ground-deep: var(--evergreen-800); --ground-dark: var(--evergreen-900); --ground-light: var(--bone); /* ---- ROLES · ink ---------------------------------------------------- Measured on Evergreen 500, not assumed. Bone on Evergreen = 14.4:1. rgba .48 is the 4.5:1 floor, so nothing that is reading matter ever goes below .55. */ --ink: var(--bone); --ink-dim: rgba(251, 247, 239, .72); --ink-faint: rgba(251, 247, 239, .55); --ink-on-light: var(--evergreen-500); --ink-on-accent: var(--black); /* the ONLY ink ever paired with --accent */ /* ---- ROLES · interactive ------------------------------------------- Tuskan Sun is the interactive colour and nothing else is. Sun + black type = 14.8:1. Sun + Bone = 1.35:1 and is forbidden. */ --accent: var(--tuskan-sun); --accent-hover: var(--tuskan-sun-400); --accent-press: var(--tuskan-sun-600); /* Accent colour that is safe to set as TEXT. Sun is not: on Bone it is 1.35:1. So this is Sun on dark grounds and Crimson Violet on Bone, where it measures ~13:1. Use --accent-text for coloured type and --accent only for filled objects. */ --accent-text: var(--tuskan-sun); /* ---- ROLES · graphic only ------------------------------------------ NEVER assign these to `color:`. Amaranth on Evergreen is ~3.6:1 — fine as a >=3:1 solid graphic, fails as text. One accent per surface. */ --graphic-sun: var(--tuskan-sun); /* Function */ --graphic-amar: var(--amaranth); /* Fierce */ --graphic-pine: var(--pine-blue); /* Fury */ --graphic-crim: #B06784; /* Flow — Crimson Violet lifted to read as light */ /* ---- ROLES · lines and focus ---------------------------------------- */ --rule: rgba(251, 247, 239, .16); --rule-strong: rgba(251, 247, 239, .28); --focus-on-dark: var(--bone); --focus-on-accent: var(--black); /* a Bone ring on Sun is invisible */ /* ---- TYPE FACES ----------------------------------------------------- Red Rose exists only inside the drawn logotype asset. Never live type. */ --display: 'Young Serif', Georgia, 'Times New Roman', serif; --sub: 'Spectral', Georgia, 'Times New Roman', serif; --body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ---- TYPE SCALE ----------------------------------------------------- The guidelines set sub-heads at 25-33% of the headline and body at 60% of the sub-head. Those ratios are exact from about 1000px upwards: viewport display sub sub/display body body/sub 1024px 75.8 22.5 29.7% 16 71% 1280px 94.7 28.2 29.8% 17.3 61.3% 1405px 104 30.9 29.7% 19 61.5% Below ~800px they break ON PURPOSE. The print rule assumes a poster- scale headline; you cannot run 104px type on a 390px phone, so the sub-head takes a 20px readability floor and runs proportionally larger. This is a decision, not a bug. */ --t-display: clamp(38px, 7.40vw, 104px); --t-head: clamp(28px, 4.20vw, 58px); --t-sub: clamp(20px, 2.20vw, 31px); --t-body: clamp(16px, 1.35vw, 19px); --t-small: 13.5px; --t-caps: clamp(10px, 1.05vw, 12px); /* Line heights: 95% display / 120% sub / 140% body. Tracking: -1% display / -5% sub / -3% body. Small titles OPEN, not tighten. */ --lh-display: .95; --ls-display: -.01em; --lh-sub: 1.20; --ls-sub: -.05em; --lh-body: 1.40; --ls-body: -.03em; --ls-caps: .20em; /* ---- SPACING -------------------------------------------------------- The guidelines' margin rule is ~4% of the surface, and it holds on every platform. Checked against both surfaces the guidelines name: 683px wide -> 4vw = 27.3px (spec says 27) 846px wide -> 4vw = 33.8px (spec says 34) Exact at both, because the vw term governs between them. */ --gut: clamp(22px, 4vw, 72px); --sp-1: calc(var(--gut) * 0.25); --sp-2: calc(var(--gut) * 0.5); --sp-3: var(--gut); --sp-4: calc(var(--gut) * 1.75); --sp-5: calc(var(--gut) * 3); /* section padding */ /* Full-bleed. The site runs edge to edge on desktop — the gutter is the only inset, per the Studio6 reference. Line length is controlled by --measure on the text itself, not by a centred container. */ --wrap: 100%; --measure: 62ch; --measure-tight: 34ch; /* ---- PATTERN -------------------------------------------------------- The guidelines say 6.5-7.5% on web. This build runs 1.5%, and that is deliberate: the guidelines figure assumes the PRINT hide, whose markings are Evergreen on an Evergreen ground and barely differ from themselves. Ours are BONE markings on a dark ground, which carry far more contrast. At 7% they shout; at 1.5% they read exactly as intended. Rules unchanged: wall scale only, one patterned surface in view at a time, dark grounds only. */ --hide-opacity: .015; /* ---- RADIUS --------------------------------------------------------- One button shape on the whole site. 2px, not a pill: a site with one job gets one unmistakable object. */ --r-btn: 2px; --r-card: 16px; /* ---- MOTION --------------------------------------------------------- */ --ease: cubic-bezier(.19, 1, .22, 1); --ease-out: cubic-bezier(.075, .82, .165, 1); --dur-fast: .25s; --dur: .5s; --dur-slow: .75s; /* ---- HEADER --------------------------------------------------------- The mark, not the logotype. The guidelines put the SOLID mark's minimum width at 84px, so the bar has to be tall enough to hold it legally — hence 116px rather than the 68px a logotype would need. This is the constraint driving the header height; do not shrink the bar without also changing the mark. */ --mark-w: 84px; /* the guidelines' minimum WIDTH */ --mark-h: 89.3px; /* 84 x 541/509 — the mark is NOT square */ --header-h: 124px; /* ---- LAYERS ---------------------------------------------------------- */ --z-pattern: 0; --z-content: 1; --z-header: 50; --z-curtain: 100; } /* ========================================================================== Ground themes. Phive sets its body background from a page class and lets every child inherit the right ink. Same idea here: a section declares its ground and every ink token flips with it, so no component ever hand-sets a colour. ========================================================================== */ .on-evergreen { --surface: var(--ground); --on-surface: var(--ink); } .on-deep { --surface: var(--ground-deep); --on-surface: var(--ink); } .on-dark { --surface: var(--ground-dark); --on-surface: var(--ink); } .on-bone { --surface: var(--ground-light); --on-surface: var(--ink-on-light); --ink: var(--evergreen-500); --ink-dim: rgba(1, 43, 33, .72); --ink-faint: rgba(1, 43, 33, .72); /* .58 measured 3.93:1 at 12px — too light */ --rule: rgba(1, 43, 33, .16); --rule-strong: rgba(1, 43, 33, .28); --focus-on-dark: var(--evergreen-500); --accent-text: var(--crimson-violet); /* Sun would be 1.35:1 here */ } /* ---- hero film scrim ---------------------------------------------------- The four numbers that decide how readable the headline is over the video. Raise a value to darken that band, lower it to let more film through. 0 = fully transparent, 1 = solid evergreen. Nothing else needs touching. */ :root { --hero-scrim-top: .70; /* behind the header and logomark */ --hero-scrim-top-fade: .26; /* the fade out of the top band */ --hero-scrim-mid: .55; /* where the headline starts */ --hero-scrim-bottom: .94; /* behind sub, button and address stamp */ } /* ---- the mark on the home header --------------------------------------- One size for both states so the swap doesn't jump. DOCUMENTED EXCEPTION to 1.1 and 1.2, which set 64px (solid) and 60px (outline) as minimums. Those figures protect stroke integrity at 1x: the stroke is 2.76% of the mark's width, so 48px gives 1.33px, under the 1.5px the guidelines call the break-up point. This mark renders ONLY below 760px, and every device in that range is a 2x or 3x phone, where 48px is 96-144 device pixels and the stroke is 2.7-4 device pixels. Tested at 1x and 3x: clean at 3x, intact at 1x. If this mark is ever used above 760px or in print, it goes back to 64. */ :root { --fold-mark-w: 48px; }