/* ============================================================= VISIA — Base theme CSS Element defaults + global effect/helper classes ported from the prototype's and _ds. Utility classes (Tailwind) live in build/tailwind.css. Component CSS is co-located with each block. ============================================================= */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--surface); color: var(--ink); font: var(--type-body); margin: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .5s var(--ease-confident), color .5s var(--ease-confident); } @media (max-width: 760px) { html { scroll-behavior: auto; } } ::selection { background: var(--c-crea); color: var(--c-eye); } h1 { font: var(--type-h1); margin: 0; letter-spacing: var(--tracking-normal); } h2 { font: var(--type-h2); margin: 0; } h3 { font: var(--type-h3); margin: 0; } h4 { font: var(--type-h4); margin: 0; } h5 { font: var(--type-h5); margin: 0; } p { margin: 0 0 1em 0; text-wrap: pretty; } a { color: inherit; text-decoration: none; } button { font: inherit; } img { -webkit-user-drag: none; user-select: none; max-width: 100%; } *:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } /* ===== Scrollbar ===== */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--surface-2); } ::-webkit-scrollbar-thumb { background: var(--c-crea); border: 3px solid var(--surface-2); } /* ============================================================= LAYOUT HELPERS ============================================================= */ .wrap { max-width: 1480px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 72px); } /* ============================================================= INVERT CURSOR ============================================================= */ .vz-cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; width: 34px; height: 34px; border-radius: 50%; background: #fff; mix-blend-mode: difference; transform: translate(-50%, -50%) scale(1); transition: width .28s var(--ease-confident), height .28s var(--ease-confident), opacity .3s; will-change: transform; opacity: 0; } .vz-cursor.lg { width: 108px; height: 108px; } .vz-cursor.txt { width: 8px; height: 8px; } .vz-dot { position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: none; width: 5px; height: 5px; border-radius: 50%; background: #fff; mix-blend-mode: difference; transform: translate(-50%, -50%); opacity: 0; } @media (hover: hover) and (pointer: fine) { body.cursor-on, body.cursor-on a, body.cursor-on button { cursor: none; } } /* ============================================================= REVEAL / KINETIC ============================================================= */ [data-rv] { opacity: 0; transform: translateY(34px); transition: opacity .7s var(--ease-confident), transform .7s var(--ease-confident); } [data-rv].in { opacity: 1; transform: none; } [data-rv-d="1"] { transition-delay: .08s; } [data-rv-d="2"] { transition-delay: .16s; } [data-rv-d="3"] { transition-delay: .24s; } [data-rv-d="4"] { transition-delay: .32s; } [data-rv-d="5"] { transition-delay: .40s; } [data-rv="clip"] { opacity: 1; transform: translateY(10px); clip-path: inset(0 0 108% 0); transition: clip-path 1s var(--ease-confident), transform 1s var(--ease-confident); } [data-rv="clip"].in { clip-path: inset(0 0 -8% 0); transform: none; } .kinetic .kw { display: inline-block; vertical-align: bottom; line-height: inherit; } .kinetic .kwi { display: inline-block; transform: translateY(115%); transition: transform .8s var(--ease-confident); will-change: transform; } .kinetic.in .kwi { transform: none; } .mask-rise { display: inline-block; vertical-align: bottom; } .mask-rise > span { display: inline-block; transform: translateY(110%); transition: transform .8s var(--ease-confident); } .mask-rise.in > span { transform: none; } @media (prefers-reduced-motion: reduce) { [data-rv] { opacity: 1 !important; transform: none !important; clip-path: none !important; } .kinetic .kwi { transform: none !important; } html { scroll-behavior: auto; } } /* ============================================================= TYPE UTILITY CLASSES (from _ds) ============================================================= */ .display-hero { font: var(--type-display-hero); letter-spacing: var(--tracking-normal); } .serif-hero { font: var(--type-serif-hero); } .serif-lead { font: var(--type-serif-lead); } .serif-sub { font: var(--type-serif-sub); } .tagline { font: var(--type-tagline); } .eyebrow { font: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; } .footnote { font: var(--type-footnote); letter-spacing: var(--tracking-footnote); text-transform: lowercase; } .slash-label { font: var(--type-body); font-weight: 500; } .slash-label::before { content: '/ '; } /* ============================================================= BUTTONS — all squared (radius 0) ============================================================= */ .cta { font: var(--type-cta); letter-spacing: 0.02em; text-transform: uppercase; background: var(--c-crea); color: var(--c-eye); border: none; padding: 16px 28px; border-radius: 0; cursor: pointer; transition: background var(--dur-fast) var(--ease-confident), color var(--dur-fast) var(--ease-confident); } .cta:hover { background: var(--c-pupila); color: var(--c-crea); } .cta:active { background: var(--c-pupila); color: var(--c-eye); } .cta-block { font: var(--type-cta); text-transform: uppercase; background: var(--c-pupila); color: var(--c-eye); border: none; padding: 18px 28px; border-radius: 0; cursor: pointer; } .cta-block:hover { background: var(--c-crea); } .cta-ghost { font: var(--type-cta); text-transform: uppercase; background: transparent; color: var(--c-pupila); border: 2px solid var(--c-pupila); padding: 14px 26px; border-radius: 0; cursor: pointer; } .cta-ghost:hover { background: var(--c-pupila); color: var(--c-eye); } @keyframes vzfade { from { opacity: 0; } to { opacity: 1; } } @keyframes vzwheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 70% { opacity: 1; transform: translateY(12px); } 100% { opacity: 0; transform: translateY(14px); } } [hidden] { display: none !important; }