/* rewardy.us — theme system + components. Vanilla CSS, no build step. Palettes switch via [data-theme] on . Raw palette tokens are set per theme; everything else derives from them, so all themes stay consistent. Display: Fraunces (serif). Body: Manrope. */ /* ============================================================ base tokens */ :root { --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --maxw: 1180px; --pad: clamp(18px, 4vw, 40px); --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 34px; --header-h: 66px; --bottom-ad-h: 46px; --ease: cubic-bezier(.22, .61, .36, 1); --dur: .55s; /* derived from the per-theme palette below */ --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent); --accent-softer: color-mix(in srgb, var(--accent) 8%, transparent); --accent-line: color-mix(in srgb, var(--accent) 32%, transparent); --grad: linear-gradient(120deg, var(--accent), var(--accent-2)); --grad-soft: linear-gradient(120deg, var(--accent-soft), color-mix(in srgb, var(--accent-2) 12%, transparent)); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent); --glow: 0 18px 44px -26px color-mix(in srgb, var(--accent) 34%, transparent); --card-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8); } /* ================================================================ palettes */ /* Obsidian — charcoal + champagne gold (default) */ :root[data-theme='obsidian'] { --bg: #0b0c0f; --bg-2: #0f1115; --surface: rgba(255, 255, 255, .035); --surface-2: rgba(255, 255, 255, .06); --surface-3: rgba(255, 255, 255, .09); --border: rgba(255, 255, 255, .09); --border-2: rgba(255, 255, 255, .17); --text: #f4efe6; --dim: #b7b1a4; --mut: #837d70; --accent: #e8b45a; --accent-2: #d9843d; --on-accent: #1b1305; --good: #61d69c; --bad: #ff6f6f; --warn: #f5c451; --shadow: 0 24px 60px -28px rgba(0, 0, 0, .85); --mesh: radial-gradient(55% 38% at 82% 0%, rgba(232, 180, 90, .07), transparent 72%), radial-gradient(48% 34% at 8% 12%, rgba(217, 132, 61, .045), transparent 72%), radial-gradient(66% 54% at 50% 120%, rgba(232, 180, 90, .035), transparent 72%); } /* Emerald — deep green-black + mint */ :root[data-theme='emerald'] { --bg: #05100c; --bg-2: #071813; --surface: rgba(255, 255, 255, .035); --surface-2: rgba(255, 255, 255, .06); --surface-3: rgba(255, 255, 255, .09); --border: rgba(180, 255, 220, .1); --border-2: rgba(180, 255, 220, .2); --text: #eaf6ef; --dim: #a6c4b6; --mut: #6f8a7e; --accent: #26e59c; --accent-2: #12b0d8; --on-accent: #032015; --good: #4fe0a6; --bad: #ff7a7a; --warn: #ffd15c; --shadow: 0 24px 60px -28px rgba(0, 20, 12, .9); --mesh: radial-gradient(55% 38% at 80% 0%, rgba(38, 229, 156, .08), transparent 72%), radial-gradient(48% 34% at 6% 10%, rgba(18, 176, 216, .055), transparent 72%), radial-gradient(66% 54% at 50% 120%, rgba(38, 229, 156, .035), transparent 72%); } /* Cobalt — deep blue-black + electric azure */ :root[data-theme='cobalt'] { --bg: #070a13; --bg-2: #0a0f1d; --surface: rgba(255, 255, 255, .04); --surface-2: rgba(255, 255, 255, .065); --surface-3: rgba(255, 255, 255, .1); --border: rgba(180, 205, 255, .11); --border-2: rgba(180, 205, 255, .22); --text: #eef2fc; --dim: #a9b4d0; --mut: #6f7a99; --accent: #5b8cff; --accent-2: #9a6cff; --on-accent: #060a18; --good: #58d6a2; --bad: #ff7a86; --warn: #ffce5a; --shadow: 0 24px 60px -28px rgba(2, 6, 20, .9); --mesh: radial-gradient(55% 38% at 80% 0%, rgba(91, 140, 255, .09), transparent 72%), radial-gradient(48% 34% at 8% 10%, rgba(154, 108, 255, .06), transparent 72%), radial-gradient(66% 54% at 50% 120%, rgba(91, 140, 255, .04), transparent 72%); } /* Sunset — dark plum + coral/amber */ :root[data-theme='sunset'] { --bg: #120a10; --bg-2: #1a0d13; --surface: rgba(255, 255, 255, .04); --surface-2: rgba(255, 255, 255, .07); --surface-3: rgba(255, 255, 255, .1); --border: rgba(255, 210, 210, .11); --border-2: rgba(255, 210, 210, .22); --text: #f8ece8; --dim: #ccb0aa; --mut: #96736c; --accent: #ff6f61; --accent-2: #ffab4a; --on-accent: #200806; --good: #66d6a0; --bad: #ff5d6c; --warn: #ffc24a; --shadow: 0 24px 60px -28px rgba(20, 4, 8, .9); --mesh: radial-gradient(55% 38% at 82% 0%, rgba(255, 111, 97, .09), transparent 72%), radial-gradient(48% 34% at 6% 12%, rgba(255, 171, 74, .06), transparent 72%), radial-gradient(66% 54% at 50% 120%, rgba(255, 111, 97, .04), transparent 72%); } /* Mono — brutalist true-black + electric lime */ :root[data-theme='mono'] { --bg: #000000; --bg-2: #060606; --surface: rgba(255, 255, 255, .04); --surface-2: rgba(255, 255, 255, .08); --surface-3: rgba(255, 255, 255, .12); --border: rgba(255, 255, 255, .16); --border-2: rgba(255, 255, 255, .32); --text: #ffffff; --dim: #bdbdbd; --mut: #7d7d7d; --accent: #d4ff3f; --accent-2: #ffffff; --on-accent: #0a0a0a; --good: #9dff5a; --bad: #ff5f5f; --warn: #ffe14a; --shadow: 0 24px 60px -30px rgba(0, 0, 0, 1); --mesh: radial-gradient(50% 34% at 84% 0%, rgba(212, 255, 63, .06), transparent 72%), radial-gradient(60% 50% at 50% 120%, rgba(255, 255, 255, .025), transparent 72%); } /* Light — warm paper + ink + deep gold */ :root[data-theme='light'] { --bg: #f6f3ec; --bg-2: #efeae0; --surface: rgba(24, 18, 10, .028); --surface-2: rgba(24, 18, 10, .05); --surface-3: rgba(24, 18, 10, .08); --border: rgba(24, 18, 10, .1); --border-2: rgba(24, 18, 10, .2); --text: #1b1712; --dim: #57503f; --mut: #8a8172; --accent: #b57f1c; --accent-2: #c2542a; --on-accent: #fff8ec; --good: #2f9e6b; --bad: #c8402f; --warn: #b8801f; --shadow: 0 24px 50px -28px rgba(60, 44, 20, .3); --card-shadow: 0 20px 44px -28px rgba(60, 44, 20, .28); --mesh: radial-gradient(55% 38% at 84% 0%, rgba(181, 127, 28, .06), transparent 72%), radial-gradient(48% 34% at 6% 10%, rgba(194, 84, 42, .04), transparent 72%); } /* ==================================================================== base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; padding-bottom: var(--bottom-ad-h); } body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: var(--mesh), var(--bg); background-size: 120% 120%; background-attachment: fixed; opacity: .86; animation: mesh-drift 28s var(--ease) infinite alternate; } body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .45; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; } @keyframes mesh-drift { from { background-position: 50% 0; } to { background-position: 48% 3%; } } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: -.01em; } p { margin: 0; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; cursor: pointer; } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); } .skip-link { position: fixed; top: -60px; left: 12px; z-index: 200; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 700; transition: top .2s var(--ease); } .skip-link:focus { top: 12px; } /* ================================================================= layout */ .wrap, .topbar-inner, .footer-inner, .app-shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .wrap-narrow { max-width: 820px; margin-inline: auto; padding-inline: var(--pad); } .section { padding-block: clamp(56px, 9vw, 108px); position: relative; } .section-head { max-width: 720px; margin: 0 auto clamp(28px, 5vw, 54px); text-align: center; } .section-head h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); } .section-head p { color: var(--dim); font-size: 1.08rem; margin-top: 14px; } .grid-2 { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); } .grid-3 { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); } .grid-4 { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); } /* utilities */ .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: 10px; } .mb-1 { margin-bottom: 6px; } .mb-2 { margin-bottom: 12px; } .mb-3 { margin-bottom: 22px; } .mt-2 { margin-top: 12px; } .mt-4 { margin-top: 28px; } .text-center { text-align: center; } .text-dim { color: var(--dim); } .text-mut { color: var(--mut); } /* ================================================================ topbar */ .topbar { position: sticky; top: 0; z-index: 90; transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease); border-bottom: 1px solid transparent; } .topbar[data-scrolled] { background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--border); } .topbar-inner { display: flex; align-items: center; gap: 18px; height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; } .brand-mark { width: 30px; height: 30px; filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--accent) 24%, transparent)); } .brand-name { font-family: var(--font-display); font-size: 1.28rem; letter-spacing: -.02em; } .main-nav { display: flex; gap: 4px; margin-left: 12px; margin-right: auto; } .main-nav a { position: relative; padding: 8px 14px; border-radius: var(--r-sm); color: var(--dim); font-weight: 600; font-size: .95rem; transition: color .2s var(--ease), background .2s var(--ease); } .main-nav a:hover { color: var(--text); background: var(--surface); } .main-nav a[aria-current] { color: var(--text); } .main-nav a[aria-current]::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--grad); } .topbar-actions { display: flex; align-items: center; gap: 10px; } /* theme switch */ .theme-switch { position: relative; } .theme-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--dim); transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); } .theme-btn:hover { color: var(--text); border-color: var(--border-2); } .theme-btn .icon { width: 17px; height: 17px; } .theme-dot { width: 15px; height: 15px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 3px var(--accent-soft); } .theme-pop { position: absolute; right: 0; top: calc(100% + 10px); width: 268px; z-index: 120; background: color-mix(in srgb, var(--bg-2) 92%, transparent); backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--border-2); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px; animation: pop .18s var(--ease); } .theme-pop[hidden] { display: none; } .theme-pop-h { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin-bottom: 10px; padding-left: 4px; } .theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .theme-opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); background: transparent; border: 1px solid transparent; color: var(--dim); font-weight: 600; font-size: .9rem; text-align: left; transition: background .15s var(--ease), color .15s; } .theme-opt:hover { background: var(--surface-2); color: var(--text); } .theme-opt[aria-checked='true'] { background: var(--surface-2); color: var(--text); border-color: var(--accent-line); } .swatch { width: 22px; height: 22px; border-radius: 50%; flex: none; border: 1px solid rgba(255, 255, 255, .18); background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%); } /* auth slot */ .auth-slot { display: flex; align-items: center; gap: 8px; } .user-btn { display: inline-flex; } /* ================================================================ buttons */ .btn { --h: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: var(--h); padding: 0 20px; border-radius: 999px; font-weight: 700; font-size: .96rem; letter-spacing: -.01em; border: 1px solid transparent; white-space: nowrap; transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } .btn:active { transform: translateY(1px) scale(.99); } .btn .icon { width: 17px; height: 17px; } .btn-lg { --h: 54px; padding: 0 28px; font-size: 1.04rem; } .btn-sm { --h: 38px; padding: 0 15px; font-size: .9rem; } .btn-block { width: 100%; } .btn-primary { background: var(--grad); color: var(--on-accent); box-shadow: var(--glow); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 26px 70px -24px color-mix(in srgb, var(--accent) 65%, transparent); } .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-2); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--accent-line); transform: translateY(-2px); } .btn-danger { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); } .btn-danger:hover { background: var(--bad); color: #fff; } .btn[aria-busy='true'] { opacity: .7; pointer-events: none; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); color: var(--dim); transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); } .icon-btn:hover { color: var(--text); border-color: var(--border-2); background: var(--surface-2); } .icon-btn .icon { width: 18px; height: 18px; } .icon { width: 20px; height: 20px; flex: none; } /* chips / tags / badges */ .chip { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--dim); } .chip .icon { width: 15px; height: 15px; color: var(--accent); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); padding: 6px 13px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-line); } .eyebrow .icon { width: 15px; height: 15px; } .tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--surface-2); color: var(--dim); border: 1px solid var(--border); } .tag.active { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); border-color: color-mix(in srgb, var(--good) 34%, transparent); } .tag .icon { width: 13px; height: 13px; } .badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 22%, transparent); flex: none; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); } .gradient-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ================================================================== cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 28px); position: relative; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); } .card-hover:hover { transform: translateY(-5px); border-color: var(--accent-line); box-shadow: var(--card-shadow); background: var(--surface-2); } .glass-card { background: linear-gradient(160deg, var(--surface-2), var(--surface)); border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--card-shadow); backdrop-filter: blur(12px); } .feat-icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px; margin-bottom: 16px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); } .feat-icon .icon { width: 24px; height: 24px; } .card h3 { font-size: 1.2rem; margin-bottom: 8px; } .card>p { color: var(--dim); } /* stat card */ .stat-card { padding: 16px 18px; min-width: 0; } .stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .stat-top .icon-wrap { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); border: 1px solid var(--accent-line); } .stat-top .icon-wrap .icon { width: 16px; height: 16px; } .stat-value { font-family: var(--font-display); font-size: clamp(1.45rem, 2.2vw, 1.95rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.02; overflow-wrap: anywhere; } .stat-label { color: var(--mut); font-size: .86rem; font-weight: 600; margin-top: 7px; } .stat-delta { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; margin-top: 10px; padding: 4px 8px; border-radius: 999px; max-width: max-content; } .stat-delta.up { color: var(--good); background: color-mix(in srgb, var(--good) 13%, transparent); } .stat-delta.down { color: var(--bad); background: color-mix(in srgb, var(--bad) 13%, transparent); } /* ================================================================== hero */ .hero { position: relative; padding-top: clamp(48px, 8vw, 92px); padding-bottom: clamp(40px, 7vw, 80px); overflow: hidden; } .hero-orbs { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .orb { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .24; animation: float 18s var(--ease) infinite; } .orb-1 { width: 460px; height: 460px; background: var(--accent); top: -140px; right: -80px; } .orb-2 { width: 380px; height: 380px; background: var(--accent-2); bottom: -160px; left: -100px; animation-delay: -5s; } .orb-3 { width: 280px; height: 280px; background: var(--accent); top: 40%; left: 55%; opacity: .14; animation-delay: -9s; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 60px); align-items: center; } .hero-copy h1 { font-size: clamp(2.5rem, 6vw, 4.3rem); font-weight: 600; letter-spacing: -.025em; margin: 20px 0 18px; } .hero-copy .lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--dim); max-width: 30ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 22px; } .hero-trust { display: flex; flex-wrap: wrap; gap: 18px; color: var(--mut); font-size: .88rem; font-weight: 600; } .hero-trust span { display: inline-flex; align-items: center; gap: 7px; } .hero-trust .icon { width: 16px; height: 16px; color: var(--accent); } .hero-visual { position: relative; } /* hero preview card */ .glass-card .mini-stat { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); } .glass-card .mini-stat:last-of-type { border-bottom: 0; } .mini-stat .icon-wrap { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; } .mini-stat .icon-wrap .icon { width: 19px; height: 19px; } .chart { display: flex; align-items: flex-end; gap: 7px; height: 96px; margin-top: 18px; } .chart .bar { flex: 1; border-radius: 6px 6px 3px 3px; background: var(--grad); min-height: 4px; opacity: .55; transition: opacity .2s var(--ease), transform .2s var(--ease); animation: grow .8s var(--ease) backwards; } .chart .bar:hover { opacity: 1; transform: scaleY(1.04); } /* ================================================= how it works / steps */ .step { position: relative; padding: 26px; } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); margin-bottom: 16px; } .step h3 { font-size: 1.15rem; margin-bottom: 7px; } .step p { color: var(--dim); } /* ================================================================ pricing */ .price-card { display: flex; flex-direction: column; } .price-card.popular { border-color: var(--accent-line); box-shadow: var(--glow); } .price-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); } .price { font-family: var(--font-display); font-size: 2.6rem; font-weight: 600; letter-spacing: -.02em; margin: 12px 0 4px; display: flex; align-items: baseline; gap: 4px; } .price small { font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--mut); } .price-feats { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 11px; } .price-feats li { display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: .95rem; } .price-feats .icon { width: 17px; height: 17px; color: var(--accent); flex: none; } .price-card .btn { margin-top: auto; } /* credit packs */ .pack { display: flex; flex-direction: column; align-items: flex-start; } .pack .pack-amt { font-family: var(--font-display); font-size: 2rem; font-weight: 600; margin: 10px 0 2px; } .pack .pack-views { color: var(--mut); font-size: .9rem; } .pack .pack-bonus { margin-top: 10px; } /* ================================================================ cta band */ .cta-band { text-align: center; border-radius: var(--r-xl); padding: clamp(36px, 6vw, 68px); background: var(--grad-soft); border: 1px solid var(--accent-line); position: relative; overflow: hidden; } .cta-band h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin: 16px 0; } .cta-band p { color: var(--dim); max-width: 46ch; margin: 0 auto 26px; } /* ============================================================ app shell */ .app-shell { display: grid; grid-template-columns: 244px 1fr; gap: 28px; padding-block: 30px; align-items: start; min-height: calc(100vh - var(--header-h) - 60px); } .app-nav { position: sticky; top: calc(var(--header-h) + 18px); display: flex; flex-direction: column; gap: 3px; max-height: calc(100vh - var(--header-h) - 36px); overflow-y: auto; overscroll-behavior: contain; align-self: start; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); } .app-nav a { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--r-sm); color: var(--dim); font-weight: 600; font-size: .94rem; transition: background .18s var(--ease), color .18s var(--ease); } .app-nav a:hover { background: var(--surface-2); color: var(--text); } .app-nav a[aria-current] { background: var(--accent-soft); color: var(--accent); } .app-nav a .icon { width: 19px; height: 19px; } .nav-sep { height: 1px; background: var(--border); margin: 10px 4px; } .nav-label { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); padding: 4px 13px; } .app-main { min-width: 0; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } .page-head h1 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); } .page-head p { color: var(--dim); margin-top: 4px; } /* tables */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); } table { width: 100%; border-collapse: collapse; min-width: 520px; } thead th { text-align: left; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); font-weight: 700; padding: 15px 18px; border-bottom: 1px solid var(--border); } tbody td { padding: 15px 18px; border-bottom: 1px solid var(--border); color: var(--dim); font-size: .93rem; } tbody tr:last-child td { border-bottom: 0; } tbody tr { transition: background .15s var(--ease); } tbody tr:hover { background: var(--surface); } .data-table input, .data-table select { width: 100%; min-width: 0; height: 34px; padding: 0 9px; border-radius: 10px; font-size: .88rem; } .data-table td { vertical-align: middle; } .sim-table { min-width: 100%; table-layout: fixed; } .sim-table th, .sim-table td { padding: 8px 9px; overflow: hidden; text-overflow: ellipsis; } .sim-table .row-index { width: 36px; color: var(--mut); font-weight: 800; } .sim-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .sim-table input, .sim-table select { min-width: 0; } .ad-lab-grid.sim-two-col { grid-template-columns: 1fr; } .sim-card-head h3 { margin-bottom: 4px; } .sim-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .sim-add { flex: none; height: 34px; padding-inline: 12px; box-shadow: none; } .danger-icon { width: 34px; height: 34px; color: var(--bad); } .danger-icon:hover { color: #fff; background: var(--bad); border-color: var(--bad); } .soft-sep { width: 100%; border: 0; border-top: 1px solid var(--border); margin: 8px 0; } /* progress meter (campaigns) */ .progress { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .progress>i { display: block; height: 100%; border-radius: 999px; background: var(--grad); } .meter-row { display: flex; align-items: center; justify-content: space-between; font-size: .82rem; color: var(--mut); margin-bottom: 7px; } /* campaign card */ .campaign-list { display: flex; flex-direction: column; gap: 14px; } .campaign-card { display: flex; flex-direction: column; gap: 14px; } .camp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .camp-title { font-size: 1.1rem; font-weight: 700; font-family: var(--font-display); } .camp-sub { color: var(--mut); font-size: .86rem; } .camp-metrics { display: flex; gap: 22px; flex-wrap: wrap; } .camp-metric b { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; } .camp-metric span { color: var(--mut); font-size: .78rem; } /* fields */ .field { margin-bottom: 15px; } .field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 7px; } .field input, .field select, .field textarea { width: 100%; height: 44px; padding: 0 14px; border-radius: var(--r-sm); background: var(--bg-2); border: 1px solid var(--border-2); color: var(--text); font: inherit; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .field textarea { height: auto; padding: 12px 14px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: var(--ring); } .field .hint { color: var(--mut); font-size: .8rem; margin-top: 6px; } /* empty + spinner */ .empty { text-align: center; padding: clamp(30px, 6vw, 60px) 20px; border: 1px dashed var(--border-2); border-radius: var(--r-lg); background: var(--surface); } .empty>.icon { width: 46px; height: 46px; margin: 0 auto 16px; color: var(--accent); opacity: .8; } .empty h3 { font-size: 1.3rem; margin-bottom: 8px; } .empty p { color: var(--dim); max-width: 42ch; margin: 0 auto; } .spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--surface-3); border-top-color: var(--accent); margin: 60px auto; animation: spin .8s linear infinite; } .route-loading { min-height: 60vh; } /* ================================================================ modals */ .modal-host { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, #000 62%, transparent); backdrop-filter: blur(6px); animation: fade .2s var(--ease); } .modal { width: 100%; max-width: 480px; background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow); animation: pop .22s var(--ease); max-height: 88vh; overflow-y: auto; } .modal h2 { font-size: 1.4rem; margin-bottom: 6px; } .modal-sub { color: var(--dim); margin-bottom: 18px; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; } /* ================================================================ toasts */ .toast-host { position: fixed; right: 18px; bottom: 18px; z-index: 300; display: flex; flex-direction: column; gap: 10px; max-width: min(360px, 92vw); } .toast { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--border-2); box-shadow: var(--shadow); animation: slidein .3s var(--ease); } .toast.leaving { animation: slideout .3s var(--ease) forwards; } .toast .t-body { min-width: 0; } .t-title { font-weight: 700; font-size: .92rem; margin-bottom: 2px; } .t-msg { color: var(--dim); font-size: .88rem; } .toast.info { border-left: 3px solid var(--accent); } .toast.ok { border-left: 3px solid var(--good); } .toast.err { border-left: 3px solid var(--bad); } /* ========================================================== analytics UI */ .kpi-grid .stat-card { min-width: 0; } .overview-grid { grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); } .filter-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(150px, 200px) minmax(150px, 200px); gap: 10px; } .filter-row.one { grid-template-columns: minmax(180px, 1fr); max-width: 360px; } .filter-row input, .filter-row select { width: 100%; min-width: 0; } .period-picker select { min-width: 160px; } .period-metrics, .economics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .period-metrics .stat-card, .economics-grid .stat-card { padding: 16px; } .source-panel, .admin-panel, .ad-lab { overflow: hidden; } .ad-lab-grid { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: 18px; align-items: stretch; } .ad-preview-card { display: flex; flex-direction: column; gap: 12px; min-height: 220px; padding: 18px; border-radius: var(--r); background: linear-gradient(160deg, var(--accent-soft), transparent), var(--surface-2); border: 1px solid var(--accent-line); box-shadow: var(--glow); } .ad-preview-card h3 { font-size: clamp(1.35rem, 4vw, 2rem); margin: 0; } .ad-preview-card p { color: var(--dim); margin: 0; } body.is-app .ad-ticker { display: none; } .viewer-link { display: inline-flex; align-items: center; align-self: flex-start; margin-top: auto; padding: 9px 12px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); font-weight: 800; word-break: break-all; } .tune-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .tune-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .tune-grid label { display: grid; gap: 6px; color: var(--dim); font-size: .82rem; font-weight: 700; } .tune-grid input, .tune-grid select { width: 100%; min-width: 0; } .ad-preview-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; } .ad-preview-meta span { padding: 5px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--dim); font-size: .82rem; } .logic-list { margin: 0; padding-left: 22px; color: var(--dim); line-height: 1.85; } .logic-list li::marker { color: var(--accent); font-weight: 800; } /* ======================================================= bottom ad ticker */ .ad-ticker { position: fixed; left: 0; right: 0; bottom: 0; z-index: 115; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: var(--bottom-ad-h); padding: 8px max(16px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); color: var(--text); background: color-mix(in srgb, var(--bg) 88%, transparent); border-top: 1px solid var(--border); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 -18px 50px -34px rgba(0, 0, 0, .8); } .ad-ticker-label { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); white-space: nowrap; } .ad-ticker-viewport { overflow: hidden; min-width: 0; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .ad-ticker-track { display: inline-flex; align-items: center; gap: 12px; min-width: max-content; animation: ad-scroll 28s linear infinite; } .ad-ticker:hover .ad-ticker-track { animation-play-state: paused; } .ad-ticker-item { display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--dim); font-size: .84rem; white-space: nowrap; } .ad-ticker-item b { color: var(--text); } @keyframes ad-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ad-ticker-track { animation: none; } } /* ================================================================ footer */ .site-footer { border-top: 1px solid var(--border); margin-top: 40px; background: color-mix(in srgb, var(--bg-2) 60%, transparent); } .footer-inner { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 30px; padding-block: clamp(40px, 6vw, 64px); } .footer-brand .footer-tag { color: var(--dim); margin: 14px 0 16px; max-width: 34ch; font-size: .94rem; } .footer-badges { display: flex; flex-direction: column; gap: 8px; } .footer-col h4 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); margin-bottom: 14px; font-family: var(--font-body); font-weight: 700; } .footer-col a { display: block; color: var(--dim); padding: 5px 0; font-size: .93rem; transition: color .15s var(--ease); } .footer-col a:hover { color: var(--accent); } .footer-base { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 20px var(--pad); border-top: 1px solid var(--border); color: var(--mut); font-size: .85rem; max-width: var(--maxw); margin-inline: auto; } .footer-status { display: inline-flex; align-items: center; gap: 8px; } /* ============================================================ animations */ [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); } [data-reveal].in { opacity: 1; transform: none; } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(20px, -26px) scale(1.06); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes grow { from { transform: scaleY(0); transform-origin: bottom; } } @keyframes fade { from { opacity: 0; } } @keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } } @keyframes slidein { from { opacity: 0; transform: translateX(30px); } } @keyframes slideout { to { opacity: 0; transform: translateX(30px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } [data-reveal] { opacity: 1; transform: none; } html { scroll-behavior: auto; } } /* ============================================================ responsive */ @media (max-width: 940px) { .footer-inner { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } .app-shell { grid-template-columns: 1fr; } .app-nav { position: static; flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; padding: 10px; } .app-nav a { flex: 0 0 auto; } .nav-sep, .nav-label { display: none; } } @media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { order: -1; } .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } .main-nav { display: flex; order: 3; width: 100%; overflow-x: auto; padding-top: 8px; } } @media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .brand-name { display: none; } .hero-cta .btn { flex: 1 1 100%; } .theme-pop { position: fixed; left: 12px; right: 12px; top: calc(var(--header-h) + 6px); width: auto; } .ad-lab-grid, .overview-grid, .filter-row, .period-metrics, .economics-grid, .tune-grid { grid-template-columns: 1fr; } .page-head { align-items: stretch; } .page-head .btn { width: 100%; } body { --bottom-ad-h: 82px; } .ad-ticker { min-height: var(--bottom-ad-h); grid-template-columns: 1fr; gap: 4px; } .ad-ticker-label { justify-content: center; } }