/* ========================================================================== Trading Vigilante — cinematic scroll site (Fable5 pack · Template 08 adapted) AESTHETIC IS PROVISIONAL — a proposal, not the brand's locked identity. The only locked token is the VDM accent (#FD6481). Real tokens come from Phase 4 /vdm-design. See uploads/_tv-website-build-brief.md. ========================================================================== */ :root { --bg: #050507; --bg-2: #0a0c10; --bg-3: #0f1218; --ink: #f3f5f8; --muted: #98a2ad; --muted-2: #626b76; --line: rgba(255, 255, 255, 0.09); --signal: #7fd7e8; /* cool signal glow — matches the hero image */ --signal-2: #b9ecf5; --signal-soft: rgba(127, 215, 232, 0.14); --pink: #f91c74; /* hero highlight — sampled from the bull image's trend line */ --vdm: #fd6481; /* LOCKED VDM corporate accent — used sparingly */ --maxw: 1180px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--ink); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* clip (not hidden) so doesn't become a scroll container — that split the scroll root and killed mouse-wheel scrolling under Lenis. clip prevents the horizontal scrollbar without establishing a scroll container. */ overflow-x: clip; } h1, h2, h3, .display { font-family: "Space Grotesk", "Inter", system-ui, sans-serif; } a { color: inherit; text-decoration: none; } img, canvas, video { display: block; max-width: 100%; } .num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* Lenis */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } /* ---- Layout helpers ---------------------------------------------------- */ .wrap { width: min(92vw, var(--maxw)); margin-inline: auto; } .eyebrow { font-size: 0.74rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--signal); font-weight: 600; } .section { padding: clamp(5rem, 12vh, 11rem) 0; position: relative; } .section--tight { padding: clamp(3.5rem, 7vh, 6rem) 0; } .lead { color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.2rem); max-width: 46ch; } /* reveal-on-scroll */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal[data-d="1"] { transition-delay: 0.08s; } .reveal[data-d="2"] { transition-delay: 0.16s; } .reveal[data-d="3"] { transition-delay: 0.24s; } .reveal[data-d="4"] { transition-delay: 0.32s; } /* ---- Top nav (floating glassy pill) ------------------------------------ */ .nav { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); z-index: 50; width: min(1180px, calc(100% - 40px)); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 11px 12px 11px 22px; background: rgba(9, 13, 20, 0.5); backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 999px; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.4); transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease); } .nav.scrolled { background: rgba(6, 9, 14, 0.82); box-shadow: 0 14px 50px rgba(0, 0, 0, 0.55); } .nav__brand { display: flex; align-items: center; } .nav__logo { height: 34px; width: auto; display: block; } .nav__links { display: flex; align-items: center; gap: 1.7rem; font-size: 0.95rem; } .nav__links a { color: #cad6dd; white-space: nowrap; transition: color 0.15s ease, text-shadow 0.15s ease; } .nav__links a:hover { color: var(--signal); text-shadow: 0 0 16px rgba(127, 215, 232, 0.8); } .nav__cta { display: inline-flex; align-items: center; gap: 0.45rem; background: #fff; color: #0b0f16; font-weight: 600; font-size: 0.95rem; padding: 0.7rem 1.3rem; border-radius: 999px; white-space: nowrap; transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .nav__cta:hover { transform: translateY(-1px); background: var(--pink); color: #fff; box-shadow: 0 0 34px rgba(249, 28, 116, 0.5); } @media (max-width: 900px) { .nav__links { display: none; } } /* ---- HERO (pinned canvas frame-sequence scrub) ------------------------- */ .hero { position: relative; height: 400vh; } /* scroll distance for the scrub */ .hero__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; } #hero-canvas, #hero-symbols { position: absolute; inset: 0; width: 100%; height: 100%; } #hero-canvas { object-fit: cover; z-index: 1; } #hero-symbols { z-index: 2; pointer-events: none; } /* left scrim so the copy stays legible over the bull; NO heavy bottom fade — the hero holds its final (largest) frame then scrolls away. */ .hero__scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient( 120% 90% at 72% 45%, transparent 42%, rgba(5, 5, 7, 0.32) 82%, transparent 100% ), linear-gradient( to right, rgba(5, 5, 7, 0.72) 0%, rgba(5, 5, 7, 0.42) 30%, transparent 58% ); } .hero__content { position: absolute; z-index: 4; top: 0; bottom: 0; left: clamp(1.5rem, 13vw, 14rem); width: min(560px, 50vw); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; } .hero__eyebrow { margin-bottom: 1.3rem; opacity: 0; transform: translateY(14px); } .hero__title { font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; font-size: clamp(2rem, 4.6vw, 4.2rem); color: #fff; } .hero__title .w { display: inline-block; opacity: 0; transform: translateY(40%); } .hero__title .accent { color: var(--pink); } .hero__sub { margin-top: 1.4rem; color: #b6c6cd; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.6; max-width: 40ch; opacity: 0; transform: translateY(14px); } .hero__cta-row { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0; transform: translateY(14px); } .hero__scrollhint { position: absolute; z-index: 4; bottom: 2rem; left: 50%; transform: translateX(-50%); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-2); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .hero__scrollhint::after { content: ""; width: 1px; height: 34px; background: linear-gradient(var(--signal), transparent); animation: pulse 2s var(--ease) infinite; } @keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } /* buttons */ .btn { font-weight: 600; font-size: 0.92rem; padding: 0.85rem 1.5rem; border-radius: 999px; transition: transform 0.25s var(--ease), background 0.3s, border-color 0.3s, color 0.3s; cursor: pointer; border: 1px solid transparent; } .btn:hover { transform: translateY(-2px); } .btn--primary { background: var(--signal); color: #03242b; } .btn--primary:hover { background: var(--signal-2); } .btn--ghost { border-color: var(--line); color: var(--ink); } .btn--ghost:hover { background: var(--pink); color: #fff; border-color: var(--pink); box-shadow: 0 0 40px rgba(249, 28, 116, 0.5); } /* ---- Credibility strip ------------------------------------------------- */ .trust { border-block: 1px solid var(--line); background: var(--bg-2); } .trust__inner { display: flex; flex-wrap: wrap; gap: 1.4rem 2.6rem; align-items: center; justify-content: space-between; } .trust__line { color: var(--muted); font-size: 0.95rem; max-width: 40ch; } .trust__badges { display: flex; gap: 1.6rem; flex-wrap: wrap; color: var(--muted-2); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; } .trust__badges b { color: var(--ink); font-weight: 600; } /* ---- Section heading --------------------------------------------------- */ .head { max-width: 60ch; margin-bottom: clamp(2.4rem, 5vw, 4rem); } .head h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0.7rem 0 1.1rem; } /* ---- Pillars ----------------------------------------------------------- */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } .pillar { border: 1px solid var(--line); border-radius: 16px; padding: 2rem 1.7rem 2.2rem; background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); position: relative; overflow: hidden; transition: border-color 0.4s var(--ease), transform 0.4s var(--ease); } .pillar:hover { border-color: rgba(127, 215, 232, 0.4); transform: translateY(-4px); } .pillar::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--signal), transparent); opacity: 0; transition: opacity 0.4s; } .pillar:hover::before { opacity: 1; } .pillar__idx { font-family: "Space Grotesk"; color: var(--signal); font-size: 0.8rem; letter-spacing: 0.2em; } .pillar h3 { font-size: 1.5rem; margin: 0.9rem 0 0.1rem; letter-spacing: -0.01em; } .pillar .tag { color: var(--muted-2); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; } .pillar p { color: var(--muted); margin-top: 1rem; font-size: 0.97rem; } @media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } } /* ---- Metrics counters -------------------------------------------------- */ .metrics { background: var(--bg-2); border-block: 1px solid var(--line); } .metrics__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; } .metric .fig { font-family: "Space Grotesk"; font-weight: 700; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1; letter-spacing: -0.03em; } .metric .fig .suffix { color: var(--signal); } .metric .lbl { color: var(--muted); margin-top: 0.7rem; font-size: 0.86rem; letter-spacing: 0.03em; } .metric .sub { color: var(--muted-2); font-size: 0.76rem; margin-top: 0.25rem; } @media (max-width: 780px) { .metrics__grid { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1rem; } } /* ---- Product mockup ---------------------------------------------------- */ .product__grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .browser { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg-3); box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.8); } .browser__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); background: var(--bg-2); } .browser__dot { width: 10px; height: 10px; border-radius: 50%; background: #2a2f37; } .browser__url { margin-left: 0.6rem; font-size: 0.74rem; color: var(--muted-2); font-family: "Space Grotesk"; } .browser__shot { position: relative; aspect-ratio: 16/10; background: radial-gradient( 80% 60% at 70% 30%, rgba(127, 215, 232, 0.1), transparent 60% ), var(--bg); } .browser__shot img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; } .browser__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted-2); font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; } .browser__placeholder[hidden] { display: none; } .feature-list { list-style: none; display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.6rem; } .feature-list li { display: flex; gap: 0.9rem; color: var(--muted); } .feature-list .k { color: var(--signal); font-family: "Space Grotesk"; font-size: 0.9rem; } .feature-list b { color: var(--ink); font-weight: 600; } /* ---- Membership -------------------------------------------------------- */ .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; align-items: stretch; } .tier { border: 1px solid var(--line); border-radius: 18px; padding: 2rem 1.8rem; background: var(--bg-2); display: flex; flex-direction: column; transition: transform 0.4s var(--ease), border-color 0.4s; } .tier:hover { transform: translateY(-4px); } .tier--featured { border-color: var(--signal); background: linear-gradient(180deg, rgba(127, 215, 232, 0.07), var(--bg-2)); box-shadow: 0 40px 120px -50px rgba(127, 215, 232, 0.25); } .tier__flag { align-self: flex-start; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: #03242b; background: var(--signal); padding: 0.28rem 0.7rem; border-radius: 999px; margin-bottom: 1rem; font-weight: 700; } .tier h3 { font-size: 1.3rem; } .tier .price { font-family: "Space Grotesk"; font-weight: 700; font-size: 2.5rem; margin: 0.6rem 0 0.2rem; letter-spacing: -0.02em; } .tier .price small { font-size: 0.9rem; color: var(--muted-2); font-weight: 400; } .tier ul { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; margin: 1.3rem 0 1.8rem; color: var(--muted); font-size: 0.94rem; } .tier ul li::before { content: "—"; color: var(--signal); margin-right: 0.6rem; } .tier .btn { margin-top: auto; text-align: center; } @media (max-width: 860px) { .tiers { grid-template-columns: 1fr; } } /* ---- FAQ --------------------------------------------------------------- */ .faq { max-width: 820px; margin-inline: auto; } .qa { border-bottom: 1px solid var(--line); } .qa__q { width: 100%; text-align: left; background: none; border: 0; color: var(--ink); cursor: pointer; font-family: "Space Grotesk"; font-size: 1.1rem; padding: 1.4rem 0; display: flex; justify-content: space-between; gap: 1rem; align-items: center; } .qa__q .plus { color: var(--signal); transition: transform 0.35s var(--ease); flex: none; } .qa.open .qa__q .plus { transform: rotate(45deg); } .qa__a { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease); color: var(--muted); } .qa__a p { padding-bottom: 1.4rem; } /* ---- Final CTA + footer ------------------------------------------------ */ .final { text-align: center; position: relative; overflow: hidden; } .final::before { content: ""; position: absolute; inset: 0; background: radial-gradient( 60% 60% at 50% 40%, var(--signal-soft), transparent 70% ); } .final h2 { position: relative; font-size: clamp(2.2rem, 6vw, 5rem); line-height: 1; letter-spacing: -0.03em; max-width: 16ch; margin: 0 auto 2rem; } .final .btn { position: relative; } .disclaimer { border-top: 1px solid var(--line); background: var(--bg-2); color: var(--muted-2); font-size: 0.8rem; line-height: 1.7; } .disclaimer__inner { display: flex; flex-direction: column; gap: 1.4rem; padding-block: 2.6rem; } .disclaimer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; color: var(--muted); } .disclaimer__brand { font-family: "Space Grotesk"; font-weight: 700; color: var(--ink); font-size: 1.1rem; } .disclaimer p { max-width: none; } .disclaimer strong { color: var(--muted); } /* proposal ribbon (dev note — remove before any real launch) */ .proposal-note { position: fixed; z-index: 60; bottom: 12px; left: 12px; background: rgba(253, 100, 129, 0.12); border: 1px solid rgba(253, 100, 129, 0.4); color: var(--vdm); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.4rem 0.7rem; border-radius: 8px; backdrop-filter: blur(8px); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } .hero { height: auto; } .hero__sticky { position: relative; height: 100vh; } } /* ==== Ghost requirements: Koenig editor content widths + post content ==== */ .post-content { font-size: 1.08rem; line-height: 1.75; color: var(--ink); } .post-content > * { margin-bottom: 1.4rem; } .post-content a { color: var(--signal); text-decoration: underline; } .post-content img { border-radius: 12px; } .post-content h2, .post-content h3 { font-family: "Space Grotesk", sans-serif; margin-top: 2rem; letter-spacing: -0.01em; } .post-content blockquote { border-left: 3px solid var(--signal); padding-left: 1.2rem; color: var(--muted); } /* Koenig image cards — required by Ghost/gscan */ .kg-width-wide { position: relative; width: 85vw; min-width: 100%; margin-left: calc(50% - 42.5vw); transform: translateX(0); } .kg-width-full { position: relative; width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; } .kg-width-full img { border-radius: 0; } .kg-card { margin-bottom: 1.4rem; } .kg-image-card img { margin: 0 auto; } .kg-image-card figcaption, .kg-embed-card figcaption { text-align: center; color: var(--muted-2); font-size: 0.85rem; margin-top: 0.6rem; } .kg-gallery-container { display: flex; flex-direction: column; gap: 0.6rem; } .kg-gallery-row { display: flex; gap: 0.6rem; } .kg-bookmark-card a { color: inherit; } .kg-bookmark-container { display: flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .kg-bookmark-content { padding: 1rem 1.2rem; } .kg-bookmark-title { color: var(--ink); font-weight: 600; } .kg-bookmark-description { color: var(--muted); font-size: 0.9rem; } /* ==== Ghost custom-font settings support (silences gscan font warning) ==== */ :root { --gh-font-heading: "Space Grotesk", sans-serif; --gh-font-body: "Inter", system-ui, sans-serif; } body { font-family: var(--gh-font-body); } h1, h2, h3, .display { font-family: var(--gh-font-heading); } /* ==== Consent banner (P3-D09 hand-rolled, no CMP — partials/consent-banner.hbs) ==== */ .consent { position: fixed; inset-inline: 0; bottom: 0; z-index: 200; background: var(--bg-2); border-top: 1px solid var(--line); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55); padding: 1rem 1.2rem; } .consent__inner { max-width: var(--maxw); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; } .consent__text { color: var(--muted); font-size: 0.88rem; line-height: 1.5; max-width: 46rem; } .consent__text strong { color: var(--ink); } .consent__text a { color: var(--signal); text-decoration: underline; } .consent__actions { display: flex; gap: 0.6rem; flex-shrink: 0; } .consent__btn { cursor: pointer; font-size: 0.88rem; padding: 0.65rem 1.15rem; }