/* mws-site-kit v0.1.0 | tokens.css ========================================================================== THE ONLY FILE YOU EDIT PER CLIENT. Three layers, and the split is the whole point of this file: 1. BRAND - changes every site. Colour ramp, accent, fonts. 2. SCALE - changes almost never. Type steps, spacing, easing. 3. MODE - a narrow override layer. Touches accent and tints ONLY. The guardrail, inherited from the Limitless reference and worth stating plainly: a mode override must NEVER move the brand ramp. If switching to "winter" can change --brand-600, the site stops looking like the client's business and starts looking like a theme. Modes move accent, paper and the two lightest brand tints. Nothing else. ========================================================================== */ :root{ /* --------------------------------------------------------------- 1. BRAND - replace all of this per client. Eleven steps, darkest to lightest. Sample 600 from the client's real logo mark, then build the ramp around it. 600 is the anchor: it is what "the brand colour" means on this site. --------------------------------------------------------------- */ /* TOM & JERRY'S — PROVISIONAL. We do not have the logo yet. The kit's rule is that --brand-600 is sampled from the client's real logo mark and the ramp is built around it; until that file arrives this is a stand-in, chosen only because a deep utility blue is the safest neutral for a plumbing/electric/HVAC company and will not embarrass anyone in a preview. RESAMPLE BEFORE LAUNCH — every colour on the site follows from 600, so it is a one-line change. */ --brand-950:#080E16; --brand-900:#0E1826; --brand-800:#152538; --brand-700:#1E3A5F; --brand-600:#28527F; /* <- the anchor. PROVISIONAL until the logo lands. */ --brand-500:#33669B; --brand-400:#5285BA; --brand-300:#8AB0D4; --brand-200:#C0D5E9; --brand-100:#DFEAF4; --brand-050:#F1F6FB; /* Accent. The high-visibility call-to-action colour. Deliberately NOT part of the brand ramp: it has to fight the brand colour for attention, not harmonise with it. --accent-dk is the shadow/hover partner. */ --accent:#F2C230; --accent-dk:#C99A15; /* Neutrals. Warm or cool these slightly toward the brand hue so neutrals do not read as dead next to it, but keep them near-neutral. */ --ink-950:#101109; --ink-900:#1A1C14; --ink-700:#3A3D33; --ink-500:#6B6E62; --ink-300:#A8AB9F; --ink-100:#DEDFD7; --paper:#F8F8F4; /* page background */ --white:#fff; /* Fonts. Three slots, and three is enough: display - headings. Heavy, opinionated, uppercase. body - paragraphs. Must be readable at 14px on a phone. util - eyebrows, labels, nav. Condensed, letterspaced, uppercase. Always keep the system fallbacks. A webfont that fails to load should degrade, not collapse the layout. */ --font-display:'Archivo Black',system-ui,sans-serif; --font-body:'Barlow',system-ui,-apple-system,sans-serif; --font-util:'Barlow Condensed',system-ui,sans-serif; /* --------------------------------------------------------------- 2. SCALE - do not edit per client. The fluid type scale. Copied verbatim from the Limitless reference because it is already correct and re-deriving it per site is exactly the waste this kit exists to remove. Every step is clamp(min, preferred, max): the text grows with the viewport and then stops. No breakpoint jumps, no 40px headings on a 360px phone. Use the steps. Do not write raw font-size values. --------------------------------------------------------------- */ --step--1:clamp(.82rem,.79rem + .16vw,.92rem); /* fine print, labels */ --step-0:clamp(1rem,.96rem + .22vw,1.11rem); /* body */ --step-1:clamp(1.18rem,1.10rem + .40vw,1.44rem); /* lede, h3 */ --step-2:clamp(1.45rem,1.30rem + .78vw,2rem); /* sub-headings */ --step-3:clamp(1.85rem,1.55rem + 1.5vw,2.9rem); /* h2 */ --step-4:clamp(2.4rem,1.85rem + 2.9vw,4.6rem); /* h1 / hero */ /* Spacing. Deliberately sparse - five values, not a 12-step system. A short scale forces consistent rhythm; a long one just relocates the guesswork. */ --sp-2:1rem; --sp-3:1.5rem; --sp-4:2.5rem; --sp-5:4rem; --sp-6:6rem; /* Structure */ --tear-h:clamp(34px,5vw,84px); /* torn-edge band height */ --wrap:1240px; /* max content width */ /* Easing. One curve, used everywhere. A site with four different easing curves reads as four different sites. */ --ease-out:cubic-bezier(.16,1,.3,1); } /* ========================================================================== 3. MODE OVERLAY Set data-mode on to shift the site's seasonal or campaign feel: Or from the console / a one-line script: document.documentElement.dataset.mode = 'storm'; THE RULE: a mode block may only override --accent, --accent-dk, --paper, and the two lightest brand tints (--brand-050, --brand-100). If you find yourself wanting to override --brand-600 here, you do not want a mode. You want a different client's tokens. These four are presets, not a fixed list. Add campaign modes the same way ("promo", "storm-response") using the same four-property budget. NOTE: this is set in the HTML source by MWS and deployed. There is no editing UI and there is not meant to be one. See README "What this kit deliberately does not do". ========================================================================== */ html[data-mode="winter"]{ --accent:#8FC1E3; --accent-dk:#5B93BC; --paper:#F1F6FA; --brand-050:#EDF4F9; --brand-100:#DCEAF3; } html[data-mode="spring"]{ --accent:#A8C93C; --accent-dk:#7E9A22; --paper:#F5F9EE; --brand-050:#F2F7E9; --brand-100:#E4EED2; } html[data-mode="storm"]{ --accent:#E8842A; --accent-dk:#B7621A; --paper:#F7F4F1; --brand-050:#F4F0EB; --brand-100:#E9E2D8; } html[data-mode="summer"]{ --accent:#F2C230; --accent-dk:#C99A15; --paper:#FAF8F1; --brand-050:#F7F5EA; --brand-100:#EFEBD8; } /* Cross-fade when the mode changes, so a switch reads as a shift in light rather than a flash. Only colour properties transition - never layout. */ body, .band, .card, .btn--go, .hero__tag{ transition:background-color .6s var(--ease-out), color .6s var(--ease-out), border-color .6s var(--ease-out); } @media(prefers-reduced-motion:reduce){ body,.band,.card,.btn--go,.hero__tag{transition:none} }