/* ========================================================================== TOKENS — D&J GROUP LLC · NAIL SALON TEMPLATE 07 · "SOFTBOX" -------------------------------------------------------------------------- *** 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: a soft off-white studio backdrop with pure-white cards floating on it, one friendly violet doing all the work, and a warm peach as the second voice. Built to read as a modern product — organised, calm, easy to book with — rather than as a spa. Every colour pairing that carries text was measured against WCAG AA with a contrast calculator, not estimated. The ratios are written next to the tokens; if you change a brand value, re-check the ones marked (!). ========================================================================== */ :root { /* ═══════════════════════════════════════════════════════════════ BRAND Swap these six values to rebrand. Everything else is derived. */ --brand-canvas: #F6F6F4; /* page background (soft off-white) */ --brand-surface: #FFFFFF; /* cards, tiles, nav pill (pure white) */ --brand-ink: #1B1B1F; /* text, dark panels (near black) */ --brand-lilac: #6D5BD0; /* PRIMARY: buttons, active state, links */ --brand-peach: #FF8A6B; /* SECONDARY: highlights, tags, accents */ --brand-mute: #6C6C78; /* captions and meta text (cool grey) */ /* ────────────────────────────────────────────────── derived surfaces */ --c-canvas: var(--brand-canvas); --c-surface: var(--brand-surface); --c-sunk: #F1F1EE; /* wells, inputs, image beds */ --c-ink-surface: #17171A; /* dark band / footer */ --c-ink-raised: #232329; /* raised panel ON the band */ /* Three hairlines, three jobs. Decorative rules are allowed to be quiet; the edge of an interactive control is not — WCAG 1.4.11 asks 3:1 for the boundary that tells you a control is a control. */ --c-line: #E4E4E0; /* hairline on the canvas */ --c-line-soft: #ECECE8; /* card border on white — the reason white-on-white reads */ --c-line-ink: rgba(255,255,255,.14); /* hairline on the dark band */ /* (!) 3.7:1 on white, 3.5:1 on canvas, 3.3:1 on the sunk surface — it has to clear 3:1 against all three, because controls appear on all three. */ --c-line-strong: #83838F; /* ────────────────────────────────────────────────────── derived text */ --c-ink: var(--brand-ink); /* headings + body 15.9:1 */ --c-ink-soft: #45454F; /* secondary copy 8.8:1 */ --c-ink-mute: var(--brand-mute); /* meta, captions (!) 4.8:1 */ --c-on-ink: #FFFFFF; /* text ON the dark 17.9:1 */ --c-on-ink-mute: #A5A5B3; /* meta ON the dark 7.1:1 */ /* ──────────────────────────────────────────────────── derived accent --c-lilac is the FILL: white on it measures 5.2:1, which is why the primary button works. As *text* on the canvas it is 4.8:1 — legal but tight — so running text, links and prices use --c-lilac-ink instead. Keeping the two apart is what lets the brand colour stay this friendly. */ --c-lilac: var(--brand-lilac); /* fills; white on it 5.2:1 */ --c-lilac-ink: #5A47C4; /* lilac AS TEXT 6.2:1 */ --c-lilac-deep: #4A3AA8; /* pressed / hover fill */ --c-lilac-lt: #C3B8F5; /* lilac ON the dark 9.4:1 */ --c-lilac-wash: rgba(109,91,208,.10); /* tinted chip fill */ --c-lilac-edge: rgba(109,91,208,.28); /* tinted hairline */ --c-lilac-ring: rgba(109,91,208,.16); /* the "most booked" halo */ --c-lilac-glow: rgba(109,91,208,.26); /* coloured shadow */ /* Peach is a FILL AND A SHAPE, never small text: at 2.1:1 on the canvas it is invisible as type. Ink on a peach fill is 7.4:1, and --c-peach-ink is the darkened version for the rare peach word. */ --c-peach: var(--brand-peach); --c-peach-ink: #9E3E1C; /* peach AS TEXT (!) 6.1:1 */ --c-peach-wash: rgba(255,138,107,.14); --c-peach-edge: rgba(255,138,107,.34); /* Status colours: the live open/closed pill and the amber "placeholder" ribbons on anything invented. All three clear AA on canvas and white. */ --c-open: #177A50; /* 4.9:1 on canvas */ --c-closed: #B4342A; /* 5.6:1 */ --c-warn: #8A5E10; /* 5.3:1 */ --c-warn-wash: rgba(138,94,16,.10); --c-open-wash: rgba(23,122,80,.12); /* Photographs sit on white cards, so they need an inside hairline or a pale image dissolves into its own tile. */ --c-photo-edge: rgba(27,27,31,.08); --c-photo-bed: #EDEDEA; /* shows while an image loads */ /* ═══════════════════════════════════════════════════════════ EFFECTS */ /* THE SHAPE. Softbox has no masks and no ornament — the radius *is* the design language. Four steps, used consistently: a tile, a card, a control, a pill. Set them all to 0 and you get a different template. */ --r-xs: 8px; /* chips, price pills */ --r-sm: 12px; /* inputs, small buttons */ --r-tile: 20px; /* bento tiles, photos */ --r-card: 24px; /* cards, panels, sections */ --r-lg: 32px; /* the big feature panels */ --r-pill: 999px; /* SHADOWS ARE TWO-LAYER. One tight 1px layer to seat the card on the canvas, one wide soft layer for the float. A single big blurry shadow is what makes a page look like 2016. */ --shadow-sm: 0 1px 2px rgba(27,27,31,.05); --shadow: 0 1px 2px rgba(27,27,31,.04), 0 12px 32px rgba(27,27,31,.06); --shadow-lift: 0 2px 4px rgba(27,27,31,.05), 0 22px 48px rgba(27,27,31,.10); --shadow-pill: 0 1px 2px rgba(27,27,31,.05), 0 10px 30px rgba(27,27,31,.09); --shadow-lilac:0 1px 2px rgba(74,58,168,.16), 0 10px 26px var(--c-lilac-glow); /* PHOTO GRADE — deliberately NONE. This template is high-key and true colour; the photographs were sourced bright so they would not need rescuing. Everything still passes through .ph, so a client who wants a house look can put a filter here and restyle all 24 images at once. */ --photo-grade: none; /* Scrim for the rare piece of type over a photograph. */ --scrim: linear-gradient(180deg, rgba(27,27,31,0) 34%, rgba(27,27,31,.58) 100%); /* A very quiet dot field, inline as a data URI: no HTTP request, no binary asset to lose. Used behind the bento and the CTA panel to stop large flat areas from looking empty. You should barely see it. */ --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='1.4' cy='1.4' r='1.4' fill='%231B1B1F' fill-opacity='.05'/%3E%3C/svg%3E"); /* ══════════════════════════════════════════════════════════════ TYPE Both families load from Google Fonts in each page's . If you change these, update the tag on all 5 pages too. Plus Jakarta Sans runs the entire interface. Instrument Serif is used for exactly two things — the hero headline and the section eyebrows — a single serif voice inside an otherwise all-sans system. Resist adding a third use for it; the restraint is the effect. */ --font-ui: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif; --fs-display: clamp(2.6rem, 5.4vw, 4.6rem); /* hero headline (serif) */ --fs-h1: clamp(2.1rem, 4.2vw, 3.3rem); --fs-h2: clamp(1.7rem, 2.9vw, 2.5rem); --fs-h3: clamp(1.12rem, 1.5vw, 1.3rem); --fs-lede: clamp(1.02rem, 1.15vw, 1.19rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-fine: 0.8125rem; --fs-label: 0.75rem; /* tracked-out eyebrows */ --fs-num: clamp(2rem, 3.4vw, 2.9rem); /* bento stat numerals */ --lh-display: 1.02; --lh-tight: 1.15; --lh-body: 1.65; --ls-display: -0.02em; --ls-h: -0.025em; /* the sans tracks tight */ --ls-label: 0.1em; /* ════════════════════════════════════════════════════════════ LAYOUT */ --wrap: 1200px; --wrap-wide: 1340px; --wrap-narrow: 700px; --gutter: clamp(1.15rem, 4vw, 2.5rem); --section-y: clamp(3.5rem, 6vw, 5.5rem); --gap: clamp(0.75rem, 1.4vw, 1.125rem); /* the bento gutter */ /* MOTION. One spring, used on every tile and button hover, is what makes the whole site feel like one piece of software. */ --spring: cubic-bezier(.34, 1.56, .64, 1); --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur: .42s; --dur-fast: .2s; --head-h: 84px; /* the floating pill's total vertical footprint */ } @media (max-width: 900px) { :root { --head-h: 76px; } } /* Respect users who ask for less motion. main.css additionally switches off the bento stagger, the tile lift, the toggle slide and every transform. */ @media (prefers-reduced-motion: reduce) { :root { --dur: .001s; --dur-fast: .001s; } }