/* * Claw — Clinique 7 faithful homepage layout. * Airy, light, photo-led. Loads LAST so it owns the front page. All colour, * radius, spacing, and motion come from tokens.css (monochrome mirror, * Familjen Grotesk + Fraunces). Grayscale imagery via --img-filter. */ /* ── Lenis smooth-scroll helpers (from the Lenis recommended stylesheet) ────── * claw-motion.js adds `.lenis .lenis-smooth` to when it initialises; * these rules make the virtual scroll behave. Native scroll if JS is off. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } /* The homepage sits on the signature warm-grey artboard; white panels float * on top of it. Scoped to the front page so inner pages keep their own ground. */ /* (The greige artboard is now the site-wide body ground — global.css.) */ /* Non-heading serif accents mirror the global `h* em` accent rule. */ .cl-hero__serif em, .cl-close__email em, .cl-panel__title em, .cl-art__title em, .cl-refined__title em, .cl-consult__title em, .cl-boutique__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: 0; } /* Shared eyebrow + buttons */ .cl-eyebrow { font-family: var(--font-display); font-weight: 600; font-size: .8125rem; line-height: 1.2; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 var(--space-md); } .cl-eyebrow--center { text-align: center; } .cl-btn { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-display); font-weight: 600; font-size: .875rem; letter-spacing: var(--tracking-cta); text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background var(--dur-micro) var(--ease-standard), color var(--dur-micro) var(--ease-standard), opacity var(--dur-micro) var(--ease-standard); } .cl-btn--solid { background: var(--color-ink); color: var(--color-bone); padding: 1rem 1.9rem; border-radius: var(--radius-pill); border: 1px solid var(--color-ink); text-transform: none; letter-spacing: 0.005em; font-size: .9375rem; } .cl-btn--solid:hover { background: var(--color-accent); border-color: var(--color-accent); } .cl-btn--link { color: var(--color-ink); } .cl-btn--link:hover { color: var(--color-accent); } /* ── 1. HERO — airy, floating image ──────────────────────────────────────────── */ /* Fills the first screen: 100svh minus the greeting-marquee bar (44px) and the * header pill (its min-height clamp, header.css), so the hero's bottom edge * lands on the fold. Border-box, so the padding breathes inside the calc; * column-flex centers the composition when the viewport is taller. */ .cl-hero { background: var(--color-ground); display: flex; flex-direction: column; justify-content: center; /* 82px = marquee bar (44) + header pill's 1px border + the utility bar (36px + 1px hairline), which renders now that the NAP has an address. */ min-height: calc(100svh - 82px - clamp(64px, 8vh, 88px)); /* Bottom padding RESERVES the band the Specialty panel rises over (margin-top: clamp(-160px, -11vw, -80px) below) plus breathing room, so the pull-up only ever covers empty ground — never the CTA row. */ padding-block: clamp(var(--space-xl), 6vh, var(--space-2xl)) calc(clamp(80px, 11vw, 160px) + var(--space-lg)); overflow: clip; } /* Logged-in preview: WP's admin bar (32px) pushes the page down — subtract it so the hero still lands exactly on the fold while reviewing. */ body.admin-bar .cl-hero { min-height: calc(100svh - 82px - clamp(64px, 8vh, 88px) - 32px); } .cl-hero__inner { position: relative; } .cl-hero__eyebrow { font-family: var(--font-display); font-weight: 600; font-size: .8125rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 clamp(var(--space-xl), 10vh, var(--space-4xl)); } /* Huge asymmetric wordmark: line 1 sits indented, line 2 ("behind") hangs out to * the far-left margin — the reference's staggered two-word composition. */ .cl-hero__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.75rem, 12vw, 8.5rem); line-height: .9; letter-spacing: -0.04em; margin: 0; color: var(--color-ink); position: relative; z-index: 1; } .cl-hero__l1, .cl-hero__l2 { display: block; } /* Accent phrase: plain sans + serif-italic word (em) — "and proportion." */ .cl-hero__serif { font-family: var(--font-display); font-weight: 400; font-style: normal; font-size: clamp(2.5rem, 11vw, 8rem); line-height: .95; letter-spacing: -0.02em; margin: var(--space-md) 0 0; color: var(--color-ink); } .cl-hero__lede { max-width: 40ch; font-size: clamp(1.0625rem,1.3vw,1.25rem); line-height: 1.55; color: var(--color-text-muted); margin: clamp(var(--space-xl), 8vh, var(--space-3xl)) 0 0; } .cl-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); align-items: center; margin-top: var(--space-lg); } @media (min-width: 900px) { /* (Height now lives on .cl-hero — full first screen at every width.) */ /* The text column is indented ~10%; "in measure" alone pulls back to the margin. */ .cl-hero__eyebrow, .cl-hero__l1, .cl-hero__lede, .cl-hero__cta { padding-left: 10%; } .cl-hero__l2 { padding-left: 0; margin-left: -0.6vw; } /* Accent phrase sits right-aligned just under the headline (reference order: title → serif → subtext), so the CTA column below stays clear of it. */ .cl-hero__serif { text-align: right; margin-top: var(--space-xs); } .cl-hero__lede { margin-top: clamp(var(--space-xl), 8vh, var(--space-2xl)); max-width: 32ch; } } /* (Short-viewport hero compression lives AFTER the .cl-specialty base rules below — it overrides .cl-specialty's margin-top, so source order matters.) */ /* ── 2. SPECIALTY panel — scattered thumbnail cluster ────────────────────────── */ /* Gray artboard; the white panel is pulled up so it rises over the hero — the * defining "panel over the ground" move of the reference. claw-motion.js scrubs * the panel's translate + top-corner radius as it settles (see the file). */ .cl-specialty { background: var(--color-ground); padding-block: var(--section-y); margin-top: clamp(-160px, -11vw, -80px); position: relative; z-index: 2; } /* Panel runs nearly full-width, capped by a small gutter (reference proportions). */ .cl-specialty > .container { max-width: none; padding-inline: clamp(16px, 2vw, 44px); } /* Short-to-mid viewports (≤1100px tall — laptops, small desktops): the hero's vh gaps, type * scale and the Specialty overlap all compress so the whole composition — CTA * included — lands on the fold instead of running past it. Type gains a vh cap * so width alone can't oversize it on a short screen. Must sit after the * .cl-specialty base rule above (same specificity — source order decides). */ @media (max-height: 1100px) { .cl-hero { padding-block: clamp(var(--space-md), 4vh, var(--space-xl)) calc(clamp(56px, 7vw, 96px) + var(--space-md)); } .cl-hero__eyebrow { margin-bottom: clamp(var(--space-md), 5vh, var(--space-xl)); } .cl-hero__title { font-size: clamp(2.5rem, min(12vw, 18vh), 8.5rem); } .cl-hero__serif { font-size: clamp(2.25rem, min(11vw, 17vh), 8rem); } .cl-hero__lede { margin-top: clamp(var(--space-md), 5vh, var(--space-xl)); } .cl-specialty { margin-top: clamp(-96px, -7vw, -56px); } } .cl-panel { position: relative; background: var(--color-bone); border-radius: 40px; padding: clamp(var(--space-2xl), 6vw, var(--space-4xl)) clamp(var(--space-xl), 5vw, var(--space-3xl)); max-width: none; min-height: min(78vh, 800px); margin-inline: auto; display: flex; flex-direction: column; box-shadow: 0 60px 120px -70px color-mix(in srgb, var(--color-ink) 45%, transparent); text-align: left; will-change: transform; overflow: hidden; } /* Staggered, left-aligned heading: "Skincare" then "as a Specialty" indented. */ .cl-panel__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.25rem, 6vw, 5rem); line-height: .98; letter-spacing: -0.025em; margin: 0 0 clamp(var(--space-xl), 6vw, var(--space-3xl)); color: var(--color-ink); } .cl-panel__t1, .cl-panel__t2 { display: block; } .cl-panel__t2 { padding-left: 1.4em; } .cl-panel__title em { font-size: 1.1em; } /* ── Faces marquee — a continuously drifting band of portraits ──────────────── * Grayscale by default; the whole strip pauses on hover, and each card warms to * full colour and lifts as you point at it — the brand's "reveal the vitality" * made literal. The track holds the set twice, so translateX:-50% loops seamlessly. * Edge mask fades cards in/out at the panel margins. */ .cl-faces { position: relative; width: 100%; overflow: hidden; margin: clamp(var(--space-xl), 5vw, var(--space-3xl)) 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); } .cl-faces__track { display: flex; width: max-content; gap: clamp(var(--space-sm), 1.6vw, var(--space-lg)); animation: cl-faces-marquee 64s linear infinite; will-change: transform; } .cl-faces:hover .cl-faces__track, .cl-faces:focus-within .cl-faces__track { animation-play-state: paused; } @keyframes cl-faces-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .cl-faces__card { flex: 0 0 auto; width: clamp(124px, 13vw, 190px); } .cl-faces__card img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-md); filter: grayscale(1) contrast(1.02); box-shadow: 0 14px 32px -22px color-mix(in srgb, var(--color-ink) 55%, transparent); transition: transform var(--dur-short) var(--ease-standard), filter var(--dur-short) var(--ease-standard), box-shadow var(--dur-short) var(--ease-standard); } /* Gentle editorial wave — alternating lift + tilt. */ .cl-faces__card:nth-child(odd) img { transform: translateY(-10px) rotate(-2deg); } .cl-faces__card:nth-child(even) img { transform: translateY(10px) rotate(2deg); } /* Hover — straighten, lift, warm to full tone. */ .cl-faces__card img:hover { transform: translateY(-6px) scale(1.06) rotate(0deg); filter: grayscale(0) contrast(1.02); box-shadow: 0 30px 54px -26px color-mix(in srgb, var(--color-ink) 60%, transparent); } /* Footer row — the statement leads, the CTA sits to the right on one line. */ .cl-panel__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-lg) var(--space-2xl); } .cl-panel__body { max-width: 22ch; margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 3.4vw, 2.75rem); line-height: 1.14; letter-spacing: -0.015em; color: var(--color-ink); } .cl-panel__body em { font-family: var(--font-accent); font-style: italic; font-weight: 400; } .cl-panel__cta { display: inline-flex; width: fit-content; margin: 0; flex: none; } /* Process grid — the journey 01 → 08 inside the risen panel: stone step cards, * terracotta numerals, 4-up → 2-up → 1-up. The panel foot (pricing line + CTA) * closes the arc beneath it. */ .cl-process { list-style: none; /* title's own margin-bottom provides the gap above */ /* Tighter cascade than the page default so the 8-step reveal doesn't drag. */ --stagger-step: 60ms; margin: 0 0 clamp(var(--space-xl), 5vw, var(--space-2xl)); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(var(--space-sm), 1.4vw, var(--space-md)); } .cl-process__card { position: relative; overflow: hidden; background: var(--color-stone); border-radius: var(--radius-md); padding: var(--space-md) var(--space-md) var(--space-lg); transition: transform var(--dur-short) var(--ease-reveal), background-color var(--dur-short) var(--ease-standard), box-shadow var(--dur-short) var(--ease-standard); } /* Terracotta edge that draws down on hover/focus — the accent "activates" the step. */ .cl-process__card::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: var(--color-terracotta); transform: scaleY(0); transform-origin: top; transition: transform var(--dur-short) var(--ease-reveal); } .cl-process__num { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: .8125rem; letter-spacing: .12em; color: var(--color-terracotta); transition: transform var(--dur-short) var(--ease-reveal); } .cl-process__title { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; line-height: 1.15; margin: var(--space-sm) 0 var(--space-2xs); color: var(--color-ink); } .cl-process__body { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--color-text-muted); } /* Hover/focus lift — warm to bone, rise, cast a soft shadow, activate the edge and nudge the numeral. Gated to fine pointers + motion-OK so touch and reduced-motion users get the calm base state (these cards are informational, not tappable). */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .cl-process__card:hover, .cl-process__card:focus-within { transform: translateY(-6px); background: var(--color-bone); box-shadow: 0 26px 50px -30px color-mix(in srgb, var(--color-ink) 42%, transparent); } .cl-process__card:hover::before, .cl-process__card:focus-within::before { transform: scaleY(1); } .cl-process__card:hover .cl-process__num, .cl-process__card:focus-within .cl-process__num { transform: translateX(3px); } } /* Step down gracefully: 4-up → 3-up → 2-up → single column. */ @media (max-width: 1200px) { .cl-process { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1023px) { .cl-process { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599px) { .cl-process { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .cl-faces__track { animation: none; } .cl-faces { overflow-x: auto; } .cl-faces__card img { transition: none; } .cl-process__card, .cl-process__card::before, .cl-process__num { transition: none; } } @media (max-width: 767px) { .cl-faces { margin-block: var(--space-xl); } .cl-faces__card { width: clamp(104px, 34vw, 150px); } .cl-panel__foot { justify-content: flex-start; } } /* ── 3. THE ART — full-bleed close-up + serif overlay ────────────────────────── */ .cl-art { position: relative; overflow: clip; min-height: min(94vh, 860px); display: flex; align-items: center; background: var(--color-ink); } .cl-art__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: grayscale(1) contrast(0.9) brightness(1.32); } /* Airy overall; a soft pool of shade behind the title keeps the white type legible. */ .cl-art__scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(56% 68% at 74% 50%, color-mix(in srgb, var(--color-ink) 46%, transparent), transparent 72%), linear-gradient(to top, color-mix(in srgb, var(--color-ink) 20%, transparent), transparent 50%); } .cl-art__inner { position: relative; z-index: 2; width: 100%; min-height: min(94vh, 860px); display: flex; align-items: center; justify-content: flex-end; } /* Center-right statement: sparkle, eyebrow, serif-italic "The Art of", big sans word, ghost line. */ .cl-art__statement { position: relative; max-width: min(92%, 760px); text-align: right; color: var(--color-bone); margin-right: clamp(0px, 4vw, var(--space-2xl)); } .cl-art__spark { display: block; font-size: 1.5rem; line-height: 1; margin: 0 0 var(--space-md); color: color-mix(in srgb, var(--color-bone) 80%, transparent); } .cl-art__eyebrow { color: color-mix(in srgb, var(--color-bone) 78%, transparent); margin: 0 0 var(--space-md); } .cl-art__title { margin: 0; color: var(--color-bone); } .cl-art__title-a { display: block; font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: clamp(2.25rem, 5.5vw, 5rem); line-height: 1; } .cl-art__title-b { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(2.5rem, 7.5vw, 6rem); line-height: .95; letter-spacing: -0.02em; white-space: nowrap; } .cl-art__ghost { margin: var(--space-lg) 0 0 auto; max-width: 42ch; font-family: var(--font-display); font-weight: 500; font-size: clamp(.75rem, 1vw, .9375rem); letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: 1.6; color: color-mix(in srgb, var(--color-bone) 34%, transparent); } /* Bottom-left frosted card with a portrait thumbnail; text wraps around it. */ .cl-art__card { position: absolute; left: 0; bottom: clamp(var(--space-lg), 6vw, var(--space-3xl)); max-width: 33ch; padding: var(--space-lg); border-radius: var(--radius-card); color: var(--color-bone); background: color-mix(in srgb, var(--color-bone) 14%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid color-mix(in srgb, var(--color-bone) 22%, transparent); } .cl-art__card-media { float: left; width: clamp(72px, 8vw, 104px); margin: 0 var(--space-md) var(--space-2xs) 0; } .cl-art__card-media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); } .cl-art__note { margin: 0; font-size: .9375rem; line-height: 1.5; font-weight: 500; color: var(--color-bone); } @media (max-width: 767px) { .cl-art { min-height: auto; padding-block: var(--section-y); } .cl-art__inner { min-height: auto; flex-direction: column; align-items: stretch; gap: var(--space-2xl); } .cl-art__statement { text-align: left; max-width: none; margin-right: 0; } .cl-art__ghost { margin-left: 0; } .cl-art__card { position: static; max-width: none; } } /* ── 4. SIMPLY REFINED — before/after row ────────────────────────────────────── */ .cl-refined { background: var(--color-bone); padding-block: var(--section-y); } .cl-refined__head { text-align: center; margin-bottom: var(--space-2xl); } .cl-refined__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0; color: var(--color-ink); } .cl-refined__gallery { padding-inline: var(--gutter); } .cl-refined__gallery .h-gallery__track { align-items: flex-end; } .cl-refined__item { width: clamp(200px, 24vw, 300px); } .cl-refined__item img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-md); } .cl-refined__item:nth-child(even) { align-self: flex-start; } .cl-refined__item:nth-child(even) img { aspect-ratio: 3/4; } .cl-refined__gallery .h-gallery__controls { justify-content: center; } /* ── 5. WE LOVE YOUR SKIN — bright portrait + white form card ─────────────────── */ .cl-consult { background: var(--color-ground); padding-block: var(--section-y); } .cl-consult__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: stretch; } @media (min-width: 900px) { .cl-consult__inner { grid-template-columns: 1fr 1fr; gap: 0; } } .cl-consult__media { margin: 0; } /* Lifted, luminous portrait — brighter than the site-wide grayscale default. */ .cl-consult__media img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; border-radius: var(--radius-card) 0 0 var(--radius-card); filter: grayscale(1) brightness(1.24) contrast(0.92); } @media (max-width: 899px) { .cl-consult__media img { border-radius: var(--radius-card); min-height: 340px; } } .cl-consult__card { background: var(--color-bone); border-radius: 0 var(--radius-card) var(--radius-card) 0; padding: clamp(var(--space-lg), 4vw, var(--space-2xl)); display: flex; flex-direction: column; justify-content: center; } @media (max-width: 899px) { .cl-consult__card { border-radius: var(--radius-card); } } .cl-consult__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1; letter-spacing: -0.02em; margin: 0 0 var(--space-md); color: var(--color-ink); } .cl-form__intro { margin: 0 0 var(--space-lg); max-width: 42ch; font-size: .9375rem; line-height: 1.5; color: var(--color-text-muted); } .cl-form { display: flex; flex-direction: column; gap: var(--space-sm); } .cl-form__input { width: 100%; padding: .9rem 1.1rem; font: inherit; font-size: 1rem; color: var(--color-ink); background: var(--color-stone); border: 1px solid transparent; border-radius: var(--radius-sm); } .cl-form__input::placeholder { color: var(--color-text-muted); } .cl-form__input:focus { border-color: var(--color-ink); outline: none; } .cl-form__label { margin: var(--space-sm) 0 var(--space-2xs); font-size: .9375rem; color: var(--color-text-muted); } .cl-form__radio { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; color: var(--color-ink); } .cl-form__radio input { accent-color: var(--color-accent); } .cl-form__consent { display: flex; align-items: flex-start; gap: .5rem; margin-top: var(--space-xs); font-size: .8125rem; line-height: 1.45; color: var(--color-text-muted); } .cl-form__consent input { margin-top: .15rem; flex: none; accent-color: var(--color-accent); } .cl-form__submit { margin-top: var(--space-md); justify-content: center; } /* ── 6. BOUTIQUE — accordion over a face ─────────────────────────────────────── */ .cl-boutique { position: relative; overflow: clip; padding-block: var(--section-y); background: var(--color-ink); } .cl-boutique__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; z-index: 0; } .cl-boutique__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, color-mix(in srgb, var(--color-ink) 62%, transparent), color-mix(in srgb, var(--color-ink) 22%, transparent)); } .cl-boutique__inner { position: relative; z-index: 2; } .cl-boutique__head { margin-bottom: var(--space-xl); } .cl-boutique__head .cl-eyebrow { color: color-mix(in srgb, var(--color-bone) 78%, transparent); } .cl-boutique__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.75rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0; color: var(--color-bone); } .cl-accordion { list-style: none; margin: 0; padding: 0; max-width: 720px; display: flex; flex-direction: column; gap: var(--space-2xs); } .cl-accordion__row { border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-bone) 16%, transparent); backdrop-filter: blur(6px); border: 1px solid color-mix(in srgb, var(--color-bone) 22%, transparent); overflow: hidden; transition: background var(--dur-short) var(--ease-standard), border-radius var(--dur-short) var(--ease-standard); } .cl-accordion__row.is-open { border-radius: var(--radius-card); background: color-mix(in srgb, var(--color-bone) 92%, transparent); } .cl-accordion__trigger { width: 100%; display: flex; align-items: center; gap: var(--space-md); padding: 1rem 1.5rem; background: none; border: 0; cursor: pointer; text-align: left; color: var(--color-bone); } .cl-accordion__row.is-open .cl-accordion__trigger { color: var(--color-ink); } .cl-accordion__label { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.0625rem, 1.6vw, 1.375rem); } .cl-accordion__cat { font-family: var(--font-display); font-weight: 600; font-size: .75rem; letter-spacing: var(--tracking-label); text-transform: uppercase; opacity: .7; margin-left: auto; } .cl-accordion__icon { position: relative; width: 14px; height: 14px; flex: none; } .cl-accordion__icon::before, .cl-accordion__icon::after { content: ""; position: absolute; background: currentColor; } .cl-accordion__icon::before { top: 6px; left: 0; width: 14px; height: 2px; } .cl-accordion__icon::after { left: 6px; top: 0; width: 2px; height: 14px; transition: transform var(--dur-short) var(--ease-standard); } .cl-accordion__row.is-open .cl-accordion__icon::after { transform: scaleY(0); } .cl-accordion__panel { max-height: 0; overflow: hidden; transition: max-height var(--dur-short) var(--ease-standard); } .cl-accordion__row.is-open .cl-accordion__panel { max-height: 200px; } .cl-accordion__panel p { margin: 0; padding: 0 1.5rem 1.25rem; color: var(--color-ink); font-size: .9375rem; line-height: 1.55; max-width: 52ch; } /* ── 7. THE JOURNAL — light section, staggered heading, scattered post covers ── */ .cl-approach { background: var(--color-ground); padding-block: clamp(var(--space-3xl), 14vh, var(--space-4xl)); overflow: clip; } .cl-approach__inner { position: relative; min-height: min(88vh, 860px); display: flex; flex-direction: column; justify-content: center; } /* Scattered post covers — square anchors at per-spot sizes (--card-size from * markup), each gently tilted; hover/focus straightens, lifts, warms the * grayscale cover to colour and reveals the post title chip. * ⚠ NO transform in the transition list: claw-motion.js §7 (magnetic drift) * owns the card transform via GSAP inline styles — a CSS transition on * transform would fight every quickTo update. The rotate() on the spot * modifiers is only the no-JS fallback; GSAP re-applies it from data-tilt. */ .cl-approach__photo { position: absolute; display: block; width: var(--card-size, clamp(112px, 15vw, 220px)); z-index: 2; text-decoration: none; will-change: transform; } .cl-approach__card-img { display: block; aspect-ratio: 1; border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 40px 90px -50px color-mix(in srgb, var(--color-ink) 45%, transparent); transition: box-shadow var(--dur-short) var(--ease-standard); } .cl-approach__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter var(--dur-short) var(--ease-standard); } .cl-approach__photo--tr { top: 0; right: 0; transform: rotate(2deg); } .cl-approach__photo--bl { bottom: 0; left: 9%; transform: rotate(-2deg); } .cl-approach__photo--br { bottom: 26%; right: 7%; transform: rotate(1.5deg); } .cl-approach__photo--tl { top: 0; left: 6%; transform: rotate(-2.5deg); } .cl-approach__photo--ml { top: 36%; left: 1%; transform: rotate(-1.8deg); } .cl-approach__photo--bc { bottom: 0; right: 15%; transform: rotate(2.4deg); } /* Caption — always visible under the cover, so the squares read as articles (category · date in terracotta, then the post title), not portraits. */ .cl-approach__card-cap { display: block; padding: .65em .15em 0; text-align: left; } .cl-approach__card-meta { display: block; font-family: var(--font-display); font-weight: 600; font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent); margin-bottom: .35em; } .cl-approach__card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--font-display); font-weight: 600; font-size: .8125rem; line-height: 1.35; letter-spacing: .01em; color: var(--color-ink); transition: color var(--dur-micro) var(--ease-standard); } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .cl-approach__photo:hover .cl-approach__card-img, .cl-approach__photo:focus-visible .cl-approach__card-img { box-shadow: 0 50px 100px -50px color-mix(in srgb, var(--color-ink) 60%, transparent); } .cl-approach__photo:hover img, .cl-approach__photo:focus-visible img { filter: none; } .cl-approach__photo:hover .cl-approach__card-title, .cl-approach__photo:focus-visible .cl-approach__card-title { color: var(--color-accent); } } /* Small screens: keep the two anchor corners, rest the extras. */ @media (max-width: 767.98px) { .cl-approach__photo--br, .cl-approach__photo--tl, .cl-approach__photo--ml, .cl-approach__photo--bc { display: none; } } .cl-approach__eyebrow { text-align: center; margin: 0 auto clamp(var(--space-xl), 9vh, var(--space-3xl)); } /* Staggered heading, centred as a block: line 1, then "as a Passion" indented. */ .cl-approach__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.5rem, 8vw, 6.5rem); line-height: .92; letter-spacing: -0.035em; margin: 0; color: var(--color-ink); width: fit-content; margin-inline: auto; text-align: left; } .cl-approach__t1, .cl-approach__t2 { display: block; } .cl-approach__t2 { padding-left: 1.6em; } .cl-approach__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 1.06em; } /* The invitation — a legible lede saying what the journal IS (replaced the near-invisible ghost strip, owner 2026-07-24). */ .cl-approach__lede { text-align: center; margin: clamp(var(--space-xl), 8vh, var(--space-2xl)) auto 0; max-width: 44ch; font-size: clamp(1rem, 1.4vw, 1.1875rem); line-height: 1.6; color: color-mix(in srgb, var(--color-ink) 72%, transparent); } .cl-approach__lede em { font-family: var(--font-accent); font-style: italic; font-size: 1.06em; } .cl-approach__more { position: absolute; right: 0; bottom: clamp(var(--space-lg), 6vh, var(--space-2xl)); display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-display); font-weight: 600; font-size: .875rem; letter-spacing: var(--tracking-cta); text-transform: uppercase; color: var(--color-ink); text-decoration: none; border-bottom: 1px solid var(--color-ink); padding-bottom: 3px; transition: color var(--dur-micro) var(--ease-standard), border-color var(--dur-micro) var(--ease-standard); } .cl-approach__more:hover { color: var(--color-accent); border-color: var(--color-accent); } @media (max-width: 767px) { .cl-approach__inner { min-height: auto; gap: var(--space-2xl); } .cl-approach__photo { position: static; width: clamp(150px, 44vw, 200px); } .cl-approach__photo--tr { align-self: flex-end; } .cl-approach__photo--bl { align-self: flex-start; } .cl-approach__more { position: static; margin-inline: auto; } } /* ── 7.5 BRANDS WE TRUST — quiet wordmark strip on the stone band ──────────── */ .cl-brands { background: var(--color-stone); padding-block: clamp(var(--space-2xl), 9vh, var(--space-3xl)); } .cl-brands__label { margin-bottom: clamp(var(--space-lg), 4vh, var(--space-xl)); } .cl-brands__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: clamp(var(--space-lg), 5vw, var(--space-3xl)); row-gap: var(--space-lg); } .cl-brands__item a, .cl-brands__item > span { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 1.7vw, 1.375rem); letter-spacing: -0.01em; white-space: nowrap; color: color-mix(in srgb, var(--color-ink) 42%, transparent); text-decoration: none; display: inline-flex; align-items: center; transition: color var(--dur-micro) var(--ease-standard); } .cl-brands__item a:hover, .cl-brands__item a:focus-visible { color: var(--color-accent); } /* Real logos render as ink-masked silhouettes: any-colour source art becomes * currentColor (the muted ink above, terracotta on hover) via mask-image — * --m is the asset url, --ar its width/height ratio, both inline from PHP. */ .cl-brands__logo { display: block; height: clamp(20px, 2.2vw, 27px); width: calc(clamp(20px, 2.2vw, 27px) * var(--ar, 4)); max-width: min(64vw, 250px); background: currentColor; -webkit-mask-image: var(--m); mask-image: var(--m); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; } /* Icon-shaped marks (ar < 1.6) sit beside their wordmark at text scale. */ .cl-brands__logo--icon { height: 1.2em; width: calc(1.2em * var(--ar, 1)); margin-right: .45em; } /* ── 8. CLIENT REVIEWS — five-star quote slider on the white bridge panel ──── */ /* Transparent section (shows the light body ground); only the panel has a fill. Its negative bottom margin lets the panel's rounded base overhang the dark at-a-glance section below (which pads its content clear of the overhang). Slides stack in one grid cell (container = tallest slide, no fixed height); quote-slider.js toggles .is-active and stamps data-dir for the drift. */ .cl-quote { background: transparent; position: relative; z-index: 3; padding-top: var(--section-y); margin-bottom: clamp(-180px, -12vw, -90px); } .cl-quote__panel { position: relative; background: var(--color-bone); border-radius: 40px; max-width: var(--container-wide); margin-inline: auto; padding: clamp(var(--space-xl), 5vw, var(--space-3xl)); box-shadow: 0 60px 120px -70px color-mix(in srgb, var(--color-ink) 45%, transparent); } .cl-quote__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin: 0 0 clamp(var(--space-md), 3vw, var(--space-lg)); } .cl-quote__stars { display: flex; gap: .3rem; margin: 0; color: var(--color-accent); } .cl-quote__star { width: clamp(16px, 1.6vw, 22px); height: auto; flex: none; } /* Live-listing meta — "4.9 · 27 reviews on Google", links to the listing. */ .cl-quote__gmeta { font-family: var(--font-display); font-weight: 600; font-size: .8125rem; letter-spacing: var(--tracking-label); text-transform: uppercase; text-decoration: none; color: color-mix(in srgb, var(--color-ink) 55%, transparent); border-bottom: 1px solid transparent; padding-bottom: 1px; transition: color var(--dur-micro) var(--ease-standard), border-color var(--dur-micro) var(--ease-standard); } .cl-quote__gmeta:hover { color: var(--color-accent); border-color: var(--color-accent); } .cl-quote__slides { position: relative; display: grid; } /* Giant serif opening quote — decorative backdrop behind the review text. */ .cl-quote__slides::before { content: '\201C'; position: absolute; z-index: 0; top: -0.12em; left: -0.04em; font-family: var(--font-accent); line-height: 1; font-size: clamp(7rem, 16vw, 13rem); color: color-mix(in srgb, var(--color-ink) 9%, transparent); pointer-events: none; } .cl-quote__slide { grid-area: 1 / 1; position: relative; z-index: 1; margin: 0; display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'text media' 'name media'; gap: 0 clamp(var(--space-lg), 4vw, var(--space-2xl)); align-items: center; opacity: 0; visibility: hidden; transform: translateX(18px); transition: opacity var(--dur-short) var(--ease-standard), transform var(--dur-short) var(--ease-reveal), visibility 0s var(--dur-short); } .cl-quote__slides[data-dir='prev'] .cl-quote__slide { transform: translateX(-18px); } .cl-quote__slide.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .cl-quote__text { grid-area: text; margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 3.4vw, 3rem); line-height: 1.16; letter-spacing: -0.015em; color: var(--color-ink); max-width: 24ch; } .cl-quote__text em { font-family: var(--font-accent); font-style: italic; font-weight: 400; } /* Long Google reviews step the type down so five sentences still sit well. */ .cl-quote__text--long { font-size: clamp(1.25rem, 2.4vw, 2rem); line-height: 1.3; max-width: 46ch; } .cl-quote__name { grid-area: name; margin-top: clamp(var(--space-md), 2.5vw, var(--space-lg)); font-family: var(--font-display); font-weight: 600; font-size: .875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: color-mix(in srgb, var(--color-ink) 62%, transparent); } .cl-quote__name::before { content: '\2014\00a0'; } .cl-quote__when { opacity: .7; } .cl-quote__media { grid-area: media; margin: 0; width: clamp(150px, 22vw, 320px); } .cl-quote__media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-card); } .cl-quote__nav { display: flex; gap: .75rem; margin-top: clamp(var(--space-lg), 4vw, var(--space-xl)); } .cl-quote__arrow { width: 48px; height: 48px; border-radius: 50%; flex: none; border: 1.5px solid var(--color-ink); background: transparent; color: var(--color-ink); font-size: 1.125rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color var(--dur-micro) var(--ease-standard), border-color var(--dur-micro) var(--ease-standard), transform var(--dur-micro) var(--ease-standard); } .cl-quote__arrow:hover { color: var(--color-accent); border-color: var(--color-accent); transform: scale(1.06); } @media (max-width: 767px) { .cl-quote { margin-bottom: clamp(-140px, -20vw, -70px); } .cl-quote__slide { grid-template-columns: 1fr; grid-template-areas: 'text' 'name' 'media'; } .cl-quote__media { width: clamp(140px, 44vw, 220px); margin-top: var(--space-lg); } } /* (Section 9 "at-a-glance" removed — the process journey now lives in the section-2 panel as .cl-process, owner 2026-07-23.) */ /* ── 10. GIANT CLOSING — ink brand close: wordmark + phone + email ───────────── */ /* Top padding RESERVES the quote panel's overhang (margin-bottom clamp(-180,-12vw,-90) above) plus breathing room — section-y alone was fully eaten at wide widths and the É kissed the panel (owner). Bottom space + the closing hairline live on __inner, sitting right before the footer nav. */ .cl-close { background: var(--color-ink); padding-block: calc(clamp(90px, 12vw, 180px) + clamp(var(--space-xl), 6vw, var(--space-2xl))) 0; } .cl-close__inner { text-align: left; padding-bottom: clamp(var(--space-xl), 5vw, var(--space-2xl)); border-bottom: 1px solid color-mix(in srgb, var(--color-bone) 18%, transparent); } /* Staggered wordmark — stays VERY bold, very big (owner); no hairline of its own anymore (the single rule moved to the section's end). */ .cl-close__wordmark { --close-wordmark: clamp(3rem, 11vw, 9rem); display: flex; flex-direction: column; margin: 0 0 clamp(var(--space-lg), 5vw, var(--space-2xl)); color: var(--color-bone); line-height: 0.92; user-select: none; } .cl-close__name { align-self: flex-start; font-family: var(--font-display); font-weight: 700; font-size: var(--close-wordmark); letter-spacing: -0.02em; } .cl-close__suffix { align-self: flex-end; margin-top: 0.02em; font-family: var(--font-display); font-weight: 400; font-size: var(--close-wordmark); } /* Phone + email a clear step DOWN from the wordmark (owner). */ .cl-close__phone { display: block; width: fit-content; font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 7vw, 4.5rem); line-height: .95; letter-spacing: -0.03em; color: var(--color-bone); text-decoration: none; } .cl-close__phone:hover { color: var(--color-accent); } .cl-close__email { display: block; text-align: right; margin-top: var(--space-md); font-size: clamp(1.25rem, 3.5vw, 2.25rem); color: var(--color-bone); text-decoration: none; } .cl-close__email:hover { color: var(--color-accent); }