/* ========================================================================== KICK — Design System (Neo Brutalism) Single source of truth. Don't invent new tokens outside this file. ========================================================================== */ :root { /* Palette */ --bg: #1A1814; --surface: #22201C; --surface-2: #2A2722; --accent: #FF6B35; --accent-2: #00D4E0; --accent-3: #FFD93D; /* used ONLY in palette-bright tweak */ --text: #F2EFE6; --text-soft: #CFC6B8; --muted: #8A8174; --paper: #F5EBDC; --ink: #000000; --success: #7ED957; /* Strokes & shadows */ --border: 3px solid var(--ink); --border-thin: 2px solid var(--ink); --shadow-sm: 3px 3px 0 var(--ink); --shadow-md: 6px 6px 0 var(--ink); --shadow-lg: 10px 10px 0 var(--ink); /* Radii */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; /* Layout */ --container: 1200px; /* Spacing */ --space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 72px; --space-8: 96px; /* Type */ --font-display: "Archivo Black", "Arial Black", Impact, sans-serif; --font-body: "Inter", Arial, Helvetica, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; } /* ---------- Density tweak ---------- */ [data-density="compact"] { --space-3: 12px; --space-4: 18px; --space-5: 24px; --space-6: 36px; --space-7: 56px; --space-8: 72px; } [data-density="cozy"] { --space-3: 20px; --space-4: 28px; --space-5: 40px; --space-6: 56px; --space-7: 88px; --space-8: 120px; } /* ---------- Radius tweak ---------- */ [data-radius="squared"] { --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; } [data-radius="soft"] { --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; } /* ---------- Palette tweak ---------- */ [data-palette="cyan"] { --accent: #00D4E0; --accent-2: #FF6B35; } [data-palette="yellow"] { --accent: #FFD93D; --accent-2: #00D4E0; } [data-palette="green"] { --accent: #7ED957; --accent-2: #FF6B35; } /* ---------- Theme: LIGHT (FULL) ---------- Complete light remap: paper background, white cards, ALL formerly dark sections become light variants too. Footer becomes paper. Inline dark sections (style="background:var(--ink)" on .section) get overridden via attribute selector trick — those still go via .lt-dark utility class. Activate: */ [data-theme="light"] { --bg: #F5EBDC; --surface: #FFFFFF; --surface-2: #EFE3CF; --text: #1A1814; --text-soft: #4a4338; --muted: #6b5f4d; --paper: #FFFFFF; /* Keep --ink as pure black on light theme too — shadows/borders read true */ } [data-theme="light"] body { background: var(--bg); color: var(--text); } [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4 { color: var(--text); } [data-theme="light"] p { color: var(--text-soft); } [data-theme="light"] .nav { background: var(--bg); } [data-theme="light"] .logo { color: var(--text); } [data-theme="light"] .nav-links a { color: var(--text-soft); } [data-theme="light"] .nav-links a:hover { color: var(--accent); } [data-theme="light"] .feature-card, [data-theme="light"] .card, [data-theme="light"] .faq-item, [data-theme="light"] .step-card, [data-theme="light"] .demo-point, [data-theme="light"] .hero-stats, [data-theme="light"] .trust-bar, [data-theme="light"] .reassure, [data-theme="light"] .apply-form, [data-theme="light"] .chaos-item { background: #FFFFFF; color: var(--text); } [data-theme="light"] .step-card h4, [data-theme="light"] .demo-point h4, [data-theme="light"] .reassure h3, [data-theme="light"] .apply-form h3, [data-theme="light"] .apply-form .field label { color: var(--text); } [data-theme="light"] .step-card p, [data-theme="light"] .demo-point p, [data-theme="light"] .reassure p, [data-theme="light"] .apply-form p, [data-theme="light"] .apply-form .help { color: var(--text-soft); } [data-theme="light"] .hero-stats .stat span, [data-theme="light"] .trust-bar .pill { color: var(--text); } [data-theme="light"] .trust-bar .trust-label, [data-theme="light"] .hero-microcopy, [data-theme="light"] .mono { color: var(--muted); } [data-theme="light"] .hero-bullets li { color: var(--text); } /* Card-dark inverts to white card on light theme */ [data-theme="light"] .card-dark { background: #FFFFFF; color: var(--text); } [data-theme="light"] .card-dark h3, [data-theme="light"] .card-dark h4 { color: var(--text); } [data-theme="light"] .card-dark p { color: var(--text-soft); } /* Split problem — both sides on light bg */ [data-theme="light"] .split-problem .before { background: #FFFFFF; color: var(--text); } [data-theme="light"] .split-problem .before h3 { color: var(--text); } [data-theme="light"] .split-problem .before p { color: var(--text-soft); } [data-theme="light"] .split-problem .before ul li { background: rgba(0,0,0,0.05); color: var(--text); } [data-theme="light"] .chaos-item .strike { color: var(--muted); } [data-theme="light"] .chaos-item.ok .strike { color: var(--text); } [data-theme="light"] .flip-card.before { background: #FFFFFF; color: var(--text); } [data-theme="light"] .flip-card.before .big { color: var(--text); } [data-theme="light"] .flip-card.before p { color: var(--text-soft); } [data-theme="light"] .flip-card.before .label { color: var(--muted); } /* FOOTER — light variant */ [data-theme="light"] .footer { background: var(--surface-2); color: var(--text); } [data-theme="light"] .footer h4 { color: var(--text); } [data-theme="light"] .footer a { color: var(--text-soft); } [data-theme="light"] .footer a:hover { color: var(--accent); } [data-theme="light"] .footer-bottom { color: var(--muted); border-top-color: rgba(0,0,0,0.15); } [data-theme="light"] .footer .logo { color: var(--text); } /* Sticky CTA — light variant */ [data-theme="light"] .sticky-cta { background: var(--surface-2); } /* Hero A glow on light bg */ [data-theme="light"] .hero-a { background: radial-gradient(circle at 85% 10%, rgba(255,107,53,0.22), transparent 60%), radial-gradient(circle at 5% 90%, rgba(0,212,224,0.18), transparent 60%), var(--bg); } /* Inline dark sections — override the inline style="background:var(--ink)" on the "Come funziona" section (used by A and C). We can't change inline style from CSS, so for B and C we use attribute selectors to detect it. */ [data-theme="light"] section[style*="background:var(--ink)"], [data-theme="light"] section[style*="background: var(--ink)"] { background: var(--surface-2) !important; border-color: var(--ink) !important; } [data-theme="light"] section[style*="background:var(--ink)"] .mono, [data-theme="light"] section[style*="background: var(--ink)"] .mono { color: var(--accent) !important; } [data-theme="light"] section[style*="background:var(--ink)"] h2, [data-theme="light"] section[style*="background: var(--ink)"] h2 { color: var(--text) !important; } /* Apply section — keep accent bg but works the same */ [data-theme="light"] .apply { color: var(--ink); } /* Inline dark blocks (apply trust pills with style="background:var(--ink);color:var(--paper)") We invert these to surface white blocks on light. */ [data-theme="light"] [style*="background:var(--ink)"][style*="color:var(--paper)"], [data-theme="light"] [style*="background: var(--ink)"][style*="color: var(--paper)"] { background: #FFFFFF !important; color: var(--text) !important; } /* Problem stats blocks in C — boxes that hardcoded ink bg */ [data-theme="light"] [style*="background:var(--ink);color:var(--paper)"] { background: #FFFFFF !important; color: var(--text) !important; } [data-theme="light"] [style*="background:var(--ink);color:var(--paper)"] [style*="color:var(--text-soft)"] { color: var(--muted) !important; } /* Final CTA strip stays accent — no change needed */ /* Phone mockup keeps its dark bezel; screen is paper which stays */ /* ========================================================================== BASE ========================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: inherit; } .container { width: min(100% - 32px, var(--container)); margin-inline: auto; } .section { padding: var(--space-7) 0; } .section-tight { padding: var(--space-6) 0; } /* ========================================================================== TYPOGRAPHY ========================================================================== */ h1, h2, h3, h4 { margin: 0 0 var(--space-3); font-family: var(--font-display); text-transform: uppercase; line-height: 0.95; letter-spacing: -0.02em; color: var(--text); text-wrap: balance; } h1 { font-size: clamp(40px, 8vw, 88px); } h2 { font-size: clamp(30px, 5.2vw, 56px); } h3 { font-size: clamp(22px, 3vw, 30px); } h4 { font-size: clamp(18px, 2vw, 22px); } p { margin: 0 0 var(--space-3); font-size: 17px; color: var(--text-soft); max-width: 62ch; text-wrap: pretty; } .kicker { color: var(--accent); } .on-paper { color: var(--ink); } .on-paper p { color: #2a2520; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; padding: 8px 14px; border: var(--border); border-radius: 999px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); } .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--ink); } .mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } /* ========================================================================== BUTTONS ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 22px; text-decoration: none; border: var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; box-shadow: var(--shadow-md); background: var(--paper); color: var(--ink); white-space: nowrap; } .btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); } .btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); } .btn-primary { background: var(--accent); color: var(--ink); } .btn-secondary { background: var(--paper); color: var(--ink); } .btn-dark { background: var(--ink); color: var(--ink) ; } .btn-ghost { background: transparent; color: var(--text); box-shadow: none; border-color: var(--text-soft); } .btn-ghost:hover { transform: none; background: rgba(242,239,230,0.08); } .btn-lg { min-height: 64px; padding: 0 28px; font-size: 18px; } .btn-block { display: flex; width: 100%; } .btn-arrow::after { content: "→"; font-family: var(--font-display); transition: transform 0.12s ease; } .btn-arrow:hover::after { transform: translateX(4px); } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } /* ========================================================================== BADGES / TAGS ========================================================================== */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: var(--border-thin); background: var(--accent); color: var(--ink); font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 999px; } .badge-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #d32f2f; box-shadow: 0 0 0 3px rgba(211,47,47,0.25); animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 50% { opacity: 0.5; } } .tag { display: inline-block; padding: 4px 10px; border: var(--border-thin); border-radius: 999px; background: var(--paper); color: var(--ink); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; } /* ========================================================================== CARDS ========================================================================== */ .card { background: var(--paper); color: var(--ink); border: var(--border); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-md); } .card-dark { background: var(--surface); color: var(--text); border: var(--border); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-md); } .card-dark h3, .card-dark h4 { color: var(--text); } .card-dark p { color: var(--text-soft); } .card-accent { background: var(--accent); color: var(--ink); border: var(--border); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-md); } /* ========================================================================== GRID HELPERS ========================================================================== */ .grid { display: grid; gap: var(--space-4); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stack-4 > * + * { margin-top: var(--space-4); } .stack-3 > * + * { margin-top: var(--space-3); } .stack-2 > * + * { margin-top: var(--space-2); } /* ========================================================================== NAV ========================================================================== */ .nav { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 16px; } .logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 22px; text-transform: uppercase; text-decoration: none; color: var(--text); letter-spacing: -0.02em; } .logo-mark { width: 36px; height: 36px; display: grid; place-items: center; background: var(--accent); border: var(--border); border-radius: 8px; box-shadow: var(--shadow-sm); color: var(--ink); font-size: 18px; } .nav-links { display: none; gap: 28px; font-weight: 600; font-size: 14px; color: var(--text-soft); } .nav-links a { text-decoration: none; } .nav-links a:hover { color: var(--accent); } .nav-right { display: flex; align-items: center; gap: 10px; } .lang-switch { display: inline-flex; border: var(--border); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--paper); font-family: var(--font-mono); font-size: 11px; font-weight: 700; } .lang-switch button { padding: 7px 10px; background: transparent; border: 0; color: var(--ink); cursor: pointer; letter-spacing: 0.08em; text-transform: uppercase; } .lang-switch button.is-active { background: var(--ink); color: var(--paper); } @media (min-width: 820px) { .nav-links { display: flex; } } /* ========================================================================== PHONE MOCKUP (inline SVG-style via DOM) ========================================================================== */ .phone { position: relative; width: 320px; max-width: 100%; margin-inline: auto; aspect-ratio: 320 / 660; background: var(--ink); border: var(--border); border-radius: 44px; padding: 12px; box-shadow: var(--shadow-lg); } .phone::before { content: ""; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 110px; height: 24px; background: var(--ink); border-radius: 14px; z-index: 3; } .phone-screen { width: 100%; height: 100%; background: var(--paper); border-radius: 32px; overflow: hidden; position: relative; color: var(--ink); display: flex; flex-direction: column; } .phone-status { padding: 10px 22px 4px; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; font-weight: 700; } .phone-body { flex: 1; padding: 28px 18px 18px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; } .phone-tab { display: inline-block; padding: 4px 10px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); align-self: flex-start; } .rank-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); } .rank-row.is-me { background: var(--accent); } .rank-pos { font-family: var(--font-display); font-size: 18px; width: 28px; text-align: center; } .rank-info { font-size: 13px; line-height: 1.2; } .rank-info strong { display: block; font-weight: 700; } .rank-info span { font-family: var(--font-mono); font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 0.08em; } .rank-pts { font-family: var(--font-display); font-size: 16px; color: var(--ink); } .phone-nav { display: flex; justify-content: space-around; padding: 10px 14px 14px; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; border-top: 2px solid var(--accent); } .phone-nav span.is-active { color: var(--accent); } /* ========================================================================== FORMS ========================================================================== */ .form { display: grid; gap: var(--space-3); } .field { display: grid; gap: 6px; } .field label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); } .input, .select, .textarea { width: 100%; padding: 14px 16px; font-family: var(--font-body); font-size: 16px; background: #fff; color: var(--ink); border: var(--border); border-radius: var(--radius-sm); outline: none; box-shadow: inset 0 0 0 0 var(--accent); transition: box-shadow 0.12s ease, transform 0.12s ease; } .input:focus, .select:focus, .textarea:focus { box-shadow: var(--shadow-sm); transform: translate(-1px, -1px); } .input.is-error { background: #ffe9e4; } .help { font-size: 12px; color: #6b5f4d; } .help.is-error { color: #c23a1b; font-weight: 600; } /* ========================================================================== FAQ ========================================================================== */ .faq-item { background: var(--paper); color: var(--ink); border: var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; } .faq-item + .faq-item { margin-top: 14px; } .faq-q { width: 100%; background: transparent; border: 0; padding: 18px 20px; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--font-display); font-size: 17px; text-transform: uppercase; color: var(--ink); cursor: pointer; letter-spacing: -0.01em; } .faq-q .chev { font-family: var(--font-mono); font-size: 20px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink); border-radius: 8px; background: var(--accent); transition: transform 0.2s ease; flex-shrink: 0; } .faq-item[open] .chev { transform: rotate(45deg); } .faq-a { padding: 0 20px 20px; color: #2a2520; font-size: 15px; } /* ========================================================================== FOOTER ========================================================================== */ .footer { background: var(--ink); color: var(--paper); padding: var(--space-6) 0 var(--space-4); border-top: var(--border); } .footer h4 { color: var(--paper); font-size: 14px; font-family: var(--font-mono); letter-spacing: 0.12em; margin-bottom: 12px; } .footer a { text-decoration: none; color: var(--text-soft); font-size: 14px; display: block; padding: 4px 0; } .footer a:hover { color: var(--accent); } .footer-bottom { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid #333; display: flex; flex-wrap: wrap; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; } /* ========================================================================== STICKY MOBILE CTA ========================================================================== */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--ink); border-top: var(--border); z-index: 50; display: none; } .sticky-cta .btn { box-shadow: var(--shadow-sm); } @media (max-width: 820px) { .sticky-cta { display: block; } body.has-sticky { padding-bottom: 86px; } } /* ========================================================================== STEPS / NUMBERED LIST ========================================================================== */ .step { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: start; } .step-num { width: 64px; height: 64px; display: grid; place-items: center; background: var(--accent); border: var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); font-family: var(--font-display); font-size: 28px; color: var(--ink); } .step h4 { color: var(--text); margin-bottom: 6px; } .step p { color: var(--text-soft); font-size: 15px; } /* ========================================================================== UTIL ========================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .divider-accent { height: 6px; background: var(--accent); border-top: var(--border); border-bottom: var(--border); } .hatch { background-image: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(0,0,0,0.08) 10px 12px); } .marquee-strip { background: var(--accent); color: var(--ink); padding: 10px 0; border-top: var(--border); border-bottom: var(--border); font-family: var(--font-display); text-transform: uppercase; font-size: 18px; letter-spacing: 0.02em; overflow: hidden; white-space: nowrap; } .marquee-track { display: inline-block; animation: marquee 24s linear infinite; padding-left: 100%; } .marquee-track span { margin: 0 28px; } .marquee-track span::before { content: "✦ "; color: var(--ink); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .section { padding: var(--space-6) 0; } p { font-size: 16px; } .hero-wrap { grid-template-columns: 1fr !important; } } /* ========================================================================== PRINT ========================================================================== */ @media print { .nav, .sticky-cta { display: none; } }