/* ============================================================ TAP v14 - "Autopilot" v12's design elements re-aimed to SELL automation: graph-first hero (cockpit panel), wild×emotions argument, three modes = the tier ladder, orbit re-aimed, CLICK-to-arm seasons wheel. v9 typography face: Montserrat Black display + Ubuntu Mono data; Fraunces italic demoted to accent-only. Everything straight - zero rotated tags. ============================================================ */ @font-face { font-family: 'Fraunces'; src: url('fonts/Fraunces-var.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('fonts/Fraunces-Italic-var.woff2') format('woff2'); font-weight: 300 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; } @font-face { font-family: 'UbuntuMono'; src: url('fonts/UbuntuMono.woff2') format('woff2'); font-weight: 400; font-display: swap; } :root { /* REVERT: original APEX green - uncomment to restore (and delete the cool-slate block below down to --chalk): --bg: #050706; --bg-2: #050706; --surface: #101512; --surface-2: #141b16; --glass-panel: rgba(8, 12, 10, 0.66); --glass-card: rgba(12, 17, 14, 0.62); --glass-card-hover: rgba(20, 27, 23, 0.72); --border: #1e2421; --border-light: #2a322e; --text: #f2f2f4; --text-2: #a6aca8; --text-3: #7d847f; --green: #0ecb81; --green-dim: #0a9e65; --green-rgb: 14, 203, 129; --green-bg: rgba(14, 203, 129, 0.10); --teal: #35b5bf; --teal-dim: #1d7c85; --coral: #ff5c3d; --coral-rgb: 255, 92, 61; --coral-bg: rgba(255, 92, 61, 0.12); --gold: #f5a70b; --gold-bg: rgba(245, 167, 11, 0.13); --chalk: #dfe8e2; */ /* WARM-GREEN revert (2026-07-12): APEX forest hue direction from the original block above, KEEPING the contrast-pass gains - near-white text, brighter borders, more opaque glass. Green-tinted grounds (zero blue cast) + warmer accent green + gold as the warm accent. */ --bg: #040705; --bg-2: #0a120c; --surface: #151d17; --surface-2: #1b241d; --glass-panel: rgba(12, 19, 14, 0.72); --glass-card: rgba(17, 26, 20, 0.68); --glass-card-hover: rgba(24, 34, 27, 0.78); --border: #2a3a2f; --border-light: #3f5847; --text: #f1f6f2; --text-2: #a9b8ad; --text-3: #7d8f83; --green: #3ecf8e; --green-dim: #2aa370; --green-rgb: 62, 207, 142; --green-bg: rgba(62, 207, 142, 0.10); --teal: #35b5bf; --teal-dim: #1d7c85; --coral: #ff5c3d; --coral-rgb: 255, 92, 61; --coral-bg: rgba(255, 92, 61, 0.12); --gold: #f5a70b; --gold-bg: rgba(245, 167, 11, 0.13); --chalk: #e0e9e3; --shadow-card: 0 10px 36px rgba(0, 4, 1, 0.72), 0 2px 10px rgba(0, 4, 1, 0.48); --serif: 'Fraunces', Georgia, serif; --serif-ink: #e3c27c; --sans: 'Montserrat', -apple-system, sans-serif; --mono: 'UbuntuMono', 'Consolas', monospace; --r: 12px; --pad: clamp(20px, 4vw, 48px); /* WS6 type-scale tokens (round L) */ --fs-display: clamp(30px,4.8vw,64px); --fs-h2: clamp(36px,4.5vw,58px); --fs-h3-lg: 22px; --fs-h3: 18px; --fs-lead: clamp(19px,2.3vw,26px); --fs-body: clamp(14.5px,1.55vw,16.5px); --fs-card: 13.5px; --fs-ctl: 13px; --fs-ui: 12.5px; --fs-kicker: 15px; --fs-label: 10.5px; --fs-micro: 9.5px; /* WS3 unified control-pill shadow */ --shadow-ctl: 0 4px 14px rgba(0,0,0,0.45); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { overflow-x: clip; } body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } ::selection { background: var(--green); color: #041008; } h1, h2, h3 { line-height: 1.02; text-wrap: balance; } a { color: inherit; } img { max-width: 100%; display: block; } .wrap { max-width: 1200px; margin: 0 auto; padding-inline: var(--pad); } /* r5: deep-green page backdrop - this is the colour revealed in the gaps as sections zoom out during the recede scroll effect. NOT --bg (that var feeds many gradients, e.g. .final .photo-band::after), so only the exposed body backdrop changes. */ body { background: #0b1510; } .grain { position: fixed; inset: -50%; z-index: 30; pointer-events: none; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .glass { background: var(--glass-card); border: 1px solid var(--border); border-radius: var(--r); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-card); } .eyebrow { font-family: var(--mono); font-size: var(--fs-ui); letter-spacing: 0.22em; color: var(--teal); text-transform: uppercase; display: flex; align-items: center; gap: 14px; } .eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--teal); flex: none; } .eyebrow .idx { color: var(--text-3); } .sect-head { margin-bottom: clamp(28px, 5vw, 56px); max-width: 960px; } .sect-head h2 { font-family: var(--sans); font-weight: 900; text-transform: uppercase; font-size: var(--fs-h2); letter-spacing: -0.018em; margin-top: 18px; line-height: 1.0; } .hl { color: var(--green); } .hl-coral { color: var(--coral); } .accent-serif { font-family: var(--serif); font-style: italic; font-weight: 460; color: var(--serif-ink) !important; font-size: var(--fs-lead); } /* WS6 cursive purge: support/body copy = Montserrat 400, light gray. Element rules keep their own size. */ .support { font-family: var(--sans); font-style: normal; font-weight: 400; color: var(--text-2); font-size: var(--fs-body); line-height: 1.55; } .support b { color: var(--chalk); font-weight: 600; } .support i { font-style: italic; } .sect-head p.lead { color: var(--text-2); font-size: var(--fs-lead); margin-top: 18px; max-width: 640px; } .sect-head p.lead b { color: var(--text); } .mono { font-family: var(--mono); } .tag-ill { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.18em; color: var(--text-3); text-transform: uppercase; border: 1px dashed var(--border-light); border-radius: 4px; padding: 3px 8px; } section { position: relative; padding-block: clamp(72px, 10vw, 140px); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; padding: 15px 28px; border-radius: 999px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; will-change: transform; } /* round I: primary CTAs = shining GOLD (matches the gold pill treatment) */ .btn-primary { background: linear-gradient(180deg, #ffc84a 0%, var(--gold) 55%, #e0940a 100%); color: #1a1206; font-weight: 700; border-color: var(--gold); box-shadow: 0 0 18px rgba(245,167,11,0.28), inset 0 1px 0 rgba(255,255,255,0.34); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(245,167,11,0.42), 0 0 22px rgba(245,167,11,0.45), inset 0 1px 0 rgba(255,255,255,0.34); } .btn-ghost { background: rgba(8,12,10,0.5); color: var(--text); border-color: var(--border-light); backdrop-filter: blur(8px); } .btn-ghost:hover { border-color: var(--green-dim); transform: translateY(-2px); } /* header START = a text nav link (same type as .lnk) but gold, not a pill */ .btn-nav { background: none; border: none; border-radius: 0; padding: 0; box-shadow: none; font-family: var(--mono); font-weight: 400; font-size: var(--fs-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); white-space: nowrap; transition: color .15s ease; } .btn-nav:hover { transform: none; box-shadow: none; color: #ffc84a; text-decoration: underline; text-underline-offset: 3px; } header.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; transition: background .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; } header.nav.scrolled { background: rgba(5,9,7,0.82); backdrop-filter: blur(18px); border-color: var(--border); } .nav-inner { display: flex; align-items: center; justify-content: center; gap: 30px; height: 82px; } .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; } .brand .word { font-family: var(--sans); font-weight: 900; font-size: var(--fs-h3-lg); letter-spacing: 0.2em; color: var(--text); } /* v16 rD FIX4: TRAPR logo in the header. The asset ships on a black field, so mix-blend screen drops the box and lets only the mark + wordmark read over hero and scrolled nav. */ .brand-logo { height: 68px; width: auto; display: block; mix-blend-mode: screen; } .nav-links { display: flex; gap: 20px; align-items: center; } .nav-links a.lnk { font-family: var(--mono); font-size: var(--fs-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); text-decoration: none; transition: color .15s ease; white-space: nowrap; } .nav-links a.lnk:hover { color: var(--green); } .burger { display: none; background: none; border: 1px solid var(--border-light); border-radius: 8px; width: 42px; height: 38px; color: var(--text); cursor: pointer; font-size: 17px; } /* ---------- hero + THE ORBIT ---------- */ .hero { display: flex; align-items: center; padding-block: 120px 60px; overflow: clip; } /* v14.4 - copy ABOVE, the cinema panel full-width below: wider stage, longer run */ .hero-grid { display: flex; flex-direction: column; gap: clamp(26px, 3.4vw, 44px); width: 100%; } .hero-copy { max-width: 860px; } .hero-copy .kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); background: var(--gold-bg); border: 1px solid rgba(245,167,11,0.3); padding: 6px 12px; border-radius: 6px; margin-bottom: 26px; } .hero-copy .kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: pulse 2.2s infinite; } @keyframes pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(245,167,11,.5);} 50% { opacity: .6; box-shadow: 0 0 0 7px rgba(245,167,11,0);} } .hero h1 { font-family: var(--sans); font-weight: 900; text-transform: uppercase; font-size: var(--fs-display); letter-spacing: -0.015em; line-height: 1.05; } .hero .sub { color: var(--text-2); font-size: clamp(15px, 1.6vw, 18px); max-width: 520px; margin-top: 24px; } .hero .sub b { color: var(--text); font-weight: 600; } .hero .cta-row { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; } .hero .micro { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.16em; color: var(--text-3); text-transform: uppercase; margin-top: 16px; } .hero-stats { display: flex; margin-top: 18px; border: 1px solid var(--border); border-radius: var(--r); background: var(--glass-panel); backdrop-filter: blur(16px); overflow: hidden; } .hero-stats .cell { flex: 1; padding: 14px 16px; border-right: 1px solid var(--border); min-width: 0; } .hero-stats .cell:last-child { border-right: 0; } .hero-stats .v { font-family: var(--mono); font-size: clamp(16px, 1.8vw, 21px); color: var(--text); } .hero-stats .v .u { color: var(--green); } .hero-stats .k { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.14em; color: var(--text-3); text-transform: uppercase; margin-top: 3px; } .orbit-wrap { position: relative; } .orbit-sys { position: relative; height: 660px; perspective: 1100px; } .orbit-guide { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px dashed rgba(53,181,191,0.22); border-radius: 50%; pointer-events: none; } .orbit-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 128px; height: 128px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 34% 30%, #ffd98a 0%, var(--gold) 38%, #8a5e07 100%); color: #2a1c02; z-index: 150; box-shadow: 0 0 60px rgba(245,167,11,0.35); } .orbit-core .t { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.14em; font-weight: 700; } .orbit-core .s { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.08em; opacity: 0.75; margin-top: 2px; padding-inline: 10px; } /* capital ball: compounds up per pulse, snaps back on a withdrawal */ .orbit-core { transition: transform .62s cubic-bezier(.34, 1.3, .5, 1), box-shadow .5s ease; } .orbit-core.cap-pulse { box-shadow: 0 0 90px rgba(245,167,11,0.55); } /* v16 rC N7: WHITE (coral read as a loss) - sits well above the ball and floats up SLOWLY so the words are actually readable */ .orbit-withdraw { position: absolute; left: 50%; top: 27%; transform: translate(-50%, -50%); font-size: var(--fs-ui); font-weight: 700; letter-spacing: 0.16em; color: #ffffff; text-shadow: 0 2px 14px rgba(5,9,7,0.9), 0 0 10px rgba(255,255,255,0.4); opacity: 0; pointer-events: none; z-index: 200; white-space: nowrap; } .orbit-withdraw.show { animation: orbWithdraw 3s ease-out; } @keyframes orbWithdraw { 0% { opacity: 0; transform: translate(-50%, 10%) scale(.92); } 10% { opacity: 1; } 62% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -120%) scale(1.03); } } @media (prefers-reduced-motion: reduce) { .orbit-core { transition: none; } } .orbit-halo { position: absolute; left: 50%; top: 50%; width: 128px; height: 128px; margin: -64px 0 0 -64px; border-radius: 50%; border: 1px solid rgba(245,167,11,0.5); animation: halo 2.6s ease-out infinite; pointer-events: none; z-index: 149; } .orbit-halo.h2 { animation-delay: 0.5s; } @keyframes halo { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.1); opacity: 0; } } .orbit-node { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 10px; background: var(--glass-card); border: 1px solid var(--border-light); backdrop-filter: blur(10px); cursor: pointer; font-family: var(--mono); font-size: var(--fs-ui); color: var(--text); white-space: nowrap; transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; will-change: transform, opacity; } .orbit-node .glyph { width: 10px; height: 10px; border-radius: 50%; flex: none; } .orbit-node.strat .glyph { background: var(--green); box-shadow: 0 0 8px rgba(var(--green-rgb),0.7); } .orbit-node.incl .glyph { background: var(--teal); box-shadow: 0 0 8px rgba(53,181,191,0.6); } .orbit-node.bear .glyph { background: var(--coral); box-shadow: 0 0 8px rgba(var(--coral-rgb),0.7); } .orbit-node:hover { border-color: var(--green-dim); } .orbit-node.active { border-color: var(--green); background: var(--glass-card-hover); box-shadow: 0 0 24px rgba(var(--green-rgb),0.25); } .orbit-detail { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%) translateY(12px); width: min(400px, 92%); padding: 18px 20px 16px; z-index: 320; opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease; } .orbit-detail.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .orbit-detail .dn { font-family: var(--mono); font-size: var(--fs-kicker); } .orbit-detail .de { font-weight: 800; font-size: var(--fs-ui); letter-spacing: 0.03em; text-transform: uppercase; color: var(--green); margin-top: 5px; } .orbit-detail.bear .de { color: var(--coral); } .orbit-detail p { font-size: var(--fs-card); color: var(--text-2); margin-top: 7px; } .orbit-detail .chips { border-top: 1px dashed var(--border-light); margin-top: 10px; padding-top: 8px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); } .orbit-detail .chips b { color: var(--gold); font-weight: 400; } .orbit-detail .close { position: absolute; top: 8px; right: 12px; background: none; border: 0; color: var(--text-3); font-family: var(--mono); font-size: 15px; cursor: pointer; } /* v16 UX-7: legible over the photo (dark underlay) + never wider than the viewport */ .orbit-caption { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; max-width: calc(100% - 12px); padding: 6px 14px; border-radius: 6px; background: linear-gradient(180deg, rgba(4,7,5,0.82), rgba(4,7,5,0.48)); box-shadow: 0 2px 14px rgba(0,4,1,0.35); } @media (max-width: 640px) { .orbit-caption { white-space: normal; text-align: center; width: max-content; } } .orbit-node.armedring { border-color: rgba(245,167,11,0.55); box-shadow: 0 0 14px rgba(245,167,11,0.22); } .orbit-node.pulse { animation: nodepulse 0.9s ease; } @keyframes nodepulse { 0% { box-shadow: 0 0 0 0 rgba(245,167,11,0.65); } 100% { box-shadow: 0 0 0 16px rgba(245,167,11,0); } } .orbit-ticker { text-align: center; margin-top: 12px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--text-3); min-height: 20px; } .orbit-legend { display: flex; justify-content: center; gap: 18px; margin-top: 2px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); flex-wrap: wrap; } .orbit-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; } /* ---------- marquee ---------- */ .marquee { border-block: 1px solid var(--border); background: rgba(5,9,7,0.72); backdrop-filter: blur(12px); overflow: hidden; padding-block: 13px; position: relative; z-index: 3; } .marquee .track { display: inline-block; white-space: nowrap; font-family: var(--mono); font-size: var(--fs-ui); letter-spacing: 0.06em; color: var(--text-3); animation: slide 60s linear infinite; } .marquee:hover .track { animation-play-state: paused; } .marquee .up { color: var(--green); } .marquee b { color: var(--text-2); font-weight: 400; } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- per-section full-bleed photo ---------- */ /* Each content section carries its own darkened pine/mountain photo (green + deep-blue). The top stop is kept lighter so the photo genuinely SHOWS through the chart-mask teeth. */ section[data-bg] { background-size: cover; background-position: center; background-repeat: no-repeat; } /* v16 rD: scrim lightened at the ridge-reveal band (top) so the photo genuinely juts up through the chart-mask teeth on EVERY boundary (dark forest/range photos were reading as a flat black seam), plus a punchier midtone ramp so the imagery reads more present / higher contrast without washing out - kept green-tinted, deeper darks toward the text zone. */ /* v16 rE: bg contrast bump ("stick out a touch more") - top+mid scrim stops lightened ~0.06 so the ridges + green candle glows read stronger. Bottom stop (0.86) UNCHANGED so headings/body stay crisp. (No filter: the recede effect owns the section's inline filter during scroll, so a CSS filter here would flicker.) */ section[data-bg="forest"] { background-image: linear-gradient(180deg, rgba(5,9,7,0.09) 0%, rgba(6,11,8,0.54) 58%, rgba(5,8,6,0.86) 100%); } section[data-bg="forest"].bg-in { background-image: linear-gradient(180deg, rgba(5,9,7,0.09) 0%, rgba(6,11,8,0.54) 58%, rgba(5,8,6,0.86) 100%), url('img/forest.webp?v=249'); } section[data-bg="ridge"] { background-image: linear-gradient(180deg, rgba(5,9,7,0.08) 0%, rgba(8,11,10,0.52) 58%, rgba(6,9,8,0.86) 100%); } section[data-bg="ridge"].bg-in { background-image: linear-gradient(180deg, rgba(5,9,7,0.08) 0%, rgba(8,11,10,0.52) 58%, rgba(6,9,8,0.86) 100%), url('img/ridge.webp?v=249'); } section[data-bg="range"] { background-image: linear-gradient(180deg, rgba(5,9,7,0.09) 0%, rgba(6,12,9,0.54) 58%, rgba(5,9,7,0.86) 100%); } section[data-bg="range"].bg-in { background-image: linear-gradient(180deg, rgba(5,9,7,0.09) 0%, rgba(6,12,9,0.54) 58%, rgba(5,9,7,0.86) 100%), url('img/range-blue.webp?v=249'); } section[data-bg="lake"] { background-image: linear-gradient(180deg, rgba(5,9,7,0.09) 0%, rgba(6,13,10,0.54) 58%, rgba(5,10,8,0.86) 100%); } section[data-bg="lake"].bg-in { background-image: linear-gradient(180deg, rgba(5,9,7,0.09) 0%, rgba(6,13,10,0.54) 58%, rgba(5,10,8,0.86) 100%), url('img/lake-blue.webp?v=249'); } section[data-bg="valley"] { background-image: linear-gradient(180deg, rgba(5,9,7,0.09) 0%, rgba(7,14,10,0.54) 58%, rgba(6,11,8,0.86) 100%); } section[data-bg="valley"].bg-in { background-image: linear-gradient(180deg, rgba(5,9,7,0.09) 0%, rgba(7,14,10,0.54) 58%, rgba(6,11,8,0.86) 100%), url('img/valley-green.webp?v=249'); } /* "cold" plate (#honest only): SAME wash grammar/ramp AND the SAME alpha stops as the green plates above (0.09 / 0.54 / 0.86 at 0 / 58 / 100), only the tint differs - deep BLUE/navy instead of green, the one cold beat in the green range. cold-peak was regenerated as a proper pre-graded dark cinematic plate (like forest/ridge/etc), so it no longer needs the heavier daylight-snowfield scrim: same PERCEIVED darkness as the green photos, just blue. Default center crop (matches the sibling plates). */ section[data-bg="cold"] { background-image: linear-gradient(180deg, rgba(4,8,16,0.09) 0%, rgba(5,10,20,0.54) 58%, rgba(4,8,15,0.86) 100%); } section[data-bg="cold"].bg-in { background-image: linear-gradient(180deg, rgba(4,8,16,0.09) 0%, rgba(5,10,20,0.54) 58%, rgba(4,8,15,0.86) 100%), url('img/cold-peak.webp?v=249'); } /* ── r17: film-grain overlay on section photo plates ────────────────────────── Neutral-gray tiling noise (overlay blend) laid over the full-bleed plate but UNDER the content (z-index 1 < the section's own z-index:2 children). Masks the softness/banding of the 2x-upscaled plates without blurring the imagery. Static, ~5% — invisible over the dark scrim zones, subtle over the revealed photo band. */ section[data-bg]::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: url("data:image/png;base64,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"); background-repeat: repeat; background-size: 128px 128px; mix-blend-mode: overlay; opacity: 0.05; } /* ══════════ THE STANDARD TRANSITION - price-action divider (round 6, static) ══════════ ONE system for EVERY content-section boundary. No morph. · The section below clips its top edge to a seeded PRICE-ACTION ridgeline (momentum walk: run-ups / consolidation chop / pullbacks / spike+snapback, vertices chamfered a couple px) and is pulled up over the section above - its own full-bleed photo fills the front range: the mask reveal. · A .mkt-div band before it carries two FILLED dim-grey back ranges in the upper section's sky, parallaxing at two rates (far lags hardest) while the front edge stays welded to the section (speed 0). · The ONLY line-work is one subtle teal stroke riding the front ridge, plus a faint teal wash fading from the ridge into the photo below it. · Every OUTGOING section recedes - scale + blur + fade - as it scrolls out. */ section.mkt { border-block: 0; position: relative; isolation: isolate; transform-origin: 50% 100%; } section.mkt > * { position: relative; z-index: 2; } /* front edge: teal ridge stroke + wash, clipped by the section's own clip-path */ section.mkt > .mkt-edge { position: absolute; left: 0; top: 0; width: 100%; z-index: 1; pointer-events: none; display: block; } section.mkt > .mkt-edge .ln { fill: none; stroke: var(--green); stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; opacity: 0.52; } /* the divider band - the grey back ranges live in the UPPER section's sky */ .mkt-div { position: relative; height: 0; pointer-events: none; } .mkt-band { position: absolute; left: 0; right: 0; } /* top/height set in main.js */ .mkt-band svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; } .mkt-band g { will-change: transform; } /* air below the outgoing section (round 7: band stays slim 60px, padding around it DOUBLED) */ section.mkt-above:not(.herofull) { padding-bottom: calc(clamp(112px, 16vw, 208px) + 48px); } /* v16 rC N1: extra air between the hero copy and the ridge divider below it */ .herofull.mkt-above .herofull-inner { padding-bottom: clamp(130px, 16vh, 190px); } @media (prefers-reduced-motion: reduce) { .mkt-band g { will-change: auto; transform: none !important; } } /* ══════════ 09 · THE HONEST QUESTION - cold reflection break (v16 rF, in-brand) ══════════ Now a full .mkt section (data-bg="cold"): same photo-plate + wash system and the same ridge-divider grammar as every other boundary - the ONLY departure is the wash tint, deep BLUE/navy instead of green (the plate map above). The ridge edge is hue-shifted cold to sit naturally on the snow-peak. Copy follows the standard grammar: teal eyebrow, white H2 + cold-teal highlight, GOLD accent-serif lead, gray .support-scale body. Padding/margins come from the shared .mkt system. */ #honest { text-align: center; } /* ridge edge: same stroke+wash geometry as every boundary, tinted cold (green→ice) */ #honest > .mkt-edge { filter: hue-rotate(58deg) saturate(0.85); } /* faint cold cast up top - flavour only, the standard wash owns the darkness */ /* v16: #honest now carries BOTH the reflection copy (upper) AND the merged compare block (lower) on the one cold plate, so the section is much taller. The wash ramp's light top (0.09) would leave the reflection copy sitting in the brightest zone - so the scrim adds a soft navy pool concentrated behind the upper reflection to keep it crisp, over the faint cold-blue flavour glow. The compare table needs no scrim: it sits in its own opaque device screen (background: var(--bg)) and reads as a component. */ #honest .cp-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(130% 52% at 50% 18%, rgba(4,9,18,0.62) 0%, rgba(4,9,18,0.34) 42%, rgba(4,8,15,0) 72%), linear-gradient(180deg, rgba(4,8,15,0) 6%, rgba(4,8,15,0.46) 20%, rgba(4,8,15,0.46) 46%, rgba(4,8,15,0) 60%), radial-gradient(120% 90% at 50% 22%, rgba(96,158,214,0.10) 0%, rgba(12,26,44,0) 52%); } #honest .cp-inner { max-width: 820px; margin-inline: auto; } #honest .cp-eyebrow { justify-content: center; } #honest h2 { font-family: var(--sans); font-weight: 900; text-transform: uppercase; font-size: var(--fs-h2); letter-spacing: -0.018em; line-height: 1.0; margin-top: 18px; } #honest .cp-hl, #honest .cp-verb { color: #5ec4d8; } /* cold tint of the brand teal - in-palette, still cold */ #honest .cp-lead { margin-top: 24px; margin-bottom: 30px; } #honest .cp-body { max-width: 700px; margin-inline: auto; } /* r18 item C: two-tier scale only - the body reads at the SAME size as the serif lead (sans vs serif carries the voice contrast), so the one-liners stop looking footnote-sized. Tighter paragraph spacing keeps the block from ballooning at the bigger size. */ #honest .cp-body p { font-family: var(--sans); font-weight: 400; color: var(--text-2); font-size: var(--fs-lead); line-height: 1.5; margin-top: 9px; } #honest .cp-body .cp-close { margin-top: 22px; color: var(--chalk); font-weight: 600; letter-spacing: 0.008em; } @media (max-width: 640px) { /* cold-peak is now a dark pre-graded plate, so mobile uses the SAME normalized navy wash as desktop (like the green plates - no mobile-only override needed). */ #honest .cp-body p { margin-top: 8px; } } /* ---------- Fear & Greed gauge - LIVE HUD inside the duel graph. Driven by main.js from the same seeded playhead the duel canvas uses: price at the bottom of the dip → FEAR (coral), price back at the top → GREED (teal). Color states via .neutral / .greed on .fg-gauge. */ .duel { position: relative; } /* tucked into the BOTTOM-RIGHT corner of the human (left) half of the canvas. v16 rC N2: scaled down ~17%, anchored to its bottom-right so position holds */ .fg-gauge { position: absolute; bottom: 46px; right: 51%; transform: scale(0.83); transform-origin: 100% 100%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 136px; padding: 10px 10px 9px; border-radius: 12px; pointer-events: none; background: rgba(8,12,10,0.8); border: 1px solid rgba(var(--coral-rgb),0.34); box-shadow: 0 10px 34px rgba(0,0,0,0.42); backdrop-filter: blur(6px); transition: border-color .5s ease; } .fg-ttl { font-size: var(--fs-micro); letter-spacing: 0.2em; color: var(--text-3); } .fg-dial { width: 104px; height: 61px; overflow: visible; } .fg-track { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 9; stroke-linecap: round; } .fg-fill { fill: none; stroke: var(--coral); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 163.4; stroke-dashoffset: 134; transition: stroke .5s ease; } .fg-needle { stroke: var(--coral); stroke-width: 3; stroke-linecap: round; transition: stroke .5s ease; } .fg-needle-g { transform-box: view-box; transform-origin: 60px 64px; transform: rotate(-58deg); } .fg-hub { fill: var(--coral); transition: fill .5s ease; } .fg-read { font-size: var(--fs-label); letter-spacing: 0.1em; color: var(--coral); font-weight: 700; margin-top: 1px; transition: color .5s ease; white-space: nowrap; } .fg-sub { font-size: var(--fs-micro); letter-spacing: 0.14em; color: var(--text-3); } .fg-gauge.neutral { border-color: rgba(245,167,11,0.34); } .fg-gauge.neutral .fg-fill, .fg-gauge.neutral .fg-needle { stroke: var(--gold); } .fg-gauge.neutral .fg-hub { fill: var(--gold); } .fg-gauge.neutral .fg-read { color: var(--gold); } .fg-gauge.greed { border-color: rgba(var(--green-rgb),0.38); } .fg-gauge.greed .fg-fill, .fg-gauge.greed .fg-needle { stroke: var(--green); } .fg-gauge.greed .fg-hub { fill: var(--green); } .fg-gauge.greed .fg-read { color: var(--green); } @media (max-width: 760px) { /* the canvas halves get too narrow to float over - dock it right, above the graph */ .fg-gauge { position: static; width: 146px; margin: 10px 16px 2px auto; } } /* ---------- how it works: the cycle rail ---------- */ .cycle-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; } .cycle-rail::before { content: ''; position: absolute; top: 34px; left: 4%; right: 4%; border-top: 1px dashed rgba(53,181,191,0.35); z-index: 0; } .cstep { padding: 20px 18px; position: relative; z-index: 1; transition: transform .25s ease, border-color .25s ease; } .cstep:hover { transform: translateY(-4px); border-color: var(--teal-dim); } .cstep .planet { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: var(--fs-ui); color: #04170e; background: var(--green); margin-bottom: 14px; box-shadow: 0 0 14px rgba(var(--green-rgb),0.4); } .cstep h3 { font-family: var(--serif); font-weight: 620; font-size: var(--fs-h3); letter-spacing: -0.01em; } .cstep .k { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.16em; color: var(--teal); text-transform: uppercase; display: block; margin-bottom: 6px; } .cstep p { color: var(--text-2); font-size: var(--fs-card); margin-top: 8px; } .bedrock { margin-top: 16px; padding: 22px 26px; border-color: rgba(var(--coral-rgb),0.4); background: linear-gradient(180deg, rgba(var(--coral-rgb),0.07), rgba(12,17,14,0.62)); display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; align-items: baseline; } .bedrock .n { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.18em; color: var(--coral); text-transform: uppercase; } .bedrock h3 { font-family: var(--serif); font-weight: 620; font-size: var(--fs-h3-lg); color: var(--coral); } .bedrock p { grid-column: 2; color: var(--text-2); font-size: var(--fs-body); } .bedrock p b { color: var(--text); } /* ---------- constellation ---------- */ .constellation { background: rgba(5,9,7,0.75); border-block: 1px solid var(--border); } .web-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(22px, 3vw, 42px); align-items: stretch; } .web-panel { padding: 0; overflow: hidden; position: relative; display: flex; flex-direction: column; } .web-panel .head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 0; } .web-panel .head .t { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.18em; color: var(--teal); text-transform: uppercase; } #web { width: 100%; height: 460px; display: block; cursor: crosshair; } .web-panel .foot { padding: 0 20px 14px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--text-3); text-transform: uppercase; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .coin-chips { display: flex; flex-direction: column; gap: 14px; height: 100%; } .coin-group { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.16em; color: var(--text-3); display: flex; align-items: center; gap: 8px; margin: 4px 0 0; } .coin-group .gdot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .coin-group .gdot.long { background: var(--green); box-shadow: 0 0 8px rgba(var(--green-rgb),0.5); } .coin-group .gdot.short { background: var(--coral); box-shadow: 0 0 8px rgba(var(--coral-rgb),0.5); } .coin-chip { display: flex; align-items: center; gap: 15px; padding: 22px 22px; cursor: pointer; flex: 1 1 0; min-height: 0; transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .18s ease; } /* r18 item A2: chips are now clickable (drive the wheel + graph + terrain) - read as buttons */ .coin-chip:hover { transform: translateY(-2px); border-color: var(--chip-hl, var(--border-light)); } .coin-chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .coin-chip .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--text-3); flex: none; } .coin-chip:nth-child(2n) .dot { animation-delay: 0.3s; } .coin-chip:nth-child(3n) .dot { animation-delay: 0.6s; } @keyframes cpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(53,181,191,.45);} 50% { box-shadow: 0 0 0 6px rgba(53,181,191,0);} } .coin-chip .c { font-family: var(--mono); font-size: 15.5px; color: var(--text); width: 92px; flex: none; letter-spacing: 0.04em; } .coin-chip .d { font-family: var(--mono); font-size: var(--fs-card); letter-spacing: 0.06em; color: var(--text-2); text-transform: uppercase; line-height: 1.4; } .coin-chip.lit { border-color: var(--teal); background: var(--glass-card-hover); box-shadow: 0 0 14px rgba(53,181,191,0.25); } .coin-chip.lit .d { color: var(--text-2); } /* round O item C: setSeason() spotlights the coin class the phase favors. --chip-hl / --chip-glow are set inline by the wheel; the others dim slightly (the static .dim baseline stays as-is). Placed after .lit so the phase wins. */ .coin-chip.phase-dim:not(.dim) { opacity: 0.78; } .coin-chip.phase-hl, .coin-chip.dim.phase-hl { opacity: 1; border-color: var(--chip-hl, var(--teal)); box-shadow: 0 0 14px var(--chip-glow, rgba(53,181,191,0.25)); } .coin-chip.phase-hl .dot, .coin-chip.dim.phase-hl .dot { background: var(--vit, var(--text-3)); box-shadow: 0 0 8px var(--vit); animation: none; } .coin-chip.phase-hl .c { color: var(--chip-hl, var(--text)); } .coin-chip.phase-hl .d { color: var(--text-2); } /* ---------- seasons wheel ---------- */ /* overflow-x clip = safety belt so the FIX3 full-bleed ribbon (100vw) can never add horizontal page scroll on browsers with a classic (non-overlay) scrollbar. */ .seasons { background: rgba(7,10,8,0.85); overflow-x: clip; } .season-grid { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; } .wheel-holder { position: relative; aspect-ratio: 1; max-width: 460px; margin-inline: auto; width: 100%; } #wheel { width: 100%; height: auto; display: block; } .wheel-pointer { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); color: var(--chalk); font-size: 18px; line-height: 1; z-index: 5; text-shadow: 0 2px 8px rgba(0,0,0,0.8); } .wheel-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; } .wheel-center .season { font-family: var(--sans); font-weight: 900; text-transform: uppercase; font-size: clamp(17px, 2vw, 23px); letter-spacing: 0.02em; } .wheel-center .hunt { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin-top: 8px; max-width: 190px; } .wheel-note { text-align: center; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-top: 14px; } .hunters { display: flex; flex-direction: column; gap: 12px; } /* v14.4 focus choreography: non-matching cards FADE + recede; active POP forward */ .hunter { padding: 18px 18px; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: baseline; opacity: 0.42; transform: scale(0.94); filter: blur(1px) saturate(0.6); transition: opacity .4s ease, transform .4s ease, filter .4s ease, border-color .4s ease, box-shadow .4s ease; cursor: pointer; } .hunter.lit, .hunter.armed { opacity: 1; transform: scale(1.03); filter: none; border-color: var(--hacc, var(--green-dim)); box-shadow: 0 16px 44px rgba(0,0,0,0.5), 0 0 22px rgba(var(--hacc-rgb, var(--green-rgb)),0.16); z-index: 2; position: relative; } /* r20: cards are clickable (drive the phase wheel) - read as buttons with a lift + border-brighten, matching the r18 coin chips. Kept per-state so the hover never shrinks the active card. */ .hunter:hover { border-color: var(--hacc, var(--border-light)); } .hunter:not(.armed):not(.lit):hover { opacity: 0.74; filter: blur(0.3px) saturate(0.85); transform: scale(0.97) translateY(-2px); } .hunter.armed:hover, .hunter.lit:hover { transform: scale(1.03) translateY(-3px); box-shadow: 0 20px 50px rgba(0,0,0,0.55), 0 0 26px rgba(var(--hacc-rgb, var(--green-rgb)),0.22); } .hunter:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } /* round O item B: each hunter's armed accent follows its phase color */ #h-bull { --hacc: #3ecf8e; --hacc-rgb: 62,207,142; } #h-moon { --hacc: #2dd4bf; --hacc-rgb: 45,212,191; } #h-cry { --hacc: #b07d2a; --hacc-rgb: 176,125,42; } #h-doom { --hacc: #8f4a1c; --hacc-rgb: 143,74,28; } /* r20: titles hold ONE line at desktop widths - smaller mono + tighter tracking, nowrap. */ .hunter .nm { font-family: var(--mono); font-size: clamp(11.5px, 0.9vw, 14px); letter-spacing: -0.02em; white-space: nowrap; color: var(--text); } .hunter .ep { font-weight: 800; font-size: var(--fs-label); letter-spacing: 0.04em; text-transform: uppercase; color: var(--green); } .hunter.bear .ep { color: var(--coral); } .hunter .chips { grid-column: 1 / -1; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); } .hunter .chips b { color: var(--gold); font-weight: 400; } .hunter .seasons-badges { grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 4px; } .hunter .sb { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.1em; padding: 2px 7px; border: 1px solid var(--border-light); border-radius: 4px; color: var(--text-3); text-transform: uppercase; } .hunter .sb.on { border-color: var(--teal-dim); color: var(--teal); } /* ---------- doctrine ---------- */ .laws { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .law { padding: 24px 26px; position: relative; overflow: hidden; transition: transform .25s ease, border-color .25s ease; } .law:hover { transform: translateY(-4px); border-color: var(--border-light); } .law .num { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 40px; color: var(--gold); opacity: 0.9; line-height: 1; } .law h3 { font-family: var(--serif); font-weight: 620; font-size: var(--fs-h3-lg); margin-top: 12px; letter-spacing: -0.01em; } .law p { color: var(--text-2); font-size: var(--fs-body); margin-top: 9px; } .law:last-child { grid-column: 1 / -1; } .kicker-line { margin-top: clamp(32px, 5vw, 54px); text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.6vw, 30px); font-weight: 450; color: var(--chalk); } .kicker-line b { color: var(--coral); font-weight: 620; font-style: normal; } /* ---------- avalanche ---------- */ .avalanche { background: linear-gradient(180deg, rgba(7,10,8,0.9), rgba(5,9,7,0.8)); border-block: 1px solid var(--border); } .aval-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(32px, 5vw, 72px); align-items: center; } .aval-copy h2 { font-family: var(--sans); font-weight: 900; text-transform: uppercase; font-size: var(--fs-h2); letter-spacing: -0.01em; margin-top: 18px; line-height: 1.05; } .aval-copy p { color: var(--text-2); margin-top: 18px; max-width: 560px; } .aval-copy p b { color: var(--text); } .report { padding: 0; overflow: hidden; border-color: rgba(var(--coral-rgb),0.35); position: relative; } .report .rep-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--coral); } .report dl { display: grid; grid-template-columns: 130px 1fr; font-size: var(--fs-card); } .report dt { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); padding: 13px 0 13px 20px; border-bottom: 1px solid var(--border); } .report dd { color: var(--text-2); padding: 12px 20px 12px 10px; border-bottom: 1px solid var(--border); } .report dd b { color: var(--text); } .report dd.big { font-family: var(--mono); font-size: var(--fs-h3-lg); color: var(--coral); } .stamp-row { display: flex; justify-content: flex-end; padding: 16px 18px; } .stamp { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.22em; color: var(--green); border: 2px solid var(--green); border-radius: 6px; padding: 7px 13px; opacity: 0.9; text-transform: uppercase; background: rgba(5,9,7,0.5); } /* ---------- proof ---------- */ .proof { padding-block: clamp(48px, 7vw, 80px); } .proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .proof-cell { padding: 22px; } .proof-cell .v { font-family: var(--mono); font-size: clamp(20px, 2.4vw, 28px); color: var(--text); } .proof-cell .v .u { color: var(--green); } .proof-cell .k { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin-top: 6px; } .proof-cell p { font-size: var(--fs-card); color: var(--text-2); margin-top: 10px; } .small-note { margin-top: 22px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); } /* ---------- pricing + holo pass ---------- */ /* WS5 round L: holo moved below the tiers, so the head grid collapses to a single centered column */ .pricing-head-grid { display: block; margin-bottom: clamp(28px, 4vw, 48px); } .holo { position: relative; border-radius: 16px; border: 1px solid rgba(53,181,191,0.35); padding: 26px 24px; overflow: hidden; background: radial-gradient(circle at var(--holo-x, 50%) var(--holo-y, 50%), rgba(45,212,191,0.15), transparent 55%), radial-gradient(circle at calc(100% - var(--holo-x, 50%)) calc(100% - var(--holo-y, 50%)), rgba(245,167,11,0.12), transparent 60%), var(--glass-card); will-change: transform; transform: perspective(800px); } .holo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(223,232,226,0.10) 48%, rgba(53,181,191,0.14) 52%, transparent 62%); background-size: 200% 200%; background-position: var(--holo-x, 50%) var(--holo-y, 50%); pointer-events: none; } .holo .tab { position: absolute; top: 14px; right: 14px; background: var(--gold); color: #2a1c02; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.14em; padding: 4px 12px; border-radius: 5px; } .holo .pct { width: 54px; height: 54px; border-radius: 14px; background: var(--green-bg); border: 1px solid var(--green-dim); display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 900; font-size: 24px; color: var(--green); } .holo h3 { font-family: var(--sans); font-weight: 800; font-size: var(--fs-h3-lg); margin-top: 16px; } .holo p { color: var(--text-2); font-size: var(--fs-card); margin-top: 8px; } .holo .mono-line { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-top: 14px; border-top: 1px dashed var(--border-light); padding-top: 10px; } /* WS5 round L: golden-ticket restyle (more solid, gold border + glow + gold-leaning gradients) */ .holo-ticket { max-width: 720px; margin: clamp(26px, 4vw, 44px) auto 0; text-align: center; padding: 30px 28px 32px; border-color: rgba(245,167,11,0.45); background: radial-gradient(circle at var(--holo-x, 50%) var(--holo-y, 50%), rgba(245,167,11,0.20), transparent 58%), radial-gradient(circle at calc(100% - var(--holo-x, 50%)) calc(100% - var(--holo-y, 50%)), rgba(245,167,11,0.12), transparent 62%), rgba(22,18,8,0.72); box-shadow: 0 0 44px rgba(245,167,11,0.22), 0 18px 50px rgba(0,0,0,0.55); } .holo-ticket::after { background: linear-gradient(105deg, transparent 38%, rgba(245,167,11,0.10) 48%, rgba(245,167,11,0.22) 52%, transparent 62%); background-size: 200% 200%; background-position: var(--holo-x, 50%) var(--holo-y, 50%); } .holo-ticket .pct { margin-inline: auto; background: var(--gold-bg); border-color: rgba(245,167,11,0.5); color: var(--gold); } .holo-ticket h3 { font-size: var(--fs-h3-lg); color: var(--gold); letter-spacing: 0.01em; } .holo-cta { margin-top: 20px; } .tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; } /* N08: pricing gets a wider stage - the four cards breathe on big monitors */ #pricing .wrap { max-width: 1380px; } .tier { padding: 28px 26px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform .28s ease; } .tier:hover { transform: translateY(-6px); } .tier .alt { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); display: flex; justify-content: space-between; gap: 8px; } .tier .alt span { white-space: nowrap; } .tier .alt .m { color: var(--text-3); } .tier h3 { font-family: var(--sans); font-weight: 800; font-size: var(--fs-h3-lg); margin-top: 14px; } .tier .price { font-family: var(--mono); font-size: 34px; margin-top: 12px; color: var(--text); } .tier .price .per { font-size: var(--fs-card); color: var(--text-3); } .tier .blurb { font-size: var(--fs-card); color: var(--text-2); margin-top: 10px; min-height: 60px; } .tier ul { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .tier li { font-size: var(--fs-card); color: var(--text-2); padding-left: 20px; position: relative; } .tier li::before { content: '◦'; position: absolute; left: 2px; top: 0; color: var(--green-dim); } .tier .btn { margin-top: 22px; width: 100%; } .tier.popular { border-color: var(--green-dim); box-shadow: 0 0 40px rgba(var(--green-rgb),0.12), var(--shadow-card); } .pop-pill { position: absolute; top: 16px; right: 16px; background: var(--green); color: #04170e; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.14em; padding: 4px 12px; border-radius: 5px; } .tier.popular .alt { padding-right: 118px; } .tier.soon { opacity: 0.82; } .tier.soon h3 { color: var(--gold); } .pricing-note { margin-top: 26px; text-align: center; color: var(--text-2); font-size: var(--fs-body); } .pricing-note b { color: var(--text); } /* ---------- faq ---------- */ .faq-list { max-width: 820px; } .faq-list details { border-bottom: 1px solid var(--border); } .faq-list summary { cursor: pointer; list-style: none; display: flex; gap: 18px; align-items: baseline; padding: 22px 0; font-family: var(--sans); font-weight: 700; font-size: clamp(16px, 1.9vw, 20px); transition: color .15s ease; } .faq-list summary:hover { color: var(--green); } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary .q { font-family: var(--mono); font-size: var(--fs-label); color: var(--teal); letter-spacing: 0.14em; flex: none; } .faq-list summary .tw { margin-left: auto; font-family: var(--mono); color: var(--text-3); transition: transform .25s ease; flex: none; } .faq-list details[open] summary .tw { transform: rotate(45deg); color: var(--green); } .faq-list .a { padding: 0 0 24px 46px; color: var(--text-2); font-size: var(--fs-body); max-width: 700px; } .faq-list .a b { color: var(--text); } /* ---------- final ---------- */ .final { text-align: center; overflow: clip; min-height: 88vh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(80px, 12vw, 140px); } /* r10: the final plate now follows the SAME ridge grammar as every other photo section - light scrim at the top so the photo genuinely fills the clip-path mountains, heavy at the bottom so it dies into the footer. (Was opacity 0.13 + a solid --bg fade over the top 30%, which blanked the peaks.) */ .final .photo-band { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,9,7,0.12) 0%, rgba(6,10,8,0.30) 10%, rgba(6,10,8,0.80) 34%, rgba(6,9,8,0.90) 100%) center 42% / cover no-repeat; } .final .photo-band.bg-in { background: linear-gradient(180deg, rgba(5,9,7,0.12) 0%, rgba(6,10,8,0.30) 10%, rgba(6,10,8,0.80) 34%, rgba(6,9,8,0.90) 100%), url('img/ridge.webp?v=249') center 42% / cover no-repeat; } .final .photo-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, transparent 74%, var(--bg) 100%); } .final h2 { font-family: var(--sans); font-weight: 900; text-transform: uppercase; font-size: var(--fs-h2); letter-spacing: -0.015em; max-width: 900px; margin-inline: auto; line-height: 1.03; } .final .sub { color: var(--text-2); margin-top: 22px; font-size: var(--fs-body); } .final .cta-row { display: flex; gap: 14px; justify-content: center; margin-top: 38px; flex-wrap: wrap; } .final .micro { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.16em; color: var(--text-3); text-transform: uppercase; margin-top: 20px; } /* round Q item 5: the serif line (and sub) carry a max-width - center them so the whole CTA column sits on axis */ .final h2, .final .lead-serif, .final .sub { margin-inline: auto; } /* mouse-parallax floating strategy cards - sit BEHIND the CTA text (wrap z-index 2), ABOVE the photo-band (z-index -1). Visible mini-cards with photo + strip. */ .final .wrap { position: relative; z-index: 2; } /* soft radial scrim behind the text block so headline stays crisp over the visible cards */ .final .wrap::before { content: ''; position: absolute; inset: -60px -80px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(5,9,7,0.82) 0%, rgba(5,9,7,0.60) 45%, transparent 72%); z-index: -1; pointer-events: none; } .final .float-layer { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; } /* base float-el: invisible until .in; transform is driven by JS parallax */ .final .float-el { position: absolute; max-width: none; opacity: 0; will-change: transform, opacity; transition: opacity 0.9s cubic-bezier(.22,.7,.3,1); } .final .float-el.in { opacity: 0.9; } /* depth-of-field tiers: FAR = small + blurred + desaturated + low opacity, NEAR = large + sharp + high opacity. Wired to the same data-depth the JS reads. */ .final .float-el.tier-far { filter: blur(3.2px) saturate(0.72); z-index: 1; } .final .float-el.tier-mid { filter: blur(1.3px) saturate(0.9); z-index: 2; } .final .float-el.tier-near { filter: none; z-index: 3; } .final .float-el.tier-far.in { opacity: 0.58; } .final .float-el.tier-mid.in { opacity: 0.82; } .final .float-el.tier-near.in { opacity: 0.96; } /* float-card: neutral mini strategy card (no per-animal colorcode). Width driven by --fw. */ .float-card { width: var(--fw, 150px); border-radius: 14px; overflow: hidden; background: rgba(7,13,10,0.88); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 8px 28px rgba(0,3,1,0.70), 0 0 0 0 transparent; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .fc-photo { width: 100%; aspect-ratio: 5/6; background-size: cover; background-position: center 66%; } .fc-strip { padding: 8px 10px; background: rgba(4,8,6,0.78); } .fc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .fc-name { font-family: var(--sans); font-weight: 900; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--chalk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fc-ret { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; color: var(--green); white-space: nowrap; flex-shrink: 0; } .fc-type { display: block; margin-top: 3px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 620px) { .final .float-el.mob-hide { display: none; } /* on mobile, static position only (no parallax); scale every card down but keep the size mix */ .float-card { border-radius: 10px; width: calc(var(--fw, 150px) * 0.62); } } @media (prefers-reduced-motion: reduce) { .final .float-el { transition: opacity 0.9s ease; transform: none !important; } } /* ---------- footer ---------- */ footer { border-top: 1px solid var(--border); background: rgba(5,9,7,0.9); padding-block: 56px 34px; position: relative; z-index: 3; } .foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; } .foot-brand p { font-family: var(--mono); font-size: var(--fs-ui); color: var(--text-3); margin-top: 16px; max-width: 300px; line-height: 1.8; } .foot-col h4 { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); margin-bottom: 16px; } .foot-col a { display: block; color: var(--text-2); text-decoration: none; font-size: var(--fs-ui); padding-block: 5px; } .foot-col a:hover { color: var(--green); } .disclaimer { margin-top: 44px; border: 1px solid var(--border); border-radius: var(--r); padding: 18px 22px; font-size: var(--fs-ui); color: var(--text-3); line-height: 1.75; } .disclaimer b { color: var(--text-2); } .foot-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 26px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.1em; color: var(--text-3); } /* ---------- reveals ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.7,.3,1), transform .7s cubic-bezier(.22,.7,.3,1); } .reveal.in { opacity: 1; transform: none; } /* ---------- responsive ---------- */ @media (max-width: 1080px) { .orbit-sys { height: 560px; } .tiers, .proof-grid { grid-template-columns: repeat(2, 1fr); } .cycle-rail { grid-template-columns: repeat(2, 1fr); } .cycle-rail::before { display: none; } .web-grid { grid-template-columns: 1fr; } .season-grid { grid-template-columns: 1fr; } .aval-grid { grid-template-columns: 1fr; } .pricing-head-grid { grid-template-columns: 1fr; } } @media (max-width: 860px) { /* mobile: burger layout - brand left, burger right (desktop centering off) */ .nav-inner { justify-content: space-between; } .nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: rgba(5,9,7,0.97); border-bottom: 1px solid var(--border); padding: 18px var(--pad) 26px; gap: 4px; } .nav-links.open { display: flex; } .nav-links a.lnk { padding: 12px 0; border-bottom: 1px solid var(--border); } .burger { display: block; } .foot-grid { grid-template-columns: 1fr 1fr; } .hero-stats { flex-wrap: wrap; } .hero-stats .cell { flex: 1 1 40%; border-bottom: 1px solid var(--border); } .orbit-sys { height: 480px; } } @media (max-width: 560px) { .tiers, .laws, .proof-grid, .cycle-rail { grid-template-columns: 1fr; } .law:last-child { grid-column: auto; } .tier .blurb { min-height: 0; } .report dl { grid-template-columns: 108px 1fr; } #web { height: 360px; } .orbit-node { font-size: var(--fs-label); padding: 7px 10px; } } @media (min-width: 861px) { .nav-links { display: flex !important; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .marquee .track { animation: none; } .orbit-halo { animation: none; opacity: 0.4; } .coin-chip .dot { animation: none; } .btn, .tier, .law, .cstep, .hunter { transition: none; } } :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; } /* ============================================================ v14 additions - cockpit hero, beats, modes, click-to-arm ============================================================ */ /* anchor link (secondary hero CTA - text, not a button) */ .anchor-lnk { display: inline-flex; align-items: center; font-family: var(--mono); font-size: var(--fs-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); text-decoration: none; border-bottom: 1px dashed var(--border-light); padding-bottom: 2px; transition: color .15s ease, border-color .15s ease; } .anchor-lnk:hover { color: var(--green); border-color: var(--green-dim); } .hero .cta-row { align-items: center; } /* trust chips - beside the CTA (saas-plan doctrine) */ .trust-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; max-width: 560px; } .trust-chips.center { justify-content: center; margin-inline: auto; margin-top: 22px; } .custody { margin-top: 12px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--text-3); text-transform: uppercase; max-width: 580px; line-height: 1.75; } .custody.center { margin: 16px auto 0; text-align: center; } #eqVal.flash { animation: eqflash 1.1s ease; } @keyframes eqflash { 0% { color: var(--gold); text-shadow: 0 0 14px rgba(245,167,11,0.8); } 100% { color: var(--green); text-shadow: none; } } .tchip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.1em; color: var(--text-2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; background: rgba(8,12,10,0.55); } .tchip .td { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; box-shadow: 0 0 6px rgba(var(--green-rgb),0.7); } /* ---------- cockpit hero panel (the graph, first) ---------- */ .cockpit-wrap { position: relative; } .cockpit { padding: 0; overflow: hidden; border-color: var(--border-light); box-shadow: 0 24px 70px rgba(0,0,0,0.55), 0 0 44px rgba(var(--green-rgb),0.07); } .dash-top { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .dash-top .dbrand { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: var(--fs-ui); letter-spacing: 0.16em; color: var(--text); margin-right: auto; } .dash-top .live { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--gold); background: var(--gold-bg); border: 1px solid rgba(245,167,11,0.35); border-radius: 5px; padding: 3px 9px; order: 2; } .dash-top .tag-ill { order: 3; } .dash-grid { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 300px); } .dash-chart { padding: 14px 0 10px 16px; border-right: 1px solid var(--border); } .dash-chart .lbl, .dash-side .lbl { display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.14em; color: var(--text-3); text-transform: uppercase; padding-right: 16px; margin-bottom: 8px; } .dash-chart .lbl .val { color: var(--green); } #dashEquity { width: 100%; height: 300px; display: block; } .dash-side { padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; } .deal { border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; background: rgba(8,12,10,0.5); } .deal.filling { border-color: rgba(53,181,191,0.5); } .deal .row1 { display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--fs-ui); color: var(--text); } .deal .row1 .pnl { color: var(--green); } .deal .row1 .fillst { color: var(--teal); } .deal .row2 { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--text-3); margin-top: 4px; } .deal .row2 .so { color: var(--teal); } .dash-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 11px 16px; border-top: 1px solid var(--border); font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.12em; color: var(--text-3); text-transform: uppercase; } .dash-foot b { color: var(--text-2); font-weight: 400; } .cockpit-caption { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--text-3); text-transform: uppercase; text-align: center; margin-top: 14px; } /* ---------- beats (why an algorithm) ---------- */ .beats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .beat { padding: 26px 26px 28px; transition: transform .25s ease, border-color .25s ease; } .beat:hover { transform: translateY(-4px); border-color: var(--border-light); } .beat .bn { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.2em; color: var(--teal); } .beat h3 { font-family: var(--sans); font-weight: 900; text-transform: uppercase; font-size: var(--fs-h3); margin-top: 12px; letter-spacing: -0.005em; } .beat:nth-child(2) h3 { color: var(--coral); } .beat:nth-child(3) h3 { color: var(--green); } .beat p { color: var(--text-2); font-size: var(--fs-body); margin-top: 10px; } .beat p b { color: var(--text); } .beat .accent-serif { font-size: var(--fs-lead); margin-top: 16px; margin-bottom: 16px; } .duel { margin-top: 18px; padding: 0; overflow: hidden; } .duel .head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 0; } .duel .head .t { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.18em; color: var(--teal); text-transform: uppercase; } #duel { width: 100%; height: 240px; display: block; } .duel .foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 0 20px 14px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--text-3); text-transform: uppercase; } /* ---------- modes (the product) ---------- */ .modes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .mode { padding: 22px 22px 20px; display: flex; flex-direction: column; transition: transform .25s ease, border-color .25s ease; } .mode:hover { transform: translateY(-4px); border-color: var(--green-dim); } .mode-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .mname { font-family: var(--sans); font-weight: 900; text-transform: uppercase; font-size: var(--fs-h3); letter-spacing: -0.005em; } .mdemo { width: 100%; height: 120px; display: block; margin-top: 14px; border: 1px solid var(--border); border-radius: 8px; background: rgba(5,9,7,0.55); } .mode p { color: var(--text-2); font-size: var(--fs-card); margin-top: 12px; flex: 1; } .mode p b { color: var(--text); } .steps-rail { margin-top: clamp(36px, 5vw, 60px); } .srail-head { display: flex; justify-content: center; margin-bottom: 22px; } .steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; } .steps3::before { content: ''; position: absolute; top: 30px; left: 8%; right: 8%; border-top: 1px dashed rgba(53,181,191,0.35); } .s3 { padding: 20px 20px 18px; position: relative; } .s3 .n { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: var(--fs-card); color: #04170e; background: var(--green); margin-bottom: 12px; box-shadow: 0 0 14px rgba(var(--green-rgb),0.4); } .s3 h4 { font-family: var(--sans); font-weight: 800; text-transform: uppercase; font-size: var(--fs-kicker); } .s3 p { color: var(--text-2); font-size: var(--fs-card); margin-top: 7px; } .s3 p b { color: var(--text); } /* ---------- system (orbit section) ---------- */ .system { background: rgba(5,9,7,0.72); overflow: clip; } .system .orbit-sys { height: 540px; } .orbit-guide { max-width: min(94vw, 520px); } .system .sect-head { margin-bottom: 10px; } /* ---------- seasons: click-to-arm ---------- */ .season-btns { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; flex-wrap: wrap; } .sbtn { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.14em; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border-light); background: rgba(8,12,10,0.55); color: var(--text-2); cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease; } .sbtn:hover { color: var(--text); } .sbtn { font-size: var(--fs-label); padding: 9px 13px; } /* round O item B: wheel phase palette - uptrend green, pump teal-green, downtrend ochre, nuking rust */ .sbtn.ph0.on { color: #3ecf8e; border-color: #3ecf8e; background: rgba(62,207,142,0.1); box-shadow: 0 0 14px rgba(62,207,142,0.25); } .sbtn.ph1.on { color: #2dd4bf; border-color: #2dd4bf; background: rgba(45,212,191,0.1); box-shadow: 0 0 14px rgba(45,212,191,0.25); } .sbtn.ph2.on { color: #b07d2a; border-color: #b07d2a; background: rgba(176,125,42,0.1); box-shadow: 0 0 14px rgba(176,125,42,0.25); } .sbtn.ph3.on { color: #8f4a1c; border-color: #8f4a1c; background: rgba(143,74,28,0.12); box-shadow: 0 0 14px rgba(143,74,28,0.3); } #wheel path { cursor: pointer; } .arm-status { margin-top: 14px; font-size: var(--fs-ui); letter-spacing: 0.06em; color: var(--green); background: rgba(5,9,7,0.7); border: 1px solid var(--border); border-radius: 7px; padding: 9px 13px; min-height: 38px; font-family: var(--mono); } .h-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; grid-column: 1 / -1; } .hunter { display: block; } .hunter .ep { display: block; margin-top: 5px; } .hunter .chips { display: block; margin-top: 7px; } .hunter .seasons-badges { display: flex; margin-top: 9px; } .toggle { display: inline-flex; align-items: center; gap: 8px; flex: none; } .toggle .knob { width: 34px; height: 18px; border-radius: 10px; border: 1px solid var(--border-light); background: rgba(8,12,10,0.6); position: relative; transition: background .3s ease, border-color .3s ease; } .toggle .knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-3); transition: transform .3s ease, background .3s ease; } .toggle .tlabel { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.16em; color: var(--text-3); transition: color .3s ease; } .hunter.armed .toggle .knob { background: rgba(var(--hacc-rgb, var(--green-rgb)),0.12); border-color: var(--hacc, var(--green)); } .hunter.armed .toggle .knob::after { transform: translateX(16px); background: var(--hacc, var(--green)); box-shadow: 0 0 8px rgba(var(--hacc-rgb, var(--green-rgb)),0.8); } .hunter.armed .toggle .tlabel { color: var(--hacc, var(--green)); } .hunter.armed { animation: armflash 0.7s ease; } @keyframes armflash { 0% { box-shadow: 0 0 0 0 rgba(var(--hacc-rgb, 62,207,142),0.55); } 100% { box-shadow: 0 0 0 14px rgba(var(--hacc-rgb, 62,207,142),0); } } /* ---------- coins side ---------- */ .coin-side { display: flex; flex-direction: column; gap: 12px; height: 100%; } .basket-tiers { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; } .basket-tiers .bt { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--text-3); text-transform: uppercase; } .basket-tiers .bt b { color: var(--green); font-weight: 400; } /* ---------- trust extras ---------- */ .law-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .lchip { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--gold); border: 1px solid rgba(245,167,11,0.35); background: var(--gold-bg); border-radius: 6px; padding: 5px 10px; } .trust-kicker { margin-top: 20px; font-size: var(--fs-lead); } /* ---------- v14 responsive ---------- */ @media (max-width: 1080px) { .beats, .modes-grid { grid-template-columns: 1fr; } .cockpit-wrap { max-width: 640px; margin-inline: auto; width: 100%; } } @media (max-width: 640px) { .dash-grid { grid-template-columns: 1fr; } .dash-chart { border-right: 0; border-bottom: 1px solid var(--border); padding-right: 16px; } #dashEquity { height: 160px; } #duel { height: 200px; } .tchip { font-size: var(--fs-micro); } .season-btns { gap: 6px; } .sbtn { padding: 8px 12px; font-size: var(--fs-label); } } @media (prefers-reduced-motion: reduce) { .hunter.armed { animation: none; } } /* ---------- inside the cockpit (v14.2) ---------- */ .inside { background: rgba(5,9,7,0.72); } /* v16 rC N4c: clear gap between the chart card above and this tabs card */ .inspect { padding: 0; overflow: hidden; margin-top: clamp(26px, 3.6vw, 44px); } .inspect-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--border); padding: 0 16px; flex-wrap: wrap; } .itabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 0; } /* obviously-clickable button affordance for the inspector tabs */ .itab { font-family: var(--sans); font-weight: 700; font-size: var(--fs-ctl); color: var(--text-2); background: rgba(8,12,10,0.6); border: 1px solid var(--border-light); border-radius: 999px; padding: 9px 16px; cursor: pointer; box-shadow: var(--shadow-ctl); transition: color .2s ease, border-color .2s ease, background .2s ease, transform .15s ease, box-shadow .2s ease; } .itab:hover { color: var(--text); border-color: var(--teal-dim); transform: translateY(-1px); } .itab.on { color: var(--green); border-color: var(--green-dim); background: var(--green-bg); box-shadow: 0 0 16px rgba(var(--green-rgb),0.12); } .itab.off { background: none; border-color: var(--border); } .itop-stats { display: flex; gap: 18px; align-items: center; font-size: var(--fs-label); letter-spacing: 0.1em; color: var(--text-3); text-transform: uppercase; padding-block: 10px; flex-wrap: wrap; } .itop-stats b { color: var(--text); font-weight: 400; } .itop-stats b.g { color: var(--green); } .ipane { display: none; padding: 18px 18px 20px; } .ipane.on { display: block; } .mono .g, .g { color: var(--green); } .mono .r, .r { color: var(--coral); } .mono .gold, .gold { color: var(--gold); } /* money tab */ .money-header { border: 1px solid var(--border); border-radius: 10px; background: rgba(5,9,7,0.55); padding: 18px 20px 14px; } .mh-flow { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .mh-cell { display: flex; flex-direction: column; gap: 3px; } .mh-cell .k { font-size: var(--fs-micro); letter-spacing: 0.18em; color: var(--text-3); } .mh-cell .v { font-size: clamp(20px, 2.4vw, 28px); color: var(--text); } .mh-cell .v.g { color: var(--green); font-weight: 700; } .mh-arr { color: var(--text-3); font-size: 18px; } .mh-chip { font-family: var(--mono); font-size: var(--fs-ui); color: var(--green); border: 1px solid var(--green-dim); background: var(--green-bg); border-radius: 7px; padding: 6px 11px; margin-left: auto; } .mh-sub { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-light); font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--text-3); text-transform: uppercase; } .gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; } .gauge { border: 1px solid var(--border); border-radius: 10px; background: rgba(5,9,7,0.55); padding: 14px 16px; transition: border-color .2s ease, transform .2s ease; } .gauge:hover { border-color: var(--border-light); transform: translateY(-2px); } .g-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .g-head .gt { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.18em; color: var(--text-3); } .g-head .gv { font-family: var(--mono); font-size: var(--fs-h3); color: var(--text); display: inline-flex; align-items: center; gap: 7px; } .g-head .gv.g { color: var(--green); } .hdot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px rgba(var(--green-rgb),0.8); display: inline-block; } .gauge dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin-top: 10px; font-size: var(--fs-label); } .gauge dt { color: var(--text-3); } .gauge dd { color: var(--text-2); text-align: right; } .gauge .gx { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border); font-size: var(--fs-label); color: var(--text-3); line-height: 1.5; } /* chart tab */ .chart-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--text-3); text-transform: uppercase; padding: 2px 2px 10px; } .chart-head .pair { color: var(--text); } .chart-head .hint { color: var(--teal); } .strip-holder { position: relative; border: 1px solid var(--border); border-radius: 10px; background: rgba(4,6,5,0.7); overflow: hidden; height: 380px; cursor: grab; touch-action: pan-y; } .strip-holder.dragging { cursor: grabbing; } #priceStrip { width: 100%; height: 100%; display: block; } .strip-scroll { height: 6px; margin-top: 8px; border-radius: 3px; background: rgba(30,36,33,0.8); position: relative; cursor: pointer; } .strip-scroll .thumb { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--green-dim); width: 28%; left: 0; } .legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; } .legend .lg { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.04em; color: var(--text-3); } .legend .sw { font-size: var(--fs-micro); letter-spacing: 0.1em; border-radius: 5px; padding: 3px 8px; flex: none; } .legend .sw.buy { color: #9db4ff; border: 1px solid rgba(120,146,255,0.55); background: rgba(91,127,255,0.14); } .legend .sw.tp { color: var(--green); border: 1px solid var(--green-dim); background: var(--green-bg); } .legend .sw.decay { color: #c4b5fd; border: 1px solid rgba(167,139,250,0.5); background: rgba(167,139,250,0.12); } .legend .sw.stop { color: var(--coral); border: 1px dashed rgba(var(--coral-rgb),0.6); background: var(--coral-bg); } /* capital tab */ .cap-stats { display: flex; gap: 20px; flex-wrap: wrap; font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--text-3); text-transform: uppercase; padding: 2px 2px 10px; } .cap-stats b { color: var(--text); font-weight: 400; } .cap-stats b.g { color: var(--green); } .cap-stats b.gold { color: var(--gold); } .cap-stats .hint { color: var(--teal); margin-left: auto; } .cap-holder { position: relative; border: 1px solid var(--border); border-radius: 10px; background: rgba(4,6,5,0.7); overflow: hidden; height: 320px; } #capBands { width: 100%; height: 100%; display: block; } .cap-tip { position: absolute; pointer-events: none; background: rgba(5,9,7,0.94); border: 1px solid var(--border-light); border-radius: 8px; padding: 10px 12px; font-size: var(--fs-label); line-height: 1.8; letter-spacing: 0.04em; color: var(--text-2); box-shadow: var(--shadow-card); z-index: 3; white-space: nowrap; } .cap-tip b { color: var(--text); font-weight: 400; float: right; margin-left: 16px; } .cap-tip .tt { color: var(--text-3); font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; } .cap-copy { margin-top: 12px; font-size: var(--fs-card); color: var(--text-2); } .cap-copy b { color: var(--text); } /* course + pre-made */ .learn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; } .learn { padding: 22px 24px; } .ltag { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.16em; color: var(--teal); border: 1px solid var(--teal-dim); background: rgba(53,181,191,0.08); border-radius: 5px; padding: 4px 9px; } .ltag.gold { color: var(--gold); border-color: rgba(245,167,11,0.4); background: var(--gold-bg); } .learn h3 { font-family: var(--sans); font-weight: 800; text-transform: uppercase; font-size: var(--fs-h3); margin-top: 12px; letter-spacing: 0.005em; } .learn p { color: var(--text-2); font-size: var(--fs-card); margin-top: 8px; } @media (max-width: 1080px) { .gauges { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .learn-grid { grid-template-columns: 1fr; } .itop-stats { display: none; } .strip-holder { height: 300px; } } @media (max-width: 560px) { .gauges { grid-template-columns: 1fr; } .mh-chip { margin-left: 0; } .legend { gap: 10px; } } /* ---------- v14.3 · THE LAB ---------- */ .lab-panel { padding: 0; overflow: hidden; } .lab-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--border); } .lab-bar .lt { font-size: var(--fs-label); letter-spacing: 0.18em; color: var(--teal); } .lab-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-inline: auto; } .lpreset { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.1em; cursor: pointer; color: var(--text-2); background: var(--glass-input, rgba(4,6,5,0.72)); border: 1px solid var(--border-light); border-radius: 999px; padding: 9px 14px; transition: border-color .2s ease, color .2s ease, box-shadow .2s ease; } .lpreset:hover { border-color: var(--green-dim); color: var(--text); } .lpreset.on { border-color: var(--green); color: var(--green); box-shadow: 0 0 18px rgba(var(--green-rgb),0.15); } .lab-strip { position: relative; } #labStrip { display: block; width: 100%; height: 190px; } .lab-status { padding: 10px 20px; font-size: var(--fs-label); letter-spacing: 0.1em; color: var(--text-3); border-top: 1px solid var(--border); min-height: 36px; } .lab-gauges { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--border); } .lgauge { padding: 14px 16px 16px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; min-width: 0; } .lgauge:last-child { border-right: 0; } .lgauge .k { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.16em; color: var(--text-3); } .lgauge .v { font-family: var(--mono); font-size: clamp(16px, 1.6vw, 21px); color: var(--text); } .lgauge .v.g { color: var(--green); } .lgauge .s { font-family: var(--mono); font-size: var(--fs-micro); color: var(--text-3); letter-spacing: 0.06em; } .lab-foot { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 13px 20px; border-top: 1px solid var(--border); font-size: var(--fs-label); letter-spacing: 0.14em; color: var(--green); } .lab-foot .dim { color: var(--text-3); } .lab-notes { margin-top: 22px; color: var(--text-2); font-size: var(--fs-body); max-width: 720px; } .lab-notes b { color: var(--text); } /* ---------- phase-gating - one slim line inside "read the phase" (N06) ---------- */ .gate-note { margin-top: 18px; max-width: 900px; color: var(--text-2); font-size: var(--fs-card); line-height: 1.55; padding: 12px 16px; border: 1px dashed rgba(53,181,191,0.35); border-radius: 10px; } .gate-note b { color: var(--teal); } .gate-note .gd { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px rgba(53,181,191,0.7); margin-right: 10px; vertical-align: 1px; } .gate-note .gate-tier { display: inline-block; margin-left: 8px; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.14em; color: var(--gold); white-space: nowrap; } .hunter .gated-label { grid-column: 1 / -1; display: none; font-size: var(--fs-micro); letter-spacing: 0.18em; color: var(--coral); margin-top: 7px; } .hunter.gated { border-color: rgba(var(--coral-rgb),0.4); } .hunter.gated .gated-label { display: block; } .hunter.gated .toggle .tlabel { color: var(--coral); opacity: 0.75; } @media (max-width: 1080px) { .lab-gauges { grid-template-columns: repeat(3, 1fr); } .lgauge:nth-child(3n) { border-right: 0; } .lgauge { border-bottom: 1px solid var(--border); } } @media (max-width: 560px) { .lab-gauges { grid-template-columns: repeat(2, 1fr); } .lgauge:nth-child(3n) { border-right: 1px solid var(--border); } .lgauge:nth-child(2n) { border-right: 0; } .lab-bar { gap: 10px; } .lab-presets { margin-inline: 0; } } /* ============================================================ v14.4 - hunts chart, strategies, toolkit, cage, decide, 3D coin terrain ============================================================ */ /* HOW IT HUNTS - interactive annotated chart */ .hunts { margin-top: clamp(28px, 4vw, 44px); padding: 0; overflow: hidden; } .hunts .head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px 0; flex-wrap: wrap; } .hunts .head .t { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.18em; color: var(--teal); text-transform: uppercase; } .hunts .head .hint { font-size: var(--fs-micro); letter-spacing: 0.12em; color: var(--text-3); text-transform: uppercase; } #huntChart { width: 100%; height: 300px; display: block; } /* WS3 round L: .hstep unified pill spec lives in the consolidated block further down (search "WS3 unified pills") */ /* STRATEGIES - decision level */ .strat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .strat { padding: 22px 22px 20px; transition: transform .25s ease, border-color .25s ease; } .strat:hover { transform: translateY(-4px); border-color: var(--green-dim); } .stag { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.16em; color: var(--green); border: 1px solid var(--green-dim); background: var(--green-bg); border-radius: 5px; padding: 4px 9px; } .stag.gold { color: var(--gold); border-color: rgba(245,167,11,0.4); background: var(--gold-bg); } .stag.teal { color: var(--teal); border-color: var(--teal-dim); background: rgba(53,181,191,0.08); } .strat h3 { font-family: var(--sans); font-weight: 800; text-transform: uppercase; font-size: var(--fs-h3); margin-top: 13px; letter-spacing: 0.005em; } .strat p { color: var(--text-2); font-size: var(--fs-card); margin-top: 8px; min-height: 78px; } .strat .snames { display: block; border-top: 1px dashed var(--border-light); margin-top: 10px; padding-top: 9px; font-size: var(--fs-micro); letter-spacing: 0.1em; color: var(--text-3); text-transform: uppercase; } .toolkit { margin-top: 16px; padding: 0; overflow: hidden; } .toolkit .head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px 12px; flex-wrap: wrap; } .toolkit .head .t { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.18em; color: var(--teal); text-transform: uppercase; } .tk-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); } .tk { background: none; border: 0; border-right: 1px solid var(--border); padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; transition: background .25s ease; } .tk:last-child { border-right: 0; } .tk:hover { background: rgba(var(--green-rgb),0.05); } .tk canvas { width: 100%; height: 110px; display: block; border: 1px solid var(--border); border-radius: 8px; background: rgba(4,6,5,0.7); } .tk-gauges { height: 110px; border: 1px solid var(--border); border-radius: 8px; background: rgba(4,6,5,0.7); display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 7px 10px; padding: 10px 14px; font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--text-3); text-transform: uppercase; } .tk-gauges b { color: var(--text-2); font-weight: 400; float: right; } .tk-gauges b.g { color: var(--green); } .tk-k { font-size: var(--fs-micro); letter-spacing: 0.12em; color: var(--text-3); text-transform: uppercase; text-align: left; } .tk:hover .tk-k { color: var(--text-2); } .tk-note { padding: 0 20px 16px; font-size: var(--fs-micro); letter-spacing: 0.14em; color: var(--text-3); text-transform: uppercase; } /* THE CAGE - custody */ .cage-sect { border-block: 1px solid var(--border); } .cage-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: center; } .cage-copy h2 { font-family: var(--sans); font-weight: 900; text-transform: uppercase; font-size: var(--fs-h2); letter-spacing: -0.01em; margin-top: 18px; line-height: 1.05; } .cage-copy > p { color: var(--text-2); margin-top: 16px; max-width: 560px; } .cage-copy > p b { color: var(--text); } .cage-facts { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } .cf { padding: 14px 18px; } .cf .ck { font-size: var(--fs-label); letter-spacing: 0.18em; color: var(--green); } .cf p { color: var(--text-2); font-size: var(--fs-card); margin-top: 5px; } .cf p b { color: var(--text); } .cage-box { position: relative; height: 380px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .cage-bars { position: absolute; inset: 14px; border: 1px solid rgba(53,181,191,0.4); border-radius: 10px; background: repeating-linear-gradient(90deg, rgba(53,181,191,0.30) 0 2px, transparent 2px 44px), linear-gradient(180deg, rgba(53,181,191,0.05), transparent 40%); } .cage-bars::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(53,181,191,0.16) 0 1px, transparent 1px 92px); } .cage-core { position: relative; z-index: 2; width: 150px; height: 150px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 34% 30%, #ffd98a 0%, var(--gold) 40%, #8a5e07 100%); color: #2a1c02; box-shadow: 0 0 70px rgba(245,167,11,0.3); } .cage-core .t { font-family: var(--mono); font-size: var(--fs-ui); letter-spacing: 0.14em; font-weight: 700; } .cage-core .s { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.06em; opacity: 0.8; margin-top: 3px; padding-inline: 16px; } .cage-label { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; font-size: var(--fs-label); letter-spacing: 0.2em; color: var(--text-3); text-transform: uppercase; z-index: 2; } /* DECIDE - what a buyer needs (replaces the jungle laws) */ .decide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .decide { padding: 20px 22px; } .decide.main { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 6px 28px; align-items: baseline; border-color: rgba(var(--green-rgb),0.35); } .decide.main h3 { font-family: var(--sans); font-weight: 900; text-transform: uppercase; font-size: clamp(20px, 2.6vw, 28px); } .decide.main p { grid-column: 2; } .dtag { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.18em; color: var(--gold); text-transform: uppercase; } .decide p { color: var(--text-2); font-size: var(--fs-card); margin-top: 8px; } .decide p b { color: var(--text); } /* 3D COIN TERRAIN */ #terrain { position: relative; width: 100%; height: 460px; flex: 1 1 auto; overflow: hidden; cursor: crosshair; } #terrain canvas { display: block; width: 100%; height: 100%; } .terrain-chip { position: absolute; pointer-events: none; z-index: 4; background: rgba(5,9,7,0.94); border: 1px solid var(--border-light); border-radius: 7px; padding: 8px 12px; font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); white-space: nowrap; box-shadow: var(--shadow-card); } .terrain-chip .sub { display: block; color: var(--text-3); font-size: var(--fs-micro); margin-top: 3px; letter-spacing: 0.14em; } .gdot.dim { background: var(--text-3); box-shadow: none; } .coin-chip.dim { opacity: 0.55; } .coin-chip.dim .dot { background: var(--text-3); animation: none; } /* mobile: chips stack under terrain at natural height, no vertical stretch */ @media (max-width: 900px) { .coin-side, .coin-chips { height: auto; } .coin-chip { flex: none; padding: 15px 16px; } } /* v14.4 responsive */ @media (max-width: 1080px) { .strat-grid { grid-template-columns: repeat(2, 1fr); } .tk-grid { grid-template-columns: 1fr; } .tk { border-right: 0; border-bottom: 1px solid var(--border); } .tk:last-child { border-bottom: 0; } .cage-grid { grid-template-columns: 1fr; } .cage-box { max-width: 520px; margin-inline: auto; width: 100%; } .decide-grid { grid-template-columns: 1fr; } .decide.main { grid-template-columns: 1fr; } .decide.main p { grid-column: 1; } .hsteps { grid-template-columns: repeat(2, 1fr); } .hstep { border-bottom: 1px solid var(--border); } } @media (max-width: 560px) { .strat-grid { grid-template-columns: 1fr; } .strat p { min-height: 0; } .hsteps { grid-template-columns: 1fr; } .hstep { border-right: 0; } #huntChart { height: 240px; } #terrain { height: 360px; } #dashEquity { height: 200px; } } @media (prefers-reduced-motion: reduce) { .hunter { transition: none; } .strat, .tk, .hstep, .decide { transition: none; } } /* ═════════ v14.5 - fullbleed hero, mode stage, real panels, cage, tg, pricing extras ═════════ */ /* HERO - the graph IS the screen; text floats in front */ .herofull { position: relative; min-height: 86svh; padding-block: 0; } .herofull #dashEquity { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero-scrim { position: absolute; inset: 0; pointer-events: none; /* r7.1: left stays dark for copy contrast; right thinned hard so the graph reads sharp, not ghosted */ background: linear-gradient(90deg, rgba(5,9,7,0.94) 0%, rgba(5,9,7,0.68) 42%, rgba(5,9,7,0.10) 70%, rgba(5,9,7,0.20) 100%), linear-gradient(180deg, rgba(5,9,7,0.78) 0%, rgba(5,9,7,0.08) 30%, rgba(5,9,7,0.26) 78%, rgba(5,9,7,0.92) 100%); } /* r6: inner min-height tracks .herofull (86svh) — otherwise the 100svh child floor keeps the hero full-height regardless of the parent. */ .herofull-inner { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; width: 100%; min-height: 86svh; padding-block: 150px 140px; flex-wrap: wrap; } .herofull .hero-copy { max-width: 940px; } /* hero copy hugs the LEFT edge - the graph animation owns the rest of the stage */ .herofull .wrap { max-width: none; padding-inline: clamp(24px, 4vw, 64px); } .herofull .hero-h1 { font-size: var(--fs-display); line-height: 0.96; letter-spacing: -0.03em; } /* hero recedes as #why scrolls up over it (JS-driven; base state here). isolation keeps its z-indexed inner layers below the divider band that follows. */ .herofull { transform-origin: 50% 22%; will-change: transform, filter, opacity; isolation: isolate; } .herofull .sub { font-size: clamp(19px, 2.4vw, 22px); max-width: 760px; margin-top: 26px; line-height: 1.4; color: var(--text-2); } /* WS1: three one-sentence subs form one block; tighter between lines, more air around the block + cta */ .hero-sub-block { margin-top: 40px; } .herofull .hero-sub-block .sub { margin-top: 0; } .herofull .hero-sub-block .sub + .sub { margin-top: 12px; } .herofull .hero-sub-block + .cta-row { margin-top: 46px; } /* round P item 5: ALL cursive (accent-serif) lines share one size (--fs-lead), hero included */ .herofull .sub.accent-serif { font-size: var(--fs-lead); } .hero-pnl { display: flex; flex-direction: column; gap: 6px; padding: 18px 22px; min-width: 250px; border-color: rgba(var(--green-rgb),0.28); } .hero-pnl .k { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.2em; color: var(--text-3); } .hero-pnl .v { font-family: var(--mono); font-size: clamp(26px, 3vw, 34px); color: var(--green); } .hero-pnl .v.neg { color: var(--coral); } .hero-pnl .v.tick { animation: pnltick .5s ease; } @keyframes pnltick { 0% { opacity: .55; } 100% { opacity: 1; } } .hero-pnl .s { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.16em; color: var(--text-2); } .hero-pnl .foot { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.12em; color: var(--gold); border-top: 1px dashed var(--border-light); padding-top: 8px; margin-top: 4px; } /* BEATS - short titles + one serif line */ /* round Q item 1: 10px margin-top override removed so .beat .accent-serif keeps its 16px breathing room */ .lead-serif { font-size: var(--fs-lead); color: var(--chalk); margin-top: 16px; max-width: 720px; line-height: 1.4; } /* HOW IT HUNTS - the real engine */ #huntLWC { width: 100%; height: clamp(320px, 40vw, 460px); border-radius: 8px; overflow: hidden; background: #000; } /* WS3 round L: static deal-step colors moved to the unified pill block (search "WS3 unified pills") */ /* COCKPIT - real panel tabs */ .itab.off { opacity: 0.35; cursor: not-allowed; } .pane-stats { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--text-3); text-transform: uppercase; padding: 14px 18px 12px; } /* trades ledger - the real thing, latest rows */ .trades-wrap { overflow-x: auto; } .trades-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); min-width: 560px; } .trades-tbl th { text-align: left; font-weight: 400; font-size: var(--fs-label); letter-spacing: 0.14em; color: var(--text-3); padding: 8px 12px; border-bottom: 1px solid var(--border-light); white-space: nowrap; } .trades-tbl td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text-2); white-space: nowrap; } .trades-tbl tbody tr:hover { background: rgba(var(--green-rgb),0.04); } .trades-tbl .r { text-align: right; } .trades-tbl .g { color: var(--green); } .trades-tbl .rd { color: var(--coral); } .xr { display: inline-block; font-size: var(--fs-label); letter-spacing: 0.1em; padding: 2px 8px; border-radius: 5px; border: 1px solid; } .xr.tp { color: var(--green); border-color: rgba(var(--green-rgb),0.5); background: rgba(var(--green-rgb),0.08); } .xr.dc { color: #a78bfa; border-color: rgba(167,139,250,0.5); background: rgba(167,139,250,0.08); } .xr.sl { color: var(--coral); border-color: rgba(var(--coral-rgb),0.5); background: rgba(var(--coral-rgb),0.08); } .trades-note { margin-top: 12px; font-size: var(--fs-label); letter-spacing: 0.1em; color: var(--text-3); text-transform: uppercase; } .pane-stats b { color: var(--text); } .pane-stats .g { color: var(--green); } .pane-stats .gold { color: var(--gold); } .pane-stats .dim { opacity: .7; margin-left: auto; } .lwc-holder { width: 100%; height: clamp(280px, 34vw, 400px); background: #000; } .pane-copy { color: var(--text-2); font-size: var(--fs-body); padding: 14px 18px 18px; max-width: 900px; } .period-btns { display: inline-flex; gap: 6px; margin-left: auto; } .pbtn { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.1em; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-light); background: rgba(8,12,10,0.6); color: var(--text-2); cursor: pointer; transition: border-color .2s ease, color .2s ease; } .pbtn:hover { border-color: var(--teal-dim); color: var(--text); } .pbtn.on { border-color: var(--green-dim); color: var(--green); background: var(--green-bg); } /* "See how it works" launcher */ .see-how { margin-top: 20px; } /* GUIDED TUTORIAL - spotlight coach-marks */ .tour { position: fixed; inset: 0; z-index: 80; } .tour[hidden] { display: none; } .tour-dim { position: absolute; inset: 0; background: transparent; z-index: 1; } .tour-ring { position: fixed; border: 2px solid var(--teal); border-radius: 12px; box-shadow: 0 0 0 9999px rgba(3,5,4,0.76), 0 0 22px rgba(53,181,191,0.55); pointer-events: none; z-index: 2; transition: top .28s ease, left .28s ease, width .28s ease, height .28s ease; } .tour-card { position: fixed; z-index: 3; width: min(360px, calc(100vw - 32px)); padding: 20px 22px; border-color: rgba(53,181,191,0.45); box-shadow: 0 24px 60px rgba(0,0,0,0.6); transition: top .28s ease, left .28s ease; } .tour-step { font-size: var(--fs-label); letter-spacing: 0.2em; color: var(--teal); } .tour-card h4 { font-family: var(--sans); font-weight: 900; text-transform: uppercase; font-size: var(--fs-h3); margin-top: 8px; letter-spacing: 0.005em; } .tour-card p { color: var(--text-2); font-size: var(--fs-body); line-height: 1.55; margin-top: 9px; } .tour-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; } .tour-close { background: rgba(224,90,106,0.12); border: 1px solid rgba(224,90,106,0.5); color: var(--coral); font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; padding: 8px 18px; border-radius: 999px; transition: background .18s ease, border-color .18s ease; } .tour-close:hover { background: rgba(224,90,106,0.22); border-color: var(--coral); } .tour-next { padding: 9px 18px; font-size: var(--fs-card); } @media (prefers-reduced-motion: reduce) { .tour-ring, .tour-card { transition: none; } } .tour-btns { display: inline-flex; gap: 8px; align-items: center; } .tour-back { font-family: var(--mono); font-size: var(--fs-ui); letter-spacing: 0.1em; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--border-light); background: rgba(8,12,10,0.7); color: var(--text-2); cursor: pointer; transition: border-color .2s ease, color .2s ease; } .tour-back:hover:not(:disabled) { border-color: var(--green-dim); color: var(--text); } .tour-back:disabled { opacity: 0.35; cursor: default; } .tour-count { font-size: var(--fs-label); letter-spacing: 0.14em; color: var(--text-3); } /* confidential figures - best-effort deterrents (only the summary lives on this page) */ #cockpit .hunts, #cockpit .inspect { user-select: none; -webkit-user-select: none; } /* LAB - three gauges */ .lab-gauges.three { grid-template-columns: repeat(3, 1fr); } /* CUSTODY - 2D canvas: funds locked on your exchange, withdrawal struck out */ #custodyCv { width: 100%; height: clamp(320px, 36vw, 440px); display: block; } .cage-visual .cage-label { position: static; display: block; text-align: center; font-size: var(--fs-label); letter-spacing: 0.16em; color: var(--text-3); margin-top: 8px; } /* TELEGRAM */ .tg-sect { background: rgba(5,9,7,0.72); } /* tg-grid: phone is the centerpiece - wider primary column (rD) */ .tg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: start; } .tg-config { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; } .tg-title { font-size: var(--fs-label); letter-spacing: 0.2em; color: var(--teal); } .tg-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-label); letter-spacing: 0.16em; color: var(--text-3); } .tg-field input { font-family: var(--mono); font-size: var(--fs-card); color: var(--text); background: rgba(4,6,5,0.75); border: 1px solid var(--border-light); border-radius: 7px; padding: 10px 12px; } .tg-ticks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; } .tgt { display: flex; align-items: center; gap: 10px; font-size: var(--fs-card); color: var(--text-2); cursor: pointer; } .tgt input { accent-color: var(--green); width: 16px; height: 16px; } .tg-note { font-size: var(--fs-label); letter-spacing: 0.16em; color: var(--gold); } /* tg-phone: prominent, phone-frame feel - rD */ .tg-phone { padding: 0; min-height: 420px; border-color: rgba(53,181,191,0.35); overflow: hidden; display: flex; flex-direction: column; } .tg-phone-chrome { background: rgba(20,26,38,0.95); border-bottom: 1px solid rgba(53,181,191,0.2); padding: 12px 18px 10px; display: flex; align-items: center; gap: 10px; } .tg-phone-top { display: flex; align-items: center; gap: 8px; font-size: var(--fs-ui); font-weight: 700; color: var(--text); flex: 1; } .tg-phone-back { font-size: 16px; color: var(--teal); cursor: pointer; line-height: 1; } .tg-online { font-size: var(--fs-label); color: var(--green); letter-spacing: 0.06em; } .tg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px rgba(62,207,142,0.6); flex-none; } .tg-msgs-wrap { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 11px; background: rgba(10,13,20,0.7); } .tg-msgs { display: flex; flex-direction: column; gap: 11px; } .tg-msg { background: rgba(22,30,46,0.92); border: 1px solid var(--border-light); border-radius: 14px 14px 14px 4px; padding: 11px 14px; font-size: var(--fs-card); color: var(--text-2); display: flex; gap: 10px; justify-content: space-between; align-items: flex-end; animation: tgin .3s ease both; max-width: 88%; } .tg-msg b { color: var(--text); display: block; margin-bottom: 3px; } .tg-msg .time { font-size: var(--fs-label); color: var(--text-3); flex: none; align-self: flex-end; } .tg-msg.dim { opacity: .6; font-style: italic; } .tg-msg.tp b { color: var(--green); } .tg-msg.sl b { color: var(--coral); } .tg-msg.decay b { color: var(--gold); } @keyframes tgin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* COMPARISON DEVICE */ .compare-wrap { margin-top: 0; } /* v16: compare merged INTO #honest below the reflection copy - give it a clear gap from the "It just stands." close line so the two beats read as reflect -> then see. */ #honest .compare-wrap { margin-top: clamp(44px, 6.5vw, 84px); } .compare-head { text-align: center; max-width: 720px; margin: 0 auto 8px; } .compare-title { font-family: var(--sans); font-weight: 900; font-size: clamp(24px, 3.4vw, 38px); letter-spacing: -0.01em; } .compare-head .support { margin-top: 8px; } .device-scene { perspective: 1100px; padding-block: 26px 10px; } .device { margin: 0 auto; max-width: 980px; border: 6px solid #101512; border-radius: 26px; background: #101512; transform: rotateX(22deg) scale(1.02); will-change: transform; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 24px 40px rgba(0,0,0,0.35), 0 80px 80px rgba(0,0,0,0.25), 0 160px 120px rgba(0,0,0,0.15); } .device-screen { border-radius: 18px; overflow: auto; background: var(--bg); } .cmp { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); min-width: 640px; } .cmp th, .cmp td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); } .cmp thead th { font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--text-3); background: rgba(12,17,14,0.9); position: sticky; top: 0; } .cmp thead th.tapcol { color: #5ec4d8; } .cmp td:first-child { color: var(--text-2); } .cmp td.bad { color: var(--coral); } .cmp td.ok { color: var(--text-3); } .cmp td.good { color: var(--green); font-weight: 700; background: rgba(var(--green-rgb),0.06); } .cmp td.good::before { content: '✓ '; } .cmp td.bad::before { content: '✕ '; } /* ---------- allocation donut (#honest): "or build it like THIS" ---------- sits between the reflection copy and the DIY compare, same cold plate. Donut lives in the same dark device screen as the compare table so it reads as a legible component over the mountain photo. */ #honest .alloc-wrap { margin-top: clamp(44px, 6.5vw, 84px); } .alloc-head { text-align: center; max-width: 720px; margin: 0 auto 8px; } .alloc-title { font-family: var(--sans); font-weight: 900; text-transform: uppercase; font-size: clamp(24px, 3.4vw, 38px); letter-spacing: -0.01em; } .alloc-head .support { margin-top: 8px; } .alloc-scene { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; max-width: 960px; margin: 0 auto; padding-block: 26px 10px; } /* reuse the compare .device chrome but flat (no 3D tilt) so the donut stays legible */ .alloc-device { transform: none; max-width: 100%; } .alloc-screen { overflow: hidden; padding: 26px; display: flex; align-items: center; justify-content: center; } .alloc-canvas { width: 100%; max-width: 320px; aspect-ratio: 1 / 1; display: block; margin: 0 auto; } .alloc-copy { text-align: left; } .alloc-legend { list-style: none; display: flex; flex-direction: column; gap: 13px; margin: 0 0 22px; padding: 0; } .alloc-legend li { display: flex; align-items: center; gap: 12px; } .alloc-legend .ldot { width: 10px; height: 10px; border-radius: 3px; flex: none; } .alloc-legend .lname { font-family: var(--sans); font-weight: 700; color: var(--text); font-size: var(--fs-ui); } .alloc-legend .lpct { font-family: var(--mono); font-weight: 700; color: var(--text); font-size: clamp(20px, 2.4vw, 26px); letter-spacing: 0.02em; margin-left: auto; } .alloc-legend .lrole { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); min-width: 96px; text-align: right; } .alloc-legend li.is-hero .lname { color: #5ec4d8; } .alloc-legend li.is-hero .lrole { color: #5ec4d8; } .alloc-arg p { font-family: var(--sans); font-weight: 400; color: var(--text-2); font-size: var(--fs-card); line-height: 1.5; margin-top: 9px; } .alloc-arg .alloc-punch { margin-top: 20px; } .alloc-arg .alloc-punch b { color: #5ec4d8; font-weight: 700; } .alloc-fine { font-family: var(--mono); font-size: var(--fs-micro); color: var(--text-3); letter-spacing: 0.04em; margin-top: 18px; } /* #honest runs a COLD-BLUE accent (not the site green) so this section stands apart: SOLID / 40% / DON'T / the TRAPR column all take the icy #5ec4d8. */ #honest .alloc-title .hl, #honest .compare-title .hl { color: #5ec4d8; } #honest .cmp td.good { color: #5ec4d8; background: rgba(94,196,216,0.07); } @media (max-width: 760px) { .alloc-scene { grid-template-columns: 1fr; gap: 22px; } .alloc-canvas { max-width: 260px; } } @media (max-width: 900px) { .mode-tabs { grid-template-columns: 1fr; } .tg-grid { grid-template-columns: 1fr; } .herofull-inner { align-items: flex-end; } .hero-pnl { min-width: 0; flex: 1 1 100%; } /* hero H1 must never clip on narrow screens (was clamping to a 58px min) */ .herofull .hero-h1 { font-size: clamp(25px, 8vw, 52px); } .herofull .sub { font-size: clamp(16px, 4.3vw, 22px); max-width: 100%; } /* WS1: keep the taller hero from overflowing 100svh on phones */ .herofull-inner { padding-block: 104px 60px; } .hero-sub-block { margin-top: 24px; } .herofull .hero-sub-block .sub + .sub { margin-top: 8px; } .herofull .hero-sub-block + .cta-row { margin-top: 28px; } .sect-head h2 { font-size: var(--fs-h2); } } @media (prefers-reduced-motion: reduce) { .tg-msg { animation: none; } } /* ---------- v14.6 depth + parallax ---------- */ :root { --shadow-lift: 0 24px 64px rgba(0,4,1,0.82), 0 6px 18px rgba(0,4,1,0.58); } .glass { box-shadow: var(--shadow-card), 0 3px 12px rgba(0,4,1,0.42); } /* overlapping cards: the active/front one floats and casts onto its neighbours */ .tier, .mtab, .beat { position: relative; z-index: 1; transition: transform .28s ease, box-shadow .28s ease, z-index 0s; } .tier:hover, .beat:hover { z-index: 3; box-shadow: var(--shadow-lift); } .tier.popular { z-index: 2; box-shadow: 0 0 40px rgba(var(--green-rgb),0.14), var(--shadow-lift); } .mode-tabs { position: relative; } .mtab { transition: transform .28s ease, box-shadow .28s ease; } .mtab.on { z-index: 3; transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--green-dim); } .mtab:not(.on):hover { z-index: 2; box-shadow: var(--shadow-lift); } .inside .glass, .hunts { box-shadow: var(--shadow-lift); } /* parallax: backdrop photo drifts slower than content */ .backdrop .photo { will-change: transform; } .band-photo { will-change: transform; } /* ============================================================ v15 - merged Phases+Coins subheads, merged Capital-safe, Manage-the-strats sideways carousel ============================================================ */ /* merged phases + coins - sub-section heads */ .merge-sub { font-family: var(--sans); font-weight: 900; text-transform: uppercase; font-size: clamp(18px, 2.4vw, 30px); letter-spacing: -0.01em; line-height: 1.08; margin: clamp(34px, 5vw, 60px) 0 6px; max-width: 900px; } .merge-sub:first-of-type { margin-top: 4px; } .merge-sub .ms-n { font-size: 0.5em; color: var(--teal); letter-spacing: 0.14em; opacity: 0.85; margin-right: 12px; vertical-align: 0.14em; } .merge-lead { color: var(--chalk); font-size: var(--fs-body); max-width: 820px; margin: 0 0 clamp(20px, 3vw, 32px); } /* capital-safe - cage folded under the orbit */ .safe-cage { margin-top: clamp(44px, 7vw, 96px); } /* N07: sub-heading sits on the SAME scale as .merge-sub - one type system */ .cage-h3 { font-family: var(--sans); font-weight: 900; text-transform: uppercase; font-size: clamp(18px, 2.4vw, 30px); letter-spacing: -0.01em; line-height: 1.08; margin-bottom: 10px; } .cage-copy .merge-lead { margin-bottom: 0; } /* THE ROUTINE - manage folded into Phases & Coins (round 4) */ .run-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: clamp(18px, 2.6vw, 28px); } .run-step { position: relative; padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 9px; } .run-step .rs-n { font-size: var(--fs-label); letter-spacing: 0.2em; color: var(--teal); } .run-step .rs-h { font-family: var(--sans); font-weight: 900; text-transform: uppercase; font-size: var(--fs-body); letter-spacing: 0; line-height: 1.12; color: var(--text); } .run-step .rs-p { color: var(--text-2); font-size: var(--fs-card); line-height: 1.5; font-weight: 460; } .run-step:not(:last-child)::after { content: '→'; position: absolute; top: 50%; right: -18px; width: 18px; text-align: center; transform: translateY(-50%); color: var(--teal); font-size: 17px; opacity: 0.75; z-index: 3; } .run-step.hot { border-color: rgba(var(--green-rgb),0.45); background: linear-gradient(180deg, rgba(var(--green-rgb),0.08), rgba(8,12,10,0.6)); } .run-step.hot .rs-n { color: var(--green); } #seasons .tg-grid { max-width: 1000px; } /* v16 rC N6: seasons cut hard - wheel + terrain + telegram breathe on slim gaps; one serif line carries the message the section keeps */ #seasons .season-grid { margin-top: clamp(8px, 1.4vw, 16px); } #seasons .web-grid { margin-top: clamp(40px, 6vw, 64px); } #seasons .hunters { justify-content: center; } .tg-lead { font-size: var(--fs-body); color: var(--text-2); max-width: 720px; margin: clamp(44px, 6.5vw, 80px) 0 clamp(16px, 2.4vw, 26px); } /* round I: telegram copy column (telegram config panel deleted) */ .tg-copy { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 18px); align-self: center; } .tg-copy .tg-lead { margin: 0; max-width: none; } @media (max-width: 960px) { .run-rail { grid-template-columns: 1fr 1fr; } .run-step::after { display: none; } } @media (max-width: 560px) { .run-rail { grid-template-columns: 1fr; } } @media (max-width: 720px) { .merge-sub { font-size: clamp(17px, 5.5vw, 24px); } } /* ---------- track record - real backtests trust band ---------- */ .track-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px); } .track-card { padding: clamp(26px, 2.4vw, 36px) clamp(24px, 2.2vw, 32px) clamp(24px, 2.2vw, 30px); display: flex; flex-direction: column; gap: 18px; transition: border-color .2s ease, transform .2s ease; } /* v16 rC N5a: card rails read like GRAPH AXES - gray Y (left) + X (bottom) meeting sharp at the bottom-left corner; card face darkened for contrast */ #strategies .track-card, #strategies .learn { /* v16 rD FIX5: base surface unified to the shared --glass-card material (was a bluer, more-opaque rgba(13,16,23,.82) that read as a different card). The grey graph-axis rails below stay - they're a semantic accent, not the base surface. */ background: var(--glass-card); border: 1px solid rgba(154, 163, 178, 0.13); border-left: 2px solid #8b93a5; border-bottom: 2px solid #8b93a5; border-bottom-left-radius: 0; } .track-card:hover { border-color: var(--green-dim); transform: translateY(-4px); } #strategies .track-card:hover { border-left-color: rgba(154, 163, 178, 0.85); border-bottom-color: rgba(154, 163, 178, 0.85); border-color: rgba(154, 163, 178, 0.25) rgba(154, 163, 178, 0.25) rgba(154, 163, 178, 0.85) rgba(154, 163, 178, 0.85); } .tc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--border-light); padding-bottom: 14px; } .tc-name { font-family: var(--sans); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; font-size: var(--fs-h3-lg); color: var(--text); } .tc-ret { font-family: var(--mono); font-weight: 700; font-size: clamp(28px, 3.4vw, 38px); color: var(--green); } .tc-figs { display: flex; flex-direction: column; gap: 11px; } .tcf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .tcf .k { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.16em; color: var(--text-3); text-transform: uppercase; } .tcf .v { font-family: var(--mono); font-size: var(--fs-card); color: var(--text); } .tcf .v.g { color: var(--green); font-weight: 700; } /* v16 rC N5b: disclaimer shrunk to a small asterisk footnote */ .track-foot { margin: clamp(40px, 3.4vw, 58px) auto 0; text-align: center; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--text-3); } .launch-note { margin-top: 18px; text-align: center; font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); } .track-band .learn-grid { max-width: 900px; margin: clamp(20px, 3vw, 30px) auto clamp(24px, 3.5vw, 34px); } .track-card { gap: 14px; } .tc-lev { display: flex; align-items: center; gap: 8px; font-size: var(--fs-label); letter-spacing: 0.16em; color: var(--teal); text-transform: uppercase; } .tc-lev .lev-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px rgba(53,181,191,0.7); flex: none; } .tc-spark-wrap { display: flex; flex-direction: column; gap: 6px; } .tc-spark { width: 100%; height: clamp(48px, 4.4vw, 64px); display: block; } .tc-spark-cap { font-size: var(--fs-micro); letter-spacing: 0.14em; color: var(--text-3); text-transform: uppercase; } .tc-inc-wrap { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; border-top: 1px dashed var(--border-light); } .tc-inc-k { font-size: var(--fs-micro); letter-spacing: 0.2em; color: var(--teal); text-transform: uppercase; } .tc-inc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .tc-inc li { position: relative; padding-left: 20px; font-size: var(--fs-card); line-height: 1.45; color: var(--text-2); } .tc-inc li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 700; } /* strategy-type chips + included bullets, inside the learn cards (N05) */ .learn .st-k { display: block; margin-top: 14px; font-size: var(--fs-label); letter-spacing: 0.22em; color: var(--teal); text-transform: uppercase; } .st-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; } .st-chip { font-size: var(--fs-label); letter-spacing: 0.12em; padding: 6px 12px; border: 1px solid var(--green-dim); border-radius: 999px; color: var(--green); background: var(--green-bg); } .learn-inc { margin-top: 14px; } .tc-cta { margin-top: 2px; padding-top: 12px; border-top: 1px dashed var(--border-light); font-style: italic; font-weight: 460; color: var(--chalk); font-size: var(--fs-card); line-height: 1.45; } @media (max-width: 860px) { .track-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } } /* ============================================================ v16 - APEX × TERMINAL alignment (incremental) HUD language from the locked post identity on section heads: 5px signal-green left rule + gradient tickline. Tour launch pill. ============================================================ */ .sect-head { border-left: 5px solid var(--green); padding-left: clamp(20px, 3vw, 42px); } /* round Q item 2: the centered heads read off-axis with the green left rule - drop it on the 4 centered sections (bar kept on #why/#modes/#seasons/#cockpit/#faq) */ #strategies .sect-head, #safe .sect-head, #course .sect-head, #pricing .sect-head { border-left: none; padding-left: 0; } /* .sect-head::after underline removed (r16D item 3) */ /* the tour restarts from here, any time - GOLD so it can't be missed */ .tour-launch { margin-left: auto; font-family: var(--mono); font-weight: 700; font-size: var(--fs-ui); letter-spacing: 0.16em; color: #1a1206; background: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 8px 18px; cursor: pointer; transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease; } .tour-launch:hover { background: #ffbe33; transform: translateY(-1px); } .tour-launch:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } /* r18 item B: the tour never auto-launches, so the pill pulses continuously (harder than the old post-close glow) - a bright gold beat + gentle scale so the eye finds the tour. */ @keyframes pilGlow { 0%,100% { transform: scale(1); box-shadow: 0 0 16px rgba(245,167,11,0.60), 0 0 5px rgba(245,167,11,0.35); } 50% { transform: scale(1.045); box-shadow: 0 0 46px rgba(245,167,11,0.98), 0 0 16px rgba(245,167,11,0.62); } } .tour-launch { animation: pilGlow 1.6s ease-in-out infinite; } .tour-launch:hover { animation: none; } /* let the hover lift take over cleanly */ @media (prefers-reduced-motion: reduce) { .tour-launch { animation: none; box-shadow: 0 0 28px rgba(245,167,11,0.72), 0 0 8px rgba(245,167,11,0.45); } } .hunts .head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--border); } /* ============================================================ Round F additions ============================================================ */ /* TOUR - × top-right, footer one line */ .tour-card { position: relative; } .tour-close-x { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; background: rgba(224,90,106,0.15); border: 1px solid rgba(224,90,106,0.5); color: var(--coral); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .18s ease; padding: 0; } .tour-close-x:hover { background: rgba(224,90,106,0.30); border-color: var(--coral); } .tour-nav { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: nowrap; white-space: nowrap; } .tour-count { font-size: var(--fs-label); letter-spacing: 0.14em; color: var(--text-3); flex: none; } .tour-btns { display: inline-flex; gap: 8px; align-items: center; margin-left: auto; } /* HERO - left-to-right wipe on chart canvas */ .herofull #dashEquity { animation: heroWipe 0.95s cubic-bezier(.4,0,.2,1) both; } @keyframes heroWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); } } @media (prefers-reduced-motion: reduce) { .herofull #dashEquity { animation: none; } } /* WHY - body copy off-white */ .why-p { color: var(--text-2); font-size: var(--fs-body); margin-top: 12px; max-width: 640px; } /* round P item 5: the #why cursive is an accent-serif too - keep it at the shared --fs-lead */ .why-p.accent-serif { font-size: var(--fs-lead); } /* round I: page-wide body/support text → LIGHT GRAY (never pure white) */ .sect-head p, .lead-serif { color: var(--text-2); } .sect-head .lead-serif { margin-top: 22px; margin-bottom: 22px; } /* COCKPIT - pbtn tabs match hstep style */ .pbtn { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; color: var(--text-3); background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 14px; transition: color .2s ease, border-color .2s ease; } .pbtn:hover { color: var(--text-2); border-bottom-color: var(--border-light); } .pbtn.on { color: var(--green); border-bottom-color: var(--green); } /* TRACK - hover pop + darker axis stroke */ .track-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .track-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); } #strategies .track-card, #strategies .learn { border-left: 2px solid #a0a8ba; border-bottom: 2px solid #a0a8ba; } /* TELEGRAM real UI */ .tg-cmd { background: rgba(62,207,142,0.12); color: var(--green); border-radius: 4px; padding: 1px 6px; font-family: var(--mono); font-size: 0.9em; } .tg-new-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; align-items: center; } @media (max-width: 900px) { .tg-new-grid { grid-template-columns: minmax(0, 1fr); } } /* minmax(0,·): the fixed-width tg-window must not inflate the column */ .tgw-wrap { display: flex; justify-content: center; } .tg-window { width: 420px; max-width: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.35); font-family: -apple-system, 'Segoe UI', sans-serif; height: 520px; display: flex; flex-direction: column; /* round S item 3: taller window, body fills + scrolls */ } .tg-win-header { background: #17212b; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); } .tg-win-avatar { width: 38px; height: 38px; border-radius: 50%; background: #2b5278; color: #fff; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; flex: none; } .tg-win-meta { display: flex; flex-direction: column; } .tg-win-name { color: #fff; font-weight: 600; font-size: 15px; line-height: 1.2; } .tg-win-online { color: #4db6f5; font-size: 12px; margin-top: 1px; } .tg-win-body { flex: 1; /* round S item 3: grows with the 520px window */ background: #0e1621; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='12' fill='none' stroke='rgba(255,255,255,0.025)' stroke-width='1'/%3E%3Ccircle cx='5' cy='5' r='3' fill='none' stroke='rgba(255,255,255,0.02)' stroke-width='1'/%3E%3Ccircle cx='55' cy='55' r='3' fill='none' stroke='rgba(255,255,255,0.02)' stroke-width='1'/%3E%3C/svg%3E"); padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 4px; } .tg-win-date { text-align: center; font-size: var(--fs-label); color: #6c7883; margin: 4px 0 8px; } .tg-win-msg { display: flex; flex-direction: column; max-width: 86%; margin-bottom: 2px; } .tg-win-in { align-self: flex-start; background: #1e2b3a; color: #e6eaf0; border-radius: 4px 14px 14px 4px; padding: 8px 12px; } .tg-win-out { align-self: flex-end; background: #2b5278; color: #fff; border-radius: 14px 4px 4px 14px; padding: 8px 12px; } .tg-win-sender { font-weight: 700; font-size: var(--fs-ui); color: #4db6f5; margin-bottom: 2px; } .tg-win-new { display: inline-block; background: #4db6f5; color: #0e1621; font-size: var(--fs-micro); border-radius: 3px; padding: 1px 4px; margin-left: 4px; font-weight: 700; letter-spacing: 0.04em; } .tg-win-text { font-size: var(--fs-card); line-height: 1.4; } .tg-win-time { font-size: var(--fs-label); color: #6c7883; text-align: right; margin-top: 3px; } .tg-win-ticks { color: #4db6f5; } /* ── AI MANAGER chat — deliberately NOT Telegram: graphite + gold, no blue ── */ .prod-ai { margin: clamp(24px, 3vw, 38px) 0 clamp(14px, 2vw, 22px); } .prod-ai .cage-h3 { font-size: clamp(24px, 3vw, 40px); margin-bottom: 4px; } .ai-window { width: 420px; max-width: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.35); font-family: var(--mono, 'UbuntuMono', monospace); height: 520px; display: flex; flex-direction: column; border: 1px solid rgba(245,167,11,0.16); } .ai-win-header { background: #12100a; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(245,167,11,0.14); } .ai-win-avatar { width: 38px; height: 38px; border-radius: 10px; flex: none; background: linear-gradient(135deg,#f5a70b,#b9790a); color: #12100a; font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; } .ai-win-online { color: #3ecf8e; font-size: 12px; margin-top: 1px; letter-spacing: .04em; } .ai-win-body { flex: 1; background: #0c0d0b; overflow: hidden; padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 10px; } .ai-msg { max-width: 88%; font-size: var(--fs-card); line-height: 1.45; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; } .ai-msg.show { opacity: 1; transform: none; } .ai-user { align-self: flex-end; background: #1c2a22; color: #dfeee6; border-radius: 12px 4px 12px 12px; padding: 9px 13px; } .ai-bot { align-self: flex-start; background: #16150f; color: #efe6cf; border: 1px solid rgba(245,167,11,0.18); border-radius: 4px 12px 12px 12px; padding: 9px 13px; } .ai-bot b, .ai-user b { color: #f5a70b; font-weight: 700; } .ai-role { display: block; font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 3px; opacity: .6; } .ai-user .ai-role { color: #3ecf8e; text-align: right; } .ai-bot .ai-role { color: #f5a70b; } .ai-typing { display: inline-flex; gap: 4px; padding: 3px 0; } .ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: #f5a70b; animation: aiBlink 1.2s infinite; } .ai-typing i:nth-child(2) { animation-delay: .2s; } .ai-typing i:nth-child(3) { animation-delay: .4s; } @keyframes aiBlink { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } } @media (max-width: 900px) { .ai-window { height: 480px; } } /* ── TOKENIZED STOCKS ticker — beat 4, seamless CSS marquee (gold accent) ── */ .stock-ticker { overflow: hidden; margin: clamp(10px, 1.6vw, 18px) 0 2px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .stock-track { display: flex; gap: 12px; width: max-content; animation: stockScroll 34s linear infinite; } .stock-ticker:hover .stock-track { animation-play-state: paused; } .stk { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; padding: 9px 15px; border-radius: 10px; font-family: var(--mono); background: rgba(245,167,11,0.06); border: 1px solid rgba(245,167,11,0.16); } .stk b { color: #f5a70b; font-size: var(--fs-card); letter-spacing: .04em; } .stk span { color: var(--muted, #9aa39c); font-size: var(--fs-label); } @keyframes stockScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .stock-track { animation: none; flex-wrap: wrap; } .stock-ticker { -webkit-mask-image: none; mask-image: none; } } /* manifesto rotator: blinking type caret (delete/rewrite animation) — lead + word */ #honest h2 .cp-verb.tw, #honest h2 .cp-hl.tw { border-right: 2px solid currentColor; padding-right: 3px; animation: cpCaret 0.9s step-end infinite; } @keyframes cpCaret { 0%,100% { border-color: currentColor; } 50% { border-color: transparent; } } @media (prefers-reduced-motion: reduce) { #honest h2 .cp-verb.tw, #honest h2 .cp-hl.tw { border-right: 0; animation: none; } } /* money highlights — dollar amounts in gold (percentages stay green: two languages) */ b.money { color: var(--gold); } #huntLWC { margin-top: 0; } /* ============================================================ v16 rD - copy + IA restructure: PATH sub-blocks (track), 3-beat seasons, telegram inside THE PRODUCT, 4-card proof grid ============================================================ */ /* track: four proof cards → 2×2 on desktop, 1-col on phones */ .track-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1020px; margin-inline: auto; } @media (max-width: 860px) { .track-grid { grid-template-columns: 1fr; max-width: 460px; } } /* PATH A / PATH B sub-block headers */ .path-head { text-align: center; max-width: 760px; margin: clamp(38px, 5vw, 60px) auto clamp(16px, 2.4vw, 26px); } .path-k { display: block; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.24em; color: var(--gold); text-transform: uppercase; } .path-h3 { font-family: var(--sans); font-weight: 900; text-transform: uppercase; font-size: clamp(19px, 2.2vw, 26px); letter-spacing: 0.01em; margin-top: 10px; color: var(--text); } .path-head p { margin-top: 10px; color: var(--chalk); font-size: var(--fs-body); line-height: 1.55; } .path-head .path-sub { font-size: var(--fs-ui); color: var(--text-2); } .path-head .path-sub b { color: var(--chalk); } .path-solo { max-width: 640px; margin-inline: auto; padding: 22px 24px; } /* WS7 / r5: the 3 Support pillars in a 3D coverflow (same recipe as the deleted strategy carousel). .cflow positions cards absolutely; makeCoverflow() writes the per-card transform/opacity/blur inline (center 1 · adjacent .85 · else .7). */ .cflow-stage { position: relative; max-width: 1080px; margin: clamp(22px, 3vw, 36px) auto 0; } .cflow { position: relative; height: clamp(430px, 40vw, 500px); perspective: 1000px; } .cflow-card { position: absolute; left: 50%; top: 50%; width: min(560px, 72%); height: 94%; margin: 0; transform: translate(-50%, -50%); will-change: transform, opacity, filter; transition: all 500ms ease-in-out; box-shadow: 0 30px 80px rgba(0,0,0,0.55); } .cflow-card.is-center { box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 40px rgba(var(--green-rgb),0.08); } .cflow-card.learn { display: flex; flex-direction: column; } .cflow-card.learn h3 { font-size: var(--fs-h3); } /* relocated from the deleted MODE STAGE block: nav arrows + progress dots, reused here */ .marrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(8,12,10,0.85); border: 1px solid var(--border-light); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; z-index: 30; } .marrow:hover { border-color: var(--green-dim); color: var(--green); background: rgba(8,12,10,0.95); } .marrow.left { left: 4px; } .marrow.right { right: 4px; } .mode-dots { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 22px; } .mdot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: rgba(125,132,127,0.45); cursor: pointer; transition: background .25s ease, width .25s ease; } .mdot:hover { background: rgba(125,132,127,0.8); } .mdot.on { width: 26px; border-radius: 5px; background: var(--teal); box-shadow: 0 0 10px rgba(53,181,191,0.5); } /* mobile ≤860: STACK to a column (as before r5). !important beats the inline transform/opacity/blur/visibility makeCoverflow writes; arrows + dots hidden. */ @media (max-width: 860px) { .cflow { height: auto; perspective: none; display: flex; flex-direction: column; gap: clamp(16px, 4vw, 24px); max-width: 460px; margin-inline: auto; } .cflow-card { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; transform: none !important; opacity: 1 !important; filter: none !important; visibility: visible !important; pointer-events: auto !important; z-index: auto !important; } .cflow-stage .marrow, #crsDots { display: none; } } /* WS4 round L: per-card bg photo + heavy scrim (matches #modes 0.72/0.86), distinct accent per card */ .crs.learn { background-size: cover; background-position: center; overflow: hidden; } .crs-course.learn { background-image: linear-gradient(180deg, rgba(5,9,7,0.72), rgba(7,14,10,0.86)); border-color: rgba(62,207,142,0.30); } .crs-course.learn.bg-in { background-image: linear-gradient(180deg, rgba(5,9,7,0.72), rgba(7,14,10,0.86)), url('img/ridge.webp?v=249'); } .crs-comm.learn { background-image: linear-gradient(180deg, rgba(5,9,7,0.72), rgba(6,11,17,0.86)); border-color: rgba(59,130,246,0.30); } .crs-comm.learn.bg-in { background-image: linear-gradient(180deg, rgba(5,9,7,0.72), rgba(6,11,17,0.86)), url('img/lake-blue.webp?v=249'); } .crs-ai.learn { background-image: linear-gradient(180deg, rgba(5,9,7,0.72), rgba(15,11,4,0.86)); border-color: rgba(245,167,11,0.30); } .crs-ai.learn.bg-in { background-image: linear-gradient(180deg, rgba(5,9,7,0.72), rgba(15,11,4,0.86)), url('img/forest.webp?v=249'); } .crs-course .ltag { color: #3ecf8e; border-color: rgba(62,207,142,0.42); background: rgba(62,207,142,0.10); } .crs-comm .ltag { color: #3b82f6; border-color: rgba(59,130,246,0.42); background: rgba(59,130,246,0.12); } /* AI SUPPORT keeps .ltag.gold */ .crs.learn .learn-inc { margin-bottom: 18px; } /* r5: flex-fill the remaining card height (was fixed 120px in the old grid card) */ .lc-canvas { display: block; width: 100%; flex: 1 1 auto; height: auto; min-height: 120px; margin-top: 14px; border-radius: 8px; background: transparent; } /* the other sides - honest type chips under the proof grid */ .type-honest { text-align: center; max-width: 660px; margin: clamp(26px, 3.4vw, 40px) auto 0; } .type-honest .st-k { display: block; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.22em; color: var(--teal); text-transform: uppercase; } .type-honest .st-chips { justify-content: center; } .type-honest p { margin-top: 12px; color: var(--text-2); font-size: var(--fs-body); line-height: 1.55; } .type-honest p b { color: var(--chalk); } /* seasons: 3-beat kickers (round I: kickers BIGGER, body standardized light gray) */ .seasons .beat { max-width: 760px; margin: clamp(30px, 4vw, 48px) 0 0; } .beat-k { display: block; font-family: var(--mono); font-size: var(--fs-kicker); letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; } .beat-p { margin-top: 10px; color: var(--text-2); font-size: var(--fs-body); line-height: 1.5; } /* FIX: #seasons beats must NOT lift or get a shadow box on hover (pricing .tier unaffected) */ #seasons .beat:hover { transform: none; box-shadow: none; border-color: var(--border); } /* round I: interactive TOTAL-CRYPTO-MARKET regime chart (replaces the static ribbon) */ .regime-chart { max-width: min(1560px, 96vw); margin: clamp(22px, 3vw, 40px) auto 0; padding: 16px 16px 14px; border-radius: 16px; background: rgba(3, 5, 4, 0.96); border: 1px solid rgba(120, 130, 124, 0.16); } .rc-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } .rc-title { font-size: var(--fs-card); letter-spacing: 0.16em; color: var(--text); text-transform: uppercase; font-weight: 700; } .rc-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--text-2); text-transform: uppercase; } .rc-legend .rc-li { display: inline-flex; align-items: center; gap: 6px; } .rc-legend .rc-sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; } /* round Q item A: the chart is a contained horizontal scroller. The CANVAS is the wide element (1620 days x 2px ~ 3240px, ~3x the column); the wrap clips and scrolls it. Body h-scroll stays zero: overflow lives HERE only. */ .rc-canvas-wrap { position: relative; width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(120, 130, 124, 0.5) transparent; } .rc-canvas-wrap::-webkit-scrollbar { height: 6px; } .rc-canvas-wrap::-webkit-scrollbar-track { background: transparent; } .rc-canvas-wrap::-webkit-scrollbar-thumb { background: rgba(120, 130, 124, 0.45); border-radius: 3px; } .rc-canvas-wrap::-webkit-scrollbar-thumb:hover { background: rgba(150, 160, 153, 0.6); } #regimeCanvas { display: block; width: max(100%, 3240px); height: clamp(280px, 34vw, 440px); border-radius: 10px; touch-action: pan-x pan-y; cursor: grab; } #regimeCanvas.rc-dragging { cursor: grabbing; } .regime-chart figcaption { margin-top: 12px; font-size: var(--fs-label); letter-spacing: 0.16em; color: var(--text-3); text-transform: uppercase; } /* round I: compounding beat in #safe */ .compound-beat { max-width: 820px; margin: clamp(28px, 4vw, 44px) auto 0; text-align: center; } .compound-beat .beat-k { font-size: var(--fs-kicker); letter-spacing: 0.18em; } .compound-beat .beat-p { margin-top: 10px; color: var(--text-2); font-size: var(--fs-body); line-height: 1.5; } /* WS4: safety block kicker splits the compounding top from the custody bottom */ .safe-lead-k { text-align: center; margin: clamp(52px, 8vw, 100px) auto clamp(4px, 1vw, 12px); } .safe-lead-k .beat-k { font-size: var(--fs-kicker); letter-spacing: 0.18em; } .safe-lead-k + .safe-cage { margin-top: clamp(16px, 2.4vw, 28px); } #seasons .season-grid { margin-top: clamp(14px, 2vw, 24px); } #seasons .web-grid { margin-top: clamp(14px, 2vw, 24px); } /* WS3: wheel stands alone (beat 1); the 4 strategy cards form a full-width row (beat 3) */ .season-grid-solo { display: block; max-width: 480px; margin: clamp(16px, 2.4vw, 28px) auto 0; } .hunters-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(16px, 2.4vw, 28px); } @media (max-width: 900px) { .hunters-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .hunters-row { grid-template-columns: 1fr; } } /* round O item A: floating wheel rail. Content column left, a 300px rail right whose glass card sticks (top 96px) and follows beats 1-3, web-grid included. The regime chart lives inside the left column (column width = its max width: the accepted anti-overlap tradeoff). Under 900px: one column, the card sits inline at beat 1, no sticky. */ .season-layout { margin-top: clamp(16px, 2.4vw, 28px); } .season-layout .season-beat1 { margin-top: 0; } .season-layout .season-beat1 .beat-k { margin-bottom: 12px; } .wheel-card { padding: 18px 18px 16px; border-radius: 16px; } .wheel-card .season-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; } .wheel-card .sbtn { padding: 8px 6px; text-align: center; } .wheel-card .wheel-holder { max-width: 200px; margin-inline: auto; } .wheel-card .wheel-center .season { font-size: 15px; } .wheel-card .wheel-center .hunt { font-size: var(--fs-micro); max-width: 128px; margin-top: 5px; } .wheel-caption { margin: 14px 0 0; text-align: center; font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); line-height: 1.6; } .regime-chart.rc-full { width: 100%; } @media (min-width: 901px) { /* round P item 1: content spans the FULL section width again; the wheel card floats OVER it as a smaller sticky right-hand overlay (a zero-height rail), instead of reserving a 300px column. Content flows under the glass card. */ .season-layout { display: flex; flex-direction: column; position: relative; } .season-layout .season-beat1 { min-width: 0; } .season-layout .season-main { min-width: 0; } /* height+negative margin (not height:0): gives the sticky a real height so its range stops ~420px before the layout bottom — the absolutely-hung wheel card no longer overhangs beat 4 / the phase-alert (it was covering the ALERT ME button) */ .season-rail { order: -1; position: sticky; top: 96px; height: 420px; margin: 0 0 -420px; z-index: 40; align-self: stretch; pointer-events: none; } .wheel-card { position: absolute; right: 24px; top: 8px; width: 236px; margin: 0; pointer-events: auto; padding: 14px 14px 12px; background: rgba(12, 17, 14, 0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(255, 255, 255, 0.03); } .wheel-card .season-btns { gap: 6px; margin-bottom: 10px; } .wheel-card .sbtn { padding: 6px 4px; font-size: var(--fs-micro); } .wheel-card .wheel-holder { max-width: 152px; } .wheel-card .wheel-center .season { font-size: 13px; } .wheel-card .wheel-center .hunt { font-size: var(--fs-micro); max-width: 118px; margin-top: 3px; } .wheel-card .wheel-caption { margin-top: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } @media (max-width: 900px) { .season-rail { margin-top: 22px; } .wheel-card { max-width: 360px; margin-inline: auto; } } /* THE PRODUCT: the bot is part of the product round S item 3: .prod-tg now WRAPS the 2-col grid (h3 lives inside the left cell) - card-scale title, halved vertical margins, no vazio. */ .prod-tg { margin: clamp(24px, 3vw, 38px) 0 clamp(14px, 2vw, 22px); } .prod-tg .cage-h3 { font-size: clamp(24px, 3vw, 40px); margin-bottom: 4px; } .prod-tg .tg-lead { margin: 10px 0 0; } .prod-tg .tg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } #cockpit .tg-new-grid { margin-top: 0; } /* ============================================================ v16 UX-audit fixes (r16-UX) ============================================================ */ /* UX-8: pricing headline - clean break, no orphaned "YOU'RE READY." */ #pricing .sect-head h2 { text-wrap: balance; } /* UX-6: track's centered serif body reads slow at phone width - centered ≥768px, left-aligned below; the green HUD rule and the text share the same left reference again */ @media (max-width: 767px) { #strategies .sect-head { text-align: left !important; } #strategies .sect-head .eyebrow { justify-content: flex-start !important; } #strategies .sect-head .lead-serif { margin-inline: 0 !important; } #strategies .path-head, #strategies .type-honest { text-align: left; } #strategies .path-head { margin-inline: 0; } } /* UX-10: mobile hero - the deal chart canvas bleeds into TRADE EMOTIONLESS; deepen the left-edge fade so the green headline keeps contrast (animation untouched - this only darkens the scrim layer) */ @media (max-width: 900px) { .hero-scrim { background: linear-gradient(90deg, rgba(4,7,5,0.88) 0%, rgba(4,7,5,0.55) 55%, rgba(4,7,5,0.28) 100%), linear-gradient(180deg, rgba(5,9,7,0.72) 0%, rgba(5,9,7,0.18) 30%, rgba(5,9,7,0.35) 78%, rgba(5,9,7,0.88) 100%); } .hero-copy { position: relative; z-index: 2; } } /* UX-5: seasons headline - let "ARM THE RIGHT STRATEGY." sit on ONE line at desktop */ #seasons .sect-head { max-width: 1180px; } @media (min-width: 901px) { #seasons .sect-head h2 { font-size: var(--fs-h2); } } /* ============================================================ v16 round H - owner review 12 notes ============================================================ */ /* #strategies: 6-type proof grid (3+3), each card wearing its mode color */ .track-grid.track-types { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1160px; } @media (max-width: 1080px) { .track-grid.track-types { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; } } @media (max-width: 640px) { .track-grid.track-types { grid-template-columns: 1fr; max-width: 460px; } } .tt-long { --tcol: #22d3ee; --tcol-rgb: 34,211,238; } /* OX identity is CYAN end-to-end (name + accents), distinct from the profit-green return % */ .tt-long .ac-animal, .tt-long .ac-tab-name { color: #22d3ee; } .tt-lever { --tcol: #f59e0b; --tcol-rgb: 245,158,11; } .tt-short { --tcol: #e05a6a; --tcol-rgb: 224,90,106; } .tt-acc { --tcol: #3b82f6; --tcol-rgb: 59,130,246; } .tt-dist { --tcol: #8b5cf6; --tcol-rgb: 139,92,246; } .tt-more { --tcol: #35b5bf; --tcol-rgb: 53,181,191; } #strategies .track-types .track-card { border-top: 2px solid var(--tcol); } .track-types .tc-name { color: var(--tcol); } .track-types .tc-ret { color: var(--tcol); } .track-types .tc-lev { color: var(--tcol); } .track-types .tc-lev .lev-dot { background: var(--tcol); box-shadow: 0 0 8px rgba(var(--tcol-rgb), 0.7); } .track-types .track-card:hover { box-shadow: var(--shadow-lift), 0 0 30px rgba(var(--tcol-rgb), 0.10); } .tc-ret.tc-na { font-size: var(--fs-card); letter-spacing: 0.16em; opacity: 0.9; border: 1px dashed rgba(var(--tcol-rgb), 0.55); border-radius: 999px; padding: 5px 13px; } .tc-spark-hold { display: flex; align-items: center; justify-content: center; min-height: clamp(48px, 4.4vw, 64px); border: 1px dashed var(--border-light); border-radius: 8px; font-size: var(--fs-micro); letter-spacing: 0.16em; color: var(--text-3); text-transform: uppercase; text-align: center; padding: 6px 10px; } .tc-body { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--text-2); } .tc-body b { color: var(--chalk); } .tc-more { font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--text-2); text-transform: uppercase; padding-top: 12px; border-top: 1px dashed var(--border-light); line-height: 1.6; } .track-types .tc-more b { color: var(--tcol); font-size: var(--fs-card); } /* round W: #strategies = MEET OUR STRATEGIES - expanding-accordion gallery of darker animal cards. Slim collapsed cards grow (flex-grow) on hover / .is-open to reveal full info. */ /* bleeds wider than the .wrap column - user OK with narrow monitors losing the sides. */ /* r5: ~2x taller so the mechanic animation fits INSIDE the open card's .ac-demo panel (the coverflow carousel that used to sit below was deleted). */ .animal-accordion { display: flex; gap: 10px; height: clamp(580px, 54vw, 700px); margin-top: clamp(40px, 4.4vw, 68px); width: min(1404px, 86.4vw); margin-inline: calc((100% - min(1404px, 86.4vw)) / 2); } .animal-card { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 14px; background: #060a08; border: 1px solid rgba(var(--tcol-rgb), 0.35); border-top: 2px solid var(--tcol); box-shadow: 0 10px 30px rgba(0, 4, 1, 0.55); cursor: pointer; outline: none; transition: flex-grow .5s ease, box-shadow .25s ease; } .animal-card:focus-visible { box-shadow: 0 0 0 2px rgba(var(--tcol-rgb), 0.75), 0 10px 30px rgba(0, 4, 1, 0.55); } /* the card's photo lives on a ::before so we can zoom it under overflow:hidden; darkened */ .animal-card::before { content: ''; position: absolute; inset: 0; background: var(--ac-img) center 66% / cover no-repeat; filter: brightness(0.6) saturate(0.92); transition: transform .5s ease, filter .35s ease; } .ac-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--tcol-rgb), 0.10) 0%, rgba(4, 7, 5, 0.28) 42%, rgba(4, 7, 5, 0.96) 100%); transition: background .3s ease; } /* collapsed teaser: compact bottom-anchored name + headline return, readable when narrow */ .ac-tab { position: absolute; inset: auto 0 0 0; padding: clamp(14px, 1.4vw, 20px) clamp(8px, 0.9vw, 14px); display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; opacity: 1; transition: opacity .3s ease; pointer-events: none; } .ac-tab-name { font-family: var(--sans); font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; font-size: clamp(15px, 1.35vw, 19px); color: var(--tcol); word-break: break-word; } .ac-tab-type { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); } .ac-tab-ret { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.12em; color: var(--green); } /* expanded info: anchored to the TOP (sky area), hidden + nudged up when collapsed, fades/slides in when open */ /* r5: full-height (inset:0, was inset:0 0 auto 0) so the .ac-demo panel bottom-fills */ .ac-body { position: absolute; inset: 0; padding: clamp(16px, 1.5vw, 22px); display: flex; flex-direction: column; gap: 6px; min-width: clamp(220px, 24vw, 300px); opacity: 0; transform: translateY(-14px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; } .ac-name { display: flex; flex-direction: column; gap: 1px; line-height: 1; } .ac-the { font-family: var(--sans); font-weight: 300; text-transform: lowercase; font-size: 12px; letter-spacing: 0.15em; color: var(--text-3); } .ac-animal { font-family: var(--sans); font-weight: 900; text-transform: uppercase; letter-spacing: 0.005em; line-height: 1.0; font-size: clamp(22px, 2.4vw, 30px); color: var(--tcol); } .ac-role { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); } .ac-desc { margin-top: 3px; font-size: var(--fs-card); line-height: 1.4; color: var(--chalk); } .ac-return { margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(var(--tcol-rgb), 0.28); display: flex; flex-direction: column; gap: 2px; } .ac-ret-val { font-family: var(--sans); font-weight: 900; font-size: clamp(24px, 2.6vw, 32px); line-height: 1; color: var(--green); } .ac-ret-label { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); } /* v17 r2: trade-count stat under the headline return, reads muted like the label */ .ac-ret-trades { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); margin-top: 3px; } /* r5: the in-card mechanic demo - pushed to the bottom of the open card, a small mono caption over the trade canvas. Solid rgba fill (NO backdrop-filter: it janks under the .5s flex-grow the card runs on open). */ .ac-demo { margin-top: auto; height: 58%; min-height: 300px; display: flex; flex-direction: column; gap: 8px; background: rgba(5,9,7,0.82); border: 1px solid rgba(var(--tcol-rgb), 0.28); border-radius: 10px; padding: 12px 14px 14px; } .ac-demo-k { font-size: var(--fs-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); } .ac-demo .mode-demo { flex: 1 1 auto; min-height: 0; width: 100%; display: block; } /* r9: static explainer caption moved out of the canvas into the DOM - sits below the animation, above the gold CHECK PERFORMANCE CTA. canvas (flex:1) absorbs the height. */ .ac-demo-note { font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-top: 7px; } /* r7: ghost CTA at the bottom of the open card - signals the card opens the full modal. stopPropagation in JS so it doesn't double-fire the card-level open. */ /* r8: promote to gold primary (matches .btn-primary) - the one gold element per card, an intentional echo of the hero CTA. */ .ac-cta { align-self: flex-end; margin-top: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; font-weight: 700; text-transform: uppercase; color: #1a1206; background: linear-gradient(180deg, #ffc84a 0%, var(--gold) 55%, #e0940a 100%); border: none; border-radius: 999px; padding: 12px 20px; cursor: pointer; box-shadow: 0 0 18px rgba(245,167,11,0.28), inset 0 1px 0 rgba(255,255,255,0.34); transition: transform .18s ease, box-shadow .18s ease; will-change: transform; } .ac-cta:hover, .ac-cta:focus-visible { transform: translateY(-2px); outline: none; box-shadow: 0 10px 34px rgba(245,167,11,0.42), 0 0 22px rgba(245,167,11,0.45), inset 0 1px 0 rgba(255,255,255,0.34); } .ac-chip { align-self: flex-start; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); border: 1px solid rgba(var(--tcol-rgb), 0.45); border-radius: 999px; padding: 5px 13px; } /* OPEN state (at-rest .is-open): expand this card, reveal its body, hide the teaser */ .animal-card.is-open { flex-grow: 4; box-shadow: var(--shadow-lift), 0 0 34px rgba(var(--tcol-rgb), 0.20); } .animal-card.is-open .ac-body { opacity: 1; transform: none; pointer-events: auto; padding: clamp(16px, 1.6vw, 26px); gap: 7px; } .animal-card.is-open .ac-tab { opacity: 0; } .animal-card.is-open::before { transform: scale(1.04); filter: brightness(0.72) saturate(0.98); } .animal-card.is-open .ac-scrim { background: linear-gradient(180deg, rgba(4, 7, 5, 0.95) 0%, rgba(4, 7, 5, 0.72) 26%, rgba(4, 7, 5, 0.32) 54%, rgba(var(--tcol-rgb), 0.10) 100%); } /* v17: expansion is a single source of truth - .is-open (set by JS on hover/tap/auto-loop) drives the grow on ALL pointer types, so accordion + carousel stay in lockstep. No :hover flex-grow rule (it would double-grow / fight the synced .is-open card). */ @media (max-width: 760px) { .animal-accordion { height: clamp(540px, 74vw, 660px); } } /* narrow screens: accordion-by-width does not work - stack full-width, show all info */ @media (max-width: 620px) { .animal-accordion { flex-direction: column; height: auto; gap: 12px; width: auto; margin-inline: 0; } .animal-card { flex: none; width: 100%; min-height: 168px; cursor: default; } .animal-card .ac-tab { display: none; } .animal-card .ac-body { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; min-width: 0; } /* stacked: the demo becomes a fixed-height strip under the copy (paintStatics fills it) */ .animal-card .ac-demo { height: 200px; min-height: 0; margin-top: 12px; } .animal-card .ac-cta { align-self: stretch; width: 100%; text-align: center; } /* stacked cards show the body at the top, so darken the top for legibility */ .animal-card .ac-scrim { background: linear-gradient(180deg, rgba(4, 7, 5, 0.95) 0%, rgba(4, 7, 5, 0.72) 26%, rgba(4, 7, 5, 0.32) 54%, rgba(var(--tcol-rgb), 0.10) 100%); } } @media (prefers-reduced-motion: reduce) { .animal-card, .animal-card::before, .ac-scrim, .ac-body, .ac-tab { transition: none; } } /* CREATE YOURS pulled out of the coverflow into its own full-width lab block */ /* r6: same breakout width as .animal-accordion so the lab block tracks the accordion's edges (keep values identical) */ .cy-solo { margin-top: clamp(40px, 4.4vw, 56px); padding: clamp(24px, 2.8vw, 36px) clamp(24px, 2.8vw, 40px); display: flex; flex-direction: column; gap: 10px; width: min(1404px, 86.4vw); margin-inline: calc((100% - min(1404px, 86.4vw)) / 2); /* r16: its own card — the unused WOLF plate under the same dark cover + scrim treatment as the strategy cards, with the site signal-green accent (not cyan — cyan stays Ox-only). */ position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(6,10,8,0.76), rgba(6,10,8,0.90)), linear-gradient(180deg, rgba(62,207,142,0.10), rgba(62,207,142,0.03)), url('img/animals/wolf.webp') center/cover no-repeat, #060a08; border: 1px solid rgba(62,207,142,0.35); border-top: 2px solid #3ecf8e; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,4,1,0.55); } .cy-solo .cy-k { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.22em; color: var(--text-3); text-transform: uppercase; margin: 0; } .cy-h3 { font-family: var(--sans); font-weight: 900; text-transform: uppercase; font-size: clamp(18px, 2.2vw, 28px); letter-spacing: 0.01em; color: var(--text-2); } .cy-h3 .cy-gold { color: var(--gold); } .cy-solo .cy-h3 { margin: 2px 0; } .cy-solo .support { max-width: 760px; } .cy-solo .cy-canvas { height: clamp(200px, 26vw, 264px); margin-top: 14px; } @media (max-width: 640px) { .cy-solo { padding: 20px 18px; } .cy-solo .cy-canvas { height: 210px; } } /* #seasons: more air between the numbered beats + the REAL phase ribbon */ .seasons .beat { margin-top: clamp(56px, 8vw, 104px); } .phase-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; } .phase-scroll img { display: block; width: 100%; min-width: 760px; height: auto; border-radius: 10px; } /* FIX3 plot-in: the ribbon wipes in left→right (phases plotted over time) + a teal scan-head sweeps once across it. Triggered by .plotted (added by IntersectionObserver, once). */ .phase-shot .phase-scroll img { clip-path: inset(0 100% 0 0); } .phase-shot.plotted .phase-scroll img { animation: ribbonPlot 1.55s cubic-bezier(.4,0,.2,1) forwards; } .phase-shot.plotted .phase-scroll::after { content: ''; position: absolute; top: 0; bottom: 0; left: -10%; width: 10%; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(90deg, transparent, rgba(62,207,142,.12) 40%, rgba(62,207,142,.55) 80%, rgba(160,225,195,.95) 100%); animation: ribbonScan 1.55s cubic-bezier(.4,0,.2,1) forwards; } @keyframes ribbonPlot { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes ribbonScan { 0% { left: -10%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .phase-shot .phase-scroll img { clip-path: none !important; animation: none !important; } .phase-shot.plotted .phase-scroll::after { display: none !important; } } /* #cockpit: deal vocabulary = pill BUTTONS in the site button language */ /* WS3 unified pills: .hstep + .itab share one spec (Montserrat 700 / --fs-ctl / pill / --shadow-ctl) */ .hsteps { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 18px 20px; border-top: 1px solid var(--border); } .hstep { flex: 1 1 160px; text-align: center; font-family: var(--sans); font-weight: 700; font-size: var(--fs-ctl); color: var(--text-2); border: 1px solid var(--border-light); border-radius: 999px; background: rgba(8, 12, 10, 0.6); padding: 9px 16px; cursor: pointer; box-shadow: var(--shadow-ctl); transition: border-color .2s ease, background .2s ease, transform .18s ease, box-shadow .18s ease, color .2s ease; } .hstep b { display: block; font-family: var(--sans); font-weight: 700; font-size: var(--fs-ctl); letter-spacing: 0.04em; color: var(--text); margin-bottom: 3px; } .hsub { display: block; font-family: var(--sans); font-weight: 400; font-size: var(--fs-label); letter-spacing: 0; text-transform: none; color: var(--text-3); margin-top: 4px; line-height: 1.35; } /* STATIC deal-step colors: text + border tint (no full fill) */ .hstep.buy { border-color: rgba(var(--green-rgb), 0.42); } .hstep.buy b { color: #3ecf8e; } .hstep.tp { border-color: rgba(245, 167, 11, 0.42); } .hstep.tp b { color: #f5a70b; } .hstep.decay { border-color: rgba(167, 139, 250, 0.42); } .hstep.decay b { color: #a78bfa; } .hstep.sl { border-color: rgba(224, 90, 106, 0.42); } .hstep.sl b { color: #e05a6a; } /* hover / .lit intensifies: stronger border + soft glow in the same hue */ .hstep.buy:hover, .hstep.buy.lit { border-color: #3ecf8e; background: rgba(var(--green-rgb), 0.10); transform: translateY(-2px); box-shadow: 0 6px 22px rgba(var(--green-rgb), 0.22); } .hstep.tp:hover, .hstep.tp.lit { border-color: #f5a70b; background: rgba(245, 167, 11, 0.10); transform: translateY(-2px); box-shadow: 0 6px 22px rgba(245, 167, 11, 0.22); } .hstep.decay:hover, .hstep.decay.lit { border-color: #a78bfa; background: rgba(167, 139, 250, 0.10); transform: translateY(-2px); box-shadow: 0 6px 22px rgba(167, 139, 250, 0.22); } .hstep.sl:hover, .hstep.sl.lit { border-color: #e05a6a; background: rgba(224, 90, 106, 0.10); transform: translateY(-2px); box-shadow: 0 6px 22px rgba(224, 90, 106, 0.22); } @media (max-width: 560px) { .hstep { flex-basis: 100%; } } @media (prefers-reduced-motion: reduce) { .hstep, .hstep:hover, .hstep.lit { transform: none; transition: none; } } /* #cockpit: scrollable animated telegram chat round S item 3: no more 340px cap - the body flexes to fill the 520px window (see .tg-window) and keeps scrolling the live feed */ .tg-win-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2b5278 transparent; } .tgw-hide { display: none; } .tgw-pop { animation: tgwPop .45s cubic-bezier(.2, .8, .3, 1) both; } @keyframes tgwPop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } } .tg-win-trades .tg-win-text { font-family: var(--mono); font-size: 12px; line-height: 1.6; } @media (prefers-reduced-motion: reduce) { .tgw-pop { animation: none; } } /* round N item A: hero typewriter on the .hl headline. .ht-full keeps the real text in the layout (reserves the exact width, no CLS); once JS arms (.on) it turns invisible and .ht-typed overlays the typed slice + a green caret. No-JS and reduced-motion simply keep the plain static headline. */ .ht { position: relative; display: inline-block; } .ht.on .ht-full { visibility: hidden; } .ht-typed { display: none; } .ht.on .ht-typed { display: inline-block; position: absolute; left: 0; top: 0; white-space: pre; } .ht.on .ht-typed::after { content: ''; display: inline-block; width: 0.085em; height: 0.72em; margin-left: 0.06em; background: var(--green); animation: htCaret 0.85s steps(1) infinite; } .ht.done .ht-typed::after { display: none; } @keyframes htCaret { 50% { opacity: 0; } } /* round O item D: CREATE YOURS demo strip inside the lab card (v2: taller, results panel) */ .cy-canvas { display: block; width: 100%; height: 200px; margin-top: 12px; border: 1px solid rgba(64, 76, 70, 0.55); border-radius: 10px; background: rgba(6, 10, 8, 0.55); } /* ──────────────────────────────────────────────────────────── STRATEGY DETAIL MODAL (v17+) — backtest deep-dive per card. Near-fullscreen desktop (≤1200px), full sheet mobile. Tokens only; ember-gold reserved for the single footer CTA. ──────────────────────────────────────────────────────────── */ .smodal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: clamp(0px, 3vw, 40px); } .smodal[hidden] { display: none; } .smodal-backdrop { position: absolute; inset: 0; background: rgba(2, 5, 3, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: smFade .22s ease; } /* r8: --scol = per-strategy accent (set in JS renderAll); fallback teal. Drives the top border, name, phase pill, chart-cell tint + equity line so the ‹ › swap is seen. */ /* r10: glass sheet tinted by the strategy accent (grizzly reads slightly reddish, ox cyan-ish, hawk amber…). One backdrop-filter on the sheet only (perf). */ .smodal-sheet { --scol: var(--teal); --scol-rgb: 53,181,191; position: relative; width: 100%; max-width: 1200px; max-height: 97vh; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(var(--scol-rgb), .09), rgba(var(--scol-rgb), .03)), rgba(6,10,8,.78); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-light); border-top: 3px solid var(--scol); border-radius: 16px; box-shadow: 0 40px 120px rgba(0,0,0,0.7); overflow: hidden; animation: smRise .26s cubic-bezier(.2,.7,.2,1); } @keyframes smFade { from { opacity: 0; } } @keyframes smRise { from { opacity: 0; transform: translateY(18px) scale(.985); } } @media (prefers-reduced-motion: reduce) { .smodal-backdrop, .smodal-sheet { animation: none; } } .smodal-x { position: absolute; top: 12px; right: 12px; z-index: 5; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-light); background: rgba(6,10,8,0.72); color: var(--text-2); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color .18s, border-color .18s, background .18s; } .smodal-x:hover { color: var(--text); border-color: var(--teal-dim); background: rgba(12,18,14,0.9); } .smodal-scroll { overflow-y: auto; overflow-x: hidden; padding: clamp(14px, 1.8vw, 22px) clamp(28px, 4vw, 56px); -webkit-overflow-scrolling: touch; } /* header */ .sm-head { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding-right: 44px; } .sm-art { width: 54px; height: 54px; border-radius: 12px; background-size: cover; background-position: center; border: 1px solid var(--border-light); flex-shrink: 0; } .sm-headmeta { min-width: 0; } .sm-name { font-family: var(--serif); font-size: clamp(21px, 2.3vw, 28px); line-height: 1.02; color: var(--scol); } .sm-intent { color: var(--text-2); font-size: var(--fs-body); margin-top: 3px; } .sm-phase { display: inline-block; margin-top: 6px; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--scol); border: 1px solid rgba(var(--scol-rgb), 0.5); border-radius: 999px; padding: 2px 9px; } /* r8: promoted from micro-mono to a prominent framing line, accent-underlined */ .sm-backtag { align-self: start; text-align: right; font-family: var(--mono); font-size: clamp(14px, 1.2vw, 17px); font-weight: 700; letter-spacing: .14em; color: var(--text-2); line-height: 1.4; max-width: 200px; padding-bottom: 4px; border-bottom: 1px solid rgba(var(--scol-rgb), 0.55); } /* r10: money-flow line (real dollars) — initial → final → profit, full width mono */ .sm-flow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; margin-top: 12px; font-family: var(--mono); font-variant-numeric: tabular-nums; } .sm-flow .fk { font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); } .sm-flow .fv { font-size: clamp(15px, 1.5vw, 19px); font-weight: 700; color: var(--chalk); margin-right: 4px; } .sm-flow .fv.g { color: var(--green); } .sm-flow .fv.r { color: var(--coral); } .sm-flow .far { color: var(--text-3); font-size: clamp(14px, 1.4vw, 17px); margin: 0 4px; } /* headline stat row */ /* r9: boxless slim single-row strip (was 5 boxed tiles ~78px → ~46px) */ /* r10: now the returns strip (net%, net$, cagr, per-day, withdrawn) */ .sm-stats { display: flex; gap: 0; margin-top: 8px; } .sm-stat { flex: 1; padding: 2px 12px; border-left: 1px solid var(--border); min-width: 0; } .sm-stat:first-child { border-left: none; padding-left: 0; } .sm-stat .v { font-family: var(--mono); font-size: 17px; font-variant-numeric: tabular-nums; line-height: 1; color: var(--chalk); } .sm-stat .v.g { color: var(--green); } .sm-stat .v.r { color: var(--coral); } .sm-stat .k { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-top: 2px; } /* framing bar (r7: lives inside the equity cell, sits under the chart/legend) */ .sm-framing { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 8px; padding: 7px 12px; background: var(--green-bg); border: 1px solid var(--green-dim); border-radius: 10px; } .sm-framing .fl { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); } .sm-framing .fs { font-family: var(--mono); font-size: var(--fs-h3); font-variant-numeric: tabular-nums; color: var(--green); font-weight: 700; } .sm-framing .fvs { color: var(--text-3); font-size: var(--fs-ui); } .sm-framing .fb { font-family: var(--mono); font-size: var(--fs-card); color: var(--text-2); } .sm-framing .fn { color: var(--text-3); font-size: var(--fs-ui); font-style: italic; } /* r7: single-screen dashboard grid — equity spans the tall left column, the four supporting cells stack on the right / bottom. No tabs. */ /* r10: trades cell gone — equity spans the tall left column, capital/money/details stack on the right. */ /* r12: equity no longer row-spans — money (histogram) moves to left column below equity; capital+details stack on the right. Kills dead whitespace in equity cell. */ .sm-grid { display: grid; grid-template-columns: 58fr 42fr; grid-template-areas: "equity capital" "money details"; gap: 8px; margin-top: 10px; } /* r8/r10: semi-transparent cells so the sheet's accent tint reads through + accent-tinted border so the colored lines/bars pop; the whole modal tracks the strategy's accent. */ .sm-cell { grid-area: auto; min-width: 0; display: flex; flex-direction: column; background: rgba(4,6,5,.66); border: 1px solid rgba(var(--scol-rgb), 0.22); border-radius: 12px; padding: 9px 11px; } .sm-cell-equity { grid-area: equity; } .sm-cell-capital { grid-area: capital; } .sm-cell-money { grid-area: money; } .sm-cell-details { grid-area: details; } .sm-ct { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; } .sm-ct .sub { text-transform: none; letter-spacing: .02em; color: var(--text-3); opacity: .75; } /* nav arrows sit on the sheet edges, outside the scroll area */ .marrow.sm-nav { width: 44px; height: 44px; font-size: 20px; z-index: 6; } .marrow.sm-nav.left { left: 8px; } .marrow.sm-nav.right { right: 8px; } .smodal-sheet .marrow.sm-nav:hover { border-color: var(--scol); color: var(--scol); } /* r8: strategy-swap slide — replayed by JS re-adding .sm-swap on ‹ › (accent flip + slide) */ @keyframes smSwap { from { opacity: .25; transform: translateX(calc(var(--swapdir, 1) * 26px)); } to { opacity: 1; transform: none; } } .smodal-scroll.sm-swap { animation: smSwap .26s ease-out; } @media (prefers-reduced-motion: reduce) { .smodal-scroll.sm-swap { animation: none; } } /* charts */ /* r9: reclaim height freed by slim stats + no footer band */ /* r12: chart holders flex-fill their cell so LWC autoSize picks up the live height; min-height preserves a usable floor at small viewports. */ .sm-chart { display: block; width: 100%; flex: 1 1 auto; min-height: 200px; } .sm-chart.mini { min-height: 90px; } /* equity legend: compact so the 3-line grizzly variant stays one row */ .sm-eq-legend .sm-legend { gap: 4px 12px; margin-top: 6px; } .sm-eq-legend .sm-legend span { font-size: var(--fs-micro); } .sm-substat-mini { font-family: var(--mono); font-size: var(--fs-micro); color: var(--text-2); margin-top: 6px; line-height: 1.4; } .sm-substat-mini b { color: var(--chalk); font-variant-numeric: tabular-nums; } .sm-substat-mini b.g { color: var(--green); } .sm-substat-mini b.r { color: var(--coral); } .sm-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; } .sm-legend span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: var(--fs-ui); color: var(--text-2); } .sm-legend i { width: 18px; height: 0; border-top-width: 2px; border-top-style: solid; display: inline-block; } .sm-footnote { margin-top: 10px; font-size: var(--fs-ui); color: var(--text-3); line-height: 1.6; } /* details (r7: compacted to fit the single-screen cell) */ .sm-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; } .sm-dl .row { background: var(--glass-card); border: 1px solid var(--border); border-radius: 9px; padding: 4px 8px; } .sm-dl dt { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); } .sm-dl dd { font-family: var(--mono); font-size: var(--fs-card); color: var(--chalk); margin-top: 2px; font-variant-numeric: tabular-nums; } .sm-dl .wide { grid-column: 1 / -1; } .sm-dl .coins { display: flex; flex-wrap: wrap; } .sm-dl .coins span { display: inline-block; font-family: var(--mono); font-size: var(--fs-micro); color: var(--text-2); border: 1px solid var(--border-light); border-radius: 6px; padding: 2px 7px; margin: 3px 5px 0 0; } /* footer CTA (r9: no black band/divider, single compact gold CTA anchored bottom-right) */ .sm-foot { display: flex; justify-content: flex-end; background: none; border: none; padding: 8px 0 0; margin-top: 6px; } .sm-cta { min-width: auto; padding: 10px 22px; font-size: var(--fs-ui); } body.sm-open { overflow: hidden; } @media (max-width: 720px) { .smodal { padding: 0; } .smodal-sheet { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; border: none; } .sm-head { grid-template-columns: auto 1fr; gap: 12px; padding-right: 44px; } .sm-backtag { grid-column: 1 / -1; text-align: left; max-width: none; font-size: 13px; } .sm-art { width: 56px; height: 56px; } .sm-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 0; } .sm-stat { border-left: none; padding: 2px 0; } .sm-stat:last-child { grid-column: 1 / -1; } .sm-cta { width: 100%; min-width: 0; } /* r7: dashboard stacks to a single column in source order */ .sm-grid { grid-template-columns: 1fr; grid-template-areas: "equity" "capital" "money" "details"; } .marrow.sm-nav { width: 36px; height: 36px; font-size: 17px; } .marrow.sm-nav.left { left: 4px; } .marrow.sm-nav.right { right: 4px; } } /* ══════════════════════════════════════════════════════════════════ WAVE 2 ADDITIONS (v=234): footnotes, exchange strip, phase alert, video card + overlay, testimonial wall + add-review modal, chatbot ══════════════════════════════════════════════════════════════════ */ /* --- E: numbered footnotes --- */ sup.fn { font-size: 0.62em; line-height: 0; vertical-align: super; margin-left: 1px; } .fn a { color: rgba(245,167,11,0.72); text-decoration: none; font-family: var(--mono); } .fn a:hover { color: var(--gold); } .disclaimer-link { color: rgba(245,167,11,0.8); text-decoration: none; font-family: var(--mono); font-size: var(--fs-ui); letter-spacing: 0.08em; white-space: nowrap; } .disclaimer-link:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } /* --- C: exchange strip (slim band, sits below hero) --- */ .exch-band { padding-top: clamp(30px, 4.4vw, 52px); text-align: center; background: linear-gradient(180deg, rgba(4,7,5,0.0) 0%, rgba(10,18,12,0.35) 100%); } /* r6: relocated inside #cockpit above "reports to your pocket" — drop the standalone band's top pad + bg (cockpit has its own) */ .exch-inline { margin-top: clamp(48px, 6vw, 80px); padding-top: 0; background: none; } .exch-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; } .exch-kicker { font-size: var(--fs-ui); letter-spacing: 0.24em; color: var(--text-3); text-transform: uppercase; } .exch-rows { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; } .exch-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; } .exch-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: var(--fs-ctl); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); background: var(--glass-card); border: 1px solid var(--border); border-radius: 999px; padding: 8px 15px; } .exch-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(var(--green-rgb), 0.7); flex: none; } .exch-soon-tag { font-size: var(--fs-label); letter-spacing: 0.2em; color: var(--text-3); text-transform: uppercase; margin-right: 2px; } .exch-chip.is-soon { color: var(--text-3); background: rgba(17,26,20,0.4); border-color: var(--border); border-style: dashed; opacity: 0.68; } .exch-foot { font-size: var(--fs-ui); letter-spacing: 0.06em; color: var(--text-3); margin-top: 2px; } /* --- D: phase-change alert email capture (inside #seasons) --- */ .phase-alert { margin-top: clamp(36px, 5vw, 64px); padding: clamp(24px, 3.2vw, 40px); display: grid; grid-template-columns: minmax(160px, 0.82fr) 1.18fr; gap: clamp(20px, 3vw, 48px); align-items: center; } /* LEFT: static phase-wheel illustration + bell + push-style notification chip */ .pa-illus { display: flex; flex-direction: column; align-items: center; gap: 16px; } /* r11: live market-regime canvas (replaces the static phase wheel) */ .pa-anim-hold { position: relative; width: 100%; max-width: 280px; aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: 10px; background: rgba(4,7,5,0.6); overflow: hidden; } .pa-canvas { width: 100%; height: 100%; display: block; } .pa-notif { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(6,10,8,0.72); border: 1px solid var(--border-light); } .pa-bell-wrap { position: relative; display: inline-flex; color: var(--gold); } .pa-bell { width: 18px; height: 18px; transform-origin: 50% 3px; } .pa-ping { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(245,167,11,0.6); animation: paPing 1.8s ease-out infinite; } @keyframes paPing { 0% { box-shadow: 0 0 0 0 rgba(245,167,11,0.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(245,167,11,0); } } /* r11: bell swings when the regime flips (JS toggles .pa-ring) */ @keyframes paBellRing { 0%,100% { transform: rotate(0); } 12% { transform: rotate(15deg); } 26% { transform: rotate(-13deg); } 40% { transform: rotate(9deg); } 54% { transform: rotate(-6deg); } 68% { transform: rotate(3deg); } } .pa-ring .pa-bell { animation: paBellRing .82s ease-in-out; } .pa-chip { font-size: var(--fs-micro); letter-spacing: 0.1em; color: var(--text-2); text-transform: uppercase; white-space: nowrap; } .pa-chip b { color: #3ecf8e; font-weight: 700; } .pa-body { display: flex; flex-direction: column; gap: 14px; } .pa-kicker { font-size: var(--fs-ui); letter-spacing: 0.22em; color: var(--gold); text-transform: uppercase; } .pa-title { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.8vw, 32px); line-height: 1.08; margin: 10px 0 8px; color: var(--chalk); } .pa-form { display: flex; flex-direction: column; gap: 8px; } .pa-input-row { display: flex; gap: 10px; } .pa-email { flex: 1; min-width: 0; font-family: var(--mono); font-size: var(--fs-ctl); color: var(--text); background: rgba(6,10,8,0.6); border: 1px solid var(--border-light); border-radius: 999px; padding: 14px 18px; transition: border-color .18s; } .pa-email:focus { outline: none; border-color: var(--gold); } .pa-email::placeholder { color: var(--text-3); } .pa-btn { white-space: nowrap; padding-inline: 22px; } .pa-error { color: var(--coral); font-size: var(--fs-ui); letter-spacing: 0.04em; } .pa-fine { grid-column: 1 / -1; font-size: var(--fs-ui); color: var(--text-3); letter-spacing: 0.04em; margin-top: -4px; } .phase-alert.pa-done { grid-template-columns: 1fr; text-align: center; } .phase-alert.pa-done .pa-illus { display: none; } .pa-success { font-family: var(--mono); font-size: var(--fs-body); color: var(--green); letter-spacing: 0.03em; } @media (max-width: 760px) { .phase-alert { grid-template-columns: 1fr; } .pa-input-row { flex-direction: column; } .pa-btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .pa-ping, .pa-ring .pa-bell { animation: none; } } /* --- G: video placeholder card + overlay --- */ .video-card { margin-top: clamp(36px, 5vw, 64px); overflow: hidden; cursor: pointer; display: block; transition: transform .2s ease, border-color .2s ease; } .video-card:hover { transform: translateY(-3px); border-color: var(--border-light); } .video-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* r18 item D: one-shot arrival flash when reached via the final-CTA "SHOW ME HOW IT WORKS" */ @keyframes vcFlash { 0% { box-shadow: 0 0 0 0 rgba(245,167,11,0); border-color: var(--border); } 18% { box-shadow: 0 0 42px 6px rgba(245,167,11,0.6), 0 0 14px rgba(245,167,11,0.5); border-color: var(--gold); } 100% { box-shadow: 0 0 0 0 rgba(245,167,11,0); border-color: var(--border); } } .video-card.vc-flash { animation: vcFlash 1.2s ease-out 1; } @media (prefers-reduced-motion: reduce) { .video-card.vc-flash { animation: none; } } .vc-thumb { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(120% 120% at 50% 40%, rgba(24,34,27,0.9), rgba(4,7,5,0.98)); display: flex; align-items: center; justify-content: center; } .vc-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(53,181,191,0.06), transparent 45%); pointer-events: none; } .vc-play { width: 76px; height: 76px; border-radius: 50%; background: linear-gradient(180deg, #ffc84a, var(--gold)); box-shadow: 0 0 34px rgba(245,167,11,0.45), inset 0 1px 0 rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; position: relative; transition: transform .2s; } .video-card:hover .vc-play { transform: scale(1.06); } .vc-play::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 15px 0 15px 26px; border-color: transparent transparent transparent #1a1206; margin-left: 6px; } .vc-meta { display: flex; flex-direction: column; gap: 3px; padding: 16px 20px; } .vc-title { font-size: var(--fs-ctl); letter-spacing: 0.2em; color: var(--chalk); } .vc-sub { font-size: var(--fs-ui); } /* --- B: testimonial wall (v17 r4: moved under #course / Support) --- */ .voices-block { margin-top: clamp(48px, 6vw, 84px); padding-top: clamp(36px, 4.5vw, 60px); border-top: 1px solid var(--border); } .voices-head { margin-bottom: clamp(26px, 3.5vw, 44px); } .voices-subhead { font-family: var(--sans); font-weight: 900; text-transform: uppercase; font-size: var(--fs-h2); letter-spacing: -0.018em; line-height: 1.0; margin: 0; } .voices-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1040px; margin: 0 auto; max-height: 560px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent); } .voices-col { overflow: hidden; } .vcol-track { display: flex; flex-direction: column; gap: 14px; will-change: transform; } .vcard { background: var(--glass-card); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; } .vcard-stars { display: flex; gap: 2px; margin-bottom: 9px; } .vcard-stars svg { width: 15px; height: 15px; flex: none; } .vcard-star-full { fill: var(--gold); color: var(--gold); } .vcard-star-empty { fill: rgba(255,255,255,0.1); color: rgba(255,255,255,0.1); } .vcard-quote { font-size: 13px; line-height: 1.55; color: var(--text-2); margin-bottom: 13px; } .vcard-profile { display: flex; align-items: center; gap: 10px; } .vcard-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; font-weight: 700; flex: none; } .vcard-avatar.is-investor { background: rgba(245,167,11,0.18); border: 1px solid rgba(245,167,11,0.3); color: var(--gold); } .vcard-avatar.is-trader { background: rgba(var(--green-rgb),0.16); border: 1px solid rgba(var(--green-rgb),0.3); color: var(--green); } .vcard-meta { display: flex; flex-direction: column; min-width: 0; } .vcard-nameline { display: flex; align-items: center; gap: 5px; } .vcard-name { font-size: 13.5px; font-weight: 600; color: var(--text); } .vcard-check { width: 14px; height: 14px; color: var(--teal); flex: none; } .vcard-role { font-size: 11px; color: var(--text-3); font-family: var(--mono); letter-spacing: 0.06em; } .voices-cta { text-align: center; margin-top: clamp(26px, 4vw, 44px); } @media (max-width: 1080px) { .voices-wall { grid-template-columns: repeat(2, 1fr); } .voices-col-3 { display: none; } } @media (max-width: 640px) { .voices-wall { grid-template-columns: 1fr; } .voices-col-2 { display: none; } } /* --- B: add-review modal (independent of strategy modal) --- */ .rvmodal { position: fixed; inset: 0; z-index: 1010; display: flex; align-items: center; justify-content: center; padding: clamp(0px, 3vw, 40px); } .rvmodal[hidden] { display: none; } .rvmodal-backdrop { position: absolute; inset: 0; background: rgba(2,5,3,0.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .rvmodal-sheet { position: relative; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-light); border-radius: 16px; box-shadow: 0 40px 120px rgba(0,0,0,0.7); padding: clamp(22px, 3.4vw, 34px); animation: smRise .24s cubic-bezier(.2,.7,.2,1); } @media (prefers-reduced-motion: reduce) { .rvmodal-sheet { animation: none; } } .rvmodal-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-light); background: rgba(6,10,8,0.72); color: var(--text-2); font-size: 15px; cursor: pointer; } .rvmodal-x:hover { color: var(--text); border-color: var(--teal-dim); } .rvmodal h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--chalk); margin-bottom: 4px; } .rvmodal .rv-intro { color: var(--text-2); font-size: var(--fs-ui); margin-bottom: 18px; } .rv-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; } .rv-field label { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); } .rv-field input[type=text], .rv-field select, .rv-field textarea { font-family: var(--sans); font-size: var(--fs-ctl); color: var(--text); background: rgba(6,10,8,0.6); border: 1px solid var(--border-light); border-radius: 10px; padding: 11px 13px; width: 100%; } .rv-field textarea { resize: vertical; min-height: 84px; font-family: var(--sans); line-height: 1.5; } .rv-field input:focus, .rv-field select:focus, .rv-field textarea:focus { outline: none; border-color: var(--gold); } .rv-stars { display: flex; gap: 4px; } .rv-star { background: none; border: none; cursor: pointer; padding: 2px; line-height: 0; color: rgba(255,255,255,0.14); transition: color .12s, transform .12s; } .rv-star svg { width: 26px; height: 26px; } .rv-star.on { color: var(--gold); } .rv-star:hover { transform: scale(1.12); } .rv-counter { align-self: flex-end; font-family: var(--mono); font-size: var(--fs-micro); color: var(--text-3); } .rv-disclaimer { font-family: var(--mono); font-size: var(--fs-micro); color: var(--text-3); letter-spacing: 0.04em; margin: 4px 0 16px; } .rv-submit { width: 100%; } .rv-msg { font-family: var(--mono); font-size: var(--fs-ctl); letter-spacing: 0.02em; margin-top: 14px; text-align: center; } .rv-msg.ok { color: var(--green); } .rv-msg.err { color: var(--coral); } .rv-done { text-align: center; padding: 10px 0; } .rv-done .rv-done-ico { font-size: 34px; color: var(--green); } .rv-done p { color: var(--text-2); font-size: var(--fs-body); margin-top: 8px; } /* v17 r4: email-gate check states (deliberate mockup) */ .rv-gate-state { text-align: center; padding: 22px 0 8px; } .rv-gate-state[hidden] { display: none; } .rv-spinner { display: inline-block; width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(245,167,11,0.22); border-top-color: var(--gold); animation: rvSpin .8s linear infinite; } @keyframes rvSpin { to { transform: rotate(360deg); } } .rv-checking-msg { font-family: var(--mono); font-size: var(--fs-ctl); color: var(--text-2); letter-spacing: 0.03em; margin-top: 14px; } .rv-notfound-msg { font-family: var(--mono); font-size: var(--fs-ctl); color: var(--text-3); letter-spacing: 0.02em; line-height: 1.5; } .rv-start { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: var(--fs-ui); letter-spacing: 0.06em; color: var(--gold); text-decoration: none; opacity: 0.85; transition: opacity .18s; } .rv-start:hover { opacity: 1; text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .rv-spinner { animation: none; } } /* --- F: chatbot widget --- */ .cbot-fab { position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(245,167,11,0.4); background: var(--glass-card); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-card); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--gold); transition: transform .2s, border-color .2s; } .cbot-fab:hover { transform: translateY(-3px) scale(1.04); border-color: var(--gold); } .cbot-fab svg { width: 27px; height: 27px; } .cbot-fab::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(245,167,11,0.5); animation: cbotPulse 2.4s ease-out infinite; pointer-events: none; } @keyframes cbotPulse { 0% { transform: scale(0.9); opacity: 0.7; } 70% { transform: scale(1.35); opacity: 0; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .cbot-fab::after { animation: none; display: none; } } .cbot-fab[hidden], .cbot-panel[hidden] { display: none; } .cbot-panel { position: fixed; right: 22px; bottom: 22px; z-index: 901; width: 360px; max-width: calc(100vw - 32px); max-height: 480px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border-light); border-radius: 16px; box-shadow: 0 30px 90px rgba(0,0,0,0.7); overflow: hidden; animation: smRise .22s cubic-bezier(.2,.7,.2,1); } @media (prefers-reduced-motion: reduce) { .cbot-panel { animation: none; } } .cbot-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: rgba(6,10,8,0.5); } .cbot-head-ico { width: 34px; height: 34px; border-radius: 50%; background: rgba(245,167,11,0.16); border: 1px solid rgba(245,167,11,0.3); color: var(--gold); display: flex; align-items: center; justify-content: center; flex: none; } .cbot-head-ico svg { width: 18px; height: 18px; } .cbot-head-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; } .cbot-head-title { font-family: var(--mono); font-size: var(--fs-ctl); letter-spacing: 0.16em; color: var(--chalk); } .cbot-head-sub { font-size: var(--fs-micro); color: var(--text-3); } .cbot-x { background: none; border: none; color: var(--text-2); font-size: 18px; cursor: pointer; padding: 4px 6px; flex: none; } .cbot-x:hover { color: var(--text); } .cbot-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; } .cbot-msg { max-width: 84%; font-size: var(--fs-ctl); line-height: 1.5; padding: 9px 13px; border-radius: 13px; } .cbot-bot { align-self: flex-start; background: var(--glass-card); border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 4px; } .cbot-user { align-self: flex-end; background: rgba(245,167,11,0.15); border: 1px solid rgba(245,167,11,0.28); color: var(--chalk); border-bottom-right-radius: 4px; } .cbot-msg a { color: var(--gold); } .cbot-typing { align-self: flex-start; display: flex; gap: 4px; padding: 11px 14px; background: var(--glass-card); border: 1px solid var(--border); border-radius: 13px; border-bottom-left-radius: 4px; } .cbot-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: cbotDot 1s infinite ease-in-out; } .cbot-typing span:nth-child(2) { animation-delay: .16s; } .cbot-typing span:nth-child(3) { animation-delay: .32s; } @keyframes cbotDot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } .cbot-email-row { display: flex; gap: 6px; margin-top: 6px; } .cbot-email-row input { flex: 1; min-width: 0; font-family: var(--mono); font-size: var(--fs-ui); color: var(--text); background: rgba(6,10,8,0.6); border: 1px solid var(--border-light); border-radius: 8px; padding: 8px 10px; } .cbot-email-row input:focus { outline: none; border-color: var(--gold); } .cbot-email-row button { font-family: var(--mono); font-size: var(--fs-ui); color: #1a1206; background: linear-gradient(180deg, #ffc84a, var(--gold)); border: none; border-radius: 8px; padding: 0 12px; cursor: pointer; letter-spacing: 0.06em; } .cbot-foot { padding: 10px 14px; border-top: 1px solid var(--border); } .cbot-form { display: flex; gap: 8px; } .cbot-input { flex: 1; min-width: 0; font-family: var(--sans); font-size: var(--fs-ctl); color: var(--text); background: rgba(6,10,8,0.6); border: 1px solid var(--border-light); border-radius: 999px; padding: 10px 14px; } .cbot-input:focus { outline: none; border-color: var(--gold); } .cbot-send { width: 40px; height: 40px; border-radius: 50%; border: none; background: linear-gradient(180deg, #ffc84a, var(--gold)); color: #1a1206; cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center; } .cbot-send svg { width: 18px; height: 18px; } @media (max-width: 480px) { .cbot-panel { right: 0; bottom: 0; width: 100vw; max-width: 100vw; max-height: 82vh; border-radius: 16px 16px 0 0; } } /* --- B: testimonial column halves (seamless loop wrappers) --- */ .vcol-half { display: flex; flex-direction: column; gap: 14px; } /* --- G: video overlay (simple modal) --- */ .vidov { position: fixed; inset: 0; z-index: 1010; display: flex; align-items: center; justify-content: center; padding: clamp(0px, 3vw, 40px); } .vidov[hidden] { display: none; } .vidov-backdrop { position: absolute; inset: 0; background: rgba(2,5,3,0.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .vidov-sheet { position: relative; width: 100%; max-width: 520px; background: var(--surface); border: 1px solid var(--border-light); border-radius: 16px; box-shadow: 0 40px 120px rgba(0,0,0,0.7); padding: clamp(28px, 4vw, 44px); text-align: center; animation: smRise .24s cubic-bezier(.2,.7,.2,1); } @media (prefers-reduced-motion: reduce) { .vidov-sheet { animation: none; } } .vidov-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-light); background: rgba(6,10,8,0.72); color: var(--text-2); font-size: 15px; cursor: pointer; } .vidov-x:hover { color: var(--text); border-color: var(--teal-dim); } .vidov-badge { display: inline-block; font-size: var(--fs-label); letter-spacing: 0.2em; color: var(--gold); border: 1px solid rgba(245,167,11,0.35); border-radius: 999px; padding: 5px 12px; margin-bottom: 14px; } .vidov-msg { color: var(--text-2); font-size: var(--fs-body); line-height: 1.55; margin-bottom: 18px; } /* --- E: risk.html page --- */ .risk-page { padding-top: clamp(120px, 14vw, 168px); padding-bottom: clamp(72px, 10vw, 120px); background: var(--bg-2); } .risk-page .sect-head h1 { font-family: var(--sans); font-weight: 900; text-transform: uppercase; font-size: var(--fs-h2); letter-spacing: -0.018em; margin-top: 18px; line-height: 1.0; } .risk-sec { position: relative; padding: clamp(22px, 3vw, 34px); padding-left: clamp(56px, 7vw, 78px); margin-bottom: 16px; scroll-margin-top: 110px; max-width: 900px; } .risk-num { position: absolute; left: clamp(18px, 2.4vw, 26px); top: clamp(22px, 3vw, 34px); font-size: 22px; font-weight: 700; color: var(--gold); line-height: 1; } .risk-h { font-family: var(--mono); font-size: var(--fs-h3-lg); letter-spacing: 0.01em; text-transform: none; color: var(--chalk); margin-bottom: 12px; line-height: 1.2; } .risk-sec p { color: var(--text-2); font-size: var(--fs-body); line-height: 1.62; margin-bottom: 10px; } .risk-sec p:last-child { margin-bottom: 0; } .risk-sec:target { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(245,167,11,0.4), var(--shadow-card); } .risk-cta { margin-top: clamp(30px, 4vw, 48px); }