/* Lumé Hair & Beauty — Design tokens (--cvg-*) per DESIGN-TOKENS.md */ :root { --cvg-color-primary: #e0a9a0; /* blush — 7.29:1 on charcoal, safe as text/UI at any size */ --cvg-color-secondary: #c9a24b; /* soft gold — 6.16:1 on charcoal, safe as text/UI at any size */ --cvg-color-bg: #2b2726; /* charcoal — DOMINANT background site-wide, contrast-checked */ --cvg-color-text: #f5f0ec; /* warm off-white */ --cvg-color-surface: #3a3432; /* lifted charcoal for cards/panels, still dark-dominant */ --cvg-color-border: #f5f0ec24; /* hairline border on charcoal */ /* No -ink variants needed for this palette (unlike Corner & Bloom / Brightwell Dental) — blush and gold both clear 4.5:1 on charcoal at any text size. The one condition: charcoal must stay the dominant background throughout. Never reuse blush/gold as text on a light background without rechecking — see DESIGN-TOKENS.md. */ --cvg-font-display: "Playfair Display", ui-serif, Georgia, serif; --cvg-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --cvg-font-data: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; --cvg-space-1: 4px; --cvg-space-2: 8px; --cvg-space-3: 16px; --cvg-space-4: 24px; --cvg-space-5: 40px; --cvg-space-6: 64px; --cvg-space-7: 96px; --cvg-radius: 14px; --cvg-max: 1160px; --cvg-header-h: 84px; } @font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-variable.woff2") format("woff2-variations"), url("../fonts/playfair-variable.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-variable.woff2") format("woff2-variations"), url("../fonts/inter-variable.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/jbmono-variable.woff2") format("woff2-variations"), url("../fonts/jbmono-variable.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; } /* Preload hint targets — see in per page. NOTE: no real woff2 files are placed under assets/fonts/ yet — same caveat as CLAUDE.md's standing brand-fonts note; @font-face is wired correctly and falls back to the system stacks above until real font files are sourced. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--cvg-color-bg); color: var(--cvg-color-text); font-family: var(--cvg-font-body); font-size: 1rem; line-height: 1.6; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3 { font-family: var(--cvg-font-display); line-height: 1.15; margin: 0 0 var(--cvg-space-3); font-weight: 600; } h1 { font-size: clamp(2.2rem, 4vw + 1rem, 3.6rem); font-weight: 700; } h2 { font-size: clamp(1.6rem, 2.4vw + 1rem, 2.3rem); } h3 { font-size: 1.2rem; } p { margin: 0 0 var(--cvg-space-3); } .cvg-wrap { max-width: var(--cvg-max); margin-inline: auto; padding-inline: var(--cvg-space-4); } .cvg-data { font-family: var(--cvg-font-data); font-variant-numeric: tabular-nums; } .cvg-section-pad { padding-block: var(--cvg-space-7); } /* Visible focus states — accessibility, non-negotiable */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--cvg-color-secondary); outline-offset: 2px; } .cvg-skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--cvg-color-secondary); color: var(--cvg-color-bg); padding: var(--cvg-space-2) var(--cvg-space-3); border-radius: 0 0 8px 0; font-weight: 700; } .cvg-skip-link:focus { left: 0; } .cvg-btn { display: inline-flex; align-items: center; gap: var(--cvg-space-2); font-family: var(--cvg-font-body); font-weight: 600; font-size: 0.95rem; padding: 12px 24px; border-radius: 999px; border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: transform 200ms ease-out, background 200ms ease-out; min-height: 44px; } .cvg-btn:hover { transform: translateY(-2px); } .cvg-btn--primary { background: var(--cvg-color-primary); color: var(--cvg-color-bg); } .cvg-btn--primary:hover { background: #eabdb5; } .cvg-btn--ghost { background: transparent; border-color: var(--cvg-color-text); color: var(--cvg-color-text); } .cvg-btn--ghost:hover { border-color: var(--cvg-color-secondary); color: var(--cvg-color-secondary); } .cvg-btn--on-photo { background: var(--cvg-color-primary); color: var(--cvg-color-bg); } .cvg-btn--on-photo:hover { background: #eabdb5; } /* ---------- header: transparent-overlay ---------- */ /* Deviation: header.md warns against a transparent header over a flat (non-photo) background. Only Home (which has the full-bleed hero) gets the true transparent -> solid scroll behaviour; the other three pages render the header in its solid end-state from first paint via the same .cvg-header--solid class, applied statically. Both states share one off-white text colour because charcoal is the dominant background everywhere (hero scrim included), so no separate light/ dark logo pair is needed — a deliberate simplification over header.md's literal two-file spec. */ .cvg-header { position: sticky; top: 0; z-index: 30; background: var(--cvg-color-bg); border-bottom: 1px solid var(--cvg-color-border); transition: background-color 200ms ease-out, box-shadow 200ms ease-out; } .cvg-header--overlay { position: fixed; left: 0; right: 0; top: 0; background: transparent; border-bottom-color: transparent; } .cvg-header--overlay.cvg-header--solid { background: var(--cvg-color-bg); border-bottom-color: var(--cvg-color-border); box-shadow: 0 1px 0 var(--cvg-color-border); } .cvg-header__row { display: flex; align-items: center; justify-content: space-between; padding-block: 18px; min-height: var(--cvg-header-h); } .cvg-hero-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; } .cvg-wordmark { display: flex; flex-direction: column; text-decoration: none; color: var(--cvg-color-text); line-height: 1; } .cvg-wordmark__main { font-family: var(--cvg-font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.01em; } .cvg-wordmark__main span { color: var(--cvg-color-secondary); } .cvg-wordmark__sub { font-family: var(--cvg-font-data); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; margin-top: 4px; } .cvg-nav { display: flex; align-items: center; gap: var(--cvg-space-5); list-style: none; margin: 0; padding: 0; } .cvg-nav a { text-decoration: none; font-weight: 500; position: relative; padding-block: 4px; } .cvg-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--cvg-color-secondary); transform: scaleX(0); transform-origin: left; transition: transform 150ms ease-out; } .cvg-nav a:hover::after, .cvg-nav a[aria-current="page"]::after { transform: scaleX(1); } .cvg-nav a[aria-current="page"] { color: var(--cvg-color-secondary); font-weight: 700; } .cvg-nav__cta { background: var(--cvg-color-primary); color: var(--cvg-color-bg) !important; padding: 9px 20px; border-radius: 999px; font-weight: 700; } .cvg-nav__cta::after { display: none; } .cvg-nav__cta:hover { background: #eabdb5; } .cvg-nav-toggle { display: none; } @media (max-width: 760px) { .cvg-header--overlay { position: sticky; background: var(--cvg-color-bg); border-bottom-color: var(--cvg-color-border); } .cvg-nav { position: fixed; inset: 0 0 0 26%; background: var(--cvg-color-surface); flex-direction: column; align-items: flex-start; padding: var(--cvg-space-6) var(--cvg-space-4); gap: var(--cvg-space-4); transform: translateX(100%); transition: transform 240ms ease-out; box-shadow: -8px 0 24px #0004; } .cvg-nav.cvg-is-open { transform: none; } .cvg-nav-toggle { display: block; background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--cvg-color-text); padding: 4px 8px; } } /* ---------- hero: full-bleed-cinematic ---------- */ .cvg-hero { position: relative; min-height: min(88vh, 760px); display: flex; align-items: flex-end; color: var(--cvg-color-text); overflow: hidden; } .cvg-hero picture, .cvg-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .cvg-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #2b2726cc 0%, #2b272600 30%), linear-gradient(100deg, #2b2726eb 0%, #2b2726bf 32%, #2b272626 62%, transparent 85%); } .cvg-hero__content { position: relative; z-index: 2; max-width: 620px; padding: var(--cvg-space-7) var(--cvg-space-4) var(--cvg-space-6); } .cvg-hero h1 { color: var(--cvg-color-text); } .cvg-hero__sub { font-size: 1.15rem; max-width: 46ch; } .cvg-hero__ctas { display: flex; gap: var(--cvg-space-3); flex-wrap: wrap; margin-top: var(--cvg-space-4); } /* ---------- 3-col-icon (services grid) ---------- */ .cvg-icon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .cvg-icon-card { border: 1.5px solid var(--cvg-color-border); border-radius: 16px; padding: var(--cvg-space-4); background: var(--cvg-color-surface); transition: transform 200ms ease-out, border-color 200ms ease-out; } .cvg-icon-card:hover { transform: translateY(-2px); border-color: var(--cvg-color-secondary); } .cvg-icon-card__icon { display: block; width: 36px; height: 36px; margin-bottom: var(--cvg-space-3); color: var(--cvg-color-secondary); } .cvg-icon-card__icon svg { width: 100%; height: 100%; } .cvg-icon-card h3 { margin-bottom: 8px; } .cvg-icon-card p { font-size: 0.94rem; opacity: 0.9; margin-bottom: 0; } .cvg-icon-card .cvg-data { color: var(--cvg-color-primary); opacity: 1; } /* ---------- card-stack (our team) ---------- */ .cvg-stack { padding-block: var(--cvg-space-7); } .cvg-stack__head { max-width: 60ch; margin-bottom: var(--cvg-space-5); } .cvg-stack__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cvg-space-4); } .cvg-stack__card { text-decoration: none; color: inherit; display: block; border-radius: var(--cvg-radius); overflow: hidden; background: var(--cvg-color-surface); border: 1px solid var(--cvg-color-border); } .cvg-stack__img-box { aspect-ratio: 4 / 3; overflow: hidden; } .cvg-stack__img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 200ms ease-out; } .cvg-stack__card:hover .cvg-stack__img-box img { transform: scale(1.03); } .cvg-stack__body { padding: var(--cvg-space-4); } .cvg-stack__body h3 { margin-bottom: 4px; } .cvg-stack__role { font-family: var(--cvg-font-data); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cvg-color-secondary); margin-bottom: 8px; display: block; } .cvg-stack__body p { font-size: 0.92rem; margin-bottom: var(--cvg-space-2); opacity: 0.92; } .cvg-stack__link { font-weight: 700; font-size: 0.85rem; color: var(--cvg-color-primary); } @media (max-width: 900px) { .cvg-stack__grid { grid-template-columns: 1fr; } } @media (min-width: 601px) and (max-width: 900px) { .cvg-stack__grid { grid-template-columns: repeat(2, 1fr); } } /* ---------- CTA band ---------- */ .cvg-cta-band { background: var(--cvg-color-surface); border-top: 1px solid var(--cvg-color-border); border-bottom: 1px solid var(--cvg-color-border); } .cvg-cta-band__inner { padding-block: var(--cvg-space-7); text-align: center; max-width: 640px; margin-inline: auto; } .cvg-cta-band p { max-width: 52ch; margin-inline: auto; opacity: 0.92; } .cvg-cta-band .cvg-btn { margin-top: var(--cvg-space-3); } /* ---------- step list (Book Now: what happens next) ---------- */ .cvg-step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cvg-space-4); } .cvg-step-list li { display: flex; gap: var(--cvg-space-3); align-items: flex-start; } .cvg-step-list__num { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--cvg-color-secondary); color: var(--cvg-color-secondary); font-family: var(--cvg-font-data); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; } .cvg-step-list p { margin: 0; opacity: 0.92; } /* ---------- good-to-know list (Services) ---------- */ .cvg-note-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cvg-space-3); max-width: 62ch; } .cvg-note-list li { padding-left: var(--cvg-space-4); position: relative; opacity: 0.92; } .cvg-note-list li::before { content: "—"; position: absolute; left: 0; color: var(--cvg-color-secondary); } /* ---------- contact-heavy (footer + Book Now) ---------- */ .cvg-contact-heavy { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cvg-space-5); align-items: start; } .cvg-contact-heavy__map { aspect-ratio: 4 / 3; border-radius: var(--cvg-radius); background: var(--cvg-color-surface); display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--cvg-space-4); border: 2px dashed var(--cvg-color-secondary); font-size: 0.9rem; overflow: hidden; } .cvg-contact-heavy__map em { opacity: 0.85; } .cvg-hours-table { width: 100%; border-collapse: collapse; font-family: var(--cvg-font-data); font-size: 0.92rem; margin-block: var(--cvg-space-3); } .cvg-hours-table td { padding: 6px 0; border-bottom: 1px solid var(--cvg-color-border); } .cvg-hours-table td:last-child { text-align: right; } .cvg-hours-table tr[data-today] td { font-weight: 700; background: #e0a9a026; } .cvg-nap p { margin: 0 0 4px; } @media (max-width: 760px) { .cvg-contact-heavy { grid-template-columns: 1fr; } .cvg-contact-heavy__details { order: 0; } .cvg-contact-heavy__map { order: 1; } } .cvg-footer { background: #211d1c; color: var(--cvg-color-text); padding-block: var(--cvg-space-6) var(--cvg-space-4); } .cvg-footer a { color: var(--cvg-color-text); } .cvg-footer__legal { margin-top: var(--cvg-space-6); padding-top: var(--cvg-space-4); border-top: 1px solid var(--cvg-color-border); display: flex; justify-content: space-between; gap: var(--cvg-space-3); flex-wrap: wrap; font-size: 0.85rem; } .cvg-footer__badge { opacity: 0.85; } .cvg-footer__badge a { text-decoration: underline; } /* ---------- contact form ---------- */ .cvg-form { display: grid; gap: var(--cvg-space-3); max-width: 520px; } .cvg-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cvg-space-3); } .cvg-form label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; } .cvg-form input, .cvg-form textarea, .cvg-form select { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1.5px solid var(--cvg-color-border); font-family: var(--cvg-font-body); font-size: 1rem; background: var(--cvg-color-surface); color: var(--cvg-color-text); } .cvg-form__note { font-size: 0.85rem; opacity: 0.75; } @media (max-width: 600px) { .cvg-form__row { grid-template-columns: 1fr; } } /* ---------- scroll reveal — cvg canonical (animation-style skill) ---------- */ .js .cvg-reveal-target { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease-out, transform 600ms ease-out; transition-delay: calc(var(--i, 0) * 80ms); will-change: opacity, transform; } .js .cvg-reveal-target.cvg-is-visible { opacity: 1; transform: none; will-change: auto; } @media (prefers-reduced-motion: reduce) { .js .cvg-reveal-target, .js .cvg-reveal-target.cvg-is-visible { opacity: 1; transform: none; transition: none; transition-delay: 0ms; will-change: auto; } .cvg-header, .cvg-header--overlay, .cvg-header--overlay.cvg-header--solid { transition: none; } }