/* ============================================================ SARAH HOPE COUNSELLING — FINAL DESIGN SYSTEM Two complete art directions, one markup: Light — "The Morning Room" (cream, green ink, gold hairlines) Dark — "The Evening Room" (candlelit forest green + gold) Theme is set on by the inline head snippet (see partials.html). NO hardcoded colors in page markup — every color routes through the tokens below. Contrast verified (WCAG 2.1, computed 2026-07-07): LIGHT ink #1C2723 on paper 14.01 · on paper-deep 12.73 · on card 14.62 ink-soft #4E5B56 on paper 6.47 / paper-deep 5.88 / card 6.75 gold-text #7E6234 on paper 5.19 / paper-deep 4.71 / card 5.41 (spec's #85683A failed on paper-deep at 4.30 → darkened) link green-deep #3a5f46 on paper 6.58 · btn text #F7F4EC on #3a5f46 6.58, on hover #2B4A37 8.94 DARK ink #F3F1E9 on paper 13.54 / paper-deep 15.38 / card 12.09 ink-soft #C4CCC2 on paper 9.31 / card 8.31 gold-text #D5C084 on paper 8.54 / card 7.62 link #9DC1AA on paper 7.76 · btn text #14201B on gold #BFA760 7.12, hover #A68F4B 5.31 ANCHOR (both themes) text #F3F1E9 on #16291F 13.54 · soft #C6CEC6 9.51 gold #D5C084 8.54 · input text on field 11.17 · placeholder 6.13 (placeholder computed on the composited field bg #26372D) field border (40% anchor-text mix) 3.38 vs band · 3.14 vs field (non-text ≥3:1) FOCUS light rings use --gold-text #7E6234 (5.19 on paper — #BFA760 was only ~2.1); dark + anchor surfaces stay gold (≥6.5) ============================================================ */ /* ------------------------------------------------------------ 1. TOKENS ------------------------------------------------------------ */ :root{ color-scheme:light; /* Light — The Morning Room */ --paper:#F7F4EC; --paper-deep:#EFE9DC; --card:#FBF9F3; --ink:#1C2723; --ink-strong:#14201B; --ink-soft:#4E5B56; --green:#4a7c59; /* decorative strokes / large accents only in light */ --green-deep:#3a5f46; --green-deeper:#2B4A37; --gold:#BFA760; /* decorative hairlines only — never body text */ --gold-text:#7E6234; /* small-caps eyebrows / engraved accents (AA on all light surfaces) */ --focus:var(--gold-text); /* focus rings — plain --gold is ~2.1:1 on light paper, below the 3:1 non-text minimum */ /* Anchor band + footer — the deep-green immersive moment, BOTH themes */ --anchor:#16291F; --anchor-deep:#0F1D16; --anchor-text:#F3F1E9; --anchor-soft:#C6CEC6; --gold-anchor:#D5C084; /* gold on the anchor band, constant across themes */ /* Semantic derivations */ --accent-em:var(--green-deep); /* italic inside headings */ --link:var(--green-deep); --link-hover:var(--green-deeper); --btn-bg:var(--green-deep); --btn-text:#F7F4EC; --btn-bg-hover:var(--green-deeper); --btn2-text:var(--green-deep); /* secondary button text */ --hairline:color-mix(in srgb, var(--ink) 14%, transparent); --hairline-soft:color-mix(in srgb, var(--ink) 8%, transparent); --hairline-gold:color-mix(in srgb, var(--gold) 46%, transparent); --hairline-gold-in:color-mix(in srgb, var(--gold) 25%, transparent); /* inner frame rule */ --hairline-anchor:color-mix(in srgb, var(--anchor-text) 18%, transparent); --gold-veil:color-mix(in srgb, var(--gold) 9%, transparent); --raise:color-mix(in srgb, var(--ink) 4%, transparent); --plaque-bg:color-mix(in srgb, var(--ink) 3%, transparent); --shadow:0 20px 44px rgba(20,32,27,.10); --shadow-soft:0 10px 26px rgba(20,32,27,.08); --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.04'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); --serif:'Lora',Georgia,serif; --sans:'Mulish',system-ui,-apple-system,sans-serif; } html[data-theme="dark"]{ color-scheme:dark; /* Dark — The Evening Room */ --paper:#16291F; --paper-deep:#0F1D16; --card:#1D3226; --ink:#F3F1E9; --ink-strong:#FBFAF4; --ink-soft:#C4CCC2; --green:#7FA88E; --green-deep:#9DC1AA; --green-deeper:#C6DCCE; --gold:#BFA760; --gold-text:#D5C084; --focus:var(--gold); /* gold reads ~6.5:1 on the evening paper — safe for rings here */ --anchor:#0C1712; --anchor-deep:#091210; --accent-em:var(--gold-text); --link:var(--green-deep); --link-hover:var(--green-deeper); --btn-bg:var(--gold); --btn-text:#14201B; --btn-bg-hover:#A68F4B; --btn2-text:var(--ink); --hairline:color-mix(in srgb, var(--ink) 16%, transparent); --hairline-soft:color-mix(in srgb, var(--ink) 9%, transparent); --raise:color-mix(in srgb, var(--ink) 5%, transparent); --plaque-bg:color-mix(in srgb, var(--ink) 4%, transparent); --shadow:0 20px 44px rgba(0,0,0,.45); --shadow-soft:0 10px 26px rgba(0,0,0,.35); } /* ------------------------------------------------------------ 2. BASE ------------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background-color:var(--paper); background-image:var(--grain); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.8; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; /* belt-and-braces: decorative absolutes never cause a scrollbar */ } h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote,figcaption,cite,address{margin:0;padding:0;} blockquote{border:0;background:none;font-style:normal;quotes:none;} address{font-style:normal;} h1,h2,h3,h4{ font-family:var(--serif); color:var(--ink); font-weight:500; letter-spacing:-0.01em; line-height:1.14; } h1 em,h2 em,h3 em{font-style:italic;color:var(--accent-em);} p{color:var(--ink);} a{color:var(--link);text-decoration:none;} a:hover{color:var(--link-hover);} img{display:block;max-width:100%;height:auto;} iframe{max-width:100%;} button{font:inherit;} ::selection{background:color-mix(in srgb, var(--gold) 32%, transparent);} a:focus-visible,button:focus-visible,summary:focus-visible, input:focus-visible,select:focus-visible,textarea:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--focus);outline-offset:3px;border-radius:2px; } /* deep anchor surfaces (booking band, footer, preview bar): the light-theme --focus is too dark there — keep the constant anchor gold (≈8.5:1) */ .band-anchor :focus-visible,.footer :focus-visible,.lc-bar :focus-visible{outline-color:var(--gold-anchor);} [id]{scroll-margin-top:84px;} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* skip link */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:400; font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.08em; } .skip-link:focus{ left:14px;top:14px;position:fixed; background:var(--gold);color:#14201B; padding:.8em 1.4em;border-radius:3px;outline-offset:2px; text-decoration:none;box-shadow:var(--shadow-soft); } /* ------------------------------------------------------------ 3. PRIMITIVES ------------------------------------------------------------ */ .wrap{max-width:1320px;margin:0 auto;padding-left:clamp(22px,5vw,64px);padding-right:clamp(22px,5vw,64px);} .wrap-narrow{max-width:900px;margin:0 auto;padding-left:clamp(22px,5vw,64px);padding-right:clamp(22px,5vw,64px);} /* band system — every
carries one of these */ .band,.band-alt,.band-anchor{ position:relative; padding-top:clamp(80px,12vw,160px); padding-bottom:clamp(80px,12vw,160px); } .band{background-color:var(--paper);background-image:var(--grain);} .band-alt{background-color:var(--paper-deep);background-image:var(--grain);} .band-anchor{ background-color:var(--anchor); background-image:var(--grain),linear-gradient(180deg,var(--anchor) 0%,var(--anchor-deep) 100%); color:var(--anchor-text); } .band--compact{padding-top:clamp(56px,8vw,100px);padding-bottom:clamp(56px,8vw,100px);} .band--hairline{border-top:1px solid var(--hairline);} .overflow-clip{overflow:hidden;} /* add to sections that place a .botanical */ /* anchor-band content recolouring */ .band-anchor h1,.band-anchor h2,.band-anchor h3,.band-anchor h4{color:var(--anchor-text);} .band-anchor h1 em,.band-anchor h2 em,.band-anchor h3 em{color:var(--gold-anchor);} .band-anchor p{color:var(--anchor-soft);} .band-anchor a{color:var(--gold-anchor);} .band-anchor a:hover{color:var(--anchor-text);} .band-anchor .lede{color:var(--anchor-soft);} /* eyebrow — small caps with 34px gold dash */ .eyebrow{ display:inline-flex;align-items:center;gap:.9em; font-family:var(--sans);font-size:.68rem;font-weight:700; letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text); line-height:1.6; } .eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);display:inline-block;flex:none;} .band-anchor .eyebrow{color:var(--gold-anchor);} .band-anchor .eyebrow::before{background:var(--gold-anchor);} /* lede */ .lede{ font-family:var(--serif); font-size:clamp(1.16rem,2vw,1.4rem);line-height:1.64; font-weight:400;color:var(--ink-soft); } /* generic section head (eyebrow + h2 + intro) */ .sec-head{max-width:36em;} .sec-head h2{font-size:clamp(1.9rem,4vw,3rem);margin-top:1.3rem;line-height:1.18;} .sec-head p{margin-top:1.3rem;color:var(--ink-soft);max-width:33em;} .sec-head .lede{margin-top:clamp(1.5rem,2.8vw,2.1rem);} .band-anchor .sec-head p{color:var(--anchor-soft);} /* prose block */ .prose{max-width:36em;} .prose p{color:var(--ink-soft);} .prose p+p{margin-top:1.2em;} .prose p strong,.prose p b{color:var(--ink);font-weight:600;} .prose p em{font-family:var(--serif);font-style:italic;color:var(--ink);} .prose a:not(.btn){border-bottom:1px solid var(--hairline-gold);transition:border-color .25s ease,color .25s ease;} .prose a:not(.btn):hover{border-bottom-color:var(--gold);} .prose-cols{column-count:2;column-gap:clamp(40px,5vw,72px);max-width:none;} .prose-cols p{break-inside:avoid;} /* ------------------------------------------------------------ 4. BUTTONS + CTA ------------------------------------------------------------ */ .btn{ display:inline-block;background:var(--btn-bg);color:var(--btn-text); font-family:var(--sans);font-size:.76rem;font-weight:700; letter-spacing:.18em;text-indent:.18em;text-transform:uppercase;text-align:center; padding:1.15em 2.3em;border:1px solid var(--btn-bg);border-radius:3px;cursor:pointer; white-space:nowrap;transition:background-color .3s ease,border-color .3s ease,color .3s ease; } .btn:hover{background:var(--btn-bg-hover);border-color:var(--btn-bg-hover);color:var(--btn-text);} .btn-line{background:transparent;color:var(--btn2-text);border-color:var(--hairline-gold);} .btn-line:hover{background:var(--gold-veil);color:var(--btn2-text);border-color:var(--gold);} /* on the anchor band (and footer) the primary button is ALWAYS gold */ .band-anchor .btn,.footer .btn{background:var(--gold);border-color:var(--gold);color:#14201B;} .band-anchor .btn:hover,.footer .btn:hover{background:#A68F4B;border-color:#A68F4B;color:#14201B;} .band-anchor .btn-line,.footer .btn-line{background:transparent;color:var(--anchor-text);border-color:var(--hairline-gold);} .band-anchor .btn-line:hover,.footer .btn-line:hover{background:color-mix(in srgb, var(--gold) 14%, transparent);color:var(--anchor-text);border-color:var(--gold);} .cta-pair{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;} /* shared rhythm offsets (used by home + burnout — keep pages inline-style-free) */ .cta-after{margin-top:clamp(2.8rem,5vw,4.2rem);} /* CTA pair after a ledger / steps block */ .card-after{margin-top:clamp(2.2rem,4vw,3rem);} /* card that follows a section head */ .cta-tel{font-family:var(--sans);font-weight:600;letter-spacing:.04em;color:var(--link);white-space:nowrap;} .cta-tel:hover{color:var(--link-hover);} .band-anchor .cta-tel{color:var(--anchor-text);} .band-anchor .cta-tel:hover{color:var(--gold-anchor);} /* uppercase text link with arrow */ .textlink{ display:inline-block; font-family:var(--sans);font-size:.76rem;font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:var(--link); padding-bottom:.35em;border-bottom:1px solid var(--gold); transition:color .25s ease,border-color .25s ease; } .textlink::after{content:"\2192";display:inline-block;margin-left:.55em;transition:transform .25s ease;} .textlink:hover{color:var(--link-hover);} .textlink:hover::after{transform:translateX(4px);} /* ------------------------------------------------------------ 5. FRAME (double gold hairline) + CAP + BOTANICAL ------------------------------------------------------------ */ .frame{position:relative;border:1px solid var(--hairline-gold);padding:12px;background:transparent;} .frame::after{content:"";position:absolute;inset:5px;border:1px solid var(--hairline-gold-in);pointer-events:none;} .frame .frame-in{overflow:hidden;position:relative;height:100%;} .frame .frame-in img{width:100%;height:100%;object-fit:cover;} /* Evening Room: soft bottom vignette + gentle photo grading */ html[data-theme="dark"] .frame .frame-in::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,transparent 55%,rgba(9,18,16,.38) 100%); } html[data-theme="dark"] .frame .frame-in img{filter:brightness(.97) saturate(.96);} html[data-theme="dark"] .frame .frame-in iframe{filter:grayscale(.25) brightness(.92) contrast(1.03);} .cap{ margin-top:1rem;font-size:.68rem;letter-spacing:.2em; text-transform:uppercase;color:var(--ink-soft);line-height:1.7; } .cap--center{text-align:center;} .band-anchor .cap{color:var(--anchor-soft);} /* botanical root-system line art — hand-tuned, procedurally-grown roots. Paths carry their own baked stroke-width (trunk→root-hair taper); do NOT force a single width here. Colour flows via currentColor; .bot-gold nodes fill. */ .botanical{position:absolute;pointer-events:none;opacity:.46;color:var(--green);} .botanical .bot-gold{color:var(--gold);} .botanical path{stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round;} .botanical circle{fill:currentColor;stroke:none;} html[data-theme="dark"] .botanical{opacity:.4;} /* ------------------------------------------------------------ 6. PLAQUE (engraved credentials) ------------------------------------------------------------ */ .plaque{ margin-top:clamp(2.6rem,4.6vw,3.6rem); display:inline-block;position:relative; border:1px solid var(--hairline-gold); padding:1.35rem 1.9rem 1.3rem;background:var(--plaque-bg); } .plaque::after{content:"";position:absolute;inset:4px;border:1px solid var(--hairline-gold-in);pointer-events:none;} .plaque .plaque-name{ display:block;font-family:var(--serif);font-size:1.06rem;font-weight:500; letter-spacing:.02em;color:var(--ink);line-height:1.4; } .plaque .plaque-creds{ display:block;margin-top:.5rem;font-family:var(--sans);font-size:.66rem;font-weight:700; letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text);line-height:1.9; } .plaque .plaque-creds .sep{color:color-mix(in srgb, var(--gold) 60%, transparent);padding:0 .35em;} .band-anchor .plaque{background:color-mix(in srgb, var(--anchor-text) 4%, transparent);} .band-anchor .plaque .plaque-name{color:var(--anchor-text);} .band-anchor .plaque .plaque-creds{color:var(--gold-anchor);} /* ------------------------------------------------------------ 7. GOOGLE REVIEWS BADGE ------------------------------------------------------------ */ .g-reviews{ display:inline-flex;align-items:center;gap:.6rem;width:fit-content; margin-top:clamp(1.8rem,3vw,2.4rem);padding:.48rem .85rem .48rem .58rem; background:var(--card); border:1px solid var(--hairline);border-radius:999px;text-decoration:none; transition:border-color .22s ease,background-color .22s ease,box-shadow .22s ease; } .g-reviews:hover{border-color:var(--hairline-gold);box-shadow:var(--shadow-soft);} .g-reviews .g-logo{width:19px;height:19px;flex:none;} .g-reviews .g-stars{color:var(--gold-text);font-size:.92rem;letter-spacing:.06em;line-height:1;} .g-reviews .g-cap{font-family:var(--sans);font-size:.78rem;font-weight:500;color:var(--ink-soft);line-height:1;white-space:nowrap;} .g-reviews .g-cap b{color:var(--ink);font-weight:700;} .band-anchor .g-reviews{background:color-mix(in srgb, var(--anchor-text) 6%, transparent);border-color:var(--hairline-anchor);} .band-anchor .g-reviews .g-stars{color:var(--gold-anchor);} .band-anchor .g-reviews .g-cap{color:var(--anchor-soft);} .band-anchor .g-reviews .g-cap b{color:var(--anchor-text);} /* ------------------------------------------------------------ 8. PREVIEW BAR (always dark, both themes) ------------------------------------------------------------ */ .lc-bar{ position:sticky;top:0;z-index:200; display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem; background:#0E1A17;color:#C6CEC6; font-family:var(--sans);font-size:.72rem;letter-spacing:.04em; padding:.5rem 1rem; } .lc-bar .lc-brand{font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#9DB3A8;} .lc-bar .lc-links{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1rem;} .lc-bar .lc-links a{color:#C6CEC6;text-decoration:none;} .lc-bar .lc-links a:hover{color:#fff;} .lc-bar .lc-links a.is-active{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;} .lc-bar .lc-theme{ background:none;border:1px solid #33463F;border-radius:999px;color:#C6CEC6; font-family:var(--sans);font-size:.72rem;letter-spacing:.04em; padding:.3em 1em;cursor:pointer;white-space:nowrap; transition:color .2s ease,border-color .2s ease; } .lc-bar .lc-theme:hover{color:#fff;border-color:#BFA760;} /* ------------------------------------------------------------ 9. HEADER + NAV ------------------------------------------------------------ */ .hdr{ background-color:var(--paper);background-image:var(--grain); border-bottom:1px solid var(--hairline); position:relative;z-index:50; } .hdr-in{ display:flex;align-items:center;justify-content:space-between;gap:1.5rem; padding-top:1.2rem;padding-bottom:1.2rem; } .logo{display:flex;align-items:center;gap:.9rem;color:var(--ink);} .logo:hover{color:var(--ink);} .logo img{height:clamp(42px,4.4vw,50px);width:auto;flex:none;background:#F7F4EC;border-radius:50%;padding:2px;} .logo-word{ font-family:var(--serif);font-size:clamp(1.02rem,1.5vw,1.18rem);font-weight:500; line-height:1.05;white-space:nowrap;color:var(--ink); } .logo-word .logo-sub{ display:block;font-family:var(--sans);font-size:.52rem;font-weight:700; letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text);margin-top:.4em; } .nav{display:flex;align-items:center;gap:clamp(1rem,1.8vw,1.9rem);} .nav>ul{display:flex;align-items:center;gap:clamp(.7rem,1.4vw,1.4rem);list-style:none;margin:0;padding:0;} .nav a.navlink{ font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--ink);padding:.4em 0;border-bottom:1px solid transparent; white-space:nowrap;transition:color .2s ease,border-color .2s ease; } .nav a.navlink:hover,.nav a.navlink[aria-current="page"]{color:var(--link);border-bottom-color:var(--gold);} .navlink-sub{ display:inline-flex;align-items:center;gap:.4em;font-family:var(--sans);font-size:.72rem; font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink); padding:.4em 0;border:0;border-bottom:1px solid transparent;background:none;cursor:pointer; white-space:nowrap;transition:color .2s ease,border-color .2s ease; } .has-sub{position:relative;} .has-sub:hover .navlink-sub,.has-sub:focus-within .navlink-sub{color:var(--link);border-bottom-color:var(--gold);} .subnav{ position:absolute;top:100%;left:0;min-width:250px;background:var(--card); border:1px solid var(--hairline);box-shadow:var(--shadow); padding:.5rem 0;list-style:none;margin:0; opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:60; } .has-sub:hover .subnav,.has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:translateY(0);} .subnav a{ display:block;padding:.6rem 1.3rem;font-family:var(--sans);font-size:.78rem; font-weight:500;letter-spacing:.04em;color:var(--ink);white-space:nowrap; transition:color .2s ease,background-color .2s ease; } .subnav a:hover,.subnav a:focus{color:var(--link);background:var(--gold-veil);} .hdr .btn{padding:.85em 1.5em;letter-spacing:.14em;text-indent:.14em;flex:none;} /* mobile nav — CSS-only checkbox burger. The checkbox only renders (and is only tabbable) at burger widths — see the media block below; above 1020px it would be an invisible tab stop. */ .nav-toggle{display:none;} .nav-burger{ display:none;width:46px;height:46px;border:1px solid var(--hairline);border-radius:3px; background:none;cursor:pointer;position:relative;flex:none; } .nav-burger span, .nav-burger span::before, .nav-burger span::after{ content:"";display:block;position:absolute;left:12px;width:22px;height:1.7px; background:var(--ink);transition:transform .25s ease,opacity .25s ease;border-radius:2px; } .nav-burger span{top:22px;} .nav-burger span::before{left:0;top:-6px;} .nav-burger span::after{left:0;top:6px;} .nav-toggle:focus-visible~.nav-burger{outline:2px solid var(--focus);outline-offset:3px;} @media (max-width:1020px){ .nav-toggle{display:block;position:absolute;opacity:0;width:0;height:0;} .nav-burger{display:block;} .nav{ display:none;position:absolute;top:100%;left:0;right:0; background:var(--paper-deep);background-image:var(--grain); border-bottom:1px solid var(--hairline); padding:1.2rem clamp(22px,5vw,64px) 2.2rem; box-shadow:var(--shadow); } .nav>ul{flex-direction:column;align-items:flex-start;gap:0;width:100%;} .nav li{width:100%;} .nav a.navlink{display:block;padding:.95em 0;border-bottom:1px solid var(--hairline);font-size:.84rem;} .navlink-sub{display:flex;width:100%;padding:.95em 0;border-bottom:1px solid var(--hairline);font-size:.84rem;} .subnav{ position:static;opacity:1;visibility:visible;transform:none; box-shadow:none;border:0;background:none;padding:0 0 0 1rem;min-width:0;z-index:auto; } .subnav a{display:block;padding:.8em 0;border-bottom:1px solid var(--hairline);font-size:.8rem;white-space:normal;} .subnav a:hover,.subnav a:focus{background:none;} .nav .btn{margin-top:1.5rem;width:100%;} .nav-toggle:checked~.nav{display:block;} .nav-toggle:checked~.nav-burger span{transform:rotate(45deg);} .nav-toggle:checked~.nav-burger span::before{transform:translateY(6px) rotate(-90deg);} .nav-toggle:checked~.nav-burger span::after{opacity:0;} } /* ------------------------------------------------------------ 10. BREADCRUMBS ------------------------------------------------------------ */ .crumbs{ font-family:var(--sans);font-size:.64rem;font-weight:700; letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft); margin-bottom:clamp(1.8rem,3.2vw,2.6rem); } .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4em 0;margin:0;padding:0;} .crumbs li{display:flex;align-items:center;} .crumbs li+li::before{ content:"\2192";margin:0 .9em; color:color-mix(in srgb, var(--gold) 65%, transparent);letter-spacing:0; } .crumbs a{color:var(--ink-soft);border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;} .crumbs a:hover{color:var(--link);border-bottom-color:var(--gold);} .crumbs [aria-current="page"]{color:var(--gold-text);} /* ------------------------------------------------------------ 11. HERO (text + media grid) ------------------------------------------------------------ */ .hero{overflow:hidden;padding-top:clamp(44px,6vw,84px);padding-bottom:clamp(60px,8vw,116px);} .hero-grid{ display:grid;grid-template-columns:1.1fr .9fr; gap:clamp(36px,4.5vw,72px);align-items:center; } .hero-text .eyebrow{margin-bottom:clamp(1.1rem,2vw,1.6rem);} .hero h1{ font-size:clamp(2.6rem,5.4vw,4.15rem); font-weight:500;line-height:1.04;letter-spacing:-0.02em; max-width:11em;color:var(--ink-strong); } .hero h1 em{white-space:nowrap;} .hero-lede{margin-top:clamp(1.25rem,2.2vw,1.8rem);max-width:31em;} .hero-cta{margin-top:clamp(1.7rem,2.8vw,2.4rem);display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;} .hero-cta .cta-pair{gap:.85rem 1rem;} .hero-note{font-size:.82rem;letter-spacing:.02em;color:var(--ink-soft);max-width:34em;line-height:1.7;margin:0;} .hero-note a{color:var(--btn2-text);font-weight:700;white-space:nowrap;} .hero-note a:hover{color:var(--link-hover);} .hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:clamp(1.9rem,3vw,2.7rem);} .hero-trust .plaque,.hero-trust .g-reviews{margin-top:0;} .hero-media{position:relative;} .hero-media .frame-in{height:clamp(440px,48vw,584px);} .hero-media img{object-position:50% 30%;animation:settle 2.8s cubic-bezier(.19,.6,.22,1) both;} @keyframes settle{from{transform:scale(1.05);}to{transform:scale(1);}} /* ------------------------------------------------------------ 12. CHIPS — toggle pills + validating response ------------------------------------------------------------ */ .chips-block{margin-top:clamp(2.6rem,5vw,3.8rem);padding-top:clamp(1.7rem,3vw,2.1rem);border-top:1px solid var(--hairline-gold);} .chips-label{ font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.28em; text-transform:uppercase;color:var(--gold-text);margin-bottom:1.6rem; } .chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.8rem;max-width:52em;} .chip{ appearance:none;-webkit-appearance:none; display:inline-flex;align-items:center;gap:.75em; border:1px solid var(--hairline);border-radius:999px; background:var(--card);color:var(--ink); font-family:var(--serif);font-style:italic; font-size:clamp(.96rem,1.4vw,1.1rem);line-height:1.4; padding:.7em 1.35em .7em 1.1em;cursor:pointer;text-align:left; transition:border-color .25s ease,background-color .25s ease,color .25s ease,box-shadow .25s ease; } .chip::before{ content:"";width:9px;height:9px;flex:none; border:1px solid var(--gold-text);transform:rotate(45deg); transition:background-color .25s ease,border-color .25s ease; } .chip:hover{border-color:var(--gold);box-shadow:var(--shadow-soft);} .chip[aria-pressed="true"]{ border-color:var(--gold);background:var(--gold-veil);color:var(--ink-strong); } .chip[aria-pressed="true"]::before{background:var(--gold);border-color:var(--gold);} .chips-response{ margin-top:clamp(2.2rem,4vw,3rem);max-width:36em; position:relative;border-top:1px solid var(--hairline-gold);padding-top:1.8rem; } .chips-response::before{ content:"";position:absolute;top:-5px;left:0;width:9px;height:9px; background:var(--gold);transform:rotate(45deg); } .chips-response p{ font-family:var(--serif);font-size:clamp(1.18rem,2.1vw,1.5rem); line-height:1.55;color:var(--ink); } .chips-response .btn{margin-top:1.6rem;} /* JS gates visibility; without JS the response (good copy + CTA) stays visible */ body.js .chips-response{display:none;} body.js .chips-response.is-shown{display:block;animation:chips-in .9s ease both;} @keyframes chips-in{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}} /* ------------------------------------------------------------ 13. REFRAME PULL-QUOTE + PULL-QUOTE BAND ------------------------------------------------------------ */ .reframe{ margin-top:clamp(3rem,5.4vw,4.4rem);max-width:30em; font-family:var(--serif); font-size:clamp(1.3rem,2.5vw,1.8rem);line-height:1.5;font-weight:400;color:var(--ink); } .reframe em{font-style:italic;color:var(--accent-em);} .pullquote{ position:relative;max-width:26em;margin:clamp(2.6rem,5vw,3.8rem) auto; padding-top:1.9rem;text-align:center; } .pullquote::before{ content:"";position:absolute;top:0;left:50%;transform:translateX(-50%) rotate(45deg); width:9px;height:9px;background:var(--gold); } .pullquote p{ font-family:var(--serif);font-size:clamp(1.35rem,2.8vw,2rem); line-height:1.5;color:var(--ink); } .pullquote p em{color:var(--accent-em);} /* ------------------------------------------------------------ 14. LEDGER (areas of focus) ------------------------------------------------------------ */ .ledger{margin-top:clamp(2.8rem,5.4vw,4.4rem);border-top:1px solid var(--hairline);} .ledger-row{ display:grid;grid-template-columns:minmax(9em,.42fr) 1.28fr auto; gap:1.2rem clamp(1.6rem,4vw,4rem);align-items:center; padding:clamp(1.7rem,3vw,2.4rem) clamp(.4rem,1.4vw,1.4rem); border-bottom:1px solid var(--hairline); text-decoration:none;color:var(--ink); transition:background-color .3s ease; } .ledger-row:hover{background:var(--raise);color:var(--ink);} .ledger-row h3{font-size:clamp(1.35rem,2.4vw,1.9rem);color:var(--ink);font-weight:500;} .ledger-note{ font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.26em; text-transform:uppercase;color:var(--gold-text);display:block;margin-top:.55rem; } .ledger-row p{font-size:.96rem;line-height:1.7;max-width:34em;color:var(--ink-soft);} .ledger-go{ font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:var(--gold-text);white-space:nowrap; } .ledger-go::after{content:"\2192";display:inline-block;margin-left:.55em;transition:transform .25s ease;} .ledger-row:hover .ledger-go::after{transform:translateX(5px);} .ledger-row.is-featured{ background:color-mix(in srgb, var(--gold) 7%, transparent); border-left:2px solid var(--gold);padding-left:clamp(1rem,2.4vw,2.2rem); } .ledger-row.is-featured:hover{background:color-mix(in srgb, var(--gold) 11%, transparent);} /* ------------------------------------------------------------ 15. SPEC STRIP (substance-use specialization) ------------------------------------------------------------ */ .spec-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6.5vw,96px);align-items:center;} .spec-body h2{font-size:clamp(1.9rem,4vw,3rem);max-width:14em;margin-top:1.3rem;} .spec-body p{margin-top:clamp(1.4rem,2.6vw,1.9rem);color:var(--ink-soft);max-width:33em;} .spec-body p strong{color:var(--ink);font-weight:600;} .spec-cred{ margin-top:clamp(2.2rem,4vw,3rem);position:relative;display:inline-block; border:1px solid var(--hairline-gold);padding:1.4rem 1.9rem;background:var(--gold-veil); } .spec-cred::after{content:"";position:absolute;inset:4px;border:1px solid var(--hairline-gold-in);pointer-events:none;} .spec-cred p{margin:0;font-family:var(--serif);font-style:italic;font-size:1.08rem;color:var(--ink);max-width:24em;} .spec-cred .spec-cred-label{ display:block;font-family:var(--sans);font-style:normal;font-size:.62rem;font-weight:700; letter-spacing:.28em;text-transform:uppercase;color:var(--gold-text);margin-bottom:.7rem; } .spec-aside{align-self:stretch;display:flex;flex-direction:column;justify-content:center;} .spec-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline-gold);} .spec-list li{ padding:1.25rem .2rem;border-bottom:1px solid var(--hairline-soft); display:flex;gap:1rem;align-items:flex-start;line-height:1.6;color:var(--ink-soft);font-size:.98rem; } .spec-list li svg{flex:none;margin-top:.35em;color:var(--gold-text);} .spec-list li b{color:var(--ink);font-weight:600;} .spec-aside .textlink{margin-top:clamp(1.8rem,3vw,2.4rem);} /* ------------------------------------------------------------ 16. MEET SARAH ------------------------------------------------------------ */ .sarah-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(40px,6.5vw,96px);align-items:center;} .sarah-media .frame-in{height:clamp(430px,48vw,580px);} .sarah-media img{object-position:50% 20%;} .sarah-body h2{font-size:clamp(1.9rem,4vw,3rem);max-width:14em;margin-top:1.3rem;} .sarah-body p{margin-top:clamp(1.4rem,2.6vw,1.9rem);max-width:32em;color:var(--ink-soft);} .sarah-body p em{font-family:var(--serif);font-style:italic;color:var(--ink);} .sarah-body p strong{color:var(--ink);font-weight:600;} /* ------------------------------------------------------------ 17. DIAMOND LISTS (modalities · recognition · goals) ------------------------------------------------------------ */ /* small-caps inline list (modalities) */ .diamond-list{ margin-top:clamp(1.8rem,3.2vw,2.4rem);display:flex;flex-wrap:wrap;gap:.7rem 1.6rem; list-style:none;padding:0; } .diamond-list li{ font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:.7em; } .diamond-list li::before{content:"";width:8px;height:8px;border:1px solid var(--gold-text);transform:rotate(45deg);flex:none;} /* two-column recognition / goal list (serif, sentence case) */ .goal-list{list-style:none;margin:clamp(2rem,3.6vw,2.8rem) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1.05rem 2.6rem;max-width:780px;} .goal-list li{ position:relative;padding-left:1.7rem;line-height:1.55;color:var(--ink);font-size:1.02rem; font-family:var(--serif); } .goal-list li::before{ content:"";position:absolute;left:0;top:.58em;width:9px;height:9px; border:1px solid var(--gold-text);transform:rotate(45deg);background:transparent; } /* ------------------------------------------------------------ 18. STEPS (3-up and 4-up) ------------------------------------------------------------ */ .steps{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(28px,4.2vw,60px);margin-top:clamp(3rem,5.4vw,4.6rem); } .steps-4{grid-template-columns:repeat(4,1fr);gap:clamp(24px,3.2vw,44px);} .step{border-top:1px solid var(--hairline-gold);padding-top:1.8rem;position:relative;} .step::before{ content:"";position:absolute;top:-5px;left:0;width:9px;height:9px; background:var(--gold);transform:rotate(45deg); } .step .step-no{ font-family:var(--serif);font-style:italic;font-size:2.2rem;font-weight:400; color:var(--gold-text);line-height:1;display:block; } .step h3{font-size:clamp(1.2rem,1.9vw,1.5rem);margin-top:1.1rem;} .step p{margin-top:1rem;color:var(--ink-soft);font-size:.95rem;} /* ------------------------------------------------------------ 19. FEES CARD ------------------------------------------------------------ */ .fees-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(40px,6.5vw,88px);align-items:center;} .fees-intro h2{font-size:clamp(1.9rem,4vw,3rem);max-width:12em;margin-top:1.3rem;} .fees-intro p{margin-top:clamp(1.5rem,2.8vw,2.1rem);max-width:30em;color:var(--ink-soft);} .fees-card{ position:relative;border:1px solid var(--hairline-gold); background:var(--card); padding:clamp(1.9rem,3.2vw,2.8rem); } .fees-card::after{content:"";position:absolute;inset:5px;border:1px solid var(--hairline-gold-in);pointer-events:none;} .fees-card--compact{padding:clamp(1.5rem,2.4vw,2.1rem);} .fees-card dl{margin:0;position:relative;z-index:1;} .fee-row{ display:flex;align-items:baseline;justify-content:space-between;gap:1.4rem; padding:1.3rem 0;border-bottom:1px solid var(--hairline); } .fee-row:first-child{padding-top:0;} .fee-row dt{margin:0;} .fee-name{font-family:var(--serif);font-size:1.18rem;font-weight:500;line-height:1.3;color:var(--ink);display:block;} .fee-meta{display:block;font-family:var(--sans);font-size:.78rem;color:var(--ink-soft);letter-spacing:.02em;margin-top:.3rem;} .fee-row dd{margin:0;font-family:var(--serif);font-size:1.5rem;font-weight:500;color:var(--gold-text);white-space:nowrap;} .fee-row dd .fee-unit{font-family:var(--sans);font-size:.7rem;font-weight:500;color:var(--ink-soft);letter-spacing:.05em;} .fees-consult{ position:relative;z-index:1;margin-top:1.8rem; display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.6rem; } .fees-consult p{font-size:.95rem;color:var(--ink-soft);max-width:22em;} .fees-consult p strong{font-weight:700;color:var(--ink);} .fees-note{margin-top:1.6rem;position:relative;z-index:1;font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--ink);max-width:30em;} .fees-cancel{margin-top:1.4rem;font-size:.78rem;letter-spacing:.06em;color:var(--ink-soft);position:relative;z-index:1;} /* ------------------------------------------------------------ 20. TESTIMONIALS ------------------------------------------------------------ */ .quote-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(40px,6.5vw,88px);align-items:start;margin-top:clamp(2.2rem,4.2vw,3.2rem);} .quote-feature{position:relative;max-width:23em;padding-top:1.8rem;border-top:1px solid var(--hairline-gold);} .quote-feature::before{ content:"";position:absolute;top:-5px;left:0;width:9px;height:9px; background:var(--gold);transform:rotate(45deg); } .quote-feature p{ font-family:var(--serif); font-size:clamp(1.4rem,2.8vw,2.05rem);line-height:1.46;font-weight:400;color:var(--ink); } .quote-sm{border-top:1px solid var(--hairline);padding-top:1.8rem;align-self:start;} .quote-sm p{ font-family:var(--serif); font-size:clamp(1.08rem,1.6vw,1.28rem);line-height:1.58;color:var(--ink-soft); } .cite{ display:block;margin-top:1.5rem;font-style:normal; font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft); font-family:var(--sans); } .cite b{color:var(--gold-text);font-weight:700;} /* ------------------------------------------------------------ 21. VISIT — NAP + MAP ------------------------------------------------------------ */ .visit-head{max-width:42em;margin-bottom:clamp(2.6rem,5.2vw,3.8rem);} .visit-head h2{font-size:clamp(1.9rem,4vw,3rem);max-width:16em;margin-top:1.3rem;} .visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6.5vw,76px);align-items:stretch;} .visit-details{align-self:center;} .visit-nap{ font-style:normal;display:grid;grid-template-columns:auto 1fr;gap:.95rem 1.6rem;align-items:baseline; } .visit-nap dt{ margin:0;font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.24em; text-transform:uppercase;color:var(--gold-text);line-height:1.7; } .visit-nap dd{margin:0;color:var(--ink);line-height:1.7;} .visit-nap dd a{color:var(--link);border-bottom:1px solid var(--hairline-gold);transition:color .25s ease,border-color .25s ease;} .visit-nap dd a:hover{color:var(--link-hover);border-bottom-color:var(--gold);} .visit-name{font-family:var(--serif);font-size:1.16rem;font-weight:500;color:var(--ink);} .visit-area{margin-top:clamp(1.9rem,3.4vw,2.5rem);padding-top:1.7rem;border-top:1px solid var(--hairline-gold);} .visit-area-label{ font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.24em; text-transform:uppercase;color:var(--gold-text);margin-bottom:.95rem; } .visit-area p{color:var(--ink-soft);font-size:.95rem;line-height:1.7;max-width:33em;} .visit-area p + p{margin-top:.6rem;} .visit-virtual{font-family:var(--serif);font-style:italic;color:var(--ink);} .visit-cta{margin-top:clamp(2.1rem,3.8vw,2.7rem);} .visit-media .frame{height:100%;} .visit-media .frame-in{min-height:320px;height:100%;} .visit-media iframe{filter:grayscale(.15) contrast(1.02);width:100%;height:100%;min-height:320px;border:0;display:block;} /* ------------------------------------------------------------ 22. FAQ — native
, custom marker ------------------------------------------------------------ */ .faq{margin-top:clamp(2.4rem,4.4vw,3.4rem);border-top:1px solid var(--hairline);} .faq details{border-bottom:1px solid var(--hairline);} .faq summary{ display:flex;align-items:baseline;gap:1.4rem; cursor:pointer;list-style:none; padding:1.45rem .2rem; font-family:var(--serif);font-size:clamp(1.08rem,1.8vw,1.3rem); line-height:1.4;color:var(--ink); transition:color .25s ease; } .faq summary::-webkit-details-marker{display:none;} .faq summary::after{ content:"";flex:none;width:12px;height:12px;margin-left:auto;align-self:center; background: linear-gradient(var(--gold-text),var(--gold-text)) center/12px 1.6px no-repeat, linear-gradient(var(--gold-text),var(--gold-text)) center/1.6px 12px no-repeat; transition:transform .3s ease; } .faq summary:hover{color:var(--link);} .faq details[open] summary{color:var(--accent-em);} .faq details[open] summary::after{transform:rotate(45deg);} .faq .faq-a{padding:0 .2rem 1.7rem;max-width:44em;} .faq .faq-a p{color:var(--ink-soft);font-size:.98rem;line-height:1.75;} .faq .faq-a p + p{margin-top:.8em;} .faq .faq-a a:not(.btn){border-bottom:1px solid var(--hairline-gold);} .faq .faq-a a:not(.btn):hover{border-bottom-color:var(--gold);} /* ------------------------------------------------------------ 23. EMOTIONAL WIDE-IMAGE BAND ------------------------------------------------------------ */ .emotive .frame-in{height:clamp(300px,48vw,540px);} .emotive img{object-fit:cover;object-position:50% 42%;} .emotive-quote{ margin:clamp(2.4rem,4.4vw,3.4rem) auto 0;max-width:26em;text-align:center; font-family:var(--serif);font-size:clamp(1.35rem,2.8vw,2rem); line-height:1.5;color:var(--ink);position:relative;padding-top:1.9rem; } .emotive-quote::before{ content:"";position:absolute;top:0;left:50%;transform:translateX(-50%) rotate(45deg); width:9px;height:9px;background:var(--gold); } .emotive-quote em{color:var(--accent-em);} /* ------------------------------------------------------------ 24. BOOKING FORM (on .band-anchor) ------------------------------------------------------------ */ .book-head{max-width:34em;} .book-head h2{font-size:clamp(1.9rem,4vw,3rem);margin-top:1.3rem;} .book-head .lede{margin-top:clamp(1.4rem,2.6vw,2rem);max-width:30em;} .book-zone{margin-top:clamp(2.6rem,4.8vw,3.8rem);max-width:760px;} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 1.6rem;} .field{display:flex;flex-direction:column;gap:.55rem;} .field-full{grid-column:1/-1;} .field label{ font-family:var(--sans);font-size:.64rem;font-weight:700; letter-spacing:.24em;text-transform:uppercase;color:var(--gold-anchor);line-height:1.6; } .field label .req{ text-transform:none;letter-spacing:.03em;font-weight:500; color:var(--anchor-soft);font-size:.7rem; } .field input,.field select,.field textarea{ width:100%; background:color-mix(in srgb, var(--anchor-text) 7%, transparent); border:1px solid color-mix(in srgb, var(--anchor-text) 40%, transparent); border-radius:3px;color:var(--anchor-text); font-family:var(--sans);font-size:.95rem;line-height:1.5; padding:.85em 1em; transition:border-color .25s ease,background-color .25s ease; } .field input::placeholder,.field textarea::placeholder{color:color-mix(in srgb, var(--anchor-soft) 85%, transparent);} .field input:hover,.field select:hover,.field textarea:hover{border-color:color-mix(in srgb, var(--anchor-text) 55%, transparent);} .field input:focus,.field select:focus,.field textarea:focus{ outline:2px solid var(--gold);outline-offset:2px;border-color:var(--gold); } .field select{ appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.8em; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23C6CEC6' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 1.1em center; } .field select option{background:var(--anchor);color:var(--anchor-text);} .field textarea{min-height:132px;resize:vertical;} .form-consent{ margin-top:1.5rem;font-size:.82rem;letter-spacing:.03em;color:var(--anchor-soft); display:flex;align-items:baseline;gap:.7em; } .form-consent::before{content:"";width:8px;height:8px;flex:none;border:1px solid var(--gold-anchor);transform:rotate(45deg) translateY(1px);} .form-actions{margin-top:1.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.9rem;} .form-alt{font-size:.92rem;color:var(--anchor-soft);} .form-alt a{white-space:nowrap;font-weight:600;} .form-crisis{ margin-top:clamp(2.2rem,4vw,3rem);padding-top:1.4rem; border-top:1px solid var(--hairline-anchor); font-size:.82rem;line-height:1.7;color:var(--anchor-soft);max-width:44em; } .form-crisis strong{color:var(--anchor-text);font-weight:700;} /* success panel — engraved plaque style */ .form-success{ position:relative;border:1px solid var(--hairline-gold); background:color-mix(in srgb, var(--anchor-text) 4%, transparent); padding:clamp(1.9rem,3.2vw,2.6rem); } .form-success::after{content:"";position:absolute;inset:5px;border:1px solid var(--hairline-gold-in);pointer-events:none;} .form-success[hidden]{display:none;} .form-success .form-success-title{ font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.45;color:var(--anchor-text); } .form-success p + p{margin-top:.9rem;font-size:.95rem;color:var(--anchor-soft);} .form-success:focus{outline:2px solid var(--gold);outline-offset:3px;} /* ------------------------------------------------------------ 25. FOOTER (always anchor-deep, both themes) ------------------------------------------------------------ */ .footer{ background-color:var(--anchor-deep);background-image:var(--grain); color:var(--anchor-soft);border-top:1px solid var(--hairline-anchor); padding-top:clamp(56px,7.4vw,88px);padding-bottom:clamp(36px,5vw,56px); font-size:.92rem; } .footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:clamp(28px,4vw,56px);} .footer h2{ font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.28em; text-transform:uppercase;color:var(--gold-anchor);margin:0 0 1.2rem; } .footer ul{list-style:none;margin:0;padding:0;} .footer li{margin-top:.6em;} .footer p{color:var(--anchor-soft);} .footer a{color:var(--anchor-soft);} .footer a:hover{color:var(--anchor-text);} .footer .logo{color:var(--anchor-text);} .footer .logo-word{color:var(--anchor-text);} .footer .logo-word .logo-sub{color:var(--gold-anchor);} .footer-brand p{margin-top:1.2rem;max-width:26em;line-height:1.75;} .footer-virtual{margin-top:1.2rem;font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--gold-anchor);} .footer address{line-height:1.85;color:var(--anchor-soft);margin-bottom:.8rem;} .footer-facts li{ position:relative;padding-left:1.4rem;line-height:1.6; } .footer-facts li::before{ content:"";position:absolute;left:0;top:.62em;width:7px;height:7px; border:1px solid var(--gold-anchor);transform:rotate(45deg); } .footer-crisis{ margin-top:clamp(2.1rem,4.2vw,3.1rem);padding:1.35rem 1.6rem; border:1px solid var(--hairline-gold); background:color-mix(in srgb, var(--gold) 5%, transparent); } .footer-crisis p{font-size:.88rem;line-height:1.7;color:var(--anchor-text);margin:0;} .footer-crisis strong{font-weight:700;color:var(--anchor-text);} .footer-print{ margin-top:clamp(2.5rem,4.2vw,3.5rem);padding-top:1.5rem;border-top:1px solid var(--hairline-anchor); display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem 2rem; } .footer-print p{ color:var(--anchor-soft);font-size:.66rem;letter-spacing:.16em; text-transform:uppercase;line-height:2;font-weight:600;margin:0; } /* ------------------------------------------------------------ 26. TOAST (role=status, bottom center, fixed dark) ------------------------------------------------------------ */ .toast{ position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px); z-index:320;max-width:min(92vw,560px); background:#0E1A17;color:#F3F1E9; border:1px solid color-mix(in srgb, #BFA760 46%, transparent);border-radius:3px; padding:.95rem 1.4rem;font-family:var(--sans);font-size:.85rem;line-height:1.6; box-shadow:0 18px 40px rgba(0,0,0,.35); opacity:0;visibility:hidden; transition:opacity .35s ease,transform .35s ease,visibility .35s; } .toast.is-shown{opacity:1;visibility:visible;transform:translate(-50%,0);} @media (max-width:700px){ .toast{bottom:96px;} /* clear the theme fab */ } /* ------------------------------------------------------------ 27. THEME FAB (fixed bottom-LEFT — never collides with CTAs) ------------------------------------------------------------ */ .theme-fab{ position:fixed;left:18px;bottom:18px;z-index:310; width:52px;height:52px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--anchor);color:var(--anchor-text); border:1px solid color-mix(in srgb, var(--gold) 55%, transparent); cursor:pointer;box-shadow:0 10px 26px rgba(9,18,16,.32); transition:transform .25s ease,background-color .3s ease,color .3s ease,border-color .3s ease; } .theme-fab:hover{transform:translateY(-2px);} /* when the mobile menu is open, get the fab out of the way of the menu CTA */ .nav-toggle:checked ~ .theme-fab, body:has(.nav-toggle:checked) .theme-fab{opacity:0;visibility:hidden;pointer-events:none;} .theme-fab svg{width:20px;height:20px;display:block;} .theme-fab .i-sun{display:none;} html[data-theme="dark"] .theme-fab{background:var(--gold);color:#14201B;border-color:color-mix(in srgb, #F3F1E9 30%, transparent);} html[data-theme="dark"] .theme-fab .i-moon{display:none;} html[data-theme="dark"] .theme-fab .i-sun{display:block;} /* ------------------------------------------------------------ 28. ARTICLE TEMPLATE TYPOGRAPHY ------------------------------------------------------------ */ .cat-chip{ display:inline-block;border:1px solid var(--hairline-gold);border-radius:999px; padding:.45em 1.15em;background:var(--gold-veil); font-family:var(--sans);font-size:.62rem;font-weight:700; letter-spacing:.24em;text-transform:uppercase;color:var(--gold-text); } .article-head h1{ font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.12; max-width:18em;margin-top:clamp(1.4rem,2.6vw,2rem);color:var(--ink-strong); } .dek{margin-top:clamp(1.3rem,2.4vw,1.8rem);max-width:34em;} .meta-row{ display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1rem; margin-top:clamp(1.8rem,3.2vw,2.6rem); font-family:var(--sans);font-size:.82rem;color:var(--ink-soft); } .meta-row .avatar{ width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 22%; border:1px solid var(--hairline-gold);padding:2px;background:var(--card);flex:none; } .meta-row .meta-name{color:var(--ink);font-weight:600;} .meta-row .meta-sep{color:color-mix(in srgb, var(--gold) 70%, transparent);} /* key takeaways card */ .takeaways{ position:relative;border:1px solid var(--hairline-gold);background:var(--card); padding:clamp(1.7rem,3vw,2.3rem);margin:clamp(2.6rem,4.4vw,3.6rem) 0; } .takeaways::after{content:"";position:absolute;inset:5px;border:1px solid var(--hairline-gold-in);pointer-events:none;} .takeaways-label{ font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.28em; text-transform:uppercase;color:var(--gold-text);margin-bottom:1.2rem; } .takeaways ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;} .takeaways li{position:relative;padding-left:1.6rem;line-height:1.6;color:var(--ink);font-size:.98rem;} .takeaways li::before{ content:"";position:absolute;left:0;top:.58em;width:8px;height:8px; border:1px solid var(--gold-text);transform:rotate(45deg); } /* layout: sticky TOC + body */ .article-layout{ display:grid;grid-template-columns:minmax(180px,230px) minmax(0,1fr); gap:clamp(40px,6vw,84px);align-items:start; } .toc{position:sticky;top:84px;border-top:1px solid var(--hairline-gold);padding-top:1.4rem;} .toc-label{ font-family:var(--sans);font-size:.64rem;font-weight:700;letter-spacing:.26em; text-transform:uppercase;color:var(--gold-text);margin-bottom:.9rem; } .toc ol{list-style:none;margin:0;padding:0;} .toc a{ display:block;padding:.55em 0;font-size:.85rem;line-height:1.5;color:var(--ink-soft); border-bottom:1px solid var(--hairline-soft);transition:color .2s ease; } .toc li:last-child a{border-bottom:0;} .toc a:hover{color:var(--link);} /* article body rhythm */ .article-body{font-size:1.04rem;line-height:1.85;max-width:44em;} .article-body p{margin:0 0 1.5em;color:var(--ink);} .article-body>p:first-of-type::first-letter{ font-family:var(--serif);font-weight:500;font-size:3.3em;line-height:.78; float:left;padding:.1em .14em 0 0;color:var(--accent-em); } .article-body h2{font-size:clamp(1.5rem,2.8vw,2.05rem);line-height:1.2;margin:2.1em 0 .85em;} .article-body h3{font-size:clamp(1.18rem,2vw,1.45rem);margin:1.8em 0 .7em;} .article-body a:not(.btn):not(.textlink){color:var(--link);border-bottom:1px solid var(--hairline-gold);transition:color .2s ease,border-color .2s ease;} .article-body a:not(.btn):not(.textlink):hover{color:var(--link-hover);border-bottom-color:var(--gold);} .article-body ul,.article-body ol{margin:0 0 1.6em;padding-left:1.35em;color:var(--ink);} .article-body li{margin-bottom:.55em;} .article-body li::marker{color:var(--gold-text);} .article-body strong{color:var(--ink-strong);font-weight:700;} .article-body em{font-family:var(--serif);} .article-body blockquote{ position:relative;margin:2.4em 0;padding-top:1.7rem; border-top:1px solid var(--hairline-gold); } .article-body blockquote::before{ content:"";position:absolute;top:-5px;left:0;width:9px;height:9px; background:var(--gold);transform:rotate(45deg); } .article-body blockquote p{ font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.6rem); line-height:1.5;color:var(--ink);margin-bottom:0; } .article-body figure{margin:2.2em 0;} /* numbered question cards */ .q-cards{list-style:none;counter-reset:q;margin:2.2em 0;padding:0;display:grid;gap:1.1rem;} .q-card{ counter-increment:q;position:relative; border:1px solid var(--hairline);background:var(--card); padding:1.55rem 1.7rem 1.5rem 4.6rem; transition:border-color .3s ease; } .q-card:hover{border-color:var(--hairline-gold);} .q-card::before{ content:counter(q,upper-roman); position:absolute;left:1.5rem;top:1.2rem; font-family:var(--serif);font-style:italic;font-size:1.7rem;color:var(--gold-text);line-height:1; } .q-card .q{font-family:var(--serif);font-style:italic;font-size:1.14rem;line-height:1.45;color:var(--ink);margin:0 0 .55em;} .q-card p{font-size:.95rem;line-height:1.7;color:var(--ink-soft);margin:0;} .q-card p + p{margin-top:.6em;} /* mid-article soft CTA card */ .cta-inline{ position:relative;border:1px solid var(--hairline-gold);background:var(--gold-veil); padding:clamp(1.8rem,3.2vw,2.4rem);margin:2.6em 0; } .cta-inline::after{content:"";position:absolute;inset:5px;border:1px solid var(--hairline-gold-in);pointer-events:none;} .cta-inline p{ font-family:var(--serif);font-size:clamp(1.14rem,1.9vw,1.4rem); line-height:1.55;color:var(--ink);margin:0;max-width:26em; } .cta-inline .btn{margin-top:1.4rem;position:relative;z-index:1;} /* crisis note card (article variant) */ .crisis-card{ border:1px solid var(--hairline-gold);background:var(--gold-veil); padding:1.4rem 1.7rem;margin:2.6em 0; font-size:.9rem;line-height:1.7;color:var(--ink-soft); } .crisis-card p{font-size:.9rem;color:var(--ink-soft);margin:0;} .crisis-card strong{color:var(--ink);font-weight:700;} /* author box */ .author-box{ display:grid;grid-template-columns:130px 1fr;gap:clamp(1.6rem,3vw,2.6rem); align-items:start; border-top:1px solid var(--hairline-gold); margin-top:clamp(3rem,5vw,4.2rem);padding-top:clamp(1.9rem,3.2vw,2.6rem); } .author-box .frame{padding:8px;} .author-box .frame::after{inset:3px;} .author-box .frame-in{height:160px;} .author-box img{object-position:50% 22%;} .author-label{ font-family:var(--sans);font-size:.64rem;font-weight:700;letter-spacing:.26em; text-transform:uppercase;color:var(--gold-text);margin-bottom:.7rem; } .author-name{font-family:var(--serif);font-size:1.3rem;font-weight:500;color:var(--ink);} .author-box p{margin-top:.9rem;font-size:.95rem;line-height:1.75;color:var(--ink-soft);max-width:38em;} .author-links{margin-top:1.2rem;display:flex;flex-wrap:wrap;gap:.8rem 1.8rem;align-items:center;} /* related-article cards */ .cards{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,36px);margin-top:clamp(2.6rem,4.6vw,3.6rem); } .card{ position:relative;display:flex;flex-direction:column;gap:.9rem; border:1px solid var(--hairline);background:var(--card); padding:clamp(1.5rem,2.6vw,2rem); color:var(--ink);text-decoration:none; transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease; } .card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow);color:var(--ink);} .card-kicker{ font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.26em; text-transform:uppercase;color:var(--gold-text); } .card h3{font-size:clamp(1.12rem,1.8vw,1.35rem);line-height:1.3;color:var(--ink);} .card p{font-size:.92rem;line-height:1.7;color:var(--ink-soft);flex-grow:1;} .card .card-go{ font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:var(--gold-text); } .card .card-go::after{content:"\2192";display:inline-block;margin-left:.55em;transition:transform .25s ease;} .card:hover .card-go::after{transform:translateX(5px);} /* ------------------------------------------------------------ 29. REVEAL ON SCROLL (JS-gated — visible by default) ------------------------------------------------------------ */ body.js [data-reveal]{ opacity:0;transform:translateY(26px); transition:opacity 1s ease,transform 1s cubic-bezier(.22,.61,.21,1); transition-delay:var(--d,0s); } body.js [data-reveal].is-in{opacity:1;transform:none;} /* ------------------------------------------------------------ 30. THEME-SWITCH TRANSITIONS (motion-safe only) ------------------------------------------------------------ */ @media (prefers-reduced-motion:no-preference){ body,.hdr,.band,.band-alt,.band-anchor,.footer,.subnav,.nav, .plaque,.fees-card,.takeaways,.q-card,.cta-inline,.crisis-card, .form-success,.spec-cred,.frame,.card,.faq details{ transition:background-color .4s ease,color .4s ease,border-color .4s ease; } /* interactive components keep their own richer transitions (declared above) */ } /* ------------------------------------------------------------ 31. RESPONSIVE ------------------------------------------------------------ */ /* grid children may hold nowrap CTAs — never let them blow out their track */ .hero-grid>*,.spec-grid>*,.sarah-grid>*,.fees-grid>*,.visit-grid>*, .quote-grid>*,.article-layout>*,.form-grid>*,.footer-grid>*,.cards>*{min-width:0;} @media (max-width:1020px){ .hero-grid{grid-template-columns:1fr;gap:clamp(34px,7vw,50px);} .hero-media{order:-1;max-width:560px;margin:0 auto;width:100%;} .hero-media .frame-in{height:clamp(340px,62vw,480px);} .hero h1{max-width:none;} .spec-grid,.sarah-grid,.fees-grid,.visit-grid{grid-template-columns:1fr;gap:clamp(30px,6vw,46px);} .sarah-media{max-width:480px;} .sarah-media .frame-in{height:clamp(360px,70vw,480px);} .visit-media{order:-1;} .quote-grid{grid-template-columns:1fr;gap:clamp(40px,8vw,56px);} .footer-grid{grid-template-columns:1fr 1fr;} .ledger-row{grid-template-columns:1fr;gap:.7rem;} .ledger-row p{max-width:none;} .steps-4{grid-template-columns:1fr 1fr;} .article-layout{grid-template-columns:1fr;} .toc{display:none;} /* anchors still work from in-text links */ .prose-cols{column-count:1;} .cards{grid-template-columns:1fr 1fr;} } @media (max-width:760px){ .goal-list{grid-template-columns:1fr;gap:.9rem;} .steps,.steps-4{grid-template-columns:1fr;max-width:34em;} .footer-grid{grid-template-columns:1fr;} .botanical{display:none;} .cards{grid-template-columns:1fr;} .author-box{grid-template-columns:1fr;} .author-box .frame{max-width:180px;} .form-grid{grid-template-columns:1fr;} } @media (max-width:520px){ body{font-size:16px;} .btn{display:block;width:100%;max-width:360px;white-space:normal;} .hdr .btn{display:none;} .nav .btn{display:block;} .plaque{display:block;padding:1.2rem 1.3rem;} .fee-row{flex-direction:column;gap:.45rem;} .fee-row dd{font-size:1.35rem;} .visit-nap{grid-template-columns:1fr;gap:.25rem 0;} .visit-nap dt{margin-top:.9rem;} .visit-nap dt:first-child{margin-top:0;} .q-card{padding:1.35rem 1.35rem 1.3rem 3.6rem;} .q-card::before{left:1.15rem;font-size:1.4rem;} .theme-fab{left:14px;bottom:14px;width:48px;height:48px;} } /* ------------------------------------------------------------ 32. REDUCED MOTION — disable all motion ------------------------------------------------------------ */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{ animation-duration:.001s!important; animation-iteration-count:1!important; transition-duration:.001s!important; } .hero-media img{animation:none;} body.js [data-reveal]{opacity:1;transform:none;transition:none;} .ledger-row:hover .ledger-go::after, .card:hover .card-go::after, .textlink:hover::after{transform:none;} .card:hover{transform:none;} .theme-fab:hover{transform:none;} }