/* ========================================================================= Design tokens — Step 1.1 ------------------------------------------------------------------------- Every value in the site comes from here. Named by ROLE, not by value, so changing --text-muted recolours every muted thing at once. Values are measured from the Wix original (reference/layout.md and reference/interactions.json), not copied from its stylesheets. If you are changing the look of the site, you almost certainly want to edit this file and nothing else. ========================================================================= */ :root { /* ---- colour ------------------------------------------------------------ The whole site runs on white, near-black and one grey. */ --ink: #1A1A1A; /* all headings and body copy */ --ink-strong: #000000; /* hover states that go fully black */ --text-muted: #868686; /* nav, footer, eyebrows, captions */ --surface: #FFFFFF; /* page background */ --surface-alt: #F5F6F7; /* "Background Grey" — tinted blocks */ --surface-inverse: #1A1A1A; /* filled buttons at rest */ --surface-tint: #E3F4FF; /* pale blue band on a case study */ --surface-mint: #E6F6EF; /* pale green band, Blink */ --border-subtle: #CAC4D0; /* outlined button at rest */ --border-strong: #000000; /* outlined button on hover */ --focus-ring: #0064D6; /* visible keyboard focus — Wix "Color 8" */ --link-accent: #0064D6; /* inline links in body copy — same "Color 8" */ /* The 4px rule beside a case-study meta block takes its PROJECT's accent, the same way the intro panel takes its project's tile fill. */ --rule-business: #1EADFF; --rule-blink: #1FB578; --rule-design: #F9A825; --rule-trade: #2196F3; --rule-pos: #FF5252; --surface-deep: #1E88E5; /* the strong blue band on Simple Trade */ /* Simple Trade's intro panel is the one that does NOT match its tile fill: #BBDEFB against the tile's #B6DEFF. Measured, twice. */ --panel-trade: #BBDEFB; /* Accents from the Wix palette. Not used by any current page; kept so the palette is complete and a future page has them to hand. */ --accent-green: #7CB342; /* "Visual Green" */ --accent-red: #EF5350; /* "Visual Red" */ /* Project-tile fills. Every tile on Home carries its own pale fill behind the artwork; measured off the rendered original, one per project. */ --tile-business: #BCE1FF; --tile-blink: #C3E8D5; --tile-design: #FFEE58; --tile-trade: #B6DEFF; --tile-pos: #FECDD2; /* ---- type -------------------------------------------------------------- Ten styles total, measured at 1440px. The original does NOT scale type responsively: a 56px heading stays 56px at 375px wide. Preserved deliberately — see PROJECT_PLAN.md Appendix B if that ever changes. */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-hand: "Kalam", "Bradley Hand", "Brush Script MT", cursive; --step-hero: 72px; --step-hero-lh: 72px; /* "Hello : )" */ --step-title: 56px; --step-title-lh: 67.2px; /* page title */ --step-section: 36px; --step-section-lh: 43.2px; /* section heading */ --step-sub: 24px; --step-sub-lh: 28.8px; /* subsection */ --step-body: 16px; --step-body-lh: 28px; /* body copy */ --step-lead: 16px; --step-lead-lh: 19.2px; /* card titles */ --step-small: 14px; --step-small-lh: normal; /* nav, eyebrow */ --step-minor: 20px; --step-minor-lh: 24px; /* numbered subhead on mobile */ /* Tracking. The Wix Site Styles panel defines these in em; the measured page confirms them in px (56px x -0.04em = -2.24px, and so on). */ --tracking-title: -0.04em; /* 56px headings */ --tracking-section: -0.02em; /* 36px headings */ --tracking-tight: -0.01em; /* 24px and 16px */ --tracking-none: 0; /* 14px and the hero */ --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; /* ---- layout ------------------------------------------------------------ Measured: the outer gutter is a fixed 24px on mobile and 10% of the viewport from 751px up. Content splits 62.5% / 37.5% (media / text). */ --gutter: 24px; --container-max: 1600px; --split-media: 62.5%; --split-text: 37.5%; /* Case studies run TWO gutters, both measured: text sits on the 10% grid above, full-width media on a wider 6.25% one (90px at 1440, 56px at 900, the same 24px on mobile). Same shape as --gutter so both track the breakpoints together. */ --gutter-wide: 24px; /* ---- spacing ----------------------------------------------------------- A 4px-based scale. --space-section is the measured gap between major blocks, which really does grow with the breakpoint. */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 40px; --space-xl: 64px; --space-2xl: 96px; --space-section: 615px; /* mobile; overridden per breakpoint below */ /* ---- shape ------------------------------------------------------------- Measured 20px on a ~40px-tall button, i.e. a full pill. */ --radius-pill: 999px; --radius-tile: 16px; /* project tiles on Home */ --radius-none: 0; /* The tile shadow. Measured: angle 0, distance 1px, blur 2px, black 30%. */ --shadow-tile: 0 1px 2px rgba(0, 0, 0, .3); /* Case-study screenshots float above the page on a much larger shadow, and it SCALES with the viewport: 36/54px at 1440, 22.5/33.75 at 900, 9.4/14.1 at 375 — all of them exactly 2.5vw and 3.75vw. Capped at the 1600 grid so it stops growing where the content does. Its faint sibling sits under the one "before" screenshot, at a thirty-second of the distance. */ --shadow-float: 0 min(2.5vw, 40px) min(3.75vw, 60px) rgba(0, 0, 0, .3); --shadow-hairline: 0 min(.078vw, 1.25px) min(.156vw, 2.5px) rgba(0, 0, 0, .3); /* The soft glow around a video player. Unlike the others this one does NOT scale — measured at a flat 20px at 1440, 900 and 375. */ --shadow-player: 0 0 20px rgba(0, 0, 0, .2); /* Screenshot corners, both of which scale with the viewport the same way the float shadow does: 27px and 18px at 1440, which is the 24 and 16 Martin's editor shows on its 1280 canvas. */ --radius-float: min(1.875vw, 30px); --radius-media: min(1.25vw, 20px); /* ---- motion ------------------------------------------------------------ Wix transitions 35 properties at once; we transition only what changes. The 0.4s ease timing is measured and worth keeping. */ --duration: 0.4s; --easing: ease; --transition-colors: color var(--duration) var(--easing), background-color var(--duration) var(--easing), border-color var(--duration) var(--easing); /* ---- z-index ----------------------------------------------------------- Named so nobody has to invent a number. */ --z-base: 0; --z-header: 100; --z-overlay: 200; } /* Tablet band: 751-1000px */ @media (min-width: 751px) { :root { --gutter: 10%; --gutter-wide: 6.25%; --space-section: 690px; } } /* Desktop band: 1001px and up */ @media (min-width: 1001px) { :root { --gutter: 10%; --gutter-wide: 6.25%; --space-section: 1013px; } } /* Past the 1600px cap the gutter stops growing and the content centres. */ @media (min-width: 1601px) { :root { --gutter: calc((100vw - var(--container-max)) / 2 + 160px); } } /* Users who ask for less motion get none of it. */ @media (prefers-reduced-motion: reduce) { :root { --duration: 0.01ms; --transition-colors: none; } }