/* ========================================================================== InnovationAmp — landing page styles (v3) Organized top to bottom as: variables, resets, layout helpers, then one section per part of the page (nav, hero, how-it-works, etc). ========================================================================== */ :root { /* Colors */ --color-bg: #FDFDFD; --color-bg-alt: #F1F2F5; --color-navy: #13213C; --color-navy-panel: rgba(27, 44, 74, .85); --color-navy-border: #2A3E63; --color-navy-border-strong: #33456B; --color-navy-border-footer: #26375A; --color-navy-input-bg: #1B2C4A; --color-text: #13213C; --color-text-muted: #5A6473; --color-text-faint: #8C94A3; --color-text-on-dark: #FFFFFF; --color-text-on-dark-muted: #A9B3C4; --color-text-on-dark-faint: #7D889C; --color-border: #E5E5E5; --color-accent: #FCA311; --color-accent-hover: #FFB63A; --color-eyebrow: #B07407; /* Layout */ --content-width: 1120px; --content-padding: 28px; --radius: 12px; --radius-sm: 8px; /* Motion */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: 0.18s var(--ease); --transition-medium: 0.4s var(--ease); } /* ---- Reset & base ---------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; overflow-x: hidden; background: var(--color-bg); color: var(--color-text); font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3, p { margin: 0; } /* ---- Layout helpers ---------------------------------------------------- */ .section { padding: 88px var(--content-padding); background: var(--color-bg); } .section-alt { background: var(--color-bg-alt); } .section-inner { max-width: var(--content-width); margin: 0 auto; } .section-inner-relative { position: relative; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-eyebrow); } .section-title { font-size: clamp(28px, 5.5vw, 38px); font-weight: 800; letter-spacing: -0.026em; line-height: 1.1; margin-top: 12px; } .section-title-center { text-align: center; margin-top: 0; max-width: none; } .section-lede { font-size: 17px; line-height: 1.6; color: var(--color-text-muted); margin: 16px auto 0; max-width: 620px; text-align: center; text-wrap: pretty; } .grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; border: none; transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .btn:active { transform: translateY(1px); } .btn-accent { background: var(--color-accent); color: var(--color-navy); padding: 13px 22px; font-weight: 800; } .btn-accent:hover { background: var(--color-accent-hover); } .btn-outline { background: transparent; border: 1.5px solid var(--color-navy); color: var(--color-navy); padding: 11px 22px; } .btn-outline:hover { background: var(--color-navy); color: #fff; } /* Scroll-reveal: elements start hidden/offset, JS adds .is-visible when they enter the viewport. If JS fails to load, they're still visible because .reveal only hides things once .js-ready is on . */ body.js-ready .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } body.js-ready .reveal.is-visible { opacity: 1; transform: none; } /* ---- Nav ---------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 30; background: var(--color-navy); border-bottom: 1px solid var(--color-navy-border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--content-width); margin: 0 auto; padding: 16px var(--content-padding); } .nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; } .nav-mark { width: 22px; height: 22px; background: var(--color-accent); display: grid; place-items: center; border-radius: 4px; } .nav-mark-bar { width: 7px; height: 12px; background: var(--color-navy); } .nav-brand-name { font-weight: 800; font-size: 18px; letter-spacing: -0.015em; } .nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; } .nav-links a { color: var(--color-text-on-dark-muted); text-decoration: none; transition: color var(--transition-fast); } .nav-links a:hover { color: #fff; } .nav-toggle { display: none; width: 40px; height: 40px; border: none; background: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .nav-toggle span { display: block; width: 20px; height: 2px; background: #fff; transition: transform var(--transition-fast), opacity var(--transition-fast); } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-mobile-panel { display: none; flex-direction: column; padding: 8px var(--content-padding) 20px; background: var(--color-navy); border-bottom: 1px solid var(--color-navy-border); } .nav-mobile-panel a { padding: 12px 0; font-size: 15px; font-weight: 600; color: #fff; text-decoration: none; border-top: 1px solid var(--color-navy-border); } .nav-mobile-panel.is-open { display: flex; } .nav-mobile-panel .nav-mobile-cta { align-self: flex-start; margin-top: 14px; border-top: none; color: var(--color-navy); } /* ---- Hero ---------------------------------------------------------------- */ .hero { position: relative; background: var(--color-bg); } .hero-bg { position: absolute; top: 0; left: 0; right: 0; height: 660px; overflow: hidden; background: var(--color-navy); } .hero-bg img, .hero-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; } .hero-bg-still { display: none; } /* Respect the user's OS-level motion preference: show the static frame instead of the autoplaying loop. */ @media (prefers-reduced-motion: reduce) { .hero-bg video { display: none; } .hero-bg-still { display: block; } } .hero-bg-scrim { position: absolute; inset: 0; background: rgba(19, 33, 60, .8); } .hero-bg-gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 33, 60, .35) 0%, rgba(19, 33, 60, 0) 45%, rgba(19, 33, 60, .55) 100%); } .hero-content { position: relative; text-align: center; padding: 80px var(--content-padding) 0; max-width: 900px; margin: 0 auto; color: #fff; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); border: 1px solid var(--color-navy-border); padding: 7px 14px; border-radius: 99px; } .hero-title { font-size: clamp(34px, 7vw, 56px); line-height: 1.06; letter-spacing: -0.028em; font-weight: 800; margin: 24px auto 0; max-width: 820px; text-wrap: balance; } .hero-subtitle { font-size: clamp(16px, 4.4vw, 19px); line-height: 1.55; color: var(--color-text-on-dark-muted); max-width: 640px; margin: 20px auto 0; text-wrap: pretty; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; } .hero-ctas .btn-accent { padding: 14px 26px; font-size: 16px; } .hero-shot-wrap { position: relative; padding: 56px var(--content-padding) 88px; } .hero-shot-inner { position: relative; max-width: 1000px; margin: 0 auto; } .shot-frame { border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 34px 80px -32px rgba(3, 3, 3, .5); overflow: hidden; background: #fff; transition: transform var(--transition-medium); } .shot-frame:hover { transform: translateY(-6px); } .shot-caption { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-text-faint); text-align: center; } /* ---- Perception (3-card section) ------------------------------------------ */ .perk-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 30px; transition: transform var(--transition-medium), box-shadow var(--transition-medium); } .perk-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -28px rgba(19, 33, 60, .25); } .perk-bar { width: 28px; height: 4px; background: var(--color-accent); border-radius: 2px; } .perk-title { font-size: 20px; font-weight: 800; margin: 18px 0 10px; letter-spacing: -0.012em; } .perk-text { font-size: 15px; line-height: 1.65; color: var(--color-text-muted); text-wrap: pretty; } /* ---- Product tabs ---------------------------------------------------------- */ .tab-switch { display: flex; justify-content: center; margin-top: 32px; } .tab-switch-track { display: inline-flex; gap: 4px; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 10px; padding: 5px; } .tab-btn { padding: 10px 20px; border: none; border-radius: 7px; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap; background: transparent; color: var(--color-text-muted); transition: background var(--transition-fast), color var(--transition-fast); } .tab-btn.is-active { background: var(--color-navy); color: #fff; } .tab-blurb { font-size: 17px; line-height: 1.6; color: var(--color-text-muted); margin: 26px auto 0; max-width: 640px; text-align: center; text-wrap: pretty; } .tab-panels { position: relative; max-width: 960px; margin: 52px auto 0; } .tab-panel { display: none; } .tab-panel.is-active { display: block; } .showcase-media { position: relative; padding-bottom: 64px; } .shot-frame-large { width: 86%; } .shot-frame-overlap { position: absolute; right: 0; bottom: 0; width: 52%; border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 26px 56px -22px rgba(19, 33, 60, .5); overflow: hidden; background: #fff; transition: transform var(--transition-medium); } .shot-frame-overlap:hover { transform: translateY(-4px); } /* the report stack has no card frame — it floats with its own shadow */ .shot-floating-overlap { position: absolute; right: 0; bottom: 0; width: 52%; transition: transform var(--transition-medium); } .shot-floating-overlap:hover { transform: translateY(-4px); } /* ---- How it works (dark, photo background) --------------------------------- */ .section-dark { background: var(--color-navy); color: #fff; } .section-dark-photo { position: relative; overflow: hidden; } .section-dark-photo .hero-bg { position: absolute; height: 100%; } .hero-bg-flipped { object-position: center 60% !important; transform: scaleY(-1); } .step-card { position: relative; background: var(--color-navy-panel); border: 1px solid var(--color-navy-border); border-radius: var(--radius); padding: 28px; backdrop-filter: blur(2px); transition: transform var(--transition-medium), border-color var(--transition-medium); } .step-card:hover { transform: translateY(-4px); border-color: var(--color-accent); } .step-number { width: 32px; height: 32px; background: var(--color-accent); color: var(--color-navy); display: grid; place-items: center; font-weight: 800; font-size: 15px; border-radius: var(--radius-sm); } .step-title { font-size: 19px; font-weight: 700; margin: 18px 0 8px; } .step-text { font-size: 15px; line-height: 1.6; color: var(--color-text-on-dark-muted); } /* ---- Pricing ---------------------------------------------------------------- */ .pricing-grid { margin-top: 40px; } .pricing-card { border-radius: 14px; padding: 34px; display: flex; flex-direction: column; transition: transform var(--transition-medium), box-shadow var(--transition-medium); } .pricing-card:hover { transform: translateY(-6px); } .pricing-card.is-light { background: #fff; border: 1px solid var(--color-border); } .pricing-card.is-light:hover { box-shadow: 0 24px 48px -28px rgba(19, 33, 60, .25); } .pricing-card.is-dark { background: var(--color-navy); color: #fff; position: relative; overflow: hidden; } .pricing-card.is-dark:hover { box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .5); } .pricing-stripe-solid { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--color-accent); } .pricing-tier-label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); } .pricing-card.is-dark .pricing-tier-label { color: var(--color-text-on-dark-muted); } .pricing-badge { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; background: var(--color-accent); color: var(--color-navy); padding: 4px 10px; border-radius: 99px; } .pricing-name { font-size: 26px; font-weight: 800; margin: 12px 0 0; letter-spacing: -0.02em; } .pricing-card p.pricing-description { font-size: 15px; line-height: 1.65; color: var(--color-text-muted); margin: 12px 0 0; } .pricing-card.is-light p.pricing-description { flex: none; } .pricing-card.is-dark p.pricing-description { color: var(--color-text-on-dark-muted); flex: 1; } .pricing-price-row { display: flex; align-items: baseline; gap: 8px; margin: 26px 0 0; } .pricing-card.is-light .pricing-price-row { margin-top: auto; } .pricing-price { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; } .pricing-card.is-dark .pricing-price { font-size: 34px; } .pricing-price-note { font-size: 14px; color: var(--color-text-faint); } .pricing-card.is-dark .pricing-price-note { color: var(--color-text-on-dark-muted); } .pricing-price-note-standalone { margin: 4px 0 20px; } .pricing-card .btn { align-self: flex-start; } /* "What's included" disclosure inside the guided-assessment card */ .included-disclosure { margin-top: 14px; } .included-disclosure summary { cursor: pointer; list-style: none; font-weight: 700; color: var(--color-eyebrow); font-size: 15px; } .included-disclosure summary::-webkit-details-marker { display: none; } .included-disclosure[open] .faq-icon { transform: rotate(45deg); } .included-list { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--color-border); list-style: none; } .included-list li { display: flex; gap: 12px; } .included-index { font-size: 13px; font-weight: 800; color: var(--color-accent); width: 18px; flex: none; } .included-list p { font-size: 14.5px; line-height: 1.6; color: var(--color-text-muted); } .included-list strong { color: var(--color-text); } /* ---- FAQ ---------------------------------------------------------------------- */ .faq-layout { display: grid; grid-template-columns: 340px 1fr; gap: 56px; } .faq-heading { font-size: clamp(26px, 5vw, 34px); } .faq-list { display: flex; flex-direction: column; } .faq-item { border-bottom: 1px solid var(--color-border); padding: 18px 0; } .faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; font-size: 17px; font-weight: 700; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-icon { color: var(--color-accent); font-weight: 800; flex: none; transition: transform var(--transition-fast); } .faq-item[open] .faq-icon { transform: rotate(45deg); } .faq-item p { font-size: 15px; line-height: 1.6; color: var(--color-text-muted); margin-top: 12px; max-width: 600px; } .faq-item p + p { margin-top: 10px; } /* ---- Footer ---------------------------------------------------------------------- */ .footer { background: var(--color-navy); color: #fff; } .footer-stripe-solid { height: 4px; background: var(--color-accent); } .footer-inner { padding: 64px var(--content-padding) 26px; max-width: var(--content-width); margin: 0 auto; } .footer-grid { display: grid; grid-template-columns: 1fr 420px; gap: 56px; align-items: center; } .footer-heading { font-size: clamp(26px, 5vw, 34px); font-weight: 800; letter-spacing: -0.024em; line-height: 1.14; } .footer-subtext { font-size: 16px; color: var(--color-text-on-dark-muted); margin-top: 12px; max-width: 460px; } .waitlist-form { display: flex; gap: 10px; } .waitlist-form input { flex: 1; padding: 13px 16px; border: 1px solid var(--color-navy-border-strong); border-radius: var(--radius-sm); font-size: 15px; font-family: inherit; background: var(--color-navy-input-bg); color: #fff; outline: none; transition: border-color var(--transition-fast); } .waitlist-form input:focus { border-color: var(--color-accent); } .waitlist-success { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--color-accent); display: none; } .footer-bottom { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; border-top: 1px solid var(--color-navy-border-footer); margin-top: 48px; padding-top: 22px; font-size: 13px; color: var(--color-text-on-dark-faint); } .footer-brand { display: flex; align-items: center; gap: 10px; } .footer-mark { width: 18px; height: 18px; background: var(--color-accent); display: grid; place-items: center; border-radius: 3px; } .footer-mark-bar { width: 6px; height: 10px; background: var(--color-navy); } .footer-brand strong { color: #fff; } .footer-links { display: flex; flex-wrap: wrap; gap: 16px 24px; } .footer-links a { color: var(--color-text-on-dark-faint); text-decoration: none; transition: color var(--transition-fast); } .footer-links a:hover { color: #fff; } /* ========================================================================== Responsive breakpoints ========================================================================== */ @media (max-width: 1000px) { .grid-3col, .grid-2col, .faq-layout, .footer-grid { grid-template-columns: 1fr !important; gap: 24px; } } @media (max-width: 760px) { .nav-links, .nav-cta { display: none; } .nav-toggle { display: flex; } .section { padding: 64px 20px; } .hero-content { padding-left: 20px; padding-right: 20px; } .hero-shot-wrap { padding-left: 20px; padding-right: 20px; } .showcase-media, .shot-frame-overlap, .shot-floating-overlap { padding-bottom: 0; } .shot-frame-overlap, .shot-floating-overlap { position: static; width: 100%; margin-top: 14px; } .shot-frame-large { width: 100%; } .waitlist-form { flex-direction: column; } .tab-switch-track { overflow-x: auto; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; } }