/* ========================================================================== Huici's Premium Detailing - "Miami Luxury Noir" design system Shared stylesheet for all 5 pages. Dependency-free. Fonts are self-hosted; load ../fonts/fonts.css BEFORE this file in . Palette derived from the real black + champagne-gold logo. All gold-on-black text combinations tested >= 4.5:1 (WCAG AA). ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS -------------------------------------------------------------------------- */ :root { /* Surfaces (dark, engraved) */ --ink: #0A0A0B; /* page background */ --coal: #131315; /* panel / alternating section */ --graphite: #1C1C1F; /* cards */ --graphite-2: #232327; /* raised card / hover */ /* Gold family */ --gold: #C9A96A; /* champagne gold, primary accent (8.8:1 on ink) */ --gold-bright: #E3C98F; /* bright gold, hovers + emphasis */ --gold-hi: #F0E2C0; /* highlight gold */ --gold-deep: #A98A4E; /* pressed / borders on gold fills */ /* Text */ --ivory: #F4F0E6; /* primary text (~18:1 on ink) */ --muted: #A6A094; /* secondary text (~7.6:1 on ink) */ --muted-dim: #77726A; /* tertiary / captions on dark */ /* Lines & scrims */ --hairline: rgba(201, 169, 106, 0.22); /* gold hairline */ --hairline-soft: rgba(201, 169, 106, 0.12); --edge: rgba(244, 240, 230, 0.08); /* neutral card border */ --scrim: rgba(10, 10, 11, 0.62); /* over photos */ --scrim-strong: rgba(10, 10, 11, 0.78); /* Typography */ --font-display: 'Sentient', Georgia, 'Times New Roman', serif; --font-body: 'Synonym', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* Fluid type scale (clamp: min / preferred / max) */ --fs-eyebrow: 0.78rem; --fs-small: 0.875rem; --fs-body: 1.0625rem; --fs-lead: clamp(1.15rem, 0.9rem + 1.1vw, 1.5rem); --fs-h4: clamp(1.15rem, 1rem + 0.7vw, 1.4rem); --fs-h3: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); --fs-h2: clamp(2rem, 1.5rem + 2.4vw, 3rem); --fs-h1: clamp(2.6rem, 1.8rem + 3.8vw, 4.5rem); --fs-display: clamp(3rem, 2rem + 5vw, 6rem); --lh-tight: 1.08; --lh-snug: 1.28; --lh-body: 1.65; --ls-eyebrow: 0.22em; /* letterspaced uppercase labels */ --ls-label: 0.14em; --ls-wide: 0.04em; /* Layout */ --maxw: 1200px; --maxw-narrow: 820px; --gutter: clamp(1.25rem, 5vw, 3rem); --section-y: clamp(4rem, 8vw, 7.5rem); --radius: 4px; /* engraved plate, not pill */ --radius-lg: 8px; /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 0.4s; --dur-fast: 0.2s; /* Elevation */ --shadow-card: 0 1px 0 rgba(255,255,255,0.02), 0 18px 40px -24px rgba(0,0,0,0.9); --shadow-pop: 0 30px 80px -30px rgba(0,0,0,0.95); --header-h: 74px; } /* -------------------------------------------------------------------------- 2. RESET -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } html { scroll-padding-top: calc(var(--header-h) + 1rem); } body { background: var(--ink); color: var(--ivory); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; /* guard against accidental horizontal scroll */ } img, picture, svg, video { display: block; max-width: 100%; height: auto; } img { border-style: none; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } a { color: var(--gold); text-decoration: none; transition: color var(--dur-fast) var(--ease); } a:hover { color: var(--gold-bright); } ul, ol { list-style: none; padding: 0; } h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: var(--lh-tight); } hr { border: 0; height: 1px; background: var(--hairline); } ::selection { background: var(--gold); color: var(--ink); } /* -------------------------------------------------------------------------- 3. TYPOGRAPHY UTILITIES -------------------------------------------------------------------------- */ .display { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.01em; } .h1, h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.01em; } .h2, h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: -0.005em; } .h3, h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-snug); } .h4, h4 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h4); line-height: var(--lh-snug); } .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ivory); font-weight: 400; } .eyebrow { display: inline-block; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--gold); margin: 0 0 1.1rem; } .label { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--muted); } .muted { color: var(--muted); } .gold { color: var(--gold); } .italic-serif { font-family: var(--font-display); font-style: italic; font-weight: 400; } p { max-width: 68ch; } p + p { margin-top: 1.1rem; } /* accent underline under a heading */ .underline-accent { position: relative; } .underline-accent::after { content: ""; display: block; width: 3.25rem; height: 2px; margin-top: 1.1rem; background: var(--gold); } .text-center .underline-accent::after, .underline-accent.center::after { margin-left: auto; margin-right: auto; } /* -------------------------------------------------------------------------- 4. LAYOUT PRIMITIVES -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .container.narrow { max-width: var(--maxw-narrow); } .section { padding-block: var(--section-y); } .section.tight { padding-block: clamp(2.5rem, 5vw, 4rem); } .section.coal { background: var(--coal); } .text-center { text-align: center; } .mx-auto { margin-inline: auto; } .section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); } .section-head.center { margin-inline: auto; text-align: center; } .stack > * + * { margin-top: 1rem; } .stack-lg > * + * { margin-top: 1.75rem; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--gold); color: var(--ink); padding: 0.75rem 1.25rem; border-radius: var(--radius); z-index: 200; font-weight: 600; } .skip-link:focus { left: 1rem; top: 1rem; color: var(--ink); } /* -------------------------------------------------------------------------- 5. HAIRLINE-DIAMOND DIVIDER Usage: -------------------------------------------------------------------------- */ .divider { display: flex; align-items: center; justify-content: center; gap: 1rem; width: 100%; max-width: 460px; margin-inline: auto; color: var(--gold); } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--hairline) 40%, var(--hairline)); } .divider::after { background: linear-gradient(90deg, var(--hairline), var(--hairline) 60%, transparent); } .divider .diamond { width: 7px; height: 7px; flex: 0 0 auto; background: var(--gold); transform: rotate(45deg); } .divider.wide { max-width: 100%; } .divider.tight { max-width: 220px; } /* -------------------------------------------------------------------------- 6. BUTTONS -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: 1; padding: 1rem 1.6rem; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--gold); color: var(--ink); border-color: var(--gold); } .btn-primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--ink); box-shadow: 0 10px 30px -12px rgba(201,169,106,0.55); } .btn-secondary { background: transparent; color: var(--gold); border-color: var(--hairline); } .btn-secondary:hover { color: var(--gold-bright); border-color: var(--gold); background: rgba(201,169,106,0.06); } /* ghost on photo (light border, ivory text) */ .btn-ghost { background: rgba(10,10,11,0.35); color: var(--ivory); border-color: rgba(244,240,230,0.35); backdrop-filter: blur(2px); } .btn-ghost:hover { border-color: var(--ivory); background: rgba(10,10,11,0.5); } .btn-lg { padding: 1.15rem 2rem; font-size: 0.95rem; } .btn-block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; } .btn-row.center { justify-content: center; } /* small gold arrow used in text links */ .link-arrow { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; font-size: var(--fs-small); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--gold); } .link-arrow .arrow { transition: transform var(--dur-fast) var(--ease); } .link-arrow:hover .arrow { transform: translateX(4px); } /* -------------------------------------------------------------------------- 7. FOCUS-VISIBLE (accessibility) -------------------------------------------------------------------------- */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 2px; } .btn:focus-visible { outline-offset: 3px; } /* -------------------------------------------------------------------------- 8. SITE HEADER (sticky) + NAV -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(10,10,11,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline-soft); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .site-header.is-scrolled { background: rgba(10,10,11,0.94); border-bottom-color: var(--hairline); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--header-h); max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--ivory); } .brand:hover { color: var(--ivory); } .brand__mark { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; border: 1px solid var(--hairline); } .brand__name { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; } /* desktop nav */ .nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.1rem); } .nav__link { position: relative; font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--ivory); padding: 0.4rem 0; } .nav__link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px; background: var(--gold); transition: width var(--dur-fast) var(--ease); } .nav__link:hover { color: var(--gold-bright); } .nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; } .nav__link[aria-current="page"] { color: var(--gold); } .nav__cta { margin-left: 0.4rem; } /* hamburger */ .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius); border: 1px solid var(--hairline); color: var(--ivory); } .nav-toggle__bars { position: relative; width: 22px; height: 2px; background: var(--ivory); transition: background var(--dur-fast) var(--ease); } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--ivory); transition: transform var(--dur-fast) var(--ease), top var(--dur-fast) var(--ease); } .nav-toggle__bars::before { top: -7px; } .nav-toggle__bars::after { top: 7px; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); } /* mobile drawer */ .mobile-nav { position: fixed; inset: var(--header-h) 0 0 0; z-index: 99; background: rgba(10,10,11,0.98); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; padding: clamp(1.5rem, 6vw, 3rem) var(--gutter) 2rem; gap: 0.25rem; transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur); overflow-y: auto; } .mobile-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s; } .mobile-nav__link { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; color: var(--ivory); padding: 0.85rem 0; border-bottom: 1px solid var(--hairline-soft); } .mobile-nav__link[aria-current="page"] { color: var(--gold); } .mobile-nav__cta { margin-top: 1.75rem; } .mobile-nav__meta { margin-top: auto; padding-top: 2rem; color: var(--muted); font-size: var(--fs-small); } .mobile-nav__meta a { display: block; margin-top: 0.35rem; } body.nav-open { overflow: hidden; } /* -------------------------------------------------------------------------- 9. HERO BAND (full-bleed photo + scrim) -------------------------------------------------------------------------- */ .hero { position: relative; display: flex; align-items: center; min-height: clamp(560px, 84vh, 860px); padding-block: clamp(5rem, 12vh, 9rem); overflow: hidden; isolation: isolate; } .hero.compact { min-height: clamp(420px, 60vh, 620px); } .hero__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--scrim-strong) 0%, var(--scrim) 45%, rgba(10,10,11,0.25) 100%), linear-gradient(0deg, rgba(10,10,11,0.85) 0%, rgba(10,10,11,0.15) 55%, rgba(10,10,11,0.4) 100%); } .hero__scrim.center { background: radial-gradient(120% 120% at 50% 45%, rgba(10,10,11,0.25) 0%, var(--scrim) 60%, var(--scrim-strong) 100%), linear-gradient(0deg, rgba(10,10,11,0.85), rgba(10,10,11,0.35)); } .hero__content { max-width: 42rem; position: relative; z-index: 1; } .hero.center .hero__content { max-width: 48rem; margin-inline: auto; text-align: center; } .hero__content .btn-row { margin-top: clamp(1.75rem, 3vw, 2.5rem); } .hero .lead { color: var(--ivory); margin-top: 1.25rem; max-width: 38ch; } .hero.center .lead { margin-inline: auto; } /* scroll cue */ .hero__cue { position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 0.75rem; letter-spacing: var(--ls-label); text-transform: uppercase; z-index: 1; } /* -------------------------------------------------------------------------- 10. TRUST STRIP -------------------------------------------------------------------------- */ .trust-strip { border-top: 1px solid var(--hairline-soft); border-bottom: 1px solid var(--hairline-soft); background: var(--coal); } .trust-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem clamp(1.5rem, 4vw, 3rem); max-width: var(--maxw); margin-inline: auto; padding: 1.25rem var(--gutter); } .trust-item { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--fs-small); letter-spacing: var(--ls-wide); color: var(--muted); white-space: nowrap; } .trust-item strong { color: var(--ivory); font-weight: 600; } .trust-item .dot { color: var(--gold); } /* small gold separator/marker glyph, NOT a star */ .trust-sep { color: var(--hairline); } /* -------------------------------------------------------------------------- 11. SERVICE CARDS (photo or icon) -------------------------------------------------------------------------- */ .service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.5rem); } .service-card { position: relative; display: flex; flex-direction: column; background: var(--graphite); border: 1px solid var(--edge); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); color: var(--ivory); } a.service-card:hover { transform: translateY(-4px); border-color: var(--hairline); box-shadow: var(--shadow-card); color: var(--ivory); } .service-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--coal); } .service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } a.service-card:hover .service-card__media img { transform: scale(1.05); } /* icon tile fallback (e.g. interior detail, no photo) */ .service-card__icon { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: radial-gradient(120% 120% at 50% 0%, rgba(201,169,106,0.10), transparent 60%), var(--graphite-2); color: var(--gold); border-bottom: 1px solid var(--hairline-soft); } .service-card__icon svg { width: 44%; max-width: 120px; height: auto; } .service-card__body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .service-card__title { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; } .service-card__text { color: var(--muted); font-size: var(--fs-small); line-height: 1.55; } .service-card__more { margin-top: auto; padding-top: 0.75rem; color: var(--gold); font-size: var(--fs-small); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; } /* -------------------------------------------------------------------------- 12. PACKAGE TIER CARDS -------------------------------------------------------------------------- */ .package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; } .package-card { display: flex; flex-direction: column; background: var(--graphite); border: 1px solid var(--edge); border-radius: var(--radius-lg); padding: clamp(1.5rem, 2.5vw, 2rem); position: relative; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .package-card:hover { transform: translateY(-4px); border-color: var(--hairline); } .package-card.featured { border-color: var(--gold); background: linear-gradient(180deg, rgba(201,169,106,0.06), transparent 40%), var(--graphite); box-shadow: var(--shadow-card); } .package-card__flag { position: absolute; top: -1px; right: 1.25rem; transform: translateY(-50%); background: var(--gold); color: var(--ink); font-size: 0.68rem; font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; padding: 0.35rem 0.7rem; border-radius: 2px; } .package-card__name { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; } .package-card__ideal { color: var(--gold); font-size: var(--fs-small); letter-spacing: var(--ls-wide); margin-top: 0.4rem; } .package-card__list { margin-top: 1.35rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; } .package-card__list li { position: relative; padding-left: 1.6rem; color: var(--ivory); font-size: var(--fs-small); line-height: 1.5; } .package-card__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); /* diamond bullet, echoes logo flourish */ } .package-card__foot { margin-top: 1.75rem; } .package-card .price-note { color: var(--muted-dim); font-size: 0.8rem; margin-top: 0.85rem; text-align: center; } /* -------------------------------------------------------------------------- 13. PULL-QUOTE REVIEWS (no stars, ever) -------------------------------------------------------------------------- */ .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); } .quote { display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(1.75rem, 2.5vw, 2.25rem); background: var(--coal); border: 1px solid var(--edge); border-radius: var(--radius-lg); border-top: 2px solid var(--hairline); } .quote__mark { font-family: var(--font-display); font-size: 3rem; line-height: 0.5; color: var(--gold); height: 1.25rem; } .quote__text { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.35rem); line-height: 1.5; color: var(--ivory); } .quote__cite { margin-top: auto; font-style: normal; color: var(--muted); font-size: var(--fs-small); letter-spacing: var(--ls-wide); } .quote__cite strong { color: var(--gold); font-weight: 600; } .reviews-source { text-align: center; color: var(--muted); font-size: var(--fs-small); letter-spacing: var(--ls-wide); margin-top: 2rem; } .reviews-source strong { color: var(--ivory); font-weight: 600; } /* -------------------------------------------------------------------------- 14. AREA CHIPS -------------------------------------------------------------------------- */ .chip-row { display: flex; flex-wrap: wrap; gap: 0.6rem; } .chip-row.center { justify-content: center; } .chip { display: inline-flex; align-items: center; padding: 0.55rem 1.05rem; border: 1px solid var(--hairline); border-radius: 100px; /* chips are the one pill exception: soft area tags */ color: var(--ivory); font-size: var(--fs-small); letter-spacing: var(--ls-wide); background: rgba(201,169,106,0.03); } .chip.plain { color: var(--muted); border-color: var(--hairline-soft); background: transparent; } /* -------------------------------------------------------------------------- 15. BEFORE / AFTER SLIDER -------------------------------------------------------------------------- */ .ba-slider { position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--hairline); background: var(--coal); touch-action: none; /* let JS own horizontal drag */ user-select: none; -webkit-user-select: none; } .ba-slider__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ba-slider__after { z-index: 1; } /* the "before" layer is clipped from the left by --pos */ .ba-slider__before-wrap { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: hidden; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); } .ba-slider__before-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ba-slider__label { position: absolute; top: 1rem; z-index: 4; font-size: 0.72rem; font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ivory); background: rgba(10,10,11,0.6); border: 1px solid var(--hairline-soft); padding: 0.35rem 0.7rem; border-radius: 2px; backdrop-filter: blur(2px); } .ba-slider__label--before { left: 1rem; } .ba-slider__label--after { right: 1rem; } .ba-slider__handle { position: absolute; top: 0; bottom: 0; z-index: 5; left: var(--pos, 50%); width: 2px; background: var(--gold); transform: translateX(-1px); cursor: ew-resize; } .ba-slider__grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: var(--ink); border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; gap: 3px; box-shadow: 0 6px 20px -6px rgba(0,0,0,0.8); cursor: ew-resize; } .ba-slider__grip::before, .ba-slider__grip::after { content: ""; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .ba-slider__grip::before { border-right: 6px solid var(--gold); } .ba-slider__grip::after { border-left: 6px solid var(--gold); } .ba-slider__range { /* visually-hidden native input drives keyboard a11y */ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 6; } .ba-slider__range:focus-visible + .ba-slider__handle .ba-slider__grip { outline: 2px solid var(--gold-bright); outline-offset: 3px; } /* split (static, non-interactive) before/after teaser */ .ba-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--hairline); } .ba-split figure { position: relative; margin: 0; aspect-ratio: 4 / 3; } .ba-split img { width: 100%; height: 100%; object-fit: cover; } .ba-split figcaption { position: absolute; bottom: 0.85rem; left: 0.85rem; font-size: 0.72rem; font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ivory); background: rgba(10,10,11,0.6); padding: 0.3rem 0.65rem; border-radius: 2px; } /* -------------------------------------------------------------------------- 16. GALLERY GRID + FILTER CHIPS + LIGHTBOX -------------------------------------------------------------------------- */ .filter-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: clamp(2rem, 4vw, 3rem); } .filter-chip { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--muted); padding: 0.6rem 1.15rem; border: 1px solid var(--hairline-soft); border-radius: 100px; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .filter-chip:hover { color: var(--ivory); border-color: var(--hairline); } .filter-chip[aria-pressed="true"] { color: var(--ink); background: var(--gold); border-color: var(--gold); } .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.75rem, 1.5vw, 1.15rem); } .gallery-item { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--coal); border: 1px solid var(--edge); cursor: zoom-in; aspect-ratio: 4 / 3; } .gallery-item.tall { grid-row: span 2; aspect-ratio: 4 / 5; } .gallery-item.wide { grid-column: span 2; aspect-ratio: 16 / 9; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .gallery-item:hover img { transform: scale(1.05); } .gallery-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 1rem 0.9rem; font-size: 0.72rem; font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ivory); background: linear-gradient(0deg, rgba(10,10,11,0.8), transparent); opacity: 0; transform: translateY(6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .gallery-item:hover figcaption, .gallery-item:focus-within figcaption { opacity: 1; transform: translateY(0); } .gallery-item.is-hidden { display: none; } /* before/after duo cell inside gallery */ .gallery-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .gallery-duo .gallery-item { border-radius: 0; aspect-ratio: 4 / 5; cursor: zoom-in; } /* lightbox overlay */ .lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(6,6,7,0.92); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur); } .lightbox.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease); } .lightbox__img { max-width: min(1100px, 100%); max-height: 82vh; width: auto; border-radius: var(--radius); border: 1px solid var(--hairline); box-shadow: var(--shadow-pop); } .lightbox__cap { margin-top: 1rem; color: var(--muted); font-size: var(--fs-small); letter-spacing: var(--ls-wide); text-align: center; } .lightbox__close { position: absolute; top: 1.25rem; right: 1.25rem; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--hairline); border-radius: 50%; color: var(--ivory); font-size: 1.5rem; line-height: 1; } .lightbox__close:hover { border-color: var(--gold); color: var(--gold); } .lightbox__figure { display: flex; flex-direction: column; align-items: center; max-width: 100%; } /* -------------------------------------------------------------------------- 17. FAQ ACCORDION -------------------------------------------------------------------------- */ .faq { max-width: var(--maxw-narrow); margin-inline: auto; } .faq-item { border-bottom: 1px solid var(--hairline-soft); } .faq-item:first-child { border-top: 1px solid var(--hairline-soft); } .faq-item__trigger { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; text-align: left; padding: 1.4rem 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); color: var(--ivory); transition: color var(--dur-fast) var(--ease); } .faq-item__trigger:hover { color: var(--gold); } .faq-item__icon { position: relative; flex: 0 0 auto; width: 16px; height: 16px; } .faq-item__icon::before, .faq-item__icon::after { content: ""; position: absolute; background: var(--gold); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); } .faq-item__icon::before { top: 7px; left: 0; width: 16px; height: 2px; } .faq-item__icon::after { top: 0; left: 7px; width: 2px; height: 16px; } .faq-item__trigger[aria-expanded="true"] .faq-item__icon::after { transform: scaleY(0); opacity: 0; } .faq-item__panel { overflow: hidden; max-height: 0; transition: max-height var(--dur) var(--ease); } .faq-item__panel-inner { padding: 0 0 1.5rem; color: var(--muted); line-height: var(--lh-body); } .faq-item__panel-inner p { max-width: 66ch; } /* -------------------------------------------------------------------------- 18. HOW-IT-WORKS STEPS -------------------------------------------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); counter-reset: step; } .step { position: relative; padding-top: 3.75rem; } .step__num { position: absolute; top: 0; left: 0; font-family: var(--font-display); font-weight: 300; font-size: 2.75rem; color: var(--gold); line-height: 1; } .step__num::before { counter-increment: step; content: "0" counter(step); } .step__title { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; margin-bottom: 0.5rem; } .step__text { color: var(--muted); font-size: var(--fs-small); line-height: 1.55; } .step:not(:last-child) .step__num::after { content: ""; position: absolute; top: 1.35rem; left: 3.5rem; width: 3rem; height: 1px; background: var(--hairline); } /* -------------------------------------------------------------------------- 19. STORY / SPLIT MEDIA BAND -------------------------------------------------------------------------- */ .media-band { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(1.5rem, 5vw, 4.5rem); } .media-band.reverse .media-band__media { order: 2; } .media-band__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--edge); aspect-ratio: 4 / 3; } .media-band__media img { width: 100%; height: 100%; object-fit: cover; } .media-band__body { max-width: 46ch; } /* education / fact cards */ .fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); } .fact-card { background: var(--coal); border: 1px solid var(--edge); border-left: 2px solid var(--gold); border-radius: var(--radius); padding: clamp(1.5rem, 2.5vw, 2rem); } .fact-card__k { font-family: var(--font-display); font-weight: 300; font-size: 2.25rem; color: var(--gold); line-height: 1; margin-bottom: 0.75rem; } .fact-card__title { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; margin-bottom: 0.5rem; } .fact-card__text { color: var(--muted); font-size: var(--fs-small); line-height: 1.55; } /* -------------------------------------------------------------------------- 20. CTA BAND (full-bleed photo + scrim) -------------------------------------------------------------------------- */ .cta-band { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(4.5rem, 10vw, 8rem); text-align: center; } .cta-band__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .cta-band__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--scrim-strong), rgba(10,10,11,0.7)), radial-gradient(120% 100% at 50% 50%, rgba(10,10,11,0.35), var(--scrim-strong)); } .cta-band__inner { position: relative; z-index: 1; max-width: 48rem; margin-inline: auto; } .cta-band .btn-row { margin-top: 2rem; } /* simple (no photo) CTA */ .cta-simple { text-align: center; } .cta-simple .btn-row { margin-top: 2rem; } /* giant phone number (contact page) */ .big-phone { display: inline-block; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.6rem, 1.5rem + 6vw, 5.5rem); line-height: 1; letter-spacing: -0.01em; color: var(--ivory); } .big-phone:hover { color: var(--gold-bright); } /* -------------------------------------------------------------------------- 21. CONTACT CARDS (map card, instagram card) -------------------------------------------------------------------------- */ .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); } .info-card { display: flex; align-items: center; gap: 1.1rem; padding: clamp(1.35rem, 2.5vw, 1.85rem); background: var(--graphite); border: 1px solid var(--edge); border-radius: var(--radius-lg); color: var(--ivory); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } a.info-card:hover { transform: translateY(-3px); border-color: var(--hairline); color: var(--ivory); } .info-card__icon { flex: 0 0 auto; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--hairline); border-radius: 50%; color: var(--gold); } .info-card__icon svg { width: 22px; height: 22px; } .info-card__k { font-size: 0.75rem; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); } .info-card__v { font-family: var(--font-display); font-size: 1.2rem; color: var(--ivory); margin-top: 0.15rem; } /* what-to-expect / checklist */ .check-list { display: flex; flex-direction: column; gap: 1rem; } .check-list li { position: relative; padding-left: 2rem; color: var(--ivory); } .check-list li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 18px; height: 18px; border: 1px solid var(--gold); border-radius: 50%; background: linear-gradient(45deg, transparent 45%, var(--gold) 45%, var(--gold) 55%, transparent 55%); } /* -------------------------------------------------------------------------- 22. SITE FOOTER -------------------------------------------------------------------------- */ .site-footer { background: var(--coal); border-top: 1px solid var(--hairline); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; } .site-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .footer-brand__row { display: flex; align-items: center; gap: 0.75rem; } .footer-brand__mark { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--hairline); object-fit: cover; } .footer-brand__name { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; } .footer-brand__tag { color: var(--muted); font-size: var(--fs-small); margin-top: 1rem; max-width: 32ch; line-height: 1.55; } .footer-col__h { font-size: 0.75rem; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; } .footer-col ul { display: flex; flex-direction: column; gap: 0.65rem; } .footer-col a, .footer-col li { color: var(--muted); font-size: var(--fs-small); } .footer-col a:hover { color: var(--gold-bright); } .footer-col .val { color: var(--ivory); } .site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; max-width: var(--maxw); margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; padding: 1.75rem var(--gutter) 0; border-top: 1px solid var(--hairline-soft); color: var(--muted-dim); font-size: 0.8rem; } .site-footer__bottom a { color: var(--muted); } .site-footer__rating { color: var(--muted); } .site-footer__rating strong { color: var(--gold); font-weight: 600; } /* -------------------------------------------------------------------------- 23. SCROLL-REVEAL (progressive enhancement) JS adds .reveal-ready to ; without JS everything stays visible. -------------------------------------------------------------------------- */ .reveal-ready .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); will-change: opacity, transform; } .reveal-ready .reveal.is-visible { opacity: 1; transform: none; } .reveal-ready .reveal[data-reveal-delay="1"] { transition-delay: 0.08s; } .reveal-ready .reveal[data-reveal-delay="2"] { transition-delay: 0.16s; } .reveal-ready .reveal[data-reveal-delay="3"] { transition-delay: 0.24s; } .reveal-ready .reveal[data-reveal-delay="4"] { transition-delay: 0.32s; } /* -------------------------------------------------------------------------- 24. HELPERS -------------------------------------------------------------------------- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .no-wrap { white-space: nowrap; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .maxw-narrow { max-width: var(--maxw-narrow); } /* -------------------------------------------------------------------------- 25. RESPONSIVE BREAKPOINTS (1100 / 820 / 560) -------------------------------------------------------------------------- */ @media (max-width: 1100px) { .service-grid { grid-template-columns: repeat(2, 1fr); } .package-grid { grid-template-columns: repeat(2, 1fr); } .package-card.featured { grid-column: 1 / -1; } .gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { :root { --header-h: 66px; } /* nav collapses to hamburger */ .nav { display: none; } .nav-toggle { display: inline-flex; } .reviews-grid { grid-template-columns: 1fr; } .fact-grid { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; gap: 2rem; } .step { padding-top: 0; padding-left: 3.75rem; } .step__num { top: -0.3rem; } .step:not(:last-child) .step__num::after { display: none; } .media-band { grid-template-columns: 1fr; gap: 2rem; } .media-band.reverse .media-band__media { order: 0; } .info-grid { grid-template-columns: 1fr; } .site-footer__top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } .hero__scrim { background: linear-gradient(0deg, rgba(10,10,11,0.9) 0%, rgba(10,10,11,0.3) 60%, rgba(10,10,11,0.55) 100%); } .hero.center .hero__content { max-width: 100%; } } @media (max-width: 560px) { .service-grid { grid-template-columns: 1fr; } .package-grid { grid-template-columns: 1fr; } .package-card.featured { grid-column: auto; } .gallery { grid-template-columns: 1fr; } .gallery-item.wide, .gallery-item.tall { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; } .site-footer__top { grid-template-columns: 1fr; } .brand__name { font-size: 1rem; } .btn-row .btn { width: 100%; } .ba-slider { aspect-ratio: 4 / 5; } .trust-strip__inner { flex-direction: column; align-items: flex-start; gap: 0.6rem; } .trust-sep { display: none; } } /* -------------------------------------------------------------------------- 26. REDUCED MOTION -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal-ready .reveal { opacity: 1 !important; transform: none !important; } .btn:hover, .service-card:hover, .package-card:hover, .gallery-item:hover img, .service-card__media img { transform: none !important; } } /* -------------------------------------------------------------------------- 27. PRINT (light-touch) -------------------------------------------------------------------------- */ @media print { .site-header, .mobile-nav, .nav-toggle, .hero__cue, .cta-band__media, .lightbox { display: none !important; } body { background: #fff; color: #000; } }