/* ============================================================================ Open Dawn — the stage layer. Yannai, 2026-09-05: every page and popup should carry the depth of the landing page and the musicians screen. Looping light behind the page, texture over it, type that arrives one beat at a time, and every group of cards moving as a carousel of its own design. This file and assets/stage.js are loaded by EVERY hand-authored page, including /offer/, which never loads site.css. Everything in here is namespaced `st-` and hangs off attributes the script sets, so a page that fails to run the script is exactly the page it was yesterday. The homepage and /musicians/ are Astro pages with their own copy of this vocabulary. Vocabulary is the roster's: the aurora, the beams, the giant faint marquee, the sparks, the grain, the letter rise, the word ticker, the deck of cards with ghosts at the sides, arrows with a peek, and a sweep of light on every change so nothing on the site is ever seen to cut. Magnitudes are variables so they can be halved and doubled by eye. ========================================================================= */ :root { --st-ease: cubic-bezier(0.22, 1, 0.36, 1); --st-ease-io: cubic-bezier(0.65, 0, 0.35, 1); --st-glow: cubic-bezier(0.4, 0, 0.2, 1); --st-navy: #0F172A; --st-gold: #F0A621; --st-gold-bright: #FFD82B; --st-gold-deep: #8B6A35; --st-white: #F8FAFC; --st-muted: #B6C0D0; --st-display: 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif; /* ---- Backdrop strength, per page below ---- */ --st-aurora-op: 0.42; --st-beam-op: 0.13; --st-mq-op: 0.036; --st-grain-op: 0.11; --st-vig-op: 0.55; --st-a1: 240, 166, 33; /* the warm bloom, top left */ --st-a2: 139, 106, 53; /* the deep bloom, bottom right */ --st-a3: 255, 216, 43; /* the bright bloom, centre */ } /* The ground. The page background moves from onto a fixed layer behind it, so the light can sit between the canvas and the copy. Both html and body carried the navy, and a body with its own background paints over every negative-z layer inside it (see site.css, .hero isolation). html keeps its navy for overscroll; body gives its up. */ body[data-stage] { background: transparent !important; } /* ===================================================================== 1. The backdrop. Six decorative layers, all fixed, all behind the page. Every one only ADDS light (screen blending) except the grain, so none of them can cost contrast on the copy above. ===================================================================== */ .st-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--st-navy); contain: strict; } /* --- Aurora: three slow blooms drifting out of phase --- */ .st-aurora { position: absolute; inset: -18%; mix-blend-mode: screen; opacity: var(--st-aurora-op); } .st-aurora i { position: absolute; display: block; border-radius: 50%; filter: blur(80px); will-change: transform; } .st-aurora i:nth-child(1) { width: 58vw; height: 58vw; left: -10vw; top: -16vw; background: radial-gradient(circle, rgba(var(--st-a1), 0.55), rgba(var(--st-a1), 0) 68%); animation: stDrift1 36s var(--st-ease-io) infinite; } .st-aurora i:nth-child(2) { width: 54vw; height: 54vw; right: -12vw; bottom: -20vw; background: radial-gradient(circle, rgba(var(--st-a2), 0.62), rgba(var(--st-a2), 0) 70%); animation: stDrift2 46s var(--st-ease-io) infinite; } .st-aurora i:nth-child(3) { width: 38vw; height: 38vw; left: 36vw; top: 36vh; background: radial-gradient(circle, rgba(var(--st-a3), 0.28), rgba(var(--st-a3), 0) 72%); animation: stDrift3 29s var(--st-ease-io) infinite; } @keyframes stDrift1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(9vw, 8vh, 0) scale(1.22); } } @keyframes stDrift2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.1); } 50% { transform: translate3d(-11vw, -9vh, 0) scale(0.86); } } @keyframes stDrift3 { 0%, 100% { transform: translate3d(0, 0, 0) scale(0.9); } 50% { transform: translate3d(-8vw, 7vh, 0) scale(1.3); } } /* --- Beams: thin gold verticals sliding sideways, like light through a rig. Three columns per loop so the seam never shows. --- */ .st-beams { position: absolute; inset: -10% -30%; opacity: var(--st-beam-op); background: repeating-linear-gradient( 90deg, rgba(var(--st-a1), 0) 0 76px, rgba(var(--st-a1), 0.55) 76px 77px ); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 62%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 62%, transparent); transform: skewX(-9deg); animation: stBeams 22s linear infinite; will-change: transform; } @keyframes stBeams { from { transform: skewX(-9deg) translateX(0); } to { transform: skewX(-9deg) translateX(-231px); } } /* --- Marquee: the page's own headline, huge and faint, behind everything. Two rows, opposite directions, the lower one in gold. --- */ .st-marquee { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding-block: 3vh; overflow: hidden; opacity: var(--st-mq-op); } .st-mq { display: flex; flex: 0 0 auto; width: max-content; white-space: nowrap; font-family: var(--st-display); font-weight: 700; text-transform: uppercase; font-size: 12vw; line-height: 0.86; letter-spacing: 0.02em; color: var(--st-white); will-change: transform; } .st-mq span { padding-right: 0.32em; } .st-mq-a { animation: stMqL 48s linear infinite; } .st-mq-b { animation: stMqR 60s linear infinite; color: var(--st-gold); } @keyframes stMqL { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes stMqR { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* --- Sparks: embers rising off the floor --- */ .st-sparks { position: absolute; inset: 0; } .st-sparks i { position: absolute; left: var(--x); bottom: -6vh; width: var(--s); height: var(--s); border-radius: 50%; background: var(--st-gold-bright); box-shadow: 0 0 8px 2px rgba(var(--st-a1), 0.55); opacity: 0; animation: stSpark var(--t) linear var(--d) infinite; } @keyframes stSpark { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); } 12% { opacity: 0.85; } 70% { opacity: 0.5; } 100% { opacity: 0; transform: translate3d(3vw, -112vh, 0) scale(1.15); } } /* --- Grain: film texture, stepped so it flickers rather than slides --- */ .st-grain { position: absolute; inset: -8%; opacity: var(--st-grain-op); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); animation: stGrain 0.9s steps(1) infinite; } @keyframes stGrain { 0% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(-3%, 2%, 0); } 40% { transform: translate3d(2%, -3%, 0); } 60% { transform: translate3d(-2%, -2%, 0); } 80% { transform: translate3d(3%, 1%, 0); } 100% { transform: translate3d(0, 0, 0); } } /* --- Vignette: holds the copy up in the middle of the frame --- */ .st-vignette { position: absolute; inset: 0; opacity: var(--st-vig-op); background: radial-gradient(120% 82% at 50% 46%, rgba(11, 13, 18, 0) 40%, rgba(11, 13, 18, 0.9) 100%); } /* ===================================================================== 2. Each page's own weather. Same six layers, tuned so the rooms differ. ===================================================================== */ body[data-stage="venues"] { --st-aurora-op: 0.3; --st-beam-op: 0.15; --st-mq-op: 0.032; --st-grain-op: 0.1; } body[data-stage="home"] { --st-aurora-op: 0.34; --st-beam-op: 0.1; --st-mq-op: 0.03; --st-a3: 182, 192, 208; } body[data-stage="offer"] { --st-aurora-op: 0.4; --st-beam-op: 0.17; --st-mq-op: 0.04; --st-grain-op: 0.12; } body[data-stage="about"] { --st-aurora-op: 0.28; --st-beam-op: 0; --st-mq-op: 0.028; --st-grain-op: 0.17; --st-vig-op: 0.65; } body[data-stage="contact"] { --st-aurora-op: 0.4; --st-beam-op: 0.11; --st-mq-op: 0.034; } body[data-stage="blog"] { --st-aurora-op: 0.32; --st-beam-op: 0.07; --st-mq-op: 0.026; --st-grain-op: 0.13; --st-vig-op: 0.6; } body[data-stage="events"] { --st-aurora-op: 0.46; --st-beam-op: 0.14; --st-mq-op: 0.038; } body[data-stage="artists"] { --st-aurora-op: 0.46; --st-beam-op: 0.17; --st-mq-op: 0.04; } body[data-stage="legal"] { --st-aurora-op: 0.2; --st-beam-op: 0; --st-mq-op: 0; --st-grain-op: 0.08; --st-vig-op: 0.4; } body[data-stage="lost"] { --st-aurora-op: 0.5; --st-beam-op: 0.18; --st-mq-op: 0.05; } body[data-stage="app"] { --st-aurora-op: 0.44; --st-beam-op: 0.15; --st-mq-op: 0.038; --st-grain-op: 0.1; } /* ===================================================================== 3. Type that arrives one beat at a time. The script splits a heading into words and letters, or a paragraph into words, and marks each piece `.st-u`. A container is `.st-wait` until the moment it should play and `.st-in` from then on; the script carries insurance that reveals anything still waiting, so nothing can be left at opacity 0 by a browser that never fires an observer. ===================================================================== */ .st-w { display: inline-block; } .st-l { display: inline-block; } .st-wait .st-u { opacity: 0; } .st-in .st-l.st-u { animation: stLetterIn 0.62s var(--st-ease) backwards; } .st-in .st-w.st-u { animation: stWordIn 0.5s var(--st-ease) backwards; } @keyframes stLetterIn { 0% { opacity: 0; transform: perspective(600px) translateY(0.6em) rotateX(-62deg); filter: blur(10px); } 62% { opacity: 1; } 100% { opacity: 1; transform: perspective(600px) translateY(0) rotateX(0deg); filter: blur(0); } } @keyframes stWordIn { 0% { opacity: 0; transform: translateY(0.5em); filter: blur(6px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } /* The keyword line inside the headline settles in as one piece, spaced wide and closing up, a beat before the letters below it start. */ .st-wait .h1-kicker { opacity: 0; } .st-in .h1-kicker { animation: stKick 0.8s var(--st-ease) backwards; } @keyframes stKick { 0% { opacity: 0; letter-spacing: 0.42em; transform: translateY(-6px); } 100% { opacity: 1; letter-spacing: 0.22em; transform: translateY(0); } } /* Once the letters have landed the headline breathes a little light. */ .st-on h1.st-in { animation: stH1Breathe 7s var(--st-ease-io) 1.6s infinite; } @keyframes stH1Breathe { 0%, 100% { text-shadow: 0 0 0 rgba(248, 250, 252, 0); } 50% { text-shadow: 0 0 26px rgba(248, 250, 252, 0.22), 0 0 60px rgba(240, 166, 33, 0.14); } } /* Blocks that rise: form fields, footer links, list rows. */ .st-wait .st-r { opacity: 0; } .st-in .st-r { animation: stRise 0.7s var(--st-ease) backwards; } @keyframes stRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } /* Visually hidden, still read out: the real text under a flipped one. */ .st-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ===================================================================== 4. Light on the furniture that already exists. ===================================================================== */ /* The gold margin rule beside an opening paragraph carries a travelling light. */ .st-on .prose p.big::before { background: linear-gradient(180deg, transparent, var(--st-gold) 30%, var(--st-gold-bright) 50%, var(--st-gold) 70%, transparent); background-size: 100% 300%; animation: stRuleLight 5.5s ease-in-out infinite; } @keyframes stRuleLight { 0% { background-position: 0 100%; } 100% { background-position: 0 -100%; } } /* The closing band's top rule has a light running along it. */ .st-on .cta-band::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent, var(--st-gold) 40%, var(--st-gold-bright) 50%, var(--st-gold) 60%, transparent); background-size: 34% 100%; background-repeat: no-repeat; animation: stBandLight 6.5s var(--st-ease-io) infinite; } @keyframes stBandLight { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } } /* The app band and the call band pick up a slow sheen behind their copy. */ .st-on .app-band, .st-on .subscribe-card { position: relative; overflow: hidden; } .st-on .app-band::before, .st-on .subscribe-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(104deg, transparent 38%, rgba(255, 238, 200, 0.07) 48%, transparent 58%); background-size: 260% 100%; animation: stSheen 9s var(--st-ease-io) infinite; } @keyframes stSheen { 0%, 40% { background-position: 135% 0; } 90%, 100% { background-position: -35% 0; } } .st-on .app-band > *, .st-on .subscribe-card > * { position: relative; } /* ---- The board: the trust strip reads like a departures board. Each figure flips in glyph by glyph, then a highlight walks the strip. ---- */ .st-flap i { display: inline-block; font-style: normal; text-align: center; transform-origin: 50% 50%; backface-visibility: hidden; } .st-wait .st-flap i { opacity: 0; } .st-flap i.flip { animation: stFlip 0.13s ease-in var(--n, 3) backwards; } @keyframes stFlip { from { transform: perspective(300px) rotateX(88deg); color: var(--st-gold-bright); } to { transform: perspective(300px) rotateX(0deg); } } .st-on .trust > div, .st-on .trust div { transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.3s ease; } .st-on .trust > div.st-lit, .st-on .trust div.st-lit { background: linear-gradient(180deg, rgba(30, 41, 59, 0.9) 30%, rgba(240, 166, 33, 0.11)); box-shadow: inset 0 2px 0 var(--st-gold), inset 0 -2px 0 var(--st-gold); } .st-on .trust div.st-lit b { color: var(--st-gold-bright); text-shadow: 0 0 16px rgba(255, 216, 43, 0.5); } /* ---- The record: the numbers count up, then a glow walks the line. ---- */ .st-on .ledger > div { transition: border-color 0.4s ease; } .st-on .ledger > div.st-lit { border-top-color: var(--st-gold); } .st-on .ledger > div b { transition: color 0.4s ease, text-shadow 0.4s ease; } .st-on .ledger > div.st-lit b { color: var(--st-gold-bright); text-shadow: 0 0 30px rgba(255, 216, 43, 0.5); } /* ---- The questions: every page's folded questions wear the same fold, and a light walks down the list while nobody is reading one. ---- */ .st-on .faq { max-width: 44em; } .st-on .faq details { border-top: 1px solid rgba(51, 65, 85, 1); } .st-on .faq details:last-child { border-bottom: 1px solid rgba(51, 65, 85, 1); } .st-on .faq summary { list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 17px 2px 15px; cursor: pointer; font-family: var(--st-display); font-weight: 600; font-size: 1.02rem; letter-spacing: 0.04em; text-transform: uppercase; transition: color 0.35s ease, padding-left 0.3s ease, text-shadow 0.35s ease; } .st-on .faq summary::-webkit-details-marker { display: none; } .st-on .faq summary::after { content: "+"; flex: 0 0 auto; font-family: var(--st-display); font-weight: 500; font-size: 1.25rem; line-height: 1; color: var(--st-gold); transition: transform 0.35s var(--st-ease), color 0.25s ease, text-shadow 0.35s ease; } .st-on .faq summary:hover { color: var(--st-gold); padding-left: 8px; } .st-on .faq summary:hover::after { color: var(--st-gold-bright); text-shadow: 0 0 12px rgba(255, 216, 43, 0.6); } .st-on .faq details[open] summary { color: var(--st-gold); } .st-on .faq details[open] summary::after { transform: rotate(45deg); } .st-on .faq .faq-a { padding: 0 2px 20px; color: var(--st-muted); max-width: 58ch; } .st-on .faq details.st-lit > summary { color: var(--st-white); text-shadow: 0 0 18px rgba(240, 166, 33, 0.35); } .st-on .faq details.st-lit > summary::after { color: var(--st-gold-bright); text-shadow: 0 0 12px rgba(255, 216, 43, 0.7); } /* ---- The walk: a light travels the rule above the steps, station to station, and the step it is standing on lifts. ---- */ .st-on .steps.st-walk { position: relative; } .st-on .st-walk .step { transition: border-color 0.3s ease, background 0.3s ease, transform 0.6s var(--st-ease); } .st-on .st-walk .step.st-lit { border-top-color: var(--st-gold); background: rgba(30, 41, 59, 0.9); transform: translateY(-4px); } .st-on .st-walk .step.st-lit::after { transform: scaleX(1); } .st-on .st-walk .step.st-lit::before { color: var(--st-gold-bright); text-shadow: 0 0 12px rgba(255, 216, 43, 0.65); border-color: var(--st-gold); box-shadow: 0 0 18px rgba(240, 166, 33, 0.45); } .st-on .st-walk .step.st-lit h3, .st-on .st-walk .step.st-lit h4 { color: var(--st-gold); } .st-walk-head { position: absolute; z-index: 2; width: 12px; height: 12px; margin: -7px 0 0 -6px; border-radius: 50%; background: var(--st-gold-bright); box-shadow: 0 0 12px 3px rgba(255, 216, 43, 0.55), 0 0 30px rgba(240, 166, 33, 0.5); pointer-events: none; opacity: 0; transition: left 0.9s var(--st-ease), top 0.9s var(--st-ease), opacity 0.5s ease; } .st-walk.st-live .st-walk-head { opacity: 1; } .st-walk-head::after { content: ""; position: absolute; top: 50%; right: 50%; width: 74px; height: 2px; margin-top: -1px; background: linear-gradient(90deg, rgba(255, 216, 43, 0), rgba(255, 216, 43, 0.85)); transform-origin: right center; transform: scaleX(var(--dir, 1)); } /* ===================================================================== 5. The carousels. One design per kind of block, all built by the script out of the markup that is already there; without it every one of these is the grid it always was. .st-deck a group of cards the deck: front card, ghosts either side .st-pile the nine tickets the pile: top ticket slides off, next up .st-shelf the blog cards the shelf: a strip that tilts to the hand .st-scales the two price cards the scales: one side lifts, then the other .st-walk the steps above, in section 4 ===================================================================== */ /* ---- Shared furniture: arrows, the rail, the counter, the sweep ---- */ .st-arr { position: absolute; top: 50%; z-index: 8; width: clamp(46px, 5vw, 60px); height: clamp(46px, 5vw, 60px); transform: translateY(-50%); display: grid; place-items: center; background: rgba(11, 13, 18, 0.42); border: 0; border-radius: 50%; cursor: pointer; color: var(--st-white); backdrop-filter: blur(6px); transition: background 0.35s var(--st-ease), transform 0.35s var(--st-ease); } .st-arr.st-prev { left: 0; } .st-arr.st-next { right: 0; } .st-arr-ring { position: absolute; inset: 0; border: 1px solid rgba(248, 250, 252, 0.3); border-radius: 50%; transition: border-color 0.35s var(--st-ease), box-shadow 0.35s var(--st-glow), transform 0.35s var(--st-ease); } .st-arr-chev { display: block; width: 11px; height: 11px; margin-left: 4px; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: border-color 0.25s var(--st-ease), filter 0.25s var(--st-glow); } .st-next .st-arr-chev { margin-left: -4px; transform: rotate(225deg); } .st-arr-word { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px); font-family: var(--st-display); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--st-gold); opacity: 0; white-space: nowrap; transition: opacity 0.35s var(--st-ease), transform 0.35s var(--st-ease); } .st-arr:hover, .st-arr:focus-visible { background: rgba(240, 166, 33, 0.16); outline: none; } .st-arr:hover .st-arr-ring, .st-arr:focus-visible .st-arr-ring { border-color: var(--st-gold); box-shadow: 0 0 22px rgba(255, 216, 43, 0.45); transform: scale(1.08); } .st-arr:hover .st-arr-chev { border-color: var(--st-gold-bright); filter: drop-shadow(0 0 6px rgba(240, 166, 33, 0.85)); } .st-arr:hover .st-arr-word { opacity: 1; transform: translateX(-50%) translateY(0); } .st-prev:hover { transform: translateY(-50%) translateX(-4px); } .st-next:hover { transform: translateY(-50%) translateX(4px); } .st-prev:active { transform: translateY(-50%) translateX(-4px) scale(0.9); } .st-next:active { transform: translateY(-50%) translateX(4px) scale(0.9); } .st-arr:active { background: rgba(240, 166, 33, 0.34); } .st-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin-top: 18px; } .st-rail { display: flex; flex-wrap: wrap; gap: 2px clamp(2px, 0.6vw, 8px); } .st-tab { position: relative; display: flex; align-items: baseline; gap: 7px; padding: 8px clamp(8px, 1vw, 14px) 10px; background: transparent; border: 0; cursor: pointer; font-family: var(--st-display); text-transform: uppercase; color: var(--st-muted); transition: color 0.25s var(--st-ease), transform 0.25s var(--st-ease); } .st-tab-n { font-size: 0.6rem; letter-spacing: 0.16em; opacity: 0.65; } .st-tab-name { font-size: 0.76rem; letter-spacing: 0.12em; font-weight: 500; } .st-tab-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(248, 250, 252, 0.16); transform: scaleX(0.4); transition: transform 0.35s var(--st-ease), background 0.35s var(--st-ease), box-shadow 0.35s var(--st-glow); } .st-tab:hover, .st-tab:focus-visible { color: var(--st-white); transform: translateY(-2px); outline: none; } .st-tab:hover .st-tab-line, .st-tab:focus-visible .st-tab-line { transform: scaleX(1); background: var(--st-gold); box-shadow: 0 0 14px rgba(240, 166, 33, 0.45); } .st-tab:active { transform: translateY(-2px) scale(0.96); } .st-tab[aria-current="true"] { color: var(--st-gold); } .st-tab[aria-current="true"] .st-tab-n { opacity: 1; } .st-tab[aria-current="true"] .st-tab-line { transform: scaleX(1); background: var(--st-gold); box-shadow: 0 0 22px rgba(255, 216, 43, 0.45); } .st-count { display: flex; align-items: center; gap: 10px; font-family: var(--st-display); font-size: 0.74rem; letter-spacing: 0.16em; color: var(--st-muted); font-variant-numeric: tabular-nums; } .st-count-now { color: var(--st-gold); text-shadow: 0 0 14px rgba(240, 166, 33, 0.45); min-width: 2ch; } .st-count-rule { position: relative; display: block; width: clamp(40px, 7vw, 96px); height: 1px; background: rgba(248, 250, 252, 0.22); } .st-count-rule i { position: absolute; inset: 0 auto 0 0; display: block; width: 0; background: var(--st-gold); box-shadow: 0 0 14px rgba(240, 166, 33, 0.45); transition: width 0.6s var(--st-ease); } /* The wipe that covers every change. Nothing here cuts. */ .st-sweep { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; background: linear-gradient(100deg, rgba(240, 166, 33, 0) 34%, rgba(255, 216, 43, 0.5) 48%, rgba(255, 250, 232, 0.72) 52%, rgba(240, 166, 33, 0) 66%); mix-blend-mode: screen; } .st-sweep.go-next { animation: stSweepR 0.62s var(--st-glow); } .st-sweep.go-prev { animation: stSweepL 0.62s var(--st-glow); } @keyframes stSweepR { 0% { opacity: 0; transform: translateX(-64%); } 22% { opacity: 1; } 100% { opacity: 0; transform: translateX(64%); } } @keyframes stSweepL { 0% { opacity: 0; transform: translateX(64%); } 22% { opacity: 1; } 100% { opacity: 0; transform: translateX(-64%); } } /* ---- The deck ---- */ .st-deck-wrap { --st-cw: clamp(280px, 52%, 520px); /* the front card's width */ --st-spread: 58%; /* how far a ghost sits out, in card widths */ --st-spread-2: 100%; --st-rot: 22deg; --st-ghost: 0.5; --st-ghost-2: 0.18; --st-peek: 0.85; --st-dim: 0.45; position: relative; overflow-x: clip; overflow-y: visible; user-select: none; -webkit-user-select: none; } .st-on .cards.st-deck { display: block; position: relative; height: var(--st-h, 420px); perspective: 1400px; transition: height 0.5s var(--st-ease); } .st-on .st-deck > .card { position: absolute; top: 18px; left: 50%; width: var(--st-cw); margin: 0; transform: translateX(-50%); transition: transform 0.72s var(--st-ease), opacity 0.52s var(--st-glow), filter 0.52s var(--st-glow), border-color 0.3s ease, box-shadow 0.3s ease; will-change: transform, opacity; cursor: pointer; } .st-on .st-deck > .card[data-o="0"] { z-index: 5; transform: translateX(-50%) scale(1) rotateY(0deg); opacity: 1; cursor: default; } .st-on .st-deck > a.card[data-o="0"] { cursor: pointer; } .st-on .st-deck > .card[data-o="1"] { z-index: 4; transform: translateX(calc(-50% + var(--st-spread))) scale(0.84) rotateY(calc(var(--st-rot) * -1)); opacity: var(--st-ghost); filter: saturate(0.75); } .st-on .st-deck > .card[data-o="-1"] { z-index: 4; transform: translateX(calc(-50% - var(--st-spread))) scale(0.84) rotateY(var(--st-rot)); opacity: var(--st-ghost); filter: saturate(0.75); } .st-on .st-deck > .card[data-o="2"] { z-index: 3; transform: translateX(calc(-50% + var(--st-spread-2))) scale(0.7) rotateY(calc(var(--st-rot) * -1.3)); opacity: var(--st-ghost-2); } .st-on .st-deck > .card[data-o="-2"] { z-index: 3; transform: translateX(calc(-50% - var(--st-spread-2))) scale(0.7) rotateY(calc(var(--st-rot) * 1.3)); opacity: var(--st-ghost-2); } .st-on .st-deck > .card[data-o="9"] { z-index: 1; transform: translateX(-50%) scale(0.5); opacity: 0; pointer-events: none; } /* Three states on every card: rest, hover, press. */ .st-on .st-deck > .card[data-o="0"]:hover { transform: translateX(-50%) translateY(-5px) scale(1) rotateY(0deg); } .st-on .st-deck > a.card[data-o="0"]:active { transform: translateX(-50%) translateY(-1px); } .st-on .st-deck > .card[data-o="1"]:hover, .st-on .st-deck > .card[data-o="-1"]:hover { opacity: var(--st-peek); scale: 1.05; filter: none; } .st-on .st-deck > .card[data-o="2"]:hover, .st-on .st-deck > .card[data-o="-2"]:hover { opacity: 0.32; scale: 1.05; } .st-on .st-deck > .card:not([data-o="0"]):active { scale: 0.98; } /* Hovering an arrow lifts the card it would bring forward and steps the current one back, so you can see what is next before moving. */ .st-deck-wrap.peek-next .st-deck > .card[data-o="1"], .st-deck-wrap.peek-prev .st-deck > .card[data-o="-1"] { opacity: var(--st-peek); scale: 1.05; filter: none; } .st-deck-wrap.peek-next .st-deck > .card[data-o="2"], .st-deck-wrap.peek-prev .st-deck > .card[data-o="-2"] { opacity: 0.32; } .st-deck-wrap.peek-next .st-deck > .card[data-o="0"], .st-deck-wrap.peek-prev .st-deck > .card[data-o="0"] { opacity: var(--st-dim); } /* The deck deals its cards in from the middle outwards when it first shows. */ .st-on .st-deck.st-live > .card { animation: stDeal 0.9s var(--st-ease) backwards; } @keyframes stDeal { from { opacity: 0; translate: 0 70px; } } /* ---- The pile ---- */ .st-on .cards.st-pile { display: block; position: relative; height: var(--st-h, 420px); transition: height 0.5s var(--st-ease); user-select: none; -webkit-user-select: none; } .st-on .st-pile > .card { position: absolute; top: 0; left: 50%; width: min(100%, 640px); margin: 0; transform-origin: 50% 100%; transform: translateX(-50%); transition: transform 0.7s var(--st-ease), opacity 0.6s var(--st-glow), filter 0.6s var(--st-glow), border-color 0.3s ease, box-shadow 0.3s ease; will-change: transform, opacity; } .st-on .st-pile > .card[data-k="0"] { z-index: 9; transform: translateX(-50%) translateY(0) rotate(0deg) scale(1); opacity: 1; cursor: pointer; } .st-on .st-pile > .card[data-k="1"] { z-index: 8; transform: translateX(-50%) translateY(16px) rotate(-1.6deg) scale(0.965); opacity: 0.78; filter: brightness(0.85); } .st-on .st-pile > .card[data-k="2"] { z-index: 7; transform: translateX(-50%) translateY(32px) rotate(1.4deg) scale(0.93); opacity: 0.5; filter: brightness(0.7); } .st-on .st-pile > .card[data-k="3"] { z-index: 6; transform: translateX(-50%) translateY(46px) rotate(-1deg) scale(0.895); opacity: 0.26; filter: brightness(0.6); } .st-on .st-pile > .card[data-k="9"] { z-index: 1; transform: translateX(-50%) translateY(52px) scale(0.87); opacity: 0; pointer-events: none; } .st-on .st-pile > .card[data-k="0"]:hover { transform: translateX(-50%) translateY(-5px); } .st-on .st-pile > .card[data-k="0"]:active { transform: translateX(-50%) translateY(-1px) scale(0.99); } .st-on .st-pile > .card.st-out { z-index: 10; animation: stPileOut 0.62s var(--st-ease-io) forwards; pointer-events: none; } @keyframes stPileOut { 0% { transform: translateX(-50%) translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateX(-118%) translateY(26px) rotate(-9deg); opacity: 0; } } .st-on .st-pile.st-live > .card { animation: stDeal 0.9s var(--st-ease) backwards; } .st-on .st-pile > .card.st-out { animation: stPileOut 0.62s var(--st-ease-io) forwards; } /* ---- The shelf ---- */ .st-on .post-grid.st-shelf { display: flex; flex-wrap: wrap; gap: 26px; } .st-on .st-shelf > .post-card.featured { flex: 1 1 100%; } .st-shelf-track { flex: 1 1 100%; display: flex; gap: 26px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 4px 16px; margin: -8px -4px -16px; cursor: grab; } .st-shelf-track.dragging { cursor: grabbing; scroll-snap-type: none; } .st-shelf-track::-webkit-scrollbar { display: none; } .st-shelf-track > .post-card { flex: 0 0 min(100%, 348px); scroll-snap-align: start; } .st-shelf-wrap { position: relative; } .st-shelf-wrap .st-arr { display: none; } .st-shelf-wrap.has-more .st-arr { display: grid; } .st-shelf-wrap.has-more .st-arr.st-prev { left: -14px; } .st-shelf-wrap.has-more .st-arr.st-next { right: -14px; } /* A card that follows the hand: tilt from the pointer, a glare that travels with it, a lift while it is the one lit. */ .st-on .st-tilt { position: relative; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); transition: transform 0.22s ease-out, border-color 0.3s ease, box-shadow 0.3s ease; } .st-on .st-tilt::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 238, 200, 0.16), rgba(255, 238, 200, 0) 58%); opacity: var(--go, 0); transition: opacity 0.35s ease; } .st-on .post-card.st-lit, .st-on .post-card.st-tilt:hover { --ty: -4px; border-color: var(--st-gold); box-shadow: 0 18px 40px -18px rgba(240, 166, 33, 0.4); } .st-on .post-card.st-lit h3 { color: var(--st-gold-bright); text-shadow: 0 0 16px rgba(255, 216, 43, 0.4); } .st-on .post-card.st-lit .pill { border-color: var(--st-gold); } /* The featured post is a billboard: a slow light crosses behind the words. */ .st-on .post-card.st-bill::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(42% 120% at 50% 50%, rgba(240, 166, 33, 0.16), rgba(240, 166, 33, 0) 70%); background-size: 220% 100%; background-repeat: no-repeat; animation: stBill 14s var(--st-ease-io) infinite alternate; } @keyframes stBill { from { background-position: 0% 0; } to { background-position: 100% 0; } } .st-on .post-card.st-bill > * { position: relative; } /* ---- The scales ---- */ .st-on .packages .card { transition: transform 0.6s var(--st-ease), border-color 0.4s ease, box-shadow 0.4s ease, opacity 0.65s ease; } .st-on .packages .card.st-lit { --ty: -6px; border-color: var(--st-gold); box-shadow: 0 20px 44px rgba(11, 13, 18, 0.5), 0 0 24px rgba(240, 166, 33, 0.3); } .st-on .packages .card.st-lit .price b { color: var(--st-gold-bright); text-shadow: 0 0 16px rgba(255, 216, 43, 0.5); } .st-on .packages .card.st-lit .chip { background: var(--st-gold-bright); box-shadow: 0 0 18px rgba(255, 216, 43, 0.6); } .st-on .packages .card.st-lit h2 { color: var(--st-gold); } /* ===================================================================== 6. Popups. The pinned call form that signup.js drops on every page gets the same weather behind its card, and its fields ride in on beats. ===================================================================== */ .st-panel-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: inherit; } .st-panel-bg i { position: absolute; display: block; border-radius: 50%; filter: blur(60px); mix-blend-mode: screen; will-change: transform; } .st-panel-bg i:nth-child(1) { width: 70%; aspect-ratio: 1; left: -20%; top: -30%; background: radial-gradient(circle, rgba(240, 166, 33, 0.42), rgba(240, 166, 33, 0) 68%); animation: stDrift1 26s var(--st-ease-io) infinite; } .st-panel-bg i:nth-child(2) { width: 62%; aspect-ratio: 1; right: -22%; bottom: -32%; background: radial-gradient(circle, rgba(139, 106, 53, 0.55), rgba(139, 106, 53, 0) 70%); animation: stDrift2 34s var(--st-ease-io) infinite; } .st-panel-bg b { position: absolute; inset: -8%; opacity: 0.1; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); animation: stGrain 0.9s steps(1) infinite; } .st-on .signup-modal-card { isolation: isolate; } .st-on .signup-modal-card > :not(.st-panel-bg):not(.signup-modal-close) { position: relative; z-index: 1; } .st-on .signup-modal-card > .signup-modal-close { z-index: 2; } .signup-modal.open .signup-modal-card .field, .signup-modal.open .signup-modal-card form .btn, .signup-modal.open .signup-modal-card .foot-note { animation: stRise 0.7s var(--st-ease) backwards; animation-delay: calc(var(--i, 0) * 60ms + 220ms); } /* ===================================================================== 7. Phones. The far ghosts go, the beams go, and the rail keeps only its numbers. ===================================================================== */ @media (max-width: 760px) { .st-beams { display: none; } .st-mq { font-size: 17vw; } .st-deck-wrap { --st-cw: 84%; --st-spread: 78%; --st-rot: 16deg; --st-ghost: 0.35; } .st-on .st-deck > .card[data-o="2"], .st-on .st-deck > .card[data-o="-2"] { opacity: 0; } .st-arr { width: 42px; height: 42px; } .st-arr-word { display: none; } .st-tab-name { display: none; } .st-tab { padding: 8px 10px 10px; } .st-tab-n { font-size: 0.72rem; } .st-foot { justify-content: center; } .st-count { display: none; } .st-shelf-wrap.has-more .st-arr.st-prev { left: -6px; } .st-shelf-wrap.has-more .st-arr.st-next { right: -6px; } } /* ===================================================================== 8. Motion off. The page still carries its light, held still; the type is simply there; every carousel stays the grid it came from, because the script never builds one for this visitor. ===================================================================== */ @media (prefers-reduced-motion: reduce) { .st-bg *, .st-panel-bg * { animation: none !important; } .st-sparks, .st-marquee, .st-beams { display: none; } .st-wait .st-u, .st-wait .st-r, .st-wait .h1-kicker, .st-wait .st-flap i { opacity: 1; } .st-in .st-u, .st-in .st-r, .st-in .h1-kicker, .st-flap i.flip, .st-on h1.st-in, .st-on .prose p.big::before, .st-on .cta-band::after, .st-on .app-band::before, .st-on .subscribe-card::before, .st-on .post-card.st-bill::before, .signup-modal.open .signup-modal-card .field, .signup-modal.open .signup-modal-card form .btn, .signup-modal.open .signup-modal-card .foot-note { animation: none !important; } .st-walk-head { display: none; } .st-on .st-tilt { transform: none; } } /* The pile, running backwards: the ticket that comes back to the top arrives the way the others left. */ .st-on .st-pile > .card.st-back { z-index: 10; animation: stPileIn 0.62s var(--st-ease) backwards; } @keyframes stPileIn { from { transform: translateX(-118%) translateY(26px) rotate(-9deg); opacity: 0; } } /* The hand lifts a tilting card the way hover lifts every other. */ .st-on .packages .card.st-tilt:hover { --ty: -5px; } .st-on .post-card.st-tilt:hover { --ty: -4px; } /* ===================================================================== 9. The card that opens when a figure is pressed. Yannai, 2026-09-05: pressing "$360 a gig", "one invoice a week" or "no lock-in" should open a designed, animated card whose buttons lead to the app, to a call or to contact. The same card opens from a step, from the record's numbers and from a card that is not already a link, so everything on a page leads to one of those three doors. ===================================================================== */ .st-trig { cursor: pointer; } .st-trig:focus-visible { outline: 2px solid var(--st-gold-bright); outline-offset: 4px; } html.st-pop-open, html.st-pop-open body { overflow: hidden; } .st-pop { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 4vh, 40px) 20px; } .st-pop[hidden] { display: none; } .st-pop-scrim { position: absolute; inset: 0; background: rgba(5, 9, 18, 0.78); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.4s ease; } .st-pop.is-open .st-pop-scrim { opacity: 1; } .st-pop.is-closing .st-pop-scrim { opacity: 0; } /* The light comes out of whatever was pressed: fast in, hold, slow out, and the card arrives underneath it, so nothing is seen to cut. */ .st-pop-flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transform-origin: var(--fx, 50%) var(--fy, 50%); background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), #fffdf5 0%, #ffd82b 20%, rgba(255, 216, 43, 0) 58%); } .st-pop.is-open .st-pop-flash { animation: stFlood 0.92s var(--st-glow) forwards; } @keyframes stFlood { 0% { opacity: 0; transform: scale(0.3); } 20% { opacity: 1; transform: scale(1.3); } 34% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0; transform: scale(2.6); } } .st-pop-card { position: relative; z-index: 2; width: min(660px, 100%); max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; isolation: isolate; background: var(--st-navy); border: 1px solid rgba(240, 166, 33, 0.55); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9), 0 0 44px -8px rgba(240, 166, 33, 0.32); padding: clamp(28px, 4.5vw, 48px); opacity: 0; transform: translateY(26px) scale(0.97); } .st-pop.is-in .st-pop-card { animation: stPopIn 0.7s var(--st-ease) forwards; } @keyframes stPopIn { to { opacity: 1; transform: none; } } .st-pop.is-closing .st-pop-card { animation: stPopOut 0.3s var(--st-ease-io) forwards; } @keyframes stPopOut { to { opacity: 0; transform: translateY(22px) scale(0.97); } } .st-pop-card > :not(.st-panel-bg):not(.st-pop-x) { position: relative; z-index: 1; } .st-pop-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; color: var(--st-white); transition: transform 0.25s var(--st-ease); } .st-pop-x-ring { position: absolute; inset: 0; border: 1px solid rgba(248, 250, 252, 0.28); border-radius: 50%; transition: border-color 0.25s var(--st-ease), box-shadow 0.25s var(--st-glow), background 0.25s var(--st-ease); } .st-pop-x-mark { position: relative; width: 16px; height: 16px; display: block; } .st-pop-x-mark i { position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: background 0.25s var(--st-ease), box-shadow 0.25s var(--st-glow); } .st-pop-x-mark i:first-child { transform: rotate(45deg); } .st-pop-x-mark i:last-child { transform: rotate(-45deg); } .st-pop-x:hover, .st-pop-x:focus-visible { transform: rotate(90deg); outline: none; } .st-pop-x:hover .st-pop-x-ring, .st-pop-x:focus-visible .st-pop-x-ring { border-color: var(--st-gold); box-shadow: 0 0 22px rgba(255, 216, 43, 0.45); } .st-pop-x:hover .st-pop-x-mark i { background: var(--st-gold-bright); box-shadow: 0 0 14px rgba(240, 166, 33, 0.45); } .st-pop-x:active { transform: rotate(90deg) scale(0.9); } .st-pop-x:active .st-pop-x-ring { background: rgba(240, 166, 33, 0.16); } /* The logo's three bands, stood upright and playing. */ .st-pop-eq { display: flex; align-items: flex-end; gap: 3px; height: 22px; margin-bottom: 16px; } .st-pop-eq i { display: block; width: 3px; background: var(--st-gold); box-shadow: 0 0 6px rgba(240, 166, 33, 0.45); transform-origin: bottom; animation: stEq 2.6s var(--st-ease-io) infinite; } .st-pop-eq i:nth-child(1) { height: 9px; } .st-pop-eq i:nth-child(2) { height: 15px; animation-delay: -0.9s; } .st-pop-eq i:nth-child(3) { height: 22px; animation-delay: -1.7s; } @keyframes stEq { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } } .st-pop-eyebrow { display: block; font-family: var(--st-display); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--st-gold); text-shadow: 0 0 18px rgba(240, 166, 33, 0.45); margin-bottom: 10px; } .st-pop-title { font-family: var(--st-display); font-weight: 700; font-size: clamp(2.2rem, 6vw, 4rem); line-height: 0.94; letter-spacing: 0.005em; text-transform: uppercase; color: var(--st-white); text-shadow: 0 3px 0 rgba(11, 13, 18, 0.55), 0 6px 26px rgba(11, 13, 18, 0.9), 0 0 38px rgba(240, 166, 33, 0.25); margin: 0 0 14px; text-wrap: balance; } .st-pop-dek { font-family: var(--st-display); font-weight: 500; font-size: clamp(0.95rem, 1.8vw, 1.2rem); letter-spacing: 0.08em; text-transform: uppercase; color: var(--st-gold); margin: 0 0 18px; } .st-pop-note { color: var(--st-muted); font-size: 1.02rem; line-height: 1.6; margin: 0 0 28px; max-width: 48em; } .st-pop-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .st-pop-alt { margin: 20px 0 0; font-size: 0.92rem; color: var(--st-muted); } .st-pop-alt a { color: var(--st-gold); text-decoration: underline; text-underline-offset: 3px; transition: color 0.25s ease, text-shadow 0.25s ease; } .st-pop-alt a:hover { color: var(--st-gold-bright); text-shadow: 0 0 14px rgba(255, 216, 43, 0.45); } .st-pop-card .st-r { animation-fill-mode: backwards; } /* The house button, restated here because the pricing page never loads site.css. Three states: rest, hover, press. */ .st-btn { position: relative; overflow: hidden; display: inline-block; font-family: var(--st-display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; background: var(--st-gold); color: var(--st-navy); padding: 14px 30px 12px; text-decoration: none; cursor: pointer; transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .st-btn::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%); background-size: 250% 100%; background-position: 145% 0; transition: background-position 0.75s ease; } .st-btn:hover { background: var(--st-gold-bright); box-shadow: 0 0 30px rgba(255, 216, 43, 0.5); transform: translateY(-2px); } .st-btn:hover::after { background-position: -45% 0; } .st-btn:active { transform: translateY(0); box-shadow: 0 0 0 2px rgba(255, 216, 43, 0.85) inset, 0 0 26px rgba(255, 216, 43, 0.55); } .st-btn.ghost { background: transparent; color: var(--st-gold); border: 1px solid var(--st-gold); } .st-btn.ghost:hover { color: var(--st-navy); background: var(--st-gold-bright); border-color: var(--st-gold-bright); } .st-btn.ghost:active { background: var(--st-gold); color: var(--st-navy); border-color: var(--st-gold-bright); } .st-btn .st-arrow { display: inline-block; margin-left: 7px; transition: transform 0.25s ease; } .st-btn:hover .st-arrow { transform: translateX(4px); } .st-btn:focus-visible { outline: 2px solid var(--st-gold-bright); outline-offset: 3px; } /* ---- Refinements found on the first look ---- */ /* The deck may bleed into the page gutter, so a ghost is never cut off flat at the column edge. */ .st-deck-wrap { --st-spread: 56%; margin-inline: -24px; padding-inline: 24px; } /* Every card in a deck or a pile stands the same height, so the ghosts and the stacked edges read as one set rather than as a shorter card hiding behind a taller one. */ .st-on .st-deck > .card, .st-on .st-pile > .card { min-height: var(--st-ch, auto); } .st-on .st-pile > .card[data-k="1"] { transform: translateX(-50%) translateY(18px) rotate(-1.6deg) scale(0.965); } .st-on .st-pile > .card[data-k="2"] { transform: translateX(-50%) translateY(36px) rotate(1.4deg) scale(0.93); } .st-on .st-pile > .card[data-k="3"] { transform: translateX(-50%) translateY(52px) rotate(-1deg) scale(0.895); } /* A long rail keeps only its numbers. */ .st-rail.st-rail-dense .st-tab-name { display: none; } .st-rail.st-rail-dense .st-tab { padding: 8px 10px 10px; } .st-rail.st-rail-dense .st-tab-n { font-size: 0.72rem; } /* A flipped glyph carries no spacing of its own; the script hands each slot the figure's letter-spacing as a margin, so the strip measures the same. */ .st-flap i { letter-spacing: 0; } @media (max-width: 760px) { .st-deck-wrap { --st-spread: 78%; margin-inline: 0; padding-inline: 0; } .st-pop { padding: 10px; align-items: flex-end; } .st-pop-card { max-height: 88vh; } } @media (prefers-reduced-motion: reduce) { .st-pop-flash, .st-pop-eq i { animation: none !important; } .st-pop.is-open .st-pop-card { opacity: 1; transform: none; animation: none; } .st-pop-card .st-r { opacity: 1; animation: none !important; } } /* ===================================================================== 10. Beats. Yannai, 2026-09-05: fewer paragraphs, more lists that show one point at a time. A prose block keeps its opening statement and its pointers, and the paragraphs between become a run of single lines that rise in word by word, hold, and give way to the next. The full text is always there underneath for a screen reader and a crawler, and one press of "Read it in full" shows it to everyone else. ===================================================================== */ .st-beats { position: relative; margin: 8px 0 22px; padding-left: 22px; } .st-beats::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: linear-gradient(180deg, transparent, var(--st-gold) 30%, var(--st-gold-bright) 50%, var(--st-gold) 70%, transparent); background-size: 100% 300%; animation: stRuleLight 5.5s ease-in-out infinite; } .st-beat { min-height: 3.4em; font-size: 1.18rem; line-height: 1.5; color: var(--st-white); max-width: 44ch; margin: 0; } .st-beat .st-w { display: inline-block; opacity: 0; transform: translateY(0.5em); filter: blur(6px); } .st-beat.in .st-w { animation: stBeatIn 0.5s var(--st-ease) both; } .st-beat.out .st-w { animation: stBeatOut 0.32s var(--st-ease-io) both; } @keyframes stBeatIn { to { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes stBeatOut { from { opacity: 1; transform: translateY(0); filter: blur(0); } to { opacity: 0; transform: translateY(-0.42em); filter: blur(6px); } } .st-beat-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; margin-top: 14px; } .st-beat-rail { display: flex; gap: 6px; } .st-beat-dot { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; } .st-beat-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(248, 250, 252, 0.28); transition: transform 0.3s var(--st-ease), background 0.3s ease, box-shadow 0.3s ease; } .st-beat-dot:hover::before, .st-beat-dot:focus-visible::before { background: var(--st-white); transform: scale(1.4); } .st-beat-dot:focus-visible { outline: none; } .st-beat-dot[aria-current="true"]::before { background: var(--st-gold); box-shadow: 0 0 12px rgba(240, 166, 33, 0.7); transform: scale(1.5); } .st-beat-more { padding: 4px 0; background: transparent; border: 0; cursor: pointer; font-family: var(--st-display); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--st-gold); transition: color 0.25s ease, text-shadow 0.25s ease, letter-spacing 0.25s ease; } .st-beat-more:hover, .st-beat-more:focus-visible { color: var(--st-gold-bright); text-shadow: 0 0 14px rgba(255, 216, 43, 0.55); letter-spacing: 0.2em; outline: none; } .st-beat-more:active { color: var(--st-gold); letter-spacing: 0.18em; } .st-full.is-shown { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; } .st-full.is-shown > p { animation: stRise 0.6s var(--st-ease) both; } .st-full.is-shown > p:nth-child(2) { animation-delay: 80ms; } .st-full.is-shown > p:nth-child(3) { animation-delay: 160ms; } /* ===================================================================== 11. Icons. Drawn by hand in the logo's own line: one gold stroke, round ends, and each one draws itself as it arrives, the way the brand bible says the dawn arc should. One per card, step or figure, never more. ===================================================================== */ .st-ico { display: block; width: 26px; height: 26px; color: var(--st-gold); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; filter: drop-shadow(0 0 6px rgba(240, 166, 33, 0.35)); transition: transform 0.4s var(--st-ease), filter 0.4s ease, color 0.3s ease; } .st-ico * { stroke-dasharray: 1; stroke-dashoffset: 1; } .st-ink .st-ico *, .st-ico.st-ink * { animation: stDraw 1.1s var(--st-ease) forwards; animation-delay: calc(var(--n, 0) * 140ms + var(--d, 0ms)); } @keyframes stDraw { to { stroke-dashoffset: 0; } } .card:hover .st-ico, .step:hover .st-ico, .trust > div:hover .st-ico, .st-lit > .st-ico, .st-trig:hover > .st-ico { color: var(--st-gold-bright); filter: drop-shadow(0 0 10px rgba(255, 216, 43, 0.7)); transform: scale(1.1) rotate(-4deg); } .step .st-ico { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; margin: 0; } .trust > div .st-ico { width: 22px; height: 22px; margin-bottom: 10px; } .st-pop-ico { width: 34px; height: 34px; margin-bottom: 16px; } .st-pop-ico + .st-pop-eq { display: none; } /* The tick that draws itself. */ ul.inc .tick svg { display: inline-block; width: 16px; height: 16px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } ul.inc .tick svg path { stroke-dasharray: 1; stroke-dashoffset: 1; } .st-in ul.inc .tick svg path, ul.inc.st-in .tick svg path { animation: stDraw 0.7s var(--st-ease) forwards; animation-delay: calc(var(--i, 0) * 90ms + 200ms); } @media (prefers-reduced-motion: reduce) { .st-ico *, ul.inc .tick svg path { stroke-dashoffset: 0; animation: none !important; } .st-beats::before { animation: none; background: var(--st-gold); } .st-beat .st-w { opacity: 1; transform: none; filter: none; } }