/* ========================================================= MarketingMan.ai — shared styles (index.html + privacy.html) Theme is driven entirely by [data-theme]; the @media (prefers-color-scheme) block is a no-JS fallback. The init script resolves the initial theme before paint. ========================================================= */ :root { color-scheme: light dark; /* neutrals — cool slate, biased slightly warm at the dark end */ --bg: #ffffff; --bg-alt: #f7f8fa; --card: #ffffff; --ink: #0f172a; --ink-soft: #475569; --ink-mute: #64748b; --line: #e6e9ef; --line-strong: #d7dce5; /* brand */ --brand: #b91c1c; --brand-hover: #a01818; --brand-tint: #fef2f2; --brand-ring: rgba(185, 28, 28, 0.28); /* feature accents */ --ic-red: #b91c1c; --ic-sky: #0369a1; --ic-violet: #6d28d9; --ic-emerald: #047857; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .05); --shadow-card: 0 1px 3px rgba(15, 23, 42, .05), 0 14px 32px -18px rgba(15, 23, 42, .22); --shadow-pop: 0 24px 60px -24px rgba(15, 23, 42, .35); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; --maxw: 1120px; --radius-card: 16px; --radius-btn: 11px; } /* No-JS fallback: honor the OS preference until the toggle overrides it. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0a0e17; --bg-alt: #0e131f; --card: #121826; --ink: #f1f5f9; --ink-soft: #b6c0d0; --ink-mute: #8b96a8; --line: #212a3b; --line-strong: #2c3547; --brand: #ef4444; --brand-hover: #f05656; --brand-tint: rgba(239,68,68,.12); --brand-ring: rgba(239,68,68,.34); --ic-red: #f87171; --ic-sky: #38bdf8; --ic-violet: #a78bfa; --ic-emerald: #34d399; --shadow-card: 0 1px 3px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.7); --shadow-pop: 0 30px 70px -28px rgba(0,0,0,.8); } } :root[data-theme="light"] { --bg: #ffffff; --bg-alt: #f7f8fa; --card: #ffffff; --ink: #0f172a; --ink-soft: #475569; --ink-mute: #64748b; --line: #e6e9ef; --line-strong: #d7dce5; --brand: #b91c1c; --brand-hover: #a01818; --brand-tint: #fef2f2; --brand-ring: rgba(185,28,28,.28); --ic-red: #b91c1c; --ic-sky: #0369a1; --ic-violet: #6d28d9; --ic-emerald: #047857; --shadow-card: 0 1px 3px rgba(15,23,42,.05), 0 14px 32px -18px rgba(15,23,42,.22); } :root[data-theme="dark"] { --bg: #0a0e17; --bg-alt: #0e131f; --card: #121826; --ink: #f1f5f9; --ink-soft: #b6c0d0; --ink-mute: #8b96a8; --line: #212a3b; --line-strong: #2c3547; --brand: #ef4444; --brand-hover: #f05656; --brand-tint: rgba(239,68,68,.12); --brand-ring: rgba(239,68,68,.34); --ic-red: #f87171; --ic-sky: #38bdf8; --ic-violet: #a78bfa; --ic-emerald: #34d399; --shadow-card: 0 1px 3px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.7); --shadow-pop: 0 30px 70px -28px rgba(0,0,0,.8); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } a { color: inherit; text-decoration: none; } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .25s ease, box-shadow .25s ease; } .nav.scrolled { border-bottom-color: var(--line); box-shadow: 0 1px 0 rgba(15,23,42,.02); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 750; letter-spacing: -.01em; font-size: 1.05rem; color: var(--ink); } .brand .mark { width: 32px; height: 32px; display: block; overflow: visible; } .brand b { font-weight: 800; } .brand span.dot { color: var(--brand); } .nav-actions { display: flex; align-items: center; gap: 8px; } .link-quiet { color: var(--ink-soft); font-weight: 550; font-size: .92rem; padding: 8px 12px; border-radius: 8px; transition: color .15s, background .15s; } .link-quiet:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); } /* theme toggle (ParkXero pattern) */ .theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-mute); cursor: pointer; transition: color .18s, border-color .18s, background .18s; } .theme-btn:hover { color: var(--brand); border-color: var(--brand); } .theme-btn svg { display: block; } .theme-btn .sun { display: none; } .theme-btn .moon { display: inline-block; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-btn .sun { display: inline-block; } :root:not([data-theme]) .theme-btn .moon { display: none; } } :root[data-theme="dark"] .theme-btn .sun { display: inline-block; } :root[data-theme="dark"] .theme-btn .moon { display: none; } :root[data-theme="light"] .theme-btn .sun { display: none; } :root[data-theme="light"] .theme-btn .moon { display: inline-block; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 650; font-family: inherit; cursor: pointer; border: 0; transition: background .15s, transform .12s, box-shadow .15s, color .15s; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand); color: #fff; border-radius: var(--radius-btn); padding: 11px 18px; font-size: .92rem; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--brand-hover); } .btn-primary.lg { padding: 15px 26px; font-size: 1rem; border-radius: 13px; } .btn-ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: var(--radius-btn); padding: 11px 18px; font-size: .92rem; } .btn-ghost:hover { background: var(--bg-alt); color: var(--ink); } /* ---------- Section scaffolding ---------- */ section { padding: 92px 0; } .band-alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .eyebrow { display: block; text-align: center; text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; font-weight: 700; color: var(--ink-mute); margin-bottom: 14px; } .sec-title { text-align: center; font-size: clamp(1.7rem, 3.4vw, 2.35rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; margin: 0 auto 8px; max-width: 20ch; } .sec-sub { text-align: center; color: var(--ink-mute); max-width: 46ch; margin: 0 auto; font-size: 1.02rem; } .mt-sections { margin-top: 56px; } /* ---------- Hero ---------- */ .hero { position: relative; padding: 104px 0 96px; text-align: center; overflow: hidden; } .hero-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 55% at 50% -8%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%), radial-gradient(40% 40% at 85% 8%, color-mix(in srgb, var(--ic-sky) 10%, transparent), transparent 70%); } .hero .wrap { position: relative; z-index: 1; } .pill { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-tint); color: var(--brand); font-weight: 650; font-size: .82rem; padding: 7px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); } .pill .ping { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 0 var(--brand-ring); animation: ping 2.4s ease-out infinite; } @keyframes ping { 0% { box-shadow: 0 0 0 0 var(--brand-ring); } 70%,100% { box-shadow: 0 0 0 9px transparent; } } h1 { font-size: clamp(2.4rem, 5.6vw, 3.9rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.04; text-wrap: balance; margin: 26px auto 20px; max-width: 15ch; color: var(--ink); } h1 .accent { color: var(--brand); } .lead { font-size: clamp(1.05rem, 1.6vw, 1.24rem); color: var(--ink-soft); max-width: 44ch; margin: 0 auto 34px; line-height: 1.6; } /* waitlist form */ .waitlist { max-width: 480px; margin: 0 auto; } .waitlist form { display: flex; gap: 10px; } .waitlist input[type=email] { flex: 1 1 auto; min-width: 0; font: inherit; font-size: .98rem; padding: 14px 16px; border-radius: var(--radius-btn); border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); transition: border-color .15s, box-shadow .15s; } .waitlist input[type=email]::placeholder { color: var(--ink-mute); } .waitlist input[type=email]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); } .waitlist .btn-primary { flex: 0 0 auto; } .microcopy { margin: 14px 0 0; font-size: .84rem; color: var(--ink-mute); } .microcopy b { color: var(--ink-soft); font-weight: 650; } .form-done { display: none; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: var(--radius-btn); background: color-mix(in srgb, var(--ic-emerald) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--ic-emerald) 34%, transparent); color: var(--ink); font-weight: 600; font-size: .96rem; } .waitlist.done form { display: none; } .waitlist.done .microcopy { display: none; } .waitlist.done .form-done { display: flex; } .form-done svg { color: var(--ic-emerald); flex: 0 0 auto; } /* ---------- Cards grid ---------- */ .grid { display: grid; gap: 22px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 26px; box-shadow: var(--shadow-card); } .card h3 { margin: 0 0 8px; font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); } .card p { margin: 0; color: var(--ink-mute); font-size: .95rem; line-height: 1.62; } .chip { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px; } .chip svg { width: 21px; height: 21px; } .chip.neutral { background: color-mix(in srgb, var(--ink) 7%, var(--card)); color: var(--ink-soft); } .chip.c-red { background: color-mix(in srgb, var(--ic-red) 14%, var(--card)); color: var(--ic-red); } .chip.c-sky { background: color-mix(in srgb, var(--ic-sky) 14%, var(--card)); color: var(--ic-sky); } .chip.c-violet { background: color-mix(in srgb, var(--ic-violet) 14%, var(--card)); color: var(--ic-violet); } .chip.c-emerald { background: color-mix(in srgb, var(--ic-emerald) 14%, var(--card)); color: var(--ic-emerald); } /* ---------- Steps ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .step { text-align: center; } .step .num { width: 52px; height: 52px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: 1.2rem; display: grid; place-items: center; margin: 0 auto 18px; box-shadow: var(--shadow-sm); } .step h3 { margin: 0 0 8px; font-size: 1.06rem; font-weight: 700; color: var(--ink); } .step p { margin: 0 auto; max-width: 34ch; color: var(--ink-mute); font-size: .95rem; } /* ---------- CTA band ---------- */ .cta-band { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 78%, #000)); text-align: center; } .cta-band h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 14px; text-wrap: balance; } .cta-band p { color: rgba(255,255,255,.9); max-width: 48ch; margin: 0 auto 30px; font-size: 1.05rem; } .cta-band .waitlist input[type=email] { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff; } .cta-band .waitlist input[type=email]::placeholder { color: rgba(255,255,255,.72); } .cta-band .waitlist input[type=email]:focus { border-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25); } .cta-band .btn-primary { background: #fff; color: var(--brand); } .cta-band .btn-primary:hover { background: #f3f4f6; } .cta-band .microcopy { color: rgba(255,255,255,.82); } .cta-band .microcopy b { color: #fff; } .cta-band .form-done { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff; } .cta-band .form-done svg { color: #fff; } /* ---------- Footer ---------- */ footer { background: #0b1020; color: #94a3b8; padding: 40px 0; } .foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .foot-brand { display: inline-flex; align-items: center; gap: 10px; color: #e2e8f0; font-weight: 700; } .foot-links { display: flex; gap: 22px; font-size: .9rem; } .foot-links a { color: #94a3b8; } .foot-links a:hover { color: #e2e8f0; } .foot-copy { font-size: .84rem; color: #64748b; } /* ---------- Reveal animation ---------- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } /* If JS never runs, don't leave content invisible. */ html:not(.js) .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .pill .ping { animation: none; } .btn:active { transform: none; } } /* ---------- Legal / privacy page ---------- */ .legal { padding: 60px 0 90px; } .legal-head { max-width: 760px; margin: 0 auto 40px; } .legal-head h1 { text-align: left; margin: 0 0 10px; max-width: none; font-size: clamp(2rem, 4vw, 2.7rem); } .legal-head .updated { color: var(--ink-mute); font-size: .92rem; } .legal-body { max-width: 760px; margin: 0 auto; } .legal-body h2 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; margin: 40px 0 12px; color: var(--ink); } .legal-body h3 { font-size: 1.05rem; font-weight: 700; margin: 26px 0 8px; color: var(--ink); } .legal-body p { color: var(--ink-soft); margin: 0 0 14px; font-size: 1rem; line-height: 1.7; } .legal-body ul { color: var(--ink-soft); margin: 0 0 14px; padding-left: 22px; line-height: 1.7; } .legal-body li { margin-bottom: 6px; } .legal-body a { color: var(--brand); font-weight: 600; } .legal-body a:hover { text-decoration: underline; } .legal-divider { border: 0; border-top: 1px solid var(--line); margin: 44px 0; } .legal-appendix { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 8px 28px 28px; margin-top: 20px; } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .grid-3, .grid-2, .steps { grid-template-columns: 1fr; } .steps { gap: 34px; } section { padding: 72px 0; } .hero { padding: 80px 0 76px; } } @media (max-width: 560px) { .waitlist form { flex-direction: column; } .waitlist .btn-primary { width: 100%; } .nav .link-quiet { display: none; } .foot-inner { flex-direction: column; align-items: flex-start; gap: 16px; } } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }