/* ============================================================ Wisbid expressive tweaks — three feel-reshaping knobs. Applied via [data-tweak-*] on the element. ============================================================ */ /* ---------- MOOD ---------- */ /* editorial (default) — warm-light navy on near-white, current site */ /* frosted — softer, glassy mid-day pearl tones */ html[data-tweak-mood="frosted"] { --wb-surface-page: #F6F8FB; --wb-surface-tint: #ECF0F4; --wb-surface-mist: #DEE5ED; --wb-border: rgba(11, 31, 59, 0.10); --wb-border-strong: rgba(11, 31, 59, 0.16); } html[data-tweak-mood="frosted"] body { background: radial-gradient(ellipse 60% 50% at 10% 0%, rgba(63, 120, 184, 0.10), transparent 65%), radial-gradient(ellipse 60% 50% at 90% 30%, rgba(232, 163, 61, 0.06), transparent 70%), linear-gradient(180deg, #F6F8FB 0%, #ECF0F4 100%); } html[data-tweak-mood="frosted"] body::before { background-image: repeating-linear-gradient(to right, rgba(11,31,59,0.040) 0, rgba(11,31,59,0.040) 1px, transparent 1px, transparent 32px), repeating-linear-gradient(to bottom, rgba(11,31,59,0.040) 0, rgba(11,31,59,0.040) 1px, transparent 1px, transparent 32px); } html[data-tweak-mood="frosted"] .lp-nav { background: rgba(246, 248, 251, 0.75); } html[data-tweak-mood="frosted"] .lp-nav.is-scrolled { background: rgba(246, 248, 251, 0.92); } html[data-tweak-mood="frosted"] .lp-halo { background: radial-gradient(ellipse 60% 50% at 50% 8%, rgba(63, 120, 184, 0.14), transparent 70%), linear-gradient(180deg, #F6F8FB 0%, #DEE5ED 60%, #F6F8FB 100%); } html[data-tweak-mood="frosted"] .lp-hero-mockup, html[data-tweak-mood="frosted"] .lp-halo-tile, html[data-tweak-mood="frosted"] .lp-feat-card, html[data-tweak-mood="frosted"] .sp-feature, html[data-tweak-mood="frosted"] .lp-story-tile { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } /* midnight — dark mode inversion */ html[data-tweak-mood="midnight"] { --wb-surface-page: #07142A; --wb-surface-tint: #0B1F3B; --wb-surface-mist: #102E55; --wb-surface-card: #0E2548; --wb-border: rgba(255, 255, 255, 0.08); --wb-border-strong: rgba(255, 255, 255, 0.16); --wb-text-primary: #ECF0F4; --wb-text-secondary: #C5D0DE; --wb-text-muted: #9DBADC; color-scheme: dark; } html[data-tweak-mood="midnight"] body { background: var(--wb-surface-page); color: var(--wb-text-primary); } html[data-tweak-mood="midnight"] body::before { background-color: var(--wb-surface-page); background-image: repeating-linear-gradient(to right, rgba(255,255,255,0.045) 0, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 32px), repeating-linear-gradient(to bottom, rgba(255,255,255,0.045) 0, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 32px); } html[data-tweak-mood="midnight"] h1, html[data-tweak-mood="midnight"] h2, html[data-tweak-mood="midnight"] h3, html[data-tweak-mood="midnight"] h4, html[data-tweak-mood="midnight"] h5, html[data-tweak-mood="midnight"] h6, html[data-tweak-mood="midnight"] .lp-section h2, html[data-tweak-mood="midnight"] .lp-hero h1, html[data-tweak-mood="midnight"] .lp-halo-header h2, html[data-tweak-mood="midnight"] .sp-hero h1 { color: #fff; } html[data-tweak-mood="midnight"] p, html[data-tweak-mood="midnight"] .lede, html[data-tweak-mood="midnight"] .lp-section .lede, html[data-tweak-mood="midnight"] .lp-halo-header p { color: var(--wb-text-secondary); } html[data-tweak-mood="midnight"] .lp-nav { background: rgba(7, 20, 42, 0.72); border-bottom-color: var(--wb-border); } html[data-tweak-mood="midnight"] .lp-nav.is-scrolled { background: rgba(7, 20, 42, 0.92); } html[data-tweak-mood="midnight"] .lp-nav-link { color: rgba(255,255,255,0.78); } html[data-tweak-mood="midnight"] .lp-nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; } html[data-tweak-mood="midnight"] .lp-logo, html[data-tweak-mood="midnight"] .lp-logo a { color: #fff; } html[data-tweak-mood="midnight"] .lp-halo, html[data-tweak-mood="midnight"] .lp-section, html[data-tweak-mood="midnight"] .lp-story.is-static, html[data-tweak-mood="midnight"] .sp-hero, html[data-tweak-mood="midnight"] .lp-pricing, html[data-tweak-mood="midnight"] .lp-glance { background: var(--wb-surface-page); } html[data-tweak-mood="midnight"] .lp-halo { background: radial-gradient(ellipse 60% 50% at 50% 8%, rgba(63, 120, 184, 0.22), transparent 70%), linear-gradient(180deg, var(--wb-surface-page) 0%, var(--wb-surface-tint) 60%, var(--wb-surface-page) 100%); } html[data-tweak-mood="midnight"] .lp-halo-tile, html[data-tweak-mood="midnight"] .lp-feat-card, html[data-tweak-mood="midnight"] .sp-feature, html[data-tweak-mood="midnight"] .lp-story-tile, html[data-tweak-mood="midnight"] .lp-hero-mockup { background: var(--wb-surface-card); border-color: var(--wb-border); color: #fff; } html[data-tweak-mood="midnight"] .lp-feat-card h3, html[data-tweak-mood="midnight"] .lp-story-tile h3, html[data-tweak-mood="midnight"] .sp-feature h4 { color: #fff; } html[data-tweak-mood="midnight"] .lp-feat-card p, html[data-tweak-mood="midnight"] .lp-story-tile p, html[data-tweak-mood="midnight"] .sp-feature p { color: var(--wb-text-secondary); } html[data-tweak-mood="midnight"] .lp-btn-ghost { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.22); color: #fff; } html[data-tweak-mood="midnight"] .lp-btn-primary { background: #fff; color: var(--wb-navy-900); border-color: #fff; } html[data-tweak-mood="midnight"] .lp-eyebrow { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.78); } /* ---------- VOICE — heading rhythm + tracking ---------- */ /* calm (default) — current Manrope editorial */ /* bold — tighter tracking, heavier weight, larger heroes */ html[data-tweak-voice="bold"] { --wb-display-tracking: -0.05em; --wb-display-weight: 700; } html[data-tweak-voice="bold"] .lp-hero h1, html[data-tweak-voice="bold"] .lp-section h2, html[data-tweak-voice="bold"] .lp-section h2.is-large, html[data-tweak-voice="bold"] .lp-halo-header h2, html[data-tweak-voice="bold"] .lp-story-title, html[data-tweak-voice="bold"] .sp-hero h1, html[data-tweak-voice="bold"] .lp-cta h2 { font-weight: 700; letter-spacing: -0.05em; } html[data-tweak-voice="bold"] .lp-hero h1 { font-size: clamp(48px, 8vw, 116px); } html[data-tweak-voice="bold"] .lp-section h2.is-large { font-size: clamp(48px, 6vw, 92px); } /* quiet — softer weight, more breathing space */ html[data-tweak-voice="quiet"] .lp-hero h1, html[data-tweak-voice="quiet"] .lp-section h2, html[data-tweak-voice="quiet"] .lp-section h2.is-large, html[data-tweak-voice="quiet"] .lp-halo-header h2, html[data-tweak-voice="quiet"] .lp-story-title, html[data-tweak-voice="quiet"] .sp-hero h1, html[data-tweak-voice="quiet"] .lp-cta h2 { font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; } html[data-tweak-voice="quiet"] .lp-hero h1 { font-size: clamp(40px, 6.4vw, 88px); } html[data-tweak-voice="quiet"] .lp-section h2.is-large { font-size: clamp(40px, 5vw, 76px); } html[data-tweak-voice="quiet"] .lede, html[data-tweak-voice="quiet"] .lp-hero-lede { font-weight: 400; line-height: 1.7; } html[data-tweak-voice="quiet"] .lp-section { padding-block: clamp(112px, 12vw, 180px); } /* ---------- MOTION — tempo + reveal behaviour ---------- */ /* lively (default) — current animations + scroll reveals */ /* easeful — slower transitions, longer reveals */ html[data-tweak-motion="easeful"] * { transition-duration: 600ms !important; } html[data-tweak-motion="easeful"] .lp-reveal { transition-duration: 1100ms !important; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important; } html[data-tweak-motion="easeful"] [class*="lp-vortex-cue"], html[data-tweak-motion="easeful"] [class*="lp-scroll-cue"] { animation-duration: 4s !important; } /* off — kill all loops, fade reveals to instant */ html[data-tweak-motion="off"] *, html[data-tweak-motion="off"] *::before, html[data-tweak-motion="off"] *::after { animation: none !important; transition: none !important; } html[data-tweak-motion="off"] .lp-reveal { opacity: 1 !important; transform: none !important; } html[data-tweak-motion="off"] .fv2-typing i, html[data-tweak-motion="off"] .fv2-cp-caret, html[data-tweak-motion="off"] .fv2-cp-caret--ai, html[data-tweak-motion="off"] .lp-halo-tile { animation: none !important; }