/* ============================================================ odNOVA — layout.css Structural + component styles, one block per page section, in DOM order. Values transcribed 1:1 from v15 inline styles. Sections: 0. Base & shared 1. Pinned atmosphere 2. Hero (announcement / nav / headline / credentials) 3. The approach 4. Two pillars 5. Your consultation 6. Treatments (clinical tools) 7. Responsible aesthetics 8. The clinician 9. Aesthetics for men 10. Results (before / after) 11. Reviews 12. Journal 13. Final CTA 14. Contact 15. Enquiry form 16. Footer 17. Mobile menu overlay ============================================================ */ /* ---------- 0. Base & shared ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Hide the document (page) scrollbar without disabling scrolling or changing layout width. Scroll continues to work via touch, wheel, trackpad and keyboard. NOT overflow:hidden. Targets only the document scrollport (html) — internal scroll components are unaffected. */ html { scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar { width: 0; height: 0; display: none; } body { background: var(--navy-body); -webkit-font-smoothing: antialiased; font-family: var(--font-sans); color: #EDE8DF; } a { text-decoration: none; color: inherit; } a:hover { color: inherit; } img { border: 0; } /* Section shell — content-driven height (v18: no forced full-viewport slides; only the hero keeps a cinematic 100vh) */ .od-sec { padding: var(--sec-pad-y) 0; min-height: auto; display: block; box-sizing: border-box; } .od-wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--pad-x); width: 100%; } /* Mono eyebrow (per-section colour/margin set by instance class) */ .od-eyebrow { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.26em; text-transform: uppercase; display: flex; align-items: center; gap: 14px; } .od-dash { width: 30px; height: 1px; background: var(--gold); display: inline-block; } .od-dash--deep { background: var(--gold-deep); } /* Section headings. NOTE (locked decision, normalisation spec): v15 declared no weight on .od-h2, so browsers faux-bolded Archivo (700 requested, 500 max loaded). `font-weight: 400` below is the conscious baseline — do not "fix" by loading Archivo 700. */ .od-h2 { font-weight: 400; } /* Wordmark: od·NOVA — always spans, never a flat string. v19 §19: Balanced-duet system everywhere — italic editorial serif od · raised dot · light tracked condensed NOVA (Oswald 300). */ /* Legacy text/font wordmark (Georgia italic od · Oswald NOVA) removed 2026-07-17. The brand mark is now the frozen SVG logo system — see css/logo.css. */ /* ---------- 1. Pinned atmosphere (fixed layer behind everything) ---------- */ .atmosphere { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--navy-body); } .atmosphere-shade-1 { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(7,10,16,0.94) 0%, rgba(7,10,16,0.8) 40%, rgba(9,15,28,0.4) 100%); } .atmosphere-shade-2 { position: absolute; inset: 0; background: radial-gradient(115% 95% at 10% 44%, rgba(7,10,16,0.6) 0%, rgba(7,10,16,0) 56%); } /* Foreground scrolls over the pinned atmosphere */ .page { position: relative; z-index: 1; } /* ---------- global a11y & link states (v17) ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--cream-card); color: var(--ink); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 20px; } .skip-link:focus { left: 12px; top: 12px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ---------- 2. Hero ---------- */ .hero { min-height: 100vh; display: flex; flex-direction: column; background: #0A1018; overflow: hidden; position: relative; } #announce { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; text-align: center; color: #97A5B7; padding: max(12px, env(safe-area-inset-top)) 20px 12px; background: linear-gradient(180deg, #05080D 0%, #06090E 55%, rgba(6,9,14,0) 100%); } #annShort { display: none; } #heroNav { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding: 26px 60px; max-width: var(--hero-max); width: 100%; margin: 0 auto; } .hero-mark { font-size: 38px; color: #FBF9F4; } /* +23%, brighter */ .hero-mark .wordmark-dot { color: #A87947; } /* muted bronze accent (approved swatch) */ #navLinks { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.07em; text-transform: uppercase; color: #C4CEDA; } #navLinks a { color: #C4CEDA; padding: 5px 0; } /* 2026-07-31 (Piotr): one shared hover + focus language for EVERY primary-nav item — colour-only lift (no layout shift), gold focus ring, no looping motion. */ #navLinks a { transition: color 0.28s ease; } #navLinks a:hover { color: #FBF9F4; } #navLinks a:focus-visible { outline: 1px solid rgba(192,154,99,0.8); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { #navLinks a { transition: none; } } #navLinks a.nav-book { color: var(--text-warm); border: 1px solid rgba(237,232,223,0.45); padding: 9px 20px; letter-spacing: 0.12em; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; } #navLinks a.nav-book:hover { background: rgba(237,232,223,0.10); border-color: rgba(237,232,223,0.75); color: #FBF9F4; } #navLinks a.nav-book:focus-visible { background: rgba(237,232,223,0.10); border-color: rgba(201,183,154,0.85); color: #FBF9F4; } #hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: transparent; border: 0; padding: 6px; } .hamburger-bar { width: 26px; height: 1.5px; background: #CDD5DF; display: block; } #heroInner { flex: 1; display: flex; flex-direction: column; padding: 24px 60px 34px; max-width: var(--hero-max); width: 100%; margin: 0 auto; } /* ---------- cinematic brand stage (v19) — Balanced duet in a precision grid ---------- */ .hero-grid { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: /* off-centre atmospheric opening (~43% x, ~42% y) — felt, not seen; never behind the dot */ radial-gradient(150% 100% at calc(43% + 3cm) calc(42% - 3cm), rgba(14,28,46,0.40) 0%, rgba(14,28,46,0.14) 40%, rgba(14,28,46,0) 74%), /* right side kept marginally deeper + calmer, so the field never mirrors across centre */ radial-gradient(95% 120% at 101% 58%, rgba(7,14,23,0.55) 0%, rgba(7,14,23,0.18) 40%, rgba(7,14,23,0) 66%), /* controlled vertical navy structure: enclosed top, ink at the foot (no hard bands) */ linear-gradient(180deg, #070E17 0%, #0A121D 5%, #0A121D 58%, #080F19 78%, #070E17 92%, #05090F 100%); } /* φ — one golden logarithmic spiral, intentionally cropped by the viewport (replaces the old construction grid + circles). Hairline, ~5%, subordinate. */ .hero-phi { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.1; } /* archival phi notation — quiet editorial annotations in the left negative space, felt on a second look */ .hero-phi-note { position: absolute; z-index: 0; font-family: var(--font-mono); pointer-events: none; white-space: nowrap; color: rgba(214,222,232,0.11); } /* Phi annotations as real MathML — small, off-centre, near outer sections of the spiral */ .hero-phi-eq { position: absolute; z-index: 0; pointer-events: none; color: rgba(226,232,240,0.021); } .hero-phi-eq math { font-family: 'STIX Two Math', 'Cambria Math', 'Latin Modern Math', 'Newsreader', serif; } .pe-r { bottom: calc(13% + 3cm); left: 4%; font-size: 132px; } /* ghost NOVA — each letter warms like an incandescent filament, in sequence, then cools */ .hg-ghost .hgl { display: inline-block; color: rgba(230,236,244,1); opacity: 0.025; } .hg-ghost .hgl-od { display: inline-block; font-family: 'Georgia','Times New Roman',serif; font-style: italic; font-weight: 400; font-size: 0.6em; color: rgba(230,236,244,1); opacity: 0.025; vertical-align: 0.2em; } .hg-ghost .hgl-dot { display: inline-block; font-size: 0.46em; color: rgba(216,203,176,1); opacity: 0.03; vertical-align: 0.42em; margin: 0 0.05em 0 0.02em; } @media (prefers-reduced-motion: no-preference) { .hg-ghost .hgl { animation: ghostFilament 22s ease-in-out infinite; } .hgl-o { animation-delay: 1.2s; } .hgl-v { animation-delay: 2.4s; } .hgl-a { animation-delay: 3.6s; } } @keyframes ghostFilament { 0% { opacity: 0.025; } 3.5% { opacity: 0.06; text-shadow: 0 0 52px rgba(216,203,176,0.09); } /* warms slowly */ 7% { opacity: 0.029; } 9% { opacity: 0.022; text-shadow: none; } /* brief cooling under-glow */ 12%, 100% { opacity: 0.025; text-shadow: none; } /* settle, then a long quiet gap */ } .hg-ghost { position: absolute; right: -0.14em; bottom: -0.18em; font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 300; font-size: clamp(220px, 30vw, 420px); letter-spacing: 0.04em; line-height: 1; color: rgba(226,232,240,0.019); } #announce, #heroNav, #heroInner { position: relative; z-index: 1; } .hero-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 48px; padding: 20px 0; position: relative; } /* champagne hairline — a precise editorial pause between the mark and the statement. 50% is baked into the colour so the motion reveal settles at the right tone, not full. */ .hero-caesura { display: block; width: 72px; height: 1px; background: rgba(216,203,176,0.5); flex: none; } .hero-word, .hero-support { position: relative; } /* the approved Balanced-duet wordmark — inline SVG matching the master file (assets/images/logo-wordmark-dark.svg) 1:1: Georgia italic od · raised dot · Oswald 300 NOVA, letter-spacing 4/120em, viewBox 0 0 560 150 */ .hero-word { width: min(73vw, 806px); } #heroLogo { display: block; width: 100%; height: auto; overflow: visible; } #heroLogo .hl-od { font-family: 'Newsreader', serif; font-style: italic; font-weight: 300; font-size: 134px; fill: #E1E7EF; } #heroLogo .hl-dot { fill: #D8CBB0; } #heroLogo .hl-nova { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 300; font-size: 120px; letter-spacing: 4px; fill: #F3F6F9; } /* one restrained bronze light pass over the artwork */ .hw-light { position: absolute; inset: -6% -4%; pointer-events: none; mix-blend-mode: screen; opacity: 0; background: linear-gradient(105deg, rgba(240,216,170,0) 38%, rgba(240,216,170,0.28) 47%, rgba(255,241,216,0.42) 51%, rgba(240,216,170,0.28) 55%, rgba(240,216,170,0) 64%); background-size: 300% 100%; background-position: 135% 0; } .hero-support { display: flex; flex-direction: column; align-items: center; gap: 28px; } #eyebrow { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.28em; text-transform: uppercase; color: #A6BACE; display: flex; align-items: center; gap: 14px; } #heroHeadline { font-family: var(--font-serif); font-weight: 300; font-size: clamp(29px, 3.5vw, 45px); line-height: 1.2; letter-spacing: -0.01em; margin: 0; color: var(--text-warm); } .hl-italic { font-style: italic; font-weight: 400; font-size: 1.05em; color: #C2B69C; } /* “refinement.” — deeper warm stone/champagne */ #heroSupport { margin-top: -28px; } /* caesura → headline gap trimmed from 48px to ~20px */ #heroSub { font-family: var(--font-sans); font-weight: 300; font-size: 24px; line-height: 1.55; color: var(--text-body-2); max-width: 500px; margin: 8px auto 34px; } #ctaRow { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } #primaryCta { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; background: transparent; color: #D6C48F; border: 1px solid rgba(214,196,143,0.6); padding: 17px 32px; } #credWrap { margin-top: 54px; padding-top: 26px; border-top: 1px solid var(--line-on-dark); } #credsDesktop { display: flex; flex-wrap: wrap; gap: 11px 24px; font-family: var(--font-sans); font-size: 14px; font-weight: 300; color: var(--text-body-2); } #credsDesktop .cred-name { color: #E0E6EC; font-weight: 400; } #credsDesktop .cred-sep { color: #717C8B; font-size: 13.5px; } #credsMobile { display: none; font-family: var(--font-sans); font-size: 13px; line-height: 1.6; font-weight: 300; color: #A6B2C0; letter-spacing: 0.01em; } #credsMobile .cred-name { color: #EAEDF1; font-weight: 400; } /* credibility links in hero qualification strip — visible but restrained */ #credWrap a.cred-link { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(201,183,154,.42); padding-bottom: 1px; transition: color .3s ease, border-color .3s ease; } #credWrap a.cred-link:hover, #credWrap a.cred-link:focus-visible { color: var(--gold-soft); border-bottom-color: var(--gold); } /* ---------- 3. The approach ---------- */ /* .approach.od-sec: founder statement — measured height instead of forced 100vh */ .approach.od-sec { background: var(--cream-approach); min-height: 100svh; padding: 110px 0; display: flex; flex-direction: column; justify-content: center; } .approach-grid { display: grid; grid-template-columns: 1.8fr 1.2fr; gap: 70px; align-items: center; justify-content: flex-start; } .approach-copy { max-width: 888px; } .approach-us { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.17em; color: #6B5F4E; } /* warmer stone — serif italic “understanding.” */ .approach-founder { display: flex; flex-direction: column; align-items: center; position: relative; } /* high-key partial portrait — Piotr's quiet first presence (v18 §28.2): a narrow vertical fragment dissolving into the paper via multiply + masks; deliberately indirect — a different crop and treatment from Meet Piotr */ .approach-portrait { width: 66%; max-width: 360px; height: 480px; margin: 0 0 26px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 91%, transparent 100%), linear-gradient(to right, transparent 0%, #000 11%, #000 92%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 91%, transparent 100%), linear-gradient(to right, transparent 0%, #000 11%, #000 92%, transparent 100%); mask-composite: intersect; } .approach-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 6%; display: block; filter: grayscale(1) brightness(1.06) contrast(1.08); mix-blend-mode: multiply; } .approach-id { align-self: stretch; text-align: center; margin-top: 10px; } .approach-id-name { font-family: var(--font-sans); font-weight: 400; font-size: 21px; color: var(--ink); } .approach-id-role { font-family: var(--font-mono); font-size: 13.8px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-top: 7px; } .approach-eyebrow { color: var(--ink-soft); margin-bottom: 30px; font-size: 13px; } .approach-title { font-size: 59px; line-height: 1.16; color: var(--ink); margin: 0 0 26px; } .approach-p { font-family: var(--font-sans); font-weight: 300; font-size: 23px; line-height: 1.65; color: var(--ink-body); margin: 0 0 24px; } .approach-pull { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 29px; color: var(--ink); margin: 14px 0 40px; } /* founder credo — deliberate spacing */ .approach-pull .pull-em { position: relative; } .approach-pull .pull-em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.08em; height: 1px; background: var(--gold-deep); transform: scaleX(0); transform-origin: left center; transition: transform 1.1s cubic-bezier(0.22,1,0.36,1); } .approach-pull.pull-active .pull-em::after { transform: scaleX(1); } .approach-signature { display: block; width: 100%; max-width: 286px; height: auto; margin: 0; } /* founder signature — quieter, integrated (−40%) */ .link-ink { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--gold-deep); padding-bottom: 5px; } /* ---------- 4. Two pillars ---------- */ .pillars { background: var(--cream-pillars); } .pillars.od-sec { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; } .pillars-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 52px; } .pillars-eyebrow { color: var(--ink-soft); margin-bottom: 22px; } .pillars-title { font-size: 48px; line-height: 1.12; color: var(--ink); margin: 0 0 12px; } .pillars-us { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.17em; color: #6B5F4E; } /* mirrors the approach's “understanding.” treatment */ .pillars-pull { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 21px; line-height: 1.4; color: #3A4A56; margin: 0; max-width: 640px; } /* measured attention: normal → muted red → dark burgundy (held ~5s) → gently back */ .pillars-pull.pull-attention { animation: pullAttention 9s ease-in-out; } @keyframes pullAttention { 0% { color: #3A4A56; } 12% { color: #A63A2E; } 26% { color: #5C2130; } 80% { color: #5C2130; } 100% { color: #3A4A56; } } .pillars-note { font-family: var(--font-sans); font-weight: 300; font-size: 16.5px; line-height: 1.5; color: var(--ink-body); margin: 0 22px 0 0; max-width: 465px; } .pillars-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* hover: gently enlarge a concern panel ~30% so its content is easier to read */ .pillar-card { position: relative; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s ease; } .pillar-card:hover { transform: scale(1.2); z-index: 6; box-shadow: 0 30px 64px rgba(26,30,34,0.24); } .pillars-grid .pillar-card:first-child:hover { transform-origin: left center; } .pillars-grid .pillar-card:last-child:hover { transform-origin: right center; } /* one shared conclusion + one shared booking action (v18) */ .pillars-foot { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 44px; text-align: center; } .pillars-foot-line { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 21px; color: var(--ink); margin: 0; } .pillar-card { background: var(--cream-card); border: 1px solid rgba(26,30,34,0.13); border-top: 2px solid #1F2A3A; padding: 26px 30px 28px; display: flex; flex-direction: column; align-items: flex-start; } .pillar-card .btn-outline-ink { margin-top: auto; } /* CTAs align across both cards */ .pillar-name { font-family: var(--font-serif); font-weight: 400; font-size: 33px; color: var(--ink); margin: 0 0 6px; } .pillar-tag { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 16px; } .pillar-row { border-top: 1px solid var(--line-on-cream-soft); padding: 9px 0; align-self: stretch; } .pillar-row--last { padding: 9px 0 18px; } .pillar-row-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 9px; } .pillar-row p { font-family: var(--font-sans); font-weight: 300; font-size: 18px; line-height: 1.5; color: var(--ink-card); margin: 0; } .btn-outline-ink { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid #1F2A3A; color: var(--ink); padding: 14px 22px; display: inline-block; } /* ---------- 5. Your consultation ---------- */ .consult { background: var(--navy-section); } .consult.od-sec { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; } .consult-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: 56px; align-items: center; } .consult-eyebrow { color: #6E7A8A; margin-bottom: 28px; } .consult-title { font-family: var(--font-sans); font-weight: 300; font-size: 38px; line-height: 1.24; letter-spacing: -0.01em; color: var(--text-head); margin: 0 0 22px; } .consult-p { font-family: var(--font-sans); font-weight: 300; font-size: 19px; line-height: 1.65; color: var(--text-body); margin: 0 0 14px; max-width: 500px; } .consult-p--gap { margin-bottom: 22px; } .consult-includes-label { font-family: var(--font-mono); font-size: 13.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #93A0AE; margin: 2px 0 8px; } /* Right column: quote card, then the assessment list as a distinct second block */ .consult-side .consult-includes-label { margin-top: 52px; } .consult-list { display: flex; flex-direction: column; } .consult-item { border-top: 1px solid var(--line-on-dark); padding: 13px 0; font-family: var(--font-sans); font-weight: 300; font-size: 21px; line-height: 1.55; color: #B8C2CE; } .consult-item--last { border-bottom: 1px solid var(--line-on-dark); } .consult-fee { font-family: var(--font-mono); font-size: 14.5px; letter-spacing: 0.06em; color: #93A0AE; margin: 16px 0 0; } /* the fee — one quiet line, outside the list */ .quote-card { background: var(--navy-card); border: 1px solid var(--line-on-dark-faint); padding: 30px 32px; position: relative; } .quote-card-mark { position: absolute; bottom: 26px; right: 26px; display: flex; align-items: baseline; font-family: var(--font-serif); color: rgba(201,183,154,0.75); } .qm-od { font-style: italic; font-weight: 300; font-size: 16px; } .qm-dot { color: var(--gold); margin: 0 2px; font-size: 13px; position: relative; top: -0.1em; } .qm-n { letter-spacing: 0.1em; font-size: 13.5px; } .quote-card-quote { font-family: var(--font-serif); font-weight: 300; font-size: 26.5px; line-height: 1.4; color: #F4F6F8; margin: 0 0 18px; } .quote-card-stars { color: var(--gold-soft); letter-spacing: 3px; font-size: 14px; margin-bottom: 16px; } .quote-card-src { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #8D9BAE; } .quote-card.qc-float { animation: quoteFloat 7s ease-in-out infinite; } @keyframes quoteFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } } /* ---------- 6. Treatments (clinical tools) ---------- */ .tools { background: var(--cream-panel); } .tools.od-sec { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; } .tools-head { max-width: 940px; margin-bottom: 8px; } .tools-eyebrow { color: var(--ink-soft); margin-bottom: 22px; } .tools-title { font-size: 51px; line-height: 1.12; color: var(--ink); margin: 0 0 20px; } .tools-intro { font-family: var(--font-sans); font-weight: 300; font-size: 19.5px; line-height: 1.7; color: var(--ink-body); margin: 0; } .tools-assess { margin-top: 30px; border-top: 2px solid rgba(26,30,34,0.32); background: rgba(217,196,158,0.14); padding: 15px 18px; } /* governing principle — one restrained line */ .tools-assess-line { font-family: var(--font-sans); font-weight: 300; font-size: 18.5px; line-height: 1.5; color: var(--ink-body); margin: 0; } .tools-rail { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 28px; align-items: baseline; margin: 22px 0 4px; } /* column headers mirror the row grid */ .tools-rail-right { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .tools-rail-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); } .tools-table { border-bottom: 1px solid var(--line-on-cream); } .od-tool-row { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 28px; padding: 14px 0; border-top: 1px solid var(--line-on-cream); align-items: baseline; } .tool-cat { display: flex; gap: 16px; align-items: baseline; } .tool-num { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.06em; color: #A98F5E; } .tool-cat-name { font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 1.12; color: var(--ink); margin: 0; } .tool-item-name { font-family: var(--font-serif); font-weight: 400; font-size: 21px; line-height: 1.3; color: var(--ink); } .tool-dot { color: #B08D5B; } /* treatment rows read as active/clickable — warm on hover */ .od-tool-row { cursor: pointer; transition: background 0.35s ease; } .od-tool-row:hover { background: rgba(176,141,91,0.07); } .tool-cat-name, .tool-item-name { transition: color 0.3s ease; } .od-tool-row:hover .tool-cat-name, .od-tool-row:hover .tool-item-name { color: #9A7238; } /* each individual treatment highlights further on direct hover — the exact thing the patient will click */ .tool-x { transition: color 0.25s ease; } .tool-x:hover { color: #6E4A1F; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(154,114,56,0.6); } .tools-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 26px; } .tools-foot-note { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink-soft); margin: 0; line-height: 1.8; } .tools-foot-ctas { display: flex; gap: 14px; flex-wrap: wrap; } .btn-gold { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-card); background: var(--gold-btn); padding: 12px 22px; display: inline-block; } .btn-outline-gold { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-card); border: 1px solid var(--gold-deep); padding: 12px 22px; display: inline-block; } /* ---------- 7. Responsible aesthetics — the four principles are the hero ---------- */ .principles { background: var(--navy-deep); } .principles.od-sec { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; } .principles-head { max-width: 780px; margin-bottom: 44px; } .principles-eyebrow { color: #8D9BAE; margin-bottom: 24px; } .principles-title { font-size: 41px; line-height: 1.15; color: var(--text-head); margin: 0 0 16px; } .principles-lede { font-family: var(--font-sans); font-weight: 300; font-size: 19px; line-height: 1.65; color: var(--text-body); margin: 0; max-width: 620px; } /* 2×2 editorial colour fields — deep muted odNOVA tones, straight edges */ .principles-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 980px; } /* narrower tiles, same gap */ .principle-block { padding: 40px 40px 46px; display: flex; flex-direction: column; gap: 22px; min-height: 200px; box-sizing: border-box; transition: filter 0.4s ease; } .principle-block:hover { filter: brightness(1.12); } .pb-num { font-family: var(--font-mono); font-size: 13.5px; letter-spacing: 0.1em; color: var(--gold-soft); } .pb-text { font-family: var(--font-serif); font-weight: 300; font-size: 26px; line-height: 1.42; color: #F1ECE3; margin: 0; max-width: 460px; } .pb-1 { background: var(--principle-1); } .pb-2 { background: var(--principle-2); } .pb-3 { background: var(--principle-3); } .pb-4 { background: var(--principle-4); } .principles-sign { display: flex; justify-content: flex-end; align-items: baseline; gap: 9px; padding: 24px 4px 0; } .sign-dash { font-family: var(--font-serif); font-size: 16px; color: #7E8A98; } .sign-mark { display: inline-flex; align-items: baseline; font-family: var(--font-serif); } .sm-od { font-style: italic; font-weight: 300; font-size: 17px; color: var(--gold-soft); } .sm-dot { color: var(--gold); margin: 0 2px; font-size: 13px; position: relative; top: -0.12em; } .sm-nova { letter-spacing: 0.13em; font-weight: 400; font-size: 14.5px; color: var(--gold-soft); } /* ---------- 7b. A note on appearance — reflective editorial pause (paper) ---------- */ .reflection.od-sec { background: var(--cream-pillars); min-height: 100svh; padding: 130px 0; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; } /* faint golden-ratio echo of the hero arcs — extremely subtle, never competes with text */ .reflection-phi { position: absolute; right: -260px; bottom: -300px; width: 720px; height: 720px; border: 1px solid var(--gold-deep); border-radius: 50%; opacity: 0.07; pointer-events: none; } .reflection-phi::after { content: ""; position: absolute; left: 21%; top: 21%; width: 58%; height: 58%; border: 1px solid var(--gold-deep); border-radius: 50%; } .reflection-inner { max-width: 660px; margin: 0 auto; text-align: center; position: relative; } .reflection-mark { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 42px; } .reflection-mark .rm-rule { width: 34px; height: 1px; background: var(--gold-deep); opacity: 0.65; display: inline-block; } .reflection-mark .rm-dot { color: var(--gold); font-family: var(--font-serif); font-size: 16px; line-height: 1; position: relative; top: -1px; } .reflection-title { font-family: var(--font-serif); font-weight: 300; font-size: clamp(2.5rem, 4.4vw, 3.5rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); margin: 0; text-wrap: balance; } .reflection-title .rt-turn { font-style: italic; font-weight: 400; } .reflection-body { max-width: 620px; margin: 44px auto 0; } .reflection-p { font-family: var(--font-sans); font-weight: 300; font-size: 18px; line-height: 1.75; color: var(--ink-body); margin: 0 0 22px; text-wrap: pretty; } .reflection-p:last-child { margin-bottom: 0; } .reflection-p .rt-emph { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.23em; color: var(--ink); } .reflection-title .rt-a, .reflection-title .rt-b, .reflection-title .rt-turn { display: inline-block; } .clinician-title .mp-one { display: inline-block; font-weight: 700; } .men-photo .men-img { transition: filter 2.1s ease, transform 1.2s cubic-bezier(0.22,1,0.36,1); } .men:hover .men-img { filter: brightness(1.15) contrast(1.03) saturate(1.05) !important; transform: scale(1.03); } .reflection-sign { display: inline-flex; margin-top: 50px; } .reflection-sign .sign-mark { font-family: var(--font-serif); align-items: baseline; } .reflection-sign .sm-od { font-style: italic; font-weight: 300; font-size: 18px; color: var(--gold-deep); } .reflection-sign .sm-dot { color: var(--gold); margin: 0 3px; font-size: 13px; position: relative; top: -0.12em; } .reflection-sign .sm-nova { font-weight: 400; font-size: 14px; letter-spacing: 0.42em; text-indent: 0.42em; color: var(--ink); } /* ---------- 8. The clinician ---------- */ .clinician { background: var(--navy-near-black); position: relative; overflow: hidden; } .clinician.od-sec { padding: 120px 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; } /* editorial page device — large ghost wordmark beside the text column, partially leaving the section edge (v18: moved OFF the photograph) */ .clinician-ghost { position: absolute; right: -0.35em; top: 50%; transform: translateY(-50%); display: flex; align-items: baseline; font-family: var(--font-serif); font-size: clamp(120px, 13vw, 180px); line-height: 1; color: rgba(242,238,230,0.045); pointer-events: none; white-space: nowrap; } .clinician-ghost .cg-od { font-style: italic; font-weight: 300; } .clinician-ghost .cg-dot { color: rgba(192,154,99,0.32); margin: 0 0.04em; font-size: 0.5em; } .clinician-ghost .cg-nova { letter-spacing: 0.1em; font-weight: 400; font-size: 0.82em; } /* logo migration: SVG watermark carries its own 6% opacity — don't compound it */ .clinician-ghost, .reviews-ghost { opacity: 1; } .clinician .od-wrap { position: relative; z-index: 1; } .clinician-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items: center; } #clinicianPanel { position: relative; width: 100%; aspect-ratio: 4/5; overflow: hidden; background: var(--navy-img-well); } #clinicianImg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; /* visible by default (no-JS safe); js/motion.js drives the emerge treatment */ filter: brightness(1.02) saturate(1); will-change: opacity, filter, transform; } .clinician-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,10,16,0.94) 0%, rgba(7,10,16,0.55) 30%, rgba(7,10,16,0.12) 62%, rgba(7,10,16,0.30) 100%); } .clinician-caption { position: absolute; left: 30px; right: 30px; bottom: 28px; } .clinician-cap-name { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 31px; line-height: 1; color: #F4F6F8; } .clinician-eyebrow { color: #8D9BAE; margin-bottom: 26px; } .clinician-title { font-size: 51px; line-height: 1.12; color: var(--text-head); margin: 0 0 18px; } .mp-finish { display: inline-block; } .mp-rule { width: 54px; height: 1px; background: var(--gold); margin: 0 0 26px; } .clinician-p { font-family: var(--font-sans); font-weight: 300; font-size: 20px; line-height: 1.7; color: var(--text-body); margin: 0 0 22px; } .clinician-grid > div:last-child .link-light { display: inline-block; margin-top: 10px; } .link-light { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #EDE8DF; border-bottom: 1px solid var(--gold); padding-bottom: 5px; } /* ---------- 9. Aesthetics for men ---------- */ /* .men.od-sec: substantial, content-driven — v19: +≈90px vs v18 so the portrait has room to develop */ .men.od-sec { min-height: 54svh; padding: 80px 0; } /* half-page rhythm against the full-screen sections */ .men { position: relative; background: linear-gradient(120deg, var(--bronze-1) 0%, var(--bronze-2) 55%, var(--bronze-3) 100%); overflow: hidden; border-top: 1px solid rgba(201,154,99,0.5); border-bottom: 1px solid rgba(201,154,99,0.5); } .men-photo { position: absolute; top: 0; right: 0; width: 60%; height: 100%; display: flex; align-items: center; overflow: hidden; } /* controlled warm light — passes once across the portrait as it emerges (§31.2) */ .men-light { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; background: linear-gradient(100deg, rgba(240,216,170,0) 38%, rgba(240,216,170,0.55) 48%, rgba(255,241,216,0.7) 52%, rgba(240,216,170,0.55) 56%, rgba(240,216,170,0) 66%); background-size: 320% 100%; background-position: 140% 0; opacity: 0; } /* v17 zoom-out: the photograph shows ~35% more of the source frame; soft masks blend it into the bronze ground (no rectangular edge, no white space) */ .men-img { width: 100%; height: 76%; object-fit: cover; object-position: 92% 50%; display: block; -webkit-mask-image: linear-gradient(to left, #000 62%, transparent 99%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to left, #000 62%, transparent 99%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-composite: intersect; } .men-scrim { position: absolute; inset: 0; background: radial-gradient(72% 80% at 19% 32%, rgba(140,99,55,0.60) 0%, rgba(140,99,55,0.16) 42%, rgba(20,13,6,0) 63%), radial-gradient(58% 62% at 95% 5%, rgba(5,3,1,0.78) 0%, rgba(5,3,1,0) 55%), radial-gradient(78% 72% at 100% 100%, rgba(5,3,1,0.80) 0%, rgba(5,3,1,0) 56%), radial-gradient(72% 66% at 4% 106%, rgba(5,3,1,0.66) 0%, rgba(5,3,1,0) 55%), linear-gradient(90deg, rgba(22,15,7,0.34) 0%, rgba(22,15,7,0.10) 46%, rgba(22,15,7,0) 70%); pointer-events: none; } .men-content { position: relative; z-index: 2; pointer-events: none; } .men-eyebrow { color: var(--gold-pale); font-size: 15px; margin-bottom: 24px; } .men-title { font-size: 51px; line-height: 1.14; color: #F0EBE1; margin: 0 0 24px; max-width: 680px; } .men-p { font-family: var(--font-sans); font-weight: 300; font-size: 19.5px; line-height: 1.7; color: #C9BEAA; margin: 0 0 32px; max-width: 470px; } .btn-gold-pale { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #1B1305; background: var(--gold-pale); padding: 15px 28px; display: inline-block; pointer-events: auto; } /* ---------- 10. Results (before / after) ---------- */ /* .results.od-sec (double class) so the 76px padding + auto min-height also beat the generic .od-sec rules inside the 860px media query, exactly as the inline styles did in v15. */ .results.od-sec { background: var(--cream-panel); color: #1B1E22; min-height: 100svh; padding: 96px 0; display: flex; flex-direction: column; justify-content: center; } .results-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; flex-wrap: wrap; gap: 24px; } .results-head-copy { max-width: 560px; } .results-eyebrow { color: var(--ink-soft); margin-bottom: 24px; } .results-title { font-size: 42px; line-height: 1.14; color: var(--ink); margin: 0; } .results-aside { max-width: 340px; } .results-aside p { font-family: var(--font-sans); font-weight: 300; font-size: 19px; line-height: 1.65; color: var(--ink-body); margin: 0 0 16px; } .ba-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 960px; } /* v18: wider, more authoritative plates */ .ba-divider { position: absolute; left: 50%; top: 30px; bottom: 0; width: 1px; background: var(--gold); transform: translateX(-50%); } /* drawn by the development reveal */ .ba-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #5D5950; margin-bottom: 12px; } .ba-label--after { color: var(--gold-deep); } .ba-photo { position: relative; } .ba-photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; } .ba-mark { position: absolute; left: 10px; bottom: 9px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.18em; color: rgba(250,248,243,0.8); text-shadow: 0 1px 5px rgba(10,12,16,0.55); } .results-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: #5D5950; margin: 20px 0 0; line-height: 1.8; } .results-gallery-link { display: inline-block; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--gold); padding-bottom: 6px; margin-top: 4px; } .results-gallery-link:hover { color: var(--gold-deep); } /* ---------- 11. Reviews ---------- */ /* .reviews.od-sec: tall editorial proportions (deliberately paced), without the old forced 100vh. Height lives in the paddings + head→grid gap. */ .reviews.od-sec { background: var(--navy-section); border-top: 1px solid rgba(237,232,223,0.08); position: relative; overflow: hidden; min-height: 100vh; padding: 215px 0 235px; display: flex; flex-direction: column; justify-content: center; } /* v19.1: doubled presence */ .reviews-ghost { position: absolute; bottom: 16px; /* lifted 52px; must not touch bottom edge */ right: 28px; /* full wordmark visible on desktop — final A not cropped */ font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 235px; /* −10% */ line-height: 0.8; white-space: nowrap; color: rgba(237,232,223,0.06); pointer-events: none; user-select: none; } .ghost-dot { font-style: normal; color: rgba(192,154,99,0.10); font-size: 0.82em; position: relative; top: -0.1em; margin: 0 0.05em; } .ghost-nova { font-style: normal; font-weight: 400; letter-spacing: 0.13em; } .reviews-head { text-align: center; margin-bottom: 96px; } .reviews-label { font-family: var(--font-mono); font-size: 15.5px; font-weight: 400; letter-spacing: 0.26em; text-transform: uppercase; color: #9DAAB9; margin: 0 0 16px; } .reviews-stars { color: var(--gold-soft); letter-spacing: 5px; font-size: 23px; } .reviews-sub { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #7E8A9A; margin: 12px 0 0; } .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; max-width: 1200px; margin: 0 auto; } .review { margin: 0; border-top: 1px solid rgba(237,232,223,0.18); padding-top: 34px; } .review blockquote { margin: 0; } .review p { font-family: var(--font-serif); font-weight: 300; font-size: 25px; line-height: 1.5; color: #EDF1F5; margin: 0 0 20px; text-wrap: pretty; } .review-src { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #7E8A9A; } /* ---------- 12. Journal — dark mineral green editorial index ---------- */ .journal { background: var(--journal-green); min-height: 56svh; padding: 88px 0; display: flex; flex-direction: column; justify-content: center; } /* half-screen rhythm */ .journal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 54px; } .journal-eyebrow { color: var(--journal-muted); margin-bottom: 20px; } .journal-title { font-size: 46px; line-height: 1.1; color: var(--journal-text); margin: 0; } .journal-all { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--journal-text); border-bottom: 1px solid var(--journal-gold); padding-bottom: 4px; } .journal-all:hover { color: var(--journal-gold); } .journal-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 56px; } .journal-entry { display: flex; flex-direction: column; border-top: 1px solid var(--journal-line); padding: 26px 0 8px; } .journal-entry-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 18px; } .journal-no { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.06em; color: var(--journal-gold); } .journal-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--journal-muted); } .journal-entry-title { font-family: var(--font-serif); font-weight: 400; font-size: 25px; line-height: 1.28; color: var(--journal-text); margin: 0 0 10px; } .journal-entry-p { font-family: var(--font-sans); font-weight: 300; font-size: 17px; line-height: 1.55; color: var(--journal-muted); margin: 0 0 20px; } .journal-read { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--journal-gold); margin-top: auto; } .journal-read-arrow { display: inline-block; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); } .journal-entry:hover .journal-entry-title { color: #FFFFFF; } .journal-entry:hover .journal-read-arrow { transform: translateX(5px); } .journal-sign { display: flex; justify-content: flex-end; align-items: baseline; gap: 9px; margin-top: 40px; } .journal-sign .sign-dash { color: var(--journal-muted); } /* ---------- Notes from od·NOVA — standalone sign-up section (v19 §11.2) ---------- */ .notes { background: var(--cream-approach); min-height: 30svh; padding: 46px 0; display: flex; align-items: center; } /* quarter-screen tile */ .notes .od-wrap { width: 100%; } .notes-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 70px; align-items: start; } .notes-eyebrow { color: var(--ink-soft); margin-bottom: 26px; } .notes-title { font-family: var(--font-serif); font-weight: 300; font-size: 37px; line-height: 1.18; color: var(--ink); margin: 0 0 16px; } .notes-p { font-family: var(--font-sans); font-weight: 300; font-size: 21px; line-height: 1.6; color: var(--ink-body); margin: 0; max-width: 500px; } .notes-form { padding-top: 8px; } .notes-form .form-field { margin-bottom: 6px; } .notes .form-input { background: #F7F4EC; border: 1px solid rgba(31,42,58,0.45); border-bottom: 1px solid rgba(31,42,58,0.7); padding: 13px 14px; color: var(--ink); font-weight: 400; } .notes .form-input::placeholder { color: rgba(31,42,58,0.45); } .notes .form-label { color: #343B46; font-weight: 500; font-size: 11.5px; letter-spacing: 0.16em; } .notes .form-input:focus { border-color: var(--gold-deep); border-bottom-color: var(--gold-deep); background: #FBF9F4; } .notes .form-consent-text { color: #3E4147; } .notes .form-check { accent-color: var(--gold-deep); width: 16px; height: 16px; border: 1px solid rgba(31,42,58,0.55); } .notes input.form-check:checked { background: var(--gold-deep); border-color: var(--gold-deep); } .notes .su-submit { border: 1px solid #191C22; color: #191C22; background: transparent; } .notes .su-submit:not([disabled]):hover { background: #191C22; color: var(--cream-approach); } .notes .su-submit[disabled] { opacity: 0.5; } .notes .signup-privacy { color: var(--ink-soft); } .notes .signup-privacy a { border-bottom-color: var(--gold-deep); } .notes .form-error { color: #9C4B38; } .notes .form-status { color: var(--ink-body); } /* ---------- engagement modal shared bits ---------- */ .su-fields { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 18px; margin-bottom: 16px; } .su-consent-text { font-family: var(--font-sans); font-weight: 300; font-size: 12.5px; line-height: 1.55; } .su-ctas { display: flex; align-items: center; gap: 22px; margin: 18px 0 14px; } .su-submit[disabled] { opacity: 0.45; cursor: not-allowed; } .signup-privacy { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; line-height: 1.6; color: #8AA096; margin: 0; } .signup-privacy a { color: inherit; border-bottom: 1px solid var(--journal-gold); padding-bottom: 1px; } .signup-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; } .signup-overlay[hidden] { display: none; } .signup-veil { position: absolute; inset: 0; background: rgba(3,6,11,0.68); opacity: 0; transition: opacity 0.35s ease; } .signup-panel { position: relative; width: min(76vw, 920px); max-height: 90vh; overflow-y: auto; background: #0B1119; border: 1px solid rgba(237,232,223,0.14); padding: 54px 58px 44px; opacity: 0; transform: translateY(14px); transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1); } .signup-overlay.open .signup-veil { opacity: 1; } .signup-overlay.open .signup-panel { opacity: 1; transform: translateY(0); } .signup-close { position: absolute; top: 20px; right: 20px; width: 26px; height: 26px; background: transparent; border: 0; cursor: pointer; } .signup-brand { display: flex; align-items: baseline; font-family: var(--font-serif); font-size: 44px; color: #F2EEE6; margin-bottom: 26px; } .signup-brand .su-od { font-style: italic; font-weight: 300; } .signup-brand .su-bdot { color: var(--gold); margin: 0 5px; font-size: 0.8em; } .signup-brand .su-nova { letter-spacing: 0.18em; font-weight: 400; font-size: 0.88em; } .signup-marker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 18px; } .signup-title { font-family: var(--font-serif); font-weight: 300; font-size: 30px; line-height: 1.2; color: var(--text-head); margin: 0 0 14px; } .signup-p { font-family: var(--font-sans); font-weight: 300; font-size: 16px; line-height: 1.65; color: var(--text-body); margin: 0 0 28px; max-width: 560px; } .signup-form .form-consent-text { color: #93A0AE; } .signup-form .form-label { color: #93A0AE; } .signup-form .signup-privacy { color: #6E7A8A; } .signup-form .signup-privacy a { border-bottom-color: var(--gold); } .signup-later { background: transparent; border: 0; cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8D9BAE; border-bottom: 1px solid rgba(237,232,223,0.25); padding: 0 0 3px; } .signup-later:hover { color: #C4CEDA; } /* ---------- 13. Final brand CTA — animated od·NOVA ident (over pinned atmosphere) ---------- */ .cta { background: rgba(9,12,18,0.72); } .cta.od-sec { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; } .cta .od-wrap { text-align: center; } /* the ident — the section's main object (≈2.8× the previous colophon) */ /* the ident — the exact approved Balanced-duet artwork (same master as the hero) */ .cta-ident { display: flex; justify-content: center; } .ci-logo { display: block; width: min(56vw, 380px); height: auto; overflow: visible; } .ci-logo .hl-od { font-family: 'Newsreader', serif; font-style: italic; font-weight: 300; font-size: 134px; fill: #E1E7EF; } .ci-logo .hl-dot { fill: #D8CBB0; } .ci-logo .hl-nova { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 300; font-size: 120px; letter-spacing: 4px; fill: #F3F6F9; } .ci-rule { width: 72px; height: 1px; background: var(--gold); margin: 30px auto 34px; } .cta-title { font-family: var(--font-sans); font-weight: 300; letter-spacing: -0.01em; font-size: 40px; line-height: 1.12; color: var(--text-warm); margin: 0 auto 24px; max-width: none; } .cta-stone { color: #D5CCBF; } /* “consultation.” — deeper stone, no italic, no gold */ .cta-p { font-family: var(--font-sans); font-weight: 300; font-size: 23px; line-height: 1.6; color: #B7C1CD; margin: 0 auto 44px; max-width: 560px; } .cta-row { display: flex; gap: 28px; justify-content: center; align-items: center; flex-wrap: wrap; } .btn-cream { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; background: #EDE8DF; color: var(--navy-card); padding: 18px 36px; } .cta-sub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #8D9BAE; margin-top: 26px; } /* ---------- 14. Contact info blocks (merged into section 15) ---------- */ .contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 40px; } .enquiry-cards { margin: 28px 0 24px; } .contact-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } .contact-value { font-family: var(--font-sans); font-weight: 300; font-size: 15.5px; color: #D6DEE6; line-height: 1.55; } a.contact-value { color: #D6DEE6; line-height: normal; } /* v15: the email link declared no line-height */ .contact-link { color: #D6DEE6; border-bottom: 1px solid var(--gold); padding-bottom: 2px; } .contact-link:hover { color: var(--gold-soft); } .contact-dim { color: #6E7A8A; } /* ---------- 15. Enquiry form ---------- */ /* .enquiry.od-sec: single merged appointments+form section — measured height */ .enquiry.od-sec { background: var(--navy-contact); min-height: 76svh; padding: 104px 0; display: flex; flex-direction: column; justify-content: center; } /* 3/4-screen tile */ .enquiry-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items: start; } .enquiry-eyebrow { color: #8D9BAE; margin-bottom: 22px; } .enquiry-title { font-family: var(--font-serif); font-weight: 300; font-size: 34.5px; line-height: 1.2; color: var(--text-head); margin: 0 0 18px; } .enquiry-p { font-family: var(--font-sans); font-weight: 300; font-size: 18.5px; line-height: 1.65; color: var(--text-body); margin: 0 0 18px; } .enquiry-note { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; line-height: 1.65; color: #6E7A8A; margin: 0; } .form-card { background: var(--navy-form-card); border: 1px solid var(--line-on-dark-faint); padding: 36px 34px; } .form-fields { display: flex; flex-direction: column; gap: 20px; font-family: var(--font-sans); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-label { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #93A0AE; margin-bottom: 8px; } .form-input { display: block; width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(237,232,223,0.22); border-radius: 0; height: 32px; color: var(--text-head); font-family: var(--font-sans); font-weight: 300; font-size: 15px; padding: 0; } textarea.form-area { display: block; width: 100%; background: transparent; border: 1px solid rgba(237,232,223,0.22); border-radius: 0; min-height: 70px; resize: vertical; color: var(--text-head); font-family: var(--font-sans); font-weight: 300; font-size: 15px; line-height: 1.5; padding: 10px 12px; } select.form-select { display: block; width: 100%; background: transparent; border: 1px solid rgba(237,232,223,0.22); border-radius: 0; padding: 9px 12px; font-family: var(--font-sans); font-size: 13px; font-weight: 300; color: #D6DEE6; } select.form-select option { color: var(--navy-card); } .form-consent { display: flex; gap: 10px; align-items: flex-start; } input.form-check { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 1px solid rgba(237,232,223,0.35); background: transparent; margin: 2px 0 0; flex: none; cursor: pointer; } input.form-check:checked { background: var(--gold); border-color: var(--gold); } .form-consent-text { font-size: 12.5px; font-weight: 300; color: var(--text-soft); line-height: 1.5; cursor: pointer; } .form-privacy { color: #D2D9E1; border-bottom: 1px solid rgba(192,154,99,0.5); } .form-ctas { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 4px; } .btn-cream-sm { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; background: #EDE8DF; color: var(--navy-card); padding: 15px 26px; } .link-underline { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #D2D9E1; border-bottom: 1px solid var(--gold); padding-bottom: 5px; } button.form-submit { border: 0; cursor: pointer; display: inline-block; } .form-error { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; color: #C97B6A; margin: 7px 0 0; } .form-status { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; line-height: 1.7; color: var(--gold-soft); border: 1px solid rgba(201,183,154,0.35); padding: 12px 14px; margin: 4px 0 0; } .form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .form-input:focus-visible, textarea.form-area:focus-visible, select.form-select:focus-visible, input.form-check:focus-visible, button.form-submit:focus-visible, a:focus-visible { outline: 1px solid rgba(192,154,99,0.8); outline-offset: 3px; } /* ---------- 16. Footer ---------- */ .footer { background: var(--navy-near-black); color: #8D9BAE; } /* .od-wrap.footer-wrap (double class): top/bottom padding must survive the 860px media `.od-wrap { padding: 0 24px }` rule, exactly as the inline padding did in v15 (sides still collapse to 24px there). */ .od-wrap.footer-wrap { padding-top: 60px; padding-bottom: 40px; } .od-foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--line-on-dark-faint); } .footer-brand { max-width: 280px; } .footer-mark { font-size: 29px; margin-bottom: 10px; } .footer-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 16px; } .footer-brand p { font-family: var(--font-sans); font-weight: 300; font-size: 15px; line-height: 1.65; margin: 0; } .footer-col { display: flex; flex-direction: column; gap: 12px; font-family: var(--font-mono); } .footer-col-label { font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #8B98A8; margin-bottom: 4px; } .footer-col a { font-size: 13.5px; letter-spacing: 0.06em; color: #99A7B9; overflow-wrap: anywhere; } .footer-col span { font-size: 13.5px; letter-spacing: 0.06em; overflow-wrap: anywhere; } .footer-legal-links a { color: inherit; border-bottom: 1px solid rgba(237,232,223,0.16); padding-bottom: 2px; } .footer-legal-links a:hover { color: #99A7B9; } .footer-legal { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 26px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: #8B98A8; } /* ---------- 16c. Compact mobile footer (approved 2026-07-26) ---------- The footer read like another content page at 949px tall. Every item, address, practice signal and legal link is preserved; the height comes out of PADDING, GAPS and the type scale only. Nav/legal tap targets stay 44px, so the 13 nav links legitimately account for 572px of the remaining height. Scoped to <=600px: tablet (601-860px) and desktop are untouched. Does not touch .od-prov. */ @media (max-width: 600px) { .od-wrap.footer-wrap { padding-top: 26px; padding-bottom: 20px; } .od-foot { gap: 18px; padding-bottom: 18px; } .footer-mark { font-size: 23px !important; margin-bottom: 6px; } .footer-tag { margin-bottom: 10px; } .footer-brand p { font-size: 14.5px !important; line-height: 1.5 !important; } .footer-col-label { font-size: 11px !important; margin-bottom: 3px; } .footer-col a, .footer-col span { font-size: 13.5px !important; } .footer-legal { padding-top: 14px; gap: 8px; } } /* ---------- 16d. Footer row-pairing + spacing (2026-07-27) ---------- 16c took the height out of padding and type but left the real waste in place: the 2x2 grid pairs .footer-brand (183px intrinsic) with Explore (326px) and Contact (132px) with Practice (282px), so each row is sized by its taller cell and 293px of the footer is empty stretch. Re-pairing with `order` puts the two SHORT blocks in row 1 and the two TALL blocks in row 2, which costs nothing and removes most of that waste. Every link, the address, the practice signal, Aesthetics for Men and all three local legal links are preserved, and every nav/legal target stays 44px. Type sizes for this pass live in the responsive.css tail - the 860px block's !important rules load after this file and would otherwise win. Scoped <=600px; does not touch .od-prov. */ @media (max-width: 600px) { .od-wrap.footer-wrap { padding-top: 20px; padding-bottom: 14px; } .od-foot { align-items: start; gap: 14px 20px; padding-bottom: 14px; } .footer-brand { order: 1; max-width: none; } /* nth-of-type counts ALL div siblings, so .footer-brand is (1) and the three .footer-col blocks are (2) Explore, (3) Practice, (4) Contact. */ .footer-col:nth-of-type(4) { order: 2; } /* Contact - short, joins row 1 */ .footer-col:nth-of-type(2) { order: 3; } /* Explore - tall, opens row 2 */ .footer-col:nth-of-type(3) { order: 4; } /* Practice - tall, closes row 2 */ .footer-mark { font-size: 21px !important; margin-bottom: 4px; } .footer-tag { letter-spacing: 0.22em; line-height: 1.35; margin-bottom: 7px; } .footer-col-label { letter-spacing: 0.16em; margin-bottom: 2px; } .footer-col a { line-height: 1.3; } .footer-col span { min-height: 30px; line-height: 1.35; } .footer-legal { padding-top: 12px; gap: 6px; } .footer-legal-links { gap: 0 10px; } } /* ---------- 16e. Footer group-label tone (2026-07-27) ---------- EXPLORE / PRACTICE / CONTACT move off the cool grey #8B98A8 onto the approved warm token var(--gold) #C09A63 - 7.64:1 on the #050A07 footer ground, AA pass. The brand eyebrow keeps the brighter --gold-soft, so the labels read as a quieter tier rather than brightening the footer. The legal-row rules that were originally drafted here now live in section 16f below: they have to sit AFTER section 16b, which declares .footer-legal-links{flex-wrap:wrap;gap:0 12px} and .footer-legal{gap:10px} later in this file and would otherwise win. */ @media (max-width: 600px) { .footer-col-label { color: var(--gold); } } /* ---------- 17. Mobile menu overlay ---------- */ #mobileMenu { display: none; position: fixed; inset: 0; z-index: 60; flex-direction: column; background: var(--navy-menu); color: #EDE8DF; } #mobileMenu.open { display: flex; } .menu-shade { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(7,10,16,0.95), rgba(7,10,16,0.9)); } .menu-frame { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; padding: max(22px, env(safe-area-inset-top)) 0 0; } .menu-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 26px 16px; } .menu-mark { font-size: 24px; } #menuClose { position: relative; width: 28px; height: 28px; cursor: pointer; background: transparent; border: 0; padding: 0; } .menu-x { position: absolute; top: 13px; left: 1px; width: 26px; height: 1.5px; background: #CDD5DF; display: block; } .menu-x--a { transform: rotate(45deg); } .menu-x--b { transform: rotate(-45deg); } .menu-list { flex: 1; display: flex; flex-direction: column; padding: 6px 26px 0; overflow-y: auto; } .menu-link { display: flex; align-items: baseline; gap: 13px; padding: 14px 0; border-top: 1px solid var(--line-on-dark-soft); font-family: var(--font-serif); font-size: 24px; color: #EDE8DF; } .menu-link--last { border-bottom: 1px solid var(--line-on-dark-soft); } .menu-num { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--gold); } /* discreet reappearing booking affordance after the hero */ #stickyBook { position: fixed; top: 18px; right: 22px; z-index: 90; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #0A121D; background: #EDE8DF; padding: 11px 22px; border: 1px solid rgba(237,232,223,0.6); opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity 0.5s ease, transform 0.5s ease, background 0.3s ease; box-shadow: 0 12px 32px rgba(5,8,13,0.3); } #stickyBook.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } #stickyBook:hover { background: #FBF9F4; } @media (prefers-reduced-motion: reduce) { #stickyBook { transition: opacity 0.2s ease; transform: none; } } .menu-foot { padding: 22px 26px calc(28px + env(safe-area-inset-bottom)); } .menu-cta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; background: #EDE8DF; color: var(--navy-card); padding: 18px 0; text-align: center; display: block; margin-bottom: 20px; } .menu-contact { text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: #97A3B2; line-height: 1.95; } .menu-contact-hi { color: #C4CEDA; } /* next-chapter hero cue */ .od-cue{align-self:center;margin:auto auto 0;width:max-content;max-width:90%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:clamp(26px,5vh,46px) 12px max(16px,env(safe-area-inset-bottom));font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;text-align:center;color:var(--gold-soft);text-decoration:none;position:relative;z-index:3;} .od-cue:hover,.od-cue:focus-visible{color:#EDE8DF;} .od-cue::after{content:"";width:1px;height:26px;background:linear-gradient(var(--gold),rgba(201,183,154,0));transform-origin:top;animation:odCue 2.6s ease-in-out infinite;} @keyframes odCue{0%{transform:scaleY(.16);opacity:.35;}45%{transform:scaleY(1) translateY(0);opacity:1;}100%{transform:scaleY(1) translateY(12px);opacity:0;}} @media(prefers-reduced-motion:reduce){.od-cue::after{animation:none;transform:none;opacity:1;background:var(--gold);}} .od-cue .odc-mark{text-transform:none;letter-spacing:.14em;} .od-cue .odc-dot{color:var(--gold);margin:0 .04em;} /* HEADER UTILITY LABEL LINKS (canonical header standard) #annL -> Consultation, #annR -> Contact map/location section (#find). They are real links but must remain visually identical to plain text in every state; only keyboard focus reveals an indicator. No layout or paint change. */ #announce #annL a, #announce #annR a, #announce #annL a:link, #announce #annR a:link, #announce #annL a:visited, #announce #annR a:visited, #announce #annL a:hover, #announce #annR a:hover, #announce #annL a:active, #announce #annR a:active { color: inherit; background: none; text-decoration: none; font: inherit; letter-spacing: inherit; text-transform: inherit; opacity: 1; border: 0; box-shadow: none; transform: none; } #announce #annL a:focus, #announce #annR a:focus { outline: none; } #announce #annL a:focus-visible, #announce #annR a:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; border-radius: 1px; } /* ---------- 16b. Footer accessibility (approved 2026-07-26) ---------- AA contrast on the legal line and column labels, and 44px standalone targets on mobile. Quiet tone preserved: box size and spacing only, no buttons, no colour beyond the grey ramp, no copy change. */ @media (max-width: 600px) { .footer-col { gap: 0; } .footer-col a { display: inline-flex; align-items: center; min-height: 44px; } .footer-col span { display: inline-flex; align-items: center; min-height: 32px; } .footer-legal { gap: 10px; } .footer-legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; } .footer-legal-links a { display: inline-flex; align-items: center; min-height: 44px; } } /* ---------- 16f. Footer legal row, single line (2026-07-27) ---------- Must follow 16b - see the note in 16e. Puts Privacy Policy / Terms & Conditions / Complaints Policy on ONE row at 360 and 390 with all three local links and their full labels, and closes the gap between the JCCP copyright line and that row. Links stay 44px tall. */ @media (max-width: 600px) { .footer-legal { gap: 2px; } } /* The nowrap rules below NEED A LOWER BOUND. The copyright row is 314px and the legal row 312px; below 360px the content box is narrower than that, and with nowrap they cannot reflow, so they punch out of the footer and the whole page pans sideways (measured at 320: 17px document overflow, 3 clipped elements, footer inflating 600 -> 619px). 360px is the approved mobile baseline, so anything narrower falls back to the previous wrapping behaviour. */ @media (min-width: 360px) and (max-width: 600px) { .footer-legal-links { flex-wrap: nowrap; white-space: nowrap; gap: 0 4px; letter-spacing: 0.01em; font-size: 9.5px; } .footer-legal-links a { padding-bottom: 1px; } } /* The COPYRIGHT nowrap rule is deliberately NOT here. It lives page-locally on the three canonical treatment pages (