/* ========================================================================== TOKENS — D&J GROUP LLC · NAIL SALON TEMPLATE 06 · "STUDIO FORMAT" -------------------------------------------------------------------------- *** THIS IS THE ONLY FILE YOU NEED TO EDIT TO REBRAND THE WHOLE SITE. *** main.css contains no hard-coded colours — not one hex code, not one rgba(). Change the six values in the BRAND block below and every page re-skins. The design is Swiss / International style: pure white paper, a 12-column grid you can actually see, black-and-white photography, and ONE colour. That last rule is the whole design. Red is a signal, not a decoration — it marks the current thing, the important rule, and nothing else. If you find yourself adding a second red element to a screen, delete the weaker one. Every colour pairing that carries text was measured against WCAG AA. The ratios are written next to the tokens. If you change a brand value, re-check the ones marked (!) — those are the ones with the least headroom. ========================================================================== */ :root { /* ═══════════════════════════════════════════════════════════════ BRAND Swap these six values to rebrand. Everything else is derived. */ --brand-canvas: #FFFFFF; /* the paper. Not off-white — paper. */ --brand-surface: #F2F2F0; /* grid wells, alternating bands */ --brand-ink: #111111; /* all text, all structural rules */ --brand-red: #E1261D; /* PRIMARY — the only colour, used sparingly */ --brand-cobalt: #1B44E5; /* SECONDARY — links only, never a fill */ --brand-mute: #6E6E6C; /* captions, figure numbers, meta */ /* ────────────────────────────────────────────────── derived surfaces */ --c-canvas: var(--brand-canvas); --c-surface: var(--brand-surface); /* ────────────────────────────────────────────────────── derived text ink 18.9:1 on paper · 16.9:1 on surface ink-soft 11.4:1 on paper · 10.2:1 on surface — running body copy mute (!) 5.1:1 on paper · 4.6:1 on surface — captions only, and it is the tightest pairing on the site. Do not lighten it. */ --c-ink: var(--brand-ink); --c-ink-soft: #3A3A38; --c-mute: var(--brand-mute); --c-on-ink: var(--brand-canvas); /* paper on ink 18.9:1 */ /* ──────────────────────────────────────────────────────── derived red --c-red is safe BOTH as text on paper (4.7:1) and as a fill under paper-white text (4.7:1). That symmetry is why it sits exactly here; nudging it lighter breaks one side, darker kills the signal. (!) --c-red is NOT safe as text on --c-surface (4.2:1, fails AA). Any red word that lands in a grid well must use --c-red-ink instead. */ --c-red: var(--brand-red); /* text on paper (!) 4.7:1 */ --c-red-ink: #C41C14; /* red TEXT on surface 5.3:1 and on paper 6.0:1 */ --c-red-deep: #B01A12; /* pressed fill; paper on it 7.0:1 */ /* ───────────────────────────────────────────────────── derived cobalt Links only — never a fill, never a rule. In a one-colour system the blue reads as "this is a link" precisely because nothing else is blue. */ --c-cobalt: var(--brand-cobalt); /* on paper 7.0:1 · surface 6.2:1 */ --c-cobalt-deep: #1636B8; /* hover / visited 9.3:1 */ /* ─────────────────────────────────────────────────────────────── rules Three weights, and the difference matters: --c-rule the STRUCTURAL 1px ink rule. This is the design. Full bleed, hard, no opacity. Everything is a rule or an edge. --c-rule-soft a decorative hairline inside a well, where a full ink rule would be too loud. Never carries meaning. --c-rule-ui (!) the edge of an INTERACTIVE control — inputs, the filter buttons. WCAG 1.4.11 wants 3:1 for the boundary that tells you a control is a control, and the decorative hairline manages 1.3:1. Measured 3.6:1 on paper and 3.2:1 on the surface, because controls appear on both. */ --c-rule: var(--brand-ink); --c-rule-soft: #DADAD6; --c-rule-ui: #878784; /* Translucent values live here rather than in main.css, so that file can stay genuinely free of colour literals. */ --c-red-wash: rgba(225, 38, 29, .07); /* the G-key grid overlay */ --c-red-edge: rgba(225, 38, 29, .34); /* its column edges */ --c-ink-wash: rgba(17, 17, 17, .05); /* image bed behind a loading photo */ --c-scrim: rgba(17, 17, 17, .55); /* type over a photograph */ /* ═══════════════════════════════════════════════════════════ EFFECTS */ /* THE PHOTO GRADE. Every photograph on the site passes through .ph, which applies this one filter. The image files on disk are full colour — the black-and-white is done here, in one line, so a client who wants colour back changes this token instead of re-sourcing twenty photographs. 100% grayscale, no exceptions. The only colour on this site is the red. */ --photo-grade: grayscale(1) contrast(1.15); /* No shadows. No gradients. No radius. All three are deliberate and all three are load-bearing — a single rounded corner or soft shadow makes the whole grid look like an accident. The token stays at 0 so that any component reaching for a radius still lands flat. */ --radius: 0; /* ══════════════════════════════════════════════════════════════ TYPE Both families load from Google Fonts in each page's . If you change these, update the tag on all 4 pages too. Archivo is a variable grotesque with a genuine 800 weight — it holds up at 6rem without turning into a poster face. Set tight: -.02em tracking and .94 line-height, which is what makes a headline read as a block of type rather than a row of words. Roboto Mono does every number, label and caption on the site at 11px uppercase. Monospace is not decoration here: the price columns and the figure numbers depend on every digit occupying the same width. */ --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --fs-display: clamp(2.5rem, 7vw, 6rem); /* hero statement */ --fs-h1: clamp(2rem, 5vw, 3.75rem); --fs-h2: clamp(1.5rem, 3.2vw, 2.5rem); --fs-h3: clamp(1.05rem, 1.5vw, 1.35rem); --fs-lede: clamp(1.05rem, 1.4vw, 1.3rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-mono: 0.6875rem; /* 11px — the label size */ --fs-mono-md: 0.8125rem; /* 13px — price columns */ --fs-figure: clamp(1.75rem, 3.5vw, 2.75rem);/* the 01 / 02 / 03 marks */ --lh-display: 0.94; --lh-tight: 1.06; --lh-body: 1.6; --ls-display: -0.02em; /* Archivo tracks tight */ --ls-h: -0.015em; --ls-mono: 0.09em; /* mono labels track wide */ /* ════════════════════════════════════════════════════════════ LAYOUT The grid is 12 columns with an honest 24px gutter. "Honest" means the gutter you see is the gutter in the CSS — nothing is faked with padding to make the columns look tidier than they are. Press G on any page. */ --cols: 12; --gutter: 24px; --rail-w: 200px; /* the fixed left nav */ --pad-x: clamp(20px, 3.5vw, 44px); --wrap: 1360px; --section-y: clamp(4rem, 8vw, 7.5rem); --section-sm: clamp(2.5rem, 5vw, 4.5rem); /* Motion is almost absent by design. Rules draw on reveal; that is it. The hover image panel deliberately has NO transition — it is a hard cut, like changing a slide. Do not add easing to it. */ --ease: cubic-bezier(.2, .7, .3, 1); --dur: .55s; --dur-fast: .15s; } @media (max-width: 1024px) { :root { --rail-w: 0px; /* rail collapses to a bar */ --gutter: 20px; } } /* Respect users who ask for less motion. main.css additionally switches off the rule-draw reveal and pins every revealed element to its final state. */ @media (prefers-reduced-motion: reduce) { :root { --dur: .001s; --dur-fast: .001s; } }