/* ============================================================ Where To Turn - site styles Two-axis theme system: data-palette (compass | slate) × data-mode (light | dark) Mode supports 'auto' which follows OS preference. Both attributes live on , set by inline bootstrap in each page . ============================================================ */ /* Fonts - now loaded via preconnect in each HTML page head for faster paint */ :root{ --font-sans:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,sans-serif; --font-serif:'Source Serif 4',Georgia,'Times New Roman',serif; --font-mono:'SFMono-Regular',Menlo,Consolas,monospace; --radius:10px; --radius-lg:18px; } /* =========================== COMPASS - Marine Blue + Burnt Orange =========================== */ :root[data-palette="compass"][data-mode="light"], :root[data-palette="compass"]:not([data-mode]), :root:not([data-palette])[data-mode="light"], :root:not([data-palette]):not([data-mode]){ --primary:#0B3D5C; --primary-2:#1B5A82; --primary-deep:#06283D; --accent:#D26A1F; --accent-2:#E8954A; --accent-soft:#FBEEE1; --support:#7BA08C; --bg:#F4F1EB; --alt:#FBF9F3; --card:#FFFFFF; --line:#E5E1D7; --line-2:#EFEBE0; --heading:#14222E; --text:#3A4248; --slate:#6A7178; --shell:#0A1F30; --shell-2:#06283D; --shell-3:#14222E; --header-bg:rgba(244,241,235,.86); --shadow:0 4px 16px rgba(20,25,30,.06); --shadow-lg:0 16px 40px rgba(20,25,30,.12); --good:#3B8C5A; --warn:#E0A341; --bad:#D2542F; } :root[data-palette="compass"][data-mode="dark"]{ --primary:#3D8AB8; --primary-2:#5BA9D5; --primary-deep:#082E47; --accent:#E8853B; --accent-2:#F4A468; --accent-soft:#33271B; --support:#8FB8A4; --bg:#0D1518; --alt:#141C20; --card:#1A2329; --line:#2A3540; --line-2:#1F2830; --heading:#ECEAE5; --text:#C6CBCF; --slate:#8E969E; --shell:#04111B; --shell-2:#021A2A; --shell-3:#0D1518; --header-bg:rgba(13,21,24,.88); --shadow:0 4px 16px rgba(0,0,0,.25); --shadow-lg:0 16px 40px rgba(0,0,0,.4); } /* =========================== SLATE & EMBER - Charcoal + Warm Amber =========================== */ :root[data-palette="slate"][data-mode="light"]{ --primary:#2A2E33; --primary-2:#3F454C; --primary-deep:#181B1F; --accent:#E29A2A; --accent-2:#F0B95C; --accent-soft:#FBEBC9; --support:#4D8C8E; --bg:#F7F5F0; --alt:#FBF9F4; --card:#FFFFFF; --line:#E2DED5; --line-2:#EDE9DE; --heading:#181B1F; --text:#3A4148; --slate:#6E747B; --shell:#161A1D; --shell-2:#0E1114; --shell-3:#1F2326; --header-bg:rgba(247,245,240,.86); --shadow:0 4px 16px rgba(20,25,30,.06); --shadow-lg:0 16px 40px rgba(20,25,30,.12); --good:#3B8C5A; --warn:#E0A341; --bad:#D2542F; } :root[data-palette="slate"][data-mode="dark"]{ --primary:#9BA2AA; --primary-2:#B5BCC3; --primary-deep:#10131A; --accent:#F0B95C; --accent-2:#F8D085; --accent-soft:#3A2D14; --support:#7BB1B3; --bg:#0E1114; --alt:#161A1D; --card:#1C2125; --line:#2D343A; --line-2:#21262B; --heading:#ECEAE5; --text:#C6CBCF; --slate:#8E969E; --shell:#06080A; --shell-2:#020407; --shell-3:#0E1114; --header-bg:rgba(14,17,20,.88); --shadow:0 4px 16px rgba(0,0,0,.25); --shadow-lg:0 16px 40px rgba(0,0,0,.4); } /* Legacy aliases so older markup keeps working */ :root{ --navy:var(--shell); --navy-2:var(--shell-2); --navy-3:var(--shell-3); --cyan:var(--accent-2); --blue:var(--primary); --ink:var(--heading); --white:#fff; --green:var(--good); --amber:var(--warn); --red:var(--bad); } /* =========================== BASE =========================== */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:var(--font-sans); color:var(--text); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; transition:background .25s ease,color .25s ease; } h1,h2,h3,h4{ font-family:var(--font-serif); line-height:1.18; margin:0 0 .5em; color:var(--heading); font-weight:600; letter-spacing:-.2px; } h1{font-size:clamp(2rem,4vw,2.95rem);letter-spacing:-.4px;font-weight:700} h2{font-size:clamp(1.5rem,2.9vw,2rem);font-weight:600} h3{font-size:1.15rem;letter-spacing:-.05px;font-weight:600} h4{font-size:1rem;font-family:var(--font-sans);font-weight:700} p{margin:0 0 1rem} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} em{font-style:italic} small{font-size:.85em} .container{width:min(1120px,92%);margin-inline:auto} .muted{color:var(--slate)} .center{text-align:center} .mt-1{margin-top:1rem}.mt-2{margin-top:2rem} .gradient-text{ color:var(--accent); font-family:var(--font-serif); font-style:italic; font-weight:700; } /* =========================== HEADER / NAV =========================== */ header.site{ position:sticky;top:0;z-index:50; background:var(--header-bg); backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line); } header.site .nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0;position:relative} header.site .brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--heading)} header.site .brand img{width:30px;height:auto} header.site .brand .name{ font-family:var(--font-serif);font-weight:700;font-size:1.15rem;letter-spacing:-.3px; color:var(--heading); } header.site .brand .name .to{color:var(--accent);font-weight:700} header.site .brand .name .period{color:var(--accent);font-weight:800} /* Global wordmark - consistent everywhere "WhereToTurn." appears. Brand accent uses the same gradient as the logo SVG: #F2A961 -> #C9551A */ .wordmark{font-family:var(--font-serif);font-weight:600;letter-spacing:-.2px;color:inherit} .wordmark .to, .wordmark .period, header.site .brand .name .to, header.site .brand .name .period, .hero-banner .hb-wordmark .to, .hero-banner .hb-wordmark .period, footer.site .footer-mark .wordmark .to, footer.site .footer-mark .wordmark .period, footer.site .footer-tagline .period, footer.site .fine .period{ background:linear-gradient(180deg,#F2A961 0%,#C9551A 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; font-weight:700; } .nav-links{display:flex;align-items:center;gap:1.4rem} .nav-links a{color:var(--text);font-weight:500;font-size:.95rem;position:relative} .nav-links a:hover{color:var(--accent);text-decoration:none} .nav-links a.active{color:var(--heading);font-weight:600} .nav-links a.active::after{ content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px; background:var(--accent);border-radius:2px; } .nav-links .btn{padding:.55rem 1rem} .nav-links .btn.active::after{display:none} .nav-tools{display:flex;gap:.4rem;align-items:center} .nav-tools button{ appearance:none;border:1px solid var(--line);background:var(--card); color:var(--text);cursor:pointer;padding:.45rem;border-radius:8px; display:inline-flex;align-items:center;justify-content:center; transition:.15s; } .nav-tools button:hover{border-color:var(--accent);color:var(--accent)} .nav-tools svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round} /* palette + mode dropdown */ .theme-menu{position:relative} .theme-menu .pop{ position:absolute;top:calc(100% + 8px);right:0; background:var(--card);border:1px solid var(--line);border-radius:12px; padding:.5rem;box-shadow:var(--shadow-lg); display:none;min-width:220px;z-index:60; } .theme-menu.open .pop{display:block} .theme-menu .pop .label{ font-size:.62rem;letter-spacing:.16em;text-transform:uppercase; color:var(--slate);font-weight:700;padding:.5rem .6rem .35rem; } .theme-menu .pop button{ display:flex;align-items:center;gap:.55rem;width:100%;justify-content:flex-start; border:0;background:transparent;color:var(--text);font:500 .88rem var(--font-sans); padding:.5rem .6rem;border-radius:7px;cursor:pointer;text-align:left; } .theme-menu .pop button:hover{background:var(--alt);color:var(--heading)} .theme-menu .pop button.on{background:var(--accent-soft);color:var(--accent);font-weight:600} .theme-menu .pop button .dot-sw{width:12px;height:12px;border-radius:50%;border:1px solid var(--line);flex-shrink:0} .theme-menu .pop button svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} /* mobile nav */ .nav-toggle{display:none} @media(max-width:880px){ .nav-links{ display:none;position:absolute;top:100%;left:0;right:0; flex-direction:column;background:var(--card);border-top:1px solid var(--line); padding:1rem 1.2rem;gap:1rem;align-items:flex-start;z-index:55; } .nav-links.open{display:flex} .nav-toggle{display:inline-flex} } /* =========================== BUTTONS =========================== */ .btn{ display:inline-flex;align-items:center;gap:.5rem; font-family:var(--font-sans);font-weight:600;font-size:.95rem; padding:.75rem 1.3rem;border-radius:8px;border:1px solid transparent; cursor:pointer;transition:.18s ease;text-decoration:none;line-height:1; } .btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow)} .btn-primary:hover{background:var(--accent-2);color:#fff;text-decoration:none} .btn-outline{background:transparent;color:var(--accent);border-color:var(--accent)} .btn-outline:hover{background:var(--accent);color:#fff;text-decoration:none} .btn-ghost{background:transparent;color:var(--heading);border-color:var(--line)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent);text-decoration:none} /* Ghost buttons living on dark backgrounds (hero and cta-band) need visible-on-dark colors. Default ghost is black text for light sections; on dark, promote to accent-2 (orange) with white on hover. */ .hero .btn-ghost, .cta-band .btn-ghost{ color:var(--accent-2); border-color:rgba(255,255,255,.28); } .hero .btn-ghost:hover, .cta-band .btn-ghost:hover{ color:#fff; border-color:var(--accent-2); background:rgba(232,149,74,.14); text-decoration:none; } .btn-dark{background:var(--shell);color:#fff} .btn-lg{padding:.9rem 1.6rem;font-size:1rem} .cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem} /* =========================== HERO =========================== */ .hero{ position:relative;overflow:hidden; background:linear-gradient(135deg,var(--shell) 0%,var(--shell-2) 65%,#000 110%); color:#E6EDF5; padding:3.5rem 0 4.5rem; border-bottom:1px solid var(--line); } .hero .container{position:relative;z-index:2} .hero h1{color:#fff;margin-bottom:1rem} .hero p.lead{color:rgba(232,238,246,.86);font-size:1.15rem;max-width:60ch;margin-bottom:0} .hero .eyebrow{color:var(--accent-2)} /* Hero banner - centered logo + WhereToTurn? wordmark, same visual height */ .hero-banner{ display:flex;align-items:center;justify-content:center; gap:clamp(.8rem,1.6vw,1.4rem); margin-bottom:3rem; filter:drop-shadow(0 18px 38px rgba(0,0,0,.5)); } .hero-banner .hb-logo{ /* Logo:wordmark ratio matches header (~2:1) - scaled up for hero */ height:clamp(5.6rem,13vw,10rem); width:auto;display:block; } .hero-banner .hb-wordmark{ font-family:var(--font-serif);font-weight:600; font-size:clamp(2.8rem,6.5vw,5rem); color:#fff;line-height:1;letter-spacing:-.025em; display:inline-flex;align-items:baseline;gap:.02em; white-space:nowrap; } .hero-banner .hb-wordmark .to{color:var(--accent-2);font-weight:700} .hero-banner .hb-wordmark .period{color:var(--accent-2);font-weight:700} .hero-banner .hb-wordmark .hb-q{ display:inline-flex;align-items:flex-end; height:1em;width:.5em; margin-left:.02em; position:relative; } .hero-banner .hb-wordmark .hb-q svg{ width:100%;height:auto;display:block;color:#fff; position:absolute;left:0;bottom:0; } /* Hero content block beneath the banner */ .hero-body{text-align:center;max-width:680px;margin-inline:auto} .hero-body .lead{margin-inline:auto} .hero-body .cta-row{justify-content:center} .hero-body .pills{justify-content:center} @media(max-width:680px){ .hero{padding:2.5rem 0 3.5rem} .hero-banner{flex-direction:column;gap:.6rem;margin-bottom:2rem} .hero-banner .hb-logo{height:clamp(4.8rem,20vw,6.8rem)} .hero-banner .hb-wordmark{font-size:clamp(2.4rem,10vw,3.4rem)} } .grid-bg{ position:absolute;inset:0;z-index:1;pointer-events:none; background-image: radial-gradient(80% 60% at 100% 0%, rgba(255,255,255,.04), transparent 60%), linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:auto,32px 32px,32px 32px; opacity:.55; } .eyebrow{ display:inline-block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase; font-weight:700;color:var(--slate);margin-bottom:.6rem; } .lead{font-size:1.08rem;color:var(--text);max-width:62ch} .pills{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.2rem;align-items:center;justify-content:center} .pill{ display:inline-flex;align-items:center;gap:.4rem; font-size:.78rem;font-weight:600;padding:.4rem .8rem;border-radius:999px; background:var(--accent-soft);color:var(--accent);border:1px solid transparent; text-decoration:none; } .pill.ghost{ background:transparent;color:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.2); } /* Non-anchor pills (statements, not links) never look interactive on hover. */ span.pill:hover,span.pill.ghost:hover{cursor:default;text-decoration:none} /* Anchor pills (nav pills on resources.html) get a subtle color shift instead of an underline. */ a.pill:hover{text-decoration:none;background:var(--accent);color:#fff;border-color:var(--accent)} a.pill.ghost:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.4)} /* =========================== BLOCKS =========================== */ section.block{padding:4rem 0;background:var(--bg)} section.block.alt{background:var(--alt)} .section-head{max-width:60ch;margin-inline:auto;text-align:center;margin-bottom:2.4rem} .section-head p{font-size:1.05rem;color:var(--text)} /* =========================== CARDS =========================== */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem} .card{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg); padding:1.6rem;box-shadow:var(--shadow);position:relative; transition:.2s ease; display:flex;flex-direction:column; } /* Hover lift only on cards that contain a link (i.e. genuinely clickable/actionable cards). Cards that are pure statements (Problem, Outcomes, "What You Receive") stay static. */ .card:has(a):hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--accent-2)} /* Subtle chevron in the top-right of linked cards, hinting at the action inside */ .card:has(a)::after{ content:'';position:absolute;top:1.1rem;right:1.1rem; width:10px;height:10px; border-top:2px solid var(--accent);border-right:2px solid var(--accent); transform:rotate(45deg);opacity:.28; transition:.2s ease;pointer-events:none; } .card:has(a):hover::after{opacity:1;transform:rotate(45deg) translate(2px,-2px)} .card.featured{border:2px solid var(--accent);background:linear-gradient(180deg,var(--accent-soft) 0%,var(--card) 60%)} .card .ic{ width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent); display:inline-flex;align-items:center;justify-content:center;margin-bottom:.9rem; flex-shrink:0;border:1px solid rgba(210,106,31,.15); } .card .ic svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round} .card-actions{margin:1rem 0 0;margin-top:auto !important;padding-top:1rem;display:flex;gap:.5rem;flex-wrap:wrap} /* Inline SVG icons that sit inside an H3 (Resources page cards, etc.) need explicit sizing so they don't render at the default 300x150 with default black fill. */ h3 > svg{ width:18px;height:18px;flex-shrink:0; display:inline-block;vertical-align:-.18em;margin-right:.55rem; stroke:var(--accent);stroke-width:2;fill:none; stroke-linecap:round;stroke-linejoin:round; } .card h3{color:var(--heading);margin-bottom:.4rem} .card ul{padding-left:1.1rem;margin:.5rem 0 0;font-size:.92rem;color:var(--text)} .card ul li{margin-bottom:.35rem} .card .price{font-family:var(--font-serif);font-size:2rem;font-weight:800;color:var(--accent);margin:.3rem 0 .8rem} .card .badge{ position:absolute;top:-12px;left:50%;transform:translateX(-50%); background:var(--accent);color:#fff;font-size:.7rem;letter-spacing:.12em;font-weight:700; text-transform:uppercase;padding:.3rem .7rem;border-radius:999px; } .lane-tag{ display:inline-block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700; background:var(--alt);color:var(--slate);padding:.3rem .55rem;border-radius:6px; margin-bottom:.8rem;border:1px solid var(--line); } /* =========================== STEPS =========================== */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin-top:1.6rem} .step{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg); padding:1.5rem;position:relative; } .step .n{ font-family:var(--font-serif);font-size:1.8rem;font-weight:800;color:var(--accent); line-height:1;margin-bottom:.6rem; } .step h3{color:var(--heading);margin-bottom:.4rem;font-size:1.05rem} .step p{font-size:.92rem;color:var(--text);margin:0} /* =========================== CTA BAND =========================== */ .cta-band{ background:linear-gradient(135deg,var(--shell) 0%,var(--shell-2) 100%); color:#fff;border-radius:var(--radius-lg);padding:2.5rem 2rem;text-align:center; border:1px solid var(--line); } .cta-band h2{color:#fff} .cta-band p{color:rgba(255,255,255,.85);max-width:60ch;margin-inline:auto} .cta-band .btn-primary{margin-top:.5rem} /* =========================== FOOTER =========================== */ footer.site{ background:var(--shell);color:rgba(255,255,255,.7); padding:3.5rem 0 2rem;border-top:1px solid var(--line); } footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem} @media(max-width:780px){footer.site .cols{grid-template-columns:1fr;gap:2rem}} footer.site h4{color:#fff;font-family:var(--font-sans);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 .9rem;font-weight:700} footer.site p{margin:.3rem 0;font-size:.9rem} footer.site a{color:rgba(255,255,255,.85)} footer.site a:hover{color:var(--accent-2)} footer.site .fine{ display:flex;justify-content:space-between;align-items:center;gap:1rem; border-top:1px solid rgba(255,255,255,.1);padding-top:1.4rem;font-size:.78rem; color:rgba(255,255,255,.55);flex-wrap:wrap; } footer.site .fine .period{color:var(--accent-2);font-weight:700} footer.site .footer-brand{display:flex;flex-direction:column;gap:.6rem} footer.site .footer-mark{ display:inline-flex;align-items:center;gap:.55rem;text-decoration:none; color:#fff; } footer.site .footer-mark img{height:32px;width:auto;display:block} footer.site .footer-mark .wordmark{ font-family:var(--font-serif);font-weight:600;font-size:1.2rem; color:#fff;letter-spacing:-.3px;line-height:1; } footer.site .footer-mark .wordmark .to{color:var(--accent-2);font-weight:700} footer.site .footer-mark .wordmark .period{color:var(--accent-2);font-weight:700} footer.site .footer-tagline{ font-family:var(--font-serif);font-style:italic;font-size:.98rem; color:rgba(255,255,255,.85);margin:0;max-width:34ch; } footer.site .footer-tagline .period{color:var(--accent-2);font-style:normal;font-weight:700} /* =========================== ASSESSMENT (snapshot/ohc) =========================== */ .assess-wrap{max-width:760px;margin-inline:auto} .hidden{display:none} .progress{ height:6px;background:var(--line);border-radius:999px;overflow:hidden;margin:1.4rem 0 2rem; } .progress i{display:block;height:100%;background:var(--accent);width:0;transition:width .25s ease} .q-card{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg); padding:1.8rem 1.6rem;box-shadow:var(--shadow); } .q-card h3{font-family:var(--font-serif);font-size:1.3rem;margin-bottom:1.2rem} .q-card .opt{ display:flex;align-items:center;gap:.8rem; border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem; margin-bottom:.6rem;cursor:pointer;font-size:.95rem;color:var(--text);background:var(--alt); transition:.15s; } .q-card .opt:hover{border-color:var(--accent);color:var(--accent)} .q-card .opt.selected{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600} .q-card .opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* Radio-circle affordance for quiz options */ .q-card .opt .dot{ display:inline-block;width:16px;height:16px;border-radius:50%; border:2px solid var(--line);background:transparent;flex-shrink:0; position:relative;transition:.15s ease; } .q-card .opt:hover .dot{border-color:var(--accent)} .q-card .opt.selected .dot{border-color:var(--accent);background:var(--accent)} .q-card .opt.selected .dot::after{ content:'';position:absolute;top:50%;left:50%; width:6px;height:6px;background:#fff;border-radius:50%; transform:translate(-50%,-50%); } .q-card .opt-other{margin:.6rem 0 .2rem;padding:.9rem 1rem;border:1px dashed var(--accent);border-radius:10px;background:var(--alt)} .q-card .opt-other label{display:block;font-size:.78rem;font-weight:600;color:var(--ink);margin-bottom:.4rem;letter-spacing:.04em} .q-card .opt-other input{width:100%;padding:.65rem .85rem;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:400 .95rem var(--font-sans);outline:none;transition:.15s} .q-card .opt-other input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(210,106,31,.15)} /* Contact form fields (Services page) - same look as opt-other input */ .q-card .field{margin-bottom:1rem} .q-card .field label{display:block;font-size:.78rem;font-weight:600;color:var(--ink);margin-bottom:.4rem;letter-spacing:.04em;text-transform:uppercase} .q-card .field input[type="text"], .q-card .field input[type="email"], .q-card .field textarea{ width:100%;padding:.75rem 1rem;border-radius:8px; background:var(--card);border:1px solid var(--line);color:var(--ink); font:400 1rem var(--font-sans);outline:none;transition:.15s; } .q-card .field textarea{resize:vertical;min-height:6em;line-height:1.5;font-family:var(--font-sans)} .q-card .field input:focus, .q-card .field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(210,106,31,.15)} .q-actions{display:flex;justify-content:space-between;gap:.6rem;margin-top:1rem} .score-hero{ background:linear-gradient(135deg,var(--shell) 0%,var(--shell-2) 100%); color:#fff;border-radius:var(--radius-lg);padding:2rem;text-align:center; } .score-hero .score-label{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.65);font-weight:700} .score-hero .score-num{ font-family:var(--font-serif);font-size:clamp(3rem,7vw,4.5rem);font-weight:800; color:#fff;margin-top:.5rem;line-height:1; } .bars{margin-top:2rem;display:flex;flex-direction:column;gap:1rem} .bar h4{display:flex;justify-content:space-between;margin:0 0 .4rem;font-family:var(--font-sans);font-size:.88rem;font-weight:600;color:var(--text)} .bar .track{height:8px;background:var(--line);border-radius:999px;overflow:hidden} .bar .fill{display:block;height:100%;background:var(--accent);transition:width .4s ease} /* legacy bar fills used in snapshot/ohc inline styles still work via aliases */ .bar .fill[style*="--blue"],.bar .fill[style*="var(--blue)"]{background:var(--primary)} .bar .fill[style*="--cyan"],.bar .fill[style*="var(--cyan)"]{background:var(--accent-2)} .bar .fill[style*="--green"],.bar .fill[style*="var(--green)"]{background:var(--good)} /* =========================== ABOUT - founder block =========================== */ .founder{display:grid;grid-template-columns:140px 1fr;gap:1.6rem;align-items:flex-start} @media(max-width:640px){.founder{grid-template-columns:1fr;text-align:left}} .founder .avatar{ width:140px;height:140px;border-radius:50%; background:linear-gradient(135deg,var(--primary) 0%,var(--primary-deep) 100%); color:#fff;font-family:var(--font-serif);font-size:2.6rem;font-weight:700;letter-spacing:-.04em; display:flex;align-items:center;justify-content:center; box-shadow:var(--shadow);overflow:hidden; } .founder .avatar img{width:100%;height:100%;object-fit:cover} .founder .role{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700;display:block;margin-bottom:.7rem} .cred-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem} .cred{ font-size:.75rem;font-weight:600;background:var(--alt);color:var(--text); border:1px solid var(--line);padding:.35rem .65rem;border-radius:6px; } /* =========================== BOOKSHELF (Resources page) =========================== */ .books{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin-top:1.8rem} .book{ background:var(--shell); border:1px solid rgba(255,255,255,.06); border-left:4px solid var(--accent); border-radius:0 12px 12px 0; padding:1.4rem 1.5rem 1.5rem; color:rgba(255,255,255,.82); display:flex;flex-direction:column;gap:.55rem; transition:.2s ease; } .book:hover{transform:translateY(-2px);border-left-color:var(--accent-2)} .book h3{ font-family:var(--font-serif);font-weight:700;font-size:1.05rem; color:#fff;line-height:1.25;margin:0; } .book .by{ display:block;font-size:.7rem;font-weight:700;color:var(--accent-2); letter-spacing:.18em;text-transform:uppercase;margin:0; } .book p{ font-size:.88rem;color:rgba(255,255,255,.74); margin:0;line-height:1.55; } /* =========================== DARK SECTION (newsletter, etc.) =========================== */ section.block.dark{background:var(--shell);color:rgba(255,255,255,.82)} section.block.dark .section-head h2, section.block.dark h2, section.block.dark h3{color:#fff} section.block.dark .section-head p, section.block.dark p{color:rgba(255,255,255,.78)} section.block.dark .eyebrow{color:var(--accent-2)} section.block.dark .q-card{ background:var(--shell-2); border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.85); box-shadow:0 8px 24px rgba(0,0,0,.25); } section.block.dark .q-card label{color:#fff;font-weight:600;display:block;font-size:.82rem;letter-spacing:.04em;margin-bottom:.4rem} section.block.dark .q-card .field{margin-bottom:1rem} section.block.dark .q-card input[type="email"], section.block.dark .q-card input[type="text"]{ width:100%;padding:.75rem 1rem;border-radius:8px; background:var(--shell); border:1px solid var(--accent); color:#fff;font:400 1rem var(--font-sans); outline:none;transition:.15s; } section.block.dark .q-card input[type="email"]::placeholder, section.block.dark .q-card input[type="text"]::placeholder{color:rgba(255,255,255,.4)} section.block.dark .q-card input:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(232,149,74,.18)} /* =========================== RESOURCES page - Guide accordion, Library grid, Insight callouts =========================== */ /* Guide accordion (details/summary items in the Field Guides section) */ .guide-list{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:.9rem} details.guide{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg); box-shadow:var(--shadow);padding:1.2rem 1.6rem;transition:.2s ease; } details.guide[open]{border-color:var(--accent-2);box-shadow:var(--shadow-lg)} details.guide summary{ cursor:pointer;list-style:none; display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap; } details.guide summary::-webkit-details-marker{display:none} details.guide summary::after{ content:'+';margin-left:auto; font-family:var(--font-serif);font-size:1.6rem;font-weight:400; color:var(--accent);line-height:1;transition:.15s; } details.guide[open] summary::after{content:'−'} details.guide summary h3{ display:inline;margin:0;line-height:1.35; font-family:var(--font-serif);font-size:1.15rem;font-weight:600;color:var(--heading); } .g-cat{ display:inline-block;flex-shrink:0; font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700; background:var(--accent-soft);color:var(--accent); padding:.25rem .55rem;border-radius:6px;border:1px solid rgba(210,106,31,.15); } .g-body{margin-top:1.1rem;padding-top:1.1rem;border-top:1px dashed var(--line)} .g-body p{font-size:1rem;line-height:1.65;color:var(--text);margin:0 0 .9rem} .g-body p:last-child{margin-bottom:0} .g-next{ margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line); font-size:.92rem;color:var(--slate); } .g-next a{color:var(--accent);font-weight:600} /* Library grid (Law & Compliance, Help & Resources) */ .lib-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.4rem;margin-top:.4rem; } .lib-group{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg); padding:1.4rem 1.6rem;box-shadow:var(--shadow); } .lib-group h3{ display:flex;align-items:center;gap:.55rem;line-height:1.3; font-family:var(--font-serif);font-size:1.1rem;font-weight:700;color:var(--heading); margin:0 0 .9rem; } .lib-group h3 svg{ width:18px;height:18px;flex-shrink:0; stroke:var(--accent);stroke-width:2;fill:none; stroke-linecap:round;stroke-linejoin:round; } .lib-group ul{list-style:none;padding:0;margin:0} .lib-group li{ padding:.6rem 0;border-top:1px dashed var(--line); font-size:.95rem;line-height:1.5; } .lib-group li:first-child{border-top:0;padding-top:0} .lib-group li a{color:var(--accent);font-weight:600;display:block;margin-bottom:.15rem} .lib-group li .what{ display:block;font-size:.85rem;color:var(--slate); font-weight:400;line-height:1.5; } .lib-note{ max-width:60ch;margin:1.6rem auto 0;text-align:center; font-size:.88rem;color:var(--slate);font-style:italic; } /* =========================== ABOUT page - social link, testimonials =========================== */ .social-row{display:flex;gap:.6rem;flex-wrap:wrap} .social-link{ display:inline-flex;align-items:center;gap:.5rem; padding:.5rem .9rem;border-radius:999px; background:var(--alt);border:1px solid var(--line); color:var(--heading);font-weight:600;font-size:.88rem; text-decoration:none;transition:.15s ease; } .social-link:hover{border-color:var(--accent);color:var(--accent);text-decoration:none} .social-link svg{width:16px;height:16px;fill:currentColor;flex-shrink:0} /* Testimoni