/* ============================================================ SpicyDare — Design System v1.1 Dark, sensual, editorial. "La température qui monte." ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500;1,6..72,600&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ---- Deep warm-plum base ---- */ --bg: oklch(0.155 0.028 8); --bg-deep: oklch(0.115 0.024 8); --bg-raise: oklch(0.205 0.030 10); --surface: oklch(0.235 0.034 12); --surface-2: oklch(0.285 0.038 14); --line: oklch(0.40 0.04 14 / 0.22); --line-soft: oklch(0.55 0.04 14 / 0.12); /* ---- Text ---- */ --ink: oklch(0.965 0.008 60); --ink-soft: oklch(0.80 0.018 30); --ink-mute: oklch(0.66 0.022 24); --ink-faint: oklch(0.56 0.024 20); /* ---- Accent (rose primary, switchable) ---- */ --accent-h: 6; --accent: oklch(0.685 0.185 var(--accent-h)); --accent-bright:oklch(0.74 0.19 var(--accent-h)); --accent-deep: oklch(0.52 0.16 var(--accent-h)); --accent-tint: oklch(0.685 0.185 var(--accent-h) / 0.14); /* ---- Heat scale (gold -> rose -> ember) ---- */ --heat-0: oklch(0.82 0.13 78); /* candlelight gold */ --heat-1: oklch(0.74 0.17 40); /* warm coral */ --heat-2: oklch(0.66 0.21 14); /* rose */ --heat-3: oklch(0.58 0.22 24); /* ember red */ /* ---- Radii / shadow ---- */ --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 40px; --shadow-soft: 0 1px 0 oklch(1 0 0 / 0.05) inset, 0 24px 60px -28px oklch(0 0 0 / 0.7); --shadow-card: 0 1px 0 oklch(1 0 0 / 0.06) inset, 0 40px 90px -40px oklch(0 0 0 / 0.85); --glass: oklch(0.30 0.03 12 / 0.5); /* ---- Type ---- */ --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --sans: 'Hanken Grotesk', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --maxw: 1200px; --gut: clamp(20px, 5vw, 64px); } /* Accent presets (driven by [data-accent] on ) */ html[data-accent="coral"] { --accent-h: 30; --accent: oklch(0.70 0.18 30); --accent-bright: oklch(0.76 0.185 30); --accent-deep: oklch(0.54 0.15 30); --accent-tint: oklch(0.70 0.18 30 / 0.14); } html[data-accent="gold"] { --accent-h: 78; --accent: oklch(0.80 0.135 78); --accent-bright: oklch(0.86 0.14 78); --accent-deep: oklch(0.62 0.12 78); --accent-tint: oklch(0.80 0.135 78 / 0.14); } html[data-accent="violet"] { --accent-h: 330; --accent: oklch(0.66 0.18 330); --accent-bright: oklch(0.72 0.19 330); --accent-deep: oklch(0.50 0.16 330); --accent-tint: oklch(0.66 0.18 330 / 0.14); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Ambient warm vignette + subtle grain over the whole page */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% -10%, oklch(0.30 0.06 18 / 0.55), transparent 60%), radial-gradient(80% 60% at 110% 110%, var(--accent-tint), transparent 55%); } body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.045; 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.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } #root { position: relative; z-index: 2; } ::selection { background: var(--accent); color: oklch(0.14 0.02 10); } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img { max-width: 100%; display: block; } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } .section { position: relative; padding-block: clamp(72px, 11vw, 150px); } .section--tight { padding-block: clamp(56px, 8vw, 110px); } /* ---------- Type scale ---------- */ .eyebrow { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-bright); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); } .display { font-family: var(--serif); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; font-size: clamp(40px, 7vw, 92px); text-wrap: balance; } .display em { font-style: italic; font-weight: 500; } .h2 { font-family: var(--serif); font-weight: 500; line-height: 1.06; letter-spacing: -0.018em; font-size: clamp(30px, 4.6vw, 56px); text-wrap: balance; } .h2 em { font-style: italic; color: var(--accent-bright); } .h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(21px, 2.2vw, 27px); line-height: 1.15; letter-spacing: -0.01em; } .lead { font-size: clamp(17px, 1.55vw, 21px); line-height: 1.62; color: var(--ink-soft); max-width: 56ch; text-wrap: pretty; } .body { color: var(--ink-mute); line-height: 1.62; text-wrap: pretty; } .kicker-num { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; color: var(--ink-faint); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; border: 1px solid transparent; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, background .25s, border-color .25s; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { color: oklch(0.16 0.02 10); background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep)); box-shadow: 0 10px 34px -12px var(--accent), 0 1px 0 oklch(1 0 0 / 0.4) inset; } .btn--primary:hover { box-shadow: 0 16px 44px -12px var(--accent), 0 1px 0 oklch(1 0 0 / 0.5) inset; } .btn--ghost { color: var(--ink); background: oklch(1 0 0 / 0.04); border-color: var(--line); backdrop-filter: blur(10px); } .btn--ghost:hover { background: oklch(1 0 0 / 0.08); border-color: var(--line-soft); } /* Store badge */ .store { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px 12px 16px; border-radius: 14px; background: oklch(1 0 0 / 0.045); border: 1px solid var(--line); backdrop-filter: blur(10px); transition: transform .25s, border-color .25s, background .25s; } .store:hover { transform: translateY(-2px); border-color: var(--accent); background: oklch(1 0 0 / 0.07); } .store svg { width: 26px; height: 26px; flex: none; } .store .store__top { display: block; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); font-family: var(--mono); line-height: 1.35; } .store .store__main { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; } /* ---------- Cards & chips ---------- */ .card { position: relative; background: linear-gradient(180deg, oklch(1 0 0 / 0.045), oklch(1 0 0 / 0.015)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 38px); box-shadow: var(--shadow-soft); backdrop-filter: blur(14px); } .card--hover { transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s; } .card--hover:hover { transform: translateY(-5px); border-color: var(--line-soft); box-shadow: var(--shadow-card); } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; background: oklch(1 0 0 / 0.05); border: 1px solid var(--line); color: var(--ink-soft); white-space: nowrap; } .pepper { font-size: 0.92em; filter: saturate(1.1); } /* ---------- Reveal-on-scroll ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); } .reveal.in { opacity: 1; transform: none; } .reveal[data-d="1"] { transition-delay: .08s; } .reveal[data-d="2"] { transition-delay: .16s; } .reveal[data-d="3"] { transition-delay: .24s; } .reveal[data-d="4"] { transition-delay: .32s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ---------- Image placeholders (elegant) ---------- */ .ph { position: relative; overflow: hidden; border-radius: var(--r-lg); background: linear-gradient(135deg, oklch(0.26 0.05 16), oklch(0.17 0.03 10)), repeating-linear-gradient(45deg, oklch(1 0 0 / 0.03) 0 2px, transparent 2px 12px); background-blend-mode: overlay; border: 1px solid var(--line); display: grid; place-items: center; } .ph::after { content: attr(data-label); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; color: oklch(0.78 0.02 30 / 0.6); text-transform: uppercase; padding: 0 20px; text-align: center; } .divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); } .section-head { max-width: 820px; } .section-head .h2 { margin-top: 16px; } .section-head .lead { margin-top: 22px; } /* ---------- Effect toggles (driven by Tweaks) ---------- */ html.no-reveal .reveal { opacity: 1 !important; transform: none !important; } body.no-grain::after { display: none; } body.no-halo .heroB__halo { display: none; } /* ---------- Image slots (dark theme via ::part) ---------- */ image-slot { display: block; } image-slot::part(frame) { background: linear-gradient(135deg, oklch(0.26 0.05 16), oklch(0.16 0.03 10)), repeating-linear-gradient(45deg, oklch(1 0 0 / 0.03) 0 2px, transparent 2px 12px); background-blend-mode: overlay; } image-slot::part(empty) { color: oklch(0.82 0.02 30 / 0.62); font-family: var(--mono); } image-slot::part(ring) { border-color: oklch(0.7 0.04 20 / 0.28); } /* ---------- Language switcher ---------- */ .langsw { position: relative; display: inline-flex; } .langsw__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 11px; background: oklch(1 0 0 / 0.04); border: 1px solid var(--line); color: var(--ink-soft); font: 600 12.5px/1 var(--mono, monospace); letter-spacing: 0.04em; cursor: pointer; backdrop-filter: blur(8px); transition: border-color .2s, background .2s, color .2s; } .langsw__btn:hover { color: var(--ink); border-color: var(--accent, oklch(0.7 0.18 12)); background: oklch(1 0 0 / 0.07); } .langsw__btn svg { opacity: 0.85; } .langsw__chev { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.6; } .langsw__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 168px; padding: 6px; margin: 0; list-style: none; background: oklch(0.19 0.03 12 / 0.96); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(16px); box-shadow: 0 18px 50px oklch(0 0 0 / 0.5); animation: langsw-in .16s ease; } @keyframes langsw-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .langsw__opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-soft); font: 500 14px/1 var(--sans, inherit); text-align: left; cursor: pointer; transition: background .15s, color .15s; } .langsw__opt:hover { background: oklch(1 0 0 / 0.06); color: var(--ink); } .langsw__opt.on { color: var(--ink); } .langsw__opt.on .langsw__code { background: var(--accent, oklch(0.62 0.2 12)); color: #fff; border-color: transparent; } .langsw__code { display: inline-grid; place-items: center; min-width: 30px; padding: 3px 5px; border-radius: 6px; border: 1px solid var(--line); font: 600 11px/1 var(--mono, monospace); letter-spacing: 0.04em; color: var(--ink-faint, var(--ink-soft)); } .langsw__name { font-size: 14px; } @media (max-width: 720px) { .langsw__btn .langsw__cur { display: none; } .langsw__btn { padding: 7px 8px; } }