:root { --navy: #0F2A44; --teal: #1FB6B0; --warm-grey: #F5F2ED; --white: #FFFFFF; --ink: #0F2A44; /* Extended tokens — mirror Products page (bed-variants-06-depth.html) */ --body: #2C2C2A; --muted: #5F5E5A; --teal-08: rgba(31, 182, 176, 0.08); --teal-15: rgba(31, 182, 176, 0.15); --teal-25: rgba(31, 182, 176, 0.25); --t-fast: 200ms; --t-med: 350ms; --t-slow: 600ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-tight: "Inter Tight", var(--font-display); --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--warm-grey); color: var(--ink); font-family: var(--font-display); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Keep horizontal bleed contained, but ONLY on body — putting overflow-x on silently breaks position: sticky for the site nav. */ body { overflow-x: clip; } main { display: block; } /* ---------- Hero ---------- */ .hero { position: relative; width: 100%; /* Scroll distance: ~3 viewport heights of pinned scrubbing. ScrollTrigger uses this section as the trigger; height is set so the natural document flow reserves the scroll runway. */ height: 400vh; background: var(--white); } .hero-sticky { position: sticky; top: 0; width: 100%; height: 100vh; height: 100svh; overflow: hidden; background: var(--white); /* Lock the GSAP-pinned hero below the shared site nav (z-index 1000). Without this, GSAP's pin sets position:fixed with z-index:auto and paints over the navigation. */ z-index: 1; } .hero-stage { position: relative; width: 100%; height: 100%; } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--white); display: block; /* Avoid first-frame flash before metadata loads */ opacity: 0; transition: opacity 240ms ease; } .hero-video.is-ready { opacity: 1; } /* Loader */ .hero-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; pointer-events: none; transition: opacity 240ms ease; } .hero-loader.is-hidden { opacity: 0; } .hero-loader-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--navy); opacity: 0.35; animation: loader-bounce 1.1s infinite ease-in-out; } .hero-loader-dot:nth-child(2) { animation-delay: 0.15s; } .hero-loader-dot:nth-child(3) { animation-delay: 0.3s; } @keyframes loader-bounce { 0%, 80%, 100% { transform: scale(0.8); opacity: 0.35; } 40% { transform: scale(1); opacity: 1; } } /* Persistent top title — full-width hero headline */ .hero-title { position: absolute; top: clamp(28px, 6vh, 80px); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 clamp(20px, 4vw, 64px); pointer-events: none; } .hero-title .hero-kicker { margin-bottom: 0; opacity: 0.8; font-size: clamp(0.78rem, 0.9vw, 0.92rem); } .hero-title-text { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 7vw, 6rem); letter-spacing: -0.035em; line-height: 1; color: var(--navy); text-align: center; text-wrap: balance; } /* Customer nickname, demoted beneath the official product name. Teal keeps it secondary to the navy title while staying legible over the grey mattress/chassis in the animation. */ .hero-title-aka { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 2vw, 1.6rem); letter-spacing: -0.01em; line-height: 1.1; color: var(--teal); } @media (max-width: 820px) { .hero-title { top: clamp(20px, 4vh, 40px); } .hero-title-text { font-size: clamp(2rem, 9vw, 3.2rem); } .hero-title-aka { font-size: clamp(0.95rem, 3.4vw, 1.2rem); } } /* Overlay cards */ .hero-overlay { position: absolute; inset: 0; pointer-events: none; } .hero-card { position: absolute; top: 50%; right: clamp(24px, 4vw, 64px); left: auto; transform: translateY(-50%); width: min(420px, 38vw); padding: clamp(20px, 2vw, 32px); border-radius: 20px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.55) 100% ); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 20px 60px -20px rgba(15, 42, 68, 0.25), 0 4px 14px -6px rgba(15, 42, 68, 0.12); opacity: 0; will-change: opacity, transform; } .hero-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); opacity: 0.85; margin-bottom: 14px; } .hero-kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(31, 182, 176, 0.18); } .hero-headline { margin: 0 0 12px 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; font-size: clamp(1.8rem, 2.8vw, 2.6rem); color: var(--navy); text-wrap: balance; } .hero-body { margin: 0 0 18px 0; font-size: clamp(0.92rem, 1vw, 1.02rem); line-height: 1.5; color: var(--navy); opacity: 0.78; text-wrap: pretty; } .hero-tags { display: flex; flex-wrap: wrap; gap: 8px; } .hero-card[data-step="1"] { right: auto; left: clamp(24px, 4vw, 64px); } .hero-tag { display: inline-flex; align-items: center; padding: 6px 12px; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.01em; color: var(--navy); background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(15, 42, 68, 0.08); border-radius: 999px; } /* Curated static hero — used on touch devices and as a safety fallback when the bed-assembly video can't load. Hidden by default; revealed when carries .mode-static-hero or @media (prefers-reduced-motion). */ .static-hero { display: none; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: clamp(20px, 6vw, 56px) clamp(20px, 5vw, 40px); text-align: center; background: var(--white); overflow-y: auto; } .static-hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-family: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; color: var(--teal); } .static-hero-eyebrow-mark { display: inline-block; width: 24px; height: 1px; background: var(--teal); } .static-hero-title { margin: 0; font-family: "Inter Tight", "Inter", system-ui, sans-serif; font-weight: 600; font-size: clamp(2.4rem, 9vw, 4.2rem); line-height: 1.02; letter-spacing: -0.025em; color: var(--navy); } .static-hero-aka { margin: 2px 0 0; font-family: "Inter Tight", "Inter", system-ui, sans-serif; font-weight: 600; font-size: clamp(1rem, 3.6vw, 1.35rem); letter-spacing: -0.01em; color: var(--teal); } /* The three text headlines — the heart of the mobile/iPad hero */ .static-hero-pillars { list-style: none; margin: clamp(14px, 4vw, 26px) 0 6px; padding: 0; display: flex; flex-direction: column; gap: clamp(12px, 3vw, 18px); max-width: 460px; text-align: center; } .static-hero-pillars li { margin: 0; font-size: clamp(14px, 2.3vw, 16px); line-height: 1.5; color: var(--muted, #5F5E5A); } .static-hero-pillars strong { display: block; margin-bottom: 3px; font-family: "Inter Tight", "Inter", system-ui, sans-serif; font-weight: 600; font-size: clamp(1.2rem, 4.4vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.1; color: var(--navy); } .static-hero-sub { margin: 0; max-width: 540px; font-size: clamp(15px, 2.3vw, 17px); line-height: 1.55; color: var(--muted, #5F5E5A); } .static-hero-figure { margin: clamp(8px, 2vw, 18px) 0 0; width: 100%; max-width: 720px; } .static-hero-figure img { display: block; width: 100%; height: auto; border-radius: 14px; } .static-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; } .static-hero-actions .btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; border: 1px solid rgba(31, 182, 176, 0.25); border-radius: 999px; background: var(--white); color: var(--navy); font-family: "Inter", system-ui, sans-serif; font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1); } .static-hero-actions .btn:hover { border-color: var(--teal); } .static-hero-actions .btn-primary { background: var(--teal); border-color: var(--teal); color: var(--white); } .static-hero-actions .btn-primary:hover { background: #189c97; border-color: #189c97; } /* Mobile / narrow */ @media (max-width: 820px) { .hero-card { top: auto; bottom: clamp(20px, 5vw, 48px); left: clamp(16px, 5vw, 32px); right: clamp(16px, 5vw, 32px); width: auto; transform: none; } .hero-headline { font-size: clamp(1.6rem, 6vw, 2.2rem); } .static-hero { text-align: center; align-items: center; } } /* Iframe mode — parent drives scroll; hero is exactly the iframe viewport */ .mode-iframe, .mode-iframe body { background: transparent; } .mode-iframe .hero { height: 100vh; height: 100svh; } .mode-iframe .below-hero { display: none; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .hero { height: 100vh; height: 100svh; } .hero-video { display: none; } .hero-overlay { display: none; } .static-hero { display: flex; } .hero-loader { display: none; } } /* Static hero — used on mobile/narrow viewports and as a safety fallback when the bed-assembly video can't load. Same rules as reduced-motion. */ .mode-static-hero .hero { height: 100vh; height: 100svh; } .mode-static-hero .hero-video, .mode-static-hero .hero-overlay, .mode-static-hero .hero-loader { display: none; } .mode-static-hero .static-hero { display: flex; } /* ============================================================ BELOW-HERO HOME CONTENT ------------------------------------------------------------ Three editorial bands that match the Products page design system (bed-variants-06-depth.html). The hero above is left untouched. Hidden in iframe mode so the hero remains a self-contained Wix embed. ============================================================ */ .below-hero { background: var(--warm-grey); position: relative; z-index: 1; } .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } /* ---------- Section primitives (mirror Products page) ---------- */ .section { padding: 96px 0; } .section-head { margin-bottom: 32px; } .section-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 16px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); line-height: 1; } .section-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--teal); flex: 0 0 24px; } .section-eyebrow-centered { justify-content: center; } .section-title { margin: 0; font-family: var(--font-tight); font-weight: 500; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--navy); text-wrap: balance; } /* ---------- Band 1: Range ---------- */ .section-range { background: var(--white); } .range-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } @media (max-width: 1024px) { .range-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .range-card { display: block; } .range-card-link { display: flex; flex-direction: column; gap: 16px; height: 100%; padding: 18px; background: var(--white); border: 1px solid var(--teal-15); border-radius: 14px; text-decoration: none; color: inherit; box-shadow: 0 2px 12px rgba(15, 42, 68, 0.04); transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); } .range-card-link:hover { border-color: var(--teal-25); box-shadow: 0 14px 32px rgba(15, 42, 68, 0.08); transform: translateY(-2px); } .range-card-link:focus { outline: none; } .range-card-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } .range-card-thumb { position: relative; margin: 0; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #ffffff; } .range-card-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 6px; } .range-card-body { flex: 1; } .range-card-title { margin: 0 0 12px; font-family: var(--font-tight); font-weight: 500; font-size: 24px; letter-spacing: -0.01em; line-height: 1.2; color: var(--navy); } .range-card-title-sub { display: inline-block; margin-left: 4px; font-size: 15px; font-weight: 400; color: var(--muted); letter-spacing: 0; } .range-card-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .range-card-features li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.45; color: var(--body); } .range-card-features li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); opacity: 0.6; } .range-card-more { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--teal); } .range-card-more-arrow { display: inline-block; transition: transform var(--t-fast) var(--ease); } .range-card-link:hover .range-card-more-arrow { transform: translateX(3px); } /* ---------- Band 2: Stats ---------- */ .stats-band { background: var(--teal); color: var(--white); padding: 56px 0; } .stats-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; text-align: center; align-items: start; } .stat-num { margin-bottom: 10px; font-family: var(--font-tight); font-weight: 500; font-size: clamp(2.2rem, 4.5vw, 3.5rem); letter-spacing: -0.02em; line-height: 1; color: var(--white); font-feature-settings: 'tnum' 1, 'ss01' 1; font-variant-numeric: tabular-nums; } .stat-label { font-size: 14px; line-height: 1.45; color: var(--white); opacity: 0.92; } /* ---------- Band 3: CTA ---------- */ .section-cta { background: var(--white); } .cta-inner { max-width: 640px; margin: 0 auto; text-align: center; } .cta-title { margin: 0 0 14px; font-family: var(--font-tight); font-weight: 500; font-size: clamp(2rem, 3.4vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.15; color: var(--navy); text-wrap: balance; } .cta-sub { margin: 0 0 28px; font-size: 16px; line-height: 1.55; color: var(--muted); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 8px; font-family: var(--font-display); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; border: 1px solid var(--navy); background: transparent; color: var(--navy); transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .btn:hover { background: rgba(15, 42, 68, 0.05); } .btn:focus { outline: none; } .btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } .btn-primary { background: var(--teal); border-color: var(--teal); color: var(--white); } .btn-primary:hover { background: #1aa19c; border-color: #1aa19c; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .section { padding: 72px 0; } .range-grid { gap: 16px; } } @media (max-width: 820px) { .container { padding: 0 16px; } .section { padding: 56px 0; } .section-head { margin-bottom: 24px; } .range-grid { grid-template-columns: 1fr; gap: 14px; } .range-card-thumb { aspect-ratio: 16 / 9; } .range-card-title { font-size: 22px; } .stats-band { padding: 40px 0; } .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; } .cta-sub { font-size: 15px; } } @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } } /* ---------- Reduced motion (below-hero only) ---------- */ @media (prefers-reduced-motion: reduce) { .range-card-link, .range-card-more-arrow, .btn { transition: none !important; } .range-card-link:hover { transform: none; } .range-card-link:hover .range-card-more-arrow { transform: none; } }