/* ═══════════════════════════════════════════════════════════════ * homepage-apple.css | Apple-Inspired Monochrome Redesign * Loaded after homepage-v3.css — overrides all colour styles. * Design system: deep black · crisp white · spectrum of grays * Motion: CSS keyframes + scroll-driven progress bar + * hardware-accelerated IO-powered reveals * ══════════════════════════════════════════════════════════════ */ /* ── 1. DESIGN TOKENS ─────────────────────────────────────── */ :root { --ink: #1d1d1f; --ink-90: rgba(29,29,31,.90); --ink-60: rgba(29,29,31,.60); --ink-40: rgba(29,29,31,.40); --ink-12: rgba(29,29,31,.12); --ink-06: rgba(29,29,31,.06); --surface: #f5f5f7; --white: #ffffff; --black: #0a0a0a; --border: rgba(29,29,31,.12); --border-2: #e8e8ed; --accent-blue: #7aa7ff; --accent-cyan: #74d1dd; --accent-emerald: #7fd3b0; --accent-gold: #efc983; --accent-violet: #b79cff; --accent-rose: #efb0cb; /* Neutralise brand colours */ --brand1: #0a0a0a; --brand2: #3a3a3c; --brand3: #636366; --brand4: #8e8e93; --text: #1d1d1f; --muted: rgba(29,29,31,.60); --muted2: rgba(29,29,31,.40); /* Easings */ --spring: cubic-bezier(.16,1,.3,1); --ease: cubic-bezier(.4,0,.2,1); /* Border radii */ --r-sm: 10px; --r-md: 16px; --r-lg: 22px; } /* ── 2. BASE ───────────────────────────────────────────────── */ html { scroll-behavior: smooth; overflow-x: hidden; } body { background: #fff; color: #1d1d1f; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── 3. CSS SCROLL PROGRESS BAR (scroll-driven, no JS) ──────── */ @supports (animation-timeline: scroll()) { body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 2px; background: #0a0a0a; transform-origin: 0 50%; transform: scaleX(0); z-index: 9999; pointer-events: none; animation: apProgress linear; animation-timeline: scroll(root block); } } @keyframes apProgress { to { transform: scaleX(1); } } /* ── 4. KEYFRAMES ──────────────────────────────────────────── */ @keyframes apReveal { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: translateY(0); } } @keyframes apWordUp { from { transform: translateY(110%); } to { transform: translateY(0); } } @keyframes apFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes apMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes apPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(.88); } } @keyframes apHeroDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, -1.25%, 0) scale(1.015); } 100% { transform: translate3d(0, 0, 0) scale(1); } } @keyframes apHeroGlow { 0%, 100% { opacity: .55; transform: translate3d(0, 0, 0) scale(1); } 50% { opacity: .88; transform: translate3d(0, -1.5%, 0) scale(1.04); } } @keyframes apHeroShimmer { 0%, 100% { opacity: .3; transform: translate3d(0, 0, 0); } 50% { opacity: .55; transform: translate3d(0, -4px, 0); } } /* ── 5. SCROLL REVEAL SYSTEM ──────────────────────────────── */ /* * .hp-js ── added by inline script in before first paint * so elements are hidden from the start (no FOUC). * .sm-reveal ── standalone elements revealed by IntersectionObserver. * .sm-stagger ── container; all direct children are auto-revealed * with staggered transition-delays (set by JS). */ /* Standalone reveal */ .hp-js .sm-reveal { opacity: 0; transform: translateY(32px); transition: opacity .80s var(--spring), transform .80s var(--spring); will-change: transform, opacity; } .hp-js .sm-reveal.visible { opacity: 1; transform: translateY(0); } /* Grid children (stagger delays set inline by JS) */ .hp-js .sm-stagger > * { opacity: 0; transform: translateY(32px); transition: opacity .80s var(--spring), transform .80s var(--spring); will-change: transform, opacity; } .hp-js .sm-stagger > *.visible { opacity: 1; transform: translateY(0); } /* ── 6. HERO WORD-SPLIT ANIMATION (pure CSS) ──────────────── */ .hero-line { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.28em; } .hero-word { display: inline-block; overflow: hidden; line-height: 1.19; vertical-align: bottom; } .hero-word span { display: block; animation: apWordUp 1.05s var(--spring) both; } /* Stagger per word within each line */ .hero-line:nth-child(1) .hero-word:nth-child(1) span { animation-delay: .00s; } .hero-line:nth-child(1) .hero-word:nth-child(2) span { animation-delay: .08s; } .hero-line:nth-child(1) .hero-word:nth-child(3) span { animation-delay: .16s; } .hero-line:nth-child(2) .hero-word:nth-child(1) span { animation-delay: .26s; } .hero-line:nth-child(2) .hero-word:nth-child(2) span { animation-delay: .34s; } .hero-line:nth-child(2) .hero-word:nth-child(3) span { animation-delay: .42s; } /* ── 7. HOME HERO ─────────────────────────────────────────── */ .home-hero { background-color: #ffffff !important; padding: 200px 0 120px !important; overflow: hidden !important; position: relative !important; isolation: isolate; color: var(--ink); } .home-hero::before, .home-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; } .home-hero::before { background-image: radial-gradient(circle at 12% 18%, rgba(148, 163, 184, 0.16) 0 1px, transparent 1.6px), radial-gradient(circle at 24% 68%, rgba(148, 163, 184, 0.09) 0 1px, transparent 1.6px), radial-gradient(circle at 43% 32%, rgba(148, 163, 184, 0.1) 0 1px, transparent 1.6px), radial-gradient(circle at 61% 22%, rgba(148, 163, 184, 0.14) 0 1px, transparent 1.6px), radial-gradient(circle at 74% 56%, rgba(148, 163, 184, 0.1) 0 1px, transparent 1.6px), radial-gradient(circle at 88% 28%, rgba(148, 163, 184, 0.08) 0 1px, transparent 1.6px), radial-gradient(circle at 82% 78%, rgba(148, 163, 184, 0.12) 0 1px, transparent 1.6px), radial-gradient(circle at 36% 82%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 42%), radial-gradient(circle at 66% 42%, rgba(148, 163, 184, 0.08), rgba(255, 255, 255, 0) 34%); background-size: 320px 320px, 280px 280px, 340px 340px, 360px 360px, 300px 300px, 260px 260px, 380px 380px, 100% 100%, 100% 100%; animation: apHeroDrift 34s ease-in-out infinite, apHeroShimmer 12s ease-in-out infinite; opacity: .75; } .home-hero::after { background: radial-gradient(circle at 20% 20%, rgba(248, 250, 252, 0.94), rgba(248, 250, 252, 0) 28%), radial-gradient(circle at 80% 18%, rgba(219, 234, 254, 0.24), rgba(219, 234, 254, 0) 26%), radial-gradient(circle at 50% 82%, rgba(226, 232, 240, 0.42), rgba(226, 232, 240, 0) 30%); filter: blur(8px); opacity: .55; animation: apHeroGlow 18s ease-in-out infinite; } .home-hero h1 { color: var(--ink); font-family: Helvetica, sans-serif; font-size: clamp(52px, 7.5vw, 98px); font-weight: 500; letter-spacing: -.040em; line-height: .94; margin: 0 auto 28px; max-width: 960px; text-wrap: balance; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85); } .home-hero h2 { color: rgba(29,29,31,.72); font-size: clamp(16px, 1.6vw, 21px); font-weight: 400; line-height: 1.6; max-width: 540px; margin: 0 auto 44px; animation: apReveal .9s var(--spring) .75s both; } .home-hero h2 small { display: block !important; color: rgba(29,29,31,.42) !important; margin-top: 8px !important; } .home-hero .cta-buttons { animation: apReveal .85s var(--spring) 1.05s both; } .home-hero .features-link { color: rgba(29,29,31,.48) !important; font-size: 13px !important; animation: apFadeIn .7s ease 1.4s both; } .home-hero .features-link:hover { color: rgba(29,29,31,.82) !important; transition: color .2s !important; } /* Hero CTA buttons */ .btn-hero-primary { background: linear-gradient(180deg, #ffffff 0%, #f7f7fa 100%) !important; color: var(--ink) !important; border: 1px solid rgba(29,29,31,.12) !important; font-weight: 700 !important; font-size: 15px !important; padding: 14px 28px !important; border-radius: 999px !important; box-shadow: 0 10px 30px rgba(15, 23, 42, .08) !important; letter-spacing: -.01em !important; transition: background .2s, transform .4s var(--spring), box-shadow .3s !important; } .btn-hero-primary:hover { background: linear-gradient(180deg, #ffffff 0%, #f2f4f8 100%) !important; transform: scale(1.04) translateY(-2px) !important; box-shadow: 0 16px 36px rgba(15, 23, 42, .10) !important; } .btn-hero-outline { border: 1px solid rgba(29,29,31,.14) !important; color: rgba(29,29,31,.82) !important; background: rgba(255,255,255,.55) !important; font-size: 15px !important; padding: 14px 28px !important; border-radius: 999px !important; backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%); transition: all .2s !important; } .btn-hero-outline:hover { background: rgba(255,255,255,.92) !important; border-color: rgba(29,29,31,.20) !important; color: var(--ink) !important; } @media (prefers-reduced-motion: reduce) { .home-hero::before, .home-hero::after, .home-hero h1, .home-hero h2, .home-hero .cta-buttons, .home-hero .features-link { animation: none !important; } } /* ── 8. MARQUEE MODULE STRIP ──────────────────────────────── */ .sm-marquee { overflow: hidden; padding: 26px 0; background: #fff; border-top: 1px solid #e8e8ed; border-bottom: 1px solid #e8e8ed; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .sm-marquee-track { display: flex; width: max-content; animation: apMarquee 40s linear infinite; } .sm-marquee-track:hover { animation-play-state: paused; } .sm-marquee-item { display: inline-flex; align-items: center; gap: 9px; padding: 0 36px; font-size: 13px; font-weight: 500; color: #aeaeb2; white-space: nowrap; letter-spacing: -.01em; } .sm-marquee-item .material-icons { font-size: 15px; color: #c7c7cc; } /* Kill aurora everywhere */ .aurora { display: none !important; } /* ── 9. HP PILL ───────────────────────────────────────────── */ .hp-pill { background: rgba(0,0,0,.04) !important; border: 1px solid rgba(0,0,0,.09) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: #3a3a3c !important; } .hp-pill .dot { background: #0a0a0a !important; box-shadow: none !important; } /* ── 10. HP BUTTONS ───────────────────────────────────────── */ .hp-btn-primary { background: #0a0a0a !important; color: #fff !important; border-color: #0a0a0a !important; border-radius: 999px !important; box-shadow: none !important; transition: background .2s, transform .4s var(--spring), box-shadow .3s !important; } .hp-btn-primary:hover { background: #1c1c1e !important; transform: scale(1.04) translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0,0,0,.16) !important; } .hp-btn-ghost { background: transparent !important; border: 1px solid #d2d2d7 !important; color: #1d1d1f !important; border-radius: 999px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: background .2s, border-color .2s, transform .3s !important; } .hp-btn-ghost:hover { background: #f5f5f7 !important; border-color: #8e8e93 !important; transform: scale(1.02) !important; } .hp-btn:active { transform: scale(.98) !important; } /* ── 11. SECTIONS ─────────────────────────────────────────── */ .section { background: #fff; } .hero { padding: 100px 0; } #platform { background: #f5f5f7; } #platform { background: linear-gradient(180deg, #f8fafc 0%, #f5f5f7 100%); } #pillars { background: linear-gradient(180deg, #f7f8fb 0%, #f5f5f7 100%); } #ai { background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%); } #how { background: linear-gradient(180deg, #f5f5f7 0%, #f8fafc 100%); } #trust { background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%); } /* Section typography */ .section-modular-title { font-size: clamp(30px, 3vw, 46px) !important; letter-spacing: -.04em !important; color: #1d1d1f !important; } .section-modular-title::after { background: linear-gradient(90deg, rgba(122,167,255,.88), rgba(127,211,176,.88), rgba(183,156,255,.88)) !important; } .section-title { font-size: clamp(34px, 3.8vw, 56px) !important; letter-spacing: -.045em !important; color: #1d1d1f !important; line-height: 1.04 !important; margin-bottom: 16px !important; } .section-subtitle { font-size: clamp(15px, 1.4vw, 18px) !important; color: #6e6e73 !important; line-height: 1.65 !important; max-width: 600px !important; margin-bottom: 64px !important; } /* ── 12. PLATFORM BROWSER ────────────────────────────────── */ /* Platform must stay visible — do NOT apply sm-reveal */ .platform-list { background: #fff !important; border: 1px solid rgba(122,167,255,.14) !important; border-radius: 20px !important; box-shadow: 0 20px 48px rgba(15,23,42,.03), 0 0 0 1px rgba(122,167,255,.03) !important; overflow: hidden !important; } .search { background: #f5f5f7 !important; border: 1px solid rgba(122,167,255,.14) !important; border-radius: 10px !important; } .chip { background: transparent !important; border: 1px solid rgba(122,167,255,.12) !important; border-radius: 999px !important; color: #6e6e73 !important; transition: all .2s !important; } .chip:hover { background: #f5f5f7 !important; border-color: rgba(122,167,255,.25) !important; color: #1d1d1f !important; box-shadow: none !important; } .chip.active { background: linear-gradient(135deg, rgba(122,167,255,.95), rgba(183,156,255,.95)) !important; border-color: rgba(122,167,255,.95) !important; color: #fff !important; } .platform-spotlight { background: #fff !important; border: 1px solid rgba(122,167,255,.14) !important; border-radius: 20px !important; box-shadow: 0 20px 48px rgba(15,23,42,.03) !important; } .platform-spotlight::before { display: none !important; } .spot-icon-wrap { background: linear-gradient(135deg, rgba(122,167,255,.95), rgba(127,211,176,.9)) !important; border-radius: 14px !important; box-shadow: 0 10px 24px rgba(122,167,255,.16) !important; animation: none !important; } .spot-icon-wrap::after { display: none !important; } .spot-preview { background: #f5f5f7 !important; border: 1px solid rgba(122,167,255,.12) !important; border-radius: 16px !important; } .spot-preview::before { display: none !important; } .preview-row { background: rgba(255,255,255,.94) !important; border: 1px solid rgba(122,167,255,.08) !important; border-radius: 8px !important; } .spot-bullets li::before { background: linear-gradient(135deg, rgba(122,167,255,.92), rgba(127,211,176,.92)) !important; box-shadow: 0 0 0 3px rgba(122,167,255,.08) !important; } .ai-sample { background: #f5f5f7 !important; border: 1px solid rgba(122,167,255,.12) !important; border-radius: 14px !important; } .ai-sample::before { background: linear-gradient(90deg, rgba(122,167,255,.95), rgba(183,156,255,.95)) !important; } .ai-sample .k { color: #1d1d1f !important; } .ai-sample .k .material-icons { animation: none !important; color: #7aa7ff !important; } .spot-actions { border-top: 1px solid rgba(122,167,255,.10) !important; } .feature-tag { background: #f5f5f7 !important; border: 1px solid rgba(122,167,255,.12) !important; border-radius: 999px !important; color: #6e6e73 !important; } .tag-dot { background: linear-gradient(135deg, rgba(122,167,255,.95), rgba(127,211,176,.95)) !important; } /* ── 13. PILLARS / FEATURE CARDS ─────────────────────────── */ .pillars { gap: 14px !important; margin-top: 56px !important; } .pillar { background: #fff !important; border: 1px solid rgba(122,167,255,.12) !important; border-radius: 20px !important; padding: 32px 26px !important; box-shadow: 0 16px 40px rgba(15,23,42,.03) !important; /* Hover defined here; transition-delay cleared by JS after reveal */ transition: opacity .80s var(--spring), transform .80s var(--spring), box-shadow .40s var(--spring), border-color .20s !important; cursor: default; will-change: transform, opacity; } /* Hover must win over the IO-revealed state */ .hp-js .sm-stagger > .pillar.visible:hover, .pillar:hover { box-shadow: 0 16px 44px rgba(122,167,255,.08) !important; border-color: rgba(122,167,255,.22) !important; transform: translateY(-5px) !important; } .ic { width: 44px !important; height: 44px !important; border-radius: 12px !important; box-shadow: 0 10px 22px rgba(15,23,42,.05) !important; } .ic .material-icons { font-size: 20px !important; color: #fff !important; } .g1 { background: linear-gradient(135deg, rgba(122,167,255), rgba(183,156,255)) !important; } .g2 { background: linear-gradient(135deg, rgba(127,211,176), rgba(116,209,221)) !important; } .g3 { background: linear-gradient(135deg, rgba(239,201,131), rgba(239,176,203)) !important; } .g4 { background: linear-gradient(135deg, rgba(122,167,255), rgba(127,211,176)) !important; } .pillar h3 { font-size: 16px !important; font-weight: 700 !important; letter-spacing: -.02em !important; color: #1d1d1f !important; margin-bottom: 8px !important; } .pillar p { font-size: 13.5px !important; color: #6e6e73 !important; line-height: 1.62 !important; margin-bottom: 16px !important; } .proof { font-size: 11px !important; font-weight: 600 !important; color: #1d1d1f !important; background: #f5f5f7 !important; border: 1px solid rgba(122,167,255,.12) !important; border-radius: 999px !important; padding: 4px 12px !important; letter-spacing: 0 !important; } /* ── 15. TEMPLATES SECTION ───────────────────────────────── */ .templates-section { background: #f5f5f7 !important; padding: 100px 0 !important; } .templates-section::before { display: none !important; } .templates-eyebrow { background: rgba(0,0,0,.05) !important; border: 1px solid rgba(0,0,0,.09) !important; border-radius: 999px !important; color: #1d1d1f !important; backdrop-filter: none !important; } .templates-eyebrow .material-icons { color: #0a0a0a !important; } .templates-header h2 { font-size: clamp(34px, 3.5vw, 56px) !important; letter-spacing: -.045em !important; color: #1d1d1f !important; line-height: 1.04 !important; } .templates-header p { color: #6e6e73 !important; } .template-card { position: relative !important; overflow: hidden !important; background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%) !important; border: 1px solid rgba(122,167,255,.12) !important; border-radius: 20px !important; box-shadow: 0 16px 40px rgba(15,23,42,.03) !important; transition: opacity .80s var(--spring), transform .80s var(--spring), box-shadow .40s ease, border-color .20s !important; will-change: transform, opacity; } .hp-js .sm-stagger > .template-card.visible:hover, .template-card:hover { transform: translateY(-6px) !important; box-shadow: 0 18px 50px rgba(122,167,255,.08) !important; border-color: rgba(122,167,255,.22) !important; } .template-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--card-color-1, rgba(122,167,255,.85)), var(--card-color-2, rgba(183,156,255,.85))) !important; opacity: .45; pointer-events: none; } .template-icon { background: linear-gradient(135deg, var(--card-color-1, rgba(122,167,255,.95)), var(--card-color-2, rgba(183,156,255,.95))) !important; border-radius: 14px !important; box-shadow: 0 12px 24px rgba(122,167,255,.12) !important; } .template-features li .material-icons { color: var(--card-color-1, #7aa7ff) !important; } .template-badge { background: #f5f5f7 !important; border: 1px solid rgba(122,167,255,.12) !important; border-radius: 999px !important; color: #6e6e73 !important; font-size: 12px !important; font-weight: 600 !important; } /* ── 16. HOW IT WORKS ────────────────────────────────────── */ .steps { gap: 14px !important; margin-top: 56px !important; } .step { background: #fff !important; border: 1px solid rgba(122,167,255,.12) !important; border-radius: 20px !important; padding: 32px 26px !important; box-shadow: 0 16px 40px rgba(15,23,42,.03) !important; transition: opacity .80s var(--spring), transform .80s var(--spring), box-shadow .40s ease !important; will-change: transform, opacity; } .hp-js .sm-stagger > .step.visible:hover, .step:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 36px rgba(0,0,0,.06) !important; } .step .n { width: 44px !important; height: 44px !important; background: #0a0a0a !important; color: #fff !important; border-radius: 50% !important; font-size: 15px !important; font-weight: 800 !important; margin-bottom: 20px !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; letter-spacing: -.02em !important; } .step h3 { font-size: 16px !important; font-weight: 700 !important; letter-spacing: -.02em !important; color: #1d1d1f !important; margin-bottom: 8px !important; } .step p { font-size: 13.5px !important; color: #6e6e73 !important; line-height: 1.65 !important; } /* ── 17. TRUST ────────────────────────────────────────────── */ .trust-grid { gap: 14px !important; margin-top: 56px !important; } .trust { background: #fff !important; border: 1px solid rgba(122,167,255,.12) !important; border-radius: 20px !important; padding: 36px !important; box-shadow: 0 16px 40px rgba(15,23,42,.03) !important; transition: opacity .80s var(--spring), transform .80s var(--spring), box-shadow .40s ease !important; will-change: transform, opacity; } .hp-js .sm-stagger > .trust.visible:hover, .trust:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 44px rgba(122,167,255,.06) !important; } .trust h3 { font-size: 17px !important; font-weight: 700 !important; color: #1d1d1f !important; letter-spacing: -.02em !important; margin-bottom: 14px !important; } .trust .item { font-size: 13.5px !important; color: #6e6e73 !important; margin-bottom: 8px !important; } .check .material-icons { color: #7aa7ff !important; } .trust a { color: #4166c5 !important; font-weight: 600 !important; text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-color: rgba(122,167,255,.26) !important; } .trust a:hover { color: #5c77d0 !important; } /* ── 18. CTA BAND ─────────────────────────────────────────── */ .cta-band { background: #0a0a0a !important; padding: 120px 0 !important; } .cta-box { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; max-width: 680px !important; margin: 0 auto !important; } .cta-box h2 { font-size: clamp(52px, 6vw, 88px) !important; font-weight: 800 !important; letter-spacing: -.055em !important; color: #fff !important; line-height: 1.0 !important; margin-bottom: 20px !important; } .cta-box p { color: rgba(255,255,255,.44) !important; font-size: clamp(16px, 1.5vw, 18px) !important; line-height: 1.6 !important; margin-bottom: 42px !important; max-width: 480px !important; } .cta-band .hp-btn-primary { background: #fff !important; color: #0a0a0a !important; border-radius: 999px !important; padding: 16px 38px !important; font-size: 16px !important; font-weight: 700 !important; box-shadow: none !important; } .cta-band .hp-btn-primary:hover { background: #f0f0f0 !important; transform: scale(1.05) !important; box-shadow: 0 10px 32px rgba(255,255,255,.14) !important; } .cta-band .cta-note { color: rgba(255,255,255,.28) !important; font-size: 12px !important; margin-top: 16px !important; } /* ── 19. CAREER QUIZ ──────────────────────────────────────── */ #career-quiz h2 { font-size: clamp(34px, 3.5vw, 56px) !important; letter-spacing: -.045em !important; color: #fff !important; } /* Override inline gradient on the quiz CTA button */ #career-quiz a[href*="career-assessment"] { background: #fff !important; background-image: none !important; color: #0a0a0a !important; box-shadow: none !important; border-radius: 999px !important; } #career-quiz a[href*="career-assessment"]:hover { opacity: .88 !important; } /* Neutralise the inline coloured icon circles */ #career-quiz .hp-container > div > div:last-child > div { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.10) !important; } /* ── 20. FAQ ──────────────────────────────────────────────── */ .faq-section { background: #fff !important; padding: 100px 0 !important; } .faq-header h2 { font-size: clamp(34px, 3.5vw, 52px) !important; letter-spacing: -.04em !important; color: #1d1d1f !important; } .faq-header p { color: #6e6e73 !important; } .accordion-item { border: 1px solid rgba(122,167,255,.12) !important; border-radius: 16px !important; margin-bottom: 8px !important; overflow: hidden; box-shadow: 0 10px 28px rgba(15,23,42,.03) !important; transition: opacity .80s var(--spring), transform .80s var(--spring), box-shadow .3s ease, border-color .2s !important; will-change: transform, opacity; } .hp-js .sm-stagger > .accordion-item.visible:hover, .accordion-item:hover { border-color: rgba(122,167,255,.22) !important; box-shadow: 0 10px 26px rgba(122,167,255,.06) !important; transform: none !important; } .accordion-button { font-size: 15px !important; font-weight: 600 !important; color: #1d1d1f !important; background: #fff !important; padding: 20px 24px !important; letter-spacing: -.01em !important; } .accordion-button:not(.collapsed) { color: #1d1d1f !important; background: #fff !important; box-shadow: none !important; } .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237aa7ff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important; } .accordion-body { font-size: 14px !important; color: #6e6e73 !important; line-height: 1.7 !important; padding: 0 24px 20px !important; } /* ── 21. HOVER MICRO-INTERACTIONS ────────────────────────── */ /* Links */ a { transition: color .18s ease, opacity .18s ease; } /* FAQ CTA buttons */ .faq-cta .hp-btn-ghost { transition: background .2s, border-color .2s, transform .35s var(--spring) !important; } .faq-cta .hp-btn-ghost:hover { transform: scale(1.03) translateY(-2px) !important; } @media (prefers-reduced-motion: reduce) { .ic, .spot-icon-wrap, .template-icon, .pillars, .template-card, .trust, .accordion-item { transition: none !important; } } /* ── 22. RESPONSIVE ───────────────────────────────────────── */ @media (max-width: 992px) { .home-hero { padding: 160px 0 100px !important; } .hero-line { flex-wrap: wrap; } } @media (max-width: 768px) { .home-hero { padding: 130px 0 80px !important; } .cta-box h2 { font-size: 44px !important; } .steps, .trust-grid { grid-template-columns: 1fr !important; } }