/* --------------------------------------------------------------------------- Swappable treatments. Three independent axes, set as attributes on : data-brand-style="…" colour / fill of the wordmark data-brand-motion="…" how the lockup enters data-brand-ambient="…" looping effect after it has entered data-brand-pointer="…" reaction to the mouse e.g. Open preview.html to see them all side by side, or append ?style=…&motion=…&ambient=…&pointer=… to any URL to try one. Add a new option by copying a block — nothing else needs to change. --------------------------------------------------------------------------- */ /* =========================================================================== 1. COLOUR / FILL — data-brand-style =========================================================================== */ /* "default" — flat periwinkle, as in the reference. Defined by the tokens. */ /* Soft halo around the letters. */ [data-brand-style="glow"] { --brand-shadow: 0 0 0.45em rgb(150 150 255 / 0.55), 0 0 1.4em rgb(120 120 255 / 0.35), 0 0.02em 0.5em rgb(0 0 0 / 0.35); } /* Inverts whatever is behind it — always readable, never the same twice. */ [data-brand-style="blend"] { --brand-color: #ffffff; --brand-blend: difference; --brand-shadow: none; --scrim: none; } /* Hollow letters. */ [data-brand-style="outline"] { --brand-color: transparent; --brand-stroke: 0.022em; --brand-stroke-color: #c7c7fb; --brand-shadow: none; } /* Dark type on a lightened photo. */ [data-brand-style="ink"] { --brand-color: #101010; --sub-color: #101010; --brand-shadow: none; --sub-shadow: none; --scrim: linear-gradient(rgb(255 255 255 / 0.28), rgb(255 255 255 / 0.28)); } /* Two-stop gradient across the wordmark. */ [data-brand-style="gradient"] .lockup__word { background-image: linear-gradient( 100deg, #ffffff 0%, var(--brand-color) 45%, var(--brand-color-2) 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; } /* The photo itself, seen through the letters, over a darkened copy of it. */ [data-brand-style="photo"] { --scrim: linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5)); --sub-color: #ffffff; } [data-brand-style="photo"] .lockup__word { background-image: var(--wordmark-fill, url("../img/hero-1280.jpg")); background-size: 150% auto; background-position: 50% 42%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; } /* Frosted glass plate behind the whole lockup. */ [data-brand-style="frost"] { --scrim: none; } [data-brand-style="frost"] .lockup__inner { padding: 0.45em 0.85em 0.6em; border-radius: 0.12em; background: rgb(255 255 255 / 0.10); border: 1px solid rgb(255 255 255 / 0.16); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); } /* A tinted panel with the photo showing cleanly through the letters. */ [data-brand-style="knockout"] { --scrim: none; --brand-color: #ffffff; --sub-color: #ffffff; --brand-shadow: none; --sub-shadow: none; } [data-brand-style="knockout"] .lockup__inner { padding: 0.5em 0.9em 0.65em; background: var(--knockout-panel, #1a1a2e); mix-blend-mode: multiply; } /* RGB split — a cheap chromatic aberration, no extra markup. */ [data-brand-style="chroma"] { --brand-color: #f2f2ff; --brand-shadow: -0.014em 0 0 rgb(255 0 80 / 0.8), 0.014em 0 0 rgb(0 225 255 / 0.8), 0 0.02em 0.5em rgb(0 0 0 / 0.35); } /* =========================================================================== 2. ENTRANCE — data-brand-motion Each animation targets the three lines of the lockup, staggered. =========================================================================== */ @media (prefers-reduced-motion: no-preference) { .lockup__inner > * { animation: var(--enter-duration) var(--enter-ease) backwards; animation-name: var(--enter-name, rise); } .lockup__wordmark { animation-delay: var(--enter-delay); } .lockup__tagline { animation-delay: calc(var(--enter-delay) + 100ms); } .lockup__contact { animation-delay: calc(var(--enter-delay) + 180ms); } [data-brand-motion="wipe"] { --enter-name: wipe; } [data-brand-motion="blur"] { --enter-name: blur-in; } [data-brand-motion="tracking"] { --enter-name: tracking-in; } [data-brand-motion="weight"] { --enter-name: weight-in; --enter-duration: 1400ms; } [data-brand-motion="none"] .lockup__inner > * { animation: none; } /* Per-letter stagger. main.js splits the wordmark into .lockup__ltr spans; the

itself then sits still and each letter animates instead. */ [data-brand-motion="letters"] .lockup__wordmark { animation: none; } [data-brand-motion="letters"] .lockup__ltr { display: inline-block; animation: rise var(--enter-duration) var(--enter-ease) backwards; animation-delay: calc( var(--enter-delay) + var(--i) * var(--letter-stagger) ); } } @keyframes rise { from { opacity: 0; translate: 0 0.28em; } to { opacity: 1; translate: 0 0; } } @keyframes wipe { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } } @keyframes blur-in { from { opacity: 0; filter: blur(0.16em); scale: 1.04; } to { opacity: 1; filter: blur(0); scale: 1; } } @keyframes tracking-in { from { opacity: 0; letter-spacing: 0.34em; } to { opacity: 1; letter-spacing: inherit; } } /* Only possible because Inter is loaded as a variable font. */ @keyframes weight-in { from { opacity: 0; font-variation-settings: "wght" 150; } to { opacity: 1; font-variation-settings: "wght" 700; } } /* =========================================================================== 3. AMBIENT (looping) — data-brand-ambient =========================================================================== */ @media (prefers-reduced-motion: no-preference) { /* A highlight sweeping across the letters. Implies a gradient fill. */ [data-brand-ambient="shimmer"] .lockup__word { background-image: linear-gradient( 100deg, transparent 34%, rgb(255 255 255 / 0.9) 50%, transparent 66% ), linear-gradient(var(--brand-color), var(--brand-color)); background-size: 230% 100%, 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: shimmer var(--ambient-duration) linear infinite; } /* The glow swells and settles. */ [data-brand-ambient="breathe"] .lockup__word { animation: breathe var(--ambient-duration) ease-in-out infinite; } /* The weight axis of Inter drifts — subtle, and unmistakably typographic. */ [data-brand-ambient="drift"] .lockup__word { animation: drift calc(var(--ambient-duration) * 1.6) ease-in-out infinite; } /* The photo slowly pushes in. */ [data-brand-ambient="kenburns"] .stage__photo { animation: kenburns 24s ease-in-out infinite alternate; } } @keyframes shimmer { from { background-position: 170% 0, 0 0; } to { background-position: -70% 0, 0 0; } } @keyframes breathe { 0%, 100% { text-shadow: 0 0 0.3em rgb(150 150 255 / 0.25), 0 0.02em 0.5em rgb(0 0 0 / 0.35); } 50% { text-shadow: 0 0 0.7em rgb(150 150 255 / 0.7), 0 0 1.8em rgb(120 120 255 / 0.4), 0 0.02em 0.5em rgb(0 0 0 / 0.35); } } @keyframes drift { 0%, 100% { font-variation-settings: "wght" 640; } 50% { font-variation-settings: "wght" 800; } } @keyframes kenburns { from { scale: 1; } to { scale: 1.06; } } /* =========================================================================== 4. POINTER — data-brand-pointer main.js publishes the cursor position as --mx / --my (0–1) on the stage. =========================================================================== */ /* Text and photo drift in opposite directions — a shallow sense of depth. */ [data-brand-pointer="parallax"] .lockup__inner { translate: calc((var(--mx, 0.5) - 0.5) * var(--pointer-strength) * -2) calc( var(--lockup-offset-y) + (var(--my, 0.5) - 0.5) * var(--pointer-strength) * -1 ); transition: translate 400ms cubic-bezier(0.2, 0.8, 0.2, 1); } [data-brand-pointer="parallax"] .stage__photo { translate: calc((var(--mx, 0.5) - 0.5) * var(--pointer-strength)) calc((var(--my, 0.5) - 0.5) * var(--pointer-strength) * 0.5); scale: 1.03; transition: translate 600ms cubic-bezier(0.2, 0.8, 0.2, 1); } /* A soft light that follows the cursor across the photo. */ [data-brand-pointer="spotlight"] .stage__scrim { background: radial-gradient( 34% 42% at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%), rgb(255 255 255 / 0.16) 0%, rgb(255 255 255 / 0) 100% ), var(--scrim), linear-gradient(rgb(0 0 0 / 0.3), rgb(0 0 0 / 0.3)); } @media (prefers-reduced-motion: reduce) { [data-brand-pointer="parallax"] .lockup__inner, [data-brand-pointer="parallax"] .stage__photo { translate: 0 var(--lockup-offset-y); } [data-brand-pointer="parallax"] .stage__photo { translate: 0; scale: 1; } }