/* ============================================================ VOICELY — AI Receptionist for Allied Health Redesign 2 · "Clinic Ivory": light · editorial · trustworthy ============================================================ */ :root { --bg: #f6f3ec; /* warm ivory */ --bg-soft: #ece5d7; /* slightly deeper band */ --surface: #fffdf8; /* cards — lift off the ivory */ --surface-2: #ffffff; /* elevated card / hover */ --line: rgba(26, 43, 41, 0.14); --line-strong: rgba(26, 43, 41, 0.24); --text: #1a2b29; /* deep ink-green */ --muted: #5f6f6a; --accent: #1f7a5c; /* forest green */ --accent-soft: #27946f; --accent-deep: #155c44; --accent-dim: rgba(31, 122, 92, 0.10); --accent-ink: #f6f3ec; /* text on a green fill */ --shadow-sm: 0 1px 2px rgba(26, 43, 41, 0.05); --shadow-md: 0 18px 44px -30px rgba(26, 43, 41, 0.45); --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--bg); } html.lenis { height: auto; scroll-behavior: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { /* transparent so the fixed z-index:-1 orb canvas shows through; the page colour lives on instead. */ background: transparent; color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ============ VOICE ORB (fixed, full-viewport, behind content) ============ */ .orb-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } ::selection { background: var(--accent); color: var(--accent-ink); } img, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--font-display); font-weight: 560; line-height: 1.06; letter-spacing: -0.005em; font-optical-sizing: auto; } .accent { color: var(--accent); } em, .em-italic { font-style: italic; } /* ============ PRELOADER ============ */ .preloader { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: flex; align-items: center; justify-content: center; } .preloader__inner { text-align: center; } .preloader__brand { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 6vw, 3.6rem); letter-spacing: 0.3em; display: inline-block; overflow: hidden; color: var(--text); } .preloader__letter { display: inline-block; transform: translateY(110%); } .preloader__bar { width: min(240px, 60vw); height: 2px; margin: 28px auto 0; background: var(--line); border-radius: 2px; overflow: hidden; } .preloader__bar-fill { width: 0%; height: 100%; background: var(--accent); } /* ============ NAV ============ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(20px, 4vw, 56px); transition: background 0.4s, backdrop-filter 0.4s, padding 0.4s, border-color 0.4s; border-bottom: 1px solid transparent; } .nav.is-scrolled { background: rgba(246, 243, 236, 0.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding-top: 14px; padding-bottom: 14px; border-bottom-color: var(--line); } .nav__logo { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.22em; font-size: 1rem; display: flex; align-items: center; gap: 11px; } .nav__logo-mark { display: flex; align-items: flex-end; gap: 2.5px; height: 16px; } .nav__logo-mark span { width: 3px; background: var(--accent); border-radius: 2px; animation: eq 1.1s ease-in-out infinite alternate; } .nav__logo-mark span:nth-child(1) { height: 40%; animation-delay: 0s; } .nav__logo-mark span:nth-child(2) { height: 100%; animation-delay: 0.15s; } .nav__logo-mark span:nth-child(3) { height: 60%; animation-delay: 0.3s; } .nav__logo-mark span:nth-child(4) { height: 85%; animation-delay: 0.45s; } @keyframes eq { from { transform: scaleY(0.4); } to { transform: scaleY(1); } } .nav__links { display: flex; gap: clamp(18px, 2.5vw, 36px); } .nav__links a { font-size: 0.9rem; color: var(--muted); position: relative; transition: color 0.3s; } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease-out); } .nav__links a:hover { color: var(--text); } .nav__links a:hover::after { transform: scaleX(1); transform-origin: left; } /* nav CTA reads as a solid, confident action */ .nav .btn--small { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; } .nav .btn--small:hover { background: var(--accent-soft); border-color: var(--accent-soft); } .nav__burger { display: none; background: none; border: 0; cursor: pointer; width: 40px; height: 40px; position: relative; z-index: 110; } .nav__burger span { position: absolute; left: 8px; right: 8px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.35s var(--ease-out), top 0.35s var(--ease-out); } .nav__burger span:nth-child(1) { top: 15px; } .nav__burger span:nth-child(2) { top: 23px; } .nav__burger.is-open span:nth-child(1) { top: 19px; transform: rotate(45deg); } .nav__burger.is-open span:nth-child(2) { top: 19px; transform: rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: 99; background: rgba(246, 243, 236, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s; } .mobile-menu.is-open { opacity: 1; pointer-events: auto; } .mobile-menu nav { display: flex; flex-direction: column; gap: 8px; text-align: center; } .mobile-menu a { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 7vw, 2.4rem); padding: 6px 0; color: var(--text); transition: color 0.3s; } .mobile-menu a:hover { color: var(--accent); } .mobile-menu__cta { color: var(--accent) !important; } /* ============ BUTTONS ============ */ /* One unified button: same shape, size and weight everywhere — only the colour (--primary / --ghost) and the label change between buttons. */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; padding: 10px 26px; border-radius: 99px; border: 1px solid var(--line-strong); transition: background 0.35s, color 0.35s, border-color 0.35s, transform 0.2s; will-change: transform; cursor: pointer; } .btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .btn--primary:hover { background: var(--accent-soft); border-color: var(--accent-soft); } .btn--ghost { color: var(--text); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } /* size aliases kept so existing markup works — they no longer change the size, so every button is the same height */ .btn--small, .btn--big { padding: 10px 26px; font-size: 0.92rem; } .btn__arrow { transition: transform 0.3s var(--ease-out); } .btn:hover .btn__arrow { transform: translateX(5px); } /* ============ HERO ============ */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: clamp(110px, 14vh, 160px) clamp(20px, 4vw, 56px) 100px; overflow: hidden; } .hero__gradient { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 72% 42%, transparent 28%, var(--bg) 100%), linear-gradient(to bottom, rgba(246,243,236,0.35), transparent 28%, transparent 68%, var(--bg) 100%); } .hero__content { position: relative; z-index: 2; max-width: 1100px; } /* Invisible anchor for the travelling orb. Sized/placed to reproduce the orb's original hero placement (uv offset 0.62/0.05, scale 0.8): 80vmin square, right of centre. The orb centres on its live rect, so it now rides with the hero on scroll — the same live-rect anchoring used in How it works. */ .hero__orb-slot { position: absolute; pointer-events: none; width: 80vmin; height: 80vmin; left: 50%; top: 50%; transform: translate(calc(-50% + 31vmin + 30px), calc(-50% - 2.5vmin)); } .hero__eyebrow { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; font-weight: 500; } .dot-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(31, 122, 92, 0.6); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 122, 92, 0.55); } 70% { box-shadow: 0 0 0 14px rgba(31, 122, 92, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 122, 92, 0); } } .hero__title { font-size: clamp(2.8rem, 8.6vw, 7.4rem); font-weight: 560; letter-spacing: -0.01em; line-height: 1.02; } .hero__title em { font-style: italic; color: var(--accent); font-weight: 500; } .hero__title-line { display: block; overflow: hidden; } .hero__title-line > .line-inner { display: block; } .hero__sub { margin-top: 26px; max-width: 540px; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.65; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; } .hero__trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; } .hero__trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); letter-spacing: 0.01em; } .hero__trust-tick { display: inline-flex; width: 18px; height: 18px; color: var(--accent); } .hero__trust-tick svg { width: 100%; height: 100%; } .hero__scroll { position: absolute; right: clamp(20px, 4vw, 56px); bottom: 92px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .hero__scroll-line { width: 1px; height: 56px; background: var(--line); position: relative; overflow: hidden; } .hero__scroll-line::after { content: ""; position: absolute; left: 0; top: -50%; width: 100%; height: 50%; background: var(--accent); animation: scrollHint 1.8s var(--ease-out) infinite; } @keyframes scrollHint { to { top: 110%; } } /* ============ LIVE DEMO STAGE (hero → centred orb) ============ */ .hero__content { transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out); } .hero__scroll, .marquee { transition: opacity 0.5s var(--ease-out); } body.is-demo .hero__content { opacity: 0; transform: translateX(-9vw); pointer-events: none; } body.is-demo .hero__scroll, body.is-demo .marquee { opacity: 0; pointer-events: none; } /* Launch the demo from the CTA as seamlessly as from the hero: the page is frozen in place (see main.js) and the CTA copy fades/slides out and back with the SAME timing & easing as the hero copy, so the transition both into the demo and back out matches the hero exactly. */ .cta__title, .cta__sub, .cta__actions, .cta__pricing, .cta__phone { transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out); } .cta__rings { transition: opacity 0.7s var(--ease-out); } body.is-demo .cta__title, body.is-demo .cta__sub, body.is-demo .cta__actions, body.is-demo .cta__pricing, body.is-demo .cta__phone { opacity: 0; transform: translateX(-9vw); pointer-events: none; } body.is-demo .cta__rings { opacity: 0; pointer-events: none; } body.is-demo .nav { opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease-out); } /* Full-viewport stage backdrop so the demo is a clean takeover no matter which section (hero, CTA) or scroll position it launched from — fixes the mobile CTA case where the panel otherwise just appears amid the page. The orb is lifted above this backdrop; the demo panel/close sit above the orb. */ body::before { content: ""; position: fixed; inset: 0; z-index: 110; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 0.6s var(--ease-out); } body.is-demo::before { opacity: 1; } body.is-demo .orb-canvas { z-index: 115; } .demo { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 clamp(20px, 4vw, 56px) clamp(56px, 13vh, 140px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.6s var(--ease-out), visibility 0s linear 0.6s; } body.is-demo .demo { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.6s var(--ease-out); } .demo__panel { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; opacity: 0; transform: translateX(9vw); transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out); } body.is-demo .demo__panel { opacity: 1; transform: translateX(0); } .demo__status { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.1rem, 2.4vw, 1.7rem); letter-spacing: -0.01em; color: var(--text); min-height: 1.4em; } .demo__talk { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; padding: 10px 26px; border-radius: 99px; border: none; cursor: pointer; background: var(--accent); color: var(--accent-ink); transition: transform 0.3s var(--ease-out); } .demo__talk::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-ink); opacity: 0.5; } .demo__talk:hover { transform: translateY(-2px); } .demo__talk.is-active { animation: demoPulse 1.4s var(--ease-out) infinite; } @keyframes demoPulse { 0% { box-shadow: 0 0 0 0 rgba(31, 122, 92, 0.5); } 70% { box-shadow: 0 0 0 20px rgba(31, 122, 92, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 122, 92, 0); } } .demo__hint { font-size: 0.82rem; letter-spacing: 0.04em; color: var(--muted); } .demo__close { position: fixed; z-index: 121; top: clamp(18px, 3vw, 30px); right: clamp(18px, 4vw, 40px); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(26, 43, 41, 0.06); border: 1px solid var(--line); color: var(--text); font-size: 1.05rem; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease-out) 0.2s, background 0.3s, transform 0.3s; } body.is-demo .demo__close { opacity: 1; pointer-events: auto; } .demo__close:hover { background: rgba(26, 43, 41, 0.12); transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .hero__content, .hero__scroll, .demo, .demo__panel, .demo__close, body.is-demo .nav { transition-duration: 0.001s !important; } .demo__panel, body.is-demo .demo__panel { transform: none; } .demo__talk.is-active { animation: none; } } /* ============ MARQUEE ============ */ .marquee { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; overflow: hidden; background: var(--bg-soft); } .marquee__track { display: flex; align-items: center; width: max-content; } .marquee__track span { font-family: var(--font-display); font-weight: 500; font-size: clamp(1rem, 2vw, 1.4rem); white-space: nowrap; letter-spacing: 0.01em; color: var(--text); } .marquee__track span, .marquee__track i { margin-right: 34px; } .marquee__track i { color: var(--accent); font-style: normal; font-size: 0.72rem; opacity: 0.85; } /* ============ SECTION HEADS ============ */ .section-head { margin-bottom: clamp(30px, 7vw, 80px); } .section-head--center { text-align: center; } .section-head__eyebrow { font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; font-weight: 600; } .section-head__eyebrow::before { content: "/ "; opacity: 0.6; } .section-head--center .section-head__eyebrow { display: inline-block; } .section-head__title { font-size: clamp(1.8rem, 5vw, 3.9rem); } .section-head__title em { color: var(--accent); } /* ============ PROOF STATS ============ */ .stats { border-top: 1px solid var(--line); background: var(--bg-soft); padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 56px); } .stats__lead { text-align: center; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: clamp(28px, 4vw, 44px); font-weight: 500; } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 36px); max-width: 1100px; margin: 0 auto; } .stat { text-align: center; position: relative; } .stat + .stat::before { content: ""; position: absolute; left: calc(-1 * clamp(10px, 1.5vw, 18px)); top: 12%; height: 76%; width: 1px; background: var(--line); } .stat__value { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.6rem); color: var(--accent); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .stat__label { color: var(--muted); font-size: 0.9rem; margin-top: 12px; } /* ============ FEATURES ============ */ .features { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(56px, 10vw, 140px) clamp(20px, 4vw, 56px); } /* ---- Capabilities — centred cards with a masked grid decorator (adapted from a shadcn "features-1" block) ---- */ .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 24px); max-width: 1180px; margin: 0 auto; } .cap-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(20px, 2.2vw, 32px) clamp(20px, 2vw, 32px) clamp(28px, 2.6vw, 40px); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm), var(--shadow-md); transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out); } .cap-card:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: var(--shadow-sm), 0 30px 56px -30px rgba(26, 43, 41, 0.5); } /* the decorator: a square of fine grid, radially masked so it fades to nothing at the edges, with a small bordered tile floating dead-centre */ .cap-card__decorator { position: relative; width: 144px; height: 144px; margin: 0 auto; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%); } .cap-card__grid { position: absolute; inset: 0; opacity: 0.16; background-image: linear-gradient(to right, rgba(26, 43, 41, 1) 1px, transparent 1px), linear-gradient(to bottom, rgba(26, 43, 41, 1) 1px, transparent 1px); background-size: 24px 24px; } .cap-card__icon { position: absolute; inset: 0; margin: auto; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--surface); border-top: 1px solid rgba(26, 43, 41, 0.42); border-left: 1px solid rgba(26, 43, 41, 0.42); color: var(--accent); transition: color 0.4s var(--ease-out); } .cap-card:hover .cap-card__icon { color: var(--accent-soft); } .cap-card__icon svg { width: 24px; height: 24px; } .cap-card__title { font-size: clamp(1.12rem, 1.4vw, 1.3rem); line-height: 1.25; letter-spacing: -0.01em; margin: 4px 0 12px; font-weight: 560; } .cap-card__text { color: var(--muted); font-size: 0.96rem; line-height: 1.6; max-width: 34ch; } @media (max-width: 980px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .cap-grid { grid-template-columns: 1fr; gap: 14px; } } /* ============ ON-CALL SHOWCASE (hover / tap slideshow) ============ */ .showcase { padding: clamp(56px, 9vw, 130px) clamp(20px, 4vw, 56px); } .showcase__inner { max-width: 1180px; margin: 0 auto; } .showcase__eyebrow { font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: clamp(26px, 4vw, 48px); } .showcase__eyebrow::before { content: "/ "; opacity: 0.6; } .showcase__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 72px); align-items: center; } /* ---- text list ---- */ .hslide__list { list-style: none; display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 18px); } .hslide__item { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.9rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.015em; color: var(--text); } .hslide__text { display: inline; } /* two-layer per-character lift */ .hword { display: inline-block; white-space: nowrap; } .hch { position: relative; display: inline-block; overflow: hidden; vertical-align: top; } .hch__base, .hch__top { display: inline-block; transition: transform 0.5s cubic-bezier(0.45, 0, 0.2, 1); transition-delay: var(--d); } .hch__base { opacity: 0.22; transform: translateY(0); } .hch__top { position: absolute; left: 0; top: 0; opacity: 1; transform: translateY(110%); } .hslide__slide { cursor: pointer; } /* The in-orb body rolls in only while the orb is shown in-section (.is-shown), so scrolling into/out of the section plays the SAME per-character roll as selecting a different line. */ .hslide__slide.is-active .hch__base, .orb-text.is-shown .hslide__body.is-active .hch__base { transform: translateY(-110%); } .hslide__slide.is-active .hch__top, .orb-text.is-shown .hslide__body.is-active .hch__top { transform: translateY(0); } .hslide__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 6px; } /* ---- reserved orb slot ---- */ /* invisible placeholder reserving the old image's footprint so the travelling voice orb (fixed canvas, behind content) has a precise rect to dock in. */ .hslide__stage { aspect-ratio: 4 / 3; } /* ---- in-orb text overlay ---- */ /* fixed to the viewport; main.js glues it to the orb's live centre and toggles .is-shown when the orb is resting in-section (drives the roll in/out). */ .orb-text { position: fixed; left: 0; top: 0; z-index: 5; display: grid; place-items: center; pointer-events: none; text-align: center; will-change: transform; } /* ethereal body copy — soft luminous green that reads as emitted by the orb, yet legible on its pale core. Only the active slide shows; letters roll in. */ .hslide__body { grid-area: 1 / 1; width: 100%; margin: 0; color: #1b5a44; font-weight: 400; letter-spacing: 0.005em; font-size: clamp(0.82rem, 1.05vw, 1rem); line-height: 1.72; text-shadow: 0 0 18px rgba(120, 224, 182, 0.5), /* soft green glow — "emitted" */ 0 0 3px rgba(246, 243, 236, 0.85), /* tight ivory halo — legibility */ 0 1px 10px rgba(246, 243, 236, 0.55); opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.5s; } /* visible only when it's the active slide AND the orb is shown in-section */ .orb-text.is-shown .hslide__body.is-active { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease-out); } @media (max-width: 820px) { /* full-height section so the orb has room to fill the gap between the "On every call" title and the first line */ .showcase { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; } .showcase__grid { grid-template-columns: 1fr; gap: clamp(22px, 5vw, 34px); } .hslide__stage { order: -1; aspect-ratio: 1 / 1; } .hslide__item { font-size: clamp(1.3rem, 6.4vw, 2rem); } } @media (prefers-reduced-motion: reduce) { .hch__base, .hch__top { transition: none; } .hch__top { display: none; } .hslide__item .hch__base { opacity: 0.3; transform: none; } .hslide__slide.is-active .hch__base, .hslide__body.is-active .hch__base { opacity: 1; transform: none; } .hslide__body .hch__base { opacity: 1; } .hslide__body { transition: none; } } /* ============ HOW ============ */ .how { position: relative; } .how__pin { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: clamp(56px, 10vw, 120px) clamp(20px, 4vw, 56px); } .how__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px); max-width: 1200px; margin: 0 auto; width: 100%; } .how__step { padding: clamp(26px, 3vw, 40px); border: 1px solid var(--line); border-radius: 20px; background: var(--bg-soft); opacity: 0.4; transform: scale(0.97); transition: opacity 0.5s, transform 0.5s var(--ease-out), border-color 0.5s, background 0.5s; } .how__step.is-active { opacity: 1; transform: scale(1); border-color: rgba(31, 122, 92, 0.45); background: var(--surface); } .how__step-num { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4vw, 3rem); color: var(--accent); margin-bottom: 18px; line-height: 1; } .how__step h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); margin-bottom: 12px; } .how__step p { color: var(--muted); font-size: 0.96rem; } .how__progress { max-width: 1200px; margin: clamp(32px, 5vh, 56px) auto 0; width: 100%; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; } .how__progress-fill { width: 0%; height: 100%; background: var(--accent); } /* ============ TRUST & PRIVACY ============ */ .trust { position: relative; padding: clamp(56px, 10vw, 140px) clamp(20px, 4vw, 56px); border-top: 1px solid var(--line); background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(31, 122, 92, 0.07), transparent 70%), var(--bg); } .trust__inner { max-width: 1160px; margin: 0 auto; } .trust__intro { max-width: 620px; margin: 22px auto 0; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.65; } .trust__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .trust__item { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(24px, 2.6vw, 34px); transition: border-color 0.4s, transform 0.4s var(--ease-out), background 0.4s; } .trust__item:hover { border-color: rgba(31, 122, 92, 0.35); transform: translateY(-4px); background: var(--surface-2); } .trust__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(31, 122, 92, 0.25); margin-bottom: 20px; } .trust__icon svg { width: 23px; height: 23px; } .trust__item h3 { font-size: clamp(1.12rem, 1.6vw, 1.32rem); margin-bottom: 10px; } .trust__item p { color: var(--muted); font-size: 0.93rem; } .trust__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; margin-top: clamp(34px, 5vw, 56px); text-align: center; } .trust__footnote { color: var(--muted); font-size: 0.96rem; max-width: 460px; } /* ============ CALCULATOR ============ */ .calc { /* calc now leads the pricing page — extra top padding clears the fixed nav */ padding: clamp(104px, 14vw, 160px) clamp(20px, 4vw, 56px) clamp(56px, 10vw, 140px); } .calc__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(18px, 3vw, 40px); max-width: 1100px; margin: 0 auto; align-items: stretch; } .calc__controls { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(24px, 3vw, 36px); padding: clamp(26px, 3.5vw, 48px); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 20px; } .calc__control-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 16px; } .calc__control-head label { color: var(--muted); font-size: 0.95rem; } .calc__control-head output { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--text); white-space: nowrap; } .calc input[type="range"], .pricing input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 3px; outline: none; cursor: pointer; background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill, 50%), var(--line-strong) var(--fill, 50%), var(--line-strong) 100%); touch-action: pan-y; /* slider drags horizontally, page still scrolls */ } .calc input[type="range"]::-webkit-slider-thumb, .pricing input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 5px solid var(--bg); box-shadow: 0 0 0 1.5px var(--accent); transition: transform 0.2s var(--ease-out); } .calc input[type="range"]::-moz-range-thumb, .pricing input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 5px solid var(--bg); box-shadow: 0 0 0 1.5px var(--accent); transition: transform 0.2s var(--ease-out); } .calc input[type="range"]:hover::-webkit-slider-thumb, .pricing input[type="range"]:hover::-webkit-slider-thumb, .calc input[type="range"]:active::-webkit-slider-thumb, .pricing input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); } .calc input[type="range"]:focus-visible, .pricing input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; } .calc__result { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(26px, 3.5vw, 48px); background: var(--surface); border: 1px solid rgba(31, 122, 92, 0.32); border-radius: 20px; } .calc__result-glow { position: absolute; top: -80px; right: -80px; width: 260px; height: 260px; border-radius: 50%; background: var(--accent-dim); filter: blur(60px); pointer-events: none; } .calc__result-label { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; position: relative; } .calc__result-value { font-family: var(--font-display); font-weight: 600; line-height: 1; /* sized so the max possible value ($200,000) fits the panel */ font-size: clamp(1.5rem, 3.6vw, 3.3rem); color: var(--accent); margin-bottom: 14px; position: relative; font-variant-numeric: tabular-nums; } .calc__result-sub { color: var(--muted); font-size: 0.95rem; margin-bottom: 28px; position: relative; } @media (max-width: 820px) { .calc__grid { grid-template-columns: 1fr; } } /* ============ PRICING ============ */ .pricing { padding: clamp(56px, 10vw, 140px) clamp(20px, 4vw, 56px); border-top: 1px solid var(--line); } .pricing__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(18px, 3vw, 40px); max-width: 1100px; margin: 0 auto; align-items: stretch; } .pricing__controls { display: flex; flex-direction: column; padding: clamp(26px, 3.5vw, 48px); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 20px; } .pricing__control-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 16px; } .pricing__control-head label { color: var(--muted); font-size: 0.95rem; } .pricing__control-head output { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--text); white-space: nowrap; } .pricing__scale { display: flex; justify-content: space-between; margin-top: 10px; color: var(--muted); font-size: 0.78rem; } .pricing__includes { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: clamp(28px, 4vw, 40px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--line); } .pricing__includes li { color: var(--muted); font-size: 0.92rem; padding-left: 26px; position: relative; } .pricing__includes li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } .pricing__result { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(26px, 3.5vw, 48px); background: var(--surface); border: 1px solid rgba(31, 122, 92, 0.32); border-radius: 20px; } .pricing__result-glow { position: absolute; top: -80px; right: -80px; width: 260px; height: 260px; border-radius: 50%; background: var(--accent-dim); filter: blur(60px); pointer-events: none; } .pricing__result-label { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; position: relative; } .pricing__result-value { font-family: var(--font-display); font-weight: 600; line-height: 1; font-size: clamp(1.9rem, 5vw, 4.2rem); color: var(--accent); margin-bottom: 14px; position: relative; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; } .pricing__result-unit { font-size: 0.26em; font-weight: 600; color: var(--text); letter-spacing: 0.06em; margin-left: 10px; white-space: nowrap; font-family: var(--font-body); } .pricing__result-sub { color: var(--muted); font-size: 0.95rem; margin-bottom: 28px; position: relative; } @media (max-width: 820px) { .pricing__grid { grid-template-columns: 1fr; } } /* ---- coverage toggle (full time / after hours) ---- */ .pricing__toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: fit-content; margin: 0 auto clamp(30px, 4vw, 48px); padding: 4px; border-radius: 99px; background: var(--bg-soft); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .pricing__toggle-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 99px; background: var(--accent); box-shadow: var(--shadow-sm); transition: transform 0.35s var(--ease-out); } .pricing__toggle.is-after .pricing__toggle-thumb { transform: translateX(100%); } .pricing__toggle-opt { position: relative; z-index: 1; -webkit-appearance: none; appearance: none; background: none; border: 0; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; padding: 11px clamp(20px, 3vw, 32px); border-radius: 99px; white-space: nowrap; color: var(--muted); transition: color 0.35s var(--ease-out); } .pricing__toggle-opt.is-active { color: var(--accent-ink); } .pricing__toggle-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---- after-hours fixed plans (3 self-contained cards, à la 1.txt) ---- */ /* the class rules below out-specify the [hidden] attribute, so the inactive panel has to be explicitly hidden when its mode is toggled off */ .pricing__grid[hidden], .pricing__after[hidden] { display: none; } .pricing__after { max-width: 1100px; margin: 0 auto; } .pricing__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px); align-items: stretch; } .pricing-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-sm), var(--shadow-md); transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out); } .pricing-card:hover { transform: translateY(-5px); border-color: var(--line-strong); } .pricing-card.is-highlight { border-color: rgba(31, 122, 92, 0.55); } /* keep card content above the glow */ .pricing-card > *:not(.pricing-card__glow) { position: relative; z-index: 1; } /* soft rotated glow behind the highlighted card (clipped by overflow:hidden) */ .pricing-card__glow { position: absolute; left: 0; right: 0; top: 50%; margin: 0 auto; width: 100%; height: 48px; transform: translateY(-50%) rotate(-45deg); background: var(--accent); border-radius: 24px; filter: blur(72px); opacity: 0.5; z-index: 0; pointer-events: none; } .pricing-card__head { padding: clamp(26px, 3vw, 38px) clamp(22px, 2.4vw, 34px) clamp(14px, 1.6vw, 20px); } .pricing-card__badge { position: absolute; top: clamp(18px, 2.4vw, 26px); right: clamp(18px, 2.4vw, 26px); background: var(--accent); color: var(--accent-ink); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; border-radius: 99px; white-space: nowrap; } .pricing-card__plan { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 14px; } .pricing-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; } .pricing-card__amount { font-family: var(--font-display); font-weight: 600; line-height: 1; font-size: clamp(2.6rem, 5.2vw, 3.6rem); color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .pricing-card__per { font-size: 0.86rem; font-weight: 600; color: var(--text); letter-spacing: 0.03em; } .pricing-card__for { margin-top: 12px; font-size: 0.85rem; color: var(--muted); text-align: center; } .pricing-card__action { padding: 0 clamp(22px, 2.4vw, 34px); display: flex; flex-direction: column; align-items: stretch; } .pricing-card__action .btn { width: 100%; justify-content: center; } .pricing-card__includes { padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.4vw, 34px) clamp(26px, 3vw, 36px); } .pricing-card__includes-label { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; color: var(--text); margin-bottom: 14px; } .pricing-card__features { list-style: none; display: flex; flex-direction: column; gap: 11px; } .pricing-card__features li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; color: var(--muted); line-height: 1.45; } .pricing-card__features svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--accent); margin-top: 1px; } /* custom "talk to us" card — full-width horizontal banner under the priced row, so the priced cards get a roomy 3-up layout above it */ .pricing-card--custom { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: clamp(20px, 4vw, 48px); padding: clamp(24px, 3vw, 36px) clamp(26px, 3vw, 44px); } .pricing-card--custom .pricing-card__head { padding: 0; } .pricing-card--custom .pricing-card__action { padding: 0; width: auto; flex: 0 0 auto; } .pricing-card--custom .pricing-card__action .btn { width: auto; white-space: nowrap; } .pricing-card__custom-title { font-family: var(--font-display); font-weight: 600; line-height: 1.15; font-size: clamp(1.3rem, 1.9vw, 1.6rem); color: var(--text); letter-spacing: -0.01em; margin: 6px 0 8px; } .pricing-card__custom-note { font-size: 0.92rem; color: var(--muted); line-height: 1.55; max-width: 64ch; } @media (max-width: 980px) { .pricing__cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .pricing__cards { grid-template-columns: 1fr; gap: 16px; } .pricing-card--custom { flex-direction: column; align-items: flex-start; } .pricing-card--custom .pricing-card__action { width: 100%; } .pricing-card--custom .pricing-card__action .btn { width: 100%; justify-content: center; } } /* ============ CTA ============ */ .cta { position: relative; overflow: hidden; text-align: center; padding: clamp(70px, 16vw, 200px) clamp(20px, 4vw, 56px); border-top: 1px solid var(--line); } .cta__rings { position: absolute; inset: 0; pointer-events: none; } /* anchor box for the travelling orb — centred over the CTA copy (see main.js) */ .cta__orb-slot { position: absolute; left: 50%; top: 50%; width: min(720px, 90vw); height: clamp(360px, 48vh, 520px); transform: translate(-50%, -50%); pointer-events: none; } .cta__rings span { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(31, 122, 92, 0.12); border-radius: 50%; transform: translate(-50%, -50%); animation: ring 6s var(--ease-out) infinite; } .cta__rings span:nth-child(1) { width: 300px; height: 300px; animation-delay: 0s; } .cta__rings span:nth-child(2) { width: 300px; height: 300px; animation-delay: 2s; } .cta__rings span:nth-child(3) { width: 300px; height: 300px; animation-delay: 4s; } @keyframes ring { 0% { width: 200px; height: 200px; opacity: 0; } 20% { opacity: 1; } 100% { width: 1100px; height: 1100px; opacity: 0; } } .cta__title { font-size: clamp(2.1rem, 7.4vw, 5.6rem); position: relative; letter-spacing: -0.02em; } .cta__sub { color: var(--muted); margin: 26px auto 36px; position: relative; max-width: 560px; font-size: clamp(1rem, 1.3vw, 1.12rem); } .cta .btn { position: relative; } .cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; position: relative; } .cta__pricing { margin-top: 18px; position: relative; } .cta__pricing a { color: var(--accent); font-size: 0.95rem; font-weight: 600; border-bottom: 1px solid transparent; transition: border-color 0.3s; } .cta__pricing a:hover { border-bottom-color: rgba(31, 122, 92, 0.5); } .cta__phone { margin-top: 10px; position: relative; color: var(--muted); font-size: 0.95rem; } .cta__phone a { color: var(--accent); font-weight: 600; border-bottom: 1px solid transparent; transition: border-color 0.3s; } .cta__phone a:hover { border-bottom-color: rgba(31, 122, 92, 0.5); } /* desktop: nudge the CTA copy block down a touch */ @media (min-width: 821px) { .cta__title { margin-top: 100px; } } /* ============ FOOTER ============ */ .footer { border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 70px) clamp(20px, 4vw, 56px) 30px; background: var(--bg-soft); } .footer__top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; margin-bottom: 40px; } .footer__brand { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.22em; } .footer__links { display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 36px); } .footer__links a { color: var(--muted); font-size: 0.88rem; transition: color 0.3s; } .footer__links a:hover { color: var(--accent); } .footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; } /* ============ SPLIT / REVEAL HELPERS ============ */ .split .split-line { display: block; overflow: hidden; } .split .split-line > span { display: block; } /* ============ RESPONSIVE ============ */ @media (max-width: 1024px) { .trust__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { .nav__links { display: none; } .nav .btn--small { display: none; } .nav__burger { display: block; } .how__steps { grid-template-columns: 1fr; } .how__pin { min-height: 0; } /* narrow cards, alternately shifted to the side opposite the orb's peek so the travelling orb has room to crest each card's free side (see main.js): odd cards sit left (orb peeks right), the even card sits right (peeks left) */ .how__step { width: 72%; } .how__step:nth-child(odd) { justify-self: start; } .how__step:nth-child(even) { justify-self: end; } /* hero orb slot — mobile placement (uv 0.78/1.0, scale 0.95) */ .hero__orb-slot { width: 95vmin; height: 95vmin; transform: translate(calc(-50% + 39vmin), calc(-50% - 50vmin)); } .hero { justify-content: flex-start; padding-top: 140px; } .hero__title { font-size: clamp(4rem, 15vw, 5.6rem); } .hero__title em { white-space: nowrap; } .hero__eyebrow { font-size: clamp(0.54rem, 2.7vw, 0.62rem); letter-spacing: 0.08em; margin-bottom: 16px; align-items: center; line-height: 1.5; white-space: nowrap; } .hero__eyebrow #heroEyebrow { max-width: none; } .hero__sub { font-size: 0.92rem; margin-top: 18px; } /* stack the hero CTAs vertically on mobile */ .hero__actions { margin-top: 26px; flex-direction: column; align-items: stretch; gap: 12px; } .hero__actions .btn { width: 100%; justify-content: center; } .hero__trust { margin-top: 24px; gap: 8px 18px; } /* keep the marquee pinned to the bottom of the hero on mobile (its default) */ .hero { padding-bottom: 84px; } .hero__scroll { display: none; } /* Capabilities tray — tighter under the eyebrow on mobile */ .features .section-head { margin-bottom: 20px; } /* keep both CTA buttons side by side on one line — trim horizontal padding only, so they stay the same height as every other button */ .cta .btn { padding: 10px 18px; } .cta__actions { flex-wrap: nowrap; gap: 12px; } .cta__actions .btn { white-space: nowrap; gap: 7px; } /* extra top/bottom room so the orb behind the CTA isn't cropped by the neighbouring sections' (bg-soft) backgrounds on mobile */ .cta { padding-top: clamp(60px, 17vh, 140px); padding-bottom: clamp(60px, 17vh, 140px); } } @media (max-width: 560px) { .trust__grid { grid-template-columns: 1fr; } .cta .btn { padding: 10px 13px; font-size: 0.86rem; } .cta__actions { gap: 10px; } } /* ============ LIGHT-THEME ELEVATION ============ On ivory, hairline borders alone read flat — a soft shadow gives cards and panels gentle depth. */ .trust__item, .calc__controls, .calc__result, .pricing__controls, .pricing__result { box-shadow: var(--shadow-sm), var(--shadow-md); } .trust__item:hover { box-shadow: var(--shadow-sm), 0 26px 50px -28px rgba(26, 43, 41, 0.5); } .nav.is-scrolled { box-shadow: 0 8px 30px -22px rgba(26, 43, 41, 0.55); } /* the scroll-hint accent line is faint on ivory — give the track a hair more contrast */ .hero__scroll-line { background: var(--line-strong); } /* ============ REDUCED MOTION ============ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ============ BOOK-A-MEETING POPUP ============ */ .book { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 40px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s var(--ease-out), visibility 0s linear 0.3s; } .book.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s var(--ease-out); } .book__overlay { position: absolute; inset: 0; background: rgba(26, 43, 41, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .book__panel { position: relative; width: min(560px, 100%); max-height: 90vh; overflow: hidden auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: clamp(24px, 4vw, 40px); box-shadow: 0 40px 90px -40px rgba(26, 43, 41, 0.6); transform: translateY(12px); transition: transform 0.35s var(--ease-out); } .book.is-open .book__panel { transform: translateY(0); } .book__close { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-soft); color: var(--text); font-size: 1rem; cursor: pointer; transition: background 0.25s, transform 0.3s var(--ease-out); } .book__close:hover { background: rgba(26, 43, 41, 0.1); transform: rotate(90deg); } .book__title { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 8px; } .book__intro { color: var(--muted); font-size: 0.95rem; line-height: 1.55; margin-bottom: 22px; } .book__field { margin-bottom: 16px; } .book__field > label, .book__plan legend { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text); margin-bottom: 7px; } .book__req { color: var(--accent); margin-left: 2px; } .book input[type="text"], .book input[type="email"], .book textarea { width: 100%; font-family: var(--font-body); font-size: 0.95rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 14px; transition: border-color 0.25s, box-shadow 0.25s; } .book input:focus, .book textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31, 122, 92, 0.15); } .book textarea { resize: vertical; min-height: 92px; } /* plan picker (segmented) + conditional follow-ups */ .book__plan { border: 0; padding: 0; margin: 0 0 16px; } .book__segs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .book__seg { position: relative; } .book__seg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .book__seg span { display: block; text-align: center; padding: 11px 8px; border: 1px solid var(--line-strong); border-radius: 12px; font-weight: 600; font-size: 0.9rem; color: var(--text); cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; } .book__seg input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .book__seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .book__sub { margin-top: 14px; } .book__sublabel { display: block; font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-bottom: 9px; } .book__chips { display: flex; flex-wrap: wrap; gap: 8px; } .book__chip { position: relative; } .book__chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .book__chip span { display: block; padding: 9px 16px; border: 1px solid var(--line-strong); border-radius: 99px; font-size: 0.88rem; font-weight: 600; color: var(--text); cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; } .book__chip input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .book__chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .book__submit { width: 100%; justify-content: center; margin-top: 8px; } .book__error { color: #b3261e; font-size: 0.88rem; margin-top: 12px; } /* honeypot — visually hidden but present in the DOM for bots */ .book__hp { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* success state */ .book__success { text-align: center; padding: clamp(18px, 4vw, 36px) 0; } .book__tick { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(31, 122, 92, 0.3); font-size: 1.8rem; margin-bottom: 18px; }