/* ============================================================ SPACEODD HOMEPAGE v2 (Bold Editorial) Auto-scoped under #landing-page so it cannot affect the app shell / modals. Generated from the homepage source; theme is driven by the app's existing data-theme on . ============================================================ */ /* HARD ISOLATION: neutralize every style.css (and UA) declaration that would otherwise cascade into the landing markup. The new homepage was authored standalone with its own reset; style.css reuses generic class names (.hero/.section/.step/.btn/...) whose unset properties (min-height:100vh, display:flex, text-align, ...) were bleeding in and breaking the layout. `all: revert` rolls those back to UA defaults; the rest of THIS file then re-applies the homepage design on top. Custom properties (--*) are NOT affected by `all`, and `.hidden { !important }` / inline styles still win, so show/hide + auth-state toggling keep working. Scoped to #landing-page only — the app shell and modals (siblings of #landing-page) are untouched. SPECIFICITY IS CRITICAL: this reset must stay at (0,1,0,0) — low enough that every home.css rule below (even `#landing-page a` at (0,1,0,1)) overrides it, yet still carrying one ID so it beats ALL of style.css's bleed (class-level, no ID). Exclusions are wrapped in :where(), which contributes ZERO specificity, so the reset stays exactly (0,1,0,0) while still skipping: - svg + svg descendants -> keep fill/stroke/width presentation attributes (revert would discard them and blank the icons) - (css.gg icons + hamburger) -> keep css.gg's class/pseudo drawing Pseudo-elements are NOT reverted (bleed was element-level; the homepage's own and css.gg's ::before/::after must survive). Custom props (--*) are unaffected by `all`; `.hidden{!important}` + inline styles still win, so show/hide and auth-state toggling keep working. Only #landing-page is touched — the app shell and modals (its siblings) are untouched. */ #landing-page, #landing-page *:where(:not(svg, svg *, i, .profile-menu-wrapper, .profile-menu-wrapper *)) { all: revert; } #landing-page { min-height: 100vh; } /* ============================================================ SPACEODD HOMEPAGE v2 (Bold Editorial) Self-contained preview. Does not touch style.css. ============================================================ */ #landing-page { --paper: #edeef0; /* cool greyish white */ --paper-2: #e1e3e6; --card: #f7f8f9; --ink: #17191c; /* cool near-black ink */ --ink-2: #565b62; /* muted ink */ --ink-3: #8c919a; /* faint ink */ --line: rgba(23,25,28,0.15); --line-strong: rgba(23,25,28,0.82); --accent: #cf2230; /* editorial red, single accent */ --accent-ink: #f7f8f9; --shadow: 0 1px 0 var(--line), 0 24px 48px -28px rgba(23,25,28,0.28); --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; /* humane display serif */ --font-serif: 'Newsreader', Georgia, serif; /* editorial prose serif */ --font-sans: 'Inter', system-ui, sans-serif; /* structural sans */ --font-body: var(--font-sans); --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --maxw: 1280px; } [data-theme="dark"] #landing-page { --paper: #0f1113; --paper-2: #171a1d; --card: #191c1f; --ink: #e9ebee; --ink-2: #a3a9b0; --ink-3: #6c727a; --line: rgba(233,235,238,0.15); --line-strong: rgba(233,235,238,0.82); --accent: #f04d5b; --accent-ink: #0f1113; --shadow: 0 1px 0 var(--line), 0 30px 60px -30px rgba(0,0,0,0.7); } /* The .profile-dropdown panel is the app's shared component — let style.css own it entirely (matches the workspace/storyboard pages). :where() keeps these exclusions at zero added specificity. */ #landing-page *:where(:not(.profile-dropdown, .profile-dropdown *)), #landing-page *::before, #landing-page *::after { box-sizing: border-box; margin: 0; padding: 0; } #landing-page { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #landing-page { font-family: var(--font-body); background: var(--paper); color: var(--ink); line-height: 1.6; overflow-x: clip; /* clip (not hidden) so #landing-page never becomes its own scroll container -> avoids the double scrollbar */ font-feature-settings: "kern" 1, "liga" 1, "calt" 1; text-rendering: optimizeLegibility; } /* humane display serif, soft optical curves, real italics */ #landing-page .hero h1, #landing-page .section-head h2, #landing-page .feat h3, #landing-page .gallery-cap h3, #landing-page .faq-q h3, #landing-page .price .amt, #landing-page .aud-body h3, #landing-page .step h3, #landing-page .prose-big, #landing-page .hero-stat .n, #landing-page .footer-cta h2, #landing-page .footer-wordmark-xl { font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: "SOFT" 40, "WONK" 0; } #landing-page .hero h1 em, #landing-page .prose-big, #landing-page .footer-cta h2 em, #landing-page .faq-a em { font-style: italic; } #landing-page ::selection { background: var(--accent); color: var(--accent-ink); } /* filmic grain overlay (no blend-mode: a fixed blended layer repaints every scroll frame and causes jank, especially on mobile; a flat low-opacity fixed layer is composited once and stays smooth) */ #landing-page::after { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } [data-theme="dark"] #landing-page::after { opacity: 0.06; } @media (max-width: 700px) { #landing-page::after { display: none; } } /* scroll reveal */ #landing-page .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } #landing-page .reveal.is-visible { opacity: 1; transform: none; } /* hero entrance: pure CSS so the hidden start-state applies before first paint (flash-free, unlike JS-added classes) */ @keyframes soHeroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } #landing-page .hero-top, #landing-page .hero h1, #landing-page .hero-rule, #landing-page .hero-cols, #landing-page .hero-stats { animation: soHeroIn .7s cubic-bezier(.2,.7,.2,1) both; } #landing-page .hero h1 { animation-delay: .07s; } #landing-page .hero-rule { animation-delay: .14s; } #landing-page .hero-cols { animation-delay: .21s; } #landing-page .hero-stats { animation-delay: .28s; } @media (prefers-reduced-motion: reduce) { #landing-page .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } #landing-page .hero-top, #landing-page .hero h1, #landing-page .hero-rule, #landing-page .hero-cols, #landing-page .hero-stats { animation: none !important; } #landing-page .marquee-track { animation: none !important; } #landing-page { scroll-behavior: auto; } } #landing-page a { color: inherit; text-decoration: none; } #landing-page img:where(:not(.profile-dropdown *)) { display: block; max-width: 100%; } #landing-page button:where(:not(.profile-dropdown *)) { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } #landing-page .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; } #landing-page .kicker { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); display: inline-flex; align-items: center; gap: 10px; } #landing-page .kicker::before { content: ''; width: 22px; height: 1px; background: var(--accent); } /* HAL logo dot */ #landing-page .logo-icon { display: inline-block; vertical-align: middle; width: 22px; height: 22px; margin-right: 11px; position: relative; top: -1px; border-radius: 50%; background: var(--ink); } #landing-page .logo-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 26%; height: 26%; transform: translate(-50%,-50%); border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); } /* ---------- NAV ---------- */ #landing-page .nav { position: sticky; top: 0; z-index: 70; background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line); } /* scroll-progress line */ #landing-page .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; } #landing-page .nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } #landing-page .wordmark { font-family: var(--font-sans); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em; display: flex; align-items: center; } #landing-page .nav-links { display: flex; align-items: center; gap: 30px; } #landing-page .nav-links a { position: relative; font-size: 0.86rem; color: var(--ink-2); font-weight: 500; transition: color .15s; } #landing-page .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .26s cubic-bezier(.2,.7,.2,1); } #landing-page .nav-links a:hover { color: var(--ink); } #landing-page .nav-links a:hover::after, #landing-page .nav-links a.active::after { transform: scaleX(1); } #landing-page .nav-links a.active { color: var(--ink); } #landing-page .nav-cta { display: flex; align-items: center; gap: 10px; } /* hamburger toggle (mobile only) */ #landing-page .nav-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); position: relative; z-index: 80; transition: border-color .15s; } #landing-page .nav-toggle:hover { border-color: var(--ink-3); } #landing-page .nav-toggle i { position: relative; display: block; width: 17px; height: 11px; } #landing-page .nav-toggle i::before, #landing-page .nav-toggle i::after { content: ''; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform .3s cubic-bezier(.2,.7,.2,1), top .3s cubic-bezier(.2,.7,.2,1); } #landing-page .nav-toggle i::before { top: 1px; } #landing-page .nav-toggle i::after { top: 8px; } body.nav-open #landing-page .nav-toggle i::before { top: 4.5px; transform: rotate(45deg); } body.nav-open #landing-page .nav-toggle i::after { top: 4.5px; transform: rotate(-45deg); } /* full-screen editorial mobile menu */ #landing-page .mobile-menu { position: fixed; inset: 0; z-index: 65; background: var(--paper); display: none; flex-direction: column; justify-content: center; padding: 92px 28px 40px; opacity: 0; visibility: hidden; transition: opacity .34s ease, visibility .34s ease; } body.nav-open #landing-page .mobile-menu { opacity: 1; visibility: visible; } #landing-page .mm-links { display: flex; flex-direction: column; } #landing-page .mm-links a { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 500; font-size: clamp(1.9rem, 8vw, 2.6rem); letter-spacing: -0.015em; color: var(--ink); display: flex; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .4s ease, color .15s; } body.nav-open #landing-page .mm-links a { opacity: 1; transform: none; } body.nav-open #landing-page .mm-links a:nth-child(1) { transition-delay: .06s; } body.nav-open #landing-page .mm-links a:nth-child(2) { transition-delay: .10s; } body.nav-open #landing-page .mm-links a:nth-child(3) { transition-delay: .14s; } body.nav-open #landing-page .mm-links a:nth-child(4) { transition-delay: .18s; } body.nav-open #landing-page .mm-links a:nth-child(5) { transition-delay: .22s; } body.nav-open #landing-page .mm-links a:nth-child(6) { transition-delay: .26s; } body.nav-open #landing-page .mm-links a:nth-child(7) { transition-delay: .30s; } #landing-page .mm-links a:active, #landing-page .mm-links a:hover { color: var(--accent); } #landing-page .mm-n { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; color: var(--accent); letter-spacing: 0.04em; } #landing-page .mm-footer { display: flex; gap: 12px; margin-top: 40px; } #landing-page .mm-footer .btn { flex: 1; justify-content: center; } @media (max-width: 920px) { #landing-page .nav-toggle { display: inline-flex; } #landing-page .nav-cta .btn { display: none; } #landing-page .mobile-menu { display: flex; } } @media (max-width: 380px) { #landing-page .mm-footer { flex-direction: column; } } body.nav-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { #landing-page .mm-links a { transition: opacity .2s, color .15s; transform: none; } } #landing-page .icon-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-2); transition: all .15s; } #landing-page .icon-btn:hover { color: var(--ink); border-color: var(--ink-3); } #landing-page .theme-icon--moon { display: block; } #landing-page .theme-icon--sun { display: none; } [data-theme="dark"] #landing-page .theme-icon--moon { display: none; } [data-theme="dark"] #landing-page .theme-icon--sun { display: block; } #landing-page .btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; padding: 11px 20px; border-radius: 100px; transition: all .16s ease; border: 1px solid transparent; white-space: nowrap; } #landing-page .btn .gg-arrow-right { --ggs: 0.8; } #landing-page .btn-primary { background: var(--ink); color: var(--paper); } #landing-page .btn-primary:hover { background: var(--accent); color: var(--accent-ink); transform: translateY(-1px); } #landing-page .btn-ghost { color: var(--ink); border-color: transparent; } #landing-page .btn-ghost:hover { color: var(--accent); } #landing-page .btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); } #landing-page .btn-outline:hover { background: var(--ink); color: var(--paper); } #landing-page .btn-lg { padding: 15px 28px; font-size: 1rem; } @media (max-width: 920px) { #landing-page .nav-links { display: none; } } @media (max-width: 560px) { #landing-page .nav-inner { padding: 14px 18px; gap: 12px; } #landing-page .nav-cta { gap: 8px; } #landing-page .nav-cta .btn-ghost { display: none; } /* sign-in lives in hero/pricing CTAs on mobile */ #landing-page .nav-cta .btn { padding: 10px 16px; font-size: 0.85rem; } #landing-page .wrap { padding: 0 18px; } #landing-page .hero-inner { padding: 48px 18px 0; } #landing-page .nav-cta .btn .gg-arrow-right { display: none; } } /* ---------- HERO ---------- */ #landing-page .hero { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; } #landing-page .hero-inner { max-width: var(--maxw); margin: 0 auto; padding: 92px 32px 0; position: relative; z-index: 2; } #landing-page .hero-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; } #landing-page .hero-meta { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); text-align: right; line-height: 1.9; } #landing-page .hero h1 { font-weight: 600; font-size: clamp(3.4rem, 11vw, 9.4rem); line-height: 0.94; letter-spacing: -0.022em; margin: 0; } #landing-page .hero h1 em { color: var(--accent); font-weight: 500; position: relative; } /* animated cycling accent word */ #landing-page .hero h1 .cycle { display: inline-block; transition: opacity .42s ease, transform .42s ease, filter .42s ease; } /* keep the cycling word on its own line on narrow screens so changing words never re-wraps the headline (which would jump the page) */ #landing-page .cyc-break { display: none; } @media (max-width: 640px) { #landing-page .cyc-break { display: block; } } #landing-page .hero h1 .cycle.is-out { opacity: 0; transform: translateY(0.12em); filter: blur(3px); } @media (prefers-reduced-motion: reduce) { #landing-page .hero h1 .cycle { transition: none; } } /* hand-drawn underline beneath the italic accent word */ #landing-page .hero h1 em::after { content: ''; position: absolute; left: 0; right: 4%; bottom: 0.04em; height: 0.12em; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 60 2, 120 11, 180 6 S 280 3, 298 8' stroke='black' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 60 2, 120 11, 180 6 S 280 3, 298 8' stroke='black' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; opacity: 0.85; } #landing-page .hero-rule { height: 1px; background: var(--line); margin: 42px 0; } #landing-page .hero-cols { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: end; padding-bottom: 60px; } #landing-page .hero-sub { font-family: var(--font-serif); font-size: 1.42rem; color: var(--ink-2); line-height: 1.45; max-width: 40ch; } #landing-page .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-self: end; } #landing-page .hero-free { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-3); letter-spacing: 0.04em; } /* hero credibility strip */ #landing-page .hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } #landing-page .hero-stat { padding: 30px 0; } #landing-page .hero-stat + .hero-stat { border-left: 1px solid var(--line); padding-left: 34px; } #landing-page .hero-stat .n { font-weight: 500; font-size: 2.1rem; letter-spacing: -0.01em; line-height: 1; } #landing-page .hero-stat .l { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; } @media (max-width: 700px) { #landing-page .hero-stats { grid-template-columns: repeat(2, 1fr); } #landing-page .hero-stat:nth-child(3) { border-left: none; padding-left: 0; } #landing-page .hero-stat:nth-child(n+3) { border-top: 1px solid var(--line); } #landing-page .hero-stat { padding-left: 0 !important; } #landing-page .hero-stat:nth-child(2) { border-left: 1px solid var(--line); padding-left: 26px !important; } #landing-page .hero-stat:nth-child(4) { border-left: 1px solid var(--line); padding-left: 26px !important; } } /* hero image band */ #landing-page .hero-band { position: relative; height: clamp(260px, 38vw, 520px); border-top: 1px solid var(--line); overflow: hidden; background: var(--ink); } #landing-page .hero-band img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); transform-origin: 60% 40%; animation: soKenburns 26s ease-in-out infinite alternate; } @keyframes soKenburns { from { transform: scale(1.03) translate(0, 0); } to { transform: scale(1.13) translate(-1.5%, -2%); } } @media (prefers-reduced-motion: reduce) { #landing-page .hero-band img { animation: none; transform: scale(1.02); } } @media (max-width: 800px) { #landing-page .hero-cols { grid-template-columns: 1fr; gap: 24px; } #landing-page .hero-actions { justify-self: start; } } /* ---------- MARQUEE ---------- */ #landing-page .marquee { border-bottom: 1px solid var(--line); overflow: hidden; white-space: nowrap; padding: 16px 0; background: var(--paper-2); } #landing-page .marquee-track { display: inline-flex; gap: 0; animation: soSlide 38s linear infinite; will-change: transform; } #landing-page .marquee:hover .marquee-track { animation-play-state: paused; } #landing-page .marquee-item { font-family: var(--font-sans); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.02em; text-transform: uppercase; padding: 0 26px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 26px; } #landing-page .marquee-item::after { content: '✦'; color: var(--accent); font-size: 0.8rem; } @keyframes soSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- SECTION shell ---------- */ #landing-page .section { border-bottom: 1px solid var(--line); padding: 116px 0; position: relative; scroll-margin-top: 76px; } #landing-page .section[data-index]::before { content: attr(data-index); position: absolute; top: 26px; right: 32px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--ink-3); } #landing-page .band-dark[data-index]::before { color: rgba(255,255,255,0.4); } #landing-page .section-head { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: 48px; align-items: start; margin-bottom: 76px; } #landing-page .section-head h2 { font-weight: 500; font-size: clamp(2.1rem, 4.8vw, 3.7rem); line-height: 1.02; letter-spacing: -0.018em; } #landing-page .section-head h2 em { font-style: italic; color: var(--accent); } #landing-page .section-head .lead { margin-top: 18px; } #landing-page .section-head p { color: var(--ink-2); font-size: 1.05rem; max-width: 52ch; } /* big ghost folio numeral filling the left header column */ #landing-page .section-head { position: relative; } #landing-page .section-head[data-fig]::before { content: attr(data-fig); position: absolute; left: 0; top: 40px; font-family: var(--font-display); font-optical-sizing: auto; font-weight: 500; font-size: clamp(4rem, 7vw, 6.6rem); line-height: 0.8; letter-spacing: -0.02em; color: var(--ink); opacity: 0.05; pointer-events: none; user-select: none; } #landing-page .band-dark .section-head[data-fig]::before { color: var(--paper); opacity: 0.09; } @media (max-width: 800px) { #landing-page .section { padding: 78px 0; } #landing-page .section-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 48px; } #landing-page .section-head[data-fig]::before { display: none; } } /* ---------- WHO IT'S FOR ---------- */ #landing-page .audience { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } #landing-page .aud-card { background: var(--paper); padding: 0; display: flex; flex-direction: column; } #landing-page .aud-img { aspect-ratio: 4/3; overflow: hidden; background: var(--ink); } #landing-page .aud-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); transition: filter .5s, transform .5s; } #landing-page .aud-card:hover .aud-img img { filter: grayscale(1) contrast(1.1); transform: scale(1.04); } #landing-page .aud-body { padding: 36px 32px 42px; } #landing-page .aud-body .kicker { margin-bottom: 14px; } #landing-page .aud-body h3 { font-weight: 500; font-size: 1.6rem; letter-spacing: -0.01em; margin-bottom: 12px; } #landing-page .aud-body p { font-family: var(--font-serif); color: var(--ink-2); font-size: 1.02rem; line-height: 1.5; margin-bottom: 12px; } #landing-page .aud-body p.hl { color: var(--ink); } @media (max-width: 860px) { #landing-page .audience { grid-template-columns: 1fr; } } /* ---------- USP (why it's different) ---------- */ #landing-page .usp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } #landing-page .usp { background: var(--paper); padding: 46px 42px; display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: start; position: relative; transition: background .2s; } #landing-page .usp:hover { background: var(--card); } #landing-page .usp::before { content: ''; position: absolute; left: 0; top: 0; width: 0; height: 2px; background: var(--accent); transition: width .35s cubic-bezier(.2,.7,.2,1); } #landing-page .usp:hover::before { width: 56px; } #landing-page .usp-num { font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent); padding-top: 7px; letter-spacing: 0.04em; } #landing-page .usp-body h3 { font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: "SOFT" 40; font-weight: 500; font-size: 1.55rem; letter-spacing: -0.012em; line-height: 1.08; margin-bottom: 10px; } #landing-page .usp-body h3 em { font-style: italic; color: var(--accent); } #landing-page .usp-body p { font-family: var(--font-serif); color: var(--ink-2); font-size: 1.06rem; line-height: 1.55; } #landing-page .usp-body .tag { display: inline-block; margin-top: 14px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); } @media (max-width: 760px) { #landing-page .usp-grid { grid-template-columns: 1fr; } #landing-page .usp { padding: 30px 24px; gap: 20px; } } /* ---------- GALLERY (filmstrip) ---------- */ #landing-page .filmstrip { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 18px; scroll-padding-left: 0; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } #landing-page .filmstrip::-webkit-scrollbar { height: 5px; } #landing-page .filmstrip::-webkit-scrollbar-track { background: transparent; } #landing-page .filmstrip::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 100px; } #landing-page .film-frame { flex: 0 0 62%; scroll-snap-align: start; } #landing-page .film-img { aspect-ratio: 16/10; overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); position: relative; } #landing-page .film-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); } #landing-page .film-frame:hover .film-img img { transform: scale(1.03); } #landing-page .film-num { position: absolute; top: 14px; left: 14px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; color: #fff; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); padding: 4px 10px; border-radius: 100px; } #landing-page .film-cap { padding-top: 18px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline; border-top: 1px solid var(--line); margin-top: 14px; } #landing-page .film-cap .ci { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--accent); padding-top: 6px; } #landing-page .film-cap h3 { font-weight: 500; font-size: 1.45rem; letter-spacing: -0.012em; margin-bottom: 6px; } #landing-page .film-cap p { font-family: var(--font-serif); color: var(--ink-2); font-size: 1.02rem; line-height: 1.5; } #landing-page .gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; } #landing-page .gallery-hint { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } #landing-page .gallery-arrows { display: flex; gap: 10px; } @media (max-width: 760px) { #landing-page .film-frame { flex: 0 0 84%; } } /* ---------- FEATURES (asymmetric editorial spread) ---------- */ /* promoted lead feature */ #landing-page .feat-lead { display: grid; grid-template-columns: 1.05fr 1fr; border: 1px solid var(--line); background: var(--card); margin-bottom: 1px; position: relative; overflow: hidden; } #landing-page .feat-lead-img { overflow: hidden; background: var(--paper-2); border-right: 1px solid var(--line); } #landing-page .feat-lead-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); } #landing-page .feat-lead:hover .feat-lead-img img { transform: scale(1.04); } #landing-page .feat-lead-body { padding: 60px 56px; display: flex; flex-direction: column; justify-content: center; } #landing-page .feat-lead-tag { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; } #landing-page .feat-lead-body h3 { font-weight: 500; font-size: clamp(2rem, 3.4vw, 2.9rem); letter-spacing: -0.02em; line-height: 1.02; margin-bottom: 16px; } #landing-page .feat-lead-body p { font-family: var(--font-serif); color: var(--ink-2); font-size: 1.18rem; line-height: 1.5; max-width: 42ch; } @media (max-width: 760px) { #landing-page .feat-lead { grid-template-columns: 1fr; } #landing-page .feat-lead-img { aspect-ratio: 16/10; border-right: none; border-bottom: 1px solid var(--line); } #landing-page .feat-lead-body { padding: 30px 24px; } } #landing-page .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } #landing-page .feat { background: var(--paper); padding: 34px 30px; display: block; position: relative; transition: background .2s; } #landing-page .feat:hover { background: var(--card); } #landing-page .feat-num { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-3); display: block; margin-bottom: 16px; } #landing-page .feat:hover .feat-num { color: var(--accent); } #landing-page .feat-thumb { width: 100%; aspect-ratio: 16/10; overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); margin-bottom: 16px; } #landing-page .feat-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } #landing-page .feat:hover .feat-thumb img { transform: scale(1.05); } #landing-page .feat h3 { font-weight: 500; font-size: 1.3rem; letter-spacing: -0.01em; margin-bottom: 8px; } #landing-page .feat p { color: var(--ink-2); font-size: 0.88rem; line-height: 1.55; } @media (max-width: 900px) { #landing-page .feat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { #landing-page .feat-grid { grid-template-columns: 1fr; } } /* ---------- HOW IT WORKS (dark band) ---------- */ #landing-page .band-dark { background: var(--ink); color: var(--paper); border-bottom: 1px solid var(--line); } [data-theme="dark"] #landing-page .band-dark { background: #000; } /* DARK-MODE FIX: .band-dark and .footer are always-dark regions (forced to #000 in dark mode), but their text colors reference var(--paper) — which flips to a near-black value in dark mode, giving dark-on-dark text. In dark mode var(--ink) is light, so re-point those text colors to it. Light mode is unaffected (this block is gated on [data-theme="dark"]). */ [data-theme="dark"] #landing-page .band-dark, [data-theme="dark"] #landing-page .band-dark .section-head h2, [data-theme="dark"] #landing-page .step h3, [data-theme="dark"] #landing-page .footer, [data-theme="dark"] #landing-page .footer-cta h2, [data-theme="dark"] #landing-page .footer-brand .wordmark { color: var(--ink); } [data-theme="dark"] #landing-page .band-dark .section-head[data-fig]::before { color: var(--ink); } #landing-page .band-dark .section-head h2 { color: var(--paper); } #landing-page .band-dark .kicker { color: rgba(255,255,255,0.55); } #landing-page .band-dark .section-head p { color: rgba(255,255,255,0.6); } #landing-page .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.14); } #landing-page .step { background: var(--ink); padding: 52px 40px; } [data-theme="dark"] #landing-page .step { background: #000; } #landing-page .step-num { font-family: var(--font-display); font-weight: 800; font-size: 3rem; color: rgba(255,255,255,0.16); line-height: 1; margin-bottom: 22px; } #landing-page .step-ico { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 18px; } #landing-page .step h3 { font-weight: 500; font-size: 1.5rem; color: var(--paper); margin-bottom: 10px; } #landing-page .step p { font-family: var(--font-serif); color: rgba(255,255,255,0.66); font-size: 1.02rem; line-height: 1.5; } @media (max-width: 760px) { #landing-page .steps { grid-template-columns: 1fr; } } /* ---------- PRICING ---------- */ #landing-page .price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } #landing-page .price { background: var(--paper); padding: 40px 30px; display: flex; flex-direction: column; } #landing-page .price.feat-tier { background: var(--card); position: relative; } #landing-page .price.feat-tier::before { content: 'Popular'; position: absolute; top: 18px; right: 20px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } #landing-page .price .tier { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 18px; } #landing-page .price .amt { font-weight: 500; font-size: 3.1rem; letter-spacing: -0.02em; margin-bottom: 22px; line-height: 1; } #landing-page .price ul { list-style: none; margin-bottom: 26px; flex: 1; } #landing-page .price li { font-size: 0.88rem; color: var(--ink-2); padding: 7px 0; border-bottom: 1px solid var(--line); display: flex; gap: 9px; } #landing-page .price li::before { content: '·'; color: var(--accent); font-weight: 700; } #landing-page .price li strong { color: var(--ink); } #landing-page .price .btn { justify-content: center; } #landing-page .pricing-foot { text-align: center; margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; } #landing-page .pricing-foot p { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-3); letter-spacing: 0.04em; } @media (max-width: 900px) { #landing-page .price-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 520px) { #landing-page .price-grid { grid-template-columns: 1fr; } } /* ---------- PROSE sections (about / invest / contact) ---------- */ #landing-page .prose { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: 40px; } #landing-page .prose-body p { font-family: var(--font-serif); color: var(--ink-2); font-size: 1.18rem; line-height: 1.6; margin-bottom: 16px; max-width: 58ch; } /* editorial drop cap on the first prose paragraph */ #landing-page .prose-body p:first-of-type::first-letter { font-family: var(--font-display); font-weight: 600; font-size: 3.6em; line-height: 0.78; float: left; margin: 0.04em 0.09em 0 0; color: var(--accent); font-optical-sizing: auto; } #landing-page .prose-body a { color: var(--accent); border-bottom: 1px solid currentColor; } #landing-page .prose-body .creator { font-family: var(--font-sans); margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--ink-2); } #landing-page .prose-body .creator::first-letter { all: unset; } #landing-page .prose-big { font-weight: 400; font-style: italic; font-size: clamp(1.7rem, 3.1vw, 2.5rem); letter-spacing: -0.012em; line-height: 1.15; color: var(--ink); } @media (max-width: 800px) { #landing-page .prose { grid-template-columns: 1fr; gap: 18px; } } /* ---------- CONTACT FORM ---------- */ #landing-page .contact-form { display: flex; flex-direction: column; gap: 22px; } #landing-page .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } #landing-page .field { display: flex; flex-direction: column; gap: 9px; } #landing-page .field label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); } #landing-page .field label .req { color: var(--accent); } #landing-page .field input, #landing-page .field select, #landing-page .field textarea { font-family: var(--font-body); font-size: 0.98rem; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--line-strong); padding: 10px 2px; border-radius: 0; transition: border-color .15s; width: 100%; } #landing-page .field textarea { resize: vertical; min-height: 110px; } #landing-page .field input:focus, #landing-page .field select:focus, #landing-page .field textarea:focus { outline: none; border-bottom-color: var(--accent); } #landing-page .field select { -webkit-appearance: none; appearance: none; cursor: pointer; } #landing-page .field-select { position: relative; } #landing-page .field-select::after { content: ''; position: absolute; right: 4px; bottom: 18px; width: 8px; height: 8px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg); pointer-events: none; } #landing-page .field-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } #landing-page .contact-form .btn { align-self: flex-start; margin-top: 6px; } #landing-page .contact-aside p { font-family: var(--font-serif); color: var(--ink-2); font-size: 1.15rem; line-height: 1.55; margin-bottom: 14px; } #landing-page .contact-aside .prose-big { margin-bottom: 18px; } #landing-page .contact-aside a { color: var(--accent); border-bottom: 1px solid currentColor; } @media (max-width: 640px) { #landing-page .field-row { grid-template-columns: 1fr; } } /* ---------- FAQ ---------- */ #landing-page .faq-list { border-top: 1px solid var(--line); } #landing-page .faq-item { border-bottom: 1px solid var(--line); } #landing-page .faq-q { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 34px 4px; text-align: left; background: none; border: none; cursor: pointer; list-style: none; /* suppress the native disclosure marker (the .faq-toggle span is the real +) */ } #landing-page .faq-n { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-3); } #landing-page .faq-item[open] .faq-n { color: var(--accent); } #landing-page .faq-q h3 { font-weight: 500; font-size: 1.35rem; letter-spacing: -0.008em; color: var(--ink); } #landing-page .faq-toggle { position: relative; width: 16px; height: 16px; flex-shrink: 0; } #landing-page .faq-toggle::before, #landing-page .faq-toggle::after { content: ''; position: absolute; background: var(--ink-2); transition: transform .2s, opacity .2s; } #landing-page .faq-toggle::before { top: 7px; left: 0; width: 16px; height: 2px; } #landing-page .faq-toggle::after { top: 0; left: 7px; width: 2px; height: 16px; } #landing-page .faq-item[open] .faq-toggle::after { transform: rotate(90deg); opacity: 0; } #landing-page .faq-item[open] .faq-toggle::before { background: var(--accent); } #landing-page .faq-q::-webkit-details-marker { display: none; } /* old Safari/Chrome */ #landing-page .faq-q::marker { content: ""; } /* modern Chrome/Firefox marker */ /* style.css draws an old FAQ "+" via `.faq-item summary::after { content:'+' }`. The reset (all:revert) deliberately skips pseudo-elements, so it bleeds into the new markup and — because the summary is display:grid — lands as a stray grid item in the lower-left. Kill it; the real toggle is .faq-toggle. */ #landing-page .faq-item summary::after, #landing-page .faq-item[open] summary::after { content: none; } #landing-page .faq-a { padding: 0 0 38px 50px; max-width: 70ch; } #landing-page .faq-a p { font-family: var(--font-serif); color: var(--ink-2); font-size: 1.12rem; line-height: 1.6; } #landing-page .faq-a a { color: var(--accent); border-bottom: 1px solid currentColor; } @media (max-width: 640px) { #landing-page .faq-a { padding-left: 0; } #landing-page .faq-q { grid-template-columns: 1fr auto; } #landing-page .faq-n { display: none; } } /* ---------- FOOTER ---------- */ #landing-page .footer { padding: 80px 0 40px; background: var(--ink); color: var(--paper); } [data-theme="dark"] #landing-page .footer { background: #000; } #landing-page .footer-cta { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.16); } #landing-page .footer-cta h2 { font-weight: 500; font-size: clamp(2.2rem, 5.2vw, 4.2rem); letter-spacing: -0.018em; line-height: 0.98; color: var(--paper); } #landing-page .footer-cta h2 em { color: var(--accent); } #landing-page .footer-cta .btn-primary { background: var(--paper); color: var(--ink); } #landing-page .footer-cta .btn-primary:hover { background: var(--accent); color: var(--accent-ink); } #landing-page .footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding: 48px 0; } #landing-page .footer-brand .wordmark { font-size: 1.2rem; color: var(--paper); margin-bottom: 16px; } #landing-page .footer-brand p { color: rgba(255,255,255,0.5); font-size: 0.9rem; max-width: 34ch; } #landing-page .footer-col h4 { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 16px; } #landing-page .footer-col a { display: block; color: rgba(255,255,255,0.78); font-size: 0.92rem; padding: 6px 0; transition: color .15s; } #landing-page .footer-col a:hover { color: var(--accent); } #landing-page .footer-base { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.16); } #landing-page .footer-meta { font-family: var(--font-mono); font-size: 0.72rem; color: rgba(255,255,255,0.4); letter-spacing: 0.04em; } #landing-page .footer-base a.footer-meta:hover { color: var(--accent); } #landing-page .footer-colophon { font-family: var(--font-serif); font-size: 0.84rem; line-height: 1.65; color: rgba(255,255,255,0.4); max-width: 64ch; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); } #landing-page .footer-colophon em { font-style: italic; color: rgba(255,255,255,0.66); } #landing-page .footer-wordmark-xl { font-weight: 400; font-style: italic; font-size: clamp(3rem, 16vw, 14rem); letter-spacing: -0.03em; line-height: 0.8; color: rgba(255,255,255,0.06); margin-top: 36px; user-select: none; pointer-events: none; } @media (max-width: 700px) { #landing-page .footer-cols { grid-template-columns: 1fr 1fr; } #landing-page .footer-brand { grid-column: 1 / -1; } } /* ============================================================ POLISH LAYER · "Cinema light" ------------------------------------------------------------ Signature interactions layered on top of the editorial base. Design rules that keep this award-grade AND kind to every machine + browser: • GPU-only: animates transform / opacity (and a couple of tiny pointer-driven gradients on the *hovered* element only) — never layout properties. • Pointer-gated: cursor effects live behind @media (pointer:fine) so phones/tablets never run them. • Fully neutralized under prefers-reduced-motion. • Pure progressive enhancement — if color-mix / mix-blend aren't supported, the effect simply doesn't paint; nothing breaks, layout is untouched. ============================================================ */ /* --- 1. Breathing HAL logo dot (one 22px element — negligible) --- */ @keyframes soHalPulse { 0%, 100% { box-shadow: 0 0 4px var(--accent); } 50% { box-shadow: 0 0 11px var(--accent); } } #landing-page .logo-icon::after { animation: soHalPulse 3.6s ease-in-out infinite; } /* --- 2. Filmic hero headline: per-line mask reveal --- Lines start clipped + pushed below their own overflow box, then slide up. The padding/negative-margin pair gives glyph overshoots (italic ascenders, the hand-drawn underline) room so nothing is shaved by overflow:hidden, while keeping the box metrics identical. */ #landing-page .hero h1.hero-title { animation: none; } /* line reveal replaces the block fade */ #landing-page .hero-title .ht-line { display: block; overflow: hidden; padding: 0.08em 0 0.18em; margin: -0.08em 0 -0.18em; } #landing-page .hero-title .ht-in { display: block; transform: translateY(112%); animation: soLineUp 0.92s cubic-bezier(.16,.84,.3,1) both; } #landing-page .hero-title .ht-line:nth-child(2) .ht-in { animation-delay: 0.13s; } @keyframes soLineUp { to { transform: translateY(0); } } /* hand-drawn accent underline now "draws" left-to-right after the line lands */ #landing-page .hero h1 em::after { transform: scaleX(0); transform-origin: 0 50%; animation: soUnderline 0.8s cubic-bezier(.16,.84,.3,1) 0.62s both; } @keyframes soUnderline { to { transform: scaleX(1); } } /* --- 3. Cinematic spotlight on the hero band (follows the cursor) --- */ #landing-page .hero-band { --bx: 50%; --by: 50%; } #landing-page .hero-band::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .45s ease; background: radial-gradient(380px circle at var(--bx) var(--by), rgba(255,255,255,0.18), transparent 62%); mix-blend-mode: screen; } #landing-page .hero-band:hover::after { opacity: 1; } /* --- 4. Pointer-tracked light wash on the interactive cards --- Each card lifts a touch and a soft accent glow tracks the cursor. Content is floated above the glow so text never washes out. */ #landing-page .feat, #landing-page .usp, #landing-page .price, #landing-page .aud-card, #landing-page .step { --mx: 50%; --my: 50%; transition: background .2s ease, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; } #landing-page .price, #landing-page .aud-card, #landing-page .step { position: relative; } #landing-page .feat > *, #landing-page .usp > *, #landing-page .price > *, #landing-page .aud-card > *, #landing-page .step > * { position: relative; z-index: 1; } #landing-page .feat::after, #landing-page .usp::after, #landing-page .price::after, #landing-page .aud-card::after, #landing-page .step::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .3s ease; background: radial-gradient(240px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%); } @media (pointer: fine) { #landing-page .feat:hover::after, #landing-page .usp:hover::after, #landing-page .price:hover::after, #landing-page .aud-card:hover::after, #landing-page .step:hover::after { opacity: 1; } #landing-page .feat:hover, #landing-page .usp:hover, #landing-page .price:hover, #landing-page .aud-card:hover, #landing-page .step:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(23,25,28,0.45); } [data-theme="dark"] #landing-page .feat:hover, [data-theme="dark"] #landing-page .usp:hover, [data-theme="dark"] #landing-page .price:hover, [data-theme="dark"] #landing-page .aud-card:hover, [data-theme="dark"] #landing-page .step:hover { box-shadow: 0 20px 46px -24px rgba(0,0,0,0.7); } } /* --- 5. Magnetic CTAs (inline transform set by JS; eased by the btn's own transition) --- */ #landing-page .btn-lg.is-magnetic { will-change: transform; } @media (prefers-reduced-motion: reduce) { #landing-page .logo-icon::after { animation: none; } #landing-page .hero-title .ht-in { transform: none; animation: none; } #landing-page .hero h1 em::after { transform: none; animation: none; } #landing-page .hero-band::after, #landing-page .feat::after, #landing-page .usp::after, #landing-page .price::after, #landing-page .aud-card::after, #landing-page .step::after { display: none; } #landing-page .feat, #landing-page .usp, #landing-page .price, #landing-page .aud-card, #landing-page .step { transition: background .2s ease; } }