/* ========================================================================= Pattern & Path Therapy — site stylesheet Implements the Claude Design prototype "Pattern and Path Website.dc.html". The prototype expressed every rule as an inline style. Those are collected here into tokens + components. Where the prototype used two near-identical values for the same role (line-height 1.55 / 1.58 / 1.60 at the same size) the value has been normalised — that variance was authoring noise, not intent, and the rendered result is unchanged. Layer order: tokens -> reset -> type -> layout -> components -> pages -> responsive -> print ========================================================================= */ /* ---------- 1. Tokens ---------------------------------------------------- */ :root{ /* Brand palette */ --ink: #1B2623; /* darkest green — headings, dark sections */ --forest: #35413D; /* primary green — body copy, solid buttons */ --slate: #647068; /* muted green-grey — secondary copy */ --clay: #C79978; /* accent — dots, focus rings, active underline */ --clay-deep: #8E7C5F; /* accent, pressed / low-contrast-safe */ --sand: #C2B29B; /* outline buttons, footer eyebrows */ --stone: #D8CDB9; /* rules on cream, newsletter button */ --line: #E2D8C6; /* standard hairline */ --line-soft: #E7DECE; /* hairline on shell backgrounds */ --line-header: #EDE4D6; /* header underline */ --cream: #FBF8F1; /* page background */ --shell: #F0E9DF; /* alternating section background */ --white: #FFFFFF; --rule-dark: #35413D; /* rules inside dark sections */ /* Placeholder hatch (design spec for unshot imagery) */ --hatch: repeating-linear-gradient(135deg, #EFE7DA 0 10px, #F7F1E6 10px 20px); /* Vertical rhythm — "Airy" is the prototype default. switches to the prototype's "Denser" setting. */ --sec: 112px; /* section padding block */ --gap: 72px; /* major column gap */ --hero: 132px; /* page-opening top pad */ --pad: 32px; /* page inline gutter */ --maxw:1180px; /* Type stacks */ --display:'Epilogue', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --body:'Mulish', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --label:'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius:14px; --radius-sm:10px; --ease:200ms ease; } body[data-density="dense"]{ --sec:68px; --gap:44px; --hero:84px; } /* ---------- 2. Reset & base --------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--cream); color:var(--forest); font-family:var(--body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg{ display:block; max-width:100%; } img{ height:auto; } /* Component display rules below set `display`, which would otherwise beat the UA stylesheet's [hidden] rule on specificity. This keeps `hidden` meaning hidden — the crisis bar and the form success panels rely on it. */ [hidden]{ display:none !important; } a{ color:var(--forest); text-decoration:none; } h1,h2,h3,h4,p,ul,ol,dl,dd,figure{ margin:0; } ul,ol{ padding:0; list-style:none; } ::selection{ background:var(--stone); color:var(--ink); } input,textarea,select,button{ font-family:var(--body); font-size:inherit; color:inherit; } input::placeholder,textarea::placeholder{ color:var(--slate); opacity:1; } /* One focus treatment across the whole site, matching the prototype. */ :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid var(--clay); outline-offset:3px; border-radius:4px; } /* Containers focused by script (form results) are announced, not navigated to. Showing a ring there would read as an error highlight. */ [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible{ outline:none; } .skip-link{ position:absolute; left:12px; top:-60px; z-index:200; background:var(--ink); color:var(--cream); font-family:var(--label); font-size:12px; letter-spacing:.14em; text-transform:uppercase; padding:14px 20px; border-radius:var(--radius-sm); transition:top 160ms ease; } .skip-link:focus{ top:12px; } .visually-hidden{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } } /* ---------- 3. Typography ------------------------------------------------ */ .eyebrow{ font-family:var(--label); font-weight:600; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--forest); margin:0 0 20px; } .eyebrow--tight{ letter-spacing:.22em; } .eyebrow--sm{ font-size:11px; letter-spacing:.2em; } .eyebrow--light{ color:var(--sand); } .eyebrow--slate{ color:var(--slate); } .h1{ font-family:var(--display); font-weight:400; letter-spacing:-.02em; font-size:clamp(36px,4.2vw,56px); line-height:1.06; color:var(--ink); margin:0; text-wrap:pretty; } .h1--home{ font-size:clamp(40px,4.6vw,60px); line-height:1.05; } .h1--person{ font-size:clamp(38px,4vw,52px); } .h1--contact{ font-size:clamp(36px,4vw,52px); } .h2{ font-family:var(--display); font-weight:400; letter-spacing:-.02em; font-size:clamp(28px,3vw,34px); line-height:1.15; color:var(--ink); margin:0; text-wrap:pretty; } .h2--lg{ font-size:clamp(32px,3.6vw,44px); line-height:1.12; } .h2--md{ font-size:clamp(28px,3.2vw,38px); line-height:1.14; } .h2--sm{ font-size:clamp(26px,2.6vw,32px); line-height:1.16; } .h3{ font-family:var(--display); font-weight:500; font-size:24px; line-height:1.2; color:var(--ink); margin:0; } .h3--xs{ font-size:20px; } .h3--sm{ font-size:22px; } .h3--md{ font-size:26px; line-height:1.18; } .h3--lg{ font-size:28px; line-height:1.18; } .h3--xl{ font-size:30px; line-height:1.16; } .quote{ font-family:var(--display); font-weight:400; font-style:italic; color:var(--ink); margin:0; text-wrap:pretty; } .quote--xl{ font-size:clamp(30px,3.6vw,44px); line-height:1.22; } .quote--lg{ font-size:clamp(26px,3vw,34px); line-height:1.2; } .quote--md{ font-size:clamp(22px,2.4vw,28px); line-height:1.24; } .quote--sm{ font-size:24px; line-height:1.36; } .t19{ font-size:19px; line-height:1.58; color:var(--forest); margin:0; } .t18{ font-size:18px; line-height:1.58; color:var(--forest); margin:0; } .t17{ font-size:17px; line-height:1.58; color:var(--forest); margin:0; } .t16{ font-size:16px; line-height:1.55; color:var(--forest); margin:0; } .t15{ font-size:15px; line-height:1.5; color:var(--slate); margin:0; } .t14{ font-size:14px; line-height:1.6; color:var(--slate); margin:0; } .muted{ color:var(--slate); } .on-dark{ color:var(--cream); } .on-dark-soft{ color:var(--stone); } strong,b{ font-weight:700; } .fw600{ font-weight:600; } .mono{ font-family:var(--mono); font-size:11px; line-height:1.6; letter-spacing:.04em; color:var(--forest); margin:0; } .mono--caps{ text-transform:uppercase; letter-spacing:.06em; } /* Measure caps — the prototype set these per element. */ .m18{max-width:18em} .m20{max-width:20em} .m22{max-width:22em} .m24{max-width:24em} .m26{max-width:26em} .m30{max-width:30em} .m32{max-width:32em} .m34{max-width:34em} .m36{max-width:36em} .m38{max-width:38em} .m40{max-width:40em} .m44{max-width:44em} .m46{max-width:46em} /* Spacing utilities (the prototype's per-element margins). */ .mb0{margin-bottom:0} .mb8{margin-bottom:8px} .mb10{margin-bottom:10px} .mb12{margin-bottom:12px} .mb14{margin-bottom:14px} .mb16{margin-bottom:16px} .mb18{margin-bottom:18px} .mb20{margin-bottom:20px} .mb22{margin-bottom:22px} .mb24{margin-bottom:24px} .mb26{margin-bottom:26px} .mb28{margin-bottom:28px} .mb30{margin-bottom:30px} .mb32{margin-bottom:32px} .mb34{margin-bottom:34px} .mb36{margin-bottom:36px} .mb40{margin-bottom:40px} .mb44{margin-bottom:44px} .mb48{margin-bottom:48px} .mb52{margin-bottom:52px} .mt20{margin-top:20px} .mt26{margin-top:26px} .mt28{margin-top:28px} .mt30{margin-top:30px} .mt32{margin-top:32px} .mt34{margin-top:34px} .mt40{margin-top:40px} .mt44{margin-top:44px} .mt56{margin-top:56px} /* ---------- 4. Layout ---------------------------------------------------- */ .wrap{ max-width:var(--maxw); margin-inline:auto; } .wrap--narrow{ max-width:900px; } .wrap--prose{ max-width:940px; } .wrap--tight{ max-width:880px; } .wrap--cta{ max-width:820px; } .sec{ padding:var(--sec) var(--pad); } .sec--hero{ padding:var(--hero) var(--pad) var(--sec); } .sec--flush-top{ padding:0 var(--pad) var(--sec); } .sec--shell{ background:var(--shell); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); } .sec--shell-open{ background:var(--shell); border-top:1px solid var(--line-soft); } .sec--ink{ background:var(--ink); position:relative; overflow:hidden; } .sec--relative{ position:relative; } .centre{ text-align:center; } .rule-top{ border-top:1px solid var(--line); padding-top:56px; } .split{ display:grid; gap:var(--gap); } .split--hero{ grid-template-columns:1.15fr .85fr; align-items:center; } .split--sticky{ grid-template-columns:.8fr 1.2fr; align-items:start; } .split--portrait{ grid-template-columns:.9fr 1.1fr; align-items:center; } .split--profile{ grid-template-columns:.85fr 1.15fr; align-items:start; } .split--contact{ grid-template-columns:.95fr 1.05fr; align-items:start; } .split--support{ grid-template-columns:.85fr 1.15fr; align-items:start; } .split--even{ grid-template-columns:1fr 1fr; align-items:start; } .split--even-mid{ grid-template-columns:1fr 1fr; align-items:center; } .cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:28px; } .cols-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .cols--24{ gap:24px; } .cols--32{ gap:32px; } .items-stretch{ align-items:stretch; } /* Approach: six values, three across */ .values{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px 40px; } /* Approach intro: two columns held to a narrower measure than the page */ .split--intro{ grid-template-columns:1fr 1fr; align-items:start; max-width:1000px; } .stack{ display:grid; } .stack--10{gap:10px} .stack--16{gap:16px} .stack--24{gap:24px} .stack--26{gap:26px} .stack--40{gap:40px} .row{ display:flex; flex-wrap:wrap; gap:14px; } .row--10{ gap:10px; } .row--12{ gap:12px; } .row--centre{ justify-content:center; } .sticky-col{ position:sticky; top:140px; } .relative{ position:relative; } .mx-auto{ margin-inline:auto; } .forest{ color:var(--forest); } .m30ch{ max-width:30ch; } .hairline{ height:1px; background:var(--line-soft); border:none; margin:0; } .wrap--cta-narrow{ max-width:720px; margin-inline:auto; } /* ---------- 5. Components ------------------------------------------------ */ /* 5.1 Buttons */ .btn{ font-family:var(--label); font-weight:400; font-size:12px; letter-spacing:.16em; text-transform:uppercase; display:inline-flex; align-items:center; justify-content:center; padding:18px 30px; border-radius:var(--radius-sm); min-height:48px; border:1px solid transparent; cursor:pointer; text-align:center; transition:background var(--ease), border-color var(--ease), color var(--ease); } .btn--primary{ color:var(--cream); background:var(--forest); } .btn--primary:hover{ background:var(--ink); color:var(--cream); } .btn--ghost{ color:var(--forest); background:transparent; border-color:var(--sand); } .btn--ghost:hover{ background:var(--shell); border-color:var(--forest); color:var(--forest); } .btn--sm{ padding:17px 28px; } .btn--xs{ padding:16px 26px; } .btn--submit{ padding:18px 30px; min-height:52px; } /* 5.2 Text links */ .link-dot{ font-family:var(--label); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--forest); display:inline-flex; align-items:center; gap:10px; min-height:44px; transition:color var(--ease); } .link-dot:hover{ color:var(--ink); } .link-dot::after{ content:''; width:6px; height:6px; border-radius:50%; background:var(--clay); flex:none; } .link-rule{ font-family:var(--label); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--forest); display:inline-flex; align-items:center; min-height:32px; border-bottom:1px solid var(--clay); padding-bottom:2px; transition:color var(--ease), border-color var(--ease); } .link-rule:hover{ color:var(--ink); border-bottom-color:var(--forest); } .link-inline{ color:var(--forest); border-bottom:1px solid var(--clay); transition:border-color var(--ease); } .link-inline:hover{ border-bottom-color:var(--clay-deep); } .link-underline{ color:var(--forest); text-decoration:underline; text-underline-offset:3px; } /* 5.3 Dots */ .dot{ width:11px; height:11px; border-radius:50%; background:var(--clay); flex:none; display:block; } .dot--sm{ width:7px; height:7px; } .dot--rule{ width:5px; height:5px; background:var(--stone); } .dot--sand{ background:var(--sand); } /* 5.4 Chips & pills */ .chip{ font-size:15px; line-height:1.4; color:var(--forest); border:1px solid var(--line); background:var(--white); border-radius:9px; padding:11px 16px; } .pill{ font-size:16px; line-height:1.4; color:var(--forest); background:var(--shell); border:1px solid var(--line); border-radius:999px; padding:12px 20px; } /* 5.5 Cards */ .card{ background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius); padding:36px 32px; } .card--lg{ padding:44px 40px; } .card--sm{ padding:32px 30px; } .card--form{ border-color:var(--line); padding:48px 44px; } .card--flex{ display:flex; flex-direction:column; gap:14px; } .card--flex > .card__body{ flex:1; } .card--tel{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm); padding:26px 24px; } .card--tel a{ color:inherit; } .card--tel a:hover{ color:var(--clay-deep); } .card--ink{ background:var(--ink); border:none; border-radius:var(--radius); padding:44px 40px; display:flex; flex-direction:column; justify-content:center; } .callout{ background:var(--shell); border:1px solid var(--stone); border-left:3px solid var(--forest); border-radius:var(--radius); padding:44px; } .callout--sm{ border-radius:12px; padding:26px 28px; } /* Contact's booking band: shell fill, no accent edge */ .callout--plain{ border:1px solid var(--line-soft); border-left-width:1px; border-left-color:var(--line-soft); } /* 5.6 Placeholder blocks (design-specified, awaiting real content) */ .note{ border:1px dashed var(--sand); border-radius:var(--radius-sm); padding:32px 28px; text-align:center; background:transparent; } .note--cream{ background:var(--cream); padding:26px 24px; } .note--white{ background:var(--white); border-radius:12px; } .hatch{ background:var(--hatch); display:flex; align-items:center; justify-content:center; padding:32px; text-align:center; } .hatch--media{ aspect-ratio:16/9; border-bottom:1px solid var(--line-soft); padding:24px; } /* 5.7 Lists */ .dot-list{ display:grid; gap:14px; } .dot-list li{ font-size:17px; line-height:1.5; color:var(--forest); display:flex; gap:14px; align-items:baseline; } .dot-list li::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--sand); flex:none; margin-top:8px; } .dot-list--tight{ gap:9px; } .dot-list--tight li{ font-size:15px; gap:12px; } .dot-list--tight li::before{ width:5px; height:5px; background:var(--clay); } .promise{ display:grid; gap:26px; border-top:1px solid var(--line); padding-top:34px; } .promise > li{ display:grid; grid-template-columns:12px 1fr; gap:18px; align-items:start; } .promise .dot{ margin-top:9px; } /* 5.8 Rule-separated blocks */ .rule-block{ border-top:1px solid var(--line); padding-top:32px; } .rule-block--soft{ border-top-color:var(--stone); padding-top:26px; } .rule-block--wide{ border-top:1px solid var(--line); padding-top:36px; margin-top:36px; } /* 5.9 Three-beat timeline */ .beats{ position:relative; margin-top:56px; } .beats::before{ content:''; position:absolute; left:0; right:0; top:5px; height:1px; background:var(--stone); } .beats__grid{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:48px; } .beats__grid .dot{ margin-bottom:30px; } /* 5.10 Value strip (Warm · Grounded · …) */ .strip{ display:flex; flex-wrap:wrap; gap:16px 40px; align-items:center; justify-content:center; margin-bottom:64px; } .strip span:not(.dot--rule){ font-family:var(--label); font-weight:600; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--forest); } /* 5.11 Service rows */ .ledger{ border-top:1px solid var(--forest); } .ledger__row{ display:grid; grid-template-columns:auto 1.35fr .75fr; gap:20px 48px; padding:38px 0; border-bottom:1px solid var(--line); align-items:start; } .ledger__num{ font-family:var(--label); font-weight:600; font-size:11px; letter-spacing:.2em; color:var(--clay); margin:8px 0 0; } .ledger__price{ display:grid; grid-template-columns:1fr auto; gap:10px 24px; align-items:baseline; } .ledger__dur{ font-size:16px; line-height:1.4; color:var(--slate); margin:0; } .ledger__amt{ font-family:var(--display); font-weight:500; font-size:22px; line-height:1; color:var(--ink); margin:0; text-align:right; white-space:nowrap; } /* Pricing table variant */ .ledger--rates .ledger__row{ grid-template-columns:1.5fr 1fr; gap:40px; padding:32px 0; } .ledger--rates .ledger__price{ gap:10px 32px; } .ledger--rates .ledger__amt{ font-size:26px; } /* 5.12 Numbered steps */ .steps > li{ display:grid; grid-template-columns:80px 1fr; gap:32px; border-top:1px solid var(--line); padding:34px 0; } .steps > li:last-child{ border-bottom:1px solid var(--line); } .steps__num{ font-family:var(--display); font-weight:500; font-size:34px; line-height:1; color:var(--slate); } .steps > li:last-child .steps__num{ color:var(--clay-deep); } /* 5.13 Article cards */ .article{ border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; background:var(--white); } .article__body{ padding:36px 34px; } /* 5.13b Intake form preview (Resources) */ .intake-line{ border-bottom:1px solid var(--line-soft); padding-bottom:16px; } /* 5.13c Long-form prose — the privacy, terms and accessibility pages. These are read, not skimmed, so the measure is tighter than the marketing pages and the vertical rhythm is set once here rather than per element. */ .prose{ max-width:44em; } .prose > * + *{ margin-top:20px; } .prose h2{ font-family:var(--display); font-weight:400; letter-spacing:-.02em; font-size:clamp(24px,2.4vw,30px); line-height:1.2; color:var(--ink); margin-top:56px; padding-top:28px; border-top:1px solid var(--line); } .prose h2:first-child{ margin-top:0; padding-top:0; border-top:none; } /* A .rows block already closes with a rule; the heading's own rule would double it. Let the block's line do the separating. */ .prose .rows + h2{ padding-top:0; border-top:none; } .prose h3{ font-family:var(--display); font-weight:500; font-size:20px; line-height:1.25; color:var(--ink); margin-top:32px; } .prose p, .prose li{ font-size:17px; line-height:1.62; color:var(--forest); } .prose ul{ display:grid; gap:12px; padding-left:0; } .prose ul li{ display:flex; gap:14px; align-items:baseline; } .prose ul li::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--sand); flex:none; margin-top:8px; } .prose a{ color:var(--forest); border-bottom:1px solid var(--clay); } .prose a:hover{ border-bottom-color:var(--clay-deep); } .prose strong{ font-weight:700; } .prose .stamp{ font-family:var(--label); font-weight:600; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--slate); } .prose .aside{ background:var(--shell); border:1px solid var(--stone); border-left:3px solid var(--forest); border-radius:12px; padding:26px 28px; margin-top:28px; } .prose .aside > * + *{ margin-top:12px; } .prose .aside p{ font-size:16px; line-height:1.58; } /* Definition-style rows used by the insurer list and the legal contact blocks */ .rows{ display:grid; gap:0; border-top:1px solid var(--line); margin-top:28px; } .rows > div{ display:grid; grid-template-columns:minmax(180px,.8fr) 1.2fr; gap:8px 40px; padding:20px 0; border-bottom:1px solid var(--line); align-items:baseline; } .rows dt, .rows .rows__k{ font-family:var(--label); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--forest); margin:0; } .rows dd, .rows .rows__v{ font-size:16px; line-height:1.55; color:var(--forest); margin:0; } /* Insurer names — plain text, deliberately not logos. See README. */ .insurers{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; } .insurers span{ font-size:15px; line-height:1.4; color:var(--forest); border:1px solid var(--line); background:var(--white); border-radius:9px; padding:10px 15px; } /* 5.14 FAQ accordion */ .faq{ border-top:1px solid var(--line); } .faq__item{ border-bottom:1px solid var(--line); } .faq__q{ width:100%; background:none; border:none; padding:26px 0; display:flex; gap:24px; align-items:center; justify-content:space-between; text-align:left; cursor:pointer; min-height:48px; font-family:var(--display); font-weight:500; font-size:21px; line-height:1.3; color:var(--ink); } .faq__q .dot{ background:var(--line); transition:background var(--ease); } .faq__q[aria-expanded="true"] .dot{ background:var(--clay); } .faq__a{ display:none; } .faq__a[data-open]{ display:block; } .faq__a p{ font-size:17px; line-height:1.6; color:var(--forest); margin:0 0 28px; max-width:44em; } /* 5.15 Forms */ .field{ display:block; } .field__label{ display:block; font-family:var(--label); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--forest); margin-bottom:10px; } .field__label .opt{ text-transform:none; letter-spacing:.02em; color:var(--slate); } .field__control{ width:100%; background:var(--cream); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; font-size:16px; color:var(--ink); min-height:48px; transition:border-color var(--ease); } .field__control:focus-visible{ border-color:var(--clay); outline-offset:2px; } select.field__control{ appearance:none; 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='%2335413D' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; } textarea.field__control{ min-height:120px; resize:vertical; line-height:1.55; } .field__hint{ margin-top:10px; } .field__error{ font-size:14px; line-height:1.5; color:#8A3A2A; margin:8px 0 0; display:none; } .field.is-invalid .field__control{ border-color:#8A3A2A; } .field.is-invalid .field__error{ display:block; } /* Honeypot. Positioned off-canvas rather than display:none — the latter is the first thing form-filling bots learn to skip. */ .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } .success-panel{ padding:20px 0; } .choices{ display:flex; flex-wrap:wrap; gap:10px; } .choice{ display:flex; align-items:center; gap:10px; font-size:16px; color:var(--forest); border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px 16px; min-height:48px; cursor:pointer; transition:border-color var(--ease); } .choice:hover{ border-color:var(--forest); } .choice input{ accent-color:var(--forest); width:17px; height:17px; margin:0; } .choice--bare{ border:none; padding:0; min-height:0; font-size:14px; color:var(--slate); margin-top:12px; } .choice--bare:hover{ border-color:transparent; } .choice--bare input{ width:16px; height:16px; } .consent{ display:grid; gap:16px; border-top:1px solid var(--line-soft); padding-top:24px; } .consent label{ display:grid; grid-template-columns:20px 1fr; gap:14px; align-items:start; font-size:15px; line-height:1.55; color:var(--forest); cursor:pointer; } .consent input{ accent-color:var(--forest); width:18px; height:18px; margin-top:3px; } .privacy-box{ background:var(--cream); border:1px solid var(--line-soft); border-radius:var(--radius-sm); padding:20px 22px; display:grid; gap:10px; } fieldset{ border:none; margin:0; padding:0; } legend{ font-family:var(--label); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--forest); margin-bottom:14px; padding:0; } /* Form status region */ .form-status{ display:none; } .form-status[data-state]{ display:block; } .form-status[data-state="error"]{ background:#FBEDE9; border:1px solid #E3BFB4; border-left:3px solid #8A3A2A; border-radius:var(--radius-sm); padding:18px 20px; } .form-status[data-state="error"] p{ font-size:15px; line-height:1.55; color:#6E2E22; margin:0; } /* Newsletter (on ink) */ .newsletter__form{ display:flex; flex-wrap:wrap; gap:10px; } .newsletter__input{ flex:1; min-width:200px; background:var(--white); border:1px solid var(--slate); border-radius:var(--radius-sm); padding:15px 16px; font-size:16px; color:var(--ink); min-height:48px; } .newsletter__input:focus-visible{ border-color:var(--clay); outline-offset:2px; } .newsletter__btn{ font-family:var(--label); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); background:var(--stone); border:none; border-radius:var(--radius-sm); padding:15px 26px; min-height:48px; cursor:pointer; transition:background var(--ease); } .newsletter__btn:hover{ background:var(--sand); } /* 5.16 Media frames */ .frame{ border-radius:var(--radius); border:1px solid var(--line); overflow:hidden; background:var(--shell); position:relative; } .frame--4x5{ aspect-ratio:4/5; } .frame--1x1{ aspect-ratio:1/1; } .frame--bare{ border-width:0; } .frame img{ width:100%; height:100%; object-fit:cover; } .frame--hero-art svg{ position:absolute; inset:0; width:100%; height:100%; } .frame--crop-18 img{ object-position:50% 18%; } .frame--crop-15 img{ object-position:50% 15%; } /* 5.17 Decorative motifs */ .motif{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } [data-motif="lines"] .motif--weave, [data-motif="lines"] .motif--contours, [data-motif="weave"] .motif--lines, [data-motif="weave"] .motif--contours, [data-motif="contours"] .motif--lines, [data-motif="contours"] .motif--weave{ display:none; } .motif--ink{ opacity:.32; } /* 5.18 Definition lists */ .deflist{ display:grid; gap:20px; margin:0; } .deflist dt{ font-family:var(--label); font-weight:600; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--forest); margin-bottom:8px; } .deflist dd{ font-size:16px; line-height:1.5; color:var(--forest); margin:0; } .hours{ display:grid; grid-template-columns:auto 1fr; gap:12px 32px; margin:0; } .hours dt{ font-size:16px; color:var(--stone); margin:0; } .hours dd{ font-size:16px; color:var(--cream); margin:0; } /* 5.19 Scheduler preview grid (design placeholder) */ .slots{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:22px; } .slot{ border:1px solid var(--line-soft); border-radius:8px; padding:14px 6px; } .slot--active{ border-color:var(--clay); background:var(--cream); } .slot__day{ font-family:var(--label); font-size:10px; letter-spacing:.12em; color:var(--forest); margin:0 0 8px; } .slot__time{ font-size:15px; color:var(--forest); margin:0; } .slot--active .slot__time{ color:var(--ink); } /* 5.20 Jane booking embed */ .booking__frame{ width:100%; min-height:760px; border:0; display:block; background:var(--white); border-radius:12px; } .booking__fallback{ display:grid; gap:18px; justify-items:center; text-align:center; } /* 5.21 Contact page monogram */ .contact-mark{ width:88px; height:auto; } /* ---------- 6. Crisis bar, header, footer -------------------------------- */ .crisis-bar{ background:var(--ink); color:var(--cream); padding:10px var(--pad); font-size:14px; line-height:1.4; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center; text-align:center; } .crisis-bar a{ color:var(--cream); border-bottom:1px solid var(--clay); } .site-header{ position:sticky; top:0; z-index:60; background:rgba(251,248,241,.94); border-bottom:1px solid var(--line-header); } @supports (backdrop-filter:blur(12px)){ .site-header{ backdrop-filter:blur(12px); } } .site-header__inner{ max-width:var(--maxw); margin-inline:auto; padding:18px var(--pad); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; } .site-header__logo{ display:block; flex:none; border-radius:4px; } .site-header__logo img{ width:auto; height:72px; } .nav{ display:flex; align-items:center; justify-content:flex-end; gap:6px 22px; flex-wrap:wrap; } .nav__link{ font-size:15px; font-weight:500; padding:12px 0; display:block; min-height:44px; letter-spacing:.01em; } .nav__link::after{ content:''; display:block; height:2px; background:var(--clay); margin-top:6px; opacity:0; transition:opacity var(--ease); } .nav__link:hover::after{ opacity:.4; } .nav__link[aria-current="page"]::after{ opacity:1; } .nav-toggle{ display:none; align-items:center; gap:10px; background:transparent; border:1px solid var(--sand); border-radius:var(--radius-sm); padding:12px 16px; min-height:48px; cursor:pointer; font-family:var(--label); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--forest); } .nav-toggle__bars{ display:grid; gap:4px; width:16px; } .nav-toggle__bars span{ height:1.5px; background:var(--forest); border-radius:2px; } .nav__cta{ display:none; } .site-footer{ background:var(--ink); padding:80px var(--pad) 44px; } .site-footer__cols{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:var(--gap); align-items:start; } .site-footer__plaque{ background:var(--cream); border-radius:33px; padding:28px 32px; display:inline-block; margin-bottom:40px; } .site-footer__plaque img{ width:auto; height:104px; } .site-footer__nav{ display:grid; gap:14px; } .site-footer__nav a{ font-size:16px; color:var(--cream); padding:6px 0; min-height:32px; transition:color var(--ease); } .site-footer__nav a:hover{ color:var(--sand); } .site-footer__land{ border-top:1px solid var(--rule-dark); margin-top:64px; padding-top:36px; display:grid; grid-template-columns:1.25fr .75fr; gap:36px var(--gap); align-items:start; } .site-footer__land p{ font-size:15px; line-height:1.7; color:var(--stone); margin:0; } .site-footer__legal{ border-top:1px solid var(--rule-dark); margin-top:36px; padding-top:28px; display:flex; flex-wrap:wrap; gap:16px 32px; justify-content:space-between; align-items:center; } .site-footer__legal p{ font-size:14px; color:var(--stone); margin:0; } .site-footer__legal a{ color:var(--stone); } .site-footer__legal a:hover{ color:var(--cream); } .site-footer__contact{ font-size:16px; line-height:1.7; color:var(--stone); margin:0; } .site-footer__contact a{ color:var(--stone); } .site-footer__contact a:hover{ color:var(--cream); } .site-footer__crisis{ font-size:16px; line-height:1.6; color:var(--cream); margin:0 0 24px; } .site-footer__crisis a{ color:var(--cream); border-bottom:1px solid var(--clay); } /* ---------- 7. Responsive ------------------------------------------------ */ /* Tablet / small laptop */ @media (max-width:1080px){ :root{ --sec:88px; --gap:48px; --hero:104px; } .site-header__logo img{ height:60px; } .nav{ gap:4px 16px; } .nav__link{ font-size:14px; } .beats__grid{ gap:32px; } .site-footer__plaque img{ height:84px; } } /* Point at which the desktop nav no longer fits */ @media (max-width:960px){ .site-header__inner{ grid-template-columns:auto auto; justify-content:space-between; gap:16px; } .nav-toggle{ display:inline-flex; } .site-header__cta{ display:none; } .nav{ display:none; position:absolute; left:0; right:0; top:100%; background:var(--cream); border-bottom:1px solid var(--line-header); flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; padding:8px var(--pad) 24px; max-height:calc(100dvh - 100%); overflow-y:auto; } .nav[data-open]{ display:flex; } .nav__link{ padding:16px 0; border-bottom:1px solid var(--line-soft); font-size:17px; } .nav__link::after{ display:none; } .nav__link[aria-current="page"]{ color:var(--ink); font-weight:600; } .nav__cta{ display:inline-flex; margin-top:20px; } } /* Single-column below this */ @media (max-width:900px){ .split, .cols-2, .cols-3, .beats__grid, .values, .split--intro, .site-footer__cols, .site-footer__land{ grid-template-columns:1fr !important; } .split{ gap:44px; } .cols-2,.cols-3{ gap:20px; } .values{ gap:32px; } .rows > div{ grid-template-columns:1fr; gap:6px; } .sticky-col{ position:static; } .beats::before{ display:none; } .beats__grid{ gap:40px; } .beats__grid > div{ border-top:1px solid var(--stone); padding-top:26px; } .beats__grid .dot{ margin-bottom:22px; } .ledger__row{ grid-template-columns:auto 1fr; gap:16px 24px; } .ledger__price{ grid-column:1 / -1; grid-template-columns:1fr auto; padding-top:6px; } .ledger--rates .ledger__row{ grid-template-columns:1fr; } .ledger--rates .ledger__price{ grid-column:auto; } /* An explicit width is required here: auto inline margins take the box out of grid stretch, and its only child is absolutely positioned, so fit-content would resolve to zero and the illustration would vanish. */ .split--hero .frame--hero-art{ width:min(100%, 420px); margin-inline:auto; } .site-footer__cols{ gap:52px; } .site-footer__land{ gap:26px; } } /* Phone */ @media (max-width:640px){ :root{ --pad:20px; --sec:64px; --gap:36px; --hero:72px; } .site-header__inner{ padding:14px var(--pad); } .site-header__logo img{ height:52px; } .rule-top{ padding-top:40px; } .card{ padding:28px 24px; } .card--lg,.card--ink{ padding:32px 26px; } .card--form{ padding:28px 22px; } .callout{ padding:28px 24px; } .article__body{ padding:28px 24px; } .cols-2 .field, .split--even .field{ min-width:0; } .form-grid-2{ grid-template-columns:1fr !important; } .steps > li{ grid-template-columns:1fr; gap:12px; padding:28px 0; } .steps__num{ font-size:28px; } .slots{ grid-template-columns:repeat(3,1fr); } .strip{ gap:12px 20px; margin-bottom:44px; } .strip .dot--rule{ display:none; } .site-footer{ padding:56px var(--pad) 36px; } .site-footer__plaque{ padding:20px 24px; border-radius:26px; } .site-footer__plaque img{ height:72px; } .site-footer__legal{ justify-content:flex-start; gap:12px; } .btn{ padding:16px 24px; } .booking__frame{ min-height:640px; } } /* ---------- 8. Print ----------------------------------------------------- */ @media print{ .site-header,.crisis-bar,.nav-toggle,.skip-link,.booking__frame{ display:none !important; } body{ background:#fff; } .sec,.sec--hero{ padding:24px 0; } .site-footer{ background:#fff; padding:24px 0; } .site-footer *{ color:#1B2623 !important; } a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:11px; } }