/* ========================================================================== TOKENS — D&J GROUP LLC · NAIL SALON TEMPLATE 05 · "ONYX & GOLD" -------------------------------------------------------------------------- *** THIS IS THE ONLY FILE YOU NEED TO EDIT TO REBRAND THE WHOLE SITE. *** main.css contains no hard-coded colours. Change the six values in the BRAND block below and every page re-skins at once. Palette: obsidian. A jewellery box, lit by one candle. Bone-white type, antique brass used the way a printer uses foil — as a hairline, an eyebrow, a price. Never as a fill behind body copy, never as a panel. Every colour pairing that carries text was measured against WCAG 2.1. The ratios beside each token are real measurements, not estimates. Tokens marked (!) are the ones sitting closest to a threshold — re-check those first if you change a brand value. ========================================================================== */ :root { /* ═══════════════════════════════════════════════════════════════ BRAND Swap these six values to rebrand. Everything else is derived. */ --brand-canvas: #08080A; /* the page (obsidian) */ --brand-surface: #131317; /* raised panel, nav on scroll (graphite) */ --brand-ink: #F4F1EA; /* body + headings (bone) */ --brand-brass: #B08D3F; /* PRIMARY: rules, eyebrows, prices */ --brand-champagne: #E5D2A6; /* hover, and the pale stop in the foil */ --brand-mute: #8A857A; /* captions, meta, fine print (warm grey) */ /* ───────────────────────────────────────────────── derived surfaces Depth in this design comes from black-on-black, never from shadow. Three steps is the whole range; a fourth starts to look grey. */ --c-canvas: var(--brand-canvas); --c-surface: var(--brand-surface); --c-surface-2: #1A1A20; /* raised ON surface */ --c-well: #050506; /* recessed: image beds, code */ /* ───────────────────────────────────────────────────── derived text */ --c-ink: var(--brand-ink); /* on canvas 17.7:1 */ /* on surface 16.4:1 */ --c-ink-soft: #CFCABC; /* secondary copy 12.2:1 */ --c-mute: var(--brand-mute); /* meta (!) 5.5:1 / 5.0:1 */ --c-brass: var(--brand-brass); /* as TEXT (!) 6.4:1 / 5.9:1 */ --c-champagne: var(--brand-champagne); /* hover 13.4:1 */ --c-on-brass: var(--brand-canvas); /* text ON a brass fill 6.4:1 */ /* ────────────────────────────────────────────────────────── hairlines Two weights, and they are not interchangeable. --c-rule is DECORATION: the double-rule dividers, the line under the nav, the keyline round the footer logo plate. It measures 1.9:1 and is allowed to, because WCAG exempts purely decorative graphics. --c-edge is the boundary of a CONTROL — a form field, a button outline, the slideshow dots. WCAG 1.4.11 wants 3:1 for the edge that tells you a control is a control. This is brass at 74% over obsidian, measured at 3.9:1 on the canvas and 3.6:1 on the surface, so it clears on both. Do not swap one for the other to "tidy up". */ --c-rule: rgba(176, 141, 63, .42); --c-rule-soft: rgba(244, 241, 234, .13); --c-edge: #846A31; /* (!) 3.9:1 canvas, 3.6:1 surf */ --c-edge-lit: var(--brand-champagne); /* the same edge, focused */ /* ─────────────────────────────────────────────────────────── status The live open/closed pill, and nothing else. Both are desaturated on purpose: a signal red or a signal green would be the brightest thing on an otherwise black page and would out-shout the photography. */ --c-open: #8CB98C; /* 9.0:1 canvas, 8.3:1 surface */ --c-closed: #D08C7B; /* 7.4:1 canvas, 6.8:1 surface */ /* ═══════════════════════════════════════════════════════════ EFFECTS */ /* THE FOIL. One gradient, used everywhere gold is stamped rather than drawn: the D&J mark, the chapter numerals, the price plate corners. 105deg so the highlight rakes across a wide mark the way real foil catches a light source above and to the left. */ --foil: linear-gradient(105deg, var(--brand-brass) 0%, var(--brand-champagne) 46%, var(--brand-brass) 100%); /* The D&J mark as a silhouette, for clipping the foil to. Regenerate it from new artwork with assets/img/source/make-logo.ps1. Path is relative to THIS file, not to the HTML. EDIT:LOGO */ --mark-mask: url("../img/logo-mask.png"); /* PHOTO GRADE. Every photograph passes through .ph, which applies this filter and lays --vignette over it. The set is sourced low-key to begin with; this pushes the last of the mid-greys down so twenty-two photographs from twenty-two different shoots read as one commission. There is a hard rule attached to this template, enforced by assets/img/source/fetch-photos.ps1 -Audit: no photograph may have a mean luminance above 118/255. One bright frame reads as a hole punched in the page and undoes the whole design. */ --photo-grade: contrast(1.12) brightness(.92) saturate(.85); /* Vignette, laid over every photo. Keeps the frame from ending in a hard rectangle against the obsidian page — the picture fades into the paper instead of being pasted on it. */ --vignette: radial-gradient(120% 100% at 50% 42%, rgba(8, 8, 10, 0) 38%, rgba(8, 8, 10, .34) 74%, rgba(8, 8, 10, .78) 100%); /* Scrims for type over photography. The hero scrim is deliberately heavy: over the brightest photo in the set it still leaves bone type at 14.6:1 and brass at 5.3:1. */ --scrim-hero: linear-gradient(180deg, rgba(8, 8, 10, .86) 0%, rgba(8, 8, 10, .62) 42%, rgba(8, 8, 10, .78) 76%, rgba(8, 8, 10, .96) 100%); --scrim-band: linear-gradient(180deg, rgba(8, 8, 10, .74) 0%, rgba(8, 8, 10, .58) 50%, rgba(8, 8, 10, .84) 100%); /* Glass, for the nav once it lifts off the hero. */ --glass: rgba(11, 11, 14, .78); --glass-blur: blur(14px) saturate(1.1); /* ═══════════════════════════════════════════════════════════════ PRINT Clients print the price list. Nobody should print a black page, so the @media print block inverts to paper — and because main.css is not allowed to name a colour, the paper palette lives here too. */ --print-paper: #FFFFFF; --print-ink: #000000; --print-mute: #444444; --print-rule: #999999; /* ══════════════════════════════════════════════════════════════ TYPE Both families load from Google Fonts in each page's . If you change these, update the tag on all four pages too. Cormorant Garamond is a display Garamond: very high contrast, very fine hairlines. It is set at 300 and 400 only — its bolder weights lose the thin strokes that make it worth using. It is also small on the body, so body copy never goes below 19px. Do not "tighten" that. Montserrat carries every piece of interface text: nav, eyebrows, buttons, prices, meta. Always uppercase, always tracked out, never larger than 15px. The two never compete because they never do the same job. */ --font-display: "Cormorant Garamond", Cormorant, Garamond, "Times New Roman", serif; --font-ui: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; --fs-wordmark: clamp(3rem, 9vw, 8rem); /* the hero name */ --fs-h1: clamp(2.4rem, 6.2vw, 4.6rem); --fs-h2: clamp(2rem, 4.4vw, 3.3rem); --fs-h3: clamp(1.45rem, 2.4vw, 1.95rem); --fs-quote: clamp(1.75rem, 4.6vw, 3.4rem); --fs-carte: clamp(1.45rem, 2.5vw, 2.05rem); /* service names */ --fs-lede: clamp(1.2rem, 1.6vw, 1.45rem); --fs-body: 1.1875rem; /* 19px floor */ --fs-fine: 0.9375rem; --fs-meta: 0.75rem; /* Montserrat, tracked */ --fs-label: 0.6875rem; /* eyebrows */ --fs-numeral: clamp(0.8rem, 1vw, 0.9rem); /* the 01 — 06 marks */ --lh-display: 1.02; --lh-tight: 1.16; --lh-body: 1.78; /* a light serif needs air */ --lh-ui: 1.5; --ls-wordmark: .085em; /* tracked-out display serif*/ --ls-display: .015em; --ls-label: .22em; /* per the brief */ --ls-meta: .16em; --ls-body: .002em; /* ════════════════════════════════════════════════════════════ LAYOUT */ --wrap: 1180px; --wrap-mid: 880px; --wrap-narrow: 660px; --gutter: clamp(1.5rem, 5vw, 4rem); /* Padding inside a chapter, ON TOP of the fixed header's height. Kept modest because a chapter is already a whole viewport with its content optically centred — adding a further 7rem of air just pushed the last two courses of the carte off a laptop screen. */ --chapter-y: clamp(2.5rem, 4vw, 3.5rem); --section-y: clamp(4.5rem, 9vw, 8rem); /* on the ordinary pages */ /* Zero radius, everywhere, on purpose. It is a token rather than a habit so that "did someone round a corner?" is one grep, not an audit. */ --r: 0; /* The double rule: two 1px brass hairlines, this far apart. */ --rule-gap: 4px; --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur: .7s; /* chapter reveal, per brief*/ --dur-fast: .28s; --head-h: 76px; /* One height for every single-line form control. Chrome gives input[type="date"] a taller intrinsic content box than a text input or a select does, so a date field beside a time field is visibly a couple of pixels out unless all three are pinned. */ --field-h: 3.7rem; } @media (max-width: 900px) { :root { --head-h: 62px; --lh-body: 1.72; } } /* Respect users who ask for less motion. main.css additionally switches off the chapter reveal, the rule draw and the slideshow's auto-advance. */ @media (prefers-reduced-motion: reduce) { :root { --dur: .001s; --dur-fast: .001s; } }