/* ========================================================================== Gid — Homepage v2 (design handoff "Site Gid Accueil v2", 2026-08-03) ========================================================================== Scope ----- Every rule is scoped under `body.home-v2`, which only `index.html` and `hi/index.html` carry. Nothing here can leak onto the legal pages, the Founders page, the blog or the changelog. Load order matters: this file is linked LAST in , after styles.css / gid-ecosystem.css / gid-pitch-pricing.css / gid-founders-pricing.css / gid-pricing-v2.css, so the `body.home-v2` scope wins on specificity for the few shared shells it restyles (.main-nav, .main-footer). Reference values come from the two handoff boards: Site Gid Accueil v2.dc.html (desktop, >= 1280) Site Gid Accueil v2 Mobile.dc.html (mobile, 390) The boards are fixed-width references. This implementation is fluid from 320px up, per handoff-responsive.md. Breakpoints ----------- mobile < 768 (board reference 390, fluid from 320) tablet 768 - 1279 (desktop layout, reduced gutters, hero stacks < 1024) desktop >= 1280 (board reference, 1240 content column) ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens -------------------------------------------------------------------------- */ body.home-v2 { /* Surfaces */ --hv-bg: #0C0F14; --hv-surface: #12151b; --hv-card: rgba(255, 255, 255, 0.015); --hv-card-hover: rgba(255, 255, 255, 0.025); /* Text */ --hv-text: #F4F6F8; --hv-text-2: #9AA4B2; --hv-text-3: #77808C; --hv-text-4: #4E5766; --hv-text-link: #C3CAD4; --hv-text-strong: #E7EAEE; /* Single accent */ --hv-accent: #F97316; --hv-accent-hover: #fb923c; --hv-accent-grad: linear-gradient(180deg, #FB923C, #F97316); --hv-accent-border: rgba(249, 115, 22, 0.5); --hv-accent-border-strong: rgba(249, 115, 22, 0.55); --hv-accent-glow-s: rgba(249, 115, 22, 0.10); --hv-accent-glow-m: rgba(249, 115, 22, 0.22); --hv-accent-glow-l: rgba(249, 115, 22, 0.30); /* Neutral borders */ --hv-border: rgba(255, 255, 255, 0.06); --hv-border-2: rgba(255, 255, 255, 0.08); --hv-border-3: rgba(255, 255, 255, 0.10); --hv-border-4: rgba(255, 255, 255, 0.14); --hv-success: #22c55e; /* Layout */ --hv-max: 1240px; --hv-gutter: clamp(20px, 5vw, 64px); --hv-nav-h: 62px; --hv-section-y: clamp(64px, 8vw, 100px); /* Fluid type scale (handoff-responsive.md) */ --hv-h1: clamp(30px, 8.5vw, 64px); --hv-sub: clamp(16px, 1.8vw, 22px); --hv-h2: clamp(30px, 3.6vw, 46px); --hv-feature-title: clamp(22px, 2.4vw, 38px); --hv-body: clamp(14px, 1.4vw, 19px); /* Radii */ --hv-r-pill: 999px; --hv-r-card: clamp(20px, 2vw, 30px); --hv-r-shot: clamp(22px, 2.6vw, 40px); } /* -------------------------------------------------------------------------- 2. Page shell -------------------------------------------------------------------------- */ body.home-v2 { font-family: 'Manrope', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--hv-bg); color: var(--hv-text); /* Safety net against any single wide child pushing a horizontal scrollbar. It must be `clip`, not `hidden`: `hidden` turns into a scroll container, and that silently kills `position: sticky` on every descendant, including the feature-selector capture below. `hidden` stays first as the fallback for engines that do not know `clip`. */ overflow-x: hidden; overflow-x: clip; } body.home-v2 main { display: block; } /* Sticky-nav offset for every in-page anchor target, including the zero-height legacy aliases (#features, #founders-programme, #demo). */ body.home-v2 [id] { scroll-margin-top: calc(var(--hv-nav-h) + 24px); } /* Legacy anchor aliases. Kept as real, zero-height, non-interactive targets so the permanent 301s in firebase.json (/sections/pricing.html -> /#features, /sections/faq.html -> /#faq, /sections/hero.html -> /#hero, /sections/demo.html -> /#demo) and every existing in-page href keep landing on the right place after the v2 restructure. Never remove these. */ body.home-v2 .hv-anchor-alias { display: block; height: 0; overflow: hidden; visibility: hidden; } body.home-v2 .hv-wrap { max-width: var(--hv-max); margin-inline: auto; padding-inline: var(--hv-gutter); width: 100%; } body.home-v2 .hv-section { padding-block: var(--hv-section-y); position: relative; } body.home-v2 .hv-section + .hv-section { border-top: 1px solid var(--hv-border); } /* Media never overflows its column. */ body.home-v2 img, body.home-v2 svg { max-width: 100%; } /* -------------------------------------------------------------------------- 3. Shared type + control primitives -------------------------------------------------------------------------- */ body.home-v2 .hv-kicker { font-size: clamp(10.5px, 1.1vw, 15px); font-weight: 800; letter-spacing: clamp(1.8px, 0.3vw, 4px); color: var(--hv-accent); text-transform: uppercase; margin: 0; } body.home-v2 .hv-h1 { font-size: var(--hv-h1); line-height: 1.08; font-weight: 800; letter-spacing: clamp(-1.5px, -0.12vw, -0.8px); margin: 0; color: var(--hv-text); /* Long compound words must never widen the page on a 320px screen. */ overflow-wrap: break-word; } body.home-v2 .hv-h2 { font-size: var(--hv-h2); line-height: 1.12; font-weight: 800; letter-spacing: clamp(-1px, -0.08vw, -0.5px); margin: 0; color: var(--hv-text); overflow-wrap: break-word; } body.home-v2 .hv-lead { font-size: clamp(16px, 1.7vw, 20px); line-height: 1.5; font-weight: 500; color: var(--hv-text-2); margin: 0; } body.home-v2 .hv-dot { color: var(--hv-accent); } body.home-v2 .hv-section-head { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 18px); max-width: 760px; } /* Buttons ------------------------------------------------------------------ */ body.home-v2 .hv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; /* >= 44px touch target at every size. */ min-height: 48px; padding: clamp(14px, 1.4vw, 17px) clamp(24px, 2.6vw, 32px); font-size: clamp(15px, 1.4vw, 18px); font-weight: 800; line-height: 1.15; text-align: center; text-decoration: none; border-radius: var(--hv-r-pill); border: 2px solid transparent; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } body.home-v2 .hv-btn-primary { color: #0C0F14; background: var(--hv-accent-grad); box-shadow: 0 12px 34px var(--hv-accent-glow-l), inset 0 1px 0 rgba(255, 255, 255, 0.35); } body.home-v2 .hv-btn-primary:hover, body.home-v2 .hv-btn-primary:focus-visible { background: var(--hv-accent-hover); color: #0C0F14; transform: translateY(-1px); } body.home-v2 .hv-btn-ghost { color: var(--hv-text-strong); background: transparent; border-color: var(--hv-border-4); } body.home-v2 .hv-btn-ghost:hover, body.home-v2 .hv-btn-ghost:focus-visible { border-color: rgba(249, 115, 22, 0.6); color: var(--hv-text-strong); } body.home-v2 .hv-btn-block { display: flex; width: 100%; } body.home-v2 .hv-note { font-size: clamp(12px, 1.1vw, 15px); font-weight: 600; color: var(--hv-text-3); line-height: 1.55; margin: 0; } /* Visible focus everywhere, orange, never removed. */ body.home-v2 a:focus-visible, body.home-v2 button:focus-visible, body.home-v2 summary:focus-visible, body.home-v2 [tabindex]:focus-visible { outline: 3px solid var(--hv-accent); outline-offset: 3px; border-radius: 6px; } /* App capture frame -------------------------------------------------------- */ body.home-v2 .hv-shot { position: relative; border-radius: var(--hv-r-shot); border: 2px solid var(--hv-border-3); overflow: hidden; background: var(--hv-surface); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), 0 0 80px var(--hv-accent-glow-s); line-height: 0; } /* Captures are always shown WHOLE. No cropping of the top or bottom of the app, ever (handoff README, Responsive section). Hence no object-fit: cover and no fixed aspect box tighter than the source. */ body.home-v2 .hv-shot img { display: block; width: 100%; height: auto; } /* -------------------------------------------------------------------------- 4. Nav (shared shell, restyled on the home only) -------------------------------------------------------------------------- */ body.home-v2 .main-nav { background: rgba(12, 15, 20, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hv-border); } body.home-v2 .main-nav.scrolled { background: rgba(12, 15, 20, 0.94); } body.home-v2 .nav-link, body.home-v2 .nav-dropdown-toggle { color: var(--hv-text-link); font-weight: 600; } body.home-v2 .nav-link:hover, body.home-v2 .nav-dropdown-toggle:hover { color: var(--hv-accent); } body.home-v2 .logo-text { font-weight: 800; } /* Full-screen mobile menu (handoff §Nav). The drawer keeps its existing markup, JS hooks (#nav-toggle / #nav-menu.active) and transition. */ @media (max-width: 768px) { body.home-v2 .nav-menu { top: var(--hv-nav-h); height: calc(100dvh - var(--hv-nav-h)); width: 100vw; max-width: none; border-radius: 0; background: rgba(12, 15, 20, 0.97); padding: 2rem 1.5rem 3rem; } body.home-v2 .nav-link, body.home-v2 .nav-dropdown-toggle { min-height: 44px; display: flex; align-items: center; justify-content: center; } } /* -------------------------------------------------------------------------- 5. Hero -------------------------------------------------------------------------- */ body.home-v2 .hv-hero { position: relative; overflow: hidden; padding-top: calc(var(--hv-nav-h) + clamp(20px, 4vw, 48px)); padding-bottom: clamp(36px, 5vw, 90px); background-image: radial-gradient(ellipse 90% 60% at 70% -10%, rgba(249, 115, 22, 0.16), rgba(249, 115, 22, 0) 60%); } /* Three blocks, two layouts, ONE copy of every capture in the DOM. Desktop: copy + actions stack in the left column, the capture duo spans the right one. Mobile: single column, capture between the sub and the CTA. Grid areas rather than duplicated markup, so the hero image is downloaded once at one size instead of twice. */ body.home-v2 .hv-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 460px; grid-template-areas: "copy visual" "actions visual"; align-items: center; column-gap: clamp(32px, 5vw, 80px); row-gap: clamp(16px, 2vw, 28px); } /* The capture column spans both rows and is very tall. Without these two alignments the browser centres the copy in row 1 and the actions in row 2, which tears the left column in half. Pulling one to the bottom of its row and the other to the top of its row keeps them reading as one block. */ body.home-v2 .hv-hero-copy { grid-area: copy; align-self: end; min-width: 0; display: flex; flex-direction: column; gap: clamp(10px, 1.6vw, 28px); } body.home-v2 .hv-hero-actions { grid-area: actions; align-self: start; min-width: 0; display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 16px); align-items: flex-start; } body.home-v2 .hv-hero-sub { font-size: var(--hv-sub); line-height: 1.5; font-weight: 500; color: var(--hv-text-2); max-width: 540px; margin: 0; } body.home-v2 .hv-hero-ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } /* Desktop capture duo: schedule tilted behind, dashboard straight in front. */ body.home-v2 .hv-hero-visual { grid-area: visual; position: relative; justify-self: end; } /* The tilted capture peeks out on the LEFT of the front one by sitting at the column's own left edge, rather than bleeding outside it. Same layered look, but the H1 can never run into it: the board's -70px offset put the two on a collision course at exactly 1280. */ body.home-v2 .hv-hero-shot-back { position: absolute; left: 0; top: 40px; width: 300px; border-radius: 34px; border: 2px solid var(--hv-border-2); overflow: hidden; transform: rotate(-6deg); opacity: 0.55; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5); line-height: 0; } body.home-v2 .hv-hero-shot-front { position: relative; width: 380px; margin-left: 110px; border-radius: 40px; border: 3px solid rgba(255, 255, 255, 0.12); overflow: hidden; background: var(--hv-surface); box-shadow: 0 0 110px var(--hv-accent-glow-m), 0 50px 110px rgba(0, 0, 0, 0.6); line-height: 0; } body.home-v2 .hv-hero-shot-back img, body.home-v2 .hv-hero-shot-front img { display: block; width: 100%; height: auto; } /* Hero bottom band: markets + store badges. */ body.home-v2 .hv-hero-band { margin-top: clamp(28px, 4vw, 80px); padding-top: clamp(18px, 2vw, 28px); border-top: 1px solid rgba(255, 255, 255, 0.07); display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); flex-wrap: wrap; font-size: clamp(13px, 1.2vw, 16px); font-weight: 600; color: var(--hv-text-3); } body.home-v2 .hv-markets { display: flex; gap: clamp(12px, 1.6vw, 22px); flex-wrap: wrap; font-size: clamp(13px, 1.3vw, 17px); color: var(--hv-text-link); } /* Store badges ------------------------------------------------------------- */ /* Hidden until BOTH store URLs exist. home-v2.js is the single switch; with JS disabled the block stays hidden, which is the honest default while the app is not published. Official Apple / Google artwork only, never redrawn. */ body.home-v2 .hv-stores { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } body.home-v2 .hv-stores[hidden] { display: none; } body.home-v2 .hv-store-badge { display: inline-flex; align-items: center; border-radius: 10px; transition: transform 0.2s ease, filter 0.2s ease; } body.home-v2 .hv-store-badge:hover { transform: translateY(-1px); filter: brightness(1.08); } body.home-v2 .hv-store-badge img { display: block; height: 44px; width: auto; } /* Google ships its badge with mandatory clear space baked into the asset, so it needs ~20% more box height to read at the same optical size as Apple's. */ body.home-v2 .hv-store-badge-google img { height: 54px; margin: -5px; } body.home-v2 .hv-hero-band-stores { margin-left: auto; } /* -------------------------------------------------------------------------- 6. Product / features -------------------------------------------------------------------------- */ body.home-v2 .hv-product-inner { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 80px); } /* Featured SCHEDULING block */ body.home-v2 .hv-feature-lead { display: flex; align-items: center; gap: clamp(28px, 5vw, 70px); } body.home-v2 .hv-feature-lead .hv-shot { flex: 0 0 420px; border-radius: 36px; } body.home-v2 .hv-feature-lead-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 20px); } body.home-v2 .hv-feature-title { font-size: var(--hv-feature-title); line-height: 1.12; font-weight: 800; letter-spacing: -0.5px; margin: 0; color: var(--hv-text); } body.home-v2 .hv-feature-text { font-size: clamp(15px, 1.5vw, 19px); line-height: 1.55; font-weight: 500; color: var(--hv-text-2); margin: 0; } /* Interactive 4-feature selector ------------------------------------------- */ body.home-v2 .hv-selector { display: flex; gap: clamp(28px, 5vw, 70px); align-items: flex-start; } body.home-v2 .hv-tablist { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } body.home-v2 .hv-tab { position: relative; display: block; width: 100%; text-align: left; cursor: pointer; padding: clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 30px); border-radius: 18px; border: 0; background: transparent; color: inherit; font: inherit; transition: background 0.2s ease; } body.home-v2 .hv-tab:hover { background: var(--hv-card-hover); } /* 4px orange rail on the active item. */ body.home-v2 .hv-tab::before { content: ''; position: absolute; left: 0; top: 22px; bottom: 22px; width: 4px; border-radius: 4px; background: var(--hv-accent); opacity: 0; transition: opacity 0.15s ease; } body.home-v2 .hv-tab[aria-selected="true"]::before { opacity: 1; } body.home-v2 .hv-tab-inner { display: flex; flex-direction: column; gap: 8px; } body.home-v2 .hv-tab-kicker { font-size: clamp(11px, 1vw, 13px); font-weight: 800; letter-spacing: clamp(2.5px, 0.3vw, 4px); color: var(--hv-accent); text-transform: uppercase; } body.home-v2 .hv-tab-title { font-size: clamp(19px, 2vw, 26px); font-weight: 800; letter-spacing: -0.3px; line-height: 1.15; } body.home-v2 .hv-tab-text { font-size: clamp(14px, 1.3vw, 16px); line-height: 1.5; font-weight: 500; color: var(--hv-text-2); } /* Short label carried by the same button, surfaced only in the mobile chip layout. One tablist, one set of tabs, one set of panels across both breakpoints: no duplicated controls for assistive tech to disambiguate. */ body.home-v2 .hv-chip-label { display: none; } /* Right-hand capture column. The handoff calls a sticky capture "desirable". It is inert with this geometry and was removed rather than shipped as dead CSS: a full 1290x2796 capture rendered at 420px wide is ~910px tall, which makes this column the TALLER of the two, so a sticky box would have zero travel and never pin. Revisit only if the tab list ever grows past the capture height. */ body.home-v2 .hv-selector-stage { flex: 0 0 420px; } body.home-v2 .hv-panel[hidden] { display: none; } body.home-v2 .hv-panel .hv-shot { border-radius: 36px; animation: hv-fade 0.15s ease-out; } @keyframes hv-fade { from { opacity: 0; } to { opacity: 1; } } /* The panel card carries title + text + capture. On desktop the title and text live in the tab itself, so the card shows the capture alone. */ body.home-v2 .hv-panel-card { display: flex; flex-direction: column; gap: 12px; } body.home-v2 .hv-panel-card > h3, body.home-v2 .hv-panel-card > p { display: none; } /* The board sets this at 0.6 opacity, which lands on 3.09:1 against the page background: below WCAG AA for small text. 0.85 keeps the discreet, non-badge look the handoff asks for and measures 5.4:1. */ body.home-v2 .hv-more { font-size: clamp(15px, 1.3vw, 18px); font-weight: 600; font-style: italic; color: rgba(249, 115, 22, 0.85); text-align: center; margin: 0; } /* -------------------------------------------------------------------------- 7. Pricing -------------------------------------------------------------------------- */ body.home-v2 .hv-pricing-inner { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px); } body.home-v2 .hv-price-grid { display: flex; gap: clamp(20px, 3vw, 36px); align-items: stretch; } body.home-v2 .hv-price-main { flex: 1.2; min-width: 0; border: 2px solid var(--hv-accent-border-strong); border-radius: var(--hv-r-card); padding: clamp(24px, 3.2vw, 44px); display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 22px); background: linear-gradient(180deg, rgba(249, 115, 22, 0.06), rgba(249, 115, 22, 0) 45%); } body.home-v2 .hv-price-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } body.home-v2 .hv-price-name { font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; margin: 0; } body.home-v2 .hv-price-pill { font-size: clamp(11px, 1vw, 13px); font-weight: 800; letter-spacing: clamp(1.5px, 0.15vw, 2px); color: var(--hv-accent); border: 1.5px solid var(--hv-accent-border); border-radius: var(--hv-r-pill); padding: 7px 14px; text-decoration: none; display: inline-block; } body.home-v2 a.hv-price-pill:hover { background: rgba(249, 115, 22, 0.1); color: var(--hv-accent); } /* Exactly one live price. $29 with $89 struck through. Never three figures. */ body.home-v2 .hv-price-row { display: flex; align-items: baseline; gap: clamp(8px, 1vw, 14px); flex-wrap: wrap; } body.home-v2 .hv-price-now { font-size: clamp(40px, 5vw, 64px); font-weight: 800; letter-spacing: -2px; line-height: 1; } body.home-v2 .hv-price-was { font-size: clamp(17px, 1.7vw, 22px); font-weight: 700; color: var(--hv-text-3); text-decoration: line-through; } body.home-v2 .hv-price-unit { font-size: clamp(13px, 1.2vw, 16px); font-weight: 600; color: var(--hv-text-2); } body.home-v2 .hv-price-list { display: flex; flex-direction: column; gap: clamp(10px, 1vw, 13px); font-size: clamp(14px, 1.4vw, 17px); font-weight: 600; color: var(--hv-text-link); list-style: none; margin: 0; padding: 0; } body.home-v2 .hv-price-list li { display: flex; gap: 12px; align-items: baseline; } body.home-v2 .hv-check { color: var(--hv-accent); flex: none; } body.home-v2 .hv-price-main .hv-btn { margin-top: auto; } body.home-v2 .hv-price-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: clamp(20px, 3vw, 36px); } /* The board dims these cards with opacity: 0.75. That drags their body text to 3.2:1, under AA. The secondary weight now comes from the surface and the COMING SOON pill instead, so the text keeps full contrast. */ body.home-v2 .hv-price-soon { flex: 1; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.012); border-radius: var(--hv-r-card); padding: clamp(22px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 12px; } body.home-v2 .hv-price-soon-name, body.home-v2 .hv-price-soon-figure { color: var(--hv-text-link); } body.home-v2 .hv-price-soon-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } body.home-v2 .hv-price-soon-name { font-size: clamp(19px, 1.9vw, 24px); font-weight: 800; margin: 0; } body.home-v2 .hv-soon-pill { font-size: clamp(10px, 0.9vw, 12px); font-weight: 800; letter-spacing: 1.5px; color: var(--hv-text-2); border: 1.5px solid rgba(255, 255, 255, 0.15); border-radius: var(--hv-r-pill); padding: 5px 12px; } body.home-v2 .hv-price-soon-text { font-size: clamp(14px, 1.3vw, 16px); line-height: 1.5; font-weight: 500; color: var(--hv-text-2); margin: 0; } body.home-v2 .hv-price-soon-figure { font-size: clamp(17px, 1.7vw, 20px); font-weight: 800; } body.home-v2 .hv-price-soon-figure span { font-size: clamp(13px, 1.2vw, 15px); font-weight: 600; color: var(--hv-text-3); } /* The private-beta / test-mode notice. pricing-loader.js reveals it only when pricing.json::founders_program._active_checkout_mode === "test". Left in place deliberately: removing it would let a test-mode checkout be presented as a live one. */ body.home-v2 .private-beta-banner { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--hv-accent-border); background: rgba(249, 115, 22, 0.08); border-radius: 16px; padding: 16px 18px; font-size: clamp(13px, 1.2vw, 15px); line-height: 1.55; font-weight: 500; color: var(--hv-text-link); } body.home-v2 .private-beta-banner a { color: var(--hv-accent); font-weight: 700; } /* -------------------------------------------------------------------------- 8. Founders -------------------------------------------------------------------------- */ body.home-v2 .hv-founders { background-image: radial-gradient(ellipse 80% 90% at 50% 0%, rgba(249, 115, 22, 0.10), rgba(249, 115, 22, 0) 60%); } body.home-v2 .hv-founders-inner { display: flex; flex-direction: column; gap: clamp(24px, 3.2vw, 50px); } body.home-v2 .hv-founders-head { max-width: 820px; } body.home-v2 .hv-founders-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 36px); } body.home-v2 .hv-founders-card { border: 1px solid var(--hv-border-2); border-radius: clamp(20px, 2vw, 26px); padding: clamp(22px, 2.6vw, 36px); display: flex; flex-direction: column; gap: clamp(10px, 1vw, 14px); background: var(--hv-card); } body.home-v2 .hv-founders-figure { font-size: clamp(26px, 2.8vw, 34px); font-weight: 800; color: var(--hv-accent); line-height: 1; } body.home-v2 .hv-founders-card h3 { font-size: clamp(18px, 1.9vw, 22px); font-weight: 800; margin: 0; color: var(--hv-text); } body.home-v2 .hv-founders-card p { font-size: clamp(14px, 1.3vw, 16px); line-height: 1.55; font-weight: 500; color: var(--hv-text-2); margin: 0; } body.home-v2 .hv-founders-card a { color: var(--hv-accent); font-weight: 700; } body.home-v2 .hv-founders-cta { display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); flex-wrap: wrap; } /* -------------------------------------------------------------------------- 9. FAQ -------------------------------------------------------------------------- */ body.home-v2 .hv-faq-inner { max-width: 1000px; margin-inline: auto; display: flex; flex-direction: column; gap: clamp(22px, 3vw, 44px); } body.home-v2 .hv-faq-list { display: flex; flex-direction: column; } body.home-v2 .hv-faq-item { border-top: 1px solid var(--hv-border-2); } body.home-v2 .hv-faq-item:last-child { border-bottom: 1px solid var(--hv-border-2); } body.home-v2 .hv-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: clamp(16px, 1.8vw, 26px) 0; min-height: 44px; font-size: clamp(16px, 1.7vw, 21px); font-weight: 800; color: var(--hv-text); cursor: pointer; list-style: none; } /* Kill the native disclosure triangle in every engine. */ body.home-v2 .hv-faq-q::-webkit-details-marker { display: none; } body.home-v2 .hv-faq-q::marker { content: ''; } body.home-v2 .hv-faq-sign { flex: none; color: var(--hv-accent); font-size: 22px; font-weight: 700; line-height: 1; width: 24px; text-align: center; } body.home-v2 .hv-faq-sign::after { content: '+'; } body.home-v2 .hv-faq-item[open] .hv-faq-sign::after { content: '\2212'; /* minus sign */ } body.home-v2 .hv-faq-a { padding: 0 0 clamp(16px, 1.8vw, 26px); font-size: clamp(14px, 1.4vw, 17px); line-height: 1.55; font-weight: 500; color: var(--hv-text-2); /* Room for the + / - column so the answer aligns with the question. */ padding-right: 38px; } body.home-v2 .hv-faq-a p { margin: 0 0 10px; } body.home-v2 .hv-faq-a p:last-child { margin-bottom: 0; } body.home-v2 .hv-faq-more { font-size: clamp(15px, 1.4vw, 17px); font-weight: 700; color: var(--hv-accent); text-decoration: none; align-self: flex-start; } body.home-v2 .hv-faq-more:hover { color: var(--hv-accent-hover); } /* -------------------------------------------------------------------------- 10. Final CTA -------------------------------------------------------------------------- */ body.home-v2 .hv-final { text-align: center; background-image: radial-gradient(ellipse 70% 90% at 50% 110%, rgba(249, 115, 22, 0.14), rgba(249, 115, 22, 0) 60%); } body.home-v2 .hv-final-inner { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 26px); align-items: center; } body.home-v2 .hv-final-mark { width: clamp(60px, 6vw, 76px); height: clamp(60px, 6vw, 76px); border-radius: clamp(15px, 1.5vw, 19px); box-shadow: 0 14px 50px var(--hv-accent-glow-l); } body.home-v2 .hv-final h2 { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.08; font-weight: 800; letter-spacing: -1.5px; margin: 0; } body.home-v2 .hv-final p { font-size: clamp(16px, 1.7vw, 20px); font-weight: 500; color: var(--hv-text-2); margin: 0; } /* -------------------------------------------------------------------------- 11. Footer (shared shell, retinted on the home only) -------------------------------------------------------------------------- */ body.home-v2 .main-footer { background: var(--hv-bg); border-top: 1px solid var(--hv-border); } body.home-v2 .main-footer h3 { font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--hv-text-3); } body.home-v2 .main-footer a { color: var(--hv-text-link); } body.home-v2 .main-footer a:hover { color: var(--hv-accent); } /* -------------------------------------------------------------------------- 12. Cookie consent, compact bottom bar -------------------------------------------------------------------------- */ /* The banner is injected by consent-banner.js with inline styles. These rules need !important to win over the element style attribute. On mobile it must stay a slim bottom bar (<= 96px) so it can never cover the hero CTA, which the handoff makes a hard constraint. */ @media (max-width: 767px) { body.home-v2 #gid-cookie-banner { left: 0 !important; right: 0 !important; bottom: 0 !important; max-width: none !important; border-radius: 14px 14px 0 0 !important; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important; display: flex !important; align-items: center !important; gap: 10px !important; font-family: 'Manrope', sans-serif !important; } body.home-v2 #gid-cookie-banner > p { margin: 0 !important; flex: 1 1 auto; font-size: 11.5px !important; line-height: 1.35 !important; /* Two lines maximum: that is what keeps the bar under 96px. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.home-v2 #gid-cookie-banner > div { flex: 0 0 auto; flex-wrap: nowrap !important; } body.home-v2 #gid-cookie-banner button { padding: 9px 12px !important; font-size: 12px !important; min-height: 40px; white-space: nowrap; } } /* -------------------------------------------------------------------------- 13. Tablet, 768 - 1279 -------------------------------------------------------------------------- */ @media (max-width: 1279px) { body.home-v2 { --hv-gutter: 40px; } body.home-v2 .hv-hero-grid { grid-template-columns: minmax(0, 1fr) 380px; } body.home-v2 .hv-hero-shot-front { width: 300px; margin-left: 80px; } body.home-v2 .hv-hero-shot-back { width: 240px; } body.home-v2 .hv-feature-lead .hv-shot, body.home-v2 .hv-selector-stage { flex-basis: 340px; } } /* Hero stacks below 1024, per handoff-responsive.md. */ @media (max-width: 1023px) { body.home-v2 .hv-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "visual" "actions"; justify-items: stretch; } /* justify-self:end is a two-column affordance. Once the hero stacks, the capture must sit centred under the copy, not pinned to the right edge. */ body.home-v2 .hv-hero-visual { justify-self: center; width: 420px; max-width: 100%; margin-top: 8px; } body.home-v2 .hv-hero-shot-front { width: 260px; margin-left: 100px; border-radius: 30px; } body.home-v2 .hv-hero-shot-back { width: 200px; top: 30px; border-radius: 26px; } body.home-v2 .hv-feature-lead { flex-direction: column; align-items: stretch; } body.home-v2 .hv-feature-lead .hv-shot { flex: 0 0 auto; max-width: 420px; margin-inline: auto; width: 100%; } body.home-v2 .hv-founders-grid { grid-template-columns: 1fr 1fr; } } /* -------------------------------------------------------------------------- 14. Mobile, < 768 -------------------------------------------------------------------------- */ @media (max-width: 767px) { body.home-v2 { --hv-nav-h: 58px; --hv-section-y: 64px; } /* Hero ---------------------------------------------------------------- */ body.home-v2 .hv-hero { padding-top: calc(var(--hv-nav-h) + 20px); padding-bottom: 36px; background-image: radial-gradient(ellipse 140% 50% at 50% -10%, rgba(249, 115, 22, 0.16), rgba(249, 115, 22, 0) 60%); } body.home-v2 .hv-hero-copy { gap: 12px; } body.home-v2 .hv-hero-sub { max-width: none; } /* One capture only: the dashboard. The tilted schedule backdrop is a desktop affordance and its image is lazy, so it is never fetched here. */ body.home-v2 .hv-hero-visual { justify-self: center; width: auto; margin-top: 6px; display: flex; justify-content: center; } body.home-v2 .hv-hero-shot-back { display: none; } /* Radial halo behind the capture. */ body.home-v2 .hv-hero-visual::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 250px; height: 250px; border-radius: 50%; background: radial-gradient(circle, rgba(249, 115, 22, 0.16), rgba(249, 115, 22, 0) 65%); pointer-events: none; } /* The capture is sized off the AVAILABLE HEIGHT, never a fixed pixel width, so the CTA below it clears the fold on any phone from 360x640 up. svh excludes the browser URL bar. See handoff-responsive.md. aspect-ratio derives the width from that height, and object-fit:contain guarantees the app screen is never cropped top or bottom. */ body.home-v2 .hv-hero-shot-front { width: auto; margin-left: 0; height: min(38vw, 30svh); aspect-ratio: 1290 / 2796; border-radius: 20px; border: 2px solid rgba(255, 255, 255, 0.12); box-shadow: 0 0 52px var(--hv-accent-glow-m), 0 18px 44px rgba(0, 0, 0, 0.6); } body.home-v2 .hv-hero-shot-front img { width: 100%; height: 100%; object-fit: contain; } /* One CTA only on mobile, full width. The Founders button is dropped from the hero; the Founders section is still reachable below and from the nav. */ body.home-v2 .hv-hero-ctas { display: block; width: 100%; } body.home-v2 .hv-hero-actions { align-items: stretch; text-align: center; } body.home-v2 .hv-hero-ctas .hv-btn-ghost { display: none; } body.home-v2 .hv-hero-ctas .hv-btn { width: 100%; } body.home-v2 .hv-hero-band { margin-top: 14px; padding-top: 0; border-top: 0; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 13px; } body.home-v2 .hv-hero-band-stores { margin-left: 0; order: -1; } body.home-v2 .hv-hero-band-label { display: none; } body.home-v2 .hv-markets { gap: 10px; font-size: 13px; justify-content: center; color: var(--hv-text-3); } body.home-v2 .hv-store-badge img { height: 40px; } body.home-v2 .hv-store-badge-google img { height: 49px; } /* Product ------------------------------------------------------------- */ body.home-v2 .hv-product-inner { gap: 36px; } body.home-v2 .hv-feature-lead { gap: 14px; } body.home-v2 .hv-feature-lead .hv-shot { border-radius: 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } /* The vertical list becomes a 2x2 grid of pill chips. Horizontally scrollable chips are forbidden by the handoff: they truncated labels. */ body.home-v2 .hv-selector { flex-direction: column; gap: 16px; } body.home-v2 .hv-tablist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } body.home-v2 .hv-tab { min-height: 46px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px 10px; border-radius: var(--hv-r-pill); border: 1.5px solid var(--hv-border-4); background: rgba(255, 255, 255, 0.02); color: var(--hv-text-link); font-size: 14px; font-weight: 800; line-height: 1.2; } body.home-v2 .hv-tab:hover { background: rgba(255, 255, 255, 0.05); } body.home-v2 .hv-tab[aria-selected="true"] { background: rgba(249, 115, 22, 0.18); color: var(--hv-text); } /* The orange rail is a desktop-only affordance. */ body.home-v2 .hv-tab::before { display: none; } body.home-v2 .hv-tab-inner { display: none; } body.home-v2 .hv-chip-label { display: block; } body.home-v2 .hv-selector-stage { position: static; flex: 0 0 auto; width: 100%; } /* Title and text move from the tab into the panel card. */ body.home-v2 .hv-panel-card { border: 1px solid var(--hv-border-2); border-radius: 24px; padding: 22px; background: var(--hv-card); } body.home-v2 .hv-panel-card > h3 { display: block; font-size: 22px; font-weight: 800; margin: 0; line-height: 1.2; } body.home-v2 .hv-panel-card > p { display: block; font-size: 15px; line-height: 1.5; font-weight: 500; color: var(--hv-text-2); margin: 0; } body.home-v2 .hv-panel-card .hv-shot { border-radius: 24px; box-shadow: none; } /* Pricing ------------------------------------------------------------- */ body.home-v2 .hv-price-grid { flex-direction: column; } body.home-v2 .hv-price-head { flex-direction: column; align-items: flex-start; gap: 10px; } body.home-v2 .hv-price-main .hv-btn { margin-top: 0; } /* Founders ------------------------------------------------------------ */ body.home-v2 .hv-founders-grid { grid-template-columns: 1fr; } body.home-v2 .hv-founders-cta { flex-direction: column; align-items: stretch; text-align: center; } body.home-v2 .hv-founders-cta .hv-btn { width: 100%; } /* Final CTA ----------------------------------------------------------- */ body.home-v2 .hv-final-inner .hv-btn { width: 100%; } } /* -------------------------------------------------------------------------- 15. Short-viewport fallbacks for the mobile fold -------------------------------------------------------------------------- Rule: "Test Gid for free" must be fully visible without scrolling on any phone from 360x640 up, URL bar included, and with the consent bar showing. Two escalating steps as vertical room disappears. */ @media (max-width: 767px) and (max-height: 740px) { body.home-v2 .hv-hero { padding-top: calc(var(--hv-nav-h) + 14px); } body.home-v2 .hv-hero-copy { gap: 9px; } body.home-v2 .hv-hero-grid { row-gap: 10px; } body.home-v2 .hv-hero-shot-front { height: min(30vw, 20svh); } body.home-v2 .hv-hero-sub { font-size: 15px; } } /* Below roughly 660px of usable height there is no honest way to keep the capture above the CTA. Rather than pushing the CTA under the fold, the capture moves BELOW it: one line in the grid template, no reordering of the DOM and no display:contents. */ @media (max-width: 767px) and (max-height: 659px) { body.home-v2 .hv-hero-grid { grid-template-areas: "copy" "actions" "visual"; } body.home-v2 .hv-hero-visual { margin-top: 14px; } body.home-v2 .hv-hero-shot-front { height: min(34vw, 26svh); } } /* -------------------------------------------------------------------------- 16. Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.home-v2 *, body.home-v2 *::before, body.home-v2 *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } body.home-v2 .hv-btn:hover { transform: none; } } /* -------------------------------------------------------------------------- 17. Forced colors / high contrast -------------------------------------------------------------------------- */ @media (forced-colors: active) { body.home-v2 .hv-tab[aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; } } /* -------------------------------------------------------------------------- 18. Print -------------------------------------------------------------------------- */ @media print { body.home-v2 .main-nav, body.home-v2 #gid-cookie-banner, body.home-v2 .hv-hero-visual { display: none !important; } body.home-v2 .hv-panel[hidden] { display: block; } } /* -------------------------------------------------------------------------- 19. Language switcher, retinted for the dark v2 palette -------------------------------------------------------------------------- The shared switcher ships as a light pill (inline