/* ========================================================================== TOKENS — D&J GROUP LLC · NAIL SALON TEMPLATE 08 · "AURORA" -------------------------------------------------------------------------- *** 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 deep navy night sky with two lights behind it — a magenta-violet and an aqua — and the entire interface floating on top as frosted glass. ────────────────────────────────────────────────────────────────────────── READ THIS BEFORE YOU CHANGE ANY COLOUR Glass over a moving gradient is the hardest thing in this portfolio to keep accessible, because the background under a given piece of text is not one colour — it is wherever the orbs happen to be. A contrast ratio measured against the navy is meaningless. Every ratio in this file was instead measured against the BRIGHTEST BACKGROUND THE PAGE CAN PRODUCE, which is: two orbs overlapping at peak -> #2F4A71 ...seen through --mesh-veil (.35) -> #223557 <- the number used That worst case is not a guess; it is the arithmetic of the two orb alphas in --orb-a / --orb-b composited over --brand-canvas and then under the veil. If you raise an orb's alpha or weaken the veil, the worst case gets lighter and every ratio below drops. The tightest one is --c-mute at 4.76:1 — it has 0.26 of headroom over the 4.5 AA floor, so it is the first thing to break. Rule of thumb: brighten the mesh and you must darken the muted text. ========================================================================== */ :root { /* ═══════════════════════════════════════════════════════════════ BRAND Swap these six values to rebrand. Everything else is derived. */ --brand-canvas: #0A0E27; /* page background (deep navy) */ --brand-glow-a: #A855F7; /* mesh light 1 (magenta-violet) */ --brand-glow-b: #2DD4BF; /* mesh light 2 (aqua) */ --brand-ink: #EEF0FF; /* body + headings text */ --brand-accent: #C4B5FD; /* PRIMARY: buttons, links, active, focus */ --brand-mute: #9AA0C0; /* captions, meta, fine print */ /* ═════════════════════════════════════════════════════ DERIVED · TEXT Three ratios per token: on the flat navy, on a single violet orb, and on the worst-case double-orb overlap described at the top of the file. The last column is the one that has to clear AA. */ --c-ink: var(--brand-ink); /* 16.8 · 14.2 · 10.8 */ --c-ink-soft: #CBD0EC; /* secondary copy 12.5 · 10.6 · 8.0 */ --c-mute: var(--brand-mute); /* (!) 7.4 · 6.3 · 4.76 <- tightest */ --c-accent: var(--brand-accent); /* 10.3 · 8.7 · 6.6 */ /* Accent as a FILL with text on top. --c-on-accent is the only colour allowed on it: white on this lilac is 1.9:1 and illegible. Same for the two glow colours — they are lights, not surfaces, and nothing but decoration may sit on them. */ --c-on-accent: var(--brand-canvas); /* canvas on accent 10.3:1 */ --c-accent-dp: #A99AE8; /* pressed fill 7.7 · 6.5 · 4.94 */ --c-accent-halo: rgba(196, 181, 253, .16); /* soft ring behind a marker */ /* ═══════════════════════════════════════════════════ DERIVED · THE MESH Three orbs, blurred to 90px, drifting on a 20–30s loop behind everything. --orb-a / --orb-b are the peak alphas: the centre of an orb composites to roughly this much colour over the canvas. --mesh-veil is what makes the whole design pass WCAG. It is a flat scrim between the orbs and the content that caps how light the page can get. Without it the double-orb overlap reaches #2F4A71, where muted text falls to 3.5:1 and fails. Do not remove it to "make the glow pop" — raise the orb alphas instead and re-measure. */ --orb-a: rgba(168, 85, 247, .24); /* violet peak */ --orb-b: rgba( 45, 212, 191, .24); /* aqua peak */ --orb-c: rgba(129, 140, 248, .20); /* indigo, the quiet third orb */ --mesh-veil: rgba( 10, 14, 39, .35); /* The footer brightens toward the bottom of the page, per the brief. This is laid over the veil, so it is allowed to be generous. */ --mesh-foot: radial-gradient(120% 100% at 50% 118%, rgba(168, 85, 247, .30) 0%, rgba(129, 140, 248, .16) 42%, transparent 72%); /* ══════════════════════════════════════════════════ DERIVED · THE GLASS Every panel on the site is this material. Three layers, and all three matter: --glass-fill a white wash, which is what makes it read as glass --glass-scrim a navy scrim UNDER the text inside the panel. This is the fix the brief calls for: it decouples the text from whatever the mesh is doing behind the panel, so a headline is legible whether it is over dead navy or over the brightest point of the aurora. --glass-edge a hairline so the panel has a boundary at all Measured inside a scrimmed panel sitting on the worst-case mesh: ink 11.7:1 · accent 7.2:1 · mute 5.9:1 — all comfortably AA. */ --glass-fill: rgba(255, 255, 255, .06); --glass-fill-2:rgba(255, 255, 255, .09); /* raised / hover / active */ --glass-scrim: rgba( 10, 14, 39, .38); --glass-blur: blur(20px) saturate(1.4); --glass-blur-lg: blur(30px) saturate(1.5); /* hovered gallery frame */ /* Fallback for browsers with no backdrop-filter (older Firefox with the flag off, some embedded webviews). There is no blur separating the panel from the page, so the scrim has to do all the work on its own. */ --glass-scrim-solid: rgba(10, 14, 39, .72); /* The page background itself. Aliased rather than used directly so that main.css never has to name a --brand- value. */ --c-canvas-base: var(--brand-canvas); /* The mobile call bar is a translucent plate over the mesh, not a panel, so it gets its own value rather than reusing the glass fill. */ --c-callbar: rgba(10, 14, 39, .88); /* Decorative hairlines. 1.4:1 — deliberately faint, and NOT good enough for anything a user can operate. */ --c-line: rgba(255, 255, 255, .12); --c-line-soft: rgba(255, 255, 255, .07); /* Boundary of an INTERACTIVE control — form fields, the segmented toggle, orbit nodes. WCAG 1.4.11 wants 3:1 for the edge that tells you a control is a control, and --c-line manages 1.4:1. (!) 3.6:1 on a panel over flat navy, 3.4:1 on a panel over the brightest mesh. It has to clear 3:1 on both, which is why it is this heavy. */ --c-line-strong: rgba(255, 255, 255, .38); /* Focus ring. Accent measures 10.3:1 on navy, 6.6:1 on the worst mesh and 7.7:1 on glass, so one ring colour works everywhere on the site. The dark outer ring is what separates it from a light photograph. */ --c-focus: var(--brand-accent); --c-focus-out: rgba(10, 14, 39, .85); /* Status colours for the live open/closed pill, and the amber ribbon that marks invented placeholder content. All measured as text on a scrimmed glass panel sitting on the worst-case mesh — the hardest place any of them appears. */ --c-open: #4ADE80; /* 7.7:1 on panel */ --c-open-wash: rgba(74, 222, 128, .18); /* halo behind the live dot */ --c-closed: #FDA4AF; /* 7.1:1 on panel */ --c-warn: #FCD34D; /* 9.4:1 on panel */ --c-warn-wash: rgba(252, 211, 77, .12); /* ═══════════════════════════════════════════════════════════ EFFECTS */ /* Photo grade. Every photograph passes through .ph, which applies this filter and lays --photo-wash over it in soft-light. Twenty-six frames from a dozen different shoots come out sharing one cool cast, so they sit on the navy instead of on top of it. Hovering clears the wash. */ --photo-grade: saturate(1.1) contrast(1.05) hue-rotate(-6deg); --photo-wash: linear-gradient(155deg, rgba(168, 85, 247, .70) 0%, rgba( 99, 102, 241, .40) 45%, rgba( 45, 212, 191, .60) 100%); /* The brief specifies 25%. Soft-light is a gentle blend and 25% of it was not enough to pull the warm frames in the set (a mustard knit, a bare hand on fur, two skin-tone portraits) into the cold palette — they still read as warm photos pasted onto a cold design. 34% does it without tipping into "Instagram filter". Drop it back toward .25 if a client supplies photography that is already cool. */ --photo-wash-o: .34; /* Scrim for type sitting directly on a photograph (page headers, the CTA band). Two stops so the top of the image can stay visible. */ --scrim-photo: linear-gradient(180deg, rgba(10, 14, 39, .62) 0%, rgba(10, 14, 39, .80) 55%, rgba(10, 14, 39, .94) 100%); /* Scrim inside the orbit disc. Heaviest in the middle, because that is where the service name, description and price sit; it lightens toward the rim so the photograph is still legible as a photograph. */ --scrim-disc: radial-gradient(circle at 50% 50%, rgba(10, 14, 39, .82) 0%, rgba(10, 14, 39, .72) 55%, rgba(10, 14, 39, .40) 100%); /* Shadows are violet, not black. A neutral shadow on a navy page just looks like a smudge; a violet one reads as the panel glowing. */ --shadow-sm: 0 1px 2px rgba(4, 6, 20, .40); --shadow: 0 18px 40px -18px rgba(4, 6, 20, .70); --shadow-lg: 0 40px 90px -40px rgba(4, 6, 20, .85); --glow-soft: 0 0 40px rgba(168, 85, 247, .28); --glow-logo: drop-shadow(0 0 10px rgba(168, 85, 247, .70)) drop-shadow(0 1px 2px rgba(10, 14, 39, .60)); /* ══════════════════════════════════════════════════════════════ TYPE Both families load from Google Fonts in each page's . If you change these, update the tag on all 4 pages too. Sora is wide and soft-cornered, which is why it suits the glow — a tighter grotesk fights the blur. It is used at 300 for anything large and 600 for anything small and loud; the middle weights are skipped on purpose, so the type has the same two-level contrast the layout does. */ --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --fs-display: clamp(2.9rem, 7.4vw, 5.6rem); /* hero headline */ --fs-h1: clamp(2.2rem, 4.8vw, 3.6rem); --fs-h2: clamp(1.75rem, 3.2vw, 2.6rem); --fs-h3: clamp(1.1rem, 1.6vw, 1.35rem); --fs-lede: clamp(1.05rem, 1.25vw, 1.2rem); --fs-body: 1.0625rem; --fs-small: 0.9rem; --fs-fine: 0.82rem; --fs-label: 0.72rem; /* tracked-out eyebrows */ --fs-num: clamp(1.9rem, 3.4vw, 2.8rem); /* prices, orbit numerals */ --lh-display: 1.02; --lh-tight: 1.18; --lh-body: 1.68; --ls-display: -0.028em; /* Sora 300 at display size needs pulling in */ --ls-h: -0.015em; --ls-label: 0.22em; /* eyebrows track wide */ /* ════════════════════════════════════════════════════════════ LAYOUT */ --wrap: 1220px; --wrap-wide: 1440px; --wrap-narrow: 700px; --gutter: clamp(1.25rem, 4vw, 3rem); --section-y: clamp(4.5rem, 9vw, 8rem); /* The brief's shape rule: 20px on glass, 999px on pills, and no hard edges anywhere on the page. */ --r-sm: 12px; --r: 20px; --r-lg: 28px; --r-pill: 999px; --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur: .55s; --dur-fast: .24s; --head-h: 76px; --head-gap: 20px; /* the glass bar floats this far from the top */ /* The orbit selector. --orbit-r is the radius the six service nodes sit on; main.css shrinks it in step with the disc at each breakpoint. */ --orbit-r: 236px; --orbit-disc: 300px; } @media (max-width: 1100px) { :root { --orbit-r: 200px; --orbit-disc: 264px; } } @media (max-width: 900px) { :root { --head-h: 64px; --head-gap: 12px; } } /* Respect users who ask for less motion. main.css additionally switches off the orb drift, the pointer parallax, the reveal animation, the review carousel's auto-advance and every transform transition. */ @media (prefers-reduced-motion: reduce) { :root { --dur: .001s; --dur-fast: .001s; } }