/* ============================================================================= LINDEN DENTAL CARE - Frontend rebuild Direction: porcelain white + brushed gold, with black lacquer & deep clinic green as rich accents. High-end, editorial, chic. ============================================================================= */ :root{ /* ---- color tokens ---- */ --ink: #050505; /* deepest black */ --black: #080807; /* primary black surface */ --graphite: #1D1D1A; /* soft graphite (ink text) */ --espresso: #17130D; /* warm near-black - dark section panels (light text) + accents (replaces the old clinic green) */ --espresso-deep: #0E0B07; /* deeper variant (gradient depth) */ --espresso-soft: #2A2318; /* soft espresso accent (text selection) */ --gold: #C8A45D; /* brushed gold - surfaces, borders, dark-section text */ --gold-deep: #A0834A; /* LARGE text (>=24px) + graphics/focus ring: >=3:1 on every light surface (WCAG 1.4.3/1.4.11) */ --gold-ink: #7E673A; /* normal-size text on light: >=4.5:1 on every light surface */ /* form control borders need 3:1 as non-text UI (WCAG 1.4.11). The hairline used elsewhere composites to 1.3:1 on white, which is decorative-only. */ --field-border: #8E8E8C; --error: #9B2C1B; /* deep oxblood for form errors: 7:1 on porcelain/white */ --porcelain: #F7F7F2; /* porcelain white */ --paper: #FFFFFF; --mist: #ECEBE4; /* mist gray */ /* ---- semantic ---- */ --text-on-dark: #F5F4EF; --text-on-dark-2: #BFC7C0; --text-on-light: #1D1D1A; --text-on-light-2:#5B655E; --hairline-dark: rgba(245,244,239,.16); --hairline-light: rgba(13,13,12,.13); --hairline-gold: rgba(200,164,93,.5); /* ---- type ---- */ --display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif; --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* ---- layout ---- */ --maxw: 1320px; --maxw-reading: 860px; /* long-form text, FAQ, centered explanations */ --maxw-narrow: 680px; /* short statements, testimonial columns, confirmations */ --pad: clamp(22px, 5vw, 64px); --header-h: 96px; /* ---- semantic vertical rhythm (global system, 2026-07) ---- Assign section variants by PURPOSE in page work; do not blanket-apply. */ --space-section: clamp(54px, 6.5vw, 96px); /* standard content section */ --space-section-compact: clamp(42px, 5vw, 72px); /* strips, support bands, related links */ --space-section-generous: clamp(64px, 8vw, 118px); /* signature image-led editorial moments */ --space-cta: clamp(64px, 8vw, 100px); /* dark concluding CTA band */ /* ---- motion ---- */ --ease: cubic-bezier(.16,1,.3,1); --ease-curtain: cubic-bezier(.76,0,.24,1); } /* ============================================================================= RESET / BASE ============================================================================= */ *{ margin:0; padding:0; box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ background: var(--porcelain); color: var(--text-on-light); font-family: var(--sans); font-size: 17px; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } strong{ font-weight:600; } ::selection{ background: var(--espresso-soft); color: var(--porcelain); } :focus-visible{ outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius:2px; } .skip-link{ position:fixed; top:10px; left:50%; transform: translateX(-50%) translateY(-200%); z-index:2000; background: var(--ink); color: var(--porcelain); padding:12px 20px; border-radius:4px; font-size:13px; letter-spacing:.04em; transition: transform .25s var(--ease); } .skip-link:focus{ transform: translateX(-50%) translateY(0); } section[id]{ scroll-margin-top: calc(var(--header-h) + 14px); } h2[id], h3[id], div[id]{ scroll-margin-top: calc(var(--header-h) + 14px); } html{ scroll-padding-top: calc(var(--header-h) + 14px); } #top{ scroll-margin-top: 0; } /* subtle film grain on the dark / green accent sections */ .grain{ position:relative; } .grain::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; background-image:url("../img/grain.png"); background-size:120px 120px; background-repeat:repeat; } .grain > *{ position:relative; z-index:1; } /* ============================================================================= TYPOGRAPHY HELPERS ============================================================================= */ .eyebrow{ display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color: var(--text-on-light-2); font-weight:600; margin-bottom:24px; } .eyebrow--light{ color: var(--gold); } .eyebrow--center{ justify-content:center; } .eyebrow__rule{ width:38px; height:1px; background: var(--gold); display:inline-block; flex:0 0 auto; } .display{ font-family: var(--display); font-weight:500; font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.02; letter-spacing:-.012em; overflow: visible; text-wrap: balance; } .display--dark{ color: var(--text-on-light); } .display--light{ color: var(--text-on-dark); } .line--accent{ font-style:italic; color: var(--gold-deep); } .display--light .line--accent{ color: var(--gold); } .line-mask{ display:block; overflow:hidden; padding-bottom:.12em; } .line{ display:block; } .lede{ font-size: clamp(16px, 1.15vw, 17.5px); line-height: 1.72; color: var(--text-on-light-2); max-width: 56ch; margin-top: 18px; } .lede strong{ color: var(--text-on-light); } .lede em{ font-style:italic; color: var(--text-on-light); } /* ============================================================================= BUTTONS / LINKS ============================================================================= */ .btn{ --btn-bg: var(--gold); --btn-fg: var(--ink); --btn-bd: var(--gold); display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 28px; border:1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg); font-family: var(--sans); font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; border-radius:2px; cursor:pointer; line-height:1; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); } .btn:hover{ transform: translateY(-2px); } .btn:disabled, .btn[aria-disabled="true"]{ opacity:.55; cursor:default; transform:none; } .btn--gold{ --btn-bg: var(--gold); --btn-fg: var(--ink); --btn-bd: var(--gold); } .btn--gold:hover{ --btn-bg: #d8b873; --btn-bd:#d8b873; } .btn--dark{ --btn-bg: var(--black); --btn-fg: var(--porcelain); --btn-bd: var(--black); } .btn--dark:hover{ --btn-bg: var(--graphite); --btn-bd: var(--graphite); } .btn--ghost{ --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: rgba(13,13,12,.5); } .btn--ghost:hover{ --btn-bg: rgba(13,13,12,.045); --btn-fg: var(--ink); --btn-bd: rgba(13,13,12,.55); } .btn--ghost-light{ --btn-bg: transparent; --btn-fg: var(--text-on-dark); --btn-bd: rgba(245,244,239,.65); } .btn--ghost-light:hover{ --btn-bg: rgba(245,244,239,.08); --btn-bd: var(--gold); } /* fill-sweep: outlined button whose black fills in from the left on hover (e.g. the Yelp reviews CTA, echoing the solid Google button). The light-on-black label is a CSS ::after layer (content from data-fill) clipped from the left and revealed in step with the fill, so the text stays fully legible through the whole sweep. Because it is generated by CSS, no duplicate text appears if the stylesheet is missing/stale. */ .btn--fill{ position:relative; overflow:hidden; } .btn--fill::after{ content: attr(data-fill); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:var(--ink); color:var(--porcelain); clip-path: inset(0 100% 0 0); transition: clip-path .42s var(--ease); pointer-events:none; } .btn--fill:hover{ --btn-bd: var(--ink); } .btn--fill:hover::after{ clip-path: inset(0 0 0 0); } @media (prefers-reduced-motion: reduce){ .btn--fill::after{ transition-duration:.001ms; } } .btn--sm{ padding:12px 20px; font-size:11px; } .btn--lg{ padding:19px 34px; } .btn--block{ width:100%; } .link-call{ font-size:14px; letter-spacing:.02em; color: var(--text-on-light-2); display:inline-flex; align-items:center; padding:8px 0; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:5px; transition: color .3s var(--ease), text-decoration-color .3s var(--ease); } .link-call:is(:hover,:focus-visible){ color: var(--gold-ink); text-decoration-color: var(--gold); } .link-call--light{ color: var(--text-on-dark-2); display:inline-block; margin-top:14px; } /* ============================================================================= LAYOUT PRIMITIVES ============================================================================= */ .section{ padding: var(--space-section) var(--pad); } .section--compact{ padding-top: var(--space-section-compact); padding-bottom: var(--space-section-compact); } .section--generous{ padding-top: var(--space-section-generous); padding-bottom: var(--space-section-generous); } .about__grid, .gallery__head, .gallery__grid, .services__head, .index{ max-width: var(--maxw); margin-inline:auto; } /* ============================================================================= EDITORIAL PLACEHOLDER (.ph) - sharp, intentional, drop-in ready ============================================================================= */ .ph{ position:relative; overflow:hidden; border-radius:2px; background:#EDF0EE; } .ph__mat{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:34px; text-align:center; background: linear-gradient(160deg,#FBFCFB 0%, #E9EEEB 100%); color: var(--graphite); } .ph__mat::after{ content:""; position:absolute; inset:0; background:url("../img/grain.png"); background-size:120px 120px; opacity:.45; pointer-events:none; } /* double brushed-gold frame */ .ph::before{ content:""; position:absolute; inset:14px; z-index:3; pointer-events:none; border:1px solid rgba(200,164,93,.6); outline:1px solid rgba(200,164,93,.22); outline-offset:5px; } .ph__tag{ position:absolute; top:24px; left:0; right:0; z-index:4; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color: var(--gold-deep); } .ph__motif{ position:relative; z-index:4; width:42px; height:52px; display:block; background:url("data:image/svg+xml;utf8,") center/contain no-repeat; opacity:.92; } .ph__label{ position:relative; z-index:4; font-family:var(--display); font-size:clamp(20px,2.2vw,28px); line-height:1.15; color: var(--graphite); } .ph__sub{ position:relative; z-index:4; font-size:11px; letter-spacing:.06em; color: var(--text-on-light-2); } .ph--dark .ph__mat{ background: linear-gradient(155deg,#26261F 0%, #0C0C0A 100%); } .ph--dark .ph__label{ color: var(--porcelain); } .ph--dark .ph__sub{ color: var(--text-on-dark-2); } .ph--dark .ph__mat::after{ opacity:.6; } .ph--green .ph__mat{ background: linear-gradient(155deg,#241D14 0%, #0C0A06 100%); } .ph--green .ph__label{ color: var(--porcelain); } .ph--green .ph__sub{ color: var(--text-on-dark-2); } /* image-mask veil reveal works on placeholders too */ .veil{ position:absolute; inset:0; z-index:5; background: var(--espresso); transform: translateY(-101%); } /* ============================================================================= HEADER (dark text - sits over the light hero) ============================================================================= */ .header{ position:fixed; top:0; left:0; right:0; z-index:900; transition: background .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); background: transparent; border-bottom:1px solid transparent; } .header__bar{ width:100%; padding:18px var(--pad); /* full-width: wordmark flush-left, bar spreads edge to edge */ display:flex; align-items:center; justify-content:space-between; gap:24px; } .wordmark{ display:flex; flex-direction:column; line-height:1; flex:0 0 auto; } /* approved LDC lockup artwork (aspect ratio 8.93:1) — size by height only, never stretch */ .wordmark__logo{ display:block; height:40px; width:auto; } .wordmark__sub{ margin-top:7px; font-size:9px; letter-spacing:.3em; text-transform:uppercase; color: var(--text-on-light-2); white-space:nowrap; } .mono{ flex:0 0 auto; display:block; width:42px; height:42px; } .nav{ display:flex; align-items:center; gap:clamp(18px,1.6vw,28px); margin:0 auto; } .nav a{ font-size:14px; letter-spacing:.04em; white-space:nowrap; color: var(--text-on-light-2); position:relative; padding:6px 0; transition:color .3s var(--ease); } .nav a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .3s var(--ease); } .nav a:hover{ color: var(--ink); } .nav a:hover::after{ width:100%; } /* active page: just the gold underline, no color change (so the label never "shifts color" between pages) */ .nav a[aria-current]::after{ width:100%; } .header__actions{ display:flex; align-items:center; gap:16px; } .header__phone{ font-size:13px; letter-spacing:.02em; white-space:nowrap; color: var(--ink); border-bottom:1px solid var(--hairline-gold); padding-bottom:2px; transition:border-color .3s var(--ease); } .header__phone:hover{ border-color: var(--gold); } /* pages that want the opaque ivory header from the moment they load (e.g. /services/) */ body.headersolid .header{ background: var(--porcelain); border-bottom:1px solid var(--hairline-light); } .header.scrolled{ background: var(--porcelain); box-shadow: 0 1px 0 rgba(13,13,12,.06), 0 10px 30px rgba(13,13,12,.05); border-bottom:1px solid var(--hairline-light); } .hamburger{ display:none; flex-direction:column; gap:6px; background:none; border:none; cursor:pointer; padding:10px; } .hamburger span{ width:26px; height:1.6px; background: var(--ink); display:block; } /* ============================================================================= MOBILE OVERLAY MENU ============================================================================= */ .menu{ position:fixed; inset:0; z-index:1000; background: linear-gradient(160deg, var(--espresso) 0%, var(--black) 72%); display:flex; flex-direction:column; padding: 26px var(--pad) 40px; opacity:0; pointer-events:none; transform: translateY(-10px); /* visibility (not just opacity) keeps the closed menu's links out of the tab order, so keyboard users cannot land inside a menu they cannot see. It is delayed by the fade duration so the close animation still plays. */ visibility:hidden; transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s; } .menu.open{ opacity:1; pointer-events:auto; transform:none; visibility:visible; transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s; } .menu__top{ display:flex; align-items:center; justify-content:space-between; } .menu__mark{ display:inline-flex; align-items:center; } .menu__mark__logo{ display:block; height:34px; width:auto; } .menu__close{ background:none; border:none; cursor:pointer; font-family:var(--display); font-size:38px; line-height:1; color: var(--porcelain); } .menu__nav{ margin:auto 0; display:flex; flex-direction:column; gap:4px; } .mlink{ font-family:var(--display); font-size: clamp(34px, 9vw, 46px); font-weight:500; color: var(--porcelain); padding:6px 0; opacity:0; transform: translateY(22px); transition: color .3s var(--ease); } .mlink:hover{ color: var(--gold); } .menu.open .mlink{ opacity:1; transform:none; transition: opacity .6s var(--ease), transform .6s var(--ease), color .3s var(--ease); } .menu.open .mlink:nth-child(1){ transition-delay:.10s; } .menu.open .mlink:nth-child(2){ transition-delay:.16s; } .menu.open .mlink:nth-child(3){ transition-delay:.22s; } .menu.open .mlink:nth-child(4){ transition-delay:.28s; } .menu.open .mlink:nth-child(5){ transition-delay:.34s; } .menu.open .mlink:nth-child(6){ transition-delay:.40s; } .menu__foot{ display:flex; flex-direction:column; gap:16px; } .menu__phone{ font-size:18px; color: var(--porcelain); letter-spacing:.02em; padding:12px 0; } /* >=44px touch target */ /* ============================================================================= HERO (porcelain) ============================================================================= */ .hero{ background: var(--porcelain); color: var(--text-on-light); padding: calc(var(--header-h) + clamp(40px,7vw,86px)) var(--pad) clamp(56px,7vw,90px); } .hero__grid{ max-width: var(--maxw); margin-inline:auto; display:grid; grid-template-columns: 1.04fr .96fr; gap: clamp(36px,5vw,72px); align-items:center; min-height: min(74vh, 740px); } .hero__title{ font-family: var(--display); font-weight:500; font-size: clamp(2.7rem, 6vw, 5.4rem); line-height: .98; letter-spacing:-.018em; color: var(--text-on-light); margin: 22px 0 0; overflow: visible; text-wrap: balance; } .hero__lede{ margin-top: 28px; max-width: 50ch; font-size: clamp(16px,1.2vw,18px); line-height:1.66; color: var(--text-on-light-2); } .hero__lede strong{ color: var(--text-on-light); font-weight:600; } .hero__cta{ margin-top: 36px; display:flex; flex-wrap:wrap; align-items:center; gap:16px; } .hero__media{ position:relative; height: clamp(440px, 62vh, 640px); } /* editorial single-column hero (no image, premium whitespace) */ /* fill the viewport so the homepage hero IS the first screen (the green credentials band sits just below the fold). min-height = 100vh minus the hero's own top/bottom padding, so the section totals one screen; it still grows if the content ever needs more room. */ .hero--editorial .hero__inner{ max-width:980px; margin-inline:auto; min-height:min(calc(100vh - var(--header-h) - clamp(40px,7vw,86px) - clamp(56px,7vw,90px)), 520px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:0; } @media (max-width:640px){ .hero--editorial .hero__inner{ min-height:0; padding-block:28px 8px; } } .hero--editorial .hero__lede{ margin-left:auto; margin-right:auto; max-width:60ch; } .hero--editorial .hero__cta{ justify-content:center; } /* hero variant 2 - black lacquer (set HERO_VARIANT = "dark" in src/data.js) */ .hero--dark{ background: var(--black); color: var(--text-on-dark); } .hero--dark .hero__title{ color: var(--text-on-dark); } .hero--dark .hero__lede{ color: var(--text-on-dark-2); } .hero--dark .hero__lede strong{ color: var(--text-on-dark); } .hero--dark .link-call{ color: var(--text-on-dark-2); } .hero--dark .link-call:hover{ color: var(--gold); } /* ============================================================================= CREDIBILITY BAND (deep green accent) ============================================================================= */ .band{ background: var(--espresso); color: var(--text-on-dark); padding: 0 var(--pad); } .band__row{ max-width: var(--maxw); margin-inline:auto; list-style:none; display:flex; border-top:1px solid var(--hairline-dark); border-bottom:1px solid var(--hairline-dark); } .band__row li{ flex:1; padding: 30px 22px; text-align:center; } .band__row li + li{ border-left:1px solid var(--hairline-dark); } .band__row span{ display:block; font-family:var(--display); font-size: clamp(18px,1.7vw,23px); color: var(--porcelain); } .band__row em{ display:block; margin-top:6px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-style:normal; color: var(--gold); } /* ============================================================================= ABOUT (white) ============================================================================= */ .about{ background: var(--paper); } .about__grid{ display:grid; grid-template-columns: .92fr 1.08fr; gap: clamp(36px,5vw,72px); align-items:center; } .about__media{ height: clamp(460px, 64vh, 680px); } /* About page: single-column bio with a comfortable reading measure */ /* About page: closing personal-experience section (copy left, Softie & Parker right) */ .personal{ background:var(--paper); } .personal.section{ padding-top: clamp(28px,3.4vw,52px); } .personal__grid{ max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(36px,5vw,72px); align-items:center; } .personal__copy .btn{ margin-top:30px; } .personal__media{ margin:0; justify-self:end; width:min(100%, 440px); border:1px solid var(--hairline-gold); } .personal__media img{ display:block; width:100%; height:auto; } @media (max-width: 900px){ .personal__grid{ grid-template-columns:1fr; gap:36px; } .personal__media{ justify-self:start; width:min(100%,400px); } } .about__stats{ display:flex; gap: clamp(24px,4vw,48px); margin-top:34px; } .about__stats dt{ font-family:var(--display); font-size: clamp(26px,2.4vw,34px); color: var(--espresso); line-height:1; } .about__stats dd{ margin-top:6px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--text-on-light-2); } .about .btn--dark{ margin-top:36px; } /* ============================================================================= SERVICES - GABELN-STYLE TYPE INDEX (porcelain, black & white, type-led) ============================================================================= */ .services{ background: var(--porcelain); } .services__head{ margin:0 auto clamp(32px,4vw,48px); display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; } .services__intro{ max-width:34ch; font-size:15px; line-height:1.66; color: var(--text-on-light-2); } .index{ list-style:none; border-top:1px solid var(--hairline-light); } /* (legacy floating-preview rules removed - service index now uses the .srow Option-A interaction) */ /* ============================================================================= SMILE GALLERY (white) ============================================================================= */ .gallery{ background: var(--paper); } .gallery__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:28px; flex-wrap:wrap; margin-bottom: clamp(34px,4vw,52px); } .gallery__note{ max-width:32ch; font-size:12.5px; letter-spacing:.02em; color: var(--text-on-light-2); font-style:italic; } .gallery__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; } .tile{ position:relative; aspect-ratio: 1/1; cursor:pointer; transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .tile .ph__mat{ background: linear-gradient(160deg,#FBFCFB 0%, #E6ECE8 100%); } .tile .ph__motif{ width:38px; height:48px; opacity:.6; transition: transform .6s var(--ease), opacity .5s var(--ease); } .tile__cap{ position:absolute; left:18px; bottom:16px; right:18px; z-index:4; color: var(--graphite); } .tile__cap span{ display:block; font-family:var(--display); font-size:22px; } .tile__cap em{ font-style:normal; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color: var(--gold-deep); } .tile:is(:hover,:focus-visible,:active){ transform: translateY(-6px); box-shadow: 0 26px 56px rgba(13,13,12,.16); } .tile:is(:hover,:focus-visible,:active) .ph__motif{ transform: scale(1.08); opacity:.85; } /* ============================================================================= STORY - YOUR VISIT, MADE CALM (deep green, sticky on desktop) ============================================================================= */ .story{ background: var(--espresso); color: var(--text-on-dark); } .story__intro{ max-width:var(--maxw); margin:0 auto; padding: clamp(72px,9vw,120px) var(--pad) 0; } .story__pin{ position:relative; } .story.is-pinned .story__pin{ height: 300vh; } .story.is-pinned .story__sticky{ position: sticky; top: 0; min-height: 100vh; display:flex; align-items:center; } /* pinned content fills its width (panel is a flex child, so it must stretch) */ .story.is-pinned .story__panel{ width:100%; max-width:1440px; gap:clamp(40px,5vw,96px); } .story.is-pinned .story__copy{ min-height:280px; } .story.is-pinned .story__visuals{ height:clamp(360px,52vh,540px); } .story.is-pinned .story__index{ margin-bottom:48px; } .story.is-pinned .story__item h3{ font-size:clamp(30px,3.4vw,46px); } .story.is-pinned .story__item p{ font-size:17px; max-width:48ch; } .story:not(.is-pinned) .story__copy{ position:static; min-height:0; display:flex; flex-direction:column; gap:44px; } .story:not(.is-pinned) .story__item{ position:relative; opacity:1; transform:none; pointer-events:auto; } .story:not(.is-pinned) .story__index{ display:none; } .story:not(.is-pinned) .story__visuals{ display:none; } .story:not(.is-pinned) .story__panel{ grid-template-columns:1fr; } .story__panel{ width:100%; max-width:var(--maxw); margin-inline:auto; padding: clamp(40px,5vw,70px) var(--pad); display:grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,72px); align-items:center; } .story__index{ list-style:none; display:flex; gap:10px; margin-bottom:42px; } .story__index li{ display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.1em; color: rgba(245,244,239,.4); transition: color .5s var(--ease); } .story__index li::after{ content:""; width:30px; height:1px; background: rgba(245,244,239,.3); transition: background .5s var(--ease); } .story__index li:last-child::after{ display:none; } .story__index li.is-active{ color: var(--gold); } .story__index li.is-active::after{ background: var(--gold); } .story__copy{ position:relative; min-height: 240px; } .story__item{ position:absolute; inset:0; opacity:0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); pointer-events:none; } .story__item.is-active{ opacity:1; transform:none; pointer-events:auto; } .story__kicker{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color: var(--gold); } .story__item h3{ font-family:var(--display); font-weight:500; font-size: clamp(28px,3.4vw,44px); line-height:1.05; color: var(--text-on-dark); margin-top:14px; } .story__item p{ margin-top:18px; max-width:42ch; font-size:16px; line-height:1.7; color: var(--text-on-dark-2); } .story__visuals{ position:relative; height: clamp(360px,52vh, 520px); } .story__visual{ position:absolute; inset:0; opacity:0; transition: opacity .6s var(--ease); } .story__visual.is-active{ opacity:1; } .story__visual .ph{ position:absolute; inset:0; } /* ============================================================================= COMFORT CARE / THERAPY DOGS (white, dark framed photo placeholders) ============================================================================= */ .comfort{ background: var(--porcelain); } .comfort__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,72px); align-items:center; max-width:var(--maxw); margin-inline:auto; } .comfort__names{ display:flex; gap: clamp(28px,4vw,44px); margin-top:32px; } .comfort__names span{ display:block; font-family:var(--display); font-size: clamp(26px,2.4vw,32px); color: var(--espresso); } .comfort__names em{ display:block; margin-top:4px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-style:normal; color: var(--gold-deep); } .comfort .btn--dark{ margin-top:34px; } .comfort__media{ display:grid; gap:16px; } .comfort__hero{ height: clamp(300px,40vh,420px); } .comfort__pair{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .comfort__pair .ph{ height: clamp(220px,28vh,300px); } /* ============================================================================= QUOTE CARD (testimonial grids) + shared source note ============================================================================= */ .quote{ background: var(--porcelain); border:1px solid var(--hairline-light); border-radius:3px; padding: 34px 30px; display:flex; flex-direction:column; } .quote::before{ content:"\201C"; font-family:var(--display); font-size:34px; line-height:1; color: var(--gold-deep); display:block; margin-bottom:2px; } .quote blockquote{ margin-top:6px; font-family:var(--display); font-size:21px; line-height:1.4; color: var(--text-on-light); } .quote figcaption{ margin-top:auto; padding-top:26px; font-size:13px; font-weight:600; letter-spacing:.02em; color: var(--espresso); } .quote figcaption span{ display:block; margin-top:4px; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color: var(--text-on-light-2); } .reviews__src{ margin-top:24px; font-size:12.5px; color: var(--text-on-light-2); font-style:italic; } /* ============================================================================= VISIT / FINAL CTA (black lacquer) ============================================================================= */ .visit{ background: var(--black); color: var(--text-on-dark); padding: var(--space-cta) var(--pad); } .visit--compact{ padding: clamp(52px,6vw,84px) var(--pad); } .visit__inner{ max-width: 1000px; margin-inline:auto; text-align:center; } .visit__title{ margin-top:8px; } .visit .eyebrow{ justify-content:center; } .visit__cta{ margin-top:42px; display:flex; flex-wrap:wrap; gap:16px; justify-content:center; } .visit__details{ margin-top: clamp(48px,6vw,72px); display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:left; border-top:1px solid var(--hairline-dark); padding-top:40px; } .visit__details dt{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color: var(--gold); margin-bottom:12px; } .visit__details dd{ font-size:15.5px; line-height:1.7; color: var(--text-on-dark); } .visit__details a:hover{ color: var(--gold); } /* ============================================================================= FOOTER ============================================================================= */ .footer{ background: #1C1714; color: var(--text-on-dark-2); padding: clamp(56px,7vw,80px) var(--pad) 36px; border-top:1px solid var(--hairline-dark); } /* warm espresso, not pure black */ .footer__grid{ max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap:40px; } .footer__mark{ display:inline-block; } .footer__logo{ display:block; height:46px; width:auto; } .footer__brand p{ margin-top:26px; } .footer__brand p{ margin-top:16px; max-width:30ch; font-size:14px; line-height:1.7; } .footer__brand .link-call--light{ margin-top:16px; color: var(--porcelain); border-bottom:1px solid var(--hairline-gold); padding-bottom:2px; } /* h2, not h3: pages whose main content has no h2 would otherwise skip a level */ .footer__col h2{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color: var(--gold); font-weight:600; margin-bottom:18px; } .footer__col p{ font-size:15px; line-height:1.8; color:rgba(245,244,239,.88); } .footer__col a{ display:block; font-size:14.5px; padding:6px 0; color:rgba(245,244,239,.88); transition: color .3s var(--ease); } /* the .footer__col a rule above must not flatten the shared button: restore the btn--sm box */ .footer__col .btn{ display:inline-flex; width:auto; padding:12px 20px; } .footer__col a:hover{ color: var(--porcelain); } .footer__muted{ margin-top:14px; color: rgba(245,244,239,.82); } .footer__base{ max-width:var(--maxw); margin: 44px auto 0; padding-top:24px; border-top:1px solid var(--hairline-dark); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color: rgba(245,244,239,.6); } /* ============================================================================= CURTAIN (load reveal ≈ 600ms) ============================================================================= */ .curtain{ display:none; } .js-motion .curtain{ display:flex; position:fixed; inset:0; z-index:9999; background: var(--ink); align-items:center; justify-content:center; pointer-events:none; animation: curtainUp .5s var(--ease-curtain) .1s forwards; } .curtain__inner{ text-align:center; opacity:0; animation: fadeIn .35s ease .05s forwards; } .curtain__badge{ display:block; margin:0 auto 18px; width:60px; } .curtain__badge .mono{ width:60px; height:60px; margin:0 auto; } .curtain__mark{ display:block; font-family:var(--display); font-size:32px; font-weight:500; color: var(--porcelain); } .curtain__sub{ display:block; margin-top:10px; font-size:11px; letter-spacing:.34em; text-transform:uppercase; color: var(--gold); } @keyframes curtainUp{ to{ transform: translateY(-100%); } } @keyframes fadeIn{ to{ opacity:1; } } /* ============================================================================= MOTION - applied only when (no-JS = fully visible) ============================================================================= */ .js-motion{ scroll-behavior:smooth; } .js-motion .reveal{ opacity:0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .js-motion .reveal.in{ opacity:1; transform:none; } .js-motion .line{ transform: translateY(112%); transition: transform 1s var(--ease); } .js-motion .in .line{ transform:none; } .js-motion .line-mask:nth-child(1) .line{ transition-delay: 0s; } .js-motion .line-mask:nth-child(2) .line{ transition-delay: .08s; } .js-motion .line-mask:nth-child(3) .line{ transition-delay: .16s; } .js-motion .img-reveal .veil{ transform: translateY(0); } /* covers until revealed */ .js-motion .img-reveal.in .veil{ transform: translateY(-101%); transition: transform 1.05s var(--ease-curtain); } /* sweeps up to reveal */ /* Escape hatch: force final, visible state */ .motion-done .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } .motion-done .line{ transform:none !important; transition:none !important; } .motion-done .veil{ transform: translateY(-101%) !important; } /* ============================================================================= RESPONSIVE ============================================================================= */ /* the horizontal lockup needs more room than the old typed wordmark: descriptor and full-size logo from 1560px, hamburger replaces the full nav below 1400px */ @media (max-width: 1560px){ :root{ --header-h: 76px; } .wordmark__sub{ display:none; } .wordmark__logo{ height:34px; } .header__phone{ display:none; } /* phone leaves the top row first; it stays in the menu, CTA, content, and footer */ } /* the full nav row needs ~1400px of real width once the phone steps out (logo + 8 links + CTA); below that, switch straight to the compact menu rather than compressing link spacing or type */ @media (max-width: 1440px){ .nav{ display:none; } .hamburger{ display:flex; } } @media (max-width: 1040px){ /* hero/about/comfort stacking moved to <=900 (below) so landscape tablets keep two columns */ .story__panel{ grid-template-columns:1fr; } .index__row{ grid-template-columns: 52px 1fr; grid-auto-rows:auto; gap:6px 18px; } .index__desc{ grid-column: 2 / -1; max-width:60ch; } .index__arrow{ display:none; } .index__preview{ display:none; } } @media (max-width: 900px){ .hero__grid{ grid-template-columns:1fr; gap:32px; } .hero__media{ order:-1; height: clamp(300px, 46vh, 440px); } .about__grid{ grid-template-columns:1fr; } .about__media{ height: clamp(340px,46vh,460px); order:-1; } .comfort__grid{ grid-template-columns:1fr; } } @media (max-width: 720px){ body{ font-size:16px; } .hero__title{ line-height: 1.06; font-size: clamp(1.5rem, 7.5vw, 3.5rem); } /* sized so the longest line ("Beverly Hills dentistry") fits down to 320px */ .header__actions .btn{ display:none; } /* sticky bottom bar already offers Call + Request here, keep the header to wordmark + menu */ .wordmark__logo{ height:30px; } .display{ line-height:1.06; } .band__row{ flex-direction:column; } .band__row li + li{ border-left:none; border-top:1px solid var(--hairline-dark); } .gallery__grid{ grid-template-columns: 1fr 1fr; gap:12px; } .visit__details{ grid-template-columns:1fr; text-align:center; } .footer__grid{ grid-template-columns: 1fr 1fr; gap:32px; } .about__stats{ flex-wrap:wrap; gap:20px 32px; } } @media (max-width: 440px){ .gallery__grid{ grid-template-columns: 1fr; } .footer__grid{ grid-template-columns: 1fr; } .hero__cta .btn{ width:100%; } } /* ============================================================================= REDUCED MOTION - everything visible, no pin/parallax/curtain ============================================================================= */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto !important; } .js-motion .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } .js-motion .line{ transform:none !important; transition:none !important; } .js-motion .img-reveal .veil{ transform: translateY(-101%) !important; transition:none !important; } .curtain{ display:none !important; } .tile, .btn, .index__row, .srow__name, .srow__desc, .srow__link, .srow::after{ transition:none !important; } .btn:hover{ transform:none !important; } .tcard, .tcard__arrow, .tcard__media .ph__motif, .gmode, .gmode::after, .filter, .tstudy, .tstudy__panel{ transition:none !important; } .process__step, .process__step-view, .process__step-viewicon, .pmodal, .pmodal__panel{ transition:none !important; } .baflip__inner{ transition:none !important; } /* flip is instant under reduced motion */ .menu, .menu.open{ transition:none !important; } /* overlay menu opens/closes instantly */ .marquee__track{ animation:none !important; transform:none !important; } .pagewipe{ display:none !important; } *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; } } /* ============================================================================= MULTI-PAGE EXPANSION - new components ============================================================================= */ /* ---- adaptive header: pages whose top section is dark/green get light header text ---- */ body.topdark .header:not(.scrolled) .nav__item > a, body.topdark .header:not(.scrolled) .header__phone{ color: var(--porcelain); } body.topdark .header:not(.scrolled) .wordmark__sub{ color: rgba(245,244,239,.6); } body.topdark .header:not(.scrolled) .hamburger span{ background: var(--porcelain); } body.topdark .header:not(.scrolled) .header__phone{ border-bottom-color: var(--hairline-gold); } /* ---- services dropdown ---- */ .nav__item{ position:relative; display:flex; align-items:center; } .nav__caret{ font-size:9px; margin-left:5px; opacity:.6; } .nav__menu{ position:absolute; top:100%; left:50%; transform:translate(-50%,8px); min-width:250px; padding:10px; background:var(--paper); border:1px solid var(--hairline-light); border-top:2px solid var(--gold); border-radius:3px; box-shadow:0 24px 60px rgba(13,13,12,.16); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease); z-index:50; } /* invisible hover bridge: lets the cursor travel from the link down into the menu without the gap closing it */ .nav__menu::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; } .nav__item--has-menu:hover .nav__menu, .nav__item--has-menu:focus-within .nav__menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,4px); } .nav__menu a{ display:block; padding:9px 14px; font-size:13.5px; color:var(--text-on-light-2); border-radius:2px; white-space:nowrap; transition:background .2s, color .2s; } .nav__menu a:hover{ background:rgba(200,164,93,.12); color:var(--ink); } .nav__menu-all{ color:var(--gold-ink) !important; font-weight:600; border-bottom:1px solid var(--hairline-light); margin-bottom:6px; border-radius:2px; } .nav__menu--grouped{ min-width:284px; } .nav__menu-group + .nav__menu-group{ margin-top:4px; border-top:1px solid var(--hairline-light); padding-top:8px; } .nav__menu-heading{ padding:6px 14px 2px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); } /* ---- mobile services accordion (in overlay menu) ---- */ .maccordion{ } .maccordion__btn{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; background:none; border:none; cursor:pointer; padding:6px 0; text-align:left; font-family:var(--display); font-size:clamp(34px,9vw,46px); font-weight:500; color:var(--porcelain); } .maccordion__btn span{ font-family:var(--sans); font-size:26px; color:var(--gold); } .maccordion__panel{ display:flex; flex-direction:column; gap:2px; padding:6px 0 10px 4px; } .maccordion__panel[hidden]{ display:none; } /* respect the collapsed state (display:flex was overriding [hidden]) */ .maccordion__panel a{ font-size:17px; color:var(--text-on-dark-2); letter-spacing:.02em; padding:11px 0; } /* >=44px touch target */ .maccordion__panel a:hover{ color:var(--gold); } .maccordion__heading{ margin-top:10px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); } /* ---- sticky mobile CTA bar ---- */ .mobilebar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:850; background:rgba(8,8,7,.97); border-top:1px solid var(--hairline-gold); padding:10px 14px; gap:10px; } .mobilebar a{ flex:1; text-align:center; padding:14px 10px; border-radius:2px; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; } .mobilebar__call{ background:transparent; color:var(--porcelain); border:1px solid rgba(245,244,239,.4); } .mobilebar__req{ background:var(--gold); color:var(--ink); } /* ---- breadcrumbs ---- */ .breadcrumbs{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:22px; color:inherit; opacity:.8; } .breadcrumbs a{ color:inherit; border-bottom:1px solid transparent; } .breadcrumbs a:hover{ border-bottom-color:var(--gold); } .breadcrumbs .crumb-sep{ opacity:.5; } .breadcrumbs span[aria-current]{ color:var(--gold); } /* ---- sub-page hero ---- */ .phero{ padding: calc(var(--header-h) + clamp(46px,7vw,90px)) var(--pad) clamp(32px,3.6vw,50px); } .phero--compact{ padding: calc(var(--header-h) + clamp(32px,5vw,64px)) var(--pad) clamp(22px,2.8vw,40px); } /* tighten the gap between any sub-page hero and the first content section below it */ .phero + section{ padding-top: clamp(44px,5vw,72px); } .faq.section{ padding-bottom: clamp(40px,4.8vw,70px); } .faq .display{ font-size: clamp(1.8rem,3.95vw,3.25rem); } .phero--green{ background:var(--espresso); color:var(--text-on-dark); } .phero--dark{ background:var(--black); color:var(--text-on-dark); } .phero--light{ background:var(--porcelain); color:var(--text-on-light); } .phero__inner{ max-width:var(--maxw); margin-inline:auto; } .phero__title{ font-size:clamp(2.4rem,5.2vw,4.4rem); margin-top:6px; } .phero__lede{ margin-top:22px; max-width:60ch; font-size:clamp(16px,1.2vw,18.5px); line-height:1.6; } .phero__lede.lede--light, .phero--green .phero__lede, .phero--dark .phero__lede{ color:var(--text-on-dark-2); } .phero__cta{ margin-top:32px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; } /* split hero (About page): copy left, portrait right; stacks below 900px */ .phero--split .phero__inner{ display:grid; grid-template-columns:1.08fr .92fr; gap: clamp(36px,5vw,72px); align-items:center; } .phero--split .phero__title{ font-size: clamp(2rem, 3.4vw, 3.2rem); } .phero__portrait{ margin:0; justify-self:end; width:min(100%, 430px); aspect-ratio:4 / 5; overflow:hidden; border:1px solid var(--hairline-gold); } .phero__portrait img{ width:100%; height:100%; object-fit:cover; object-position:50% 12%; display:block; } /* services hero while its 4:5 patient photo is pending: single readable column, no empty frame. When the photo arrives: drop .phero--noimg and add
. */ .phero--noimg{ border-bottom:1px solid var(--hairline-light); } .phero--noimg .phero__inner{ display:block; } .phero--noimg .phero__copy{ max-width:760px; } /* text-led service hero (e.g. full-mouth rehabilitation): keep the H1 on one line, moderately wider copy column, ~12% less vertical padding than the standard phero */ .phero--svc{ padding: calc(var(--header-h) + clamp(38px,5.8vw,74px)) var(--pad) clamp(28px,3.1vw,44px); } .phero--svc .phero__title{ font-size: clamp(2.3rem, 4.6vw, 3.9rem); } .phero--svc .phero__copy{ max-width:860px; } /* full-mouth rehab page: concise editorial sections */ .section--tight{ padding: clamp(40px,4.8vw,68px) var(--pad); } .section--tight.tight-b{ padding-bottom: clamp(28px,3.5vw,52px); } .section--tight.tight-t{ padding-top: clamp(28px,3.5vw,52px); } .svcsec .display{ font-size: clamp(1.9rem, 4vw, 3.3rem); } .svcsec{ max-width:var(--maxw); margin-inline:auto; } .svcsec--grid{ display:grid; grid-template-columns:.45fr .55fr; gap:clamp(30px,4vw,60px); align-items:start; } .svcsec .lede{ color:#49524B; max-width:60ch; } .svcsec__pull{ margin-top:24px; padding-left:18px; border-left:2px solid var(--gold); font-family:var(--display); font-style:italic; font-size:clamp(17px,1.4vw,20px); line-height:1.5; color:var(--espresso); max-width:46ch; } .svc__list--cols{ display:grid; grid-template-columns:1fr 1fr; gap:12px 48px; max-width:1000px; } /* linked list items match unlinked text at rest; hover/focus reveals a gold treatment (color is not the only focus signal - the global :focus-visible outline still applies) */ .svc__list a, .svc__list a:visited{ color:inherit; border-bottom:1px solid transparent; transition:color .3s var(--ease), border-color .3s var(--ease); } .svc__list a:hover, .svc__list a:focus-visible{ color:var(--gold-ink); border-bottom-color:var(--gold); } /* set-apart explainer paragraph (e.g. veneers-vs-crowns note) */ .svcsec__aside{ margin-top:26px; padding-top:18px; border-top:1px solid var(--hairline-gold); max-width:66ch; } /* designed editorial media placeholder: warm panel + inset hairline; swap the inner span for when the real photograph arrives (object-fit cover) */ .epl{ position:relative; background:rgba(200,164,93,.07); } .epl__inner{ position:absolute; inset:10px; border:1px solid var(--hairline-gold); display:flex; align-items:flex-end; padding:14px; } .epl--plan .epl__inner{ align-items:flex-start; justify-content:flex-end; } .epl__label{ font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-ink); opacity:.75; } .epl__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .whypro__fig{ margin:0; justify-self:end; width:min(100%, 400px); aspect-ratio:4 / 5; border:1px solid var(--hairline-gold); } @media (max-width:900px){ .whypro__fig{ justify-self:start; width:min(100%,360px); } } /* hero brand line (serif italic accent under the H1) */ .phero__brandline{ margin-top:16px; font-family:var(--display); font-style:italic; font-size:clamp(18px,1.6vw,22px); color:var(--gold-deep); } /* restrained uppercase text link */ .tlink{ display:inline-block; margin-top:20px; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); border-bottom:1px solid var(--hairline-gold); padding-bottom:3px; transition:color .3s var(--ease), border-color .3s var(--ease); } .tlink:hover, .tlink:focus-visible{ color:var(--ink); border-bottom-color:var(--gold); } /* four-part analysis grid */ .quad{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,36px); margin-top:38px; } .quad__item{ border-top:1px solid var(--hairline-gold); padding-top:16px; } .quad__item h3{ font-family:var(--display); font-weight:500; font-size:clamp(19px,1.6vw,22px); color:var(--text-on-light); } .quad__item p{ margin-top:8px; font-size:16px; line-height:1.62; color:#49524B; } /* three treatment pathways */ .paths{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px); margin-top:38px; } .paths__item{ border-top:1px solid var(--hairline-gold); padding-top:18px; } .paths__item h3{ font-family:var(--display); font-weight:500; font-size:clamp(22px,1.9vw,27px); color:var(--text-on-light); } .paths__item p{ margin-top:10px; font-size:16px; line-height:1.65; color:#49524B; } /* short qualifying note under a grid */ .finenote{ margin-top:28px; font-size:14px; line-height:1.65; color:var(--text-on-light-2); max-width:70ch; } /* copy-left / media-right split that keeps media from crowding on stack */ .svcsec--grid-rev{ align-items:center; } @media (max-width:1100px){ .quad{ grid-template-columns:1fr 1fr; } } @media (max-width:900px){ .paths{ grid-template-columns:1fr; } } @media (max-width:640px){ .quad{ grid-template-columns:1fr; } } .journey{ list-style:none; margin-top:34px; display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,44px) clamp(28px,3.5vw,52px); } .journey__item{ border-top:1px solid var(--hairline-gold); padding-top:18px; } .journey__num{ font-size:12px; letter-spacing:.16em; color:var(--gold-ink); } .journey__title{ margin-top:8px; font-family:var(--display); font-weight:500; font-size:clamp(20px,1.8vw,24px); color:var(--text-on-light); } .journey__item p{ margin-top:8px; font-size:16px; line-height:1.65; color:#49524B; max-width:46ch; } /* odd-count journeys: let the final stage span the full row so it reads as intentional */ .journey > li:nth-child(odd):last-child{ grid-column:1 / -1; } .journey > li:nth-child(odd):last-child p{ max-width:62ch; } /* --center-last variant (About): final stage keeps one column's width, centered under the pairs */ .journey--center-last > li:nth-child(odd):last-child{ width:100%; max-width:calc((100% - clamp(28px,3.5vw,52px)) / 2); justify-self:center; } .journey--center-last > li:nth-child(odd):last-child p{ max-width:46ch; } .svcband{ background:rgba(200,164,93,.05); } .relcard--compact{ padding:22px 22px; } .relcard--compact .relcard__name{ margin-top:0; font-size:24px; } .relcard--compact .relcard__arrow{ margin-top:10px; color:var(--gold-ink); } .related + .faq{ padding-top: clamp(24px,2.9vw,44px); } @media (max-width:900px){ .svcsec--grid{ grid-template-columns:1fr; gap:20px; } } @media (max-width:720px){ .svc__list--cols{ grid-template-columns:1fr; } .journey{ grid-template-columns:1fr; } .journey--center-last > li:nth-child(odd):last-child{ max-width:none; justify-self:stretch; } } .phero--split .phero__cta{ margin-top:26px; } .phero--light .phero__lede{ color:var(--text-on-light); } @media (max-width: 900px){ .phero--split .phero__inner{ grid-template-columns:1fr; gap:36px; } .phero__portrait{ justify-self:start; width:min(100%,380px); } } @media (max-width: 440px){ .phero--split .phero__title{ font-size: clamp(1.6rem, 7vw, 2rem); } } /* ============================================================================= HOMEPAGE REFINEMENT (2026-07): compact credential strip, four-stage planning row, portrait media, single testimonial, labelled 3:2 dog slot. ============================================================================= */ /* quiet credentials strip: small uppercase sans, fine muted-gold dividers. Equal grid cells with vertically centered text: four columns on wide desktop, a balanced 2x2 from 1080px down (matches the service-grid breakpoint; below ~1081px four cells can no longer hold each credential to two comfortable lines), and a single stack below 430px where two columns would crowd the longest words (PROSTHODONTIST). */ .band__row--compact{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); } .band__row--compact li{ display:flex; align-items:center; justify-content:center; padding:24px 24px; } .band__row--compact li + li{ border-left:1px solid var(--hairline-gold); } .band__row--compact span{ font-family:var(--sans); font-size:clamp(10.5px,0.85vw,12px); font-weight:600; letter-spacing:.18em; line-height:1.55; text-transform:uppercase; color:rgba(245,244,239,.85); text-wrap:balance; } @media (max-width:1080px){ .band__row--compact{ grid-template-columns:repeat(2,minmax(0,1fr)); } .band__row--compact li{ padding:18px 16px; } .band__row--compact li + li{ border-left:none; border-top:none; } .band__row--compact li:nth-child(even){ border-left:1px solid var(--hairline-gold); } .band__row--compact li:nth-child(n+3){ border-top:1px solid var(--hairline-gold); } } @media (max-width:430px){ .band__row--compact{ grid-template-columns:minmax(0,1fr); } .band__row--compact li{ padding:13px 14px; } .band__row--compact li:nth-child(even){ border-left:none; } .band__row--compact li + li{ border-top:1px solid var(--hairline-gold); } } .paths--four{ grid-template-columns:repeat(4,1fr); } @media (max-width:1000px){ .paths--four{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .paths--four{ grid-template-columns:1fr; } } /* labelled photo slots get their intended quiet-ivory mat + gold hairline */ .imgslot{ background:var(--porcelain); border:1px solid var(--hairline-gold); } /* homepage Softie & Parker photograph: 16:9 source shown in the section's 3:2 editorial frame (center crop trims spare background only; no dog is cut); the photo takes slightly more width than the copy and the copy sits a touch above center, toward the dogs' faces */ #comfort .svcsec--grid{ grid-template-columns:.52fr .48fr; } #comfort .svcsec--grid > div{ margin-bottom:clamp(10px,1.6vw,28px); } @media (max-width:900px){ #comfort .svcsec--grid{ grid-template-columns:1fr; } /* must repeat: the ID selector above out-specifies the generic mobile rule */ #comfort .svcsec--grid > div{ margin-bottom:0; } } .dogph{ margin:0; } .dogph__img{ display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; object-position:50% 50%; } .about__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 15%; display:block; } @media (max-width:880px){ .about__media img{ object-position:50% 6%; } } .services__all{ max-width:var(--maxw); margin-inline:auto; } .htesti{ max-width:var(--maxw-narrow); margin-inline:auto; text-align:center; } .htesti__quote{ margin-top:18px; font-family:var(--display); font-weight:500; font-size:clamp(22px,2.3vw,30px); line-height:1.42; color:var(--text-on-light); } .htesti__attr{ margin-top:14px; font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--espresso); } .htesti__attr span{ display:block; margin-top:4px; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-on-light-2); } .htesti .display{ margin-top:6px; font-size:clamp(1.8rem,3.2vw,2.8rem); } .htesti__quote{ margin-top:22px; } .htesti__rule{ display:block; width:54px; height:1px; background:var(--gold); opacity:.6; margin:20px auto 0; } .htesti__ratings{ margin-top:26px; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--text-on-light-2); } .htesti__ratings a{ color:var(--gold-ink); border-bottom:1px solid var(--hairline-gold); padding-bottom:2px; transition:color .3s var(--ease), border-color .3s var(--ease); } .htesti__ratings a:hover, .htesti__ratings a:focus-visible{ color:var(--ink); border-bottom-color:var(--gold); } /* homepage "featured by" row (comfort section) */ .homepress{ margin-top:34px; padding-top:24px; border-top:1px solid var(--hairline-light); } .homepress__label{ font-size:10.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--text-on-light-2); } .homepress__row{ margin-top:16px; display:flex; align-items:center; column-gap:28px; row-gap:14px; flex-wrap:wrap; } .homepress .plogo{ mix-blend-mode:multiply; filter:grayscale(1); opacity:.6; transition:opacity .3s var(--ease); } .homepress__row:hover .plogo, .homepress__row:focus-visible .plogo{ opacity:1; } .homepress .plogo--lamag{ height:19px; width:auto; } .homepress .plogo--inside-edition{ height:24px; width:auto; } .homepress .plogo--spectrum{ height:19px; width:auto; } .homepress .plogo--cbsla{ height:16px; width:auto; } /* four principal service cards (reuses .relcard) */ .pgrid{ max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .pgrid .relcard{ display:flex; flex-direction:column; } .pgrid .relcard__name{ margin-top:0; font-size:clamp(21px,1.8vw,24px); line-height:1.18; } .pgrid .relcard__tag{ margin-top:10px; font-size:14px; line-height:1.55; } .pgrid .relcard__arrow{ margin-top:auto; padding-top:16px; } @media (max-width:1080px){ .pgrid{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .pgrid{ grid-template-columns:1fr; } } /* quiet secondary services row */ .alsox{ max-width:var(--maxw); margin:32px auto 0; text-align:center; } .alsox__label{ font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-ink); } .alsox__links{ margin-top:12px; font-size:15px; line-height:2; color:var(--text-on-light-2); } .alsox__links a{ color:var(--text-on-light); border-bottom:1px solid var(--hairline-gold); padding-bottom:2px; transition:color .3s var(--ease), border-color .3s var(--ease); } .alsox__links a:hover, .alsox__links a:focus-visible{ color:var(--gold-ink); border-color:var(--gold); } .alsox__dot{ margin:0 14px; color:var(--gold); } /* specialist section: reserved vertical 4:5 portrait area (no layout shift) */ .spec-media{ height:auto; aspect-ratio:4 / 5; max-width:540px; } @media (max-width:880px){ .spec-media{ aspect-ratio:auto; height:clamp(320px,42vh,420px); max-width:none; } } /* final invitation: quiet phone text link */ .visit__phone{ margin-top:4px; } /* simplified footer */ .footer__grid--simple{ grid-template-columns:1.6fr 1fr 1fr; gap:48px; } .footer__col a.footer__visit{ margin-top:14px; border-bottom:1px solid var(--hairline-gold); display:inline-block; width:fit-content; padding:2px 0 3px; } /* ============================================================================= SMILE GALLERY (editorial case gallery: index cards, case pages, lightbox) ============================================================================= */ /* fixed-ratio side-by-side comparison; labels always visible */ .gpair{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .gpair__half{ position:relative; display:block; aspect-ratio:1 / 1; overflow:hidden; border:1px solid var(--hairline-light); background:var(--porcelain); } .gpair__half img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .gpair__tag{ position:absolute; left:10px; bottom:10px; padding:5px 10px; background:rgba(13,13,12,.62); color:var(--porcelain); font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; border-radius:2px; } .gpair--lead{ max-width:980px; margin-inline:auto; gap:12px; } /* per-case contain variant (emitted via pairFit:"contain"): whole photograph always visible - letterboxed on warm espresso instead of cropped */ .gpair__half--contain{ background:#1C1714; } .gpair__half--contain img{ object-fit:contain; } @media (max-width:420px){ .gpair{ grid-template-columns:1fr; } /* keep the desktop square ratio: 4/3 cropped the top and bottom off portrait clinical photos. Cases that set an inline aspect-ratio still override this. */ .gpair__half{ aspect-ratio:1 / 1; } } /* index: one card per case, two columns on desktop */ .gcase-grid{ max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,3.4vw,48px) clamp(24px,3vw,40px); } @media (max-width:860px){ .gcase-grid{ grid-template-columns:1fr; } } .gcase__link{ display:block; } .gcase__meta{ display:block; padding:18px 2px 0; } .gcase__cat{ display:block; font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink); } .gcase__title{ display:block; margin-top:8px; font-family:var(--display); font-weight:500; font-size:clamp(21px,1.9vw,26px); line-height:1.2; color:var(--text-on-light); transition:color .3s var(--ease); } .gcase__summary{ display:block; margin-top:8px; font-size:15.5px; line-height:1.6; color:#49524B; max-width:56ch; } .gcase__view{ display:inline-block; margin-top:12px; font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); border-bottom:1px solid var(--hairline-gold); padding-bottom:3px; transition:color .3s var(--ease), border-color .3s var(--ease); } .gcase__link:is(:hover,:focus-visible) .gcase__title{ color:var(--gold-ink); } .gcase__link:is(:hover,:focus-visible) .gcase__view{ color:var(--ink); border-bottom-color:var(--gold); } /* index + case-page disclaimer */ .gdisclaimer{ max-width:var(--maxw); margin:clamp(36px,4vw,54px) auto 0; padding-top:20px; border-top:1px solid var(--hairline-light); font-size:13.5px; line-height:1.6; color:var(--text-on-light-2); } .gdisclaimer--case{ margin:0; padding:22px var(--pad) 26px; background:rgba(200,164,93,.04); border-top:none; } .gdisclaimer--case{ text-align:center; } /* case page */ .gback{ margin-bottom:22px; } .gback .tlink{ margin-top:0; } .gcase-h1{ font-size:clamp(2rem,3.6vw,3.2rem); } .gtx .svc__list{ margin-top:6px; } .gtx__list{ max-width:760px; } .gstage-grid{ margin-top:clamp(34px,3.4vw,46px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,3.4vw,44px) clamp(26px,3vw,40px); align-items:start; } @media (max-width:760px){ .gstage-grid{ grid-template-columns:1fr; } } .gstage{ margin:0; } .gstage__btn{ display:block; width:100%; padding:0; border:1px solid var(--hairline-light); background:var(--porcelain); cursor:zoom-in; } .gstage__btn img{ display:block; width:100%; height:auto; } .gstage__btn--frame{ background:#1C1714; } .gstage__btn--frame img{ width:100%; height:100%; object-fit:contain; } /* fixed-ratio frame filled edge-to-edge (matched pairs, e.g. Case 6): both photographs share identical frame dimensions, cover-cropped, no bars */ .gstage__btn--cover{ overflow:hidden; } .gstage__btn--cover img{ width:100%; height:100%; object-fit:cover; } .gstage__cap{ margin-top:10px; font-size:14px; line-height:1.55; color:#49524B; } .gstage__label{ display:inline-block; margin-right:10px; font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); } .gmore{ margin-top:26px; } .gmore__btn{ background:none; border:none; border-bottom:1px solid var(--hairline-gold); cursor:pointer; } /* treatment-journey case layout: headed stages with 1-3 photo rows */ .gjstep__title{ font-size:clamp(1.6rem,2.6vw,2.4rem); } .gjstep__copy{ margin-top:12px; max-width:62ch; } .gjstep--tint{ background:rgba(200,164,93,.05); } .gjstep .gstage-grid{ margin-top:clamp(24px,2.6vw,34px); } .gstage-grid--1{ grid-template-columns:1fr; max-width:820px; } .gstage-grid--3{ grid-template-columns:repeat(3,1fr); } @media (max-width:760px){ .gstage-grid--3{ grid-template-columns:1fr; } } /* previous / next case */ .gcasenav{ border-top:1px solid var(--hairline-light); padding:clamp(26px,2.6vw,36px) var(--pad); } .gcasenav__inner{ max-width:var(--maxw); margin-inline:auto; display:flex; justify-content:space-between; gap:24px; } .gcasenav__link{ display:block; max-width:46%; } .gcasenav__link--next{ text-align:right; margin-left:auto; } .gcasenav__dir{ display:block; font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); } .gcasenav__title{ display:block; margin-top:6px; font-family:var(--display); font-weight:500; font-size:clamp(16px,1.5vw,20px); line-height:1.3; color:var(--text-on-light); transition:color .3s var(--ease); } .gcasenav__link:is(:hover,:focus-visible) .gcasenav__title{ color:var(--gold-ink); } /* lightbox */ .lbox{ position:fixed; inset:0; z-index:1400; } .lbox__backdrop{ position:absolute; inset:0; background:rgba(13,13,12,.86); } .lbox__panel{ position:relative; z-index:1; height:100%; display:flex; align-items:center; justify-content:center; gap:14px; padding:clamp(14px,3vw,40px); } .lbox__fig{ margin:0; max-width:min(1100px,86vw); max-height:100%; display:flex; flex-direction:column; } .lbox__fig img{ max-width:100%; max-height:calc(100vh - 140px); width:auto; height:auto; object-fit:contain; border:1px solid rgba(245,244,239,.16); } .lbox__fig figcaption{ margin-top:12px; font-size:13.5px; line-height:1.5; color:rgba(245,244,239,.88); } .lbox__fig figcaption strong{ font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-right:8px; } .lbox__count{ margin-left:10px; color:rgba(245,244,239,.55); } .lbox__close{ position:absolute; top:16px; right:18px; z-index:2; width:44px; height:44px; background:none; border:1px solid rgba(245,244,239,.4); border-radius:2px; color:var(--porcelain); font-size:22px; line-height:1; cursor:pointer; } .lbox__nav{ flex:0 0 auto; width:44px; height:44px; background:none; border:1px solid rgba(245,244,239,.4); border-radius:2px; color:var(--porcelain); font-size:16px; cursor:pointer; } .lbox__nav:disabled{ opacity:.3; cursor:default; } .lbox__close:is(:hover,:focus-visible), .lbox__nav:not(:disabled):is(:hover,:focus-visible){ border-color:var(--gold); color:var(--gold); } .lbox__close:focus-visible, .lbox__nav:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; } @media (max-width:640px){ .lbox__panel{ flex-wrap:wrap; align-content:center; } .lbox__fig{ order:-1; flex-basis:100%; } .lbox__fig img{ max-height:calc(100vh - 180px); } } /* compact quiet page ending (endNote component) */ .endnote{ padding:clamp(46px,4.6vw,66px) var(--pad); border-top:1px solid var(--hairline-light); background:rgba(200,164,93,.04); } .endnote__inner{ max-width:var(--maxw); margin-inline:auto; } .endnote__title{ font-family:var(--display); font-weight:500; font-size:clamp(22px,2.2vw,28px); line-height:1.25; color:var(--text-on-light); } .endnote__copy{ margin-top:10px; font-size:16px; line-height:1.65; color:#49524B; max-width:62ch; } .endnote__action{ margin-top:4px; } @media (max-width:720px){ .footer__grid--simple{ grid-template-columns:1fr 1fr; } } @media (max-width:440px){ .footer__grid--simple{ grid-template-columns:1fr; } } .footer__brand .footer__descriptor{ margin-top:16px; max-width:none; font-size:10px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:rgba(245,244,239,.66); } .footer__col p a{ display:inline; padding:0; } .footer__tel{ color:var(--porcelain); border-bottom:1px solid var(--hairline-gold); padding-bottom:1px; } /* services index: signature care rows (tagline + copy + explore link) */ .sigrow__tag{ display:block; padding-left:88px; margin-top:12px; font-family:var(--display); font-style:italic; font-size:clamp(17px,1.5vw,21px); line-height:1.35; color:var(--gold-ink); } .sigrow .srow__desc{ margin-top:8px; } .sigrow__cta{ display:inline-block; margin:16px 0 6px 88px; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); border-bottom:1px solid var(--hairline-gold); padding-bottom:3px; transition:color .3s var(--ease), border-color .3s var(--ease); } .srow:is(:hover,:focus-within) .sigrow__cta{ color:var(--ink); border-bottom-color:var(--gold); } .sigrow--lead .srow__name{ font-size:clamp(30px,4vw,54px); } @media (max-width:720px){ .sigrow__tag{ padding-left:0; } .sigrow__cta{ margin-left:0; } } /* services index: quieter supporting care + phero text link alignment */ .phero__cta .tlink{ margin-top:0; } .supgrid{ margin-top:clamp(24px,2.4vw,34px); } @media (min-width:1000px){ .paths--quad.supgrid{ grid-template-columns:1fr 1fr 1fr; column-gap:clamp(42px,4vw,58px); } } /* between the quad's 700px stack point and the 3-across desktop, the three cards sit 2+1: center the stranded third card at one column's width */ @media (max-width:999px) and (min-width:701px){ .paths--quad.supgrid > .paths__item:nth-child(3){ grid-column:1 / -1; width:100%; max-width:calc((100% - clamp(58px,5vw,72px)) / 2); justify-self:center; } } .supgrid .paths__item h3{ font-size:clamp(19px,1.7vw,23px); } .supgrid .paths__item p{ font-size:14.5px; max-width:52ch; } .supgrid .tlink{ margin-top:16px; } /* veneers: quiet alignment-first subsection + two-paragraph section head */ .alignnote{ margin-top:clamp(34px,3.4vw,48px); border-top:1px solid var(--hairline-gold); padding-top:clamp(24px,2.4vw,32px); } /* About page: hero identification, credential proof band, philosophy quote */ .phero__ident{ margin-top:20px; font-family:var(--sans); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-on-light-2); } .phero__ident strong{ display:block; margin-top:4px; font-size:13.5px; font-weight:700; color:var(--espresso); letter-spacing:.16em; } .aboutproof{ border-top:1px solid var(--hairline-light); border-bottom:1px solid var(--hairline-light); padding:clamp(26px,2.6vw,38px) var(--pad); } .aboutproof__grid{ list-style:none; max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:16px clamp(28px,3vw,48px); } .aboutproof__grid li{ display:flex; align-items:flex-start; gap:12px; font-size:14.5px; line-height:1.5; color:var(--text-on-light); } .aboutproof__grid .why__tick{ margin-top:6px; } @media (max-width:900px){ .aboutproof__grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .aboutproof__grid{ grid-template-columns:1fr; gap:12px; } } .aboutquote{ margin:0; } .aboutquote p{ font-family:var(--display); font-style:italic; font-size:clamp(20px,1.9vw,25px); line-height:1.5; color:var(--espresso); max-width:34ch; } .aboutquote cite{ display:block; margin-top:16px; font-family:var(--sans); font-style:normal; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); } /* Testimonials page: wider editorial quote + full-width expressive voice */ .aboutquote--wide{ margin-top:clamp(20px,2vw,28px); } .aboutquote--wide p{ max-width:44ch; } /* About: In Her Words — generous section breathing room; the quote, attribution, and principles share one stack and one measure */ .vstate.philsec{ padding-block:var(--space-section-generous); } .philstack{ max-width:740px; } .philstack .aboutquote p{ max-width:none; } .philstack .aboutquote cite{ margin-top:24px; } .philstack .svc__list--cols{ margin-top:42px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px clamp(48px,4vw,64px); max-width:none; align-items:start; } @media (max-width:900px){ .philsec .svcsec--grid{ row-gap:48px; } } @media (max-width:720px){ .philstack .svc__list--cols{ grid-template-columns:1fr; gap:24px; } } .tsec__wide{ max-width:var(--maxw); margin:clamp(38px,3.6vw,52px) auto 0; border-top:1px solid var(--hairline-gold); padding-top:clamp(26px,2.6vw,36px); } /* TMJ page: simplified anatomical line illustration (educational, static) */ .tmjanat{ background:var(--porcelain); border:1px solid var(--hairline-light); border-radius:3px; padding:clamp(16px,1.8vw,26px); margin:0; } .tmjanat__media{ position:relative; } .tmjanat__media img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; border-radius:2px; } .tmjanat__lines{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; } .tmjanat__lines line{ stroke:var(--gold-deep); stroke-width:3; opacity:.55; } .tmjanat__lines circle{ fill:var(--gold-deep); opacity:.85; } .tmjanat__tag{ position:absolute; transform:translate(-50%,-50%); font-size:12.5px; font-weight:600; letter-spacing:.05em; color:var(--espresso); white-space:nowrap; } .tmjanat__legend{ display:none; list-style:none; } .tmjanat__cap{ margin-top:12px; font-size:13px; font-style:italic; line-height:1.5; color:var(--text-on-light-2); } @media (max-width:700px){ .tmjanat__lines, .tmjanat__tag{ display:none; } .tmjanat__legend{ display:grid; grid-template-columns:1fr 1fr; gap:9px 18px; margin:14px 2px 0; padding:0; } .tmjanat__legend li{ position:relative; padding-left:15px; font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--espresso); } .tmjanat__legend li::before{ content:""; position:absolute; left:0; top:5px; width:6px; height:6px; border-radius:50%; background:var(--gold-deep); } } .alignnote .candid__title{ margin-bottom:0; } .alignnote .lede{ margin-top:14px; max-width:66ch; } .vporc .dprocess__head{ align-items:start; } /* three related cards keep one balanced row until they stack on mobile */ .related__grid.related__grid--3{ grid-template-columns:repeat(3,1fr); } @media (max-width:900px){ .related__grid.related__grid--3{ grid-template-columns:1fr; } } /* consultation request page: compact light introduction (the H1 is the former form heading); the form below is the page's primary element */ .consintro{ background:var(--porcelain); padding: calc(var(--header-h) + clamp(44px,4.6vw,68px)) var(--pad) clamp(40px,4.2vw,60px); border-bottom:1px solid var(--hairline-light); } .consintro__inner{ max-width:var(--maxw); margin-inline:auto; } .consintro__title{ max-width:680px; font-size:clamp(2.2rem,4.2vw,3.6rem); margin-top:6px; } .consintro__lede{ margin-top:clamp(22px,2.2vw,28px); max-width:640px; font-size:clamp(16px,1.2vw,18px); line-height:1.6; color:var(--text-on-light-2); } .consintro__call{ margin-top:clamp(16px,1.8vw,22px); font-size:15.5px; color:var(--text-on-light); } .consintro__call a{ color:var(--gold-ink); border-bottom:1px solid var(--hairline-gold); padding-bottom:2px; transition:color .3s var(--ease), border-color .3s var(--ease); } .consintro__call a:is(:hover,:focus-visible){ color:var(--espresso); border-color:var(--gold); } /* tighter transitions: intro -> form -> FAQ -> footer (page-scoped) */ body:has(.consintro) .apptsec.section{ padding-top: clamp(34px,3.6vw,52px); } body:has(.consintro) .faq.section{ padding-top: clamp(42px,4.6vw,66px); padding-bottom: clamp(48px,5.2vw,76px); } /* services index: ongoing care line for established patients */ .ongoing{ border-top:1px solid var(--hairline-gold); padding-top:clamp(28px,3vw,40px); } .ongoing__title{ font-family:var(--display); font-weight:500; font-size:clamp(21px,2vw,26px); color:var(--text-on-light); } .ongoing__copy{ margin-top:10px; font-size:15px; line-height:1.6; color:#49524B; max-width:60ch; } .ongoing__line{ margin-top:16px; font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); line-height:2; } .ongoing__dot{ margin:0 10px; color:var(--gold); } /* Smile Design hero: editorial two-column split, copy left (~46%), large photo right (~54%) in the site's hairline-gold frame. Tablet keeps both columns with a tighter gap; below 700px the copy stacks first, photo under it at 4:5. */ .phero--photo .phero__inner{ display:grid; grid-template-columns:46fr 54fr; column-gap:clamp(30px,4.5vw,64px); align-items:center; } .phero--photo .phero__copy{ max-width:600px; } .phero--photo .phero__figure{ margin:0; height:clamp(520px,72vh,740px); overflow:hidden; border:1px solid var(--hairline-gold); } .phero--photo .phero__photo{ width:100%; height:100%; object-fit:cover; object-position:55% 43%; display:block; } @media (max-width:900px){ .phero--photo .phero__inner{ column-gap:clamp(22px,3.2vw,36px); } .phero--photo .phero__figure{ height:clamp(380px,50vh,520px); } .phero--photo .phero__photo{ object-position:56% 43%; } } @media (max-width:700px){ .phero--photo .phero__inner{ display:block; } .phero--photo .phero__figure{ height:auto; margin-top:36px; } .phero--photo .phero__photo{ aspect-ratio:4 / 5; height:auto; object-position:55% 40%; } } /* ---- trust row ---- */ .trustrow{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:30px; } .trustrow li{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-on-light-2); border:1px solid var(--hairline-light); border-radius:999px; padding:8px 16px; } .phero--green .trustrow li, .phero--dark .trustrow li{ color:var(--text-on-dark-2); border-color:var(--hairline-dark); } .trustrow li::before{ content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--gold); margin-right:9px; vertical-align:middle; } /* ---- gold tick marker (shared by credential/proof lists) ---- */ .why__tick{ flex:0 0 auto; width:9px; height:9px; margin-top:7px; border:1px solid var(--gold); transform:rotate(45deg); } /* ---- service index, Option A (expand + gold hairline, NO floating box) ---- */ .srow{ position:relative; border-bottom:1px solid var(--hairline-light); } .srow__link{ display:block; padding: clamp(15px,1.9vw,24px) 8px; transition:background-color .35s var(--ease); } .srow:is(:hover,:focus-within) .srow__link{ background-color:rgba(200,164,93,.05); } .srow__top{ display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:24px; } .srow__num{ font-size:12px; letter-spacing:.16em; color:var(--gold-deep); } .srow__name{ font-family:var(--display); font-size:clamp(26px,3.4vw,46px); font-weight:500; color:var(--text-on-light); line-height:1.04; transition:color .4s var(--ease), transform .5s var(--ease); } .srow__arrow{ font-size:22px; color:rgba(13,13,12,.6); transition:color .4s var(--ease), transform .4s var(--ease); } .srow__desc{ display:block; padding-left:88px; max-width:60ch; color:var(--text-on-light-2); font-size:15.5px; line-height:1.6; max-height:0; opacity:0; overflow:hidden; transition:max-height .5s var(--ease), opacity .5s var(--ease), margin-top .5s var(--ease); } .srow::after{ content:""; position:absolute; left:8px; right:8px; bottom:-1px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); } .srow:is(:hover,:focus-within,:active) .srow__name{ color:var(--gold-ink); transform:translateX(6px); } .srow:is(:hover,:focus-within,:active) .srow__arrow{ color:var(--gold-ink); transform:translate(4px,-4px); } .srow:is(:hover,:focus-within,:active) .srow__desc{ max-height:120px; opacity:1; margin-top:14px; } .srow:is(:hover,:focus-within,:active)::after{ transform:scaleX(1); } /* ---- services overview: goal-based groups ---- */ .svcgroup{ max-width:var(--maxw); margin-inline:auto; } .svcgroup + .svcgroup{ margin-top:clamp(38px,4.8vw,68px); } .svcgroup__heading{ font-family:var(--display); font-weight:500; font-size:clamp(24px,2.55vw,33px); line-height:1.1; letter-spacing:.005em; text-transform:none; color:var(--gold-ink); padding:0 8px 18px; } .index--grouped .srow__desc{ max-height:none; opacity:1; margin-top:14px; color:#49524B; } .index--grouped .srow::after{ content:none; } /* the full-width gold hover line is too loud on the grouped list */ /* comprehensive-care supporting band: quieter than a service category */ .svcgroup--support{ margin-top:clamp(34px,4.2vw,56px); } .svcgroup--support .svcgroup__note{ max-width:74ch; color:#49524B; } .svcgroup__note{ font-family:var(--sans); font-size:clamp(16px,1.3vw,18px); line-height:1.75; color:var(--text-on-light-2); max-width:66ch; padding:0 8px; } /* ---- service page ---- */ .svc__grid{ max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1.4fr .9fr; gap:clamp(36px,5vw,72px); align-items:start; } .svc__list{ list-style:none; margin-top:18px; display:grid; gap:12px; } /* explanation prose is uniform across the service page: the "Who it's for" list and the process steps below match the body .lede exactly (the serif lead + serif sub-heads stay distinct) */ .svc__list li{ position:relative; padding-left:26px; font-size:clamp(16px,1.15vw,17.5px); line-height:1.72; color:var(--text-on-light-2); } .svc__list li::before{ content:""; position:absolute; left:0; top:9px; width:8px; height:8px; border:1px solid var(--gold); transform:rotate(45deg); } .svc__aside{ position:sticky; top:calc(var(--header-h) + 20px); display:grid; gap:20px; } .svc__aside .ph{ height:clamp(300px,40vh,420px); } .svc__card{ background:var(--porcelain); border:1px solid var(--hairline-light); border-top:2px solid var(--gold); border-radius:3px; padding:28px 26px; } .svc__card h2{ font-family:var(--display); font-size:24px; color:var(--espresso); } .svc__card p{ margin:12px 0 18px; font-size:16px; line-height:1.65; color:var(--text-on-light-2); } /* ---- service page: premium callout card ---- */ .svc__callout{ margin-top:clamp(34px,4vw,50px); background:var(--paper); color:var(--text-on-light); border:1px solid var(--hairline-light); border-top:2px solid var(--gold); border-radius:3px; box-shadow:0 18px 50px rgba(13,13,12,.08); padding:clamp(28px,4vw,46px); } .svc__callout-eyebrow{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); } .svc__callout-title{ font-family:var(--display); font-weight:500; font-size:clamp(26px,3vw,36px); line-height:1.15; color:var(--text-on-light); margin-top:12px; } .svc__callout p:not(.svc__callout-eyebrow){ margin-top:18px; font-size:16px; line-height:1.7; color:var(--text-on-light-2); } /* ---- service page: smile design process (editorial, no numbers) ---- */ .process__inner{ max-width:860px; margin-inline:auto; } .process .process__inner{ max-width:var(--maxw); } /* the Smile Design Process breaks wider for its step grid */ .process__subtitle{ font-family:var(--display); font-style:italic; font-size:clamp(19px,2.2vw,26px); line-height:1.4; color:var(--text-on-light-2); margin-top:16px; max-width:46ch; } /* the 5 steps are equal-height clickable cards (grid stretch lines the top 3 up on one row); each opens a labelled placeholder illustration of that step. */ .process__steps{ margin-top:clamp(36px,4.5vw,60px); display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(20px,2.4vw,30px); counter-reset:pstep; align-items:stretch; } .process__step{ counter-increment:pstep; grid-column:span 2; position:relative; display:flex; flex-direction:column; text-align:left; background:var(--paper); border:1px solid var(--hairline-light); border-top:2px solid var(--gold); border-radius:3px; padding:clamp(22px,2.2vw,28px) clamp(22px,2vw,26px); cursor:pointer; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s; } .process__step:is(:hover,:focus-visible){ transform:translateY(-5px); box-shadow:0 22px 48px rgba(13,13,12,.12); border-color:var(--hairline-gold); } .process__step:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; } .process__step:nth-child(4){ grid-column:2 / span 2; } /* bottom row of five: center the last two */ .process__step:nth-child(5){ grid-column:4 / span 2; } .process__step::before{ content:"0" counter(pstep); display:block; font-family:var(--display); font-size:clamp(20px,1.9vw,26px); color:var(--gold-deep); line-height:1; margin-bottom:10px; } .process__step-title{ font-family:var(--display); font-weight:500; font-size:clamp(20px,2.1vw,26px); color:var(--text-on-light); } .process__step p{ margin-top:12px; font-size:clamp(15.5px,1.05vw,16.5px); line-height:1.68; color:var(--text-on-light-2); } .process__step p + p{ margin-top:12px; } /* uniform preview: clamp every card's text to the same height with a soft fade so the cards line up as equal blocks; the full authored step copy is preserved and shown in the illustration modal. */ .process__step-body{ position:relative; max-height:9.4em; overflow:hidden; } .process__step-body::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2.6em; background:linear-gradient(to bottom, rgba(255,255,255,0), var(--paper)); pointer-events:none; } .process__step-view{ margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--espresso); transition:color .3s var(--ease); } .process__step-viewicon{ color:var(--gold-deep); transition:transform .4s var(--ease); } .process__step:is(:hover,:focus-visible) .process__step-view{ color:var(--gold-ink); } .process__step:is(:hover,:focus-visible) .process__step-viewicon{ transform:translate(3px,-3px); } @media (max-width:900px){ .process__steps{ grid-template-columns:repeat(2,1fr); } .process__step, .process__step:nth-child(4), .process__step:nth-child(5){ grid-column:auto; } } @media (max-width:560px){ .process__steps{ grid-template-columns:1fr; } } /* smile-design step illustration modal */ .pmodal{ position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:18px; opacity:0; pointer-events:none; transition:opacity .35s var(--ease); } /* click-transparent unless open, even mid-fade */ .pmodal[hidden]{ display:none; } /* display:flex would override [hidden] */ .pmodal.is-open{ opacity:1; pointer-events:auto; } .pmodal__overlay{ position:absolute; inset:0; background:rgba(5,5,5,.82); } .pmodal__panel{ position:relative; z-index:2; width:min(94vw,640px); max-height:calc(100vh - 36px); overflow-y:auto; background:var(--porcelain); border:1px solid var(--hairline-gold); border-radius:3px; padding:clamp(22px,3.5vw,38px); transform:scale(.97); transition:transform .35s var(--ease); } .pmodal.is-open .pmodal__panel{ transform:scale(1); } .pmodal__close{ position:absolute; top:10px; right:10px; z-index:3; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:none; border:none; color:var(--text-on-light-2); font-size:30px; line-height:1; cursor:pointer; transition:color .3s; } .pmodal__close:hover{ color:var(--ink); } .pmodal__eyebrow{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-ink); font-weight:600; } .pmodal__title{ font-family:var(--display); font-weight:500; font-size:clamp(24px,3vw,32px); line-height:1.15; color:var(--text-on-light); margin:8px 0 18px; } .pmodal__img{ aspect-ratio:16 / 10; border-radius:2px; } .pmodal__img .ph__mat{ background:linear-gradient(160deg,#FBFCFB 0%, #E6ECE8 100%); } .pmodal__body{ margin-top:18px; } .pmodal__body p{ font-size:14.5px; line-height:1.65; color:var(--text-on-light-2); } .pmodal__body p + p{ margin-top:12px; } .pmodal__note{ margin-top:14px; font-size:12px; font-style:italic; color:var(--text-on-light-2); } @media (max-width:560px){ .pmodal{ padding:10px; } } /* ---- dentofacial harmony page ---- */ .phero__sub{ margin-top:14px; font-size:clamp(15px,1.7vw,19px); line-height:1.55; max-width:56ch; opacity:.9; } .harmony-cards{ max-width:var(--maxw); margin:clamp(32px,4vw,52px) auto 0; display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(18px,2vw,26px); } .harmony-card{ grid-column:span 2; background:var(--porcelain); border:1px solid var(--hairline-light); border-top:2px solid var(--gold); border-radius:3px; padding:clamp(22px,2.4vw,30px); } .harmony-card:nth-child(4){ grid-column:2 / span 2; } /* center the last two of five */ .harmony-card:nth-child(5){ grid-column:4 / span 2; } @media (max-width:900px){ .harmony-cards{ grid-template-columns:repeat(2,1fr); } .harmony-card, .harmony-card:nth-child(4), .harmony-card:nth-child(5){ grid-column:auto; } } @media (max-width:560px){ .harmony-cards{ grid-template-columns:1fr; } } .harmony-card__title{ font-family:var(--display); font-weight:500; font-size:clamp(20px,2vw,26px); color:var(--espresso); } .harmony-card p{ margin-top:12px; font-size:15px; line-height:1.65; color:var(--text-on-light-2); } .harmony-note{ margin-top:24px; font-style:italic; color:var(--text-on-light-2); } /* dentofacial: "Treatments offered" + "Why Dr. Shay" paired side by side to remove the tall stack of empty vertical space; each column is left-aligned and stacks on narrow screens */ .dfpair{ max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,96px); align-items:start; } .dfpair .display{ font-size:clamp(25px,2.8vw,34px); margin-top:6px; } .dfpair .lede{ margin-top:16px; } .dfpair .svc__list{ margin-top:20px; } .dfpair .harmony-note{ margin-top:22px; } @media (max-width:820px){ .dfpair{ grid-template-columns:1fr; gap:clamp(40px,8vw,56px); } } /* centered prose sections (e.g. Therapy Dogs intro / recognition / by-request) */ .process__inner--center{ text-align:center; } .process__inner--center .eyebrow{ justify-content:center; } .process__inner--center .lede{ margin-inline:auto; max-width:64ch; } /* centered prose list (e.g. "Treatments offered"): centre the block AND each item, with the diamond marker inline before the text so it doesn't anchor the list to the left */ .process__inner--center .svc__list{ max-width:54ch; margin-inline:auto; justify-items:center; } .process__inner--center .svc__list li{ padding-left:0; text-align:center; } .process__inner--center .svc__list li::before{ position:static; display:inline-block; margin-right:10px; left:auto; top:auto; vertical-align:middle; } .process__inner--center .harmony-note{ margin-inline:auto; } .sec__cta{ margin-top:30px; display:flex; justify-content:center; align-items:center; gap:18px; flex-wrap:wrap; } /* consecutive centered prose sections shouldn't double up their padding */ .section:has(.process__inner--center) + .section:has(.process__inner--center){ padding-top: clamp(10px,2vw,34px); } /* service body: one uniform type system across labelled sections. The eyebrow labels ("Our Approach" / "What it is" / "Who it's for") mark each section; there is no distinct serif lead, so the opening paragraph reads exactly like the rest of the explanation. */ .svc__body .eyebrow{ margin-top:clamp(40px,5vw,60px); margin-bottom:14px; } .svc__body .eyebrow:first-child{ margin-top:0; } .svc__body .eyebrow + .lede{ margin-top:0; } .svc__body .eyebrow + .svc__list{ margin-top:4px; } .visit__copy{ max-width:60ch; margin:18px auto 0; color:var(--text-on-dark-2); font-size:clamp(15px,1.7vw,18px); line-height:1.7; } /* ---- dentofacial harmony: why a prosthodontist (two-column) ---- */ .whypros{ background:var(--porcelain); } .whypros__grid{ max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:55fr 45fr; gap:clamp(36px,5vw,72px); align-items:center; } .whypros__media{ aspect-ratio:4 / 5; } .cred-stat{ display:flex; align-items:center; gap:16px; margin:6px 0; } .cred-stat__num{ font-family:var(--display); font-weight:500; font-size:clamp(44px,5vw,64px); line-height:1; color:var(--gold-deep); } .cred-stat__label{ font-size:12.5px; letter-spacing:.05em; line-height:1.4; text-transform:uppercase; color:var(--text-on-light-2); } .cred-chip{ display:inline-flex; align-items:center; gap:12px; margin-top:26px; padding:9px 18px; border:1px solid var(--hairline-gold); border-radius:999px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); } .cred-chip__rule{ display:inline-block; width:18px; height:1px; background:var(--gold); } @media (max-width:880px){ .whypros__grid{ grid-template-columns:1fr; } .whypros__media{ max-width:380px; margin-inline:auto; } } /* ---- related services ---- */ .related{ background:var(--porcelain); } .related__inner{ max-width:var(--maxw); margin-inline:auto; } .related__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px; } .related__grid--4{ grid-template-columns:repeat(4,1fr); } .relcard{ display:block; padding:26px 24px; background:var(--paper); border:1px solid var(--hairline-light); border-radius:3px; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; } .relcard:hover{ transform:translateY(-5px); box-shadow:0 22px 48px rgba(13,13,12,.12); border-color:var(--hairline-gold); } .relcard__num{ font-size:11px; letter-spacing:.16em; color:var(--gold-deep); } .relcard__name{ display:block; margin-top:10px; font-family:var(--display); font-size:26px; color:var(--text-on-light); } .relcard__tag{ display:block; margin-top:8px; font-size:13.5px; line-height:1.5; color:var(--text-on-light-2); } .relcard__arrow{ display:inline-block; margin-top:14px; color:var(--gold-deep); } /* ---- transformation gallery: dual-mode filters + case cards + study dialog ---- */ .filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; max-width:var(--maxw); margin-inline:auto; } .filter{ background:none; border:1px solid var(--hairline-light); border-radius:999px; padding:9px 18px; cursor:pointer; font-size:12px; letter-spacing:.06em; color:var(--text-on-light-2); transition:all .3s var(--ease); } .filter:hover{ border-color:var(--gold); color:var(--ink); } .filter.is-active{ background:var(--espresso); border-color:var(--espresso); color:var(--porcelain); } .tile.is-hidden, .tcard.is-hidden{ display:none; } /* browse-mode toggle (Browse by Treatment / Browse by Smile Concern) */ .gmodes{ display:flex; flex-wrap:wrap; gap:0; margin:0 auto 22px; max-width:var(--maxw); border-bottom:1px solid var(--hairline-light); } .gmode{ background:none; border:none; cursor:pointer; padding:14px 22px 16px; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--text-on-light-2); position:relative; transition:color .3s var(--ease); } .gmode::after{ content:""; position:absolute; left:22px; right:22px; bottom:-1px; height:2px; background:var(--gold); transform:scaleX(0); transition:transform .35s var(--ease); } .gmode:hover{ color:var(--ink); } .gmode.is-active{ color:var(--espresso); } .gmode.is-active::after{ transform:scaleX(1); } /* mobile: clean two-up segmented control instead of wrapping to two rows */ @media (max-width:480px){ .gmodes{ flex-wrap:nowrap; } .gmode{ flex:1 1 0; min-width:0; padding:13px 4px 15px; font-size:11px; letter-spacing:.06em; text-align:center; justify-content:center; } .gmode::after{ left:4px; right:4px; } } .gchips[hidden]{ display:none; } /* .filters sets display:flex, which would override [hidden] */ /* after-first editorial case cards */ .tgallery__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,30px); max-width:var(--maxw); margin-inline:auto; } .tgallery__grid[data-empty]{ position:relative; min-height:120px; } .tgallery__grid[data-empty]::after{ content:"No cases in this view yet. Additional case examples may be reviewed privately during consultation."; display:block; grid-column:1 / -1; text-align:center; padding:48px 16px; color:var(--text-on-light-2); font-style:italic; font-size:15px; } .tcard{ background:var(--paper); border:1px solid var(--hairline-light); border-radius:3px; overflow:hidden; cursor:pointer; display:flex; flex-direction:column; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s; } .tcard:is(:hover,:focus-within){ transform:translateY(-5px); box-shadow:0 24px 52px rgba(13,13,12,.13); border-color:var(--hairline-gold); } .tcard__media{ position:relative; aspect-ratio:4 / 3; } .tcard__media .ph__mat{ background:linear-gradient(160deg,#FBFCFB 0%, #E6ECE8 100%); } .tcard__media .ph__motif{ width:38px; height:48px; opacity:.55; transition:transform .6s var(--ease), opacity .5s var(--ease); } .tcard:is(:hover,:focus-within) .tcard__media .ph__motif{ transform:scale(1.08); opacity:.8; } .tcard__body{ padding:22px 24px 24px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; } .tcard__treatment{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); font-weight:600; } .tcard__title{ font-family:var(--display); font-weight:500; font-size:clamp(21px,1.8vw,25px); line-height:1.18; color:var(--text-on-light); } .tcard__concern{ font-size:13.5px; line-height:1.5; color:var(--text-on-light-2); } .tcard__cta{ margin-top:12px; padding:0; background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--espresso); transition:color .3s var(--ease); } .tcard__cta:hover{ color:var(--gold-ink); } .tcard__arrow{ color:var(--gold-deep); transition:transform .4s var(--ease); } .tcard:is(:hover,:focus-within) .tcard__arrow{ transform:translate(3px,-3px); } .gallery__cta{ margin-top:clamp(40px,5vw,60px); display:flex; justify-content:center; align-items:center; gap:16px; flex-wrap:wrap; max-width:var(--maxw); margin-inline:auto; } /* transformation study dialog */ .tstudy{ position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:18px; opacity:0; pointer-events:none; transition:opacity .35s var(--ease); } /* click-transparent unless open: no invisible click shield, even mid-fade */ .tstudy[hidden]{ display:none; } /* display:flex would override [hidden]: without this, the invisible overlay swallows every click on the page */ .tstudy.is-open{ opacity:1; pointer-events:auto; } .tstudy__overlay{ position:absolute; inset:0; background:rgba(5,5,5,.82); } .tstudy__panel{ position:relative; z-index:2; width:min(94vw,680px); max-height:calc(100vh - 36px); overflow-y:auto; background:var(--porcelain); border:1px solid var(--hairline-gold); border-radius:3px; padding:clamp(22px,3.5vw,38px); transform:scale(.97); transition:transform .35s var(--ease); } .tstudy.is-open .tstudy__panel{ transform:scale(1); } .tstudy__close{ position:absolute; top:10px; right:10px; z-index:3; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:none; border:none; color:var(--text-on-light-2); font-size:30px; line-height:1; cursor:pointer; transition:color .3s; } .tstudy__close:hover{ color:var(--ink); } .tstudy__eyebrow{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-ink); font-weight:600; } .tstudy__title{ font-family:var(--display); font-weight:500; font-size:clamp(24px,3vw,32px); line-height:1.15; color:var(--text-on-light); margin:8px 0 18px; } .tstudy__meta{ display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; margin-top:20px; } .tstudy__meta dt{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); font-weight:600; } .tstudy__meta dd{ margin-top:4px; font-size:14.5px; line-height:1.5; color:var(--text-on-light); } .tstudy__what{ margin-top:18px; padding-top:16px; border-top:1px solid var(--hairline-light); } .tstudy__what h4{ font-family:var(--display); font-weight:500; font-size:19px; color:var(--text-on-light); } .tstudy__what p{ margin-top:6px; font-size:14.5px; line-height:1.65; color:var(--text-on-light-2); } .tstudy__privacy{ margin-top:14px; font-size:12px; font-style:italic; line-height:1.5; color:var(--text-on-light-2); } .tstudy__cta{ margin-top:20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; } /* before/after slider: the AFTER image is the base; the BEFORE layer is clipped to --pos. The invisible range input covers the image, so drag, touch, and arrow keys all work natively. */ /* before/after flip card: after on the front, tap flips to the before (no slider) */ .baflip{ perspective:1400px; } .baflip__inner{ position:relative; display:block; width:100%; aspect-ratio:16 / 10; padding:0; border:none; background:none; cursor:pointer; transform-style:preserve-3d; transition:transform .6s var(--ease); } .baflip[data-face="before"] .baflip__inner{ transform:rotateY(180deg); } .baflip__inner:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; } .baflip__face{ position:absolute; inset:0; border-radius:2px; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; } .baflip__face .ph__mat{ position:absolute; inset:0; } .baflip__face--before{ transform:rotateY(180deg); } .baflip__hint{ display:block; text-align:center; margin-top:12px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); } /* ---- testimonial marquee ---- */ .marquee-sec{ background:var(--porcelain); overflow:hidden; padding-bottom:clamp(48px,5vw,72px); } .marquee-sec__head{ max-width:var(--maxw); margin:0 auto clamp(34px,4vw,48px); display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; } .marquee-sec__actions{ display:flex; align-items:center; gap:16px; } .marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .marquee__track{ display:flex; gap:20px; width:max-content; animation:scrollx 60s linear infinite; } .marquee:hover .marquee__track, .marquee:focus-within .marquee__track, .marquee.is-paused .marquee__track{ animation-play-state:paused; } .qcard{ flex:0 0 380px; max-width:380px; background:var(--paper); border:1px solid var(--hairline-light); border-radius:3px; padding:32px 30px; display:flex; flex-direction:column; } .qcard::before{ content:"\201C"; font-family:var(--display); font-size:52px; line-height:.6; color:var(--gold); } .qcard blockquote{ margin-top:8px; font-family:var(--display); font-size:20px; line-height:1.4; color:var(--text-on-light); } .qcard figcaption{ margin-top:auto; padding-top:22px; font-size:13px; font-weight:600; color:var(--espresso); } .qcard figcaption span{ display:block; margin-top:3px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-on-light-2); font-weight:600; } .marquee__toggle{ width:42px; height:42px; border-radius:50%; border:1px solid var(--hairline-light); background:var(--paper); cursor:pointer; position:relative; } .marquee__toggle .mq-ico{ position:absolute; inset:0; margin:auto; width:0; height:0; } .marquee__toggle[aria-pressed="false"] .mq-ico{ width:8px; height:12px; border-left:3px solid var(--espresso); border-right:3px solid var(--espresso); } /* pause bars */ .marquee__toggle[aria-pressed="true"] .mq-ico{ border-left:11px solid var(--espresso); border-top:7px solid transparent; border-bottom:7px solid transparent; } /* play triangle */ @keyframes scrollx{ to{ transform:translateX(-50%); } } /* ---- FAQ ---- */ .faq{ background:var(--porcelain); } .faq__inner{ max-width:var(--maxw-reading); margin-inline:auto; } .faq__list{ margin-top:36px; border-top:1px solid rgba(13,13,12,.18); } .faq__item{ border-bottom:1px solid rgba(13,13,12,.18); } .faq__q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; text-align:left; background:none; border:none; cursor:pointer; padding:24px 4px; font-family:var(--display); font-size:clamp(19px,2vw,24px); color:var(--text-on-light); } .faq__icon{ flex:0 0 auto; position:relative; width:16px; height:16px; } .faq__icon::before, .faq__icon::after{ content:""; position:absolute; background:var(--gold-deep); transition:transform .3s var(--ease); } .faq__icon::before{ left:0; top:7px; width:16px; height:2px; } .faq__icon::after{ left:7px; top:0; width:2px; height:16px; } .faq__q[aria-expanded="true"] .faq__icon::after{ transform:rotate(90deg); opacity:0; } .faq__a{ padding:0 4px 24px; } .faq__a p{ font-size:16px; line-height:1.7; color:var(--text-on-light-2); } .faq__a p + p{ margin-top:14px; } /* ---- visit info (editorial columns: thin gold rules, no cards) ---- */ .vinfo__grid{ max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px); } .vinfo__item{ border-top:1px solid var(--hairline-gold); padding-top:18px; } .vinfo__label{ font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:13px; } .vinfo__item p{ font-size:16px; line-height:1.7; color:var(--text-on-light); } .vinfo__phone{ color:var(--text-on-light); border-bottom:1px solid var(--hairline-gold); padding-bottom:2px; transition:color .3s var(--ease), border-color .3s var(--ease); } .vinfo__phone:is(:hover,:focus-visible){ color:var(--gold-ink); border-color:var(--gold); } .vinfo__item .vinfo__note{ margin-top:10px; font-size:14.5px; line-height:1.65; color:#49524B; max-width:40ch; } .vinfo__actions{ display:flex; flex-wrap:wrap; align-items:center; column-gap:30px; } .vinfo__actions .tlink{ margin-top:12px; padding-top:8px; padding-bottom:6px; } @media (max-width:960px){ .vinfo__grid{ grid-template-columns:1fr; gap:28px; } } .visitinfo__map{ position:relative; max-width:var(--maxw); margin:clamp(36px,3.6vw,48px) auto 0; height:clamp(300px,45vh,440px); overflow:hidden; border-radius:3px; border:1px solid var(--hairline-gold); } .visitinfo__map iframe{ width:100%; height:100%; border:0; display:block; } .visitinfo__map-link{ position:absolute; right:16px; bottom:16px; z-index:6; background:var(--ink); color:var(--porcelain); padding:12px 18px; border-radius:2px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--hairline-gold); transition:background .3s var(--ease); } .visitinfo__map-link:hover{ background:var(--espresso); } /* ---- parking & arrival (concierge two-column: intro + guidance left, stacked options right) ---- */ .parkguide{ margin-top:30px; padding-top:24px; border-top:1px solid var(--hairline-gold); display:grid; gap:20px; max-width:48ch; } .parkguide dt{ font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); } .parkguide dd{ margin-top:7px; font-size:15px; line-height:1.6; color:#49524B; } .parkopts{ list-style:none; } .parkopt{ padding:30px 0; } .parkopt:first-child{ padding-top:0; } .parkopt:last-child{ padding-bottom:0; } .parkopt + .parkopt{ border-top:1px solid var(--hairline-gold); } .parkopt__label{ font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); } .parkopt__name{ margin-top:12px; font-family:var(--display); font-weight:500; font-size:clamp(19px,1.6vw,23px); color:var(--text-on-light); } .parkopt__addr{ margin-top:8px; font-size:15.5px; line-height:1.6; color:var(--text-on-light); } .parkopt__copy{ margin-top:12px; font-size:15.5px; line-height:1.65; color:#49524B; max-width:60ch; } .parkopt__links{ display:flex; flex-wrap:wrap; align-items:center; column-gap:32px; } .parkopt__links .tlink{ margin-top:18px; padding-top:6px; } .parkopt .finenote{ margin-top:18px; font-size:13.5px; } @media (max-width:900px){ .parkguide{ max-width:none; } } /* ---- policies / legal page ---- */ .legal-sec{ background:var(--paper); } .legal{ max-width:1040px; margin-inline:auto; } .legal h2{ font-family:var(--display); font-weight:500; font-size:clamp(26px,3vw,38px); color:var(--text-on-light); margin-top:clamp(40px,5vw,60px); } .legal h2:first-child{ margin-top:0; } .legal h3{ font-family:var(--display); font-weight:600; font-size:clamp(20px,1.9vw,24px); color:var(--text-on-light); margin-top:clamp(34px,3.8vw,46px); } .legal p{ font-size:18px; line-height:1.95; color:var(--text-on-light-2); margin-top:26px; } .legal p strong{ color:var(--text-on-light); font-weight:600; } .legal a{ color:var(--gold-ink); border-bottom:1px solid var(--hairline-gold); } .legal__updated{ margin-top:clamp(40px,5vw,56px); padding-top:24px; border-top:1px solid var(--hairline-light); font-size:13px; font-style:italic; } .legal h2[id]{ scroll-margin-top: calc(var(--header-h) + 24px); } /* legal lists (accessibility statement, HIPAA notice) */ .legal ul{ list-style:disc; margin-top:22px; padding-left:1.2em; } .legal li{ font-size:18px; line-height:1.95; color:var(--text-on-light-2); margin-top:14px; } .legal li::marker{ color:var(--gold); } .legal h3[id]{ scroll-margin-top: calc(var(--header-h) + 24px); } .legal__action{ margin-top:clamp(26px,3vw,34px); } /* .legal a sets a gold link colour; a button inside must keep its own dark foreground, or gold-on-gold text drops to 2.3:1 */ .legal__action .btn{ margin:0; color:var(--btn-fg); border-bottom:0; } /* footer policy links */ .footer__legal{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; } /* padding widens the tap area of these short links without moving them visually */ .footer__legal a{ color:inherit; transition:color .3s var(--ease); display:inline-block; padding:7px 0; } .footer__legal a:hover{ color:var(--porcelain); } /* request-page policy card link */ /* ---- press page ---- */ /* press page styles live in the PRESS PAGE block at the end of this file */ /* ---- request appointment ---- */ .apptsec__grid{ max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1.5fr .8fr; gap:clamp(36px,5vw,64px); align-items:start; } .apptform{ margin-top:30px; } .apptform__row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } .field{ display:flex; flex-direction:column; margin-bottom:20px; } .field label{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-on-light-2); margin-bottom:8px; font-weight:600; } /* no opacity here: fading this text dropped it to 3:1 against the form panel */ .field__opt{ text-transform:none; letter-spacing:0; font-weight:400; color:var(--text-on-light-2); } .field input, .field select, .field textarea{ font-family:var(--sans); font-size:16px; padding:14px 16px; border:1px solid var(--field-border); border-radius:2px; background:var(--paper); color:var(--ink); transition:border-color .25s; } .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); outline:2px solid var(--espresso); outline-offset:1px; } .field input:disabled, .field select:disabled, .field textarea:disabled{ background:var(--mist); color:var(--text-on-light-2); } .field input:-webkit-autofill, .field input:-webkit-autofill:focus{ -webkit-box-shadow:0 0 0 1000px var(--paper) inset; -webkit-text-fill-color:var(--ink); } .apptform__privacy{ font-size:13px; color:var(--text-on-light-2); margin:6px 0 24px; line-height:1.5; } .apptform__privacy a{ border-bottom:1px solid var(--hairline-gold); } /* form instructions, error summary and per-field errors. Every error is stated in words; colour and the rule are only reinforcement, so the meaning survives for colour-blind and monochrome readers. */ .apptform__instruct{ font-size:13px; color:var(--text-on-light-2); margin:0 0 22px; line-height:1.5; } .apptform__errsum{ margin:0 0 26px; padding:20px 22px; background:var(--paper); border:1px solid var(--error); border-left:3px solid var(--error); border-radius:2px; } .apptform__errsum:focus-visible{ outline:2px solid var(--espresso); outline-offset:2px; } .apptform__errsum-title{ font-family:var(--sans); font-size:14px; font-weight:600; color:var(--error); margin:0 0 10px; line-height:1.45; } .apptform__errsum-list{ margin:0; padding-left:1.15em; list-style:disc; } .apptform__errsum-list li{ font-size:14px; line-height:1.6; margin-top:6px; color:var(--text-on-light); } .apptform__errsum-list li::marker{ color:var(--error); } .apptform__errsum-list a{ color:var(--error); border-bottom:1px solid currentColor; } .field__err{ margin-top:8px; font-size:13px; line-height:1.5; font-weight:600; color:var(--error); } .field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:var(--error); border-width:2px; } .apptform__confirm{ margin-top:24px; background:var(--espresso); color:var(--text-on-dark); border-radius:3px; padding:34px 30px; border:1px solid var(--hairline-gold); } .apptform__confirm h2{ font-family:var(--display); font-size:26px; color:var(--porcelain); margin-bottom:10px; } .apptform__confirm p{ font-size:15px; line-height:1.6; color:var(--text-on-dark-2); } .apptform__confirm p a{ color:var(--gold); border-bottom:1px solid var(--hairline-gold); } .apptform__confirm-mark{ display:block; width:40px; height:40px; border:2px solid var(--gold); border-radius:50%; margin-bottom:16px; position:relative; } .apptform__confirm-mark::after{ content:""; position:absolute; left:13px; top:7px; width:9px; height:18px; border:solid var(--gold); border-width:0 2px 2px 0; transform:rotate(45deg); } .apptsec__aside{ display:grid; gap:18px; position:sticky; top:calc(var(--header-h) + 20px); } .apptsec__phone{ display:block; font-family:var(--display); font-size:30px; color:var(--espresso); margin-bottom:6px; } /* quiet support rail: one light boundary, no stacked gold-top cards */ .apptsec__aside--quiet{ gap:0; border-left:1px solid var(--hairline-light); padding-left:clamp(24px,2.4vw,36px); } .asideblk + .asideblk{ margin-top:34px; } .asideblk__label{ font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:12px; } .asideblk__body{ font-size:15px; line-height:1.6; color:var(--text-on-light); } .asideblk__meta{ font-size:14px; line-height:1.6; color:var(--text-on-light-2); margin-top:4px; } .asideblk__action{ margin-top:10px; } .asideblk__action .tlink{ margin-top:0; } .asideblk__fine{ margin-top:10px; font-size:13px; line-height:1.55; color:var(--text-on-light-2); max-width:32ch; } @media (max-width:1040px){ .apptsec__aside--quiet{ border-left:none; border-top:1px solid var(--hairline-light); padding-left:0; padding-top:26px; } } /* ---- page transition wipe ---- */ .pagewipe{ position:fixed; inset:0; z-index:9998; background:var(--ink); transform:translateY(100%); pointer-events:none; } .pagewipe.is-wiping{ transform:translateY(0); transition:transform .42s var(--ease-curtain); } /* ============================================================================= RESPONSIVE - new components ============================================================================= */ @media (max-width:1040px){ .svc__grid{ grid-template-columns:1fr; } .svc__aside{ position:static; } .apptsec__grid{ grid-template-columns:1fr; } .apptsec__aside{ position:static; } .tgallery__grid{ grid-template-columns:repeat(2,1fr); } .related__grid{ grid-template-columns:1fr 1fr; } } @media (max-width:720px){ .mobilebar{ display:flex; } body{ padding-bottom:66px; } .srow__top{ grid-template-columns:42px 1fr; } .srow__top .srow__arrow{ display:none; } .srow__desc{ padding-left:0; max-height:none; opacity:1; margin-top:12px; } .srow__name{ font-size:clamp(24px,7vw,34px); } .related__grid{ grid-template-columns:1fr; } .apptform__row{ grid-template-columns:1fr; gap:0; } .qcard{ flex-basis:300px; } .tstudy{ padding:10px; } .tstudy__meta{ grid-template-columns:1fr; } .baflip__inner{ aspect-ratio:4 / 3; } } @media (max-width:560px){ .tgallery__grid{ grid-template-columns:1fr; } } /* ============================================================================= REVIEW FIXES - contrast, testimonials layout, density ============================================================================= */ /* AA contrast: small gold labels on LIGHT surfaces use darker gold-ink (~4.6:1) */ .srow__num, .relcard__num, .relcard__arrow, .comfort__names em, .tile__cap em, .ph:not(.ph--dark):not(.ph--green) .ph__tag{ color: var(--gold-ink); } .faq__icon::before, .faq__icon::after{ background: var(--gold-ink); } /* home gallery preview: 3-up */ .gallery__grid--preview{ grid-template-columns:repeat(3,1fr); } /* marquee provenance note */ .marquee__src{ max-width:var(--maxw); margin:22px auto 0; font-size:12.5px; font-style:italic; color:var(--text-on-light-2); } @media (max-width:1040px){ .gallery__grid--preview{ grid-template-columns:repeat(3,1fr); } } @media (max-width:680px){ .gallery__grid--preview{ grid-template-columns:1fr; } } /* ---- puppy-love comfort checkbox (request form) ---- */ .field--check{ margin-bottom:20px; } .field__legend{ display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-on-light-2); margin-bottom:10px; font-weight:600; } .check{ display:flex; align-items:flex-start; gap:14px; cursor:pointer; padding:16px 18px; border:1px solid var(--hairline-light); border-radius:3px; background:var(--porcelain); transition:border-color .25s, background .25s; } .check:hover{ border-color:var(--gold); } .check input{ position:absolute; opacity:0; width:1px; height:1px; } .check__box{ flex:0 0 auto; width:22px; height:22px; border:1.5px solid var(--espresso); border-radius:4px; position:relative; margin-top:1px; transition:background .2s, border-color .2s; } .check input:checked + .check__box{ background:var(--espresso); border-color:var(--espresso); } .check input:checked + .check__box::after{ content:""; position:absolute; left:7px; top:3px; width:6px; height:11px; border:solid var(--gold); border-width:0 2px 2px 0; transform:rotate(45deg); } .check input:focus-visible + .check__box{ outline:2px solid var(--gold-deep); outline-offset:2px; } .check__text{ font-size:15.5px; line-height:1.5; color:var(--text-on-light); } .check__text em{ font-style:italic; color:var(--gold-ink); } /* ============================================================================= MOBILE A11Y FIXES - touch targets, safe-area, modal semantics ============================================================================= */ .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* anchored / focused content clears the sticky header and bottom bar */ html{ scroll-padding-top:calc(var(--header-h) + 14px); scroll-padding-bottom:88px; } /* sticky bottom bar: larger targets + iOS safe-area inset */ .mobilebar{ min-height:64px; align-items:stretch; padding-bottom:calc(10px + env(safe-area-inset-bottom)); } .mobilebar a{ min-height:48px; display:flex; align-items:center; justify-content:center; } @media (max-width:720px){ body{ padding-bottom:calc(74px + env(safe-area-inset-bottom)); } } /* header / overlay-menu controls >= 44x44 */ .hamburger{ min-width:44px; min-height:44px; align-items:center; justify-content:center; } .menu__close{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; padding:0; } .menu__nav{ gap:8px; } .mlink{ padding:8px 6px; } /* filter chips + marquee toggle >= 44px */ .filter{ min-height:44px; display:inline-flex; align-items:center; } .marquee__toggle{ width:44px; height:44px; } /* breadcrumb links: comfortable tap area */ .breadcrumbs{ row-gap:4px; } .breadcrumbs a{ display:inline-flex; align-items:center; min-height:30px; padding:4px 0; } /* marquee on touch (no hover = no pause-on-hover): make it swipeable, hide the toggle */ @media (hover:none){ .marquee{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .marquee__track{ animation:none; } .marquee__toggle{ display:none; } } /* ---- subtle emerald depth on the large green moments (premium dimensionality) ---- */ .band, .story, .phero--green{ background: linear-gradient(158deg, var(--espresso) 0%, var(--espresso-deep) 100%); } /* ---- 404 ---- */ .nf{ min-height:72vh; display:flex; align-items:center; text-align:center; } .nf__inner{ margin-inline:auto; max-width:680px; } .nf .eyebrow{ justify-content:center; } .nf__lede{ margin-inline:auto; } .nf__cta{ justify-content:center; } /* ---- Yelp review proof module ---- */ /* ============================================================================= BLOG (listing + long-form post) ============================================================================= */ .blog{ background:var(--porcelain); } .blog .filters{ margin-bottom:clamp(26px,3vw,38px); } .blog__grid{ max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(22px,2.6vw,34px); align-items:stretch; } .blogcard{ background:var(--paper); border:1px solid var(--hairline-light); border-radius:3px; overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s; } .blogcard.is-hidden{ display:none; } .blogcard:is(:hover,:focus-within){ transform:translateY(-5px); box-shadow:0 24px 52px rgba(13,13,12,.12); border-color:var(--hairline-gold); } .blogcard__link{ display:flex; flex-direction:column; height:100%; padding:clamp(28px,3vw,38px); } .blogcard__cat{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); font-weight:600; } .blogcard__title{ margin-top:12px; font-family:var(--display); font-weight:500; font-size:clamp(24px,2.4vw,30px); line-height:1.16; color:var(--text-on-light); } .blogcard__excerpt{ margin-top:14px; font-size:15.5px; line-height:1.62; color:var(--text-on-light-2); } .blogcard__foot{ margin-top:auto; padding-top:22px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; } .blogcard__meta{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-on-light-2); display:inline-flex; align-items:center; gap:9px; } .blogcard__dot{ color:var(--gold-deep); } .blogcard__more{ font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--espresso); display:inline-flex; align-items:center; gap:7px; } .blogcard__arrow{ color:var(--gold-deep); transition:transform .4s var(--ease); } .blogcard:is(:hover,:focus-within) .blogcard__arrow{ transform:translate(3px,-3px); } .blog__grid[data-empty]{ position:relative; min-height:120px; } .blog__grid[data-empty]::after{ content:"No posts in this topic yet."; display:block; grid-column:1 / -1; text-align:center; padding:52px 16px; color:var(--text-on-light-2); font-style:italic; font-size:15px; } /* long-form post: editorial two-column (article + sticky rail) */ .posthero .phero__sub{ margin-top:16px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); } .post__grid{ max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1.5fr .85fr; gap:clamp(40px,5vw,80px); align-items:start; } .post__body{ max-width:768px; } .post__lede{ font-size:clamp(19px,1.7vw,23px); line-height:1.5; color:var(--text-on-light); font-weight:500; } .post__body > p:not(.post__lede):not(.post__note){ margin-top:1.3em; font-size:clamp(16.5px,1.15vw,18px); line-height:1.78; color:var(--text-on-light); } .post__sub{ font-family:var(--display); font-weight:500; font-size:clamp(22px,2.2vw,28px); line-height:1.2; color:var(--text-on-light); margin-top:1.7em; } .post__list{ list-style:none; margin-top:1.2em; display:grid; gap:12px; } .post__list li{ position:relative; padding-left:26px; font-size:clamp(16px,1.1vw,17.5px); line-height:1.7; color:var(--text-on-light); } .post__list li::before{ content:""; position:absolute; left:0; top:11px; width:7px; height:7px; border:1px solid var(--gold); transform:rotate(45deg); } .post__body strong{ color:var(--text-on-light); font-weight:600; } .post__note{ margin-top:2.4em; padding-top:1.4em; border-top:1px solid var(--hairline-light); font-size:13px; font-style:italic; line-height:1.6; color:var(--text-on-light-2); } .post__aside{ position:sticky; top:calc(var(--header-h) + 24px); display:grid; gap:clamp(44px,5vw,60px); } .post__card{ padding:0; } .post__card-title{ font-family:var(--display); font-weight:500; font-size:22px; line-height:1.22; color:var(--text-on-light); } .post__card-copy{ margin-top:10px; font-size:14.5px; line-height:1.62; color:var(--text-on-light-2); } .post__card .btn{ margin-top:20px; } .post__card-call{ margin-top:8px; } .blogmore__label{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-on-light-2); margin-bottom:14px; } .blogmore__list{ display:grid; border-top:1px solid var(--hairline-light); } .blogmore__card{ position:relative; display:block; padding:16px 26px 16px 0; border-bottom:1px solid var(--hairline-light); transition:padding-left .35s var(--ease); } .blogmore__card:hover{ padding-left:6px; } .blogmore__title{ display:block; font-family:var(--display); font-size:18px; line-height:1.24; color:var(--text-on-light); } .blogmore__arrow{ position:absolute; top:16px; right:2px; color:var(--gold-deep); transition:transform .35s var(--ease); } .blogmore__card:hover .blogmore__arrow{ transform:translate(3px,-3px); } .blogmore__all{ display:inline-block; margin-top:20px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--espresso); } .blogmore__all:hover{ color:var(--gold-ink); } @media (max-width:900px){ .post__grid{ grid-template-columns:1fr; gap:clamp(34px,5vw,48px); } .post__body{ max-width:none; } .post__aside{ position:static; top:auto; } } @media (max-width:720px){ .blog__grid{ grid-template-columns:1fr; } } @media (prefers-reduced-motion: reduce){ .blogcard, .blogcard__arrow, .blogmore__card, .blogmore__arrow{ transition:none !important; } } /* ============================================================================= EDITORIAL SERVICE PAGES (Veneers + Dental Implants: photo-free launch layout with a split typographic hero — .phero--edit is the shared hook — credential strip, five-step process, prosthodontic statement, natural- porcelain principles, what-to-expect row, honesty/candidacy grid, testimonial band, quiet related links). Reuses the sitewide .phero / .paths / .svcband / .tlink / .faq / .visit system; only page-scoped rules live here. ============================================================================= */ /* split typographic hero: headline left, copy + CTAs right, no image */ .phero--edit{ padding: calc(var(--header-h) + clamp(44px,4.9vw,70px)) var(--pad) clamp(48px,4.9vw,70px); } .vhero{ display:grid; grid-template-columns:48fr 40fr; column-gap:clamp(56px,7vw,100px); align-items:start; } .vhero__right{ margin-top:clamp(24px,4.4vw,64px); } /* drops the paragraph to the H1's lower half */ .phero--edit .phero__title{ font-size:clamp(2rem,3.4vw,3.2rem); max-width:600px; } .phero--edit .phero__lede{ margin-top:0; max-width:560px; } .phero--edit .phero__cta{ margin-top:28px; gap:14px; } .phero__assure{ margin-top:15px; font-size:13px; font-weight:500; letter-spacing:.02em; text-transform:none; color:#49524B; } @media (max-width:900px){ .vhero{ grid-template-columns:1fr; row-gap:28px; } .vhero__right{ margin-top:0; } } @media (max-width:640px){ .phero--edit{ padding-top: calc(var(--header-h) + 44px); padding-bottom:48px; } .phero--edit .phero__cta{ margin-top:24px; gap:12px; } .phero__assure{ margin-top:14px; } } /* quiet one-line credential strip (no pills, no boxes) */ .authstrip{ padding:clamp(22px,1.7vw,24px) var(--pad); border-top:1px solid var(--hairline-light); border-bottom:1px solid var(--hairline-light); } .phero--edit + .authstrip{ padding-top:clamp(22px,1.7vw,24px); } /* outranks the global `.phero + section` 72px rule */ .authstrip__row{ max-width:var(--maxw); margin-inline:auto; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; row-gap:10px; } .authstrip__item{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-on-light-2); white-space:nowrap; } .authstrip__item + .authstrip__item::before{ content:""; display:inline-block; width:1px; height:12px; background:var(--hairline-gold); margin:0 clamp(24px,2vw,28px); vertical-align:-1px; } @media (max-width:900px){ .authstrip{ padding-top:22px; padding-bottom:22px; } .authstrip__row{ flex-direction:column; align-items:center; row-gap:9px; } .authstrip__item{ white-space:normal; text-align:center; } .authstrip__item + .authstrip__item::before{ content:none; } } /* editorial head row shared by the process + natural-porcelain sections */ .dprocess__head{ display:grid; grid-template-columns:42% 44%; justify-content:space-between; align-items:end; } .dprocess__head .lede{ max-width:620px; } @media (max-width:900px){ .dprocess__head{ grid-template-columns:1fr; row-gap:24px; align-items:start; } } /* five-step process (3 + 2 grid on the shared .paths system) */ .dprocess{ background:rgba(200,164,93,.05); padding:clamp(62px,6.3vw,94px) var(--pad); } #veneer-design-process, #implant-treatment-process, #restorative-treatment-process, #tmd-evaluation-process, #dentofacial-analysis, #what-to-expect{ scroll-margin-top: calc(var(--header-h) + 24px); } .dprocess--deep{ background:rgba(200,164,93,.08); } /* qualified supporting list inside a treatment category */ .paths__list{ list-style:none; margin-top:18px; display:grid; gap:11px; } .paths__list li{ position:relative; padding-left:18px; font-size:14.5px; line-height:1.5; color:#49524B; } .paths__list li::before{ content:""; position:absolute; left:0; top:7px; width:6px; height:6px; border:1px solid var(--gold); transform:rotate(45deg); } .paths__list a{ color:inherit; border-bottom:1px solid var(--hairline-gold); } .paths__list a:hover, .paths__list a:focus-visible{ color:var(--gold-ink); } .paths--nonum .paths__item{ padding-top:20px; } /* comparison blocks: rule + heading, no number */ .dprocess--plain{ background:transparent; } .paths--steps{ margin-top:clamp(38px,3.8vw,54px); gap:clamp(44px,3.4vw,50px) clamp(32px,3.2vw,46px); list-style:none; } .paths--steps .paths__item{ padding-top:17px; } .paths--steps .paths__item h3 + p, .paths--quad .paths__item h3 + p{ margin-top:13px; max-width:350px; line-height:1.55; } /* --threetwo variant (smile design evaluation): five items as a 3-column row with the last two centered beneath it, each keeping one column's width */ .paths--threetwo{ grid-template-columns:repeat(6,minmax(0,1fr)); } .paths--threetwo > .paths__item{ grid-column:span 2; } .paths--threetwo > .paths__item:nth-child(4){ grid-column:2 / span 2; } .paths--threetwo > .paths__item:nth-child(5){ grid-column:4 / span 2; } @media (max-width:900px) and (min-width:641px){ .paths--threetwo{ grid-template-columns:repeat(2,minmax(0,1fr)); } .paths--threetwo > .paths__item, .paths--threetwo > .paths__item:nth-child(4){ grid-column:auto; } .paths--threetwo > .paths__item:nth-child(5){ grid-column:1 / -1; width:100%; max-width:calc((100% - clamp(32px,3.2vw,46px)) / 2); justify-self:center; } } @media (max-width:640px){ .paths--threetwo{ grid-template-columns:1fr; } .paths--threetwo > .paths__item, .paths--threetwo > .paths__item:nth-child(4), .paths--threetwo > .paths__item:nth-child(5){ grid-column:auto; width:100%; max-width:none; justify-self:stretch; } } /* --threeone variant: four peer items as a 3-column row with the fourth centered beneath it at one column's width (2x2 on tablet, stacked on mobile) */ .paths--threeone{ grid-template-columns:repeat(6,minmax(0,1fr)); } .paths--threeone > .paths__item{ grid-column:span 2; } .paths--threeone > .paths__item:nth-child(4){ grid-column:3 / span 2; } @media (max-width:900px) and (min-width:641px){ .paths--threeone{ grid-template-columns:repeat(2,minmax(0,1fr)); } .paths--threeone > .paths__item, .paths--threeone > .paths__item:nth-child(4){ grid-column:auto; } } @media (max-width:640px){ .paths--threeone{ grid-template-columns:1fr; } .paths--threeone > .paths__item, .paths--threeone > .paths__item:nth-child(4){ grid-column:auto; width:100%; max-width:none; justify-self:stretch; } } /* process-intro variant: eyebrow sits above the row, so the lede top-aligns with the heading instead of hanging from its baseline */ .dprocess__head--top{ align-items:start; } .dprocess__head--top > .lede{ margin-top:0; } @media (max-width:900px){ .dprocess__head--top > .lede{ margin-top:18px; } } /* restrained gold numbers */ .paths__num{ display:block; font-size:11.5px; font-weight:600; letter-spacing:.16em; color:var(--gold-ink); margin-bottom:13px; } /* compact prosthodontic authority statement */ .vstate{ background:rgba(200,164,93,.08); padding:clamp(48px,4vw,58px) var(--pad); } /* 2x2 principle/category grid (natural-porcelain, feel-natural, conservative-care) */ .paths--quad{ margin-top:clamp(38px,3.6vw,52px); grid-template-columns:1fr 1fr; gap:clamp(42px,3.5vw,50px) clamp(58px,5vw,72px); } .paths--quad .paths__item{ padding-top:17px; } @media (max-width:700px){ .paths--quad{ grid-template-columns:1fr; gap:32px; } } /* what to expect: four facts with thin vertical separators (no gold rules) */ .vexpect{ background:rgba(255,255,255,.55); padding:clamp(56px,4.9vw,74px) var(--pad); } .vexpect .display{ font-size:clamp(1.9rem,4vw,3.3rem); } .vexpect__grid{ list-style:none; margin-top:clamp(34px,3vw,42px); display:grid; grid-template-columns:repeat(4,1fr); } .vexpect__item{ padding:0 clamp(26px,2.2vw,32px); } .vexpect__item:first-child{ padding-left:0; } .vexpect__item:last-child{ padding-right:0; } .vexpect__item + .vexpect__item{ border-left:1px solid var(--hairline-light); } .vexpect__item .paths__num{ margin-bottom:12px; } .vexpect__item h3{ font-family:var(--display); font-weight:500; font-size:clamp(19px,1.6vw,23px); color:var(--text-on-light); } .vexpect__item p{ margin-top:12px; font-size:16px; line-height:1.6; color:#49524B; } @media (max-width:1100px) and (min-width:701px){ .vexpect__grid{ grid-template-columns:1fr 1fr; row-gap:36px; } .vexpect__item{ padding:0 0 0 clamp(26px,2.2vw,32px); } .vexpect__item:nth-child(odd){ padding-left:0; border-left:none; } } @media (max-width:700px){ .vexpect{ padding-top:56px; padding-bottom:56px; } .vexpect__grid{ grid-template-columns:1fr; row-gap:0; } .vexpect__item{ padding:28px 0; border-left:none; } .vexpect__item + .vexpect__item{ border-left:none; border-top:1px solid var(--hairline-light); } .vexpect__item:first-child{ padding-top:0; } .vexpect__item:last-child{ padding-bottom:0; } } /* tighter two-column editorial grid (heading closer to its copy) */ .svcsec--near{ grid-template-columns:.40fr .51fr; gap:clamp(48px,6.2vw,88px); } @media (max-width:900px){ .svcsec--near{ grid-template-columns:1fr; gap:42px; } } /* honesty band details */ .vsec-honest{ padding-top:clamp(58px,5.4vw,78px); padding-bottom:clamp(58px,5.5vw,80px); } .vsec-honest .svc__list{ gap:16px; } .candid__title{ font-family:var(--display); font-weight:500; font-size:clamp(21px,1.8vw,26px); line-height:1.25; color:var(--text-on-light); margin-bottom:8px; } .finenote--strong{ font-size:15.5px; color:#49524B; } body:has(.phero--edit) .svcband .lede{ color:#3F4742; } /* standalone testimonial band: quiet tonal change, centered pull quote */ .quotesec{ background:rgba(200,164,93,.04); padding:clamp(52px,4.5vw,64px) var(--pad); } .quotesec .eyebrow--center{ margin-bottom:24px; } .pullquote{ max-width:720px; margin:0 auto; text-align:center; } .pullquote::before{ content:"\201C"; font-family:var(--display); font-size:40px; line-height:.6; color:var(--gold-deep); display:block; margin-bottom:16px; } .pullquote blockquote{ font-family:var(--display); font-size:clamp(21px,1.9vw,27px); line-height:1.45; color:var(--text-on-light); } .pullquote figcaption{ margin-top:21px; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--espresso); } .pullquote figcaption span{ display:block; margin-top:6px; font-size:12.5px; color:#3F4742; } /* page-scoped rhythm (:has degrades safely): FAQ band + final CTA sizing */ body:has(.phero--edit) .faq.section{ padding-top:clamp(62px,5.8vw,84px); padding-bottom:clamp(52px,4.6vw,66px); } body:has(.phero--edit) .faq__inner{ max-width:840px; } body:has(.phero--edit) .faq__q{ min-height:64px; } @media (min-width:768px){ body:has(.phero--edit) .faq__q{ min-height:70px; } } body:has(.phero--edit) .visit{ padding-top:clamp(62px,5.8vw,84px); padding-bottom:clamp(62px,5.8vw,84px); border-bottom:1px solid rgba(200,164,93,.28); } /* quiet related-care links (understated, no cards, no numbering) */ .relquiet{ padding:clamp(30px,2.5vw,36px) var(--pad) clamp(40px,3.3vw,48px); } .relquiet__inner{ max-width:var(--maxw); margin-inline:auto; } .relquiet .eyebrow{ margin-bottom:12px; } .relquiet__links{ display:flex; align-items:center; flex-wrap:wrap; gap:18px clamp(24px,4vw,60px); } .relquiet .tlink{ margin-top:0; } .relquiet__div{ width:1px; height:14px; background:var(--hairline-gold); } @media (max-width:640px){ .relquiet__links{ flex-direction:column; align-items:flex-start; gap:18px; } .relquiet__div{ display:none; } } /* ============================================================================= THERAPY DOGS PAGE (editorial brand page: 2-photo layout - joint hero portrait + one patient-comfort photo - consolidated comfort section, compact text-led profiles, steps + single clinical note, recognition strip, compact light closing). All rules scoped to td* classes. ============================================================================= */ .vstate-band{ background:rgba(200,164,93,.05); } .tdhero__grid{ display:grid; grid-template-columns:44fr 56fr; column-gap:clamp(64px,6vw,80px); align-items:center; } .tdhero .phero__title{ max-width:620px; } .tdhero__photo{ margin:0; } .tdhero__photo img{ display:block; width:100%; height:auto; aspect-ratio:1448 / 1086; } .tdhero__cap{ margin-top:10px; font-family:var(--sans); font-size:12.5px; letter-spacing:.04em; color:var(--text-on-light-2); } .tdcomfort__grid{ display:grid; grid-template-columns:46fr 46fr; column-gap:clamp(64px,6vw,80px); align-items:center; } .tdcomfort__photo{ margin:0; } .tdcomfort__photo img{ display:block; width:100%; height:auto; aspect-ratio:1320 / 824; /* restrained warm correction so the clinical photo sits with the ivory/ taupe palette - scoped to this photograph only, no retouching */ filter:sepia(.06) saturate(1.05) brightness(1.01); } .tdpoints{ margin-top:clamp(40px,4.2vw,56px); } .tdpair{ padding-top:clamp(44px,5.2vw,78px); padding-bottom:clamp(44px,5.2vw,78px); } .tdpair__head{ margin-bottom:clamp(28px,3vw,38px); } .tdpair__grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(56px,6vw,88px); } .tdpair__profile + .tdpair__profile{ border-left:1px solid var(--hairline-gold); padding-left:clamp(44px,4.6vw,68px); } .tdpair__label{ font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-ink); } .tdpair__name{ margin-top:10px; font-family:var(--display); font-weight:500; font-size:clamp(26px,2.3vw,33px); color:var(--text-on-light); } .tdpair__line{ margin-top:8px; font-family:var(--display); font-style:italic; font-size:clamp(16.5px,1.4vw,19px); color:var(--text-on-light-2); } .tdpair__bio{ margin-top:14px; font-size:16px; line-height:1.65; color:#49524B; max-width:52ch; } .tdexpect__note{ margin-top:clamp(32px,3.2vw,42px); padding-top:22px; border-top:1px solid var(--hairline-gold); font-size:15.5px; line-height:1.65; color:#49524B; } .tdpress{ background:rgba(200,164,93,.08); padding:clamp(48px,5.4vw,72px) var(--pad); } .tdpress__row{ display:flex; justify-content:space-between; align-items:center; gap:clamp(24px,3vw,40px); flex-wrap:wrap; } .tdpress__names{ margin-top:12px; font-family:var(--display); font-size:clamp(17px,1.6vw,21px); line-height:1.6; color:var(--text-on-light); } .tdpress__dot{ color:var(--gold-deep); } .tdpress__link{ margin-top:0; white-space:nowrap; } .tdplan{ padding-top:clamp(48px,5.4vw,72px); padding-bottom:clamp(52px,5.6vw,76px); } .tdplan .svcsec{ max-width:760px; } @media (max-width:980px){ .tdhero__grid{ grid-template-columns:1fr; row-gap:34px; } .tdcomfort__grid{ grid-template-columns:1fr; row-gap:30px; } } @media (max-width:760px){ .tdpair__grid{ grid-template-columns:1fr; row-gap:34px; } .tdpair__profile + .tdpair__profile{ border-left:none; padding-left:0; border-top:1px solid var(--hairline-gold); padding-top:30px; } } /* appointment form: note under the comfort-companion field */ .field__note{ margin-top:8px; font-size:13px; line-height:1.5; color:var(--text-on-light-2); } /* ============================================================================= THE LINDEN JOURNAL (blog landing: light editorial hero, rule-based article entries, gated featured module). Post pages keep the existing .post system plus a byline. Builds on the shared editorial tokens. ============================================================================= */ .jhero{ padding: calc(var(--header-h) + clamp(56px,7vw,102px)) var(--pad) clamp(56px,6.6vw,94px); border-bottom:1px solid var(--hairline-light); } .jhero .phero__title{ max-width:760px; font-size:clamp(2rem,3.6vw,3.4rem); } .jhero .phero__lede{ max-width:660px; margin-top:clamp(28px,2.3vw,33px); } .jsec .filters{ margin-bottom:clamp(40px,3.4vw,48px); } @media (max-width:640px){ .jsec .filters{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; } } /* featured module: quiet tonal panel, no shadow */ .jfeature{ background:rgba(200,164,93,.05); border:1px solid var(--hairline-light); margin-bottom:clamp(56px,6.6vw,96px); } .jfeature__inner{ padding:clamp(34px,4.6vw,68px); max-width:760px; } .jfeature__title{ margin-top:14px; font-family:var(--display); font-weight:500; font-size:clamp(26px,2.6vw,36px); line-height:1.15; } .jfeature__title a{ color:var(--text-on-light); } .jfeature__title a:hover, .jfeature__title a:focus-visible{ color:var(--gold-ink); } .jfeature__sum{ margin-top:14px; font-size:16.5px; line-height:1.65; color:#49524B; max-width:640px; } .jfeature__link{ margin-top:22px; } /* editorial article entries: hairline rules, no cards, whole entry clickable */ .jgrid{ margin-top:clamp(38px,3.4vw,50px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(44px,4vw,56px) clamp(28px,2.6vw,36px); } .jcard__link{ display:block; border-top:1px solid var(--hairline-gold); padding-top:18px; color:inherit; transition:transform .25s var(--ease); } .jcard__link:hover, .jcard__link:focus-visible{ transform:translateY(-2px); } .jcard__cat{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); } .jcard__title{ margin-top:12px; font-family:var(--display); font-weight:500; font-size:clamp(20px,1.7vw,24px); line-height:1.2; color:var(--text-on-light); } .jcard__sum{ margin-top:10px; font-size:15px; line-height:1.6; color:#49524B; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .jcard__foot{ margin-top:14px; display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--text-on-light-2); } .jcard__arrow{ color:var(--gold-ink); transition:transform .25s var(--ease); } .jcard__link:hover .jcard__arrow{ transform:translateX(3px); } @media (prefers-reduced-motion: reduce){ .jcard__link, .jcard__arrow{ transition:none !important; } } @media (max-width:1100px){ .jgrid{ grid-template-columns:1fr 1fr; gap:44px 26px; } } @media (max-width:640px){ .jgrid{ grid-template-columns:1fr; gap:28px; } } /* article-page byline */ .post__byline{ font-size:14px; font-weight:600; letter-spacing:.02em; color:var(--espresso); margin-bottom:18px; } .post__byline a{ color:var(--gold-ink); border-bottom:1px solid var(--hairline-gold); } /* Insights additions: pathway links, two-column archive, upcoming-topics list */ .paths__go{ margin-top:22px; } .jgrid--two{ grid-template-columns:1fr 1fr; } @media (max-width:640px){ .jgrid--two{ grid-template-columns:1fr; } } .ulist__label{ margin-top:clamp(26px,2.4vw,34px); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--text-on-light-2); } .ulist{ list-style:none; max-width:1060px; margin-top:10px; display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(40px,4.6vw,68px); } .ulist li{ display:flex; align-items:baseline; gap:16px; padding:clamp(20px,1.9vw,26px) 0; border-bottom:1px solid var(--hairline-light); font-family:var(--display); font-weight:500; font-size:clamp(19px,1.6vw,23px); line-height:1.3; color:var(--text-on-light); } .ulist .paths__num{ margin:0; flex:none; } @media (max-width:800px){ .ulist{ grid-template-columns:1fr; } } /* ============================================================================= TESTIMONIALS PAGE (curated editorial layout, 2026-07) Quote text stays ivory/ink for contrast; gold is accent-only. Cards reuse the .quote treatment; grids stack 3 -> 2 -> 1 and never clip or hide a quote. (Lives at the end of the file so variants win over the base .quotesec rules.) ============================================================================= */ .tsec .tsec__head{ max-width:var(--maxw); margin-inline:auto; } .tsec__head .lede{ margin-top:14px; max-width:62ch; color:#49524B; } .tgrid{ max-width:var(--maxw); margin:clamp(34px,3.4vw,48px) auto 0; display:grid; gap:20px; align-items:start; } .tgrid--3{ grid-template-columns:repeat(3,1fr); } .tgrid--2{ grid-template-columns:repeat(2,1fr); } /* even rows: cards in a row share a height, so their tops and bottoms line up. .quote already pushes its figcaption down with margin-top:auto, so the names settle onto a common baseline rather than floating mid-card. */ .tgrid--even{ align-items:stretch; } /* featured quote: full espresso band, ivory text, gold reserved for accents */ .quotesec--feature{ background:var(--espresso); padding:clamp(76px,7.5vw,118px) var(--pad); } .quotesec--feature .pullquote{ max-width:840px; } .quotesec--feature .pullquote::before{ color:var(--gold); } .quotesec--feature .pullquote blockquote{ color:var(--text-on-dark); font-size:clamp(22px,2.2vw,30px); } .quotesec--feature .pullquote figcaption{ color:var(--gold); } .quotesec--feature .pullquote figcaption span{ color:var(--text-on-dark-2); } /* professional-trust band: primary pullquote + two companion cards */ .tsec--band{ padding-top:clamp(56px,5.5vw,84px); padding-bottom:clamp(56px,5.5vw,84px); } .tsec--band .pullquote{ margin-top:clamp(36px,3.6vw,50px); } .tsec--band .tgrid--2{ max-width:920px; margin-top:clamp(40px,3.8vw,54px); } /* quiet centered closing quote */ .quotesec--close{ background:var(--porcelain); } @media (max-width:1040px){ .tgrid--3{ grid-template-columns:repeat(2,1fr); } } @media (max-width:680px){ .tgrid--3, .tgrid--2{ grid-template-columns:1fr; } } /* ============================================================================= PRESS PAGE (light editorial press page, 2026-07) Scoped to /press/ only. Page aliases below are derived from existing brand tokens (espresso, gold, porcelain, graphite); no new arbitrary colors. Tonal progression: ivory header -> ivory/parchment hero with trust strip -> deeper-cream featured story -> ivory card grid -> parchment dog section -> the standard espresso consultation CTA -> footer. Logo system: equal outer cells, per-outlet inner sizing tuned for OPTICAL weight (never one shared width); hero marks are quieter and monochrome, card marks slightly larger and left-aligned. All sizing lives here, centralized, keyed by .plogo-- from data.js. ---- */ .phero--press, .pcoverage, .pressmeet{ --press-parchment: color-mix(in srgb, var(--gold) 4%, var(--porcelain)); /* hero + dog-section parchment */ --press-cream: color-mix(in srgb, var(--gold) 9%, var(--porcelain)); /* featured-story panel */ --press-charcoal-2: color-mix(in srgb, var(--espresso) 72%, var(--porcelain)); /* warm secondary charcoal */ --press-taupe: color-mix(in srgb, var(--espresso) 18%, transparent); /* soft warm taupe hairlines */ } /* ---- hero: constrained copy over a full-width five-cell trust strip ---- */ .phero--press{ background: var(--press-parchment); padding: calc(var(--header-h) + clamp(36px,3.8vw,54px)) var(--pad) clamp(38px,4vw,58px); border-bottom: 1px solid var(--press-taupe); } .pressintro{ max-width:740px; } .phero--press .phero__title{ font-size:clamp(2.3rem,4.4vw,3.9rem); } .phero--press .phero__lede{ margin-top:clamp(18px,1.8vw,24px); max-width:600px; color:var(--press-charcoal-2); } /* trust strip: centered label over one row of five EQUAL cells; a single subtle top rule organizes the strip (no per-logo boxes) */ .plogos{ margin-top:clamp(30px,3.2vw,40px); border-top:1px solid var(--press-taupe); padding-top:clamp(18px,1.9vw,24px); } .plogos__label{ text-align:center; font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-ink); } .plogos__grid{ margin-top:clamp(14px,1.6vw,20px); list-style:none; display:grid; grid-template-columns:repeat(5,1fr); align-items:stretch; } .plogos__item{ display:flex; align-items:center; justify-content:center; min-height:clamp(46px,4.2vw,58px); padding:8px 16px; } .plogo{ width:auto; max-width:100%; object-fit:contain; mix-blend-mode:multiply; } /* hero optical sizing: equal PERCEIVED weight, not equal dimensions (Beverly Hills Weekly is width-governed because its mark is extremely wide) */ .plogos .plogo--lamag{ height:29px; } .plogos .plogo--inside-edition{ height:33px; } .plogos .plogo--spectrum{ height:28px; } .plogos .plogo--bhweekly{ width:128px; height:auto; } .plogos .plogo--cbsla{ height:26px; } /* hero monochrome treatment (inspected in-browser): LA Mag and CBS are already near-black; Inside Edition and Spectrum are neutralized here only. Beverly Hills Weekly's official wordmark exists only in link-blue, so it is darkened to charcoal EVERYWHERE per the practice's direction. */ .plogos .plogo--inside-edition, .plogos .plogo--spectrum{ filter:grayscale(1); } .plogo--bhweekly{ filter:grayscale(1) brightness(.52); } /* ---- coverage: tighter transition from hero into the featured story ---- */ .pcoverage{ background:var(--porcelain); padding: clamp(52px,5.8vw,84px) var(--pad) clamp(56px,6vw,88px); } .pcoverage__inner{ max-width:var(--maxw); margin-inline:auto; } .pcoverage__head{ max-width:820px; } .pcoverage__lede{ margin-top:14px; max-width:60ch; font-size:clamp(16px,1.15vw,17.5px); line-height:1.65; color:var(--press-charcoal-2); } /* shared coverage link (visible label + external mark; underline on hover only, no layout movement) */ .plink{ display:inline-flex; align-items:baseline; gap:7px; margin-top:auto; padding-top:26px; font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); transition:color .3s var(--ease); } .plink .plink__mark{ font-size:12px; transition:color .3s var(--ease); } .plink:is(:hover,:active){ color:var(--espresso); } .plink:is(:hover,:active) .plink__mark{ color:var(--gold-deep); } /* featured story: 40/60 logo-led media panel + content on a cream panel; restrained (hairline frame, no shadow, minimal rounding). A future approved LA Magazine cover or article image can replace the .pfeat__media inner while keeping this frame. */ .pfeat{ margin-top: clamp(32px,3.4vw,44px); display:grid; grid-template-columns: 40fr 60fr; background:var(--press-cream); border:1px solid var(--hairline-gold); border-radius:3px; overflow:hidden; } .pfeat__media{ display:flex; align-items:center; justify-content:center; background:var(--press-parchment); border-right:1px solid var(--hairline-gold); padding: clamp(30px,3.4vw,48px); } .pfeat__logo{ width:min(58%, 232px); height:auto; object-fit:contain; mix-blend-mode:multiply; } .pfeat__body{ display:flex; flex-direction:column; justify-content:center; padding: clamp(34px,3.6vw,50px) clamp(28px,3.2vw,54px); } .pfeat__outlet{ font-family:var(--display); font-weight:500; font-size:clamp(24px,2vw,30px); line-height:1.15; color:var(--espresso); } .pfeat__meta{ margin-top:12px; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); } .pfeat__meta time{ font-weight:400; letter-spacing:.08em; color:var(--press-charcoal-2); } .pfeat__dot{ color:var(--gold); } .pfeat__title{ margin-top:clamp(20px,2vw,26px); font-family:var(--display); font-weight:500; font-size:clamp(23px,2vw,29px); line-height:1.28; color:var(--text-on-light); } .pfeat__summary{ margin-top:18px; max-width:56ch; font-size:16px; line-height:1.65; color:var(--press-charcoal-2); } /* additional coverage: balanced two-by-two cards with a SHARED logo frame (identical reserved frame in every card; inner marks sized optically, slightly larger than the hero strip because they identify each story) */ .pmedia{ margin-top:clamp(28px,3vw,36px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,2.6vw,34px); } .pmcard{ background:var(--paper); border:1px solid var(--hairline-light); border-radius:3px; padding:clamp(24px,2.6vw,34px) clamp(24px,2.6vw,34px); display:flex; flex-direction:column; align-items:flex-start; } .pmcard__logo{ display:flex; align-items:center; justify-content:flex-start; width:152px; height:40px; } .pmcard__logo .plogo--inside-edition{ height:38px; } .pmcard__logo .plogo--spectrum{ height:27px; } .pmcard__logo .plogo--bhweekly{ width:140px; height:auto; } .pmcard__logo .plogo--cbsla{ height:24px; } .pmcard__meta{ margin-top:18px; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); } .pmcard__meta time{ font-weight:400; letter-spacing:.08em; color:var(--press-charcoal-2); } .pmcard__dot{ color:var(--gold); } .pmcard__title{ margin-top:20px; font-family:var(--display); font-weight:500; font-size:clamp(19px,1.6vw,22px); line-height:1.32; color:var(--text-on-light); } .pmcard__summary{ margin-top:14px; font-size:15.5px; line-height:1.62; color:var(--press-charcoal-2); } .pmcard__note{ margin-top:10px; font-size:13px; font-style:italic; color:var(--press-charcoal-2); } .pmcard .plink{ padding-top:24px; } /* ---- the story behind the coverage: compact parchment split with the approved studio photograph (native 1402x1122 frame; both dogs intact; copy lifted slightly toward the dogs' eye level) ---- */ .pressmeet{ background:var(--press-parchment); border-top:1px solid var(--press-taupe); padding: clamp(42px,4.6vw,66px) var(--pad); } .pressmeet__inner{ max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns: 39fr 61fr; gap: clamp(36px,5vw,84px); align-items:center; } .pressmeet__copy{ max-width:440px; margin-bottom:clamp(12px,2vw,30px); } .pressmeet__text{ margin-top:clamp(20px,2vw,26px); max-width:44ch; font-size:clamp(16px,1.15vw,17.5px); line-height:1.65; color:var(--press-charcoal-2); } .pressmeet__action{ margin-top:10px; } .pressmeet__photo{ margin:0; max-width:700px; } .pressmeet__photo img{ display:block; width:100%; height:auto; aspect-ratio:1402 / 1122; object-fit:cover; object-position:center; border:1px solid var(--press-taupe); border-radius:3px; } /* ---- responsive ---- */ @media (max-width:1040px){ /* trust strip: 3 + 2, second row centered (no orphan pinned left) */ .plogos__grid{ grid-template-columns:repeat(6,1fr); row-gap:8px; } .plogos__item{ grid-column:span 2; } .plogos__item:nth-child(4){ grid-column:2 / span 2; } .pfeat{ grid-template-columns:1fr; } .pfeat__media{ border-right:none; border-bottom:1px solid var(--hairline-gold); padding: clamp(26px,4vw,36px); min-height:150px; max-height:190px; } .pfeat__logo{ width:min(46%, 210px); max-height:110px; } } @media (max-width:840px){ .pmedia{ grid-template-columns:1fr; gap:clamp(20px,3vw,26px); } .pressmeet__inner{ grid-template-columns:1fr; gap:26px; } .pressmeet__copy{ margin-bottom:0; } .pressmeet__photo{ order:2; } /* copy first, photograph second */ } @media (max-width:640px){ /* trust strip: two columns, fifth mark centered across the full row */ .plogos__grid{ grid-template-columns:1fr 1fr; row-gap:clamp(16px,4vw,22px); } .plogos__item, .plogos__item:nth-child(4){ grid-column:auto; } .plogos__item:nth-child(5){ grid-column:1 / -1; } .plogos__item{ min-height:44px; padding:6px 10px; } .plogos .plogo--lamag{ height:26px; } .plogos .plogo--inside-edition{ height:30px; } .plogos .plogo--spectrum{ height:25px; } .plogos .plogo--bhweekly{ width:118px; } .plogos .plogo--cbsla{ height:23px; } } @media (prefers-reduced-motion: reduce){ .plink, .plink__mark{ transition:none !important; } }