/* Premium front/blog enhancements loaded only on front page and blog home. */ .wt-lp-brandmark { display: inline-flex; align-items: center; justify-content: center; padding: 0.45rem 0.8rem; margin: 0.8rem 0 1rem; border-radius: 999px; background: oklch(1 0 0 / 0.1); border: 1px solid oklch(1 0 0 / 0.18); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.35); } .wt-lp-brandmark img { width: auto; height: clamp(28px, 3.4vw, 44px); object-fit: contain; } .wt-lp-hero__visual { position: relative; z-index: 1; display: grid; place-items: center; min-height: clamp(320px, 48vw, 540px); isolation: isolate; } .wt-lp-hero__bg { isolation: isolate; } .wt-lp-hero__bg::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, oklch(0.18 0.05 255 / 0.52), oklch(0.18 0.04 250 / 0.18) 42%, transparent 88%); opacity: 0.26; } .wt-molecule { z-index: 1; } .wt-lp-adzone .wt-ad, .wt-lp-adwrap .wt-ad { margin-block: 1rem; backdrop-filter: blur(0); } .wt-lp-adzone .wt-ad { border: 1px solid oklch(1 0 0 / 0.22); background: linear-gradient(170deg, oklch(0.99 0.01 244 / 0.95), oklch(0.96 0.015 244 / 0.9)); } .wt-lp-adzone--hero { margin-top: clamp(1rem, 2.6vw, 1.6rem); } .wt-lp-adwrap--mid { margin-block: clamp(1.5rem, 4vw, 2.7rem); } .wt-lp-adwrap--hero, .wt-lp-adzone--hero { margin-block: clamp(1.3rem, 3.6vw, 2.4rem); } .wt-lp-adwrap--footer { margin-block: clamp(1.4rem, 4vw, 2.8rem) 0; } .wt-blog-head--luxe { position: relative; overflow: hidden; } .wt-blog-head__ambient { position: absolute; inset: -16% -4% auto; height: 240px; pointer-events: none; z-index: 0; } .wt-blog-head__orb { position: absolute; border-radius: 999px; filter: blur(48px); opacity: 0.7; transform: translateY(14px) scale(0.96); transition: transform 1.2s cubic-bezier(0.32, 0.72, 0, 1), opacity 1.2s cubic-bezier(0.32, 0.72, 0, 1); } .wt-blog-head__orb--a { width: 280px; height: 280px; left: -40px; top: -90px; background: radial-gradient(circle at 35% 35%, oklch(0.88 0.08 205 / 0.75), transparent 62%); } .wt-blog-head__orb--b { width: 360px; height: 360px; right: -60px; top: -120px; background: radial-gradient(circle at 60% 35%, oklch(0.74 0.13 220 / 0.46), transparent 64%); } .wt-blog-head--luxe .wt-wrap { position: relative; z-index: 1; } .wt-blog-head.is-live .wt-blog-head__orb { opacity: 0.95; transform: translateY(0) scale(1); } /* Safe default: always visible. The hidden pre-reveal state only applies once main.js has confirmed JS is actually running (adds .js to ), so a slow/blocked/erroring reveal script never leaves real content invisible. */ [data-blog-reveal] { opacity: 1; } .js [data-blog-reveal] { opacity: 0; transform: translateY(22px); filter: blur(5px); transition: transform 0.85s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.85s cubic-bezier(0.32, 0.72, 0, 1), filter 0.85s cubic-bezier(0.32, 0.72, 0, 1); } .js [data-blog-reveal].is-live { opacity: 1; transform: none; filter: none; } @media (max-width: 919px) { .wt-lp-hero__visual { min-height: 300px; } .wt-lp-brandmark { padding-inline: 0.6rem; } } @media (max-width: 767px) { .wt-lp-hero__visual { min-height: 260px; } .wt-blog-head__ambient { inset: -24% -20% auto; height: 180px; } .wt-blog-head__orb--a, .wt-blog-head__orb--b { filter: blur(36px); } } @media (prefers-reduced-motion: reduce) { .wt-hero3d-canvas, .wt-blog-head__orb, [data-blog-reveal] { transition: none; } .wt-hero3d-canvas { opacity: 0.55; } [data-blog-reveal] { opacity: 1; transform: none; filter: none; } }