/* ============================================================ HONEY WAX — landing styles Direction (palette) is set via [data-direction] on , accent via [data-accent], grain via [data-grain]. ============================================================ */ :root { /* type */ --serif: "Cormorant Garamond", Georgia, serif; --sans: "Hanken Grotesk", system-ui, sans-serif; --mono: "Space Mono", "SFMono-Regular", monospace; /* brand: navy #14273B · amber #E4A03C · ocean #2B87B7 · cream #EDE4DF */ /* accent (overridden by [data-accent]) */ --accent: oklch(0.755 0.125 72); /* honey amber */ --accent-deep: oklch(0.60 0.12 64); --accent-soft: oklch(0.755 0.125 72 / 0.16); /* base palette (overridden by [data-direction]) */ --bg: oklch(0.984 0.006 80); --bg-2: oklch(0.962 0.01 78); --surface: oklch(1 0 0); --ink: oklch(0.275 0.045 252); /* brand navy */ --ink-soft: oklch(0.46 0.04 252); --line: oklch(0.275 0.045 252 / 0.15); --line-soft: oklch(0.275 0.045 252 / 0.07); --maxw: 1180px; --gut: clamp(20px, 5vw, 72px); } /* ---------- accents ---------- */ [data-accent="honey"] { --accent: oklch(0.755 0.125 72); --accent-deep: oklch(0.60 0.12 64); --accent-soft: oklch(0.755 0.125 72 / 0.16); } [data-accent="ocean"] { --accent: oklch(0.585 0.105 237); --accent-deep: oklch(0.475 0.10 240); --accent-soft: oklch(0.585 0.105 237 / 0.15); } [data-accent="forest"] { --accent: oklch(0.78 0.135 150); --accent-deep: oklch(0.64 0.13 152); --accent-soft: oklch(0.78 0.135 150 / 0.18); } [data-accent="tide"] { --accent: oklch(0.80 0.105 205); --accent-deep: oklch(0.66 0.11 210); --accent-soft: oklch(0.80 0.105 205 / 0.18); } /* ---------- directions ---------- */ [data-direction="premium"] { --bg: oklch(0.987 0.005 82); --bg-2: oklch(0.969 0.008 80); --surface: oklch(1 0 0); --ink: oklch(0.255 0.045 252); --ink-soft: oklch(0.45 0.04 252); --line: oklch(0.255 0.045 252 / 0.13); --line-soft: oklch(0.255 0.045 252 / 0.06); } [data-direction="kraft"] { --bg: oklch(0.885 0.03 74); --bg-2: oklch(0.85 0.036 72); --surface: oklch(0.93 0.024 78); --ink: oklch(0.275 0.045 252); --ink-soft: oklch(0.43 0.04 252); --line: oklch(0.275 0.045 252 / 0.18); --line-soft: oklch(0.275 0.045 252 / 0.09); } [data-direction="riviera"] { --bg: oklch(0.972 0.013 218); --bg-2: oklch(0.948 0.02 216); --surface: oklch(0.992 0.006 220); --ink: oklch(0.285 0.045 248); --ink-soft: oklch(0.45 0.04 244); --line: oklch(0.285 0.045 248 / 0.14); --line-soft: oklch(0.285 0.045 248 / 0.07); } [data-direction="botanique"] { --bg: oklch(0.955 0.022 132); --bg-2: oklch(0.928 0.03 134); --surface: oklch(0.978 0.014 130); --ink: oklch(0.275 0.038 142); --ink-soft: oklch(0.43 0.034 142); --line: oklch(0.275 0.038 142 / 0.15); --line-soft: oklch(0.275 0.038 142 / 0.07); } /* dark forest–ocean world (default) */ [data-direction="abyss"] { --bg: oklch(0.155 0.022 196); --bg-2: oklch(0.205 0.028 198); --surface: oklch(0.235 0.03 198 / 0.46); /* frosted glass */ --surface-solid: oklch(0.205 0.028 198); --ink: oklch(0.955 0.014 150); --ink-soft: oklch(0.80 0.022 175); --line: oklch(0.955 0.014 150 / 0.16); --line-soft: oklch(0.955 0.014 150 / 0.07); } /* ---------- reset ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); background: var(--bg); color: var(--ink); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 0.5s ease, color 0.5s ease; } /* persistent cinematic video background behind everything */ #hw-video-bg { position: fixed; inset: 0; z-index: 0; width: 100vw; height: 100vh; overflow: hidden; background: #07171a; --tint: 1; } #hw-video-bg .bgvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform, opacity; } /* ocean is revealed through a wavy mask that rises like a tide */ #hw-ocean-wrap { position: absolute; inset: 0; opacity: 0; -webkit-mask-image: var(--wave-mask); mask-image: var(--wave-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 200vh; mask-size: 100% 200vh; -webkit-mask-position: 0 20vh; mask-position: 0 20vh; will-change: opacity, -webkit-mask-position, mask-position; } #hw-ocean-wrap .bgvid { opacity: 1; } :root { --wave-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1440'%20height='200'%20viewBox='0%200%201440%20200'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,100%20C240,55%20480,145%20720,100%20S1200,55%201440,100%20L1440,200%20L0,200%20Z'%20fill='white'/%3E%3C/svg%3E"); } /* glowing foam crest that travels with the tide line */ #hw-waterline { position: absolute; left: -10%; right: -10%; height: 180px; top: 120vh; transform: translateY(-50%); opacity: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1440'%20height='180'%20viewBox='0%200%201440%20180'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,92%20C240,47%20480,137%20720,92%20S1200,47%201440,92'%20fill='none'%20stroke='%23cfeede'%20stroke-width='2.5'%20opacity='0.9'/%3E%3Cpath%20d='M0,100%20C240,55%20480,145%20720,100%20S1200,55%201440,100%20L1440,180%20L0,180%20Z'%20fill='%23bfe6da'%20opacity='0.18'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 50% 100%; filter: drop-shadow(0 0 18px oklch(0.86 0.10 190 / 0.55)) drop-shadow(0 0 40px oklch(0.80 0.10 200 / 0.30)); animation: hwFoamDrift 9s linear infinite; z-index: 2; } @keyframes hwFoamDrift { to { background-position-x: 720px; } } #hw-video-tint { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, oklch(0.16 0.03 200 / calc(0.30 * var(--tint))), transparent 55%), linear-gradient(180deg, oklch(0.12 0.03 200 / calc(0.50 * var(--tint))) 0%, oklch(0.10 0.025 205 / calc(0.30 * var(--tint))) 42%, oklch(0.10 0.03 210 / calc(0.62 * var(--tint))) 100%); } #root { position: relative; z-index: 1; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent-soft); } /* grain */ [data-grain="on"] body::after { content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.045; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- shared atoms ---------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); } .eyebrow { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-deep); display: inline-flex; align-items: center; gap: 0.6em; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); display: inline-block; } .display { font-family: var(--serif); font-weight: 500; line-height: 0.98; letter-spacing: -0.012em; text-wrap: balance; } .btn { font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: 0.01em; padding: 14px 26px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; transition: color 0.3s ease, border-color 0.25s ease, transform 0.25s ease; display: inline-flex; align-items: center; gap: 0.5em; white-space: nowrap; position: relative; overflow: hidden; isolation: isolate; } .btn > * { position: relative; z-index: 1; } /* liquid water: fully hidden BELOW the button at rest (no visible seam), rises with a curved surface on hover. Painted behind the label. */ .btn::before { content: ""; position: absolute; left: -25%; right: -25%; top: 100%; height: 260%; z-index: -1; border-radius: 46% 46% 0 0 / 32% 32% 0 0; transform: translateY(0); transition: transform 0.6s cubic-bezier(0.22, 0.78, 0.24, 1); pointer-events: none; } .btn:hover::before { transform: translateY(-132%); } .btn:active { transform: translateY(1px); } /* keep the text legible above the rising water */ .btn { color: var(--ink); } .btn-label, .btn > * { position: relative; z-index: 2; } .btn-primary { background: var(--accent); color: oklch(0.16 0.02 196); } .btn-primary::before { background: var(--accent-deep); } .btn-primary:hover { color: oklch(0.98 0.02 150); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost::before { background: var(--accent-deep); } .btn-ghost:hover { color: oklch(0.98 0.02 150); border-color: var(--accent-deep); } section { position: relative; } /* reveal on scroll */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.in { opacity: 1; transform: none; } /* image slot styling */ image-slot { --slot-bg: var(--bg-2); background: var(--bg-2); border: 1px solid var(--line); }