/* ============================================================ HELEN HAN THERAPY — design tokens Palettes (data-palette): moss · sage · terra Type (data-type): classic · editorial Live site is locked to sage + editorial (set on ). ============================================================ */ :root{ --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:34px; --r-pill:999px; --maxw:1180px; --shadow-sm:0 1px 2px rgba(40,32,22,.05), 0 2px 8px rgba(40,32,22,.05); --shadow-md:0 6px 18px rgba(40,32,22,.08), 0 2px 6px rgba(40,32,22,.05); --shadow-lg:0 24px 60px -22px rgba(40,32,22,.28); --ease:cubic-bezier(.22,.61,.36,1); } /* ---- Type systems ---- */ html[data-type="classic"]{ --font-display:"Libre Baskerville", Georgia, serif; --font-body:"Karla", system-ui, sans-serif; --display-weight:700; --display-lh:1.12; --display-ls:-0.01em; --h-tracking:0; } html[data-type="editorial"]{ --font-display:"Newsreader", Georgia, serif; --font-body:"Hanken Grotesk", system-ui, sans-serif; --display-weight:400; --display-lh:1.06; --display-ls:-0.015em; --h-tracking:-0.005em; } /* ---- Palettes ---- */ html[data-palette="moss"]{ --paper:#f4efdc; --paper-2:#efe8cf; --panel:#fbf8ec; --tint:#e6e0b6; --brand:#4d5727; --brand-press:#3b4420; --brand-2:#7f8d3f; --brand-soft:#dfe0ad; --sand:#cabd77; --ink:#2e3220; --muted:#646a4b; --line:#ddd6b4; --on-brand:#f6f3df; } html[data-palette="sage"]{ --paper:#f4f1e8; --paper-2:#ece8da; --panel:#fcfaf3; --tint:#dde8df; --brand:#34604a; --brand-press:#274c39; --brand-2:#6f9a7e; --brand-soft:#cfe1d3; --sand:#d6c4a0; --ink:#26342b; --muted:#5d6b60; --line:#d8d6c4; --on-brand:#f4f1e6; } html[data-palette="terra"]{ --paper:#f7efe3; --paper-2:#f1e5d4; --panel:#fdf8f0; --tint:#f0ddc8; --brand:#a8492b; --brand-press:#8b3c22; --brand-2:#c67a4f; --brand-soft:#eecdb0; --sand:#e3c79f; --ink:#3a2a22; --muted:#7a6253; --line:#e4d6c2; --on-brand:#fbf1e6; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:18px; line-height:1.65; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* grain texture overlay */ body::before{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E"); } #root,.page{position:relative; z-index:2;} h1,h2,h3,h4{font-family:var(--font-display); font-weight:var(--display-weight); line-height:var(--display-lh); letter-spacing:var(--display-ls); margin:0; color:var(--ink);} p{margin:0; text-wrap:pretty;} a{color:inherit; text-decoration:none;} img{display:block; max-width:100%;} /* ---- layout ---- */ .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;} .section{padding:96px 0; position:relative;} .section.tight{padding:72px 0;} .center{text-align:center;} .eyebrow{font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-2); display:inline-flex; align-items:center; gap:10px;} .eyebrow::before{content:""; width:24px; height:1.5px; background:var(--brand-2); display:inline-block;} .eyebrow.no-rule::before{display:none;} .kicker{color:var(--muted); font-size:19px; line-height:1.6; max-width:62ch;} .lead{font-size:21px; line-height:1.6; color:var(--muted);} /* ---- buttons ---- */ .btn{display:inline-flex; align-items:center; gap:10px; cursor:pointer; white-space:nowrap; font-family:var(--font-body); font-weight:600; font-size:16px; padding:15px 26px; border-radius:var(--r-pill); border:1.5px solid transparent; transition:transform .18s var(--ease), box-shadow .25s var(--ease); text-align:center;} .btn:active{transform:translateY(1px);} .btn-primary{background:var(--brand); color:var(--on-brand); box-shadow:var(--shadow-md);} .btn-primary:hover{background:var(--brand-press); transform:translateY(-2px); box-shadow:var(--shadow-lg);} .btn-ghost{background:transparent; color:var(--brand); border-color:var(--brand);} .btn-ghost:hover{background:var(--brand); color:var(--on-brand); transform:translateY(-2px);} .btn-soft{background:var(--panel); color:var(--ink); border-color:var(--line); box-shadow:var(--shadow-sm);} .btn-soft:hover{border-color:var(--brand-2); transform:translateY(-2px);} .btn .ar{transition:transform .25s var(--ease); display:inline-flex;} .btn:hover .ar{transform:translateX(4px);} /* ---- nav ---- */ .nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 80%, transparent); backdrop-filter:blur(12px) saturate(1.1); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color .3s, background .3s;} .nav.scrolled{border-color:var(--line); background:color-mix(in srgb, var(--paper) 92%, transparent);} .nav-in{display:flex; align-items:center; justify-content:space-between; height:78px; gap:20px;} .brand{display:flex; align-items:center; gap:12px; cursor:pointer;} .brand-mark{width:38px; height:38px; flex:none;} .brand-name{font-family:var(--font-display); font-weight:var(--display-weight); font-size:21px; letter-spacing:-.01em; line-height:1.05;} .brand-sub{font-family:var(--font-body); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:2px; display:block;} .nav-links{display:flex; align-items:center; gap:6px;} .nav-link{font-size:15.5px; font-weight:500; padding:9px 15px; border-radius:var(--r-pill); color:var(--ink); opacity:.78; transition:opacity .2s, background .2s; cursor:pointer;} .nav-link:hover{opacity:1; background:color-mix(in srgb, var(--brand-2) 14%, transparent);} .nav-link.active{opacity:1; color:var(--brand); background:color-mix(in srgb, var(--brand-2) 16%, transparent);} .nav-cta{margin-left:8px;} .menu-btn{display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--ink);} .mobile-menu{display:none;} .mobile-menu.open{display:block;} /* ---- cards & misc ---- */ .card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);} .chip{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--r-pill); background:var(--panel); border:1px solid var(--line); font-size:14.5px; font-weight:500; color:var(--ink);} .chip.solid{background:color-mix(in srgb, var(--brand-2) 16%, var(--panel)); border-color:transparent;} .divider{height:1px; background:var(--line); border:none; margin:0;} .pill-tag{display:inline-block; padding:5px 13px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600; letter-spacing:.04em; background:color-mix(in srgb, var(--brand-2) 18%, var(--panel)); color:var(--brand);} /* blob decorations */ .blob{position:absolute; border-radius:46% 54% 60% 40% / 50% 42% 58% 50%; filter:blur(2px); z-index:0; pointer-events:none; opacity:.55;} /* fade-in on scroll — TRANSFORM-ONLY so content is never invisible even if the animation freezes at frame 0 in a throttled/background tab. */ .reveal{opacity:1;} @media (prefers-reduced-motion: no-preference){ .reveal.in{animation:hht-rise .65s var(--ease);} } @keyframes hht-rise{from{transform:translateY(16px);} 40%{opacity:.7;} to{transform:none;}} /* footer */ .footer{background:var(--brand); color:var(--on-brand); padding:72px 0 36px; position:relative; z-index:2;} .footer a{opacity:.82;} .footer a:hover{opacity:1;} .foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px;} .foot-h{font-size:15px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; font-family:var(--font-body); font-weight:700; opacity:.9;} .foot-list{list-style:none; padding:0; margin:0; display:grid; gap:11px;} /* accordion */ .acc-item{border-bottom:1px solid var(--line);} .acc-q{display:flex; justify-content:space-between; align-items:center; gap:20px; width:100%; background:none; border:none; cursor:pointer; text-align:left; padding:24px 4px; font-family:var(--font-display); font-size:20px; font-weight:var(--display-weight); color:var(--ink); line-height:1.3;} .acc-ic{flex:none; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; transition:transform .3s var(--ease), background .3s, border-color .3s; color:var(--brand);} .acc-item.open .acc-ic{transform:rotate(45deg); background:var(--brand); color:var(--on-brand); border-color:var(--brand);} .acc-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease), opacity .3s; opacity:0;} .acc-item.open .acc-a{opacity:1;} .acc-a-in{padding:0 4px 26px; color:var(--muted); font-size:17.5px; max-width:64ch;} /* form */ .field{display:flex; flex-direction:column; gap:7px; margin-bottom:18px;} .field label{font-size:14px; font-weight:600; color:var(--ink);} .field input,.field textarea,.field select{font-family:var(--font-body); font-size:16px; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r-sm); padding:13px 15px; transition:border-color .2s, box-shadow .2s;} .field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--brand-2); box-shadow:0 0 0 4px color-mix(in srgb, var(--brand-2) 18%, transparent);} .field.err input,.field.err textarea{border-color:#b4472f; box-shadow:0 0 0 4px rgba(180,71,47,.12);} .field .msg{font-size:12.5px; color:#b4472f;} /* utility */ .muted{color:var(--muted);} .serif{font-family:var(--font-display);} .hide{display:none;} /* shared layout grids (inline in prototype; named here so they stack on mobile) */ .hero-grid{display:grid; gap:56px; align-items:center;} .sp-card{transition:transform .25s var(--ease), box-shadow .25s;} .sp-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);} /* cycle → path visualization */ .cyclepath{position:relative; margin-top:54px;} .cp-rail{position:absolute; top:33px; left:7%; right:7%; height:3px; border-radius:3px; background:linear-gradient(90deg, color-mix(in srgb,var(--brand-2) 45%,transparent), var(--brand)); z-index:0;} .cp-track{display:flex; gap:18px; position:relative; z-index:1;} .cp-stop{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center;} .cp-mark{width:66px; height:66px; border-radius:50%; display:grid; place-items:center; background:var(--panel); border:2px solid var(--line); color:var(--brand); font-family:var(--font-display); font-weight:var(--display-weight); font-size:22px; box-shadow:var(--shadow-sm); flex:none;} .cp-mark-loop{border-style:dashed; border-color:var(--brand-2); color:var(--brand-2); background:var(--paper);} .cp-mark-goal{background:var(--brand); color:var(--on-brand); border-color:var(--brand);} .cp-text{margin-top:16px;} .cp-label{font-family:var(--font-display); font-weight:var(--display-weight); font-size:17px; line-height:1.25;} .cp-tag{font-family:var(--font-body); font-weight:600; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--brand-2);} .cp-desc{font-size:13.5px; color:var(--muted); margin-top:8px; line-height:1.5;} @media(max-width:900px){ .cyclepath{margin-top:36px;} .cp-rail{top:0; bottom:0; left:32px; right:auto; width:3px; height:auto; background:linear-gradient(180deg, color-mix(in srgb,var(--brand-2) 45%,transparent), var(--brand));} .cp-track{flex-direction:column; gap:22px;} .cp-stop{flex-direction:row; align-items:flex-start; text-align:left; gap:18px;} .cp-text{margin-top:4px;} .cp-desc{max-width:52ch;} } /* contact: featured booking card + email row */ .book-feature{display:flex; align-items:center; gap:30px; justify-content:space-between; background:var(--brand); color:var(--on-brand); border-radius:var(--r-xl); padding:clamp(32px,5vw,56px); position:relative; overflow:hidden; box-shadow:var(--shadow-lg); transition:transform .25s var(--ease), box-shadow .25s var(--ease); cursor:pointer;} .book-feature:hover{transform:translateY(-3px); box-shadow:0 30px 70px -24px rgba(40,32,22,.4);} .bf-icon{flex:none; color:var(--sand);} .mail-row{display:flex; align-items:center; gap:16px; padding:20px 24px; margin-top:18px; transition:transform .2s var(--ease), border-color .2s; cursor:pointer;} .mail-row:hover{transform:translateY(-2px); border-color:var(--brand-2);} @media(max-width:680px){ .book-feature .bf-icon{display:none;} } /* responsive */ @media(max-width:980px){ .hero-grid{grid-template-columns:1fr !important; gap:40px;} .foot-grid{grid-template-columns:1fr 1fr; gap:32px;} } @media(max-width:860px){ body{font-size:17px;} .section{padding:68px 0;} .nav-links{display:none;} .menu-btn{display:inline-flex;} .wrap{padding:0 20px;} } @media(max-width:560px){ .foot-grid{grid-template-columns:1fr;} }