/* ============================================================ Everything is namespaced under #rotator so it can drop into an existing page (with its own h1/h2/.btn2/.block styles) without leaking rules onto the rest of the site, and without assuming it owns . ============================================================ */ #rotator{ --ink: #F2EDE4; --charcoal: #14120F; --charcoal-2: #1D1A15; --brass: #B08D57; --rust: #8B4A3D; --hair: rgba(242,237,228,.16); --dwell: 3.8s; --xpand: 5.4s; max-width: 900px; /* remove/raise this if .block already constrains width */ } #rotator, #rotator *{ box-sizing:border-box; } #rotator .stage{ position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; background:var(--charcoal-2); border:1px solid var(--hair); box-shadow:0 40px 80px -30px rgba(0,0,0,.7); font-family:'Inter',sans-serif; } /* fallback for browsers without aspect-ratio support */ @supports not (aspect-ratio: 16/10){ #rotator .stage{ height:0; padding-bottom:62.5%; } #rotator .stage > *{ position:absolute; } } /* ---------------- image layers ---------------- */ #rotator .frame{ position:absolute; inset:0; opacity:0; filter:saturate(.85) contrast(1.02) blur(0px) brightness(1); transition:opacity 900ms cubic-bezier(.4,0,.2,1), filter 900ms cubic-bezier(.4,0,.2,1); will-change:opacity, filter; } #rotator .frame img{ width:100%;height:100%;object-fit:cover; display:block; transform:scale(1); transform-origin:var(--xo,50%) var(--yo,50%); transition:transform 900ms cubic-bezier(.4,0,.2,1); } #rotator .frame.active{ opacity:1; z-index:2; } #rotator .frame.active img{ animation:blockAdsExpand var(--xpand) cubic-bezier(.22,.61,.36,1) forwards; } @keyframes blockAdsExpand{ from{ transform:scale(1); } to { transform:scale(1.18); } } #rotator .stage.text-mode .frame.active{ filter:saturate(.6) contrast(1) blur(9px) brightness(.42); } #rotator .stage.text-mode .frame.active img{ transform:scale(1.24) !important; animation-play-state:paused; } #rotator .scrim{ position:absolute; inset:0; z-index:3; pointer-events:none; background: linear-gradient(180deg, rgba(20,18,15,0) 45%, rgba(20,18,15,.92) 100%), linear-gradient(90deg, rgba(20,18,15,.55) 0%, rgba(20,18,15,0) 42%); opacity:1; transition:opacity 600ms ease; } #rotator .stage.text-mode .scrim{ opacity:.35; } #rotator .grain{ position:absolute; inset:0; z-index:9; pointer-events:none; mix-blend-mode:overlay; opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } #rotator .vignette{ position:absolute; inset:0; z-index:9; pointer-events:none; box-shadow: inset 0 0 140px 40px rgba(0,0,0,.55); } /* ---------------- chrome (labels / counter) ---------------- */ #rotator .eyebrow{ position:absolute; top:22px; left:26px; z-index:10; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); margin:0; font-weight:400; line-height:1; } #rotator .eyebrow::before{ content:'●'; font-size:8px; margin-right:8px; color:var(--rust); } #rotator .index{ position:absolute; top:22px; right:26px; z-index:10; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.12em; color:var(--ink); opacity:.75; display:flex; gap:6px; align-items:baseline; } #rotator .index b{ color:var(--brass); font-weight:500; } #rotator .timeline{ position:absolute; left:0; right:0; bottom:0; height:2px; z-index:10; background:var(--hair); margin:0; } #rotator .timeline i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--rust),var(--brass)); } #rotator .timeline i.run{ animation:blockAdsFill var(--dwell) linear forwards; } @keyframes blockAdsFill{ from{width:0%;} to{width:100%;} } #rotator .dots{ position:absolute; z-index:10; bottom:14px; right:26px; display:flex; gap:7px; margin:0; } #rotator .dots button{ width:7px;height:7px;border-radius:50%; border:1px solid var(--hair); background:transparent; padding:0; cursor:pointer; transition:background 250ms, border-color 250ms, transform 250ms; } #rotator .dots button.on{ background:var(--brass); border-color:var(--brass); transform:scale(1.15); } /* ---------------- small image-phase caption ---------------- */ #rotator .caption{ position:absolute; left:26px; right:26px; bottom:34px; z-index:6; max-width:60%; margin:0; opacity:0; transform:translateY(14px); transition:opacity 500ms ease, transform 500ms cubic-bezier(.22,.61,.36,1); } #rotator .stage.image-mode .caption{ opacity:1; transform:translateY(0); } #rotator .caption span{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); opacity:.65; } /* ================= TEXT TAKEOVER ================= */ #rotator .takeover{ position:absolute; inset:0; z-index:8; display:flex; align-items:center; justify-content:center; padding:14% 9%; clip-path:circle(0% at 50% 55%); transition:clip-path 900ms cubic-bezier(.65,0,.35,1); pointer-events:none; } #rotator .takeover.active{ clip-path:circle(120% at 50% 55%); } #rotator .tw-glow{ position:absolute; width:60%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(176,141,87,.35), rgba(176,141,87,0) 70%); filter:blur(10px); left:20%; top:10%; animation:blockAdsDrift 9s ease-in-out infinite; } @keyframes blockAdsDrift{ 0%,100%{ transform:translate(0,0) scale(1); } 33% { transform:translate(6%,-8%) scale(1.12); } 66% { transform:translate(-8%,6%) scale(.94); } } #rotator .tw-inner{ position:relative; z-index:2; text-align:left; max-width:100%; animation:blockAdsIdle 6.5s ease-in-out infinite; } @keyframes blockAdsIdle{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-5px) rotate(-.35deg); } } #rotator .tw-inner h1{ margin:0; display:flex; flex-wrap:wrap; font-family:'Fraunces',serif; font-weight:600; font-style:italic; font-size:clamp(24px,5vw,48px); line-height:1.03; color:var(--ink); } #rotator .tw-inner p{ margin:16px 0 0; max-width:44ch; font-family:'Inter',sans-serif; font-size:14.5px; line-height:1.55; font-weight:400; color:var(--ink); opacity:0; transform:translateY(14px); transition:opacity 550ms ease 520ms, transform 550ms cubic-bezier(.22,.61,.36,1) 520ms; } #rotator .takeover.active .tw-inner p{ opacity:.82; transform:translateY(0); } #rotator .word{ display:inline-block; overflow:hidden; margin:0 .22em .06em 0; } #rotator .word b{ display:inline-block; font-weight:inherit; font-style:inherit; transform:translateY(115%) rotate(5deg); opacity:0; transition:transform 640ms cubic-bezier(.22,.61,.36,1), opacity 420ms ease; } #rotator .takeover.active .word b{ transform:translateY(0) rotate(0deg); opacity:1; } #rotator .tw-tag{ display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); margin-bottom:14px; opacity:0; transform:translateX(-10px); transition:opacity 450ms ease 60ms, transform 450ms cubic-bezier(.22,.61,.36,1) 60ms; } #rotator .tw-tag i{ display:block; width:22px; height:1px; background:var(--brass); } #rotator .takeover.active .tw-tag{ opacity:1; transform:translateX(0); } #rotator .tw-ticker{ position:absolute; left:0; right:0; bottom:0; height:30px; overflow:hidden; border-top:1px solid var(--hair); display:flex; align-items:center; background:rgba(20,18,15,.5); } #rotator .tw-ticker .track{ display:flex; gap:40px; white-space:nowrap; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); opacity:.55; animation:blockAdsTicker 14s linear infinite; padding-left:100%; } @keyframes blockAdsTicker{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } } /* ---------------- text block below the stage ---------------- */ #rotator .ad-copy{ padding-top:22px; font-family:'Inter',sans-serif; } #rotator .ad-copy h1{ font-family:'Fraunces',serif; font-weight:600; font-size:22px; margin:0 0 8px; color:#1a1a1a; } #rotator .ad-copy h2{ font-family:'Inter',sans-serif; font-weight:400; font-size:14px; line-height:1.55; color:#555; margin:0 0 16px; } #rotator .btn2{ display:block; background:var(--brass); padding:10px 18px; font-family:'Inter',sans-serif; font-size:13px; font-weight:500; text-align:center; text-decoration:none; margin: 0 auto; } @media (prefers-reduced-motion: reduce){ #rotator .frame.active img{ animation:none; transform:scale(1.05) !important; } #rotator .timeline i.run{ animation:none; width:100%; } #rotator .tw-glow, #rotator .tw-inner, #rotator .tw-ticker .track{ animation:none !important; } }