/* Homepage — six-section landing (feel-redesign blueprint §5), ported from design/prototypes/redesign/ (hero-options.html B, quiz-demo.html, offerings-trio-v2.html, clientele-section.html, landing-moments.html), rewired to --gsh- tokens. Globals (reset, type, .container, .section, .btn, .band--dark, header, footer, paper grain, patterns, certificate, reduced-motion baseline) live in tokens.css + base.css. */ /* ===== 1 · video hero ===== */ /* The sticky glass header is transparent at the top (.is-top, theme.js); pull the hero up underneath it so the video sits behind the glass (68px bar + 1px hairline). */ .vhero { position: relative; min-height: 88vh; margin-top: -69px; display: flex; align-items: flex-end; overflow: hidden; background: var(--gsh-sand); } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* top scrim: the transparent .is-top header sits on bright video frames — keep the sage GLOBAL wordmark + Sign in legible whatever the footage does (above video, below copy) */ .vhero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 120px; background: linear-gradient(to bottom, rgba(47, 58, 40, .35), transparent); z-index: 1; pointer-events: none; } /* top padding reserves the 68px glass bar + breathing room, so the panel can never ride up under the header logo on short viewports (the hero is pulled -69px under it) */ .vhero__wrap { padding-block: calc(69px + clamp(1.2rem, 3vw, 2.2rem)) clamp(1.4rem, 4vw, 3rem); } .vhero__panel { max-width: 640px; background: rgba(250, 246, 238, .94); border-radius: 16px; padding: clamp(1.5rem, 3.2vw, 2.4rem); } .vhero__panel h1 { font-size: clamp(2.05rem, 1.35rem + 2.5vw, 3.1rem); } .vhero__sub { margin-top: .8rem; color: var(--gsh-ink); font-size: 1.02rem; max-width: 54ch; } .vhero__cta { display: flex; gap: .8rem; margin-top: 1.3rem; flex-wrap: wrap; } .vhero__chips { display: flex; gap: .5rem; flex-wrap: wrap; list-style: none; margin: 1.2rem 0 0; padding: 0; } .vhero__chips li { background: #fff; border: 1px solid var(--gsh-sand); border-radius: var(--gsh-r-pill); font-size: var(--gsh-text-floor); color: var(--gsh-ink); padding: .3rem .75rem; } /* home sections run a slightly tighter vertical rhythm than the global --gsh-section-y (eight stacked moments; editorial-cut height target ~50-60% of the old page) */ .quiz-sec, .trio-sec, .home-who, .clientele, .certband, .hclose { padding-block: clamp(2.6rem, 4vw + .8rem, 4.6rem); } /* ===== 2 · problem banner — argues, never counts (no stats by claims rule) ===== */ .home-problem { padding-block: clamp(2.4rem, 5vw, 4rem); border-bottom: 1px solid var(--gsh-sand); } .home-problem__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; } .home-problem__h { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); max-width: 22ch; } .home-problem__h em { font-style: italic; color: var(--gsh-clay-btn); } /* A11Y-3: AA-safe clay on cream */ .home-problem__fails { list-style: none; margin: 0; padding: 0; } .home-problem__fails li { padding: .65rem 0; border-top: 1px solid var(--gsh-sand); font-size: .95rem; color: var(--gsh-ink); line-height: 1.55; } .home-problem__fails li:last-child { border-bottom: 1px solid var(--gsh-sand); } .home-problem__fails b { color: var(--gsh-forest); font-weight: 600; } .home-problem__turn { margin-top: .9rem; font-family: var(--gsh-font-display); font-weight: 500; font-size: 1.02rem; color: var(--gsh-sage-700); } .home-problem__turn a { color: var(--gsh-clay-deep); text-decoration: none; font-weight: 700; padding-inline: .15rem; } /* A11Y-3: clay-btn was 4.35:1 on cream */ .home-problem__turn a:hover, .home-problem__turn a:focus-visible { text-decoration: underline; } /* ===== 4 · who we are — identity beat; arch still-life echoes the About band ===== */ .home-who__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; } .home-who__k { font-size: var(--gsh-text-floor); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gsh-sage-700); margin-bottom: .6rem; } .home-who__h { font-family: var(--gsh-font-display); font-weight: 500; font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem); color: var(--gsh-forest); line-height: 1.3; max-width: 30ch; } .home-who__h em { font-style: italic; color: var(--gsh-clay-deep); } /* A11Y-3: AA-safe clay text on cream */ .home-who__body { margin-top: .9rem; color: var(--gsh-muted); font-size: .95rem; line-height: 1.6; max-width: 52ch; } .home-who__more { margin-top: .9rem; } .home-who__more a { color: var(--gsh-clay-deep); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; } /* A11Y-3/1.4.1: AA contrast + non-colour cue */ .home-who__more a:hover, .home-who__more a:focus-visible { text-decoration: underline; } .home-who__media { width: 100%; max-width: 340px; aspect-ratio: 10 / 11; justify-self: end; border-radius: var(--gsh-r-arch); box-shadow: var(--gsh-shadow-md); background-image: url(../img/about-care.webp), linear-gradient(165deg, var(--gsh-blush), var(--gsh-sage-2) 70%, var(--gsh-sage)); background-size: cover; background-position: center; } /* ===== 2 · quiz ===== */ /* Ported VERBATIM from design/prototypes/redesign/quiz-demo.html (@import stripped; .cta/.ghost2 gain text-decoration:none because the end-state CTAs are real anchors). */ .quiz-sec { position: relative; } #gshq { max-width:560px; margin:0 auto; background:#FDFDF1; border:1.5px solid #E7DFD0; border-radius:20px; padding:26px; font-family:'Hanken Grotesk',sans-serif; position:relative; overflow:hidden; } #gshq .kick { font-family:'Fredoka',sans-serif; font-weight:600; font-size:13px; color:#A8623F; margin-bottom:10px; } #gshq .dots { display:flex; gap:6px; margin-bottom:16px; } #gshq .dot { height:6px; flex:1; border-radius:999px; background:#E7DFD0; transition:background .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1); } #gshq .dot.on { background:#7E8C6A; } #gshq .dot.bad { background:#C77B53; } #gshq .q { font-family:'Fredoka',sans-serif; font-weight:600; font-size:19px; color:#2F3A28; line-height:1.3; margin-bottom:14px; min-height:50px; animation:gshq-in .45s cubic-bezier(.22,1,.36,1); } #gshq .ans { display:flex; flex-direction:column; gap:8px; } #gshq .a { text-align:left; background:#fff; border:1.5px solid #E7DFD0; border-radius:14px; padding:11px 14px; font-size:13.5px; color:#2F3A28; cursor:pointer; transition:transform .25s cubic-bezier(.22,1,.36,1), background .3s, border-color .3s; } #gshq .a:hover { transform:translateX(4px); border-color:#9AA886; } #gshq .a.good { background:#EEF0E4; border-color:#7E8C6A; } #gshq .a.bad { background:#F6E8DC; border-color:#C77B53; animation:gshq-shake .4s cubic-bezier(.36,.07,.19,.97); } #gshq .why { background:#EEF0E4; border-radius:12px; padding:11px 13px; font-size:12.5px; color:#39442B; line-height:1.55; margin-top:10px; animation:gshq-in .4s cubic-bezier(.22,1,.36,1); } #gshq .next { margin-top:12px; background:#A8623F; color:#fff; border:none; border-radius:999px; padding:9px 20px; font-size:13px; font-weight:600; cursor:pointer; } #gshq .end { text-align:center; animation:gshq-in .5s cubic-bezier(.22,1,.36,1); } #gshq .ring { position:relative; width:120px; height:120px; margin:6px auto 10px; } #gshq .ring svg { transform:rotate(-90deg); } #gshq .ring .val { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Fredoka',sans-serif; font-weight:700; font-size:30px; color:#2F3A28; } #gshq .stamp { display:inline-block; font-family:'Fredoka',sans-serif; font-weight:700; letter-spacing:.06em; font-size:15px; padding:7px 18px; border:2.5px solid; border-radius:10px; transform:rotate(-6deg) scale(2.4); opacity:0; } /* state class is `is-on`, not the prototype's `show`: MasterStudy bundles Bootstrap 3, whose global `.show { display:block!important }` stretched the stamp full-width */ #gshq .stamp.is-on { animation:gshq-stamp .5s cubic-bezier(.19,1,.22,1) forwards; } #gshq .stamp.pass { color:#586547; border-color:#586547; } #gshq .stamp.gap { color:#A8623F; border-color:#A8623F; } #gshq .endline { font-size:13px; color:#39442B; line-height:1.6; max-width:40ch; margin:12px auto; } #gshq .cta { display:inline-block; background:#A8623F; color:#fff; border-radius:999px; padding:10px 22px; font-size:13px; font-weight:600; margin:0 5px; cursor:pointer; text-decoration:none; } #gshq .ghost2 { display:inline-block; border:1.5px solid #7E8C6A; color:#2F3A28; border-radius:999px; padding:10px 22px; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; } #gshq .conf { position:absolute; width:8px; height:12px; top:-14px; border-radius:2px; animation:gshq-fall 1.5s cubic-bezier(.45,0,.7,1) forwards; } @keyframes gshq-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } } @keyframes gshq-shake { 10%,90% {transform:translateX(-2px)} 20%,80% {transform:translateX(3px)} 30%,70% {transform:translateX(-5px)} 50% {transform:translateX(4px)} } @keyframes gshq-stamp { to { transform:rotate(-6deg) scale(1); opacity:1; } } @keyframes gshq-fall { to { transform:translateY(420px) rotate(540deg); opacity:.1; } } @media (prefers-reduced-motion: reduce) { #gshq * { animation:none !important; transition:none !important; } #gshq .stamp { transform:rotate(-6deg) scale(1); opacity:1; } } /* no-JS fallback (one static question inside