/* ========================================================== THORWALLET - MARKETING SITE Dark theme only. Navy canvas · royal-blue primary · cyan-green signal accent · OT Sono throughout. Tokens aligned to the THORWallet brand guideline. ========================================================== */ @font-face { font-family: "OT Sono"; src: url("fonts/OT-Sono-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; } @font-face { font-family: "OT Sono"; src: url("fonts/OT-Sono-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; } @font-face { font-family: "OT Sono"; src: url("fonts/OT-Sono-SemiBold.otf") format("opentype"); font-weight: 600; font-display: swap; } :root { /* Canvas - deep navy */ --bg-base: #0A1A2B; --bg-elev-1: #0E2233; --surface: #142A40; --surface-2: #1A3450; /* Accent - the cyan -> green signal (brand light source) */ --accent-from: #00CCFF; --accent-to: #33FF99; --accent-solid:#1FD9A6; --accent-glow: rgba(31, 217, 166, 0.35); --signal: linear-gradient(120deg, #00CCFF 0%, #19DAC8 52%, #33FF99 100%); --signal-text: var(--signal); /* Primary action - royal blue */ --blue: #2A6BF2; --blue-bright:#3D80FF; --blue-deep: #1D3FB0; /* Text */ --text-hi: #FFFFFF; --text-mid: #C5D2DE; --text-low: #8A9DB0; /* Lines */ --hairline: rgba(255,255,255,0.08); --hairline-strong: rgba(255,255,255,0.15); --accent-line: rgba(0,204,255,0.30); /* Plan card art */ --card-basic-from:#F0531F; --card-basic-to:#B0186A; /* sunrise magenta */ --card-premium-from:#14534A; --card-premium-to:#0A2A24; /* pine teal */ --card-swiss-from:#3B82F6; --card-swiss-to:#1D3FB0; /* electric blue */ /* Type - OT Sono only */ --font-display: "OT Sono", -apple-system, "Helvetica Neue", sans-serif; --font-body: "OT Sono", -apple-system, "Helvetica Neue", sans-serif; --font-mono: "OT Sono", ui-monospace, monospace; --fs-display: clamp(3.0rem, 7.5vw, 6.5rem); --fs-h1: clamp(2.3rem, 4.6vw, 4.2rem); --fs-h2: clamp(1.5rem, 3vw, 2.4rem); --fs-lead: clamp(1.1rem, 1.5vw, 1.45rem); --fs-body: 1.0625rem; --fs-cap: 0.8125rem; --section-y: clamp(96px, 12vw, 184px); --container: 1320px; --gutter: clamp(20px, 5vw, 80px); --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; --shadow-ambient: 0 24px 70px -24px rgba(0,0,0,0.7); --shadow-glow: 0 0 90px -24px var(--accent-glow); --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-micro: 180ms; --dur: 440ms; --dur-slow: 700ms; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg-base); color: var(--text-mid); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* Ambient mesh + grain over the whole page */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 50% at 82% 8%, rgba(0,204,255,0.10), transparent 60%), radial-gradient(55% 45% at 12% 78%, rgba(51,224,160,0.08), transparent 60%); } body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } main, nav, footer { position: relative; z-index: 1; } /* ========================================================== LIGHT THEME — opt-in via [data-theme="light"] on Apple-clean: white canvas, navy ink, deeper accents that stay readable, monochrome logos flipped to black. ========================================================== */ [data-theme="light"] { --bg-base: #FFFFFF; --bg-elev-1: #F4F7FB; --surface: #F2F6FB; --surface-2: #E7EEF6; --accent-solid: #0C9E73; --accent-glow: rgba(12,158,115,0.20); --signal-text: linear-gradient(120deg, #0094C6 0%, #07A07C 52%, #12B257 100%); --text-hi: #0A1A2B; --text-mid: #3A5168; --text-low: #6A8198; --hairline: rgba(10,26,43,0.10); --hairline-strong: rgba(10,26,43,0.16); --accent-line: rgba(0,150,200,0.45); --shadow-ambient: 0 18px 48px -28px rgba(20,45,75,0.30); --shadow-glow: 0 0 60px -30px var(--accent-glow); } [data-theme="light"] body::after { opacity: 0.018; } [data-theme="light"] body::before { background: radial-gradient(60% 50% at 82% 8%, rgba(0,204,255,0.06), transparent 60%), radial-gradient(55% 45% at 12% 78%, rgba(51,224,160,0.05), transparent 60%); } [data-theme="light"] .nav.is-frosted { background: rgba(255,255,255,0.78); border-bottom-color: var(--hairline); } [data-theme="light"] .nav-dropdown { background: rgba(255,255,255,0.97); } [data-theme="light"] .mobile-menu { background: rgba(255,255,255,0.98); } [data-theme="light"] .lang-menu { background: rgba(255,255,255,0.98); } [data-theme="light"] .cty-badge.no { color: #C23B3B; } /* monochrome logos: flip white→black so they read on the white canvas */ [data-theme="light"] .creds-row .cred img { filter: brightness(0); opacity: 0.5; } [data-theme="light"] .nav-logo img { filter: brightness(0); } [data-theme="light"] .creds-row .cred:hover img { opacity: 0.82; } [data-theme="light"] .exw-logo img, [data-theme="light"] .exw-logo.tw img { filter: brightness(0); opacity: 0.82; } /* soft lift for key cards (white insets disappear on light) */ [data-theme="light"] .point, [data-theme="light"] .stat-tile, [data-theme="light"] .plan, [data-theme="light"] .tier, [data-theme="light"] .tnsl, [data-theme="light"] .news, [data-theme="light"] .cty-list { box-shadow: 0 1px 2px rgba(20,45,75,0.04), 0 14px 32px -24px rgba(20,45,75,0.28); } /* ---------- Theme toggle button ---------- */ .theme-toggle { width: 44px; height: 44px; border-radius: var(--r-pill); border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--text-mid); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease); } .theme-toggle:hover { color: var(--text-hi); border-color: var(--accent-line); } .theme-toggle svg { width: 18px; height: 18px; display: block; } .theme-toggle-m { width: auto; height: auto; border: 0; background: none; gap: 12px; padding: 12px 0 4px; align-self: flex-start; color: var(--text-mid); font-family: var(--font-display); font-size: 1.05rem; flex-shrink: 0; } .theme-toggle-m svg { width: 20px; height: 20px; } /* ---------- Type helpers ---------- */ .eyebrow { font-family: var(--font-mono); font-size: var(--fs-cap); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-low); } .display { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display); line-height: 0.95; letter-spacing: -0.03em; color: var(--text-hi); } .h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.02em; color: var(--text-hi); } .lead { font-size: var(--fs-lead); font-weight: 400; line-height: 1.45; color: var(--text-mid); } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .accent-text { background: var(--signal-text); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Layout ---------- */ .container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section-head { max-width: 760px; } .section-head .eyebrow { display: block; margin-bottom: 18px; } .section-head .lead { margin-top: 20px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 26px; border-radius: var(--r-pill); font-family: var(--font-body); font-size: 0.98rem; font-weight: 600; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease); } .btn-primary { background: var(--blue); color: #fff; box-shadow: 0 10px 30px -12px rgba(42,107,242,0.7); } .btn-primary:hover { background: var(--blue-bright); transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(42,107,242,0.85); } .btn-accent { background: var(--signal); color: #06241B; box-shadow: var(--shadow-glow); background-size: 160% 100%; animation: accentDrift 8s var(--ease) infinite alternate; } .btn-accent:hover { transform: translateY(-2px); box-shadow: 0 0 70px -16px var(--accent-glow); } @keyframes accentDrift { from { background-position: 0% 0; } to { background-position: 100% 0; } } .btn-ghost { background: transparent; color: var(--text-hi); border-color: var(--hairline-strong); } .btn-ghost:hover { background: var(--surface-2); transform: translateY(-2px); } .btn[disabled], .btn.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn-sm { height: 44px; padding: 0 20px; font-size: 0.9rem; } /* ---------- NAV ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease); border-bottom: 1px solid transparent; } .nav.is-frosted { background: rgba(10,26,43,0.72); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-bottom-color: var(--hairline); } .nav-inner { max-width: var(--container); margin: 0 auto; padding: 16px var(--gutter); display: flex; align-items: center; gap: 28px; } .nav-logo img { height: 24px; width: auto; } .nav-links { display: flex; align-items: center; gap: 4px; margin-inline: auto; } .nav-links a, .nav-links .nav-trade > button { font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; color: var(--text-mid); padding: 8px 14px; border-radius: var(--r-pill); background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease); } .nav-links a:hover, .nav-links .nav-trade > button:hover { color: var(--text-hi); background: var(--surface); } .nav-cta { display: flex; align-items: center; gap: 10px; } .nav-trade { position: relative; } .nav-trade .caret { width: 14px; height: 14px; transition: transform var(--dur-micro) var(--ease); } .nav-trade.open .caret { transform: rotate(180deg); } .nav-dropdown { position: absolute; top: calc(100% + 10px); left: 0; min-width: 220px; background: rgba(14,34,51,0.96); backdrop-filter: blur(20px); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 8px; box-shadow: var(--shadow-ambient); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all var(--dur-micro) var(--ease); } .nav-trade.open .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; } .nav-dropdown a:hover { background: var(--surface-2); } .nav-dropdown a b { color: var(--text-hi); font-weight: 600; font-size: 0.95rem; } .nav-dropdown a span { font-size: 0.78rem; color: var(--text-low); } .nav-dropdown.mega { min-width: 740px; padding: 24px 22px 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 32px; } .mega-col { display: flex; flex-direction: column; gap: 10px; } .mega-col h5 { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-low); margin: 0 0 8px; padding: 0 12px; } .nav-dropdown.mega a { align-items: flex-start; text-align: left; padding: 9px 12px; } .mega-col a span { line-height: 1.5; margin-top: 4px; } /* ============ Card availability (searchable country list) ============ */ .availability { margin-top: clamp(72px, 9vw, 130px); } .availability .section-head { margin-bottom: 26px; } .cty-controls { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; } .cty-search { position: relative; flex: 1; min-width: 240px; } .cty-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-low); pointer-events: none; } .cty-search input { width: 100%; height: 50px; padding: 0 18px 0 44px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-pill); color: var(--text-hi); font-family: var(--font-body); font-size: 1rem; outline: none; transition: border-color var(--dur-micro) var(--ease); } .cty-search input:focus { border-color: var(--accent-line); } .cty-search input::placeholder { color: var(--text-low); } .cty-filters { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 4px; } .cty-chip { font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; color: var(--text-low); background: transparent; border: 0; border-radius: var(--r-pill); padding: 9px 16px; cursor: pointer; white-space: nowrap; transition: color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease); } .cty-chip:hover { color: var(--text-hi); } .cty-chip.active { color: #fff; background: var(--blue); } .cty-list { list-style: none; max-height: 440px; overflow-y: auto; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--surface); margin: 0; padding: 0; } .cty-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--hairline); } .cty-row:last-child { border-bottom: 0; } .cty-flag { font-size: 1.4rem; line-height: 1; width: 30px; text-align: center; flex-shrink: 0; } .cty-name { flex: 1; color: var(--text-hi); font-size: 0.98rem; } .cty-row.is-off .cty-name { color: var(--text-low); } .cty-badge { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; padding: 5px 10px; border-radius: var(--r-pill); flex-shrink: 0; } .cty-badge.ok { color: var(--accent-solid); background: rgba(49,253,157,0.10); } .cty-badge.no { color: #F08A8A; background: rgba(237,82,82,0.12); } .cty-empty { padding: 22px; text-align: center; color: var(--text-low); list-style: none; } /* ============ $TITN tier variants ============ */ .titn-variants .tv { display: none; } .titn-variants[data-tv="1"] .tv-rows, .titn-variants[data-tv="2"] .tv-cards, .titn-variants[data-tv="3"] .tv-slider { display: block; } .tv-rows .titn-row { position: relative; } .tv-rows .titn-row[data-bar] .tn-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--signal); border-radius: 2px; transition: width 1.1s var(--ease); } .tv-cards .tiers { margin-top: 44px; } .tnsl { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: clamp(28px, 4vw, 48px); margin-top: 44px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .tnsl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; } .tnsl-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-low); margin-bottom: 8px; } .tnsl-tier { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.02em; color: var(--text-hi); } .tnsl-feebox { text-align: right; } .tnsl-fee { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -0.03em; background: var(--signal-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .tnsl input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: var(--surface-2); outline: none; cursor: pointer; } .tnsl input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #33FF99; cursor: pointer; border: 3px solid var(--bg-elev-1); box-shadow: 0 0 0 1px var(--accent-line), 0 0 16px var(--accent-glow); } .tnsl input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #33FF99; cursor: pointer; border: 3px solid var(--bg-elev-1); } .tnsl-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-low); margin-top: 12px; } .tnsl-save { margin-top: 22px; font-size: 1.02rem; color: var(--text-mid); } .tnsl-save b { color: var(--accent-solid); font-weight: 600; } @media (max-width: 560px) { .cty-controls { flex-direction: column; align-items: stretch; } .cty-filters { justify-content: space-between; } } .nav-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; } .nav-burger span { display: block; width: 22px; height: 2px; background: var(--text-hi); position: relative; } .nav-burger span::before, .nav-burger span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--text-hi); transition: transform var(--dur-micro) var(--ease); } .nav-burger span::before { top: -7px; } .nav-burger span::after { top: 7px; } /* Mobile menu */ .mobile-menu { position: fixed; inset: 0; z-index: 99; background: rgba(8,18,30,0.97); backdrop-filter: blur(24px); display: flex; flex-direction: column; padding: 88px var(--gutter) 28px; gap: 2px; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(100%); transition: transform var(--dur) var(--ease); } .mobile-menu.open { transform: translateX(0); } .mobile-menu a { font-family: var(--font-display); font-size: clamp(1.2rem, 5vw, 1.5rem); font-weight: 500; color: var(--text-hi); padding: 11px 0; border-bottom: 1px solid var(--hairline); } .mobile-menu .btn { margin-top: 12px; } /* ---------- HERO - centered, full-bleed scroll-scrubbed phone ---------- */ .hero-center { position: relative; height: 300vh; } .hero-center .hero-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: block; } .hero-center .hero-stage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(50% 38% at 50% 18%, rgba(0,204,255,0.16), transparent 60%), radial-gradient(50% 50% at 72% 70%, rgba(51,255,153,0.12), transparent 64%), radial-gradient(46% 50% at 24% 74%, rgba(42,107,242,0.12), transparent 64%); } /* full-bleed phone sequence */ .hero-phone { position: absolute; inset: 0; z-index: 1; display: block; } .hero-phone::before { content: ""; position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); width: min(58vw, 700px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--accent-glow), transparent 70%); filter: blur(46px); opacity: 0.5; pointer-events: none; } .rotato-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; } /* overlaid hero copy (JS fades it out as the phone takes over) */ .hero-lede { position: absolute; top: clamp(104px, 13vh, 168px); left: 50%; transform: translateX(-50%); z-index: 2; width: min(1040px, calc(100% - 2 * var(--gutter))); display: flex; flex-direction: column; align-items: center; text-align: center; will-change: opacity, transform; } .hero-mark { width: clamp(186px, 21vw, 300px); height: auto; margin-bottom: clamp(20px, 2.6vw, 34px); filter: drop-shadow(0 10px 44px rgba(0,204,255,0.28)); } .hero-h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 5.6vw, 5.4rem); line-height: 0.97; letter-spacing: -0.035em; color: var(--text-hi); text-wrap: balance; } .hero-sub { font-size: var(--fs-lead); font-weight: 400; line-height: 1.5; color: var(--text-mid); max-width: 56ch; margin: clamp(16px, 2vw, 26px) auto 0; } .hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: clamp(24px, 3vw, 38px); } /* ---------- App store badges + rating ---------- */ .store-badges { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .store-badge { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 218px; min-height: 56px; padding: 0 22px; border-radius: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 10px 26px -14px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.10); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-decoration: none; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); } .store-badge:hover { transform: translateY(-2px); border-color: var(--accent-line); background: rgba(255,255,255,0.09); box-shadow: 0 14px 32px -14px rgba(0,0,0,0.65), 0 0 26px -6px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.14); } .store-badge svg { width: 26px; height: 26px; flex-shrink: 0; fill: #fff; } .store-badge .sb-txt { display: flex; flex-direction: column; line-height: 1.12; text-align: left; } .store-badge .sb-top { font-size: 0.62rem; letter-spacing: 0.05em; color: rgba(255,255,255,0.82); text-transform: uppercase; } .store-badge .sb-main { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: #fff; letter-spacing: -0.01em; } [data-theme="light"] .store-badge { background: rgba(10,26,43,0.04); border-color: rgba(10,26,43,0.18); box-shadow: 0 8px 22px -14px rgba(20,45,75,0.4), inset 0 1px 0 rgba(255,255,255,0.7); } [data-theme="light"] .store-badge:hover { background: rgba(10,26,43,0.07); border-color: var(--accent-line); box-shadow: 0 12px 28px -14px rgba(20,45,75,0.45), 0 0 24px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.8); } [data-theme="light"] .store-badge svg { fill: var(--text-hi); } [data-theme="light"] .store-badge .sb-main { color: var(--text-hi); } [data-theme="light"] .store-badge .sb-top { color: var(--text-mid); } .hero-rating { display: inline-flex; align-items: center; justify-content: center; gap: 16px; margin: 0 auto clamp(16px, 2vw, 22px); } .rv-laurel-txt { text-align: center; font-family: var(--font-mono); line-height: 1.32; padding: 0 2px; } .rv-laurel-txt b { display: block; color: var(--text-hi); font-weight: 700; font-size: 0.98rem; letter-spacing: 0.01em; } .rv-laurel-txt .sub { color: var(--text-low); font-size: 0.77rem; } /* laurel wreath variants — toggle which pair shows */ .hero-rating .laurel { width: 30px; height: 54px; flex-shrink: 0; display: none; } .hero-rating .laurel-r { transform: scaleX(-1); } .hero-rating[data-rv="1"] .lA { display: block; } .hero-rating[data-rv="2"] .lB { display: block; } .hero-rating[data-rv="3"] .lC { display: block; } .laurel.lA { color: #BCC8D4; } .laurel.lB { color: #AFE6CF; } .laurel.lC { color: #E2C982; } .hero-dl { display: flex; flex-direction: column; align-items: center; gap: 0; } /* ---------- Hero stat bar ---------- */ .hero-stats { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; margin-top: clamp(30px, 3.6vw, 46px); } .hstat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 2px clamp(20px, 3vw, 42px); border-left: 1px solid rgba(255,255,255,0.12); } .hstat:first-child { border-left: 0; } .hstat-v { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2.3vw, 2rem); letter-spacing: -0.02em; line-height: 1; background: var(--signal-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .hstat-k { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-low); } .hstat-star { -webkit-text-fill-color: var(--accent-solid); color: var(--accent-solid); background: none; font-size: 0.78em; vertical-align: 0.06em; } .hstat-info { display: inline-flex; align-items: center; margin-left: 6px; padding: 0; border: 0; background: none; cursor: help; position: relative; -webkit-text-fill-color: var(--text-low); color: var(--text-low); vertical-align: middle; } .hstat-info svg { width: 14px; height: 14px; display: block; } .hstat-info::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--bg-elev-1); color: var(--text-mid); border: 1px solid var(--hairline-strong); border-radius: 8px; padding: 7px 11px; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0; white-space: nowrap; text-transform: none; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); box-shadow: var(--shadow-ambient); z-index: 5; } .hstat-info:hover::after, .hstat-info:focus::after, .hstat-info:focus-visible::after { opacity: 1; } .hero-stats-cap { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-low); margin-top: 12px; text-align: center; opacity: 0.85; } .hero-scrollcue { display: none !important; } /* Desktop: anchor the stat row to the bottom of the hero, above the device */ @media (min-width: 901px) { .hero-center .hero-lede { top: 0; height: 100%; padding-top: clamp(104px, 13vh, 168px); } .hero-center .hero-stats { position: absolute; left: 50%; bottom: clamp(20px, 3.5vh, 48px); transform: translateX(-50%); margin-top: 0; width: max-content; max-width: calc(100% - 2 * var(--gutter)); } } /* Laptop sizes (15" / 13"): trim the proof row so it doesn't dominate */ @media (min-width: 901px) and (max-width: 1600px) { .hstat-v { font-size: clamp(1.3rem, 1.85vw, 1.62rem); } .hstat-k { font-size: 0.64rem; letter-spacing: 0.12em; } .hstat { padding: 2px clamp(16px, 2.3vw, 32px); gap: 5px; } } @media (min-width: 901px) and (max-width: 1280px) { .hstat-v { font-size: 1.28rem; } .hstat-k { font-size: 0.6rem; letter-spacing: 0.1em; } .hstat { padding: 2px 20px; } } @media (max-width: 600px) { .hero-stats { display: flex; justify-content: center; align-items: stretch; gap: 0; max-width: 360px; margin: 18px auto 0; } .hstat { border-left: 0; padding: 0 22px; } .hstat:nth-child(2), .hstat:nth-child(4) { display: none; } .hstat:nth-child(3) { border-left: 1px solid rgba(255,255,255,0.16); } .hstat-v { font-size: 1.4rem; } .hstat-k { font-size: 0.62rem; } .hstat-info::after { white-space: normal; width: 150px; } .store-badges { flex-direction: column; width: 100%; align-items: center; gap: 10px; } .store-badge { width: 100%; max-width: 290px; min-height: 48px; } .hero-center .hero-h1 .outline-accent, .hero-h1 .outline-accent { display: block; } } .hero-scrollcue { position: absolute; bottom: 3.5vh; left: 50%; transform: translateX(-50%); z-index: 3; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-low); display: flex; flex-direction: column; align-items: center; gap: 8px; transition: opacity var(--dur) var(--ease); } .hero-scrollcue::after { content: ""; width: 1px; height: 30px; background: linear-gradient(var(--accent-solid), transparent); } /* sliding text panels (JS scrubs them in from the bottom; they stick, then exit) */ .hero-panels { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .hero-panel { position: absolute; left: max(var(--gutter), calc(50% - var(--container) / 2)); top: 50%; width: min(44ch, 38vw); opacity: 0; transform: translateY(calc(-50% + 64px)); will-change: opacity, transform; } .hp-eyebrow { display: block; font-family: var(--font-mono); font-size: var(--fs-cap); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-low); margin-bottom: 18px; } .hp-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 5vw, 4.8rem); line-height: 0.98; letter-spacing: -0.03em; color: var(--text-hi); text-wrap: balance; } .hp-l1, .hp-l2 { display: block; } /* solid + gradient-green outline keyword */ .hp-l2 { color: transparent; -webkit-text-stroke: 1.5px var(--accent-solid); } @supports not ((-webkit-text-stroke: 1px #000)) { .hp-l2 { color: var(--accent-solid); } } .hero-panel p { font-size: var(--fs-lead); color: var(--text-mid); margin-top: 16px; max-width: 32ch; } .hero-panel-coins { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 16px); margin-top: 28px; flex-wrap: wrap; } .hero-panel-coins img { width: clamp(38px, 3vw, 46px); height: clamp(38px, 3vw, 46px); border-radius: 50%; object-fit: cover; border: 1px solid var(--hairline-strong); background: var(--surface); box-shadow: 0 6px 18px rgba(0,0,0,0.4); } .hero-panel-coins .more { font-family: var(--font-mono); font-size: 0.84rem; color: var(--text-low); padding-left: 4px; } /* ---------- Trust strip (coins + credentials) ---------- */ .hero-after { padding-block: clamp(40px, 6vw, 80px); border-bottom: 1px solid var(--hairline); } @media (max-width: 900px) { .hero-after { padding-top: clamp(76px, 19vw, 132px); } } /* ---------- Proof band (post-hero credibility moment) ---------- */ .proof-band { position: relative; padding-block: clamp(64px, 8vw, 120px); border-bottom: 1px solid var(--hairline); } @media (max-width: 900px) { .proof-band { padding-top: clamp(76px, 19vw, 132px); } } .proof-row { display: grid; grid-template-columns: repeat(5, 1fr); } .pstat { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 6px clamp(18px, 2.4vw, 40px); border-left: 1px solid var(--hairline-strong); } .pstat:first-child { border-left: 0; } .pstat-v { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.1rem, 3.4vw, 3.4rem); letter-spacing: -0.03em; line-height: 1; background: var(--signal-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .pstat-star { -webkit-text-fill-color: var(--accent-solid); color: var(--accent-solid); background: none; font-size: 0.72em; vertical-align: 0.1em; } .pstat-k { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-low); line-height: 1.6; max-width: 24ch; } .proof-band .hero-creds { margin-top: clamp(52px, 6.5vw, 84px); } @media (max-width: 860px) { .proof-row { grid-template-columns: 1fr 1fr; gap: 34px 0; } .pstat:nth-child(odd) { border-left: 0; } } @media (max-width: 420px) { .proof-row { grid-template-columns: 1fr; gap: 30px; } .pstat { border-left: 0; } } @media (min-width: 1600px) { .pstat-k { font-size: 0.82rem; } } @media (max-width: 900px) { .hero-sub .sub-desktop { display: none; } } .hero-coins { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 22px); } .hero-coins img { width: clamp(40px, 4.4vw, 56px); height: clamp(40px, 4.4vw, 56px); border-radius: 50%; object-fit: cover; display: block; border: 1px solid var(--hairline-strong); background: var(--surface); box-shadow: 0 6px 18px rgba(0,0,0,0.4); transition: transform var(--dur-micro) var(--ease); } .hero-coins img:hover { transform: translateY(-3px); } .hero-coins .more { font-family: var(--font-mono); font-size: 0.84rem; color: var(--text-low); letter-spacing: 0.01em; padding-left: 4px; } .hero-creds { width: 100%; margin-top: 0; } .hero-creds .eyebrow { display: block; text-align: center; margin-bottom: clamp(22px, 2.6vw, 30px); } .creds-row { display: flex; align-items: center; justify-content: center; gap: clamp(30px, 5.5vw, 76px); flex-wrap: wrap; } .creds-row .cred { height: 40px; display: flex; align-items: center; } .creds-row .cred img { height: 100%; width: auto; object-fit: contain; opacity: 0.8; filter: brightness(0) invert(1); transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease); } .creds-row .cred:hover img { opacity: 1; } .creds-row .cred-pegasus img { height: 62px; } .creds-row .cred-accel img { height: 30px; } .creds-row .cred-cva img { height: 46px; } .creds-row .cred-vl img { height: 52px; } /* ---------- Hero: mobile (static stack) ---------- */ @media (max-width: 900px) { .hero-center { height: auto; } .hero-center .hero-stage { position: static; height: auto; overflow: visible; padding: clamp(104px, 16vh, 140px) var(--gutter) 0; } .hero-lede { position: static; width: 100%; max-width: 640px; margin-inline: auto; } .hero-phone { position: static; inset: auto; margin-top: 16px; } .hero-phone::before { display: none; } .rotato-frame { position: static; width: 100%; height: auto; } .hero-scrollcue { display: none; } .hero-panels { position: static; inset: auto; } .hero-panel { position: static; width: 100%; max-width: 640px; text-align: center; } .hero-panel p { margin-inline: auto; } .hero-panel-coins { justify-content: center; } } @media (max-width: 600px) { .hero-coins { gap: 12px; } .creds-row { gap: 26px 34px; } .creds-row .cred { height: 30px; } .creds-row .cred-pegasus img { height: 50px; } .creds-row .cred-accel img { height: 26px; } .creds-row .cred-cva img { height: 36px; } } /* ---------- FOOTER ---------- */ .footer { border-top: 1px solid var(--hairline); padding-block: 64px 40px; background: var(--bg-elev-1); } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } .footer-brand img { height: 24px; margin-bottom: 16px; } .footer-brand p { color: var(--text-low); font-size: 0.95rem; max-width: 30ch; } .footer-col h4 { font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-low); margin-bottom: 16px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-col a { color: var(--text-mid); font-size: 0.95rem; } .footer-col a:hover { color: var(--text-hi); } .footer-socials { display: flex; gap: 12px; margin-top: 24px; } .footer-socials a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; color: var(--text-mid); transition: all var(--dur-micro) var(--ease); } .footer-socials a:hover { color: var(--text-hi); border-color: var(--accent-line); background: var(--surface); } .footer-fine { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--text-low); font-size: 0.8rem; } /* ---------- Reveal ---------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: 80ms; } .reveal[data-delay="2"] { transition-delay: 160ms; } .reveal[data-delay="3"] { transition-delay: 240ms; } /* ---------- Feature sections ---------- */ .device-frame { width: clamp(240px, 30vw, 330px); aspect-ratio: 1320/2868; border-radius: 14% / 6.5%; background: #05101A; border: 1px solid var(--hairline-strong); padding: 2.6%; margin-inline: auto; box-shadow: var(--shadow-ambient), 0 0 110px -38px var(--accent-glow); } .device-frame .screen { width: 100%; height: 100%; border-radius: 11% / 5.2%; overflow: hidden; background: var(--bg-base); } .device-frame .screen img { width: 100%; height: 100%; object-fit: cover; } .feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; } .feature-media { display: flex; justify-content: center; } .feature .section-head { max-width: 540px; } .points { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; } .point { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .point .pn { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-solid); letter-spacing: 0.06em; } .point h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; color: var(--text-hi); margin: 12px 0 6px; letter-spacing: -0.01em; } .point p { font-size: 0.92rem; color: var(--text-low); line-height: 1.5; } .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .chip-pill { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-mid); border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); padding: 8px 16px; background: var(--surface); } .chip-pill.is-active { background: var(--blue); color: #fff; border-color: transparent; } .chip-pill.is-expiry { color: var(--text-low); border-style: dashed; } .ticker-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-hi); border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); padding: 7px 14px 7px 8px; background: var(--surface); } .ticker-chip .dot { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; color: #fff; } .stat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; } .stat-tile { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 26px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .stat-tile .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 2rem; line-height: 1; color: var(--text-hi); font-weight: 600; letter-spacing: -0.02em; } .stat-tile .k { font-size: 0.88rem; color: var(--text-low); margin-top: 10px; } .footnote { font-size: var(--fs-cap); color: var(--text-low); margin-top: 26px; max-width: 64ch; line-height: 1.55; } .section.elev { background: var(--bg-elev-1); border-block: 1px solid var(--hairline); } @media (max-width: 900px) { .feature { grid-template-columns: 1fr; gap: 48px; } .feature.reverse .feature-media { order: -1; } } @media (max-width: 560px) { .points { grid-template-columns: 1fr; } .stat-tiles { grid-template-columns: 1fr; } } /* ---------- Plans (Card) ---------- */ .card-highlights { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 48px; border-block: 1px solid var(--hairline); } .ch-item { text-align: center; padding: 34px 24px; border-right: 1px solid var(--hairline); } .ch-item:last-child { border-right: 0; } .ch-v { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 3.2vw, 2.7rem); letter-spacing: -0.035em; line-height: 1; color: var(--text-hi); } .ch-k { margin-top: 12px; font-size: 0.95rem; line-height: 1.4; color: var(--text-low); letter-spacing: 0; } @media (max-width: 760px) { .card-highlights { grid-template-columns: 1fr; } .ch-item { border-right: 0; border-bottom: 1px solid var(--hairline); padding: 26px 24px; } .ch-item:last-child { border-bottom: 0; } } .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; align-items: start; } .plan { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 26px; display: flex; flex-direction: column; gap: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); position: relative; } .plan.featured { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line), 0 0 80px -30px var(--accent-glow); } .plan .ribbon { position: absolute; top: 14px; right: 14px; z-index: 3; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: #06241B; background: var(--signal); padding: 6px 11px; border-radius: var(--r-pill); box-shadow: 0 6px 16px rgba(0,0,0,0.35); } .pcard-face { aspect-ratio: 1.586; border-radius: var(--r-md); position: relative; overflow: hidden; transition: box-shadow var(--dur) var(--ease); } .pcard-face img { width: 100%; height: 100%; object-fit: cover; display: block; } .pcard-face:hover { box-shadow: var(--shadow-ambient); } .plan .price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.5rem; color: var(--text-hi); font-weight: 600; letter-spacing: -0.02em; } .plan .price small { font-size: 0.85rem; color: var(--text-low); font-weight: 400; } .plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .plan-name { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.02em; color: var(--text-hi); } .plan ul, .plan-benefits { list-style: none; display: flex; flex-direction: column; gap: 10px; } .plan li { font-size: 0.92rem; color: var(--text-mid); display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; } /* Smooth Apple-style expand */ .plan-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; background: var(--bg-base); border: 1px solid var(--hairline); color: var(--accent-solid); font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; padding: 13px 18px; border-radius: var(--r-md); cursor: pointer; transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease); } .plan-toggle:hover { background: var(--surface-2); border-color: var(--accent-line); } .plan-toggle .chev { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--dur) var(--ease); } .plan.open .plan-toggle .chev { transform: rotate(180deg); } .plan-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s cubic-bezier(0.22,1,0.36,1); } .plan.open .plan-more { grid-template-rows: 1fr; } .plan-more-inner { overflow: hidden; min-height: 0; opacity: 0; transform: translateY(-4px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); } .plan.open .plan-more-inner { opacity: 1; transform: none; } .detail-h { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-low); margin: 18px 0 6px; } .detail-h:first-child { margin-top: 4px; } .detail-list { display: flex; flex-direction: column; } .detail-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--hairline); } .detail-list > div:last-child { border-bottom: 0; } .detail-list dt { color: var(--text-mid); font-size: 0.9rem; } .detail-list dd { color: var(--text-hi); font-weight: 600; font-size: 0.9rem; text-align: right; } .plan li::before { content: ""; flex: 0 0 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--accent-solid); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; } .plan li b { color: var(--text-hi); font-weight: 600; } .plan .mono { color: var(--text-hi); } .plan .btn { margin-top: auto; width: 100%; } .plans-more { text-align: center; margin-top: 28px; } .plans-more a { color: var(--accent-solid); font-weight: 500; } .plans-more a:hover { text-decoration: underline; } /* ---------- Multisig (calm) ---------- */ .points-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .points-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .points-4 { grid-template-columns: 1fr; } } .shield-visual { display: flex; justify-content: center; margin-bottom: 8px; } .shield-visual svg { width: clamp(120px, 18vw, 180px); height: auto; color: var(--accent-solid); filter: drop-shadow(0 0 40px var(--accent-glow)); } /* ---------- Rewards (playful) ---------- */ .reward-band { border-radius: var(--r-xl); overflow: hidden; position: relative; background: radial-gradient(circle at 20% 0%, #2A6BF2 0%, #163e8f 60%, #112a66 100%); padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; } .reward-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(2px 2px at 12% 24%, rgba(255,255,255,0.55), transparent), radial-gradient(2px 2px at 82% 16%, rgba(255,255,255,0.5), transparent), radial-gradient(1.5px 1.5px at 64% 72%, rgba(255,255,255,0.45), transparent), radial-gradient(1.5px 1.5px at 30% 84%, rgba(255,255,255,0.4), transparent); } .reward-band > * { position: relative; z-index: 1; } .reward-band .h1, .reward-band .eyebrow, .reward-band .lead { color: #fff; } .reward-band .eyebrow { color: rgba(255,255,255,0.7); } .reward-visual { display: flex; align-items: center; justify-content: center; gap: 14px; } .spin-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; } .spin-wheel { width: clamp(220px, 26vw, 330px); height: auto; filter: drop-shadow(0 20px 44px rgba(0,0,0,0.45)); } .free-spin-pill { width: clamp(150px, 16vw, 196px); height: auto; } @media (prefers-reduced-motion: no-preference) { .free-spin-pill { animation: freeSpinFloat 3s var(--ease) infinite alternate; } } @keyframes freeSpinFloat { from { transform: translateY(0); } to { transform: translateY(-7px); } } .reward-visual .wheel { width: 58%; max-width: 260px; } .reward-stack { display: flex; flex-direction: column; gap: 12px; } .reward-stack img { width: 88px; } .raffle-pill { display: inline-flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-pill); padding: 10px 16px; margin-top: 22px; } .raffle-pill .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; color: #fff; font-size: 1.1rem; } .raffle-pill .k { font-size: 0.82rem; color: rgba(255,255,255,0.7); } @media (max-width: 760px) { .reward-band { grid-template-columns: 1fr; } } /* ---------- $TITN tiers ---------- */ .titn-table { border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; margin-top: 44px; background: var(--surface); } .titn-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; padding: 20px 28px; border-bottom: 1px solid var(--hairline); align-items: center; } .titn-row:last-child { border-bottom: 0; } .titn-row.head { background: var(--surface-2); font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-low); } .titn-row .tier { font-family: var(--font-display); font-weight: 600; color: var(--text-hi); font-size: 1.05rem; } .titn-row .stake, .titn-row .fee { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-mid); } .titn-row .fee { color: var(--accent-solid); font-weight: 600; } .titn-row.is-you { background: linear-gradient(90deg, rgba(42,107,242,0.12), transparent); } .titn-note { font-size: 0.9rem; color: var(--text-low); margin-top: 18px; } /* ---------- Blog title variants (selection switcher) ---------- */ .blog-head { margin-bottom: 48px; } .blog-title { animation: blogTitleIn var(--dur) var(--ease); } .blog-title[hidden] { display: none; } .blog-title .eyebrow { display: block; margin-bottom: 16px; } .blog-title .lead { margin-top: 18px; } @keyframes blogTitleIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ---------- Blog ---------- */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; } @media (max-width: 880px) { .blog-grid { grid-template-columns: 1fr; } } .post { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 26px; display: flex; flex-direction: column; gap: 14px; min-height: 220px; transition: transform var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease); overflow: hidden; } .post:hover { transform: translateY(-4px); border-color: var(--accent-line); } .post-thumb { margin: -26px -26px 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); } .post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease); } .post:hover .post-thumb img { transform: scale(1.04); } .post.has-thumb .date { margin-top: 18px; } .post.has-thumb h3 { margin-top: 8px; } .post.has-thumb .more { margin-top: auto; } .post .date { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-low); letter-spacing: 0.04em; } .post h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--text-hi); letter-spacing: -0.015em; line-height: 1.2; margin-top: auto; } .post .more { color: var(--accent-solid); font-size: 0.9rem; font-weight: 500; } /* ---------- Newsletter ---------- */ .news { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: clamp(30px, 4.4vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .news::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 120% at 100% 0%, rgba(0,204,255,0.12), transparent 60%), radial-gradient(60% 120% at 88% 100%, rgba(51,255,153,0.10), transparent 62%); } .news > * { position: relative; z-index: 1; } .news-copy { max-width: 54ch; } .news-copy .eyebrow { display: block; margin-bottom: 14px; } .news-copy .lead { margin-top: 14px; } .news-btn { flex-shrink: 0; } @media (max-width: 760px) { .news { flex-direction: column; align-items: flex-start; } .news-btn { width: 100%; } } /* ---------- Final CTA ---------- */ .final { position: relative; text-align: center; padding-block: clamp(120px, 16vw, 220px); overflow: hidden; } .final::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 70% at 50% 50%, rgba(31,217,166,0.22), transparent 70%), radial-gradient(50% 60% at 50% 50%, rgba(42,107,242,0.18), transparent 70%); } .final .container { position: relative; z-index: 1; } .final .display { margin-bottom: 18px; } .final .lead { margin: 0 auto 32px; max-width: 40ch; } .final .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ---------- Editorial display title (brand guideline · Variant A) ---------- */ .ed-display { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 0.94; letter-spacing: -0.04em; text-transform: uppercase; color: var(--text-hi); display: flex; flex-direction: column; align-items: flex-start; margin: 0; } .ed-display .ta-solid { display: block; } .ed-display .ta-outline { display: block; color: transparent; -webkit-text-stroke: 1.4px var(--text-hi); text-stroke: 1.4px var(--text-hi); padding-left: 0.5em; } @supports not ((-webkit-text-stroke: 1px #000) or (text-stroke: 1px #000)) { .ed-display .ta-outline { color: var(--text-low); } } .ed-display .ta-blog { display: block; height: 1.08em; width: auto; font-size: clamp(2.6rem, 6vw, 5.4rem); overflow: visible; } /* ---------- Typewriter headline + gated rails ---------- */ .tw-head { font-size: clamp(2.7rem, 6.6vw, 5.6rem); line-height: 1.0; letter-spacing: -0.035em; min-height: 1.04em; text-wrap: balance; will-change: transform; } .tw-ch { white-space: pre; position: relative; } [data-tw].tw-ready .tw-ch { opacity: 0; } [data-tw].tw-ready .tw-ch.tw-on { opacity: 1; transition: opacity 0.08s linear; } [data-tw] .accent-text .tw-ch { background: var(--signal-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .tw-ch.tw-cursor::after { content: ""; position: absolute; right: -0.04em; top: 0.08em; bottom: 0.06em; width: 0.055em; background: var(--accent-solid); border-radius: 1px; animation: twCaret 0.8s steps(1) infinite; } @keyframes twCaret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } [data-rails].rails-ready { opacity: 0; } [data-rails].rails-ready.rails-in { opacity: 1; transition: opacity 0.4s var(--ease); } [data-rails].rails-ready .rail { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); } [data-rails].rails-ready.rails-in .rail { opacity: 1; transform: none; } [data-rails].rails-ready.rails-in .rail:nth-child(1) { transition-delay: 0.05s; } [data-rails].rails-ready.rails-in .rail:nth-child(2) { transition-delay: 0.16s; } [data-rails].rails-ready.rails-in .rail:nth-child(3) { transition-delay: 0.27s; } @media (prefers-reduced-motion: reduce) { [data-tw].tw-ready .tw-ch { opacity: 1; } [data-rails].rails-ready, [data-rails].rails-ready .rail { opacity: 1; transform: none; } } /* ---------- Capability rails (brand guideline) ---------- */ .rails { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; margin-top: 56px; } .rail { background: var(--bg-base); padding: 30px 24px; display: grid; grid-template-rows: max-content 1fr max-content; gap: 18px; min-height: 240px; text-decoration: none; color: inherit; transition: background var(--dur-micro) var(--ease); } .rail:hover { background: var(--surface); } .rail-num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--text-low); } .rail-name { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; letter-spacing: -0.025em; color: var(--text-hi); margin-bottom: 8px; } .rail-desc { font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.55; color: var(--text-low); margin: 0; } .rail-fact { padding-top: 16px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-low); } .rail-fact .v { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; color: var(--accent-solid); text-transform: none; } @media (max-width: 900px) { .rails { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .rails { grid-template-columns: 1fr; } } /* ---------- Pinned feature scrollytelling ---------- */ .feat-pin { position: relative; } .feat-anchor { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; } .feat-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; } .feat-grid { width: 100%; display: grid; grid-template-columns: 1fr 0.82fr; gap: clamp(32px, 5vw, 88px); align-items: center; } .feat-copy { position: relative; min-height: 62vh; } .feat-panel { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(calc(-50% + 22px)); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .feat-panel.active { opacity: 1; transform: translateY(-50%); pointer-events: auto; } .feat-panel .eyebrow { display: block; margin-bottom: 16px; } .feat-panel .lead { margin-top: 18px; } .feat-panel .points { margin-top: 28px; } .feat-panel .chips, .feat-panel .stat-tiles { margin-top: 24px; } .feat-panel .footnote { margin-top: 18px; } .feat-inline-media { display: none; } .feat-visual { display: flex; flex-direction: column; align-items: center; gap: 22px; } .feat-visual .device-frame { margin: 0; position: relative; width: auto; height: min(64vh, 600px); } .feat-visual .screen { position: relative; } .feat-screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease); } .feat-screen.active { opacity: 1; transform: scale(1); } .feat-rail { display: flex; gap: 8px; align-items: center; } .feat-rail button { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; padding: 8px 12px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-low); transition: color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease); } .feat-rail button .tick { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.5; transition: opacity var(--dur-micro), transform var(--dur-micro); } .feat-rail button.active { color: var(--text-hi); background: var(--surface); } .feat-rail button.active .tick { opacity: 1; background: var(--accent-solid); transform: scale(1.3); } .feat-progress { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--signal); width: 0; transition: width 120ms linear; } @media (max-width: 900px) { .feat-pin { height: auto !important; } .feat-stage { position: static; height: auto; display: block; padding-block: var(--section-y); } .feat-grid { grid-template-columns: 1fr; gap: 0; } .feat-copy { min-height: 0; } .feat-panel, .feat-panel.active { position: static !important; transform: none !important; opacity: 1 !important; pointer-events: auto; padding-block: 56px; border-top: 1px solid var(--hairline); } .feat-copy .feat-panel:first-child { border-top: 0; } .feat-inline-media { display: flex; justify-content: center; margin-bottom: 32px; } .feat-visual { display: none; } } /* ---------- Deep pages ---------- */ .subhero { padding: 150px 0 20px; } .subhero .eyebrow { display: block; margin-bottom: 18px; } .subhero .display { font-size: var(--fs-h1); } .subhero .lead { margin-top: 20px; max-width: 60ch; } .compare-wrap { overflow-x: auto; margin-top: 56px; -webkit-overflow-scrolling: touch; } .compare-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 720px; border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; } .compare-table th, .compare-table td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--hairline); font-size: 0.95rem; vertical-align: middle; } .compare-table tr:last-child td { border-bottom: 0; } .compare-table thead th { background: var(--surface-2); font-family: var(--font-display); font-weight: 600; color: var(--text-hi); font-size: 1.05rem; } .compare-table thead th:first-child, .compare-table td:first-child { color: var(--text-low); } .compare-table td:first-child { font-family: var(--font-body); } .compare-table td { color: var(--text-mid); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .compare-table .col-feat { background: rgba(31,217,166,0.06); } .compare-table thead .col-feat { color: var(--accent-solid); } /* THORWallet-advantage marker */ .compare-table td.win { color: var(--accent-solid); font-weight: 600; } .compare-table td.win::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 9px; vertical-align: -1.5px; background: var(--accent-solid); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; } .compare-legend { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-low); margin-top: 14px; } .compare-legend .lg-check { color: var(--accent-solid); font-weight: 600; } /* ---------- Rate / limits tables (card page) ---------- */ .rate-stack { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); margin-top: 44px; } .rate-block .rate-head { margin-bottom: 22px; } .rate-block .rate-head h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -0.02em; color: var(--text-hi); } .rate-block .rate-head p { color: var(--text-mid); margin-top: 10px; max-width: 64ch; line-height: 1.6; } .rate-block .rate-head p b { color: var(--text-hi); font-weight: 600; } .rate-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 1px 2px rgba(20,45,75,0.04), 0 18px 40px -30px rgba(0,0,0,0.5); } .rate-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 520px; } .rate-table th, .rate-table td { padding: 16px 24px; text-align: right; border-bottom: 1px solid var(--hairline); font-size: 0.97rem; vertical-align: middle; white-space: nowrap; } .rate-table th:first-child, .rate-table td:first-child { text-align: left; } .rate-table tr:last-child td { border-bottom: 0; } .rate-table thead th { background: var(--surface-2); font-family: var(--font-display); font-weight: 600; color: var(--text-mid); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; } .rate-table thead th:last-child { color: var(--accent-solid); } .rate-table tbody td:first-child { color: var(--text-hi); font-weight: 500; } .rate-table tbody td { color: var(--text-mid); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .rate-table tbody tr { transition: background var(--dur-micro) var(--ease); } .rate-table tbody tr:hover { background: rgba(31,217,166,0.05); } .rate-table .rt-strong { color: var(--text-hi); } @media (max-width: 600px) { .rate-table { min-width: 460px; } .rate-table th, .rate-table td { padding: 13px 16px; font-size: 0.9rem; } } .prose { max-width: 760px; } .prose h2 { font-family: var(--font-display); font-weight: 600; color: var(--text-hi); font-size: var(--fs-h2); margin: 44px 0 14px; letter-spacing: -0.02em; } .prose p { margin-bottom: 16px; color: var(--text-mid); } .prose ul { margin: 0 0 16px 20px; color: var(--text-mid); display: flex; flex-direction: column; gap: 8px; } .prose a { color: var(--accent-solid); } .prose a:hover { text-decoration: underline; } .faq-item { border-bottom: 1px solid var(--hairline); padding: 24px 0; } .faq-item h3 { font-family: var(--font-display); font-weight: 600; color: var(--text-hi); font-size: 1.2rem; margin-bottom: 8px; letter-spacing: -0.01em; } .faq-item p { color: var(--text-mid); } /* ---------- Pinned scroll story ---------- */ .pin-story { position: relative; } .pin-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; } .pin-grid { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; } .pin-copy { position: relative; min-height: 420px; } .pin-panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(20px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); pointer-events: none; } .pin-panel.active { opacity: 1; transform: none; pointer-events: auto; } .pin-panel .pin-media { display: none; } .pin-device { display: flex; justify-content: center; } .pin-screens { position: relative; } .pin-screens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur) var(--ease); } .pin-screens img.active { opacity: 1; } .pin-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 6vh; display: flex; gap: 9px; z-index: 3; } .pin-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--hairline-strong); transition: background .25s var(--ease), width .25s var(--ease); } .pin-dot.active { background: var(--accent-solid); width: 24px; } @media (max-width: 900px) { .pin-story { height: auto !important; } .pin-stage { position: static; height: auto; display: block; } .pin-grid { grid-template-columns: 1fr; } .pin-device, .pin-dots { display: none; } .pin-copy { min-height: 0; } .pin-panel { position: static; opacity: 1; transform: none; pointer-events: auto; padding-block: var(--section-y); border-top: 1px solid var(--hairline); } .pin-panel:first-child { border-top: 0; } .pin-panel .pin-media { display: flex; justify-content: center; margin-top: 32px; } } /* ---------- Language picker ---------- */ .lang-picker { position: relative; } .lang-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--hairline-strong); color: var(--text-mid); border-radius: var(--r-pill); padding: 8px 13px; font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease); } .lang-btn:hover { color: var(--text-hi); border-color: var(--accent-line); } .lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 168px; background: rgba(14,34,51,0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 6px; box-shadow: var(--shadow-ambient); display: flex; flex-direction: column; gap: 1px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease), visibility var(--dur-micro); z-index: 120; max-height: 60vh; overflow-y: auto; } .lang-picker.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); } .lang-opt { text-align: left; background: none; border: 0; color: var(--text-mid); font-family: var(--font-body); font-size: 0.9rem; padding: 9px 12px; border-radius: 9px; cursor: pointer; transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); } .lang-opt:hover { background: var(--surface-2); color: var(--text-hi); } .lang-opt.active { color: var(--accent-solid); font-weight: 600; } @media (max-width: 1024px) { .lang-btn span { display: none; } .lang-btn { padding: 9px; } } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .nav-links { display: none; } .nav-burger { display: flex; } .nav-cta .btn-web { display: none; } .footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .hero-pin { height: auto; } .hero-stage { position: static; height: auto; padding-block: 120px 80px; } .hero-grid { grid-template-columns: 1fr; gap: 48px; } .hero-copy { position: static; min-height: 0; display: flex; flex-direction: column; gap: 64px; } .hero-frame { position: static; opacity: 1; transform: none; } .hero-cta { position: static; margin-top: 8px; } .hero-scrollcue { display: none; } .rotato-slot { margin: 0 auto; } } @media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } .footer-fine { flex-direction: column; } .hero-cta { flex-direction: column; width: 100%; } .hero-cta .btn { width: 100%; } } /* ---------- Large screens: scale the whole layout up on the shared tokens ---------- */ @media (min-width: 1600px) { :root { --container: 1560px; --fs-display: clamp(3rem, 7.5vw, 7.6rem); --fs-h1: clamp(2.3rem, 4.6vw, 5rem); --fs-h2: clamp(1.5rem, 3vw, 2.9rem); --fs-lead: clamp(1.1rem, 1.5vw, 1.62rem); --fs-body: 1.16rem; --fs-cap: 0.9rem; --section-y: clamp(120px, 12vw, 210px); } /* prominent component sizes that aren't driven by the tokens above */ .rail-name { font-size: 1.7rem; } .rail-desc { font-size: 0.92rem; } .rail-fact { font-size: 0.72rem; } .rail-fact .v { font-size: 1.1rem; } .plan-name { font-size: 1.6rem; } .plan .price { font-size: 1.8rem; } .plan li { font-size: 1.02rem; } .titn-row .tier { font-size: 1.25rem; } .titn-row .stake, .titn-row .fee { font-size: 1.1rem; } .post h3 { font-size: 1.5rem; } .post .date, .post .more { font-size: 0.95rem; } .point h3 { font-size: 1.35rem; } .point p { font-size: 1.02rem; } .ch-k { font-size: 1.08rem; } .stat-tile .v { font-size: 2.4rem; } .raffle-pill .v { font-size: 1.3rem; } .creds-row .cred { height: 50px; } .creds-row .cred-pegasus img { height: 78px; } .creds-row .cred-accel img { height: 40px; } .creds-row .cred-cva img { height: 56px; } .container.feat-grid { max-width: 1560px; gap: clamp(88px, 7vw, 140px); } .feat-visual .device-frame { height: min(72vh, 880px); } .feat-panel .h1 { font-size: clamp(4.2rem, 4.4vw, 5.6rem); } .feat-panel .lead { font-size: clamp(1.45rem, 1.4vw, 1.75rem); } .feat-panel .stat-tile .v { font-size: 2.4rem; } .feat-panel .chip-pill, .feat-panel .ticker-chip { font-size: 0.98rem; } } @media (min-width: 2000px) { :root { --container: 1860px; --fs-display: clamp(3rem, 7.5vw, 9rem); --fs-h1: clamp(2.3rem, 4.6vw, 5.8rem); --fs-h2: clamp(1.5rem, 3vw, 3.3rem); --fs-lead: clamp(1.1rem, 1.5vw, 1.85rem); --fs-body: 1.26rem; --section-y: clamp(120px, 12vw, 260px); } .rail-name { font-size: 2rem; } .rail-desc { font-size: 1rem; } .plan-name { font-size: 1.85rem; } .plan .price { font-size: 2.1rem; } .plan li { font-size: 1.12rem; } .titn-row .tier { font-size: 1.45rem; } .titn-row .stake, .titn-row .fee { font-size: 1.22rem; } .post h3 { font-size: 1.7rem; } .point h3 { font-size: 1.5rem; } .stat-tile .v { font-size: 2.8rem; } .container.feat-grid { max-width: 1860px; gap: 160px; } .feat-visual .device-frame { height: min(74vh, 1040px); } .feat-panel .h1 { font-size: clamp(5rem, 4.2vw, 6.4rem); } .feat-panel .lead { font-size: 1.9rem; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; transition: none; } .btn-accent { animation: none; } } /* ============ CARD TIERS (editorial comparison) ============ */ .tiers { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 56px; border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; } .tier { position: relative; padding: clamp(26px, 2.4vw, 46px); display: flex; flex-direction: column; border-right: 1px solid var(--hairline); } .tier:last-child { border-right: 0; } .tier-eyebrow { font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-low); margin-bottom: 22px; } .tier-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 2.6vw, 3rem); line-height: 1.0; letter-spacing: -0.02em; color: var(--text-hi); text-transform: uppercase; } .tier-namerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-right: calc(-1 * clamp(26px, 2.4vw, 46px)); } .tier-card { width: clamp(112px, 40%, 168px); height: auto; flex-shrink: 0; filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55)); } .tier-tag { color: var(--text-mid); font-size: 1rem; margin-top: 14px; min-height: 2.8em; } .tier-price { display: flex; align-items: baseline; gap: 9px; margin: 18px 0 4px; } .tp-amt { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 3.4vw, 3.8rem); letter-spacing: -0.03em; line-height: 1; background: var(--signal-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .tp-per { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-low); } .tier-rows { margin: 26px 0 30px; border-top: 1px solid var(--hairline); } .tr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--hairline); } .tr .k { color: var(--text-mid); font-size: 0.95rem; } .tr .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--accent-solid); font-size: 0.92rem; text-align: right; } .tier-cta { margin-top: auto; width: 100%; } .tier .ribbon { position: absolute; top: 16px; right: 16px; z-index: 2; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: #06241B; background: var(--signal); padding: 6px 11px; border-radius: var(--r-pill); } .tier.featured { background: var(--surface); } .tier.featured::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--signal); } /* expandable "see all perks" */ .tier-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; background: var(--bg-base); border: 1px solid var(--hairline); color: var(--accent-solid); font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; padding: 12px 16px; border-radius: var(--r-md); cursor: pointer; margin-bottom: 18px; transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease); } .tier-toggle:hover { background: var(--surface-2); border-color: var(--accent-line); } .tier-toggle .chev { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--dur) var(--ease); } .tier.open .tier-toggle .chev { transform: rotate(180deg); } .tier-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); } .tier.open .tier-more { grid-template-rows: 1fr; } .tier-more-inner { overflow: hidden; min-height: 0; } .tier-more-inner .tr:first-child { border-top: 1px solid var(--hairline); } .tier-more-inner .tr:last-child { border-bottom: 0; } /* Version 1 - outline tier names (editorial, MINE-style) */ .tiers[data-cv="1"] .tier:not(.featured) .tier-name { color: transparent; -webkit-text-stroke: 1.4px var(--text-hi); } @supports not ((-webkit-text-stroke: 1px #000)) { .tiers[data-cv="1"] .tier:not(.featured) .tier-name { color: var(--text-hi); } } /* Version 2 - gradient tier names */ .tiers[data-cv="2"] .tier-name { background: var(--signal-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; -webkit-text-stroke: 0; } /* Version 3 - separated bordered cards */ .tiers[data-cv="3"] { border: 0; border-radius: 0; overflow: visible; gap: 20px; } .tiers[data-cv="3"] .tier { border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; } .tiers[data-cv="3"] .tier.featured { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line), 0 0 80px -30px var(--accent-glow); } /* ---- Card title treatments ---- */ .card-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.02em; color: var(--text-hi); } .card-title[data-ct="1"] .ct-l2 { background: var(--signal-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .card-title[data-ct="2"] .ct-l2 { color: transparent; -webkit-text-stroke: 1.4px var(--accent-solid); } @supports not ((-webkit-text-stroke: 1px #000)) { .card-title[data-ct="2"] .ct-l2 { color: var(--accent-solid); } } .card-title[data-ct="3"] { font-size: var(--fs-display); line-height: 0.96; } .card-title[data-ct="3"] .ct-l1, .card-title[data-ct="3"] .ct-l2 { display: block; } .card-title[data-ct="3"] .ct-l2 { background: var(--signal-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* shared keyword treatment: filled signal gradient (hero + section headlines) */ .outline-accent, [data-tw] .outline-accent .tw-ch { -webkit-text-stroke: 0; background: var(--signal-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } @supports not ((-webkit-background-clip: text)) { .outline-accent, [data-tw] .outline-accent .tw-ch { color: var(--accent-solid); -webkit-text-fill-color: var(--accent-solid); } } /* Hero title keyword: filled gradient (not outline) */ .hero-h1 .outline-accent, [data-tw] .hero-h1 .outline-accent .tw-ch { -webkit-text-stroke: 0; background: var(--signal-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } @media (max-width: 860px) { .tiers { grid-template-columns: 1fr; } .tier { border-right: 0; border-bottom: 1px solid var(--hairline); } .tier:last-child { border-bottom: 0; } .tier-tag { min-height: 0; } } /* ============ Feature panel content variants ============ */ .fv { display: none; } .feat-pin[data-fv="1"] .fv-rows { display: block; } .feat-pin[data-fv="2"] .fv-stats { display: block; } .feat-pin[data-fv="3"] .fv-chips { display: block; } .fv-rows { margin-top: 28px; } .fv-rows .fr { display: flex; align-items: center; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--hairline); color: var(--text-mid); font-size: 1.02rem; } .fv-rows .fr:first-child { border-top: 1px solid var(--hairline); } .fv-rows .fr::before { content: ""; width: 20px; height: 20px; flex-shrink: 0; background: var(--accent-solid); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; } .chip-logos { display: inline-flex; align-items: center; gap: 6px; } .chip-logos img { width: 18px; height: 18px; border-radius: 50%; } /* V3 - kinetic chips */ .feat-pin[data-fv="3"] .chip-pill.is-active { background: var(--signal); color: #06241B; border-color: transparent; } @keyframes chipIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { .feat-pin[data-fv="3"] .feat-panel.active .fv-chips .chips > * { animation: chipIn 0.42s var(--ease) backwards; } .feat-pin[data-fv="3"] .feat-panel.active .fv-chips .chips > *:nth-child(1) { animation-delay: 0.05s; } .feat-pin[data-fv="3"] .feat-panel.active .fv-chips .chips > *:nth-child(2) { animation-delay: 0.12s; } .feat-pin[data-fv="3"] .feat-panel.active .fv-chips .chips > *:nth-child(3) { animation-delay: 0.19s; } .feat-pin[data-fv="3"] .feat-panel.active .fv-chips .chips > *:nth-child(4) { animation-delay: 0.26s; } .feat-pin[data-fv="3"] .feat-panel.active .fv-chips .chips > *:nth-child(5) { animation-delay: 0.33s; } } /* ============ Closing section (newsletter + final CTA, merged) ============ */ .closing { position: relative; padding-block: clamp(100px, 13vw, 200px); overflow: hidden; } .closing::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(58% 70% at 50% 42%, rgba(31,217,166,0.20), transparent 70%), radial-gradient(48% 60% at 50% 58%, rgba(42,107,242,0.16), transparent 70%); } .closing-inner { position: relative; z-index: 1; } .closing-h { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display); line-height: 0.95; letter-spacing: -0.035em; color: var(--text-hi); } .closing-main > .lead { margin-top: 20px; color: var(--text-mid); } .closing .cta-row { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; } .closing-news { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .closing-news-text .eyebrow { display: block; margin-bottom: 12px; } .closing-news-h { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2vw, 2rem); letter-spacing: -0.02em; color: var(--text-hi); } .closing-news-text p { color: var(--text-low); font-size: 0.98rem; margin-top: 10px; max-width: 46ch; } .closing-news .news-btn { margin-top: 0; } /* cf1 - centered finale */ .closing[data-cf="1"] .closing-inner { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 920px; } .closing[data-cf="1"] .closing-main { display: flex; flex-direction: column; align-items: center; } .closing[data-cf="1"] .closing-main > .lead { max-width: 52ch; } .closing[data-cf="1"] .cta-row { justify-content: center; } .closing[data-cf="1"] .closing-news { margin-top: clamp(44px, 5vw, 68px); padding-top: clamp(34px, 4vw, 52px); border-top: 1px solid var(--hairline); width: 100%; max-width: 620px; align-items: center; text-align: center; } .closing[data-cf="1"] .closing-news-text p { margin-inline: auto; } /* cf2 - split two columns */ .closing[data-cf="2"] .closing-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .closing[data-cf="2"] .closing-main > .lead { max-width: 40ch; } .closing[data-cf="2"] .closing-news { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: clamp(28px, 3vw, 44px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } /* cf3 - big headline + slim gradient news bar */ .closing[data-cf="3"] .closing-inner { display: flex; flex-direction: column; align-items: center; text-align: center; } .closing[data-cf="3"] .closing-main { display: flex; flex-direction: column; align-items: center; } .closing[data-cf="3"] .closing-h { font-size: clamp(3.2rem, 9vw, 8rem); } .closing[data-cf="3"] .closing-main > .lead { max-width: 48ch; } .closing[data-cf="3"] .cta-row { justify-content: center; } .closing[data-cf="3"] .closing-news { margin-top: clamp(48px, 6vw, 84px); width: 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: clamp(18px, 2vw, 26px) clamp(24px, 3vw, 38px); border-radius: var(--r-xl); border: 1px solid transparent; background: linear-gradient(var(--bg-elev-1), var(--bg-elev-1)) padding-box, var(--signal) border-box; text-align: left; } .closing[data-cf="3"] .closing-news-text p { display: none; } .closing[data-cf="3"] .closing-news .news-btn { flex-shrink: 0; } @media (max-width: 860px) { .closing[data-cf="2"] .closing-inner { grid-template-columns: 1fr; } .closing[data-cf="3"] .closing-news { flex-direction: column; align-items: flex-start; } } /* fold entry: opaque cards so stacked entry does not show through */ .titn-fold .tier { background: var(--surface); } /* ---------- FAQ accordion ---------- */ .faq { max-width: 820px; margin: 40px auto 0; } .faq-item { border-bottom: 1px solid var(--hairline); } .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 26px 4px; font-family: var(--font-display); font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 500; color: var(--text-hi); transition: color var(--dur-micro) var(--ease); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--accent-solid); } .faq-item .faq-icon { flex-shrink: 0; width: 22px; height: 22px; margin-top: 3px; position: relative; } .faq-item .faq-icon::before, .faq-item .faq-icon::after { content: ""; position: absolute; background: var(--accent-solid); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .faq-item .faq-icon::before { top: 10px; left: 2px; right: 2px; height: 2px; } .faq-item .faq-icon::after { left: 10px; top: 2px; bottom: 2px; width: 2px; } .faq-item[open] .faq-icon::after { transform: rotate(90deg); opacity: 0; } .faq-item .faq-a { padding: 0 4px 28px; max-width: 68ch; } .faq-item .faq-a p { color: var(--text-mid); line-height: 1.66; font-size: 1.02rem; } .faq-item .faq-a p + p { margin-top: 12px; } .faq-item .faq-a a { color: var(--accent-solid); } @media (prefers-reduced-motion: no-preference) { .faq-item[open] .faq-a { animation: faqIn .4s var(--ease); } @keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } } /* ---------- Fine print (consolidated footnotes, one zone per page) ---------- */ .fine-print { border-top: 1px solid var(--hairline); padding-block: clamp(36px, 5vw, 60px); } .fine-print .fp-h { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-low); margin: 0 0 18px; } .fine-print ol { list-style: none; counter-reset: fp; display: flex; flex-direction: column; gap: 10px; max-width: 88ch; margin: 0; padding: 0; } .fine-print li { counter-increment: fp; font-size: 0.82rem; color: var(--text-low); line-height: 1.62; display: flex; gap: 12px; } .fine-print li::before { content: counter(fp); font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent-solid); flex: 0 0 14px; padding-top: 3px; } .fine-print a { color: var(--accent-solid); } .fine-print a:hover { text-decoration: underline; } .fn-ref { text-decoration: none; } .fn-ref sup { font-family: var(--font-mono); font-size: 0.58em; color: var(--accent-solid); margin-left: 2px; letter-spacing: 0; } .fn-ref:hover sup { text-decoration: underline; } /* ---------- Consent banner ---------- */ .consent { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 320; width: min(680px, calc(100% - 32px)); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--bg-elev-1); border: 1px solid var(--hairline-strong); border-radius: var(--r-lg); padding: 16px 20px; box-shadow: var(--shadow-ambient); } .consent p { flex: 1; min-width: 240px; font-size: 0.88rem; line-height: 1.5; color: var(--text-mid); margin: 0; } .consent-btns { display: flex; gap: 8px; flex-shrink: 0; } @media (max-width: 560px) { .consent { bottom: 12px; } .consent-btns { width: 100%; } .consent-btns .btn { flex: 1; } } /* ============================================================ MOBILE OPTIMISATION PASS ============================================================ */ @media (max-width: 900px) { /* Rotato: the phone is a small object centred in a wide, mostly transparent frame. Enlarge it and clip the empty sides so it reads as a real device instead of a tiny speck. */ .hero-center .hero-phone { overflow: hidden; width: 100%; display: flex; justify-content: center; margin-top: 6px; } .hero-center .rotato-frame { width: min(540px, 166vw); max-width: none; height: auto; } } @media (max-width: 760px) { :root { --section-y: clamp(64px, 12vw, 104px); } html, body { overflow-x: clip; max-width: 100%; } /* Hero copy */ .hero-mark { width: clamp(176px, 54vw, 232px); margin-bottom: 22px; } .hero-h1 { font-size: clamp(2rem, 8.4vw, 3rem); } .hero-sub { font-size: 1.02rem; max-width: 42ch; } .hero-actions { width: 100%; } .hero-actions .btn { flex: 1 1 46%; } /* Titles never run off-screen (also kills any stale JS parallax transform) */ .tw-head { font-size: clamp(1.95rem, 8.6vw, 2.7rem) !important; transform: none !important; } .h1 { font-size: clamp(1.9rem, 7.4vw, 2.6rem); } .display { font-size: clamp(2.4rem, 11vw, 3.4rem); } .ed-display { font-size: clamp(2.1rem, 9.5vw, 3rem); } .section-head { max-width: 100%; } .tw-head .tw-ch { white-space: normal; } /* Feature panels: phone fully visible at a sensible size */ .feat-stage { padding-block: clamp(48px, 12vw, 88px) !important; } .feat-panel { padding-block: 44px; } .feat-inline-media { margin-bottom: 26px; } .feat-inline-media .device-frame { width: min(258px, 64vw); } /* $TITN volume table: contained horizontal scroll, denser cells */ .compare-wrap { margin-top: 30px; border: 1px solid var(--hairline); border-radius: var(--r-lg); max-width: 100%; } .compare-table { min-width: 540px; } .compare-table th, .compare-table td { padding: 13px 14px; font-size: 0.85rem; } /* $TITN staking slider widget */ .tnsl { padding: 22px 18px; } /* editorial tier cards read as solid cards on mobile (no see-through) */ .tiers .tier { background: var(--surface); } } @media (max-width: 420px) { .hero-h1 { font-size: clamp(1.85rem, 9vw, 2.3rem); } .tw-head { font-size: clamp(1.8rem, 9.4vw, 2.3rem) !important; } .hero-actions .btn { flex: 1 1 100%; } } /* ===== Mobile / iPad hero: pinned phone scrub + text fly-in (≤900) ===== */ @media (max-width: 900px) { .hero-center { height: 240vh; } .hero-center .hero-stage { position: sticky; top: 0; height: 100svh; min-height: 600px; overflow: hidden; display: block; padding: 0; } .hero-center .hero-lede { position: absolute; left: 0; right: 0; top: clamp(62px, 9.5svh, 100px); bottom: auto; transform: none !important; opacity: 1; pointer-events: auto; width: auto; max-width: 100%; margin: 0; padding: 0 22px; text-align: center; z-index: 4; transition: opacity .4s var(--ease); } .hero-center .hero-mark { width: clamp(140px, 40vw, 184px); margin: 0 auto 10px; } .hero-center .hero-h1 { font-size: clamp(1.7rem, 6.6vw, 2.3rem); } .hero-center .hero-sub { font-size: 0.9rem; margin: 8px auto 0; max-width: 34ch; } .hero-center .hero-actions { margin-top: 20px; justify-content: center; gap: 13px; } .hero-center .store-badges { gap: 13px; } .hero-center .hero-stats { margin-top: clamp(52px, 17svh, 150px); } .hero-center .hero-phone { position: absolute; inset: 0; margin: 0; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; z-index: 1; } .hero-center .hero-phone::before { display: none; } .hero-center .rotato-frame { position: static; left: auto; width: 150%; max-width: none; height: auto; transform: translateY(3%); filter: drop-shadow(0 24px 50px rgba(0,0,0,0.5)); } .hero-center .hero-panels { position: absolute; left: 0; right: 0; top: clamp(96px, 13svh, 150px); bottom: auto; width: 100%; z-index: 4; display: block; pointer-events: none; } .hero-center .hero-panel { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transform: translateY(40px); transition: opacity .55s var(--ease), transform .55s var(--ease); width: auto; max-width: 100%; min-height: 0; margin: 0; padding: 0 22px; text-align: center; } .hero-center .hero-panel.m-in { opacity: 1; transform: none; } .hero-center .hero-panel p { margin: 12px auto 0; } .hero-center .hero-panel-coins { justify-content: center; margin-top: 22px; } .hero-center .hero-scrollcue { display: none; } } /* ===== Hero fine-tuning for small / short iPhones ===== */ /* Large tall phones (Pro Max etc.): bigger device, plenty of vertical room */ @media (max-width: 900px) and (min-width: 412px) and (min-height: 820px) { .hero-center .rotato-frame { width: 164%; transform: translateY(1%); } } /* Short viewports (iPhone SE/mini & landscape-ish): compress text, keep stats above phone, roomy buttons */ @media (max-width: 900px) and (max-height: 760px) { .hero-center .hero-mark { width: clamp(118px, 32vw, 150px); margin-bottom: 8px; } .hero-center .hero-h1 { font-size: clamp(1.45rem, 6vw, 1.95rem); } .hero-center .hero-sub { font-size: 0.84rem; margin-top: 7px; max-width: 32ch; } .hero-center .hero-actions { margin-top: 16px; gap: 12px; } .hero-center .store-badges { gap: 12px; } .hero-center .hero-stats { margin-top: clamp(40px, 13svh, 120px); } .hero-center .hstat-v { font-size: 1.28rem; } .hero-center .store-badge { min-height: 46px; } .hero-center .rotato-frame { width: 120%; transform: translateY(8%); } } /* Very short (e.g. SE 1st-gen, 568px tall): tighter still */ @media (max-width: 900px) and (max-height: 620px) { .hero-center .hero-lede { top: 52px; } .hero-center .hero-panels { top: 56px; } .hero-center .hero-h1 { font-size: clamp(1.3rem, 5.6vw, 1.7rem); } .hero-center .hero-stats { margin-top: clamp(28px, 9svh, 80px); } .hero-center .rotato-frame { width: 112%; transform: translateY(12%); } } /* Narrow widths (iPhone SE/mini 320–375px): keep headline + sub readable */ @media (max-width: 380px) { .hero-center .hero-h1 { font-size: clamp(1.42rem, 8vw, 1.85rem); } .hero-center .hero-sub { font-size: 0.86rem; max-width: 30ch; } .hero-center .hstat { padding: 0 16px; } .hero-center .hstat-v { font-size: 1.26rem; } .hero-center .hstat-k { font-size: 0.58rem; } } @media (max-width: 340px) { .hero-center .hero-h1 { font-size: clamp(1.3rem, 8.6vw, 1.6rem); } .hero-center .rotato-frame { width: 124%; } } /* Mobile: tighten oversized section gaps (desktop inline paddings are too big on phones) */ @media (max-width: 760px) { #blog { padding-bottom: 60px !important; } #newsletter { padding-top: 64px !important; padding-bottom: 110px !important; } #titn { padding-top: 96px !important; padding-bottom: 110px !important; } #rewards { padding-top: 96px !important; padding-bottom: 96px !important; } } /* ===== Mobile-only: filled gradient keyword + clean nav (≤768) ===== */ @media (max-width: 768px) { .outline-accent, [data-tw] .outline-accent .tw-ch { -webkit-text-stroke: 0 !important; background: var(--signal-text); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent !important; } .nav-cta { display: none; } .nav-burger { margin-left: auto; } } .mobile-menu .lang-picker.mobile-lang { margin-top: 18px; width: 100%; } .mobile-menu .lang-picker.mobile-lang .lang-btn { width: 100%; justify-content: center; } .mobile-menu .lang-picker.mobile-lang .lang-menu { left: 0; right: 0; } /* ============================================================ TESTIMONIALS / SOCIAL PROOF ============================================================ */ .tms-head { text-align: center; max-width: 640px; margin: 0 auto clamp(36px, 5vw, 56px); } .tms-rating { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 9px 18px; border-radius: var(--r-pill); background: rgba(255,255,255,0.04); border: 1px solid var(--hairline-strong); font-family: var(--font-mono); font-size: 0.84rem; color: var(--text-mid); } .tms-rating .tms-stars { color: #FF9500; letter-spacing: 1px; font-size: 0.9rem; } .tms-rating b { color: var(--text-hi); font-weight: 700; } .tms-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 16px; align-items: stretch; max-width: 920px; margin-inline: auto; } @media (max-width: 760px) { .tms-grid { grid-template-columns: 1fr; } } .tm-card { position: relative; overflow: hidden; display: flex; flex-direction: column; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 20px 22px; box-shadow: 0 14px 32px -28px rgba(0,0,0,0.6); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .tm-card:hover { transform: translateY(-4px); border-color: var(--accent-line); background: rgba(255,255,255,0.06); } .tm-card .tm-qmark { position: absolute; top: -14px; left: 12px; font-family: Georgia, "Times New Roman", serif; font-size: 100px; line-height: 1; background: var(--signal); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0.09; pointer-events: none; user-select: none; } .tm-card > * { position: relative; } .tm-stars { color: #FF9500; letter-spacing: 2px; font-size: 0.85rem; line-height: 1; margin-bottom: 11px; } .tm-title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--text-hi); letter-spacing: -0.01em; margin-bottom: 7px; } .tm-quote { color: var(--text-mid); line-height: 1.55; font-size: 0.9rem; margin-bottom: 15px; } .tm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hairline); } .tm-foot .tm-who { display: flex; flex-direction: column; gap: 2px; } .tm-foot .tm-author { color: var(--text-hi); font-weight: 500; font-size: 0.9rem; } .tm-foot .tm-date { color: var(--text-low); font-size: 0.78rem; font-family: var(--font-mono); } .tm-foot .tm-src { width: 19px; height: 19px; color: var(--text-low); flex-shrink: 0; opacity: 0.8; } .tms-more { text-align: center; margin-top: clamp(32px, 4vw, 44px); } [data-theme="light"] .tm-card { background: rgba(20,45,75,0.03); border-color: var(--hairline-strong); box-shadow: 0 1px 2px rgba(20,45,75,0.04), 0 14px 32px -26px rgba(20,45,75,0.3); } [data-theme="light"] .tm-card:hover { background: rgba(20,45,75,0.05); } [data-theme="light"] .tms-rating { background: rgba(20,45,75,0.03); } /* ---------- Cinematic card stage ---------- */ .card-stage { position: relative; height: clamp(300px, 36vw, 480px); margin-top: clamp(36px, 4.5vw, 60px); display: flex; align-items: center; justify-content: center; perspective: 1200px; } .cs-glow { position: absolute; width: min(58vw, 700px); aspect-ratio: 1.7; border-radius: 50%; background: radial-gradient(closest-side, rgba(31,217,166,0.16), rgba(42,107,242,0.10) 55%, transparent 78%); filter: blur(42px); pointer-events: none; } .cs-fan { position: relative; width: min(80vw, 780px); height: 100%; transform-style: preserve-3d; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .cs-card { position: absolute; top: 50%; left: 50%; width: clamp(270px, 36vw, 470px); filter: drop-shadow(0 34px 64px rgba(0,0,0,0.55)); will-change: transform; transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); } .cs-front { transform: translate(-26%, -36%) rotateY(13deg) rotateZ(6deg) translateZ(40px); z-index: 2; } .cs-back { transform: translate(-76%, -63%) rotateY(13deg) rotateZ(-9deg) translateZ(-50px) scale(0.98); z-index: 1; filter: drop-shadow(0 26px 52px rgba(0,0,0,0.5)) brightness(0.96); } /* gathered pre-state: cards stacked, fan out on reveal */ .card-stage.reveal:not(.in) .cs-card { transform: translate(-50%, -48%) rotateY(0deg) rotateZ(-2deg) scale(0.94); } @media (max-width: 600px) { .card-stage { height: clamp(240px, 66vw, 330px); } .cs-card { width: clamp(220px, 62vw, 290px); } .cs-front { transform: translate(-30%, -38%) rotateY(10deg) rotateZ(6deg) translateZ(30px); } .cs-back { transform: translate(-70%, -60%) rotateY(10deg) rotateZ(-8deg) translateZ(-40px) scale(0.97); } } /* ---------- Signature motion: the signal sweep ---------- One cyan→green light pass when key elements first enter the viewport. CTAs get a travelling shine; gradient keywords get their gradient sliding into place. Runs once per element. */ @media (prefers-reduced-motion: no-preference) { .btn-primary, .btn-accent { position: relative; overflow: hidden; } .btn-primary::after, .btn-accent::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,0.4) 50%, transparent 68%); transform: translateX(-140%); } .btn-primary.swept::after, .btn-accent.swept::after { animation: signalSweep 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s 1 both; } @keyframes signalSweep { to { transform: translateX(140%); } } .swept-text { animation: signalTextIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) 1; } @keyframes signalTextIn { 0% { background-size: 320% 100%; background-position: 100% 0; } 100% { background-size: 100% 100%; background-position: 0% 0; } } } /* ---------- $TITN fold-in entrance (CSS + IO, replaces GSAP) ---------- */ @media (min-width: 901px) and (prefers-reduced-motion: no-preference) { .titn-fold .tier:nth-child(1) { z-index: 3; } .titn-fold .tier:nth-child(2) { z-index: 2; } .titn-fold .tier:nth-child(3) { z-index: 1; } .titn-fold.fold-init .tier { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .titn-fold.fold-init .tier:nth-child(3) { transition-delay: 0.08s; } .titn-fold.fold-init:not(.unfolded) .tier:nth-child(2) { transform: translate(-92%, -6%) scale(0.94); } .titn-fold.fold-init:not(.unfolded) .tier:nth-child(3) { transform: translate(-186%, -12%) scale(0.88); } }