/* ============================================================ VISUAL DIRECTIONS — switchable via Tweaks panel data-dir on : "playful" (default) | "fresh" | "bold" ============================================================ */ /* ---------- DIRECTION 2 · FRESH / MINIMAL ---------- */ html[data-dir="fresh"] { --bg: oklch(0.985 0.006 180); --surface: #ffffff; --surface-2: oklch(0.975 0.008 180); --ink: oklch(0.30 0.03 200); --muted: oklch(0.55 0.025 200); --primary: oklch(0.66 0.085 178); --primary-d: oklch(0.55 0.09 182); --accent: oklch(0.78 0.10 160); --accent-2: oklch(0.83 0.075 110); --line: oklch(0.92 0.008 190); --font-display: "Plus Jakarta Sans", system-ui, sans-serif; --font-body: "Plus Jakarta Sans", system-ui, sans-serif; --display-weight: 700; --display-spacing: -0.03em; --radius: 16px; --radius-sm: 11px; --shadow: 0 22px 50px -30px oklch(0.4 0.04 200 / 0.4); --shadow-sm: 0 10px 26px -20px oklch(0.4 0.04 200 / 0.4); --gut: clamp(20px, 5vw, 64px); } html[data-dir="fresh"] .section { padding-block: clamp(64px, 9vw, 128px); } html[data-dir="fresh"] .brand .mark { transform: none; border-radius: 11px; } html[data-dir="fresh"] .eyebrow { background: transparent; padding-inline: 0; color: var(--primary-d); letter-spacing: 0.16em; } html[data-dir="fresh"] .eyebrow::before { content:""; width: 26px; height: 2px; background: var(--primary); border-radius: 2px; } html[data-dir="fresh"] .hero h1 .hl::after { height: 3px; bottom: -2px; opacity: 1; background: var(--primary); transform: none; border-radius: 2px; } html[data-dir="fresh"] .card, html[data-dir="fresh"] .pack, html[data-dir="fresh"] .step, html[data-dir="fresh"] .review { box-shadow: none; border-color: var(--line); } html[data-dir="fresh"] .card:hover, html[data-dir="fresh"] .pack:hover { box-shadow: var(--shadow-sm); transform: translateY(-4px); } html[data-dir="fresh"] .card .tag { background: var(--surface); color: var(--primary-d); box-shadow: inset 0 0 0 1.5px var(--line); } html[data-dir="fresh"] .btn { border-radius: 11px; } html[data-dir="fresh"] .btn-primary { box-shadow: none; } html[data-dir="fresh"] .hero-art .tile { border-width: 0; box-shadow: var(--shadow-sm); } html[data-dir="fresh"] .hero-badge { border-width: 0; border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } html[data-dir="fresh"] .blob { opacity: .25; } html[data-dir="fresh"] .step-num { border-radius: 12px; } /* ---------- DIRECTION 3 · BOLD / ENERGETIC ---------- */ html[data-dir="bold"] { --bg: oklch(0.965 0.025 190); --surface: #ffffff; --surface-2: oklch(0.95 0.03 190); --ink: oklch(0.22 0.05 205); --muted: oklch(0.46 0.04 205); --primary: oklch(0.64 0.155 192); --primary-d: oklch(0.50 0.16 196); --accent: oklch(0.82 0.18 142); --accent-2: oklch(0.84 0.16 88); --line: var(--ink); --font-display: "Archivo", system-ui, sans-serif; --font-body: "Nunito Sans", system-ui, sans-serif; --display-weight: 800; --display-spacing: -0.02em; --display-transform: uppercase; --radius: 10px; --radius-sm: 8px; --shadow: 6px 6px 0 var(--ink); --shadow-sm: 4px 4px 0 var(--ink); } html[data-dir="bold"] h1, html[data-dir="bold"] h2 { letter-spacing: -0.02em; } html[data-dir="bold"] .section-title { font-size: clamp(2.1rem, 5vw, 3.5rem); } html[data-dir="bold"] .eyebrow { background: var(--ink); color: #fff; border-radius: 6px; } html[data-dir="bold"] .brand .mark { border-radius: 9px; transform: none; box-shadow: 3px 3px 0 var(--ink); } html[data-dir="bold"] .btn { border-radius: 8px; font-weight: 800; } html[data-dir="bold"] .btn-primary { box-shadow: 4px 4px 0 var(--ink); border: 2px solid var(--ink); } html[data-dir="bold"] .btn-primary:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); } html[data-dir="bold"] .btn-ghost { box-shadow: 4px 4px 0 var(--ink); border: 2px solid var(--ink); } html[data-dir="bold"] .btn-dark:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--primary); } html[data-dir="bold"] .card, html[data-dir="bold"] .pack, html[data-dir="bold"] .step, html[data-dir="bold"] .review, html[data-dir="bold"] .cband, html[data-dir="bold"] .faq-item, html[data-dir="bold"] .book { border: 2.5px solid var(--ink); box-shadow: var(--shadow-sm); } html[data-dir="bold"] .card:hover { transform: translate(-3px,-3px); box-shadow: 8px 8px 0 var(--ink); } html[data-dir="bold"] .pack:hover { transform: translate(-3px,-3px); box-shadow: 8px 8px 0 var(--ink); } html[data-dir="bold"] .card .tag, html[data-dir="bold"] .pack-flag { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); } html[data-dir="bold"] .hero h1 .hl { color: var(--ink); } html[data-dir="bold"] .hero h1 .hl::after { background: var(--accent); opacity: 1; height: 30%; transform: none; border-radius: 0; } html[data-dir="bold"] .hero-art .tile { border: 3px solid var(--ink); box-shadow: var(--shadow-sm); } html[data-dir="bold"] .hero-badge { border: 2.5px solid var(--ink); box-shadow: var(--shadow-sm); } html[data-dir="bold"] .step-num { border-radius: 8px; box-shadow: 3px 3px 0 var(--ink); } html[data-dir="bold"] .chip { border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink); } html[data-dir="bold"] .faq-item.open { border-color: var(--ink); } html[data-dir="bold"] .faq-q .ico { border: 2px solid var(--ink); border-radius: 7px; } html[data-dir="bold"] .input, html[data-dir="bold"] select.input, html[data-dir="bold"] .check { border-width: 2px; border-color: var(--ink); } html[data-dir="bold"] .blob { opacity: 0; } html[data-dir="bold"] .ph::after { border: 1.5px solid color-mix(in oklch, var(--ink) 30%, transparent); }