/* PICKLES — Clean ground-up build Fonts loaded via in every HTML — NOT here. All font-weight values: 400 / 600 / 700 / 800 / 900 All available because HTML loads Nunito:wght@400;600;700;800;900 */ :root { --p: #2A7320; /* pickle green — primary */ --p-mid: #3A9A2C; --p-lt: #EBF5E8; /* light fill */ --p-glow: rgba(42,115,32,0.28); --m: #E09800; /* mustard — accent / CTA */ --m-lt: #FFF3D0; --m-glow: rgba(255,180,0,0.35); --ink: #0D1A0A; --ink-60: rgba(13,26,10,0.60); --ink-35: rgba(13,26,10,0.35); --ink-15: rgba(13,26,10,0.15); --ink-08: rgba(13,26,10,0.08); --bg: #F4FBF2; --surface: #FFFFFF; --warm: #ECF7E9; --r: 12px; --rl: 18px; --rxl: 26px; } /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Nunito', sans-serif; background: var(--bg); color: var(--ink); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Keyframes ─────────────────────────────────────────────── */ @keyframes up { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } } @keyframes flt { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-14px); } } @keyframes spin { to { transform:rotate(360deg); } } @keyframes pop { 0% { opacity:0; transform:scale(.88); } 65% { transform:scale(1.03); } 100% { opacity:1; transform:none; } } @keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.4} } .u1 { animation: up .45s .05s both; } .u2 { animation: up .45s .15s both; } .u3 { animation: up .45s .25s both; } .u4 { animation: up .45s .35s both; } .u5 { animation: up .45s .45s both; } /* ── Nav ───────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1.5px solid var(--ink-08); display: flex; align-items: center; justify-content: space-between; padding: 0 40px; height: 62px; } .nav--biz { background: rgba(13,26,10,0.97); border-bottom-color: rgba(255,255,255,0.07); } .logo { font-family: 'Abril Fatface', serif; font-size: 27px; color: var(--p); text-decoration: none; letter-spacing: -0.02em; display: flex; align-items: center; transition: transform .18s; } .logo:hover { transform: scale(1.05); } .logo-dot { color: var(--m); } .logo-sm { font-size: 19px; } .biz-tag { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,0.45); margin-left: 6px; align-self: flex-end; padding-bottom: 3px; } .nav-links { display: flex; gap: 6px; align-items: center; } .nl { font-size: 12px; font-weight: 700; text-decoration: none; color: var(--ink-60); padding: 7px 15px; border-radius: 20px; text-transform: uppercase; letter-spacing: .06em; transition: all .18s; } .nl:hover, .nl--on { color: var(--p); background: var(--p-lt); } .nav--biz .nl { color: rgba(255,255,255,0.45); } .nav--biz .nl:hover { color: #fff; background: rgba(255,255,255,0.10); } .nl--cta { background: linear-gradient(135deg, #1C5214, #2A7320, #3A9A2C, #4DBF3E); color: #fff !important; box-shadow: 0 3px 14px var(--p-glow); font-weight: 800; } .nl--cta:hover { transform: translateY(-1px); box-shadow: 0 6px 22px var(--p-glow); } /* ── Main container ────────────────────────────────────────── */ .main { flex:1; padding: 40px 40px; max-width: 1060px; margin: 0 auto; width: 100%; } .mnarrow { max-width: 680px; } /* ── Buttons ───────────────────────────────────────────────── */ .btn { font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; border: none; text-decoration: none; border-radius: 11px; padding: 12px 24px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, background .18s ease; } .btn:active { transform: scale(.96) !important; } .btn-p { /* pickle — primary */ background: linear-gradient(135deg, #1C5214, #2A7320, #3A9A2C, #4DBF3E); color: #fff; box-shadow: 0 3px 14px var(--p-glow); } .btn-p:hover { transform: translateY(-2px); box-shadow: 0 7px 24px var(--p-glow); } .btn-m { /* mustard — CTA highlight */ background: linear-gradient(135deg, #C88800, #E09800, #FFB800); color: var(--ink); box-shadow: 0 3px 14px var(--m-glow); font-weight: 900; } .btn-m:hover { transform: translateY(-2px); box-shadow: 0 7px 24px var(--m-glow); } .btn-biz { /* dark — business */ background: var(--ink); color: #fff; box-shadow: 0 3px 10px var(--ink-15); } .btn-biz:hover { background: var(--p); transform: translateY(-2px); box-shadow: 0 6px 18px var(--p-glow); } .btn-ghost { /* outlined */ background: var(--surface); color: var(--ink-60); border: 2px solid var(--ink-15); } .btn-ghost:hover { border-color: var(--p); color: var(--p); transform: translateY(-1px); } /* Ghost on dark hero bg */ .hero .btn-ghost { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.38); color: #fff; backdrop-filter: blur(6px); } .hero .btn-ghost:hover { background: rgba(255,255,255,0.24); border-color: rgba(255,255,255,.65); color: #fff; } .btn-lg { font-size: 15px; padding: 15px 30px; border-radius: 13px; } .btn-sm { font-size: 11px; padding: 7px 14px; border-radius: 9px; } .btn-full { width: 100%; } .btn-back { margin-bottom: 28px; } /* ── Hero ──────────────────────────────────────────────────── */ .hero { background: linear-gradient(135deg, #1C5214 0%, #2A7320 38%, #3A9A2C 72%, #4DBF3E 100%); border-radius: var(--rxl); padding: 56px 52px; margin-bottom: 44px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 8px 36px var(--p-glow), 0 2px 8px rgba(0,0,0,0.08); } /* Decorative circles — CSS only, no pseudo-element conflicts */ .hero-orb1 { position: absolute; top: -90px; right: -70px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,0.06); pointer-events: none; animation: flt 9s ease-in-out infinite; } .hero-orb2 { position: absolute; bottom: -70px; left: -50px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,0.05); pointer-events: none; animation: flt 12s ease-in-out infinite reverse; } .hero-inner { position: relative; z-index: 1; } .hero-pill { display: inline-block; background: rgba(255,255,255,0.16); color: rgba(255,255,255,0.90); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .15em; padding: 6px 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.22); margin-bottom: 18px; } .hero-h1 { font-family: 'Abril Fatface', serif; font-size: 62px; color: #fff; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 14px; text-shadow: 0 2px 18px rgba(0,0,0,0.18); } .hero-h1 em { color: var(--m); font-style: normal; } .hero-sub { font-size: 17px; color: rgba(255,255,255,0.78); line-height: 1.6; max-width: 520px; margin: 0 auto 30px; } .hero-btns { display: flex; gap: 12px; justify-content: center; } .hero-stats { display: flex; justify-content: center; gap: 52px; margin-top: 38px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.16); } .hs-num { font-family:'Abril Fatface',serif; font-size:34px; color:var(--m); display:block; line-height:1; } .hs-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,0.52); } /* ── Feature cards ─────────────────────────────────────────── */ .feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 48px; } .feat-card { background: var(--surface); border: 1.5px solid var(--ink-08); border-radius: var(--rl); padding: 24px 20px; box-shadow: 0 2px 8px var(--ink-08); position: relative; overflow: hidden; transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .18s; } .feat-card::before { content: ''; position: absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, #2A7320, #4DBF3E); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .feat-card:hover { transform: translateY(-5px); box-shadow: 0 8px 28px var(--p-glow); border-color: var(--p-mid); } .feat-card:hover::before { transform: scaleX(1); } .feat-icon { font-size: 28px; margin-bottom: 12px; display: block; } .feat-title { font-size: 14px; font-weight: 900; color: var(--ink); margin-bottom: 6px; } .feat-body { font-size: 13px; color: var(--ink-60); line-height: 1.55; font-weight: 600; } /* ── Page header ───────────────────────────────────────────── */ .ph { margin-bottom: 28px; display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px; } .ph-title { font-family:'Abril Fatface',serif; font-size:38px; color:var(--ink); letter-spacing:-.02em; line-height:1; } .ph-sub { font-size:14px; color:var(--ink-60); margin-top:5px; font-weight:600; } /* ── Filter pills ──────────────────────────────────────────── */ .pills { display:flex; gap:8px; flex-wrap:wrap; } .pill { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:8px 18px; border-radius:20px; cursor:pointer; border:2px solid var(--ink-15); background:var(--surface); color:var(--ink-60); transition:all .18s; } .pill:hover { border-color:var(--p); color:var(--p); } .pill--on { background:var(--p); color:#fff; border-color:var(--p); box-shadow:0 3px 12px var(--p-glow); } /* ── Campaign cards ────────────────────────────────────────── */ .card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .camp-card { background:var(--surface); border:2px solid var(--ink-08); border-radius:var(--rl); overflow:hidden; box-shadow:0 2px 8px var(--ink-08); transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s, border-color .18s; cursor:pointer; text-decoration:none; display:block; color:inherit; } .camp-card:hover { transform:translateY(-6px); box-shadow:0 12px 40px var(--p-glow); border-color:var(--p-mid); } .camp-stub { background:linear-gradient(135deg,#1C5214,#2A7320,#3A9A2C,#4DBF3E); padding:12px 20px; display:flex; justify-content:space-between; align-items:center; } .camp-body { padding:20px; } .camp-brand { font-family:'Abril Fatface',serif; font-size:20px; color:var(--ink); margin-bottom:4px; } .camp-prize { font-size:13px; font-weight:800; color:var(--p); margin-bottom:16px; } .camp-meta { display:flex; justify-content:space-between; font-size:11px; color:var(--ink-60); font-weight:600; margin-bottom:16px; } /* ── Entry card (consumer ticket) ──────────────────────────── */ .entry-card { background:var(--surface); border:2px solid var(--ink-08); border-radius:var(--rl); overflow:hidden; box-shadow:0 3px 14px var(--ink-08); margin-bottom:20px; } .entry-card--won { border-color:var(--m); box-shadow:0 6px 28px var(--m-glow); } .entry-stub { background:linear-gradient(135deg,#1C5214,#2A7320,#3A9A2C,#4DBF3E); padding:13px 22px; display:flex; justify-content:space-between; align-items:center; } .entry-body { padding:22px; } .entry-brand { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.13em; color:var(--p); margin-bottom:4px; } .entry-prize { font-family:'Abril Fatface',serif; font-size:26px; color:var(--ink); letter-spacing:-.01em; line-height:1.1; margin-bottom:20px; } /* Pickle ID */ .pid-label { font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.16em; color:var(--ink-35); margin-bottom:7px; display:block; } .pid { background:var(--bg); border:2px solid rgba(42,115,32,0.18); border-radius:9px; padding:13px 16px; font-family:'DM Mono',monospace; font-size:15px; font-weight:500; color:var(--p); letter-spacing:.07em; word-break:break-all; margin-bottom:18px; } /* Entry meta row */ .emeta { display:flex; gap:22px; padding-top:15px; border-top:2px solid var(--warm); } .em-item { display:flex; flex-direction:column; gap:3px; } .em-label { font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-35); } .em-val { font-size:14px; font-weight:800; color:var(--ink); } .em-val--on { color:var(--p); } .em-val--win { color:var(--m); } .em-val--off { color:var(--ink-35); } /* Draw info */ .dinfo { margin-top:18px; padding-top:16px; border-top:2px solid var(--warm); } .drow { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; } .dl { font-size:12px; font-weight:700; color:var(--ink-35); } .dv { font-size:12px; font-weight:700; color:var(--ink); max-width:58%; text-align:right; } /* ── Win banner ────────────────────────────────────────────── */ .win-banner { background:linear-gradient(135deg,#C88800,#E09800,#FFB800); border-radius:var(--rl); padding:36px; text-align:center; margin-bottom:22px; box-shadow:0 6px 28px var(--m-glow); animation:pop .5s cubic-bezier(.34,1.56,.64,1) both; } .win-emoji { font-size:52px; display:block; animation:flt 3s ease-in-out infinite; margin-bottom:8px; } .win-title { font-family:'Abril Fatface',serif; font-size:38px; color:var(--ink); letter-spacing:-.02em; margin-bottom:6px; } .win-sub { font-size:15px; color:var(--ink-60); margin-bottom:16px; } /* ── Action card ───────────────────────────────────────────── */ .action-card { background:var(--surface); border:2px solid var(--ink-08); border-radius:var(--r); padding:22px; margin-bottom:20px; } .action-row { display:flex; gap:12px; margin-top:14px; flex-wrap:wrap; } /* ── Callout ───────────────────────────────────────────────── */ .callout { border-radius:var(--r); padding:15px 18px; font-size:14px; font-weight:600; line-height:1.55; margin-bottom:18px; border-left:4px solid; } .callout-p { background:linear-gradient(135deg,rgba(42,115,32,.09),rgba(42,115,32,.04)); border-color:var(--p); color:var(--p); } .callout-m { background:linear-gradient(135deg,rgba(224,152,0,.11),rgba(224,152,0,.05)); border-color:var(--m); color:var(--ink-60); } /* ── Survey form ───────────────────────────────────────────── */ .survey-brand { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.13em; color:var(--p); margin-bottom:5px; display:flex; align-items:center; gap:6px; } .survey-brand::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--p-mid); animation:blink 2s ease-in-out infinite; display:inline-block; flex-shrink:0; } .survey-prize { font-family:'Abril Fatface',serif; font-size:34px; color:var(--ink); margin-bottom:6px; letter-spacing:-.02em; } .survey-count { font-size:13px; color:var(--ink-60); font-weight:600; } .question { margin-bottom:26px; } .q-label { display:block; font-size:15px; font-weight:800; color:var(--ink); margin-bottom:12px; } .opts { display:flex; flex-wrap:wrap; gap:9px; } .opt { font-family:'Nunito',sans-serif; font-size:13px; font-weight:700; padding:10px 18px; border-radius:9px; border:2px solid var(--ink-15); background:var(--surface); color:var(--ink-60); cursor:pointer; transition:all .18s cubic-bezier(.34,1.56,.64,1); } .opt:hover { border-color:var(--p); color:var(--p); transform:translateY(-2px); box-shadow:0 3px 12px var(--p-glow); } .opt.sel { background:var(--p); border-color:var(--p); color:#fff; transform:translateY(-2px); box-shadow:0 3px 14px var(--p-glow); } .txt-input { width:100%; font-family:'Nunito',sans-serif; font-size:14px; font-weight:600; padding:11px 14px; border:2px solid var(--ink-15); border-radius:9px; background:var(--surface); color:var(--ink); resize:vertical; } .txt-input:focus { outline:none; border-color:var(--p); box-shadow:0 0 0 4px var(--p-lt); } /* ── Success state ─────────────────────────────────────────── */ .suc-hero { text-align:center; padding:36px 0; } .suc-emoji { font-size:64px; display:block; animation:flt 3s ease-in-out infinite; margin-bottom:12px; } .suc-title { font-family:'Abril Fatface',serif; font-size:44px; color:var(--p); letter-spacing:-.02em; margin-bottom:6px; } .suc-sub { font-size:16px; color:var(--ink-60); } /* ── Auth card ─────────────────────────────────────────────── */ .auth-wrap { max-width:480px; margin:0 auto; } .auth-card { background:var(--surface); border:2px solid var(--ink-08); border-radius:var(--rxl); padding:40px; box-shadow:0 12px 44px rgba(0,0,0,0.09); } .auth-title { font-family:'Abril Fatface',serif; font-size:30px; color:var(--ink); margin-bottom:6px; letter-spacing:-.02em; } .auth-sub { font-size:14px; color:var(--ink-60); margin-bottom:26px; line-height:1.5; font-weight:600; } .tabs { display:flex; border-bottom:2px solid var(--ink-08); margin-bottom:26px; } .tab { font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; padding:11px 22px; border:none; background:none; cursor:pointer; color:var(--ink-35); border-bottom:3px solid transparent; margin-bottom:-2px; transition:all .18s; } .tab:hover { color:var(--p); } .tab--on { color:var(--p); border-bottom-color:var(--p); } /* ── Fields ────────────────────────────────────────────────── */ .field { margin-bottom:16px; } .f-label { display:block; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-35); margin-bottom:7px; } .f-hint { font-size:11px; color:var(--ink-35); margin-top:4px; display:block; line-height:1.4; } .f-input { width:100%; font-family:'Nunito',sans-serif; font-size:14px; font-weight:600; padding:11px 14px; border:2px solid var(--ink-15); border-radius:9px; background:var(--warm); color:var(--ink); transition:all .18s; } .f-input:focus { outline:none; border-color:var(--p); background:var(--surface); box-shadow:0 0 0 4px var(--p-lt); } /* ── Dashboard header ──────────────────────────────────────── */ .dash-hd { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:30px; } .dash-title { font-family:'Abril Fatface',serif; font-size:34px; color:var(--ink); letter-spacing:-.02em; } .dash-sub { font-family:'DM Mono',monospace; font-size:11px; color:var(--p); padding:3px 12px; background:var(--p-lt); border-radius:20px; border:1px solid rgba(42,115,32,0.2); display:inline-block; margin-bottom:6px; } /* ── Merchant campaign cards ───────────────────────────────── */ .mgmt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .mgmt-card { background:var(--surface); border:2px solid var(--ink-08); border-radius:var(--rl); overflow:hidden; box-shadow:0 2px 8px var(--ink-08); transition:transform .2s, box-shadow .2s; } .mgmt-card:hover { transform:translateY(-4px); box-shadow:0 10px 32px var(--p-glow); } .mgmt-head { background:linear-gradient(135deg,#0D1A0A,#1A2E14); padding:14px 18px; display:flex; justify-content:space-between; align-items:center; } .mgmt-body { padding:18px; } .mgmt-title { font-family:'Abril Fatface',serif; font-size:17px; color:var(--ink); margin-bottom:4px; } .mgmt-prize { font-size:12px; color:var(--ink-60); font-weight:600; margin-bottom:13px; } .mgmt-stats { display:flex; justify-content:space-between; font-size:11px; color:var(--ink-35); font-weight:700; margin-bottom:14px; } .mgmt-acts { display:flex; gap:9px; } /* ── Stat cards (biz) ──────────────────────────────────────── */ .stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; } .stat-card { background:var(--surface); border:2px solid var(--ink-08); border-radius:var(--r); padding:18px; position:relative; overflow:hidden; transition:transform .18s; } .stat-card:hover { transform:translateY(-3px); } .stat-card::after { content:''; position:absolute; bottom:0;left:0;right:0; height:3px; background:linear-gradient(90deg,#2A7320,#4DBF3E); transform:scaleX(0); transition:transform .2s; } .stat-card:hover::after { transform:scaleX(1); } .sc-num { font-family:'Abril Fatface',serif; font-size:32px; color:var(--ink); letter-spacing:-.02em; margin-bottom:2px; } .sc-label { font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-35); margin-bottom:5px; } .sc-sub { font-size:12px; font-weight:700; color:var(--p); } /* ── Form sections ─────────────────────────────────────────── */ .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:26px; } .form-sec { background:var(--surface); border:2px solid var(--ink-08); border-radius:var(--rl); padding:26px; } .form-sec-title { font-family:'Abril Fatface',serif; font-size:17px; color:var(--ink); margin-bottom:20px; display:flex; align-items:center; gap:10px; } .form-sec-title::before { content:''; width:4px; height:18px; background:linear-gradient(135deg,#2A7320,#4DBF3E); border-radius:2px; display:block; } .form-acts { text-align:center; padding:6px 0; } /* ── Question builder ──────────────────────────────────────── */ .qb { background:var(--bg); border:2px solid var(--ink-08); border-radius:var(--r); padding:16px; margin-bottom:12px; } .qb:hover { border-color:rgba(42,115,32,0.22); } .qb-hd { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; } .qb-opts { margin-top:10px; display:flex; flex-direction:column; gap:6px; } .cb-label { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ink-35); margin-top:10px; cursor:pointer; } /* ── Badges ────────────────────────────────────────────────── */ .badge { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; padding:5px 11px; border-radius:20px; } /* On dark (hero/stub) backgrounds */ .badge-live { background:rgba(255,255,255,0.18); color:#fff; border:1px solid rgba(255,255,255,0.28); } .badge-live::before { content:'●'; font-size:7px; animation:blink 1.5s ease-in-out infinite; } /* On light backgrounds */ .badge-p { background:var(--p-lt); color:var(--p); border:1px solid rgba(42,115,32,0.20); } .badge-m { background:var(--m-lt); color:#8B6000; border:1px solid rgba(224,152,0,0.22); } .badge-off { background:var(--warm); color:var(--ink-60); border:1px solid var(--ink-08); } /* ── Coming soon ───────────────────────────────────────────── */ .cs-wrap { text-align:center; padding:52px 20px 36px; } .cs-badge { display:inline-block; background:var(--p-lt); color:var(--p); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.14em; padding:7px 18px; border-radius:20px; margin-bottom:18px; border:2px solid rgba(42,115,32,0.15); } .cs-title { font-family:'Abril Fatface',serif; font-size:42px; color:var(--ink); margin-bottom:12px; letter-spacing:-.02em; } .cs-sub { font-size:16px; color:var(--ink-60); max-width:460px; margin:0 auto 24px; line-height:1.6; font-weight:600; } .cs-acts { display:flex; gap:12px; justify-content:center; margin-bottom:36px; } /* Preview blurred grid */ .prev-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:38px; opacity:.32; filter:blur(2px); pointer-events:none; } .prev-card { background:var(--surface); border:2px dashed var(--ink-15); border-radius:var(--rl); overflow:hidden; } .prev-stub { background:var(--warm); padding:12px 18px; } .prev-body { padding:18px; } .prev-brand { font-family:'Abril Fatface',serif; font-size:19px; color:var(--ink-35); margin-bottom:4px; } .prev-prize { font-size:13px; color:var(--ink-35); font-weight:700; margin-bottom:18px; } .prev-cta { font-size:12px; font-weight:800; color:var(--p); opacity:.5; text-transform:uppercase; letter-spacing:.08em; } /* Value prop strip */ .vp-strip { background:linear-gradient(135deg,#1C5214,#2A7320,#3A9A2C,#4DBF3E); border-radius:var(--rxl); padding:34px 40px; display:grid; grid-template-columns:repeat(4,1fr); gap:26px; box-shadow:0 8px 32px var(--p-glow); position:relative; overflow:hidden; } .vp-orb { position:absolute; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,0.05); top:-90px; right:-50px; pointer-events:none; } .vp-item { text-align:center; position:relative; z-index:1; } .vp-icon { font-size:28px; margin-bottom:9px; display:block; } .vp-title { font-size:13px; font-weight:900; color:#fff; margin-bottom:5px; } .vp-body { font-size:12px; color:rgba(255,255,255,0.62); line-height:1.5; font-weight:600; } /* ── Utility ───────────────────────────────────────────────── */ .mono-sm { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.06em; } .muted { color:var(--ink-60); } .txt-sm { font-size:14px; line-height:1.6; font-weight:600; } .fine { font-size:11px; color:var(--ink-35); margin-top:10px; text-align:center; font-weight:600; } .err { font-size:13px; color:#C4321A; margin-top:8px; font-weight:700; } .ok { font-size:13px; color:var(--p); font-weight:800; margin-left:8px; } /* ── States ────────────────────────────────────────────────── */ .state-center { text-align:center; padding:72px 20px; color:var(--ink-60); } .state-center p { font-size:15px; font-weight:600; margin-top:8px; } .state-icon { font-size:52px; margin-bottom:16px; display:block; } .spinner { width:34px; height:34px; border:3px solid var(--ink-08); border-top-color:var(--p); border-radius:50%; animation:spin .7s linear infinite; margin:0 auto 14px; } /* ── Footer ────────────────────────────────────────────────── */ .footer { background:var(--surface); border-top:2px solid var(--ink-08); padding:18px 40px; display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:700; color:var(--ink-60); margin-top:auto; } .footer a { color:var(--ink-60); text-decoration:none; transition:color .18s; } .footer a:hover { color:var(--p); } /* ── Responsive ────────────────────────────────────────────── */ @media (max-width: 860px) { .feat-grid, .card-grid, .mgmt-grid, .form-grid, .prev-grid, .vp-strip, .stat-row { grid-template-columns:1fr; } .main { padding:24px 18px; } .nav { padding:0 18px; } .hero { padding:36px 22px; border-radius:var(--rl); } .hero-h1 { font-size:42px; } .hero-btns { flex-direction:column; align-items:stretch; } .hero-stats { gap:28px; } .ph { flex-direction:column; align-items:flex-start; } }