@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;700;900&family=JetBrains+Mono:wght@400;700&display=swap'); :root { --bg: #000; --ink: #fff; --dim: #777; --hair: rgba(255, 255, 255, 0.18); --hair-strong: rgba(255, 255, 255, 0.32); --glow: 0 1px 2px rgba(0,0,0,0.4), 0 4px 24px rgba(0,0,0,0.55); } * { box-sizing: border-box } html, body { margin: 0; padding: 0; height: 100%; width: 100%; background: var(--bg); color: var(--ink); font-family: 'Montserrat', system-ui, sans-serif; font-weight: 300; overflow: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* film grain + subtle vignette, very gentle */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.65) 100%); z-index: 6; } body::after { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 3px 3px; mix-blend-mode: overlay; opacity: 0.5; z-index: 5; } .stage { position: fixed; inset: 0; display: flex; padding: 8vh 8vw; z-index: 2; } /* --- Brand lockup (top-left) -------------------------------------------- */ /* Canonical Rössl / co-creation lockup: filled-silhouette horse + the wordmark "Rössl" in Montserrat Thin (100) with the "co-creation" descriptor in Montserrat 200 below it. The mark is the official CI rearing-horse silhouette (derived from Rössl-only-black). */ .brand { position: fixed; top: 4.5vh; left: 5.5vw; display: flex; align-items: center; gap: 1.1vw; z-index: 10; color: var(--ink); } .brand .horse-mark { width: 3.8vh; height: 4.55vh; background: currentColor; -webkit-mask: url('/horse-filled.png') center/contain no-repeat; mask: url('/horse-filled.png') center/contain no-repeat; flex: 0 0 auto; } .brand .wordmark { line-height: 1 } .brand .wordmark .name { font-weight: 100; font-size: 1.65vw; letter-spacing: -0.015em; line-height: 0.95; color: var(--ink); } .brand .wordmark .desc { font-weight: 200; font-size: 0.62vw; letter-spacing: 0.04em; line-height: 1; margin-top: 0.6vh; color: var(--ink); opacity: 0.85; } /* When the brand sits over a photo / video, give it a subtle drop so it stays readable without a backplate. Slides set this on when .bg-photo is present (or we cascade from a wrapper). */ body.on-media .brand, body.on-media .tag { text-shadow: var(--glow); } body.on-media .brand .horse-mark { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55)) drop-shadow(0 4px 18px rgba(0,0,0,0.45)); } body.on-media .footer-strip { background: linear-gradient(to right, transparent, var(--hair-strong) 30%, var(--hair-strong) 70%, transparent); height: 1px; } /* --- Slide marker (bottom-right) ---------------------------------------- */ .tag { position: fixed; bottom: 4.5vh; right: 5.5vw; font-size: 0.7vw; letter-spacing: 0.5em; text-transform: uppercase; color: var(--dim); z-index: 10; font-weight: 400; display: flex; align-items: baseline; gap: 0; } .tag .num { color: var(--ink); font-weight: 700; margin-right: 0.7em; letter-spacing: 0.1em; } /* --- Footer hairline ---------------------------------------------------- */ /* On plain dark slides, an even hair line. On photo slides it gets the centered gradient via .on-media (see above). */ .footer-strip { position: fixed; bottom: 0; left: 0; right: 0; height: 1px; background: var(--hair); z-index: 3; } /* --- Hero horse utility -------------------------------------------------- */ /* The big hero silhouette used on title + outro. Uses the filled silhouette PNG mask for stronger visual weight than the outline mark in the chrome. */ .hero-horse { background: currentColor; -webkit-mask: url('/horse-filled.png') center/contain no-repeat; mask: url('/horse-filled.png') center/contain no-repeat; flex: 0 0 auto; } /* --- Photo / video background utility ----------------------------------- */ .bg-photo { position: fixed; inset: 0; z-index: 0; background: #000 center/cover no-repeat; } .bg-photo::after { content: ""; position: fixed; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.7) 100%); z-index: 1; } .bg-photo--bottom::after { background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 35%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.5) 100%); } .bg-photo--vignette::after { background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.85) 100%); } /* --- Animations --------------------------------------------------------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(2.5vh) } to { opacity: 1; transform: none } } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes drift { 0% { transform: translateX(-1vw) translateY(0) } 50% { transform: translateX(1vw) translateY(-0.6vw) } 100% { transform: translateX(-1vw) translateY(0) } } @keyframes kenBurns { 0% { transform: scale(1.02) translate(0,0) } 50% { transform: scale(1.08) translate(-1.2%, -0.8%) } 100% { transform: scale(1.02) translate(0,0) } } @keyframes growBar { from { transform: scaleX(0) } to { transform: scaleX(1) } } @keyframes pulse { 0%, 100% { opacity: 0.35 } 50% { opacity: 1 } } .fade > * { animation: fadeUp 1.1s cubic-bezier(.2,.7,.2,1) both } .fade > *:nth-child(1) { animation-delay: 0.05s } .fade > *:nth-child(2) { animation-delay: 0.20s } .fade > *:nth-child(3) { animation-delay: 0.40s } .fade > *:nth-child(4) { animation-delay: 0.60s } .fade > *:nth-child(5) { animation-delay: 0.80s } .fade > *:nth-child(6) { animation-delay: 1.00s } .fade > *:nth-child(7) { animation-delay: 1.20s } .fade > *:nth-child(8) { animation-delay: 1.40s } /* --- Typography --------------------------------------------------------- */ .eyebrow { font-weight: 400; font-size: 0.95vw; letter-spacing: 0.5em; text-transform: uppercase; color: var(--dim); } .kicker { font-weight: 200; font-size: 1.4vw; letter-spacing: 0.55em; text-transform: uppercase; color: var(--dim); } .title { font-weight: 100; font-size: 11vw; line-height: 0.9; letter-spacing: -0.04em; color: var(--ink); } .title-md { font-weight: 100; font-size: 7.2vw; line-height: 0.95; letter-spacing: -0.025em; color: var(--ink); } .lead { font-weight: 200; font-size: 1.7vw; line-height: 1.4; max-width: 42em; color: var(--ink); opacity: 0.92; } .micro { font-weight: 400; font-size: 0.85vw; letter-spacing: 0.32em; text-transform: uppercase; color: var(--dim); } .date-strong { font-weight: 100; font-size: 3.4vw; color: var(--ink); letter-spacing: -0.005em; line-height: 1; } /* Headlines on photo backgrounds get a soft text-shadow for legibility */ body.on-media .title, body.on-media .title-md, body.on-media .lead, body.on-media .date-strong, body.on-media .eyebrow { text-shadow: var(--glow); } /* --- Decorative bars ---------------------------------------------------- */ .rule { height: 1px; background: var(--ink); opacity: 0.4; width: 12vw; margin: 1.6vh 0; transform-origin: left; animation: growBar 1.4s 0.3s cubic-bezier(.2,.7,.2,1) both; } .accent { height: 1px; background: var(--ink); opacity: 0.9; width: 6vw; margin: 1.6vh 0; transform-origin: left; animation: growBar 1.2s 0.5s cubic-bezier(.2,.7,.2,1) both; } /* --- Light theme: inverted (black on white) ----------------------------- */ /* Toggled by adding class="light" on — typically done by the loop container for alternating dark/light variants. */ html.light { --bg: #fff; --ink: #0a0a0a; --dim: #6a6a6a; --hair: rgba(0, 0, 0, 0.16); --hair-strong: rgba(0, 0, 0, 0.32); --glow: 0 1px 2px rgba(255,255,255,0.55), 0 4px 24px rgba(255,255,255,0.45); } html.light body { background: var(--bg); color: var(--ink) } html.light body::before { background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.12) 100%); } html.light body::after { background-image: radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px); opacity: 0.4; } /* on-media slides: flip the dark overlay to a bright wash, and brighten the photo. The .bg-photo image stays — the gradient inverts. */ html.light body.on-media .bg-photo { filter: brightness(1.05) saturate(0.55) contrast(0.9); } html.light body.on-media .bg-photo::after { background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.45) 45%, rgba(255,255,255,0.85) 100%); } html.light body.on-media .brand .horse-mark { filter: drop-shadow(0 1px 2px rgba(255,255,255,0.6)) drop-shadow(0 4px 18px rgba(255,255,255,0.4)); } /* Decorative bits that hardcoded white in dark theme need light flips */ html.light .ghost-horse { background: #000 !important; opacity: 0.05 !important } html.light .pulse .bar { background: #000 !important; opacity: 0.22 !important } html.light .moon { background: radial-gradient(circle at 35% 30%, rgba(0,0,0,0.18), rgba(0,0,0,0.04) 60%, transparent) !important; border-color: var(--hair) !important; } /* Pills/cards/options/cards on options use rgba(255,255,255,0.02) — invert */ html.light .opt, html.light .card { background: rgba(0,0,0,0.025) !important }