/* ========================================================================== theWambuidesign — design tokens Single source of truth for colour, type, spacing, radii, borders, motion. Values transcribed from the approved Figma file (1440px desktop reference). ========================================================================== */ :root { /* --- Colour: ink & surfaces ------------------------------------------- */ --c-ink: #250e13; /* primary text on light (plum-black) */ --c-ink-2: #1a1a1a; /* form controls, dark button */ --c-ink-3: #0b0b0c; /* dark section base */ --c-tag-ink: #0a0a0c; /* pill tag text */ --c-white: #ffffff; /* --- Colour: mint accent ------------------------------------------------ */ --c-mint: #00ffbc; --c-mint-74: rgba(0, 255, 188, 0.74); --c-mint-44: rgba(0, 255, 188, 0.44); /* rough frame on light */ --c-mint-20: rgba(0, 255, 188, 0.20); /* hairline dividers */ --c-mint-15: rgba(0, 255, 188, 0.15); /* glass CTA fill */ --c-mint-10: rgba(228, 255, 248, 0.10); /* step-card glass fill */ /* --- Colour: greys --------------------------------------------------- */ --c-grey: #b8b8bd; --c-grey-dark: #4e4e4e; --c-grey-mid: #605e5a; --c-grey-soft: #666666; --c-grey-70: #8e8e93; --c-grey-df: #dfdfdf; --c-grey-e4: #e4e4e4; --c-grey-e8: rgba(232, 232, 235, 0.79); --c-hairline-dark: rgba(255, 255, 255, 0.08); --c-hairline-light: rgba(37, 14, 19, 0.22); /* --- Colour: blue (hero / marquee / footer) ------------------------- */ --c-blue-deep: #23384f; /* hero sky overlay foot */ --c-blue-mid: #2f4a6b; --c-banner: #334f78; --c-banner-border: #314d76; --c-footer: #294059; /* --- Colour: utility ----------------------------------------------- */ --c-danger: #dc2626; /* was #ef4444 — 3.76:1 on white, fails AA text (4.5:1); this passes at 4.83:1 */ --c-field-bg: #f5f5f5; --c-field-ink: #666666; --c-overlay-dark: rgba(11, 11, 12, 0.92); --c-overlay-photo: rgba(0, 0, 0, 0.40); /* --- Typography: families ----------------------------------------- */ --font-display: "Faculty Glyphic", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --font-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* --- Typography: fluid scale ------------------------------------------ clamp(min @ 360px, preferred, max @ 1440px). Desktop max = Figma value. */ --fs-hero: clamp(2.5rem, 1.90rem + 2.69vw, 4.3125rem); /* 40 -> 69 @360-1440 */ --fs-section: clamp(2.75rem, 1.375rem + 6.11vw, 6.875rem); /* 44 -> 110 */ --fs-section-sm: clamp(2.5rem, 1.667rem + 3.70vw, 5rem); /* 40 -> 80 (FAQ) */ --fs-manifesto: clamp(1.5rem, 1.25rem + 1.11vw, 2.25rem); /* 24 -> 36 */ --fs-contact-h: clamp(2.25rem, 1.75rem + 2.22vw, 3.75rem); /* 36 -> 60 */ --fs-marquee: clamp(1.75rem, 1.417rem + 1.48vw, 2.75rem); /* 28 -> 44 */ --fs-stat: clamp(2.75rem, 2.333rem + 1.85vw, 4rem); /* 44 -> 64 */ --fs-brand: clamp(3rem, 2.167rem + 3.70vw, 5.5rem); /* 48 -> 88 */ --fs-brand-sub: clamp(1.5rem, 1.167rem + 1.48vw, 2.5rem); /* 24 -> 40 */ --fs-lede: clamp(1.25rem, 1.146rem + 0.46vw, 1.5625rem);/* 20 -> 25 hero para */ --fs-support: clamp(1.125rem, 1.062rem + 0.28vw, 1.3125rem);/* 18 -> 21 italic support line */ --fs-card-title: 1.625rem; /* 26 step-card title */ --fs-svc-title: clamp(1.25rem, 1.09rem + 0.71vw, 1.5rem); /* 20 -> 24 */ --fs-lg: 1.25rem; /* 20 nav / footer links */ --fs-md: 1.125rem; /* 18 section intro, FAQ question */ --fs-body: 1rem; /* 16 running body */ --fs-sm: 0.9375rem; /* 15 card body / faq answer */ --fs-xs: 0.875rem; /* 14 form fields */ --fs-2xs: 0.8125rem; /* 13 stat description / step label */ --fs-3xs: 0.75rem; /* 12 eyebrow / tag / meta label */ --fs-fine: 0.6875rem; /* 11 legal fine print */ --lh-tight: 1.18; --lh-snug: 1.2; --lh-heading: 1.4; --lh-body: 1.6; --lh-lede: 1.6; /* 40/25 */ --tracking-display: -0.03em; --tracking-label: 0.08em; /* --- Spacing scale ------------------------------------------------- */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 2.5rem; /* 40 */ --sp-8: 3rem; /* 48 */ --sp-9: 5rem; /* 80 */ --sp-10: 5.5rem; /* 88 */ --sp-11: 6.9375rem;/* 111 desktop gutter / section rhythm */ --sp-12: 11.25rem; /* 180 how-it-works pb */ /* --- Layout ------------------------------------------------------ */ --content-max: 1218px; --gutter: clamp(1.25rem, -0.62rem + 8.3vw, 6.9375rem); /* 20 -> 111 */ --section-pad-y: clamp(3.5rem, 2.2rem + 5.8vw, 6.9375rem); /* 56 -> 111 */ /* --- Radii ----------------------------------------------------- */ --r-xs: 8px; --r-sm: 12px; --r-md: 14px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 22px; /* glass CTA */ --r-3xl: 24px; /* step card */ --r-pill: 999px; /* --- Borders (rough / hand-drawn feel) ------------------------- */ --bw-hair: 1px; --bw-thin: 3px; /* mint CTA, step cards */ --bw-thick: 7px; /* framed imagery, FAQ cards */ --frame-mint: var(--c-mint-44); --frame-mint-solid: var(--c-mint); /* --- Brush-stroke system — one reusable set, five VERITE recipes ----- Every hand-drawn stroke on the site maps to exactly one of these. Rendered as border-image / background from filtered SVGs so the texture costs nothing at runtime (rasterised & cached by the browser). 01 Image borders BACKWARD · QUARTER_TAPER · #00FFBC 44% · 5–8px → .frame (portfolio, philosophy, about, scatter, service mock) 02 UI elements FORWARD · UNIFORM · #00FFBC 74–100% · 3px → buttons, FAQ cards + controls, Services controls, process cards, hero media 03 Marquee ribbon FORWARD · EYE · #314D76 · 20px → .marquee 04 Services ground FORWARD · TAPER · #0B121C · 33px → torn top edge of the dark Services section 05 Decorative rule BACKWARD · QUARTER_TAPER · #B8B8BD · 4px → every hand-drawn divider / meta rule / output rule */ --brush-image: url("../assets/brush-image.svg") 41 / 5px round; /* recipe 01 — hand-drawn rough mint frame */ --brush-image-7: url("../assets/brush-image.svg") 41 / 4px round; /* recipe 01 (tighter) */ --brush-ui: url("../assets/brush-ui.svg") 30 / 4px round; /* recipe 02 */ --brush-step: url("../assets/brush-step.svg") 33 / 20px round; /* recipe 02 · How-I-Work cards · 20px round corner baked in */ --brush-band: url("../assets/brush-band.svg") 52 / 20px round; /* recipe 03 */ --brush-divider: url("../assets/brush-divider.svg"); /* recipe 05 */ --torn-top: url("../assets/torn-top.svg?v=21"); /* soft deckle · dark · Services / closing top */ --torn-bottom: url("../assets/torn-bottom.svg?v=21"); /* soft deckle · dark · Services bottom */ --torn-hero: url("../assets/torn-hero-bottom.svg?v=14"); /* soft deckle · white · hero → philosophy */ /* --- Elevation ----------------------------------------------- */ --shadow-card: 0 12px 12px rgba(0, 0, 0, 0.25); --shadow-soft: 0 18px 40px -18px rgba(0, 0, 0, 0.35); /* --- Motion ------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); --dur-1: 140ms; --dur-2: 260ms; --dur-3: 420ms; --dur-4: 620ms; --reveal-shift: 18px; /* --- Sticky glass navigation ------------------------------------- */ --nav-inset: clamp(1rem, -1.6rem + 8.3vw, 6.9375rem); /* ~16 → 111 : ~110px each desktop side */ --nav-radius: var(--r-pill); --nav-fg-light: var(--c-ink); /* over light sections */ --nav-fg-dark: #ffffff; /* over dark / photo */ /* --- Z-index ---------------------------------------------- */ --z-nav: 100; --z-overlay: 200; }