/* ============================================================ 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; } /* ==================== 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:#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{ --paper:#F9F3E4; --paper-2:#EEE6CF; --ink:#2A1F12; --ink-2:#3E2F1E; --ink-dim:#564432; --accent:#9C5E2A; --gold:#C88A4A; --gold-soft:#F2E2BE; --muted:#7A6C54; --line:#E5DCBD; --line-2:#D5CAA2; --img-base:#B8844C; --img-a:#D19C60; --img-b:#4A2E14; } .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{ --paper:#FAF7F2; --paper-2:#EDE8DF; --ink:#1C1B19; --ink-2:#2E2C28; --ink-dim:#4A4740; --accent:#8B6B3D; --gold:#B8935A; --gold-soft:#F1E8D2; --muted:#6E6A60; --line:#E6DFD0; --line-2:#D4CBB8; --img-base:#8A8275; --img-a:#A89F8F; --img-b:#2A2620; } /* 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; } 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:64px 32px 56px;max-width:var(--max-w);margin:0 auto} .ed-top{ display:flex;align-items:center;justify-content:space-between; margin-bottom:44px;padding-bottom:22px; border-bottom:1px dashed var(--line-2); flex-wrap:wrap;gap:16px; } .ed-date,.ed-issue{ font-family:var(--mono);font-size:11px; letter-spacing:.12em;text-transform:uppercase;color:var(--muted); } .ed-issue{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:14px} .ed-h1{ font-family:var(--serif);font-size:clamp(44px,6vw,76px); font-weight:400;line-height:1.02;color:var(--ink); letter-spacing:-.035em;max-width:880px; } .ed-h1 em{font-style:italic;color:var(--accent);display:block;margin-top:4px} .ed-rule{width:80px;height:2px;background:var(--ink);margin:30px 0 22px} .ed-lede{ font-family:var(--serif);font-size:20px;font-style:italic; color:var(--ink-dim);max-width:560px;line-height:1.55;margin-bottom:34px; } .ed-meta{ display:flex;gap:0;align-items:center;flex-wrap:wrap; font-family:var(--mono);font-size:11px;color:var(--muted); text-transform:uppercase;letter-spacing:.1em; } .ed-meta span{padding:0 16px;border-left:1px solid var(--line-2)} .ed-meta span:first-child{padding-left:0;border-left:none} .ed-meta strong{color:var(--ink);font-weight:600} /* 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 72px;max-width:var(--max-w);margin:0 auto} .ed-section-lbl{ font-family:var(--mono);font-size:11px;font-weight:500; text-transform:uppercase;letter-spacing:.18em;color:var(--muted); margin-bottom:28px;padding-top:32px;border-top:1px solid var(--line-2); display:flex;justify-content:space-between;align-items:center; } .ed-section-lbl em{ font-family:var(--serif);font-style:italic;text-transform:none; letter-spacing:0;color:var(--muted);font-size:15px; } /* ==================== 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}} .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:18px 20px 22px} .ed-card-kicker{ font-family:var(--mono);font-size:10px;text-transform:uppercase; letter-spacing:.12em;color:var(--muted);margin-bottom:6px; } .ed-card-name{ font-family:var(--serif);font-size:24px;font-weight:400; line-height:1.08;letter-spacing:-.01em;color:var(--ink);margin-bottom:10px; } .ed-card-meta{ font-family:var(--mono);font-size:11px;color:var(--muted); display:flex;gap:10px;align-items:center; } .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(--serif);font-style:italic;font-size:14px; color:var(--gold);margin-bottom:14px; } .ed-feat-name{ font-family:var(--serif);font-size:42px;font-weight:400; line-height:1.05;letter-spacing:-.025em;color:var(--ink);margin-bottom:18px; } .ed-feat-quote{ font-family:var(--serif);font-style:italic;font-size:17px; line-height:1.55;color:var(--ink-dim);max-width:40ch;margin-bottom:26px; padding-left:16px;border-left:2px solid var(--gold); } .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)); } .ed-list-img img{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} } /* ==================== 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-footer-bottom{ padding-top:32px;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); } @media(max-width:860px){ .ed-footer-grid{grid-template-columns:1fr 1fr;gap:32px} .ed-footer-brand{grid-column:1/-1} } /* ==================== UTIL ==================== */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);border:0; }