/* ============================================================ FINDER NETWORK — SHARED THEME Instrument Serif editorial template, 8 site palettes. Each site sets `class="site-"` on or . ============================================================ */ /* ==================== TOKENS ==================== */ :root{ --serif:'Instrument Serif', Georgia, serif; --sans:'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --mono:'JetBrains Mono', ui-monospace, Menlo, monospace; --ease:cubic-bezier(.4,0,.2,1); --dur:300ms; --max-w:1320px; --nav-h:68px; } .ed-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} /* ==================== PER-SITE PALETTES ==================== */ /* Shared line colors for the 6 light wellness sites */ .site-lymphatic, .site-reformer, .site-kclinic, .site-colonic, .site-cryo, .site-fasting{ --line:#E8E5D8; --line-2:#D8D3C2; } .site-lymphatic{ --paper:#FCFBF7; --paper-2:#F5F3EB; --ink:#0B1E1C; --ink-2:#1C3A35; --ink-dim:#3A4A47; --accent:#047857; --gold:#B8935A; --gold-soft:#F7F0DF; --muted:#6B6F6A; --img-base:#3E5A47; --img-a:#5A7764; --img-b:#1E3523; } .site-reformer{ --paper:#FCFBF7; --paper-2:#F5EBE2; --ink:#1C1510; --ink-2:#3A2A1C; --ink-dim:#4A3A2D; /* --accent: restored to #BB5A4E (terracotta) per Alexandra's validated palette. Note: contrast ratio ~4.4:1 vs WCAG AA 4.5:1 threshold — intentional aesthetic tradeoff. Large text / buttons qualify for AA Large (3:1) which passes. */ --accent:#BB5A4E; --gold:#CC9078; --gold-soft:#F5E5DC; --muted:#7A6F66; --line:#EADFD5; --line-2:#DDCFBE; --img-base:#CC9685; --img-a:#D9A094; --img-b:#5C2E26; } .site-kclinic{ --paper:#FAFAF7; --paper-2:#EEEBE0; --ink:#0F1A3A; --ink-2:#1F2E5A; --ink-dim:#3E4968; --accent:#065F5B; --gold:#C4A574; --gold-soft:#F4ECD8; --muted:#5F6578; --line:#E5E2D5; --line-2:#D5D1BE; --img-base:#5A7990; --img-a:#8FA8BA; --img-b:#142545; } .site-colonic{ /* Hydro Deep — colonic = irrigation, water, clinical purity. Warm ivory paper (distinct from cryo's cool paper) + deep teal accent. */ --paper:#FAF7F0; --paper-2:#EFEADD; --ink:#14201F; --ink-2:#253735; --ink-dim:#485A57; --accent:#1F4E5F; --gold:#3A7A8A; --gold-soft:#DFE9EC; --muted:#68706B; --line:#E4DFD0; --line-2:#D0C9B5; --img-base:#5A8490; --img-a:#7AA4B0; --img-b:#0F2832; } .site-cryo{ --paper:#F6F8FA; --paper-2:#E8EDF2; --ink:#0F1820; --ink-2:#1F2D3A; --ink-dim:#3A4A5A; --accent:#4A7F9E; --gold:#8FA8BC; --gold-soft:#DDE6EE; --muted:#6A7785; --line:#DDE4EB; --line-2:#C5D0DC; --img-base:#7BA4BC; --img-a:#A5C4D6; --img-b:#0F2535; } .site-fasting{ /* Glacier — water fasting = purity, clarity, alpine water, silver-blue. Cool pale paper (slightly cooler than cryo, silver-leaning) + glacier slate accent. Distinct from cryo (#4A7F9E deep ice-blue) and colonic (#1F4E5F deep teal). */ --paper:#F6F8F7; --paper-2:#E8ECEA; --ink:#141A1C; --ink-2:#27323A; --ink-dim:#4A5660; --accent:#546E7A; --gold:#7A92A0; --gold-soft:#E2EAEE; --muted:#6B7780; --line:#DEE4E2; --line-2:#C6CFCE; --img-base:#7C919B; --img-a:#A5B5BD; --img-b:#1A2830; } /* Entertainment (dark) */ .site-kdrama, .site-kdating{ --line:rgba(245,242,234,.1); --line-2:rgba(245,242,234,.18); } .site-kdrama{ --paper:#0A0A0F; --paper-2:#14141C; --ink:#F5F2EA; --ink-2:#D9D4C7; --ink-dim:rgba(245,242,234,.72); --accent:#E8C890; --gold:#B8935A; --gold-soft:rgba(184,147,90,.06); --muted:rgba(245,242,234,.48); --img-base:#1C1C24; --img-a:#36363E; --img-b:#0A0A10; } .site-kdating{ --paper:#0B0E14; --paper-2:#14171E; --ink:#EAF1F5; --ink-2:#CBD5E0; --ink-dim:rgba(234,241,245,.72); --accent:#E6C897; --gold:#B8935A; --gold-soft:rgba(230,200,151,.08); --muted:rgba(234,241,245,.48); --img-base:#1E3F4A; --img-a:#2E7D82; --img-b:#050A12; } /* ==================== RESET ==================== */ *, *::before, *::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} body{ font-family:var(--sans); background:var(--paper); color:var(--ink); font-size:16px; line-height:1.55; font-weight:400; font-feature-settings:"liga","calt","kern"; text-rendering:optimizeLegibility; position:relative; } /* Subtle paper grain — invisible in screenshots, perceptible to the eye. Uses a data-URI SVG noise at 3% opacity. Adds warmth without bytes. */ body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:9999; opacity:.035;mix-blend-mode:multiply; background-image:url("data:image/svg+xml;utf8,"); } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important} } img,svg{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none;transition:color var(--dur) var(--ease)} button{font:inherit;cursor:pointer;background:none;border:none;color:inherit} input,textarea,select{font:inherit;color:inherit} h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:-.015em} /* ==================== TOP NAV ==================== */ .topnav{ position:sticky;top:0;z-index:50; height:var(--nav-h); background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid var(--line); } .topnav-inner{ max-width:var(--max-w);margin:0 auto;height:100%; padding:0 32px; display:flex;align-items:center;justify-content:space-between;gap:24px; } .topnav-brand{ font-family:var(--serif);font-size:22px;font-weight:400; letter-spacing:-.01em;color:var(--ink); } .topnav-brand em{font-style:italic} .topnav-links{display:none;gap:32px} .topnav-links a{ font-family:var(--mono);font-size:10px; letter-spacing:.14em;text-transform:uppercase; color:var(--muted); } .topnav-links a:hover,.topnav-links a.active{color:var(--ink)} .topnav-links .cta{color:var(--accent);font-weight:600} .topnav-burger{ display:flex;flex-direction:column;gap:5px;padding:8px; } .topnav-burger span{display:block;width:22px;height:1.5px;background:var(--ink)} @media(min-width:960px){ .topnav-links{display:flex} .topnav-burger{display:none} } /* Mobile drawer */ .mob-drawer{ position:fixed;inset:var(--nav-h) 0 0;z-index:40; background:var(--paper); padding:32px; display:none;flex-direction:column;gap:4px; } .mob-drawer.open{display:flex} .mob-drawer a{ padding:18px 0;border-bottom:1px solid var(--line); font-family:var(--serif);font-size:24px;color:var(--ink); } .mob-drawer a:last-child{border:none;color:var(--accent)} /* ==================== HERO (editorial) ==================== */ .ed-hero{padding:112px 32px 96px;max-width:var(--max-w);margin:0 auto} .ed-top{ display:flex;align-items:center;justify-content:space-between; margin-bottom:56px;padding-bottom:24px; border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, transparent); flex-wrap:wrap;gap:16px; } .ed-date,.ed-issue{ font-family:var(--mono);font-size:10.5px;font-weight:500; letter-spacing:.18em;text-transform:uppercase;color:var(--muted); font-variant-numeric:tabular-nums; } .ed-issue{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink-dim)} .ed-h1{ font-family:var(--serif);font-size:clamp(54px,8vw,108px); font-weight:400;line-height:.98;color:var(--ink); letter-spacing:-.035em;max-width:none; font-feature-settings:"liga","dlig","calt"; } /* Inline italic em (the second word of the minimalist H1: "Colonic hydrotherapy.") */ .ed-h1 em{font-style:italic;color:var(--accent);letter-spacing:-.025em;margin-left:.12em} /* Editorial brand line used under H1 on About/Editorial/Methodology — upright serif so the wordmark never devolves into a swirly italic at large sizes. */ .ed-brand-line{ font-family:var(--serif);font-style:normal; font-size:clamp(19px,1.8vw,24px);font-weight:400; color:var(--muted);letter-spacing:.01em; margin:8px 0 0;text-transform:none; } .ed-brand-line em{font-style:italic;color:var(--accent);margin-left:.02em} .ed-rule{width:96px;height:1px;background:color-mix(in srgb, var(--ink) 45%, transparent);margin:40px 0 28px} .ed-lede{ font-family:var(--serif);font-size:23px;font-weight:400; color:var(--ink-dim);max-width:600px;line-height:1.45;margin-bottom:42px; letter-spacing:-.005em;font-variant-numeric:tabular-nums; } .ed-lede em{font-style:italic;color:var(--ink-2)} .ed-meta{ display:flex;gap:0;align-items:baseline;flex-wrap:wrap; font-family:var(--mono);font-size:10.5px;color:var(--muted); text-transform:uppercase;letter-spacing:.16em;font-weight:500; font-variant-numeric:tabular-nums; } .ed-meta span{padding:0 18px;border-left:1px solid color-mix(in srgb, var(--ink) 14%, transparent)} .ed-meta span:first-child{padding-left:0;border-left:none} .ed-meta strong{ color:var(--ink);font-weight:500;font-family:var(--serif); font-size:18px;font-style:normal;letter-spacing:-.01em; margin-right:.3em; } /* Search line */ .ed-search{ display:flex;align-items:center;margin-top:40px;max-width:520px; border-bottom:1.5px solid var(--ink);padding-bottom:14px; transition:border-color var(--dur) var(--ease); } .ed-search:focus-within{border-color:var(--accent)} .ed-search-icon{font-size:16px;margin-right:14px;color:var(--ink)} .ed-search input{ flex:1;border:none;outline:none; font-family:var(--serif);font-size:22px;font-style:italic; background:transparent;color:var(--ink);letter-spacing:-.01em; } .ed-search input::placeholder{color:var(--muted);font-style:italic} .ed-search button{ font-family:var(--mono);font-size:11px;font-weight:600; text-transform:uppercase;letter-spacing:.12em; color:var(--accent);padding:4px 0; } /* Geolocation "find near me" (reformer) */ .ed-geo{ display:inline-flex;align-items:center;gap:10px; margin-top:22px;padding:12px 22px;border-radius:100px; background:var(--accent);color:var(--paper); font-family:var(--mono);font-size:11px;font-weight:600; letter-spacing:.12em;text-transform:uppercase; transition:all var(--dur) var(--ease); } .ed-geo:hover{transform:translateY(-1px);box-shadow:0 12px 28px -12px rgba(0,0,0,.3)} .ed-geo::before{content:"◉";font-size:14px} .ed-geo[data-state="locating"]{opacity:.7;pointer-events:none} .ed-geo[data-state="locating"]::before{animation:pulse 1.2s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}} /* ==================== GRID SECTIONS ==================== */ .ed-section{padding:0 32px 112px;max-width:var(--max-w);margin:0 auto} .ed-section-lbl{ font-family:var(--mono);font-size:10.5px;font-weight:500; text-transform:uppercase;letter-spacing:.22em;color:var(--muted); margin-bottom:44px;padding-top:48px; border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent); display:flex;justify-content:space-between;align-items:center; position:relative;font-variant-numeric:tabular-nums; } /* Gold hairline draws 0→96px on scroll-in, settles as a section anchor */ .ed-section-lbl::before{ content:"";position:absolute;top:-1px;left:0;width:0;height:1px; background:var(--accent);animation:ed-rule-draw 1.2s var(--ease) forwards; } @keyframes ed-rule-draw{ 0%{width:0;opacity:0} 20%{opacity:1} 100%{width:96px;opacity:1} } .ed-section-lbl em{ font-family:var(--serif);font-style:italic;text-transform:none; letter-spacing:-.005em;color:var(--ink-dim);font-size:17px; } /* ==================== CITY / ENTITY CARDS ==================== */ .ed-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media(max-width:1080px){.ed-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.ed-grid{grid-template-columns:1fr}} /* ==================== COUNTRY SECTIONS (cities.html grouped view) ==================== */ .ed-country-section{margin:0 0 56px 0} .ed-country-section:last-child{margin-bottom:0} .ed-country-header{ display:flex;align-items:baseline;justify-content:space-between; gap:16px;margin:0 0 20px 0;padding:0 0 14px 0; border-bottom:1px solid var(--line); } .ed-country-title{ font-family:var(--serif);font-weight:400; font-size:28px;line-height:1.2;margin:0;color:var(--ink); letter-spacing:-.01em; } .ed-country-flag{ font-size:26px;margin-right:6px; display:inline-block;transform:translateY(1px); } .ed-country-meta{ font-family:var(--mono);font-size:11px; color:var(--ink-dim);letter-spacing:.1em; text-transform:uppercase;white-space:nowrap; } @media(max-width:560px){ .ed-country-header{flex-direction:column;align-items:flex-start;gap:4px} .ed-country-title{font-size:22px} .ed-country-meta{font-size:10px} } .ed-card{ background:var(--paper);border:1px solid var(--line); border-radius:14px;overflow:hidden; transition:all .5s var(--ease);display:block;position:relative; } .ed-card:hover{ transform:translateY(-3px);border-color:var(--line-2); box-shadow:0 24px 48px -24px rgba(0,0,0,.22); } .ed-card-img{ aspect-ratio:4/5; background:linear-gradient(135deg,var(--img-a) 0%,var(--img-b) 100%); position:relative;overflow:hidden; } .ed-card-img img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; display:block;transition:transform .8s var(--ease);z-index:1; } .ed-card:hover .ed-card-img img{transform:scale(1.04)} .ed-card-img::before{ content:"";position:absolute;inset:0;z-index:2; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.58) 100%); } .ed-card-flag{ position:absolute;top:14px;left:14px;z-index:3; font-family:var(--mono);font-size:10px;text-transform:uppercase; letter-spacing:.1em;color:var(--paper); background:rgba(0,0,0,.55);backdrop-filter:blur(8px); padding:5px 10px;border-radius:100px;font-weight:500; } .ed-card-body{padding:22px 22px 26px} .ed-card-kicker{ font-family:var(--mono);font-size:10px;text-transform:uppercase; letter-spacing:.18em;color:var(--muted);margin-bottom:8px;font-weight:500; font-variant-numeric:tabular-nums; } .ed-card-name{ font-family:var(--serif);font-size:25px;font-weight:400; line-height:1.08;letter-spacing:-.015em;color:var(--ink);margin-bottom:12px; } .ed-card-meta{ font-family:var(--mono);font-size:10.5px;color:var(--muted); display:flex;gap:10px;align-items:center;text-transform:uppercase; letter-spacing:.14em;font-variant-numeric:tabular-nums;font-weight:500; } .ed-card-meta strong{color:var(--ink);font-weight:600} .ed-card-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted)} /* ==================== FEATURED (magazine spread) ==================== */ .ed-featured{ grid-column:1/-1; display:grid;grid-template-columns:1.6fr 1fr;gap:0; background:linear-gradient(180deg,var(--gold-soft) 0%,var(--paper) 100%); border:1px solid var(--gold);border-radius:18px;overflow:hidden; position:relative;transition:all .6s var(--ease); } .ed-featured:hover{transform:translateY(-3px);box-shadow:0 30px 60px -30px rgba(0,0,0,.35)} .ed-featured::before{ content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:5; background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent); } .ed-feat-img{ aspect-ratio:4/3; background:linear-gradient(135deg,var(--img-a) 0%,var(--img-b) 100%); overflow:hidden;position:relative; } .ed-feat-img img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; display:block;transition:transform 1s var(--ease);z-index:1; } .ed-featured:hover .ed-feat-img img{transform:scale(1.03)} .ed-feat-label{ position:absolute;top:24px;left:24px;z-index:3; display:inline-flex;align-items:center;gap:8px; background:var(--paper);padding:9px 16px 9px 14px;border-radius:100px; font-family:var(--mono);font-size:10px;font-weight:600; text-transform:uppercase;letter-spacing:.14em;color:var(--ink); box-shadow:0 8px 24px -8px rgba(0,0,0,.3); } .ed-feat-label::before{content:"◆";color:var(--gold);font-size:11px} .ed-feat-body{ padding:48px 44px;display:flex;flex-direction:column; justify-content:space-between;position:relative; } .ed-feat-eyebrow{ font-family:var(--mono);font-size:10.5px;font-weight:500; text-transform:uppercase;letter-spacing:.22em; color:var(--accent);margin-bottom:18px; } .ed-feat-name{ font-family:var(--serif);font-size:clamp(32px,3.2vw,46px);font-weight:400; line-height:1.05;letter-spacing:-.03em;color:var(--ink);margin-bottom:22px; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical; overflow:hidden;overflow-wrap:anywhere; } .ed-feat-quote{ font-family:var(--serif);font-style:italic;font-size:19px; line-height:1.55;color:var(--ink-dim);max-width:42ch;margin-bottom:28px; padding-left:20px;border-left:1px solid color-mix(in srgb, var(--accent) 60%, transparent); text-indent:-.3em; } .ed-feat-quote::after{ content:" — The Editors";display:block;margin-top:14px; font-family:var(--mono);font-size:10px;font-style:normal; text-transform:uppercase;letter-spacing:.2em;color:var(--muted); padding-left:0;text-indent:0; } .ed-feat-stats{ display:grid;grid-template-columns:repeat(3,1fr);gap:0; margin-bottom:26px;padding-top:20px;border-top:1px solid var(--gold); } .ed-feat-stat{padding-right:16px} .ed-feat-stat:not(:last-child){border-right:1px solid var(--gold)} .ed-feat-stat:not(:first-child){padding-left:16px} .ed-feat-stat-n{font-family:var(--serif);font-size:32px;font-weight:400;color:var(--ink);line-height:1} .ed-feat-stat-l{ font-family:var(--mono);font-size:9px;text-transform:uppercase; letter-spacing:.1em;color:var(--muted);margin-top:8px; } .ed-feat-cta{ display:inline-flex;align-items:center;gap:10px; font-family:var(--mono);font-size:11px;font-weight:600; text-transform:uppercase;letter-spacing:.14em;color:var(--ink); padding-bottom:4px;border-bottom:1.5px solid var(--ink); width:fit-content;transition:all var(--dur) var(--ease); } .ed-feat-cta::after{content:"→";font-family:var(--sans);font-size:14px} @media(max-width:1080px){ .ed-featured{grid-template-columns:1fr} .ed-feat-body{padding:32px 28px} .ed-feat-name{font-size:32px} } /* ==================== CITY PAGE — PRACTITIONER LIST ==================== */ .ed-breadcrumb{ padding:24px 32px 0;max-width:var(--max-w);margin:0 auto; font-family:var(--mono);font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--muted); } .ed-breadcrumb a{color:var(--muted)} .ed-breadcrumb a:hover{color:var(--ink)} .ed-breadcrumb .sep{padding:0 10px;color:var(--line-2)} .ed-list{ display:grid;gap:0;border-top:1px solid var(--line); border-bottom:1px solid var(--line);margin:40px 0; } .ed-list-item{ display:grid;grid-template-columns:120px 1fr auto;gap:24px; padding:28px 0;border-bottom:1px solid var(--line); align-items:center;transition:background var(--dur) var(--ease); } .ed-list-item:last-child{border-bottom:none} .ed-list-item:hover{background:var(--paper-2)} .ed-list-img{ width:120px;aspect-ratio:1;border-radius:10px;overflow:hidden; background:linear-gradient(135deg,var(--img-a),var(--img-b)); position:relative;display:flex;align-items:center;justify-content:center; } .ed-list-img::before{ content:attr(data-initial);font-family:var(--serif);font-style:italic; font-size:44px;font-weight:400;letter-spacing:-.02em; color:rgba(255,255,255,.7); position:absolute;z-index:0; } .ed-list-img img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover} .ed-list-body h3{ font-family:var(--serif);font-size:24px;margin-bottom:4px;color:var(--ink); } .ed-list-meta{ font-family:var(--mono);font-size:11px;color:var(--muted); display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:6px; } .ed-list-meta strong{color:var(--ink);font-weight:600} .ed-list-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted)} .ed-list-addr{ font-family:var(--serif);font-style:italic;font-size:14px; color:var(--ink-dim);margin-top:8px; } .ed-list-cta{ font-family:var(--mono);font-size:11px;font-weight:600; text-transform:uppercase;letter-spacing:.12em;color:var(--accent); padding-bottom:3px;border-bottom:1px solid var(--accent); transition:transform var(--dur) var(--ease); } .ed-list-item:hover .ed-list-cta{transform:translateX(4px)} @media(max-width:720px){ .ed-list-item{grid-template-columns:80px 1fr;gap:16px} .ed-list-img{width:80px} .ed-list-cta{grid-column:1/-1;justify-self:start;margin-top:6px} } /* ==================== UPDATED BADGE (neutral, not an endorsement) ==================== */ .ed-updated-badge{ display:inline-flex;align-items:center;gap:3px; font-family:var(--mono);font-size:10px;font-weight:500; text-transform:uppercase;letter-spacing:.1em; color:var(--muted); background:transparent; padding:2px 8px;border-radius:100px; border:1px solid var(--line); } /* ==================== SORT/FILTER BAR ==================== */ .ed-sort-bar{ display:flex;gap:10px;flex-wrap:wrap;align-items:center; margin:-10px 0 20px; font-family:var(--mono);font-size:10.5px;text-transform:uppercase; letter-spacing:.12em;color:var(--muted); } .ed-sort-bar span.ed-sort-label{font-weight:600;color:var(--ink-dim)} .ed-sort-btn{ background:none;border:1px solid var(--line);border-radius:100px; padding:6px 14px;cursor:pointer; font-family:var(--mono);font-size:10.5px;font-weight:500; text-transform:uppercase;letter-spacing:.1em;color:var(--ink-dim); transition:all var(--dur) var(--ease); } .ed-sort-btn:hover,.ed-sort-btn.active{ background:var(--ink);color:var(--paper);border-color:var(--ink); } /* ==================== QUIZ / MATCH ==================== */ .ed-quiz-q{ font-family:var(--serif);font-size:28px;font-weight:400; color:var(--ink);margin-bottom:20px;letter-spacing:-.01em; } .ed-quiz-input{ width:100%;font-family:var(--serif);font-size:20px; padding:16px 20px;border:1px solid var(--line);border-radius:14px; background:var(--paper);color:var(--ink);outline:none; transition:border-color var(--dur) var(--ease); } .ed-quiz-input:focus{border-color:var(--accent)} .ed-quiz-options{ display:flex;flex-direction:column;gap:8px;margin-top:12px; } .ed-quiz-opt{ background:var(--paper);border:1px solid var(--line); border-radius:12px;padding:16px 20px;cursor:pointer; font-family:var(--serif);font-size:17px;color:var(--ink); text-align:left;transition:all var(--dur) var(--ease); } .ed-quiz-opt:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--paper))} .ed-quiz-opt.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--paper));font-weight:500} .ed-quiz-step{animation:fadeIn .3s ease} @keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} /* ==================== COMPARE INFO ==================== */ .ed-compare-info{min-height:120px} /* ==================== PAGINATION / CITY INDEX ==================== */ .ed-cities{ display:grid;grid-template-columns:repeat(4,1fr);gap:0; border-top:1px solid var(--line-2); } .ed-cities a{ padding:24px 20px;border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex;justify-content:space-between;align-items:baseline; transition:background var(--dur) var(--ease); } .ed-cities a:nth-child(4n){border-right:none} .ed-cities a:hover{background:var(--paper-2)} .ed-cities .city-name{font-family:var(--serif);font-size:20px;color:var(--ink)} .ed-cities .city-num{font-family:var(--mono);font-size:11px;color:var(--muted)} @media(max-width:780px){ .ed-cities{grid-template-columns:repeat(2,1fr)} .ed-cities a:nth-child(4n){border-right:1px solid var(--line)} .ed-cities a:nth-child(2n){border-right:none} } /* ==================== FOOTER ==================== */ .ed-footer{ margin-top:120px;padding:72px 32px 56px; border-top:1px solid var(--line);background:var(--paper-2); } .ed-footer-inner{max-width:var(--max-w);margin:0 auto} .ed-footer-grid{ display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px; margin-bottom:56px; } .ed-footer-brand h3{ font-family:var(--serif);font-size:28px;margin-bottom:12px; } .ed-footer-brand em{font-style:italic} .ed-footer-brand p{ font-family:var(--serif);font-style:italic; color:var(--ink-dim);max-width:40ch;font-size:15px; } .ed-footer h4{ font-family:var(--mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--muted); margin-bottom:18px;font-weight:500; } .ed-footer ul{list-style:none;display:flex;flex-direction:column;gap:10px} .ed-footer a{font-size:14px;color:var(--ink-dim)} .ed-footer a:hover{color:var(--accent)} .ed-disclaimer{ margin:40px 0 28px;padding:24px 28px; background:var(--paper-2);border:1px solid var(--line); font-family:var(--serif);font-size:13px;line-height:1.7; color:var(--ink-dim);max-width:880px; } .ed-disclaimer strong{color:var(--ink);font-weight:500;font-family:var(--serif)} .ed-disclaimer em{font-style:italic;color:var(--accent)} .ed-footer-bottom{ padding-top:28px;border-top:1px solid var(--line); display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px; font-family:var(--mono);font-size:10px; letter-spacing:.12em;text-transform:uppercase;color:var(--muted); } .ed-footer-bottom em{font-style:italic;text-transform:none;letter-spacing:.02em;color:var(--ink-dim)} @media(max-width:860px){ .ed-footer-grid{grid-template-columns:1fr 1fr;gap:32px} .ed-footer-brand{grid-column:1/-1} } /* ==================== HERO — CENTERED VARIANT ==================== */ .ed-hero--centered{ padding:144px 32px 120px;text-align:center; max-width:var(--max-w);margin:0 auto; } .ed-hero--centered .ed-hero-inner{max-width:880px;margin:0 auto;display:flex;flex-direction:column;align-items:center} .ed-hero--centered .ed-top{ justify-content:center;gap:40px;width:100%; margin-bottom:64px;padding-bottom:28px; } .ed-hero--centered .ed-h1{ max-width:none;margin:0 auto; font-size:clamp(58px,8.5vw,116px);text-align:center; line-height:.96;letter-spacing:-.04em; } /* Inline italic em for minimalist 2-word H1 ("Colonic hydrotherapy.") */ .ed-hero--centered .ed-h1 em{display:inline;margin-left:.12em} .ed-hero--centered .ed-rule{margin:44px auto 32px} .ed-hero--centered .ed-lede{ max-width:560px;margin:0 auto 44px;text-align:center; font-size:24px; } .ed-hero--centered .ed-meta{justify-content:center;gap:0} .ed-hero--centered .ed-search{margin:52px auto 0} .ed-hero--centered .ed-geo{margin-top:28px} /* Mobile hero scale — keep the editorial drama, lose the overflow. Top padding clears the sticky 68px nav with breathing room. */ @media (max-width: 720px){ .ed-hero{padding:112px 22px 72px} .ed-hero--centered{padding:112px 22px 88px} .ed-hero--centered .ed-h1,.ed-h1{ font-size:clamp(42px,11vw,68px); line-height:.98;letter-spacing:-.03em; } .ed-hero--centered .ed-lede,.ed-lede{font-size:19px;line-height:1.45;margin-bottom:32px} .ed-hero--centered .ed-top,.ed-top{margin-bottom:40px;gap:18px;padding-bottom:20px} .ed-hero--centered .ed-top{flex-direction:column;align-items:center;gap:10px} .ed-meta span{padding:0 12px} .ed-meta strong{font-size:16px} .ed-section{padding:0 22px 80px} .ed-section-lbl{margin-bottom:32px;padding-top:36px;flex-wrap:wrap;gap:8px} .ed-section-lbl em{font-size:15px} } @media (max-width: 480px){ .ed-meta{justify-content:center;gap:8px 0} .ed-meta span{padding:4px 10px} .ed-meta strong{display:block;margin-right:0;font-size:15px} } /* ==================== GRID VARIANTS ==================== */ .ed-grid-featured{display:block} .ed-grid-3{grid-template-columns:repeat(3,1fr) !important;gap:26px !important} @media(max-width:1080px){.ed-grid-3{grid-template-columns:repeat(2,1fr) !important}} @media(max-width:640px){.ed-grid-3{grid-template-columns:1fr !important}} .ed-grid-duo{ display:grid;grid-template-columns:1.15fr 1fr;gap:32px; align-items:stretch; } @media(max-width:960px){.ed-grid-duo{grid-template-columns:1fr;gap:40px}} /* design-lab row: city card + dark featured (spans 2) + city card */ .ed-row-mix{ display:grid;grid-template-columns:1fr 2fr 1fr;gap:22px;align-items:stretch; } .ed-row-mix > .ed-feat-dark{height:100%} @media(max-width:1080px){ .ed-row-mix{grid-template-columns:1fr 1fr;gap:22px} .ed-row-mix > .ed-feat-dark{grid-column:1 / -1} } @media(max-width:640px){ .ed-row-mix{grid-template-columns:1fr} .ed-row-mix > .ed-feat-dark{grid-column:auto} } /* design-lab row 2: 3 city cards + polaroid featured */ .ed-row-mix--polaroid{grid-template-columns:1fr 1fr 1fr 1fr;gap:22px} .ed-row-mix--polaroid > .ed-feat-polaroid{height:100%} @media(max-width:1080px){ .ed-row-mix--polaroid{grid-template-columns:1fr 1fr;gap:22px} } @media(max-width:640px){ .ed-row-mix--polaroid{grid-template-columns:1fr} } /* ==================== UTILITY PAGES — PRICING · FAQ · FORM · STATIC LIST ITEM ==================== */ .ed-pricing-card{ max-width:640px;background:var(--paper); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius:20px;padding:48px 44px 40px; box-shadow:0 40px 80px -50px rgba(0,0,0,.25); position:relative; } .ed-pricing-card::before{ content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,transparent,var(--accent) 20%,var(--accent) 80%,transparent); } .ed-pricing-head{text-align:left;margin-bottom:28px} .ed-pricing-label{ font-family:var(--mono);font-size:11px;font-weight:600; text-transform:uppercase;letter-spacing:.16em;color:var(--accent); } .ed-pricing-number{ font-family:var(--serif);font-size:76px;font-weight:400; line-height:1;letter-spacing:-.04em;color:var(--ink); margin:16px 0 6px;display:flex;align-items:baseline;gap:6px; } .ed-pricing-number strong{font-weight:400} .ed-pricing-number span{font-size:22px;color:var(--muted);font-family:var(--serif);font-style:italic} .ed-pricing-tag{ font-family:var(--mono);font-size:11px;text-transform:uppercase; letter-spacing:.1em;color:var(--muted); } .ed-pricing-list{ list-style:none;padding:0;margin:0 0 36px; border-top:1px solid color-mix(in srgb, var(--accent) 22%, transparent); padding-top:24px; } .ed-pricing-list li{ font-family:var(--serif);font-size:17px;line-height:1.5; color:var(--ink-dim);padding:10px 0 10px 24px;position:relative; border-bottom:1px dashed color-mix(in srgb, var(--ink) 10%, transparent); } .ed-pricing-list li:last-child{border-bottom:none} .ed-pricing-list li::before{ content:"◆";position:absolute;left:2px;top:11px;color:var(--accent);font-size:10px; } .ed-pricing-list li em{color:var(--accent);font-style:italic} .ed-pricing-cta{ display:inline-flex;align-items:center;gap:10px; background:var(--ink);color:var(--paper); padding:16px 32px;border-radius:100px; font-family:var(--mono);font-size:12px;font-weight:600; text-transform:uppercase;letter-spacing:.14em; text-decoration:none;transition:all var(--dur) var(--ease); } .ed-pricing-cta:hover{background:var(--accent);transform:translateY(-2px); box-shadow:0 20px 40px -20px color-mix(in srgb, var(--accent) 80%, transparent)} .ed-pricing-fine{ margin-top:20px;font-family:var(--mono);font-size:11px; color:var(--muted);letter-spacing:.03em; } .ed-faq{max-width:720px;display:flex;flex-direction:column;gap:22px} .ed-faq-item{ padding:22px 24px;background:color-mix(in srgb, var(--accent) 4%, var(--paper)); border:1px solid color-mix(in srgb, var(--accent) 15%, transparent); border-radius:14px; } .ed-faq-item h4{ font-family:var(--serif);font-size:20px;font-weight:400; color:var(--ink);margin:0 0 8px;letter-spacing:-.01em; } .ed-faq-item p{ font-family:var(--serif);font-size:16px;line-height:1.55; color:var(--ink-dim);margin:0; } .ed-form{display:flex;flex-direction:column;gap:18px} .ed-form label{ display:flex;flex-direction:column;gap:8px; font-family:var(--mono);font-size:11px;text-transform:uppercase; letter-spacing:.14em;color:var(--ink-dim);font-weight:600; } .ed-form label span.ed-form-hint{ font-family:var(--serif);font-style:italic;text-transform:none; font-size:13px;font-weight:400;color:var(--muted);letter-spacing:0; } .ed-form input[type="text"], .ed-form input[type="url"], .ed-form input[type="email"], .ed-form textarea{ font-family:var(--serif);font-size:18px; background:var(--paper);color:var(--ink); border:none;border-bottom:1px solid color-mix(in srgb, var(--ink) 22%, transparent); padding:10px 2px;outline:none;transition:border-color var(--dur) var(--ease); } .ed-form input:focus,.ed-form textarea:focus{ border-bottom-color:var(--accent); } .ed-form textarea{resize:vertical;min-height:110px;line-height:1.5} .ed-form-check{ flex-direction:row;align-items:flex-start;gap:12px; font-family:var(--serif);text-transform:none;font-size:14px; font-weight:400;color:var(--ink-dim);letter-spacing:0;line-height:1.4; } .ed-form-check input{margin-top:4px} .ed-form-btn{ align-self:flex-start;margin-top:8px; background:var(--ink);color:var(--paper);border:none; padding:16px 32px;border-radius:100px;cursor:pointer; font-family:var(--mono);font-size:12px;font-weight:600; text-transform:uppercase;letter-spacing:.14em; transition:all var(--dur) var(--ease); } .ed-form-btn:hover{background:var(--accent);transform:translateY(-2px)} .ed-form-fine{ font-family:var(--mono);font-size:11px;color:var(--muted); letter-spacing:.03em;margin-top:6px; } /* Static (non-interactive) practitioner list item — used when we have no real website URL for a studio and want to avoid fake /slug links that 404. */ .ed-list-item--static{cursor:default} .ed-list-item--static:hover{transform:none;box-shadow:none} /* ==================== CENTERED STATIC BODY ==================== */ /* Used on /about, /editorial, /methodology, /pricing, /add-{noun}, /privacy, /terms, /contact so long-form prose and forms sit in a single column and read like a proper editorial article. */ .ed-section--centered{ text-align:center; } .ed-section--centered .ed-section-lbl{ max-width:880px;margin-left:auto;margin-right:auto; text-align:left; /* keep the mono eyebrow left/right justified */ } .ed-static-body{ max-width:720px;margin:0 auto;text-align:left; font-family:var(--serif);font-size:19px;line-height:1.7;color:var(--ink-dim); } .ed-static-body p{margin:0 0 20px} .ed-static-body h3{ font-family:var(--serif);font-size:26px;font-weight:400;letter-spacing:-.01em; color:var(--ink);margin:36px 0 14px; } .ed-static-body ul{margin:0 0 22px 22px;padding:0;list-style:disc} .ed-static-body li{margin:0 0 10px} .ed-static-body em{font-style:italic;color:var(--accent)} .ed-static-body a{color:var(--accent);border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)} .ed-static-body a:hover{border-bottom-color:var(--accent)} /* A narrower variant used for prose-only pages (privacy/terms). */ .ed-static-body--tight{max-width:680px;font-size:17px} /* Centered FAQ re-alignment */ .ed-section--centered .ed-faq{margin:0 auto;text-align:left} .ed-section--centered .ed-form{margin:0 auto;text-align:left;max-width:640px} /* ==================== FOR-STUDIO-OWNERS HERO ==================== */ .ed-owner-hero{ position:relative;padding:120px 32px 80px; background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 6%,var(--paper)) 0%, var(--paper) 100%); text-align:center; } .ed-owner-hero-inner{max-width:900px;margin:0 auto} .ed-owner-eyebrow{ display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--accent); margin-bottom:28px; } .ed-owner-eyebrow::before{content:"✦ ";font-style:normal} .ed-owner-h1{ font-family:var(--serif);font-size:clamp(52px,7vw,96px); font-weight:400;line-height:1;letter-spacing:-.035em; color:var(--ink);margin:0 0 28px; } .ed-owner-h1 em{font-style:italic;color:var(--accent);margin-left:.1em} .ed-owner-lede{ font-family:var(--serif);font-size:22px;line-height:1.5; color:var(--ink-dim);max-width:620px;margin:0 auto 48px; } /* Stats strip under owner hero */ .ed-stats-strip{ display:grid;grid-template-columns:repeat(4,1fr);gap:0; max-width:960px;margin:0 auto 28px; padding:36px 12px;background:var(--paper); border-radius:20px;border:1px solid var(--line); box-shadow:0 30px 60px -40px rgba(0,0,0,.18); } .ed-stat-cell{ text-align:center;padding:4px 12px; border-left:1px solid color-mix(in srgb,var(--ink) 8%,transparent); } .ed-stat-cell:first-child{border-left:none} .ed-stat-num{ display:block;font-family:var(--serif);font-size:clamp(34px,4.2vw,48px); font-weight:400;line-height:1;color:var(--ink);letter-spacing:-.02em; } .ed-stat-lbl{ display:block;margin-top:10px;font-family:var(--mono);font-size:10.5px; font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted); } .ed-owner-reassure{ font-family:var(--mono);font-size:11px;font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:var(--muted); margin:22px 0 0; } .ed-owner-reassure span{margin:0 12px;color:var(--ink-dim)} .ed-owner-reassure em{font-style:normal;color:var(--accent);font-weight:600} @media(max-width:780px){ .ed-owner-hero{padding:96px 22px 64px} .ed-stats-strip{grid-template-columns:repeat(2,1fr);gap:24px 0;padding:28px 8px} .ed-stat-cell:nth-child(3){border-left:none} .ed-owner-reassure span{display:block;margin:6px 0} } /* ==================== FOUNDING MEMBER DARK OFFER ==================== */ .ed-founder-card{ max-width:960px;margin:48px auto 0;padding:56px 56px 52px; background:var(--ink);color:var(--paper); border-radius:22px;position:relative;overflow:hidden; box-shadow:0 40px 80px -40px rgba(0,0,0,.5); text-align:left; } .ed-founder-card::before{ content:"";position:absolute;top:0;left:0;right:0;height:4px; background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--paper))); } .ed-founder-head{ display:flex;justify-content:space-between;align-items:flex-start; gap:20px;margin-bottom:28px;flex-wrap:wrap; } .ed-founder-eyebrow{ font-family:var(--mono);font-size:11px;font-weight:600; letter-spacing:.16em;text-transform:uppercase; color:color-mix(in srgb,var(--accent) 80%,var(--paper)); } .ed-founder-eyebrow::before{content:"✦ ";font-style:normal} .ed-founder-limit{ font-family:var(--mono);font-size:10.5px;font-weight:600; letter-spacing:.14em;text-transform:uppercase; background:color-mix(in srgb,var(--accent) 35%,transparent); color:color-mix(in srgb,var(--accent) 90%,var(--paper)); padding:8px 16px;border-radius:100px;white-space:nowrap; } .ed-founder-h2{ font-family:var(--serif);font-size:clamp(32px,4.2vw,52px); font-weight:400;line-height:1.05;letter-spacing:-.025em; color:var(--paper);margin:0 0 22px;max-width:26ch; } .ed-founder-h2 em{ font-style:italic;color:color-mix(in srgb,var(--accent) 80%,var(--paper)); margin:0 .08em; } .ed-founder-body{ font-family:var(--serif);font-size:17px;line-height:1.6; color:color-mix(in srgb,var(--paper) 78%,transparent); max-width:62ch;margin:0 0 32px; } .ed-founder-body strong{color:var(--paper);font-weight:500} .ed-founder-cta-row{ display:flex;gap:22px;align-items:center;flex-wrap:wrap; margin-bottom:22px; } .ed-founder-btn{ display:inline-flex;align-items:center;gap:8px; padding:18px 32px;border-radius:100px; background:color-mix(in srgb,var(--accent) 75%,var(--paper)); color:var(--ink);font-family:var(--mono);font-size:12px;font-weight:700; text-transform:uppercase;letter-spacing:.14em;text-decoration:none; transition:all var(--dur) var(--ease); } .ed-founder-btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px -16px rgba(0,0,0,.4);background:var(--paper)} .ed-founder-alt{ font-family:var(--serif);font-size:15px; color:color-mix(in srgb,var(--paper) 70%,transparent); text-decoration:underline;text-underline-offset:4px; } .ed-founder-alt:hover{color:var(--paper)} .ed-founder-fine{ font-family:var(--mono);font-size:10.5px;font-weight:500; letter-spacing:.1em;text-transform:uppercase; color:color-mix(in srgb,var(--paper) 55%,transparent); padding-top:22px;border-top:1px solid color-mix(in srgb,var(--paper) 15%,transparent); } .ed-founder-fine span{margin:0 10px} .ed-founder-fine em{font-style:normal;color:color-mix(in srgb,var(--accent) 75%,var(--paper))} @media(max-width:780px){ .ed-founder-card{padding:40px 32px;margin:32px auto 0} .ed-founder-fine span{display:block;margin:4px 0} } /* ==================== 3-TIER PRICING ==================== */ .ed-tier-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:22px; max-width:1100px;margin:0 auto;align-items:stretch; } .ed-tier{ background:var(--paper);border:1px solid var(--line); border-radius:18px;padding:40px 34px 36px; display:flex;flex-direction:column;text-align:left; transition:all .4s var(--ease);position:relative; } .ed-tier:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(0,0,0,.18)} .ed-tier--popular{ border-color:color-mix(in srgb,var(--accent) 55%,transparent); box-shadow:0 30px 70px -35px color-mix(in srgb,var(--accent) 60%,transparent); transform:translateY(-8px); } .ed-tier--popular:hover{transform:translateY(-12px)} .ed-tier-badge{ position:absolute;top:-14px;left:50%;transform:translateX(-50%); background:color-mix(in srgb,var(--accent) 90%,var(--paper)); color:var(--paper);padding:6px 18px;border-radius:100px; font-family:var(--mono);font-size:10px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;white-space:nowrap; } .ed-tier-name{ font-family:var(--mono);font-size:11px;font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:var(--accent); margin-bottom:14px; } .ed-tier-price{ display:flex;align-items:baseline;gap:6px; font-family:var(--serif);color:var(--ink);margin-bottom:6px; } .ed-tier-price strong{font-size:64px;font-weight:400;letter-spacing:-.03em;line-height:1} .ed-tier-price span{font-size:18px;color:var(--muted);font-style:italic} .ed-tier-sub{ font-family:var(--mono);font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);margin-bottom:22px; } .ed-tier-pitch{ font-family:var(--serif);font-size:16px;line-height:1.55; color:var(--ink-dim);margin:0 0 26px; padding-bottom:22px;border-bottom:1px solid var(--line); } .ed-tier-list{ list-style:none;padding:0;margin:0 0 32px;display:flex; flex-direction:column;gap:12px;flex:1; } .ed-tier-list li{ font-family:var(--serif);font-size:15.5px;line-height:1.45; color:var(--ink-dim);padding-left:22px;position:relative; } .ed-tier-list li::before{ content:"✓";position:absolute;left:0;top:0; color:var(--accent);font-weight:700; } .ed-tier-cta{ display:inline-flex;justify-content:center;align-items:center; padding:16px 24px;border-radius:100px;text-decoration:none; font-family:var(--mono);font-size:12px;font-weight:700; letter-spacing:.14em;text-transform:uppercase; transition:all var(--dur) var(--ease); } .ed-tier-cta--ghost{ background:transparent;color:var(--ink); border:1.5px solid var(--ink); } .ed-tier-cta--ghost:hover{background:var(--ink);color:var(--paper)} .ed-tier-cta--solid{ background:var(--ink);color:var(--paper);border:1.5px solid var(--ink); } .ed-tier-cta--solid:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)} .ed-tier-cta--accent{ background:color-mix(in srgb,var(--accent) 90%,var(--paper)); color:var(--paper);border:1.5px solid color-mix(in srgb,var(--accent) 90%,var(--paper)); } .ed-tier-cta--accent:hover{transform:translateY(-2px);box-shadow:0 16px 32px -16px color-mix(in srgb,var(--accent) 60%,transparent)} @media(max-width:960px){ .ed-tier-grid{grid-template-columns:1fr;gap:40px 0;max-width:460px} .ed-tier--popular{transform:none} .ed-tier--popular:hover{transform:translateY(-4px)} } /* ==================== FREE-vs-FEATURED COMPARISON ==================== */ .ed-compare{ display:grid;grid-template-columns:1fr 1fr;gap:28px; max-width:1100px;margin:0 auto; } .ed-compare-label{ font-family:var(--mono);font-size:11px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--muted); text-align:center;margin-bottom:14px; } .ed-compare-label--feat{color:var(--accent)} .ed-compare-label--feat::before{content:"✦ ";font-style:normal} .ed-compare-card{ background:var(--paper);border:1px solid var(--line);border-radius:18px; overflow:hidden;text-align:left; } .ed-compare-card--feat{ border-color:color-mix(in srgb,var(--accent) 45%,transparent); box-shadow:0 30px 60px -40px color-mix(in srgb,var(--accent) 60%,transparent); position:relative; } .ed-compare-card--feat .ed-compare-ribbon{ position:absolute;top:18px;right:18px; background:color-mix(in srgb,var(--accent) 90%,var(--paper)); color:var(--paper);padding:6px 14px;border-radius:100px; font-family:var(--mono);font-size:10px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;z-index:2; } .ed-compare-photo{ aspect-ratio:16/10;background:color-mix(in srgb,var(--ink) 6%,var(--paper)); display:flex;align-items:center;justify-content:center; color:color-mix(in srgb,var(--ink) 22%,transparent);font-size:54px; position:relative; } .ed-compare-card--feat .ed-compare-photo{ background:linear-gradient(135deg,var(--img-a,#bfa28a),var(--img-b,#8e6c52)); color:color-mix(in srgb,var(--paper) 70%,transparent); font-size:60px;font-family:var(--serif);font-style:italic; } .ed-compare-body{padding:24px 26px 26px} .ed-compare-body h4{ font-family:var(--serif);font-size:22px;font-weight:400; color:var(--ink);margin:0 0 8px;letter-spacing:-.01em; } .ed-compare-meta{ font-family:var(--mono);font-size:11.5px;color:var(--ink-dim); display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px; } .ed-compare-meta strong{color:var(--ink);font-weight:600} .ed-compare-cta{ display:block;margin-top:14px;padding:14px 20px;text-align:center; background:var(--ink);color:var(--paper);border-radius:100px; font-family:var(--mono);font-size:11px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;text-decoration:none; } .ed-compare-fine{ font-family:var(--mono);font-size:10.5px;color:var(--muted); letter-spacing:.08em;text-align:center;padding:14px 20px 18px; border-top:1px solid var(--line); } .ed-compare-fine em{color:var(--accent);font-style:normal} .ed-compare-benefits{ margin:36px auto 0;max-width:1100px;padding:32px 36px; background:color-mix(in srgb,var(--accent) 5%,var(--paper)); border-radius:18px;border:1px solid color-mix(in srgb,var(--accent) 15%,transparent); display:grid;grid-template-columns:repeat(2,1fr);gap:14px 40px; } .ed-compare-benefits .ed-compare-lbl{ grid-column:1/-1;font-family:var(--mono);font-size:10.5px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--muted); margin-bottom:8px; } .ed-compare-benefits p{ margin:0;font-family:var(--serif);font-size:15.5px;color:var(--ink-dim); display:flex;gap:10px;align-items:flex-start; } .ed-compare-benefits p::before{ content:"✓";color:var(--accent);font-weight:700;flex:0 0 14px; } @media(max-width:860px){ .ed-compare{grid-template-columns:1fr;max-width:520px} .ed-compare-benefits{grid-template-columns:1fr;padding:26px} } /* ==================== TESTIMONIALS ==================== */ .ed-testimonials{ display:grid;grid-template-columns:repeat(3,1fr);gap:22px; max-width:1100px;margin:0 auto; } .ed-testimonial{ background:var(--paper);border:1px solid var(--line); border-radius:18px;padding:32px 30px 26px; display:flex;flex-direction:column;gap:16px;text-align:left; } .ed-testimonial-mark{ font-family:var(--serif);font-style:italic;font-size:34px; color:color-mix(in srgb,var(--accent) 55%,transparent);line-height:.6; letter-spacing:-.05em; } .ed-testimonial-stars{color:#f6b93b;letter-spacing:.08em;font-size:15px} .ed-testimonial-body{ font-family:var(--serif);font-size:17px;line-height:1.5; color:var(--ink-dim);flex:1; } .ed-testimonial-who{ display:flex;align-items:center;gap:12px;padding-top:16px; border-top:1px solid var(--line); } .ed-testimonial-avatar{ width:36px;height:36px;border-radius:50%; background:linear-gradient(135deg,var(--img-a,#bfa28a),var(--img-b,#8e6c52)); display:flex;align-items:center;justify-content:center; color:var(--paper);font-family:var(--serif);font-weight:500;font-size:14px; } .ed-testimonial-name{ font-family:var(--serif);font-size:15px;color:var(--ink);font-weight:500; } .ed-testimonial-role{ font-family:var(--mono);font-size:10.5px;color:var(--muted); letter-spacing:.08em;text-transform:uppercase; } @media(max-width:960px){ .ed-testimonials{grid-template-columns:1fr;max-width:480px} } /* ==================== CITY MAP ==================== */ .ed-city-map{ max-width:var(--max-w);margin:0 auto 64px;padding:0 32px; } .ed-city-map-lbl{ font-family:var(--mono);font-size:10.5px;font-weight:500; text-transform:uppercase;letter-spacing:.22em;color:var(--muted); margin-bottom:20px;padding-top:48px; border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent); display:flex;justify-content:space-between;align-items:center; position:relative;font-variant-numeric:tabular-nums; } .ed-city-map-lbl::before{ content:"";position:absolute;top:-1px;left:0;width:96px;height:1px; background:var(--accent); } .ed-city-map-lbl em{ font-family:var(--serif);font-style:italic;text-transform:none; letter-spacing:-.005em;color:var(--ink-dim);font-size:17px; } .ed-city-map-frame{ width:100%;height:460px;border-radius:18px;overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 60px -40px rgba(0,0,0,.18); background:color-mix(in srgb,var(--ink) 4%,var(--paper)); } .leaflet-container{width:100%;height:100%;background:#f3efe8;font-family:var(--serif)} .leaflet-popup-content{ font-family:var(--serif);font-size:15px;line-height:1.4;color:var(--ink); margin:14px 16px; } .leaflet-popup-content strong{display:block;font-size:16px;margin-bottom:4px} .leaflet-popup-content em{font-family:var(--mono);font-size:11px;color:var(--muted);font-style:normal} .leaflet-popup-content a{ display:inline-block;margin-top:8px;font-family:var(--mono);font-size:10.5px; font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent); } .ed-map-pin{ background:var(--accent);color:var(--paper); width:28px;height:28px;border-radius:50% 50% 50% 0; transform:rotate(-45deg);display:flex;align-items:center;justify-content:center; font-family:var(--serif);font-style:italic;font-size:13px; box-shadow:0 6px 14px -4px rgba(0,0,0,.4);border:2px solid var(--paper); } .ed-map-pin span{transform:rotate(45deg)} @media(max-width:720px){ .ed-city-map{padding:0 22px;margin-bottom:48px} .ed-city-map-frame{height:360px} } /* ==================== TIER-2 FEATURED · DARK INVERT ==================== */ .ed-feat-dark{ display:grid;grid-template-columns:1fr 1fr;gap:0; background:var(--ink);border-radius:18px;overflow:hidden; min-height:460px;position:relative;color:var(--paper); transition:all .6s var(--ease);text-decoration:none; box-shadow:0 30px 60px -40px rgba(0,0,0,.5); } .ed-feat-dark::before{ content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:5; background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold) 70%,transparent); } .ed-feat-dark:hover{transform:translateY(-4px);box-shadow:0 50px 100px -40px rgba(0,0,0,.6)} .ed-feat-dark-img{position:relative;overflow:hidden;background:#0a0a0a} .ed-feat-dark-img img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform 1s var(--ease);opacity:.88; } .ed-feat-dark:hover .ed-feat-dark-img img{transform:scale(1.05);opacity:1} .ed-feat-dark-body{ padding:44px 40px;display:flex;flex-direction:column; justify-content:center;gap:18px; } .ed-feat-dark-label{ font-family:var(--mono);font-size:10px;font-weight:600; text-transform:uppercase;letter-spacing:.16em;color:var(--gold); } .ed-feat-dark-name{ font-family:var(--serif);font-size:34px;font-weight:400;line-height:1.08; color:var(--paper);letter-spacing:-.02em; } .ed-feat-dark-name em{ font-family:var(--serif);font-style:italic;color:var(--gold); font-size:20px;display:block;margin-top:10px;letter-spacing:0; } .ed-feat-dark-meta{ font-family:var(--mono);font-size:11px;color:rgba(252,251,247,.55); text-transform:uppercase;letter-spacing:.12em;margin-top:4px; } .ed-feat-dark-cta{ font-family:var(--mono);font-size:11px;font-weight:600; text-transform:uppercase;letter-spacing:.14em;color:var(--gold); margin-top:14px;padding-bottom:4px; border-bottom:1.5px solid var(--gold);width:fit-content; } @media(max-width:720px){ .ed-feat-dark{grid-template-columns:1fr;min-height:0} .ed-feat-dark-img{aspect-ratio:16/10} .ed-feat-dark-body{padding:34px 28px} .ed-feat-dark-name{font-size:28px} } /* ==================== TIER-2 FEATURED · POLAROID ==================== */ .ed-feat-polaroid{ background:var(--paper);border:1px solid var(--line); border-radius:6px;padding:18px 18px 32px; box-shadow:0 30px 60px -30px rgba(0,0,0,.28); transition:all .6s var(--ease);display:block;text-decoration:none; transform:rotate(-0.6deg); align-self:center; } .ed-feat-polaroid:hover{ transform:rotate(0deg) translateY(-6px); box-shadow:0 44px 88px -30px rgba(0,0,0,.32); } .ed-feat-polaroid-img{ position:relative;aspect-ratio:4/5;overflow:hidden; background:var(--paper-2);margin-bottom:22px; } .ed-feat-polaroid-img img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:contrast(1.02) saturate(.96); } .ed-feat-polaroid-flag{ position:absolute;top:14px;left:14px;z-index:3; font-family:var(--mono);font-size:10px;text-transform:uppercase; letter-spacing:.1em;color:var(--paper); background:rgba(0,0,0,.55);backdrop-filter:blur(8px); padding:5px 10px;border-radius:100px;font-weight:500; } .ed-feat-polaroid-tag{ position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:3; font-family:var(--serif);font-style:italic;font-size:13px; color:var(--paper);background:rgba(0,0,0,.55); padding:4px 14px;border-radius:100px;white-space:nowrap; } .ed-feat-polaroid-body{padding:0 8px;text-align:center} .ed-feat-polaroid-body h3{ font-family:var(--serif);font-size:26px;font-weight:400;color:var(--ink); line-height:1.1;letter-spacing:-.01em;margin-bottom:8px; } .ed-feat-polaroid-sub{ font-family:var(--serif);font-style:italic;font-size:15px;color:var(--gold); margin-bottom:10px; } .ed-feat-polaroid-meta{ font-family:var(--mono);font-size:10px;text-transform:uppercase; letter-spacing:.1em;color:var(--muted); } /* ==================== QUIET SECTION + CITIES LINK ==================== */ .ed-section--quiet{padding-bottom:56px} .ed-cities-link{ padding-top:40px;border-top:1px solid var(--line-2); text-align:center; } .ed-cities-link a{ font-family:var(--serif);font-style:italic;font-size:20px; color:var(--ink-dim);transition:color var(--dur) var(--ease); } .ed-cities-link a:hover{color:var(--accent)} /* ==================== PARTNER BLOCK (GetYourGuide widget, contextual, editorial) ==================== */ .ed-partner{ max-width:880px;margin:0 auto;text-align:center; padding:56px 32px 48px; border-top:1px solid var(--line); } .ed-partner-eyebrow{ display:inline-block;font-family:var(--mono);font-size:10px; text-transform:uppercase;letter-spacing:.22em;color:var(--muted); margin-bottom:14px; } .ed-partner-title{ font-family:var(--serif);font-size:clamp(28px,3.6vw,40px); font-weight:400;color:var(--ink);letter-spacing:-.02em; line-height:1.1;margin:0 0 10px; } .ed-partner-title em{font-style:italic;color:var(--accent);} .ed-partner-sub{ font-family:var(--serif);font-size:16px;color:var(--ink-dim); margin:0 0 28px;letter-spacing:-.003em; } .ed-partner-widget{ margin:0 auto 18px;max-width:820px;text-align:left; padding:12px 0; } .ed-partner-disclosure{ font-family:var(--mono);font-size:10px;color:var(--muted); letter-spacing:.06em;margin:0;opacity:.75; } .ed-partner-disclosure a{color:var(--ink-dim);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--muted) 50%,transparent);text-underline-offset:2px} @media (max-width:720px){ .ed-partner{padding:40px 22px 36px} .ed-partner-title{font-size:26px} } /* ==================== UTIL ==================== */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);border:0; } /* ==================== EDITORIAL POLISH (typographic + image cohesion) ==================== */ /* Uniform photo treatment — homogénéise des photos hétérogènes. */ .ed-card-img img, .ed-feat-img img, .ed-feat-dark-img img, .ed-feat-polaroid-img img{ filter:saturate(.94) contrast(1.04) brightness(.99); } .ed-card:hover .ed-card-img img, .ed-featured:hover .ed-feat-img img{filter:saturate(1) contrast(1.05) brightness(1)} /* Tabular numerals on every stat + hairline between */ .ed-feat-stat-n{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} .ed-feat-stat-l{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} .ed-feat-dark-meta{font-variant-numeric:tabular-nums} .ed-feat-polaroid-meta{font-variant-numeric:tabular-nums} .ed-card-meta strong,.ed-meta strong{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} /* Polish the Editor's Choice magazine: larger spread ratio on desktop, more air in body, gold rule top is 2px from accent. */ @media (min-width:1081px){ .ed-featured{grid-template-columns:1.55fr 1fr;min-height:440px;max-height:560px} .ed-feat-body{padding:44px 44px} .ed-feat-img{aspect-ratio:auto;min-height:440px;max-height:560px} } /* Accent rule overrides where the template used --gold but we now drive from --accent */ .ed-featured{ border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); background:linear-gradient(180deg,color-mix(in srgb, var(--accent) 6%, var(--paper)) 0%,var(--paper) 100%); } .ed-featured::before{ background:linear-gradient(90deg,transparent,var(--accent) 20%,var(--accent) 80%,transparent); height:2px; } .ed-feat-label::before{color:var(--accent)} .ed-feat-stats{border-top:1px solid color-mix(in srgb, var(--accent) 30%, transparent)} .ed-feat-stat:not(:last-child){border-right:1px solid color-mix(in srgb, var(--accent) 18%, transparent)} /* Focus states — editorial, not SaaS */ a:focus-visible,button:focus-visible,input:focus-visible{ outline:2px solid var(--accent);outline-offset:4px;border-radius:2px; } /* Underline treatment on inline links inside body copy */ .ed-lede a,.ed-feat-quote a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--accent) 55%, transparent); } .ed-lede a:hover,.ed-feat-quote a:hover{text-decoration-color:var(--accent)} /* Section-lbl: the animated gold rule only triggers once the section enters the viewport. We rely on the simple CSS animation above + content-visibility auto for deferred sections, so sections below the fold animate naturally on scroll. */ .ed-section{content-visibility:auto;contain-intrinsic-size:auto 900px} /* Hanging small-caps eyebrow option (for pricing / about / legal pages). Use FOR STUDIO OWNERS. */ .ed-eyebrow{ display:inline-block;font-family:var(--mono);font-size:10.5px; font-weight:500;text-transform:uppercase;letter-spacing:.22em; color:var(--accent);margin-bottom:22px; } .ed-eyebrow::before{content:"◆ ";color:var(--accent)} /* Drop cap — apply via

…

on first paragraph. */ .ed-dropcap::first-letter{ font-family:var(--serif);font-style:italic;font-size:4.2em; float:left;line-height:.85;padding:.06em .08em 0 0; color:var(--accent);font-weight:400; } /* Sticky mobile CTA bar — used on /{clinic} pages. Markup:
CallDirectionsWebsite
*/ .ed-mcta{ display:none;position:fixed;left:0;right:0;bottom:0;z-index:40; background:color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px); border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent); padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); gap:8px; } .ed-mcta a{ flex:1;text-align:center;padding:14px 10px;border-radius:10px; font-family:var(--mono);font-size:11px;font-weight:600; text-transform:uppercase;letter-spacing:.14em;color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent); min-height:48px;display:flex;align-items:center;justify-content:center; } .ed-mcta a.primary{background:var(--accent);color:var(--paper)} @media (max-width:720px){ .ed-mcta{display:flex} body.has-mcta{padding-bottom:88px} } .ed-mcta.hide{display:none !important} /* City-page variant: text + single CTA + dismiss, not the 3-button clinic pattern */ .ed-mcta--city{align-items:center} .ed-mcta--city .ed-mcta-txt{ flex:1;font-family:var(--serif);font-size:14px;font-style:italic; color:var(--ink-dim);padding-left:6px;text-align:left; } .ed-mcta--city a.primary{ flex:0 0 auto;padding:12px 18px;font-size:11px;letter-spacing:.12em; } .ed-mcta-x{ flex:0 0 auto;background:none;border:none;font-size:22px;line-height:1; color:var(--muted);padding:8px 12px;cursor:pointer; } .ed-mcta-x:hover{color:var(--ink)} /* ==================== ADSENSE SLOT (editorial container) ==================== */ /* Markup: Reserved height avoids CLS; label is small-caps mono discreet. */ .ed-ad{ display:block;max-width:var(--max-w);margin:64px auto;padding:0 32px; } .ed-ad-inner{ border-top:1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, transparent); padding:20px 0;min-height:280px; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center; } .ed-ad-lbl{ font-family:var(--mono);font-size:9.5px;font-weight:500; text-transform:uppercase;letter-spacing:.2em;color:var(--muted); margin-bottom:14px;font-style:italic; } .ed-ad ins.adsbygoogle{display:block;width:100%;min-height:250px} @media (max-width:720px){ .ed-ad{margin:48px auto;padding:0 22px} .ed-ad-inner{min-height:260px} } /* In-feed ad slot (between practitioner list items) */ .ed-ad--infeed{margin:24px 0;padding:0} .ed-ad--infeed .ed-ad-inner{min-height:180px;padding:14px 0} /* ==================== MOBILE OVERRIDES — cards & featured ==================== */ @media (max-width:720px){ .ed-card-name{font-size:22px} .ed-card-body{padding:18px 18px 22px} .ed-feat-name{font-size:clamp(32px,7vw,42px)} .ed-feat-body{padding:32px 24px} .ed-feat-eyebrow{margin-bottom:14px} .ed-feat-quote{font-size:17px;margin-bottom:22px} .ed-feat-stats{grid-template-columns:1fr 1fr;gap:16px} .ed-feat-stat{padding:0 !important;border:none !important} .ed-feat-stat:nth-child(3){grid-column:1/-1;border-top:1px solid color-mix(in srgb, var(--accent) 18%, transparent) !important;padding-top:14px !important} .ed-feat-dark{grid-template-columns:1fr;min-height:0;border-radius:12px} .ed-feat-dark-img{aspect-ratio:4/3} .ed-feat-dark-body{padding:32px 26px;gap:14px} .ed-feat-dark-name{font-size:28px} .ed-feat-polaroid{transform:rotate(0deg);padding:14px 14px 24px} .ed-feat-polaroid-body h3{font-size:22px} .ed-grid-duo{gap:32px} } /* Keyboard tab order + skip link helper */ .ed-skip{ position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden; } .ed-skip:focus{ position:fixed;left:20px;top:20px;width:auto;height:auto; padding:12px 20px;background:var(--ink);color:var(--paper); font-family:var(--mono);font-size:12px;z-index:100;border-radius:6px; } /* ====================================================================== KClinic content pages — procedures, neighborhoods, pillar guides. Introduced by kclinic_content.py renderers. ====================================================================== */ /* Editorial prose blocks (used in neighborhood + procedure + article bodies) */ .ed-prose{ max-width:720px;margin:0 auto;padding:0 32px; font-family:var(--serif);font-size:20px;line-height:1.7;color:var(--ink); } .ed-prose p{margin:0 0 1.1em} .ed-prose--lede{ font-size:24px;line-height:1.55;color:var(--ink); padding-top:6px; } .ed-prose--lede p{margin:0 0 .8em} /* "Also known as" chip row — only on procedure pages */ .ed-aka{ display:inline-block;margin-top:14px; font-family:var(--mono);font-size:11px;letter-spacing:.08em; text-transform:uppercase;color:var(--muted); } /* Shortlist — numbered list of clinics inside neighborhood/procedure pages */ .ed-shortlist{ max-width:900px;margin:32px auto 0;padding:0 32px; display:flex;flex-direction:column;border-top:1px solid var(--line); } .ed-shortlist-row{ display:grid;grid-template-columns:1fr auto;gap:18px; padding:22px 0;border-bottom:1px solid var(--line); align-items:baseline;text-decoration:none;color:inherit; transition:background .15s ease; } .ed-shortlist-row:hover{background:color-mix(in srgb, var(--accent) 6%, transparent)} .ed-shortlist-main{min-width:0} .ed-shortlist-main h4{ font-family:var(--serif);font-size:22px;font-weight:500; margin:0 0 4px;line-height:1.25; } .ed-shortlist-addr{ display:block;font-family:var(--mono);font-size:11px; letter-spacing:.04em;color:var(--muted);margin-top:4px; } .ed-shortlist-meta{ font-family:var(--mono);font-size:12px;letter-spacing:.04em; color:var(--muted);white-space:nowrap;text-align:right; display:flex;flex-direction:column;gap:2px; } .ed-shortlist-meta strong{color:var(--ink);font-weight:600;font-size:13px} .ed-shortlist-note{ max-width:720px;margin:22px auto 0;padding:0 32px; font-family:var(--serif);font-style:italic;font-size:15px; color:var(--muted);line-height:1.6; } .ed-empty{ max-width:720px;margin:32px auto;padding:0 32px; font-family:var(--serif);font-style:italic;color:var(--muted); } /* Procedure index grid */ .ed-proc-grid{ max-width:var(--max-w);margin:0 auto;padding:0 32px; display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px; } .ed-proc-card{ display:flex;flex-direction:column;gap:14px; padding:28px 26px;background:var(--paper); border:1px solid var(--line);border-radius:10px; text-decoration:none;color:inherit; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .ed-proc-card:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow:0 8px 24px -12px color-mix(in srgb, var(--ink) 18%, transparent); } .ed-proc-top{ display:flex;justify-content:space-between;align-items:baseline;gap:10px; padding-bottom:10px;border-bottom:1px solid var(--line); } .ed-proc-cat{ font-family:var(--mono);font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted); } .ed-proc-name{ font-family:var(--serif);font-size:24px;font-weight:500; line-height:1.2;margin:4px 0 0; } .ed-proc-name em{font-style:italic;color:var(--muted);font-size:18px;display:block;margin-top:4px} .ed-proc-meta{ display:grid;grid-template-columns:1fr 1fr;gap:10px; font-family:var(--mono);font-size:11px;color:var(--muted); padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .ed-proc-meta span strong{display:block;color:var(--ink);font-size:12px;margin-bottom:2px} .ed-proc-cta{ font-family:var(--mono);font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--accent);margin-top:4px; } /* Article / guides index grid */ .ed-art-grid{ max-width:var(--max-w);margin:0 auto;padding:0 32px; display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px; } .ed-art-card{ display:flex;flex-direction:column;gap:10px; padding:30px 28px;background:var(--paper); border:1px solid var(--line);border-radius:10px; text-decoration:none;color:inherit; transition:transform .2s ease, border-color .2s ease; } .ed-art-card:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); } .ed-art-eyebrow{ font-family:var(--mono);font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted); } .ed-art-title{ font-family:var(--serif);font-size:26px;font-weight:500; line-height:1.22;margin:4px 0 8px; } .ed-art-sub{ font-family:var(--serif);font-size:16px;font-style:italic; color:var(--muted);line-height:1.5;margin:0 0 12px; } .ed-art-meta{ font-family:var(--mono);font-size:11px;letter-spacing:.04em; color:var(--muted);margin-top:auto;padding-top:14px; border-top:1px solid var(--line); } /* Chip row (article hero meta) */ .ed-chip{ display:inline-block;padding:8px 14px; font-family:var(--mono);font-size:11px;letter-spacing:.06em; text-transform:uppercase;color:var(--ink);text-decoration:none; border:1px solid var(--line);border-radius:99px; transition:all .18s ease; } .ed-chip:hover{ border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, transparent); } .ed-chip em{ font-family:var(--serif);font-style:italic;text-transform:none; font-size:12px;color:var(--muted);margin-left:4px;letter-spacing:0; } .ed-chips{ max-width:var(--max-w);margin:0 auto;padding:0 32px; display:flex;flex-wrap:wrap;gap:10px; } .ed-chips--centered{justify-content:center;padding:0 32px} /* Article hero chip row — smaller, centered */ .ed-article .ed-chips{justify-content:center;margin-top:14px} .ed-more{ max-width:var(--max-w);margin:22px auto 0;padding:0 32px; font-family:var(--mono);font-size:11px;letter-spacing:.08em; text-transform:uppercase; } .ed-more a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor} /* Pillar article body — the long-form reading experience */ .ed-article{ max-width:720px;margin:0 auto;padding:40px 32px 20px; font-family:var(--serif); } .ed-article h2{ font-family:var(--serif);font-size:30px;font-weight:500;line-height:1.2; margin:56px 0 16px;letter-spacing:-.01em; } .ed-article h2:first-child{margin-top:0} .ed-article p{font-size:19px;line-height:1.7;margin:0 0 1.1em;color:var(--ink)} .ed-byline{ text-align:center;margin:22px auto 0; font-family:var(--mono);font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--muted); } .ed-article-sig{ max-width:720px;margin:60px auto 0;padding:26px 32px; border-top:1px solid var(--line);border-bottom:1px solid var(--line); font-family:var(--mono);font-size:12px;letter-spacing:.04em; color:var(--muted);text-align:center; } .ed-article-sig em{font-family:var(--serif);font-style:italic;color:var(--ink)} .ed-article-dis{ max-width:720px;margin:26px auto 0;padding:0 32px; font-family:var(--serif);font-style:italic;font-size:14px; color:var(--muted);line-height:1.6;text-align:center; } /* Guides index variant — compact list instead of card grid (used on guides.html overview) */ .ed-guide-list{ max-width:820px;margin:0 auto;padding:0 32px; display:flex;flex-direction:column; } .ed-guide-item{ display:block;padding:28px 0;border-top:1px solid var(--line); text-decoration:none;color:inherit;transition:padding-left .2s ease; } .ed-guide-item:last-child{border-bottom:1px solid var(--line)} .ed-guide-item:hover{padding-left:10px} .ed-guide-eyebrow{ font-family:var(--mono);font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px; } .ed-guide-item h4{ font-family:var(--serif);font-size:24px;font-weight:500; line-height:1.25;margin:0 0 6px; } .ed-guide-item p{ font-family:var(--serif);font-style:italic;font-size:16px; color:var(--muted);line-height:1.5;margin:0; } /* Guide card grid — for home page editorial section */ .ed-guide-grid{ max-width:var(--max-w);margin:0 auto;padding:0 32px; display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px; } .ed-guide-card{ display:flex;flex-direction:column;padding:28px 26px; border:1px solid var(--line);text-decoration:none;color:inherit; transition:border-color .2s ease,box-shadow .2s ease; } .ed-guide-card:hover{ border-color:var(--accent);box-shadow:0 4px 20px rgba(0,0,0,.06); } .ed-guide-card-eyebrow{ font-family:var(--mono);font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--accent);display:block;margin-bottom:10px; } .ed-guide-card-title{ font-family:var(--serif);font-size:21px;font-weight:500; line-height:1.25;margin:0 0 8px; } .ed-guide-card-sub{ font-family:var(--serif);font-style:italic;font-size:15px; color:var(--muted);line-height:1.5;margin:0 0 auto;padding-bottom:14px; } .ed-guide-card-meta{ font-family:var(--mono);font-size:10px;letter-spacing:.08em; text-transform:uppercase;color:var(--muted); border-top:1px solid var(--line);padding-top:12px;margin-top:auto; } @media (max-width:780px){ .ed-article{padding:26px 24px 16px} .ed-article h2{font-size:24px;margin:42px 0 12px} .ed-article p{font-size:17px} .ed-prose{padding:0 24px;font-size:18px} .ed-prose--lede{font-size:20px} .ed-shortlist{padding:0 24px} .ed-shortlist-row{grid-template-columns:1fr;gap:6px} .ed-shortlist-meta{text-align:left} .ed-proc-grid,.ed-art-grid{padding:0 24px;gap:18px} .ed-proc-card,.ed-art-card{padding:22px 20px} .ed-guide-list{padding:0 24px} } /* ---------- Practitioner profile page ---------- */ .ed-prac-hero-img{ max-width:720px;margin:0 auto 32px;border-radius:12px;overflow:hidden; border:1px solid var(--line); } .ed-prac-hero-img img{ width:100%;height:auto;display:block;object-fit:cover;max-height:420px; } .ed-prac-details{ display:flex;flex-direction:column;gap:0; } .ed-prac-detail{ display:flex;align-items:baseline;gap:12px; padding:14px 0;border-bottom:1px solid var(--line); } .ed-prac-detail:last-child{border-bottom:none} .ed-prac-detail-label{ font-family:var(--mono);font-size:10px;font-weight:600; text-transform:uppercase;letter-spacing:.1em;color:var(--muted); min-width:80px;flex-shrink:0; } .ed-prac-detail-value{ font-family:var(--serif);font-size:17px;color:var(--ink); } a.ed-prac-detail-value{ text-decoration:underline;text-underline-offset:3px; text-decoration-color:var(--line); } a.ed-prac-detail-value:hover{ text-decoration-color:var(--accent);color:var(--accent); } .ed-prac-profile-link{ display:inline-block;margin-top:6px; font-family:var(--mono);font-size:11px;font-weight:600; text-transform:uppercase;letter-spacing:.1em; color:var(--accent);text-decoration:none; } .ed-prac-profile-link:hover{text-decoration:underline} .ed-btn{ display:inline-block; font-family:var(--mono);font-size:11px;font-weight:600; text-transform:uppercase;letter-spacing:.12em; background:var(--ink);color:var(--paper); border:none;padding:14px 28px;border-radius:100px; text-decoration:none;cursor:pointer;transition:all .2s; } .ed-btn:hover{opacity:.85} @media (max-width:780px){ .ed-prac-hero-img{margin:0 16px 24px;border-radius:10px} .ed-prac-hero-img img{max-height:280px} .ed-prac-detail{flex-direction:column;gap:4px} .ed-prac-detail-label{min-width:auto} } /* ========================================== MONETIZATION TIERS — Featured / Editor's Pick / Editor's Choice ========================================== */ /* Tier badges (chip) */ .ed-tier-chip { display: inline-block; padding: 3px 10px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; border-radius: 100px; margin-bottom: 6px; vertical-align: middle; } .ed-tier-chip--featured { background: rgba(181, 101, 74, 0.1); color: var(--accent, #b5654a); border: 1px solid rgba(181, 101, 74, 0.25); } .ed-tier-chip--pick { background: var(--paper-2); color: var(--accent, #b5654a); border: 1px solid var(--accent, #b5654a); font-weight: 700; } .ed-tier-chip--choice { background: #1a1a1a; color: #fff; border: 1px solid #1a1a1a; } /* Tier card backgrounds (subtle highlight in list) */ .ed-list-item--featured { background: linear-gradient(to right, rgba(181,101,74,0.05), transparent); border-left: 3px solid var(--accent, #b5654a); } .ed-list-item--pick { background: linear-gradient(to right, rgba(181,101,74,0.08), transparent); border-left: 3px solid var(--accent, #b5654a); } .ed-list-item--choice { background: linear-gradient(to right, rgba(26,26,26,0.05), transparent); border-left: 3px solid #1a1a1a; } /* Pricing grid : 4 tiers layout */ .ed-tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1200px; } @media (max-width: 960px) { .ed-tier-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .ed-tier-grid { grid-template-columns: 1fr; } } /* Prestige tier (Editor's Choice) on pricing grid */ .ed-tier--prestige { background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); color: #fff; border: 2px solid var(--accent, #b5654a); position: relative; } .ed-tier--prestige .ed-tier-name, .ed-tier--prestige .ed-tier-price, .ed-tier--prestige .ed-tier-desc, .ed-tier--prestige .ed-tier-list { color: #fff; } .ed-tier--prestige .ed-tier-price strong { color: var(--accent, #b5654a); } /* ========================================== COMPACT CARDS — Free-tier studios (grid layout) ========================================== */ .ed-compact-grid { display: grid; /* Dense grid: 5-6 cards per row on desktop, 3 on tablet, 2 on mobile */ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 0; } @media (max-width: 900px) { .ed-compact-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; } } @media (max-width: 560px) { .ed-compact-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } .ed-compact-item { display: block; text-decoration: none; color: inherit; background: var(--paper, #fafaf8); border: 1px solid var(--line, #e5e5e5); border-radius: 10px; overflow: hidden; transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .2s; opacity: .92; } .ed-compact-item:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.06); opacity: 1; } .ed-compact-img { width: 100%; aspect-ratio: 8/5; background: #ececec; position: relative; } .ed-compact-img::before { content: attr(data-initial); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif, Georgia), serif; font-size: 42px; font-weight: 300; color: rgba(0,0,0,.15); } .ed-compact-img img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; } .ed-compact-body { padding: 12px 14px 14px; } .ed-compact-name { font-family: var(--serif, Georgia), serif; font-size: 15px; font-weight: 500; margin: 0 0 4px; line-height: 1.3; color: var(--ink, #1a1a1a); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ed-compact-meta { font-family: var(--sans, sans-serif); font-size: 12px; color: var(--ink-dim, #777); letter-spacing: .01em; } /* Editor's Pick hero box centered (magazine style) */ .ed-editor-pick-hero { text-align: center; margin: 24px 0 !important; } .ed-editor-pick-hero .ed-pick-grid { grid-template-columns: 1fr !important; max-width: 720px; margin: 0 auto; gap: 20px !important; } .ed-editor-pick-hero h2 { text-align: center; } /* ========================================== FEATURED TIER — enhanced visual for paid city cards ========================================== */ .ed-list-item--featured { grid-template-columns: 200px 1fr auto !important; gap: 28px !important; padding: 24px 20px !important; border-bottom: 1px solid var(--line, #e5e5e5); background: linear-gradient(to right, rgba(181,101,74,0.06), transparent 60%); border-left: 3px solid var(--accent, #b5654a); border-radius: 0 10px 10px 0; margin-bottom: 8px; position: relative; transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .2s; } .ed-list-item--featured:hover { transform: translateX(4px); box-shadow: 0 4px 20px rgba(181,101,74,.08); background: linear-gradient(to right, rgba(181,101,74,0.1), transparent 60%); } .ed-list-item--featured .ed-list-img { width: 200px !important; aspect-ratio: 5/4 !important; border-radius: 10px; } .ed-list-item--featured .ed-list-body h3 { font-size: 26px; margin-bottom: 6px; } .ed-list-item--pick, .ed-list-item--choice { display: none !important; /* avoid duplicating with hero box above */ } @media (max-width:720px){ .ed-list-item--featured { grid-template-columns: 120px 1fr !important; gap: 14px !important; padding: 16px 12px !important; } .ed-list-item--featured .ed-list-img { width: 120px !important; } .ed-list-item--featured .ed-list-body h3 { font-size: 18px; } } /* Ensure Editor's Pick hero variations inherit magazine spread style but with tint */ .ed-featured--pick .ed-feat-label { background: var(--paper-2); color: var(--accent, #b5654a); border: 1px solid var(--accent, #b5654a); } .ed-featured--choice .ed-feat-label { background: #1a1a1a; color: #fff; } /* ========================================== FEATURED MAGAZINE CARDS (2-col grid) Visually punchy, big landscape photo + body below ========================================== */ .ed-featured-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 0; } @media (max-width: 780px) { .ed-featured-grid { grid-template-columns: 1fr; gap: 16px; } } .ed-feat-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--paper, #fafaf8); border: 1px solid var(--line, #e5e5e5); border-radius: 14px; overflow: hidden; position: relative; transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .25s, border-color .25s; } .ed-feat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(181,101,74,.12); border-color: var(--accent, #b5654a); } .ed-feat-card-img { width: 100%; aspect-ratio: 16/10; background: linear-gradient(135deg, var(--img-a, #d8cfc4), var(--img-b, #c4a894)); position: relative; overflow: hidden; } .ed-feat-card-img::before { content: attr(data-initial); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif, Georgia), serif; font-style: italic; font-size: 88px; font-weight: 300; color: rgba(255,255,255,.4); } .ed-feat-card-img img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; } .ed-feat-card-badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(255,255,255,0.95); color: var(--accent, #b5654a); padding: 6px 12px; border-radius: 100px; font-family: var(--mono, monospace); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; backdrop-filter: blur(8px); box-shadow: 0 2px 8px rgba(0,0,0,.08); } .ed-feat-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; } .ed-feat-card-name { font-family: var(--serif, Georgia), serif; font-size: 24px; font-weight: 400; color: var(--ink, #1a1a1a); margin: 0; line-height: 1.2; letter-spacing: -.005em; } .ed-feat-card-meta { font-family: var(--mono, monospace); font-size: 12px; color: var(--ink-dim, #7a6060); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 2px; } .ed-feat-card-meta strong { color: var(--ink, #1a1a1a); font-weight: 600; } .ed-feat-card-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-dim, #7a6060); display: inline-block; } .ed-feat-card-phone { font-size: 12px; color: var(--ink-dim, #7a6060); } .ed-feat-card-addr { font-family: var(--serif, Georgia), serif; font-style: italic; font-size: 14px; color: var(--ink-dim, #7a6060); line-height: 1.4; margin-top: 2px; } .ed-feat-card-actions { margin-top: 10px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: space-between; } .ed-feat-card-cta { font-family: var(--mono, monospace); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--accent, #b5654a); padding-bottom: 3px; border-bottom: 1px solid var(--accent, #b5654a); transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1); } .ed-feat-card:hover .ed-feat-card-cta { transform: translateX(4px); } .ed-feat-card-profile { font-family: var(--mono, monospace); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-dim, #7a6060); text-decoration: none; } .ed-feat-card-profile:hover { color: var(--accent, #b5654a); } /* Prevent old list-item--featured style from leaking since we use new cards now */ .ed-featured-grid .ed-list-item--featured { all: unset; display: contents; } /* 3-column pricing grid (without Editor's Choice which is shown separately above) */ .ed-tier-grid--three { grid-template-columns: repeat(3, 1fr); max-width: 960px; } @media (max-width: 820px) { .ed-tier-grid--three { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .ed-tier-grid--three { grid-template-columns: 1fr; } } /* ========================================== A11Y : nav-link-muted contrast only. The previous !important overrides on ed-tier-* were removed — accent colors have been deepened per-site so contrast is WCAG AA compliant natively. ========================================== */ .nav-link-muted { /* Match .topnav-links a (mono 10px uppercase letter-spacing) but with ink-dim color to signal discreet B2B entry point */ font-family: var(--mono) !important; font-size: 10px !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--ink-dim, #7a6060) !important; } .nav-link-muted:hover { color: var(--ink) !important; } /* ==================================================================== */ /* BLOG ARTICLE — prev/next + related + back-to-index (appended to each article via _integrate_blog_post in build_site.py). Paired with site topnav and footer. Works with the articles' own internal styling. */ /* ==================================================================== */ .blog-article-tail { max-width: 1100px; margin: 96px auto 0; padding: 0 24px 96px; font-family: "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif; } /* Prev / Next — editorial, minimal, no chunky buttons */ .blog-prev-next { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 64px 0 56px; border-top: 1px solid var(--line, #EADFD5); } .blog-prev, .blog-next { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--ink, #1C1510); transition: color .15s ease; } .blog-prev:hover .blog-prev-title, .blog-next:hover .blog-next-title { color: var(--accent, #BB5A4E); } .blog-next { text-align: right; } .blog-prev-lbl, .blog-next-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted, #7A6F66); font-family: "JetBrains Mono", ui-monospace, monospace; } .blog-prev-title, .blog-next-title { font-family: "Instrument Serif", Georgia, serif; font-size: 22px; line-height: 1.22; letter-spacing: -0.015em; transition: color .15s ease; } .blog-prev-placeholder, .blog-next-placeholder { /* keep grid alignment when one side has no neighbour */ } /* Related articles — header italic for editorial feel */ .blog-related-section { padding: 48px 0 12px; border-top: 1px solid var(--line, #EADFD5); } .blog-related-title { font-family: "Instrument Serif", Georgia, serif; font-size: 28px; font-weight: 400; font-style: italic; letter-spacing: -0.02em; color: var(--ink, #1C1510); margin: 0 0 28px; } .blog-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .blog-related-card { display: block; padding: 20px 22px; background: var(--paper, #FCFBF7); border: 1px solid var(--line, #EADFD5); border-radius: 12px; text-decoration: none; color: var(--ink, #1C1510); transition: border-color .15s ease, transform .15s ease; } .blog-related-card:hover { border-color: var(--accent, #BB5A4E); transform: translateY(-2px); } .blog-related-eyebrow { display: block; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent, #BB5A4E); margin: 0 0 8px; } .blog-related-headline { font-family: "Instrument Serif", Georgia, serif; font-size: 17px; font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink, #1C1510); margin: 0; } .blog-back-to-index { padding: 32px 0 16px; text-align: center; } .blog-back-to-index a { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-dim, #4A3A2D); text-decoration: none; transition: color .15s ease; } .blog-back-to-index a:hover { color: var(--accent, #BB5A4E); } @media (max-width: 720px) { .blog-prev-next { grid-template-columns: 1fr; } .blog-next { text-align: left; } .blog-related-grid { grid-template-columns: 1fr; } } /* ==================================================================== */ /* BLOG INDEX — /blog page editorial grid */ /* ==================================================================== */ .blog-index-hero { padding: 72px 24px 48px; text-align: center; } .blog-index-hero-inner { max-width: 720px; margin: 0 auto; } .blog-index-hero-eyebrow { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent, #BB5A4E); margin: 0 0 16px; } .blog-index-hero-title { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(40px, 6vw, 64px); font-weight: 400; line-height: 1.05; letter-spacing: -0.03em; color: var(--ink, #1C1510); margin: 0 0 20px; } .blog-index-hero-title em { font-style: italic; color: var(--accent, #BB5A4E); } .blog-index-hero-lede { font-family: "Instrument Serif", Georgia, serif; font-size: 19px; line-height: 1.5; color: var(--ink-dim, #4A3A2D); margin: 0 0 14px; } .blog-index-hero-count { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted, #7A6F66); margin: 0; } .blog-index-grid-section { padding: 16px 24px 96px; } .blog-index-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; } .blog-index-card { background: var(--paper, #FCFBF7); border: 1px solid var(--line, #EADFD5); border-radius: 14px; overflow: hidden; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .blog-index-card:hover { transform: translateY(-3px); border-color: var(--accent, #BB5A4E); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); } .blog-index-card-link { display: block; text-decoration: none; color: inherit; } .blog-index-card-imgwrap { aspect-ratio: 16 / 9; background: transparent; position: relative; overflow: hidden; } /* When no image: collapse the reserved zone entirely so the card is pure text (no awkward empty gap, no placeholder gradient). When an image is added later, the aspect-ratio block is restored automatically. */ .blog-index-card-imgwrap.no-img { aspect-ratio: auto; height: 0; } .blog-index-card-img { width: 100%; height: 100%; object-fit: cover; display: block; } .blog-index-card-body { padding: 20px 22px 24px; } .blog-index-eyebrow { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent, #BB5A4E); margin: 0 0 10px; } .blog-index-headline { font-family: "Instrument Serif", Georgia, serif; font-size: 22px; font-weight: 400; line-height: 1.22; letter-spacing: -0.01em; color: var(--ink, #1C1510); margin: 0 0 10px; } .blog-index-lede { font-family: "Instrument Serif", Georgia, serif; font-size: 15px; line-height: 1.55; color: var(--ink-dim, #4A3A2D); margin: 0; } /* ==================================================================== */ /* CLAIM RIBBON — subtle top banner on practitioner pages prompting the studio owner to claim their listing. Non-intrusive for visitors. */ /* ==================================================================== */ .ed-claim-ribbon { max-width: 1100px; margin: 8px auto 0; padding: 0 24px; } .ed-claim-ribbon-inner { background: var(--paper-2, #F5EBE2); border: 1px solid var(--line, #EADFD5); border-radius: 8px; padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: "Inter", system-ui, -apple-system, sans-serif; } .ed-claim-ribbon-text { font-size: 13px; color: var(--ink-dim, #4A3A2D); line-height: 1.4; } .ed-claim-ribbon-text strong { color: var(--ink, #1C1510); font-weight: 600; } .ed-claim-ribbon-cta { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent, #BB5A4E); text-decoration: none; padding: 6px 14px; border: 1px solid var(--accent, #BB5A4E); border-radius: 4px; transition: background .15s ease, color .15s ease; white-space: nowrap; } .ed-claim-ribbon-cta:hover { background: var(--accent, #BB5A4E); color: var(--paper, #FCFBF7); } @media (max-width: 600px) { .ed-claim-ribbon-inner { padding: 10px 14px; } .ed-claim-ribbon-text { font-size: 12px; } .ed-claim-ribbon-cta { font-size: 10px; padding: 5px 10px; } }