/* 2.8.52: 25 more moving home cards (keys in app/heroes_extra.py) */ @property --hy-ang { syntax: ""; inherits: false; initial-value: 0deg; } @property --hy-s { syntax: ""; inherits: false; initial-value: 0; } @property --hy-m { syntax: ""; inherits: false; initial-value: 0; } /* shared: the padding of the card, so full-width strips can reach the edges */ .portal.hero-cb, .portal.hero-cw, .portal.hero-cs, .portal.hero-cp { --pd: 20px; } @media (min-width: 640px) { .portal.hero-cb, .portal.hero-cw, .portal.hero-cs, .portal.hero-cp { --pd: 28px; } } @keyframes hy-spin { to { transform: rotate(360deg); } } @keyframes hy-blink { 50% { opacity: 0; } } @keyframes hy-twinkle { 0%, 100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } } /* screens that stay dark in light styles (terminal, TV, tape, neon wall): dark colours for everything inside */ [data-mode="light"] .portal.hero-ch, [data-mode="light"] .portal.hero-co, [data-mode="light"] .portal.hero-cs, [data-mode="light"] .portal.hero-cl { --fg: #eeecf6; --mfg: #aca8c0; --dim: #7a7690; --hi: #fff; --tint: 255,255,255; --panel: 12,11,20; --solid: #13121c; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.15); color-scheme: dark; color: var(--fg); --ok: #3ddc97; --warn: #ffc15e; --bad: #ff5d7a; --owner: #ffc15e; --staff: #5cc8ff; --grad-text: linear-gradient(100deg, #fff 0%, color-mix(in oklab, var(--a) 55%, #fff) 35%, color-mix(in oklab, var(--a2) 80%, #fff) 100%); } [data-mode="light"] :is(.hero-ch, .hero-co, .hero-cs, .hero-cl) .pill.owner { color: var(--owner); } [data-mode="light"] :is(.hero-ch, .hero-co, .hero-cs, .hero-cl) .pill.staff { color: var(--staff); } [data-mode="light"] :is(.hero-ch, .hero-co, .hero-cs, .hero-cl) :is(.pill.ok, .status.ok) { color: var(--ok); } [data-mode="light"] .portal.hero-ch .who.gtext, [data-mode="light"] .portal.hero-co .who.gtext, [data-mode="light"] .portal.hero-cs .who.gtext { filter: drop-shadow(0 0 16px var(--a-45)); } /* ============ BY game HUD: target-lock avatar, HP and XP bars, HUD stat tiles ============ */ .hero-by .hero { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "top top" "logo name" "logo chips" "text text" "stats stats"; column-gap: 16px; } .hero-by .hero > .h-logo { position: relative; padding: 9px; } .portal.hero-by .orb.s104 { --s: 66px; } .hero-by .orb .ball { border-radius: 14px; } .hero-by .orb .halo { display: none; } .hero-by .hero > .h-logo::before { content: ""; position: absolute; inset: 0; pointer-events: none; --c: var(--a); --l: 14px; --t: 2.5px; background: linear-gradient(var(--c), var(--c)) 0 0 / var(--l) var(--t), linear-gradient(var(--c), var(--c)) 0 0 / var(--t) var(--l), linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) var(--t), linear-gradient(var(--c), var(--c)) 100% 0 / var(--t) var(--l), linear-gradient(var(--c), var(--c)) 0 100% / var(--l) var(--t), linear-gradient(var(--c), var(--c)) 0 100% / var(--t) var(--l), linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) var(--t), linear-gradient(var(--c), var(--c)) 100% 100% / var(--t) var(--l); background-repeat: no-repeat; animation: hy-lock 2.4s ease-in-out infinite; } .hero-by .hero > .h-logo::after { content: "P1"; position: absolute; left: 50%; bottom: -3px; z-index: 2; transform: translateX(-50%); padding: 1px 7px; border-radius: 5px; font: 800 10px/1.4 var(--mono); letter-spacing: .08em; color: #fff; background: var(--a); box-shadow: 0 0 12px var(--a-60); } @keyframes hy-lock { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: .55; } } .portal.hero-by .hero > .who { font-size: clamp(24px, 7.4vw, 38px); text-transform: uppercase; letter-spacing: .01em; font-style: italic; align-self: end; } .hero-by .hero > .chips { align-self: start; } .hero-by .hero > .welcome { position: relative; padding-top: 32px; font-size: 13.5px; } .hero-by .hero > .welcome::before { content: ""; position: absolute; left: 26px; right: 0; top: 1px; height: 21px; background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(var(--panel), .85) 14px 16px) 0 0 / 100% 10px no-repeat, linear-gradient(90deg, var(--a), var(--a2)) 0 0 / 86% 10px no-repeat, linear-gradient(rgba(var(--tint), .1), rgba(var(--tint), .1)) 0 0 / 100% 10px no-repeat, linear-gradient(90deg, color-mix(in oklab, var(--a2) 60%, var(--hi)), var(--a2)) 0 100% / 30% 5px no-repeat, linear-gradient(rgba(var(--tint), .1), rgba(var(--tint), .1)) 0 100% / 100% 5px no-repeat; animation: hy-hp 7s ease-in-out infinite; } .hero-by .hero > .welcome::after { content: "HP\A XP"; white-space: pre; position: absolute; left: 0; top: -1px; font: 800 9px/12px var(--mono); letter-spacing: .06em; color: var(--mfg); } @keyframes hy-hp { 0%, 100% { background-size: 100% 10px, 86% 10px, 100% 10px, 30% 5px, 100% 5px; } 30% { background-size: 100% 10px, 58% 10px, 100% 10px, 55% 5px, 100% 5px; } 45% { background-size: 100% 10px, 64% 10px, 100% 10px, 62% 5px, 100% 5px; } 60% { background-size: 100% 10px, 96% 10px, 100% 10px, 80% 5px, 100% 5px; } 88% { background-size: 100% 10px, 92% 10px, 100% 10px, 100% 5px, 100% 5px; } } .hero-by .hero > .h-stats { display: grid; } .hero-by .h-st { border-radius: 0; background: var(--a-12); border-color: var(--a-30); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); } .hero-by .h-st b { font-family: var(--mono); } .hero-by .hero-cover { display: block; position: absolute; inset: 0; overflow: hidden; background-image: linear-gradient(var(--a-6) 1px, transparent 1px), linear-gradient(90deg, var(--a-6) 1px, transparent 1px); background-size: 18px 18px; } .hero-by .hero-cover::before { content: ""; position: absolute; inset: 9px; --c: var(--a-60); --l: 22px; --t: 2px; background: linear-gradient(var(--c), var(--c)) 0 0 / var(--l) var(--t), linear-gradient(var(--c), var(--c)) 0 0 / var(--t) var(--l), linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) var(--t), linear-gradient(var(--c), var(--c)) 100% 0 / var(--t) var(--l), linear-gradient(var(--c), var(--c)) 0 100% / var(--l) var(--t), linear-gradient(var(--c), var(--c)) 0 100% / var(--t) var(--l), linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) var(--t), linear-gradient(var(--c), var(--c)) 100% 100% / var(--t) var(--l); background-repeat: no-repeat; border-radius: calc(var(--r-2xl) - 8px); } .hero-by .hero-cover::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 60px; background: linear-gradient(180deg, transparent, var(--a-12) 85%, var(--a-45) 100%); animation: hy-scan 4.5s linear infinite; } @keyframes hy-scan { from { transform: translateY(-70px); } to { transform: translateY(480px); } } /* ============ BZ marquee lights: a sign board ringed with chasing bulbs ============ */ .portal.hero-bz { --bulb: color-mix(in oklab, var(--a2) 35%, #ffe7b0); background: radial-gradient(120% 80% at 50% 0%, color-mix(in oklab, var(--a) 24%, var(--solid)), var(--solid) 72%) padding-box, var(--edge) border-box; } .hero-bz .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "logo" "name" "chips" "text"; justify-items: center; text-align: center; padding: 34px 32px 38px; } .hero-bz .hero > .toprow { justify-self: stretch; } .hero-bz .hero > .chips { justify-content: center; } .portal.hero-bz .orb.s104 { --s: 58px; } .portal.hero-bz .hero > .who { font-size: clamp(34px, 10.5vw, 60px); max-width: 100%; text-transform: uppercase; letter-spacing: .04em; filter: drop-shadow(0 0 14px var(--a-60)); } .hero-bz .hero-cover { display: block; position: absolute; inset: 8px; border-radius: calc(var(--r-2xl) - 6px); box-shadow: inset 0 0 0 1px var(--a-30), inset 0 0 40px var(--a-12); } .hero-bz .hero-cover::before, .hero-bz .hero-cover::after { content: ""; position: absolute; inset: 0; padding: 18px; border-radius: inherit; -webkit-mask: radial-gradient(circle, #000 0 3px, rgba(0,0,0,.35) 4px, transparent 7px) 0 0 / 18px 18px round, linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: source-in, xor; mask: radial-gradient(circle, #000 0 3px, rgba(0,0,0,.35) 4px, transparent 7px) 0 0 / 18px 18px round, linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: intersect, exclude; } .hero-bz .hero-cover::before { background: var(--bulb); opacity: .3; } .hero-bz .hero-cover::after { background: repeating-conic-gradient(from var(--hy-ang), var(--bulb) 0deg, transparent 11deg 19deg, var(--bulb) 30deg); animation: hy-chase 5s linear infinite; } @keyframes hy-chase { to { --hy-ang: 360deg; } } [data-mode="light"] .portal.hero-bz { --bulb: color-mix(in oklab, var(--a) 80%, #000); } /* ============ CA now playing: album-art logo, spinning record, live progress bar ============ */ .hero-ca .hero { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "top top" "logo name" "logo chips" "text text"; column-gap: 14px; } .hero-ca .hero > .h-logo { position: relative; padding-right: 34px; } .portal.hero-ca .orb.s104 { --s: 84px; } .hero-ca .orb .ball { border-radius: 14px; box-shadow: 0 14px 30px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--tint), .12); } .hero-ca .orb .halo { display: none; } .hero-ca .hero > .h-logo::before { content: ""; position: absolute; left: 3px; top: 50%; width: 78px; height: 78px; margin-top: -39px; border-radius: 50%; background: radial-gradient(circle, #0d0d12 0 4%, var(--a) 5% 26%, #0d0d12 27% 30%, transparent 31%), conic-gradient(from 20deg, rgba(255,255,255,.2), transparent 10% 40%, rgba(255,255,255,.16) 50%, transparent 60% 90%, rgba(255,255,255,.2)), repeating-radial-gradient(circle, #121218 0 1.5px, #1d1d27 1.5px 3px); box-shadow: 0 6px 18px -6px rgba(0,0,0,.6); transform: translateX(32px); animation: hy-vinyl 2.6s linear infinite; } @keyframes hy-vinyl { to { transform: translateX(32px) rotate(360deg); } } .hero-ca .hero > .h-logo::after { content: ""; position: absolute; z-index: 2; left: 7px; top: 50%; margin-top: 12px; width: 26px; height: 22px; border-radius: 7px; background: linear-gradient(#fff, #fff) 6px calc(100% - 5px) / 3px 8px no-repeat, linear-gradient(#fff, #fff) 11.5px calc(100% - 5px) / 3px 12px no-repeat, linear-gradient(#fff, #fff) 17px calc(100% - 5px) / 3px 6px no-repeat, rgba(0,0,0,.42); animation: hy-eq 1s ease-in-out infinite; } @keyframes hy-eq { 0%, 100% { background-size: 3px 8px, 3px 12px, 3px 6px, auto; } 25% { background-size: 3px 4px, 3px 7px, 3px 12px, auto; } 50% { background-size: 3px 12px, 3px 4px, 3px 9px, auto; } 75% { background-size: 3px 6px, 3px 11px, 3px 4px, auto; } } .portal.hero-ca .hero > .who { font-size: clamp(22px, 6.8vw, 34px); align-self: end; } .hero-ca .hero > .chips { align-self: start; } .hero-ca .hero > .welcome { position: relative; padding-top: 30px; font-size: 13.5px; } .hero-ca .hero > .welcome::before { content: ""; position: absolute; left: 40px; right: 40px; top: 2px; height: 12px; background: radial-gradient(circle, var(--hi) 0 4.5px, transparent 5.5px) 0% 50% / 12px 12px no-repeat, linear-gradient(90deg, var(--a), var(--a2)) 0 50% / 0% 4px no-repeat, linear-gradient(rgba(var(--tint), .15), rgba(var(--tint), .15)) 0 50% / 100% 4px no-repeat; animation: hy-progress 120s linear infinite; } @keyframes hy-progress { from { background-position: 0% 50%, 0 50%, 0 50%; background-size: 12px 12px, 0% 4px, 100% 4px; } to { background-position: 100% 50%, 0 50%, 0 50%; background-size: 12px 12px, 100% 4px, 100% 4px; } } .hero-ca .hero > .welcome::after { content: counter(hym) ":" counter(hys, decimal-leading-zero) " 2:00"; counter-reset: hym var(--hy-m) hys var(--hy-s); position: absolute; left: 0; right: 0; top: 0; font: 600 10.5px/16px var(--mono); color: var(--mfg); text-align: justify; text-align-last: justify; animation: hy-sec 60s steps(60, end) infinite, hy-min 120s steps(2, end) infinite; } @keyframes hy-sec { from { --hy-s: 0; } to { --hy-s: 60; } } @keyframes hy-min { from { --hy-m: 0; } to { --hy-m: 2; } } /* ============ CB breaking news: LIVE badge, lower-third slab and a scrolling ticker of the welcome line ============ */ .hero-cb .hero { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "top top" "logo name" "chips chips" "text text"; column-gap: 12px; padding: var(--pd) var(--pd) 0; } .portal.hero-cb .orb.s104 { --s: 46px; } .hero-cb .orb .halo { display: none; } .hero-cb .kicker::before { content: "LIVE"; display: inline-block; margin-right: 9px; padding: 2px 7px 2px 17px; border-radius: 5px; color: #fff; font-weight: 800; letter-spacing: .14em; background: radial-gradient(circle, #fff 0 2.6px, transparent 3.2px) 6px 50% / 7px 7px no-repeat, var(--bad); animation: hy-live 1.6s ease-out infinite; } @keyframes hy-live { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--bad) 60%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } } .hero-cb .hero::before { content: ""; grid-row: name; grid-column: 1 / -1; align-self: stretch; margin: -8px calc(-1 * var(--pd)); border-left: 4px solid var(--a); background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.14) 45%, transparent 60%) 0 0 / 300% 100% no-repeat, linear-gradient(90deg, var(--a-30), var(--a-12) 65%, transparent); animation: hy-slab .9s cubic-bezier(.2,.8,.2,1) both, hy-slab-shine 5s 1s ease-in-out infinite; } @keyframes hy-slab { from { transform: translateX(-100%); } } @keyframes hy-slab-shine { 0% { background-position: 120% 0, 0 0; } 50%, 100% { background-position: -30% 0, 0 0; } } .portal.hero-cb .hero > .who { font-size: clamp(26px, 8vw, 40px); } .hero-cb .hero > .chips { margin-top: 6px; } .hero-cb .hero > .welcome { position: relative; z-index: 1; justify-self: start; width: max-content; max-width: none; margin: 6px 0 0; padding: 11px 0 11px calc(100% + 24px); white-space: nowrap; font-size: 13.5px; line-height: 18px; color: var(--fg); animation: hy-ticker 24s linear infinite; } @keyframes hy-ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } } .hero-cb .hero::after { content: "NEWS"; grid-area: text; z-index: 2; align-self: end; justify-self: start; margin: 0 0 0 calc(-1 * var(--pd)); padding: 0 12px 0 var(--pd); font: 800 11px/40px var(--body); letter-spacing: .16em; color: #fff; background: var(--grad); box-shadow: 8px 0 14px -4px rgba(var(--panel), .9); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); } .hero-cb .hero-cover { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: rgba(var(--panel), .7); border-top: 1px solid var(--a-45); } /* ============ CC sound wave: a scrolling voice-note waveform under a glowing playhead ============ */ .hero-cc .hero { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "top top" "logo name" "logo chips" "wave wave" "text text"; } .portal.hero-cc .orb.s104 { --s: 70px; } .hero-cc .orb .ball { animation: hy-thump 1.25s ease-in-out infinite; } @keyframes hy-thump { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.07); } 24% { transform: scale(.99); } } .portal.hero-cc .hero > .who { font-size: clamp(24px, 7.4vw, 36px); align-self: end; } .hero-cc .hero > .chips { align-self: start; } .hero-cc .hero::before { content: ""; grid-area: wave; height: 50px; margin: 2px 0; background: linear-gradient(90deg, var(--a), var(--a2) 50%, rgba(var(--tint), .22) 50%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='48' viewBox='0 0 200 48'%3E%3Cg fill='%23fff'%3E%3Crect x='1' y='20.5' width='2.2' height='7' rx='1.1'/%3E%3Crect x='5' y='17.1' width='2.2' height='13.8' rx='1.1'/%3E%3Crect x='9' y='14.5' width='2.2' height='18.9' rx='1.1'/%3E%3Crect x='13' y='6.2' width='2.2' height='35.6' rx='1.1'/%3E%3Crect x='17' y='8.6' width='2.2' height='30.8' rx='1.1'/%3E%3Crect x='21' y='9.8' width='2.2' height='28.4' rx='1.1'/%3E%3Crect x='25' y='13.9' width='2.2' height='20.2' rx='1.1'/%3E%3Crect x='29' y='11.3' width='2.2' height='25.3' rx='1.1'/%3E%3Crect x='33' y='13' width='2.2' height='22' rx='1.1'/%3E%3Crect x='37' y='19.9' width='2.2' height='8.1' rx='1.1'/%3E%3Crect x='41' y='14.9' width='2.2' height='18.2' rx='1.1'/%3E%3Crect x='45' y='9.4' width='2.2' height='29.2' rx='1.1'/%3E%3Crect x='49' y='9.9' width='2.2' height='28.2' rx='1.1'/%3E%3Crect x='53' y='7.3' width='2.2' height='33.3' rx='1.1'/%3E%3Crect x='57' y='10.5' width='2.2' height='27' rx='1.1'/%3E%3Crect x='61' y='12.3' width='2.2' height='23.3' rx='1.1'/%3E%3Crect x='65' y='8.7' width='2.2' height='30.5' rx='1.1'/%3E%3Crect x='69' y='16.2' width='2.2' height='15.6' rx='1.1'/%3E%3Crect x='73' y='17.9' width='2.2' height='12.1' rx='1.1'/%3E%3Crect x='77' y='12.4' width='2.2' height='23.3' rx='1.1'/%3E%3Crect x='81' y='12.5' width='2.2' height='23' rx='1.1'/%3E%3Crect x='85' y='9.7' width='2.2' height='28.5' rx='1.1'/%3E%3Crect x='89' y='12' width='2.2' height='24' rx='1.1'/%3E%3Crect x='93' y='9.2' width='2.2' height='29.5' rx='1.1'/%3E%3Crect x='97' y='12.1' width='2.2' height='23.9' rx='1.1'/%3E%3Crect x='101' y='13.1' width='2.2' height='21.7' rx='1.1'/%3E%3Crect x='105' y='16.2' width='2.2' height='15.5' rx='1.1'/%3E%3Crect x='109' y='19.7' width='2.2' height='8.6' rx='1.1'/%3E%3Crect x='113' y='16.6' width='2.2' height='14.8' rx='1.1'/%3E%3Crect x='117' y='12.6' width='2.2' height='22.8' rx='1.1'/%3E%3Crect x='121' y='9.5' width='2.2' height='29' rx='1.1'/%3E%3Crect x='125' y='9.7' width='2.2' height='28.6' rx='1.1'/%3E%3Crect x='129' y='8.4' width='2.2' height='31.3' rx='1.1'/%3E%3Crect x='133' y='14' width='2.2' height='20' rx='1.1'/%3E%3Crect x='137' y='10.8' width='2.2' height='26.3' rx='1.1'/%3E%3Crect x='141' y='16.8' width='2.2' height='14.3' rx='1.1'/%3E%3Crect x='145' y='18.4' width='2.2' height='11.1' rx='1.1'/%3E%3Crect x='149' y='15' width='2.2' height='18' rx='1.1'/%3E%3Crect x='153' y='8' width='2.2' height='32.1' rx='1.1'/%3E%3Crect x='157' y='6.2' width='2.2' height='35.5' rx='1.1'/%3E%3Crect x='161' y='13' width='2.2' height='22' rx='1.1'/%3E%3Crect x='165' y='4.6' width='2.2' height='38.7' rx='1.1'/%3E%3Crect x='169' y='8.5' width='2.2' height='30.9' rx='1.1'/%3E%3Crect x='173' y='10.5' width='2.2' height='27.1' rx='1.1'/%3E%3Crect x='177' y='17.5' width='2.2' height='13' rx='1.1'/%3E%3Crect x='181' y='19.9' width='2.2' height='8.2' rx='1.1'/%3E%3Crect x='185' y='12.8' width='2.2' height='22.5' rx='1.1'/%3E%3Crect x='189' y='15.1' width='2.2' height='17.8' rx='1.1'/%3E%3Crect x='193' y='14.1' width='2.2' height='19.8' rx='1.1'/%3E%3Crect x='197' y='7.7' width='2.2' height='32.6' rx='1.1'/%3E%3C/g%3E%3C/svg%3E") 0 50% / 200px 48px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='48' viewBox='0 0 200 48'%3E%3Cg fill='%23fff'%3E%3Crect x='1' y='20.5' width='2.2' height='7' rx='1.1'/%3E%3Crect x='5' y='17.1' width='2.2' height='13.8' rx='1.1'/%3E%3Crect x='9' y='14.5' width='2.2' height='18.9' rx='1.1'/%3E%3Crect x='13' y='6.2' width='2.2' height='35.6' rx='1.1'/%3E%3Crect x='17' y='8.6' width='2.2' height='30.8' rx='1.1'/%3E%3Crect x='21' y='9.8' width='2.2' height='28.4' rx='1.1'/%3E%3Crect x='25' y='13.9' width='2.2' height='20.2' rx='1.1'/%3E%3Crect x='29' y='11.3' width='2.2' height='25.3' rx='1.1'/%3E%3Crect x='33' y='13' width='2.2' height='22' rx='1.1'/%3E%3Crect x='37' y='19.9' width='2.2' height='8.1' rx='1.1'/%3E%3Crect x='41' y='14.9' width='2.2' height='18.2' rx='1.1'/%3E%3Crect x='45' y='9.4' width='2.2' height='29.2' rx='1.1'/%3E%3Crect x='49' y='9.9' width='2.2' height='28.2' rx='1.1'/%3E%3Crect x='53' y='7.3' width='2.2' height='33.3' rx='1.1'/%3E%3Crect x='57' y='10.5' width='2.2' height='27' rx='1.1'/%3E%3Crect x='61' y='12.3' width='2.2' height='23.3' rx='1.1'/%3E%3Crect x='65' y='8.7' width='2.2' height='30.5' rx='1.1'/%3E%3Crect x='69' y='16.2' width='2.2' height='15.6' rx='1.1'/%3E%3Crect x='73' y='17.9' width='2.2' height='12.1' rx='1.1'/%3E%3Crect x='77' y='12.4' width='2.2' height='23.3' rx='1.1'/%3E%3Crect x='81' y='12.5' width='2.2' height='23' rx='1.1'/%3E%3Crect x='85' y='9.7' width='2.2' height='28.5' rx='1.1'/%3E%3Crect x='89' y='12' width='2.2' height='24' rx='1.1'/%3E%3Crect x='93' y='9.2' width='2.2' height='29.5' rx='1.1'/%3E%3Crect x='97' y='12.1' width='2.2' height='23.9' rx='1.1'/%3E%3Crect x='101' y='13.1' width='2.2' height='21.7' rx='1.1'/%3E%3Crect x='105' y='16.2' width='2.2' height='15.5' rx='1.1'/%3E%3Crect x='109' y='19.7' width='2.2' height='8.6' rx='1.1'/%3E%3Crect x='113' y='16.6' width='2.2' height='14.8' rx='1.1'/%3E%3Crect x='117' y='12.6' width='2.2' height='22.8' rx='1.1'/%3E%3Crect x='121' y='9.5' width='2.2' height='29' rx='1.1'/%3E%3Crect x='125' y='9.7' width='2.2' height='28.6' rx='1.1'/%3E%3Crect x='129' y='8.4' width='2.2' height='31.3' rx='1.1'/%3E%3Crect x='133' y='14' width='2.2' height='20' rx='1.1'/%3E%3Crect x='137' y='10.8' width='2.2' height='26.3' rx='1.1'/%3E%3Crect x='141' y='16.8' width='2.2' height='14.3' rx='1.1'/%3E%3Crect x='145' y='18.4' width='2.2' height='11.1' rx='1.1'/%3E%3Crect x='149' y='15' width='2.2' height='18' rx='1.1'/%3E%3Crect x='153' y='8' width='2.2' height='32.1' rx='1.1'/%3E%3Crect x='157' y='6.2' width='2.2' height='35.5' rx='1.1'/%3E%3Crect x='161' y='13' width='2.2' height='22' rx='1.1'/%3E%3Crect x='165' y='4.6' width='2.2' height='38.7' rx='1.1'/%3E%3Crect x='169' y='8.5' width='2.2' height='30.9' rx='1.1'/%3E%3Crect x='173' y='10.5' width='2.2' height='27.1' rx='1.1'/%3E%3Crect x='177' y='17.5' width='2.2' height='13' rx='1.1'/%3E%3Crect x='181' y='19.9' width='2.2' height='8.2' rx='1.1'/%3E%3Crect x='185' y='12.8' width='2.2' height='22.5' rx='1.1'/%3E%3Crect x='189' y='15.1' width='2.2' height='17.8' rx='1.1'/%3E%3Crect x='193' y='14.1' width='2.2' height='19.8' rx='1.1'/%3E%3Crect x='197' y='7.7' width='2.2' height='32.6' rx='1.1'/%3E%3C/g%3E%3C/svg%3E") 0 50% / 200px 48px repeat-x; animation: hy-wave 7s linear infinite, hy-loud .7s ease-in-out infinite alternate; } @keyframes hy-wave { to { -webkit-mask-position: -400px 50%; mask-position: -400px 50%; } } @keyframes hy-loud { from { transform: scaleY(.82); } to { transform: scaleY(1.06); } } .hero-cc .hero::after { content: ""; grid-area: wave; justify-self: center; align-self: stretch; width: 2px; margin: -4px 0; border-radius: 2px; background: var(--hi); box-shadow: 0 0 10px var(--a2), 0 0 2px var(--hi); } .hero-cc .hero-cover { display: block; position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 62%, var(--a-12), transparent 70%); } /* ============ CD foil card: a framed trading card with holographic foil sweeping across it ============ */ .portal.hero-cd { background: linear-gradient(160deg, color-mix(in oklab, var(--a) 20%, var(--solid)), var(--solid) 55%, color-mix(in oklab, var(--a2) 16%, var(--solid))) padding-box, var(--edge) border-box; } .hero-cd .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "logo" "name" "chips" "text"; justify-items: center; text-align: center; padding: 26px 28px 30px; } .hero-cd .hero > .toprow { justify-self: stretch; } .hero-cd .hero > .chips { justify-content: center; } .hero-cd .hero > .h-logo { position: relative; justify-self: stretch; justify-content: center; padding: 16px 0; perspective: 500px; } .hero-cd .hero > .h-logo::before { content: ""; position: absolute; inset: 0 -6px; border-radius: 14px; border: 1px solid var(--a-45); background: repeating-conic-gradient(from var(--hy-ang), var(--a-20) 0 5deg, transparent 5deg 12deg), radial-gradient(closest-side, var(--a-30), transparent); box-shadow: inset 0 0 30px rgba(var(--panel), .6); animation: hy-chase 24s linear infinite; } .portal.hero-cd .orb.s104 { --s: 92px; } .hero-cd .orb { animation: hy-tilt 6s ease-in-out infinite; } @keyframes hy-tilt { 0%, 100% { transform: rotateY(-16deg) rotateX(5deg); } 50% { transform: rotateY(16deg) rotateX(-5deg); } } .hero-cd .hero::before { content: ""; grid-area: name; justify-self: stretch; margin: -4px -10px; background: var(--a-12); border-block: 1px solid var(--a-45); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%); } .portal.hero-cd .hero > .who { font-size: clamp(26px, 8vw, 40px); max-width: calc(100% - 28px); text-transform: uppercase; letter-spacing: .03em; } .hero-cd .hero-cover { display: block; position: absolute; inset: 9px; padding: 2px; border-radius: calc(var(--r-2xl) - 6px); background: linear-gradient(135deg, var(--a), var(--a2), var(--hi), var(--a2), var(--a)) 0 0 / 300% 300%; animation: hy-sheen 8s ease-in-out infinite alternate; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } @keyframes hy-sheen { from { background-position: 0% 0%; } to { background-position: 100% 100%; } } .hero-cd::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; mix-blend-mode: overlay; opacity: .6; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 47%, transparent 58%) 0 0 / 300% 100% no-repeat, repeating-linear-gradient(125deg, var(--a) 0, var(--a2) 60px, #fff 110px, var(--a) 170px) 0 0 / 200% 200%; animation: hy-foil 7s ease-in-out infinite alternate; } @keyframes hy-foil { from { background-position: 110% 0, 0 0; } to { background-position: -10% 0, 100% 100%; } } [data-mode="light"] .hero-cd::after { mix-blend-mode: soft-light; opacity: .7; } /* ============ CE liquid chrome: a polished-metal name with a glint and slow liquid reflections ============ */ .hero-ce .hero { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "top top" "name name" "chips chips" "logo text"; } .portal.hero-ce .orb.s104 { --s: 66px; } .hero-ce .orb .halo { background: conic-gradient(#fff, #6b6e7d, #f4f5fa, #2f313c, #fff, #8d90a0, #fff); opacity: 1; animation-duration: 5s; } .portal.hero-ce .hero > .who.gtext { font-size: clamp(40px, 12.5vw, 70px); line-height: 1.05; letter-spacing: -.02em; background-image: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.95) 49%, transparent 60%), linear-gradient(180deg, #fff 0%, color-mix(in oklab, var(--a) 16%, #dfe1ea) 38%, color-mix(in oklab, var(--a) 35%, #3a3c49) 52%, color-mix(in oklab, var(--a) 22%, #a3a7b8) 72%, #f6f7fb 100%); background-size: 300% 100%, 100% 100%; background-repeat: no-repeat; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)) drop-shadow(0 0 18px var(--a-30)); animation: hy-glint 5s ease-in-out infinite; } @keyframes hy-glint { 0% { background-position: 130% 0, 0 0; } 55%, 100% { background-position: -30% 0, 0 0; } } [data-mode="light"] .portal.hero-ce .hero > .who.gtext { background-image: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.9) 49%, transparent 60%), linear-gradient(180deg, #8a8d9c 0%, color-mix(in oklab, var(--a) 25%, #3a3c48) 42%, #101117 52%, color-mix(in oklab, var(--a) 30%, #5d6070) 75%, #2b2d37 100%); filter: drop-shadow(0 1px 0 rgba(255,255,255,.9)); } .hero-ce .hero-cover { display: block; position: absolute; inset: -40%; opacity: .9; background: radial-gradient(22% 16% at 30% 38%, rgba(var(--tint), .16), transparent 70%), radial-gradient(26% 18% at 68% 58%, var(--a-30), transparent 70%), radial-gradient(18% 22% at 46% 70%, rgba(var(--tint), .1), transparent 70%), radial-gradient(24% 16% at 60% 30%, var(--a2-20), transparent 70%); animation: hy-spin 26s linear infinite; } .hero-ce .hero-fx { display: block; } .hero-ce .hero-fx i { display: none; } .hero-ce .hero-fx i:nth-child(1) { display: block; left: -20% !important; top: 22% !important; width: 140%; height: 60px; transform: rotate(-8deg); background: linear-gradient(180deg, transparent, rgba(var(--tint), .07) 45%, rgba(var(--tint), .14) 50%, rgba(var(--tint), .07) 55%, transparent); animation: hy-ripple 9s ease-in-out infinite alternate; } @keyframes hy-ripple { from { transform: rotate(-8deg) translateY(-30px) scaleY(.7); } to { transform: rotate(-3deg) translateY(90px) scaleY(1.3); } } /* ============ CF glass panes: content on a frosted glass slab, colour drifting behind it ============ */ .hero-cf .hero { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "top top" "logo name" "logo chips" "text text"; padding: 26px; } .portal.hero-cf .orb.s104 { --s: 68px; } .portal.hero-cf .hero > .who { font-size: clamp(24px, 7.4vw, 36px); align-self: end; } .hero-cf .hero > .chips { align-self: start; } .hero-cf .hero::before { content: ""; grid-row: 1 / -1; grid-column: 1 / -1; margin: -12px; border-radius: calc(var(--r-2xl) - 8px); background: linear-gradient(135deg, rgba(var(--tint), .13), rgba(var(--tint), .03) 60%, rgba(var(--tint), .08)); border: 1px solid rgba(var(--tint), .2); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(var(--tint), .06), 0 24px 40px -22px rgba(0,0,0,.55); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); } .hero-cf .hero::after { content: ""; grid-row: 1 / -1; grid-column: 1 / -1; margin: -12px; border-radius: calc(var(--r-2xl) - 8px); pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.12) 48%, rgba(255,255,255,.03) 52%, transparent 58%) 0 0 / 300% 100% no-repeat; animation: hy-glass 7s ease-in-out infinite; } @keyframes hy-glass { 0% { background-position: 130% 0; } 60%, 100% { background-position: -30% 0; } } .hero-cf .hero-fx { display: block; } .hero-cf .hero-fx i { display: none; } .hero-cf .hero-fx i:nth-child(-n+4) { display: block; width: 210px; height: 210px; margin: -105px; border-radius: 50%; background: radial-gradient(closest-side, var(--a), transparent); opacity: .9; } .hero-cf .hero-fx i:nth-child(1) { left: 12% !important; top: 18% !important; animation: hy-drift1 12s ease-in-out infinite alternate; } .hero-cf .hero-fx i:nth-child(2) { left: 82% !important; top: 40% !important; background: radial-gradient(closest-side, var(--a2), transparent); animation: hy-drift2 10s ease-in-out infinite alternate; } .hero-cf .hero-fx i:nth-child(3) { left: 40% !important; top: 90% !important; background: radial-gradient(closest-side, color-mix(in oklab, var(--a) 50%, #22d3ee), transparent); animation: hy-drift1 14s ease-in-out infinite alternate-reverse; } .hero-cf .hero-fx i:nth-child(4) { left: 60% !important; top: 0% !important; width: 120px; height: 120px; margin: -60px; background: radial-gradient(closest-side, color-mix(in oklab, var(--a2) 60%, #fff), transparent); animation: hy-drift2 9s ease-in-out infinite alternate-reverse; } @keyframes hy-drift1 { from { transform: translate(0, 0); } to { transform: translate(120px, 40px); } } @keyframes hy-drift2 { from { transform: translate(0, 0); } to { transform: translate(-130px, -30px); } } .hero-cf .hero-cover { display: block; position: absolute; right: -30px; top: -44px; width: 130px; height: 96px; border-radius: 18px; transform: rotate(14deg); background: linear-gradient(135deg, rgba(var(--tint), .2), rgba(var(--tint), .04)); border: 1px solid rgba(var(--tint), .25); animation: hy-bob 6s ease-in-out infinite; } @keyframes hy-bob { 0%, 100% { transform: rotate(14deg) translateY(0); } 50% { transform: rotate(10deg) translateY(10px); } } /* ============ CG pixel arcade: stepped pixel corners, coins, a scrolling ground and a blinking cursor ============ */ .portal.hero-cg { border-radius: 0; clip-path: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px)); background: linear-gradient(180deg, color-mix(in oklab, var(--a) 16%, var(--solid)), var(--solid)) padding-box, var(--edge) border-box; } .hero-cg .hero { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "top top" "logo name" "logo chips" "text text"; padding-bottom: 54px; } .portal.hero-cg .orb.s104 { --s: 64px; } .hero-cg .orb .halo { display: none; } .hero-cg .orb .ball { border-radius: 0; clip-path: polygon(0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px)); } .hero-cg .orb { animation: hy-jump 2.8s steps(1, end) infinite; } @keyframes hy-jump { 0%, 30%, 100% { transform: translateY(0); } 6%, 24% { transform: translateY(-6px); } 10%, 20% { transform: translateY(-12px); } 14% { transform: translateY(-15px); } } .hero-cg .toprow .kicker { font-family: var(--mono); } .portal.hero-cg .hero > .who { font-size: clamp(24px, 7.4vw, 36px); text-transform: uppercase; letter-spacing: .02em; align-self: end; filter: drop-shadow(3px 3px 0 var(--a-45)); } .hero-cg .hero > .who::after { content: ""; display: inline-block; width: .45em; height: .72em; margin-left: .12em; vertical-align: -.04em; background: var(--a2); animation: hy-blink 1s steps(1, end) infinite; } .hero-cg .hero > .chips { align-self: start; } .hero-cg .chips .status, .hero-cg .chips .pill, .hero-cg .iconbtn { border-radius: 0; } .hero-cg .hero > .welcome { font-family: var(--mono); font-size: 12.5px; } .hero-cg .hero-cover { display: block; position: absolute; inset: 0; background-image: linear-gradient(var(--a-6) 2px, transparent 2px), linear-gradient(90deg, var(--a-6) 2px, transparent 2px); background-size: 8px 8px; } .hero-cg .hero-cover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; border-top: 4px solid var(--a); background: conic-gradient(var(--a-60) 25%, var(--a-20) 0 50%, var(--a-60) 0 75%, var(--a-20) 0) 0 0 / 12px 12px; animation: hy-ground 1.2s steps(6, end) infinite; } @keyframes hy-ground { to { background-position: -24px 0; } } .hero-cg .hero-fx { display: block; } .hero-cg .hero-fx i { width: 4px; height: 4px; background: var(--hi); opacity: .7; animation: hy-pxstar 2s steps(2, end) infinite; } @keyframes hy-pxstar { 50% { opacity: .1; } } .hero-cg .hero-fx i:nth-child(n+11) { top: auto !important; bottom: 24px; width: 12px; height: 16px; opacity: 1; background: linear-gradient(90deg, transparent 0 4px, color-mix(in oklab, var(--warn) 60%, #fff) 4px 6px, transparent 6px) , var(--warn); clip-path: polygon(25% 0, 75% 0, 75% 12%, 100% 12%, 100% 88%, 75% 88%, 75% 100%, 25% 100%, 25% 88%, 0 88%, 0 12%, 25% 12%); animation: hy-coin 1s steps(4, end) infinite; } .hero-cg .hero-fx i:nth-child(11) { left: 58% !important; } .hero-cg .hero-fx i:nth-child(12) { left: 66% !important; } .hero-cg .hero-fx i:nth-child(13) { left: 74% !important; } .hero-cg .hero-fx i:nth-child(14) { left: 82% !important; } @keyframes hy-coin { 0% { transform: translateY(0) scaleX(1); } 25% { transform: translateY(-4px) scaleX(.6); } 50% { transform: translateY(-6px) scaleX(.2); } 75% { transform: translateY(-4px) scaleX(.6); } } /* ============ CH terminal boot: a terminal window that types the name in ============ */ .portal.hero-ch { background: linear-gradient(180deg, color-mix(in oklab, var(--a) 10%, #0c0d12), #08090d) padding-box, var(--edge) border-box; } .hero-ch .hero { padding-top: 48px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top top" "name logo" "chips logo" "text text"; row-gap: 8px; } .portal.hero-ch .orb.s104 { --s: 54px; } .hero-ch .orb .halo { display: none; } .hero-ch .orb .ball { border-radius: 12px; } .hero-ch .hero-cover { display: block; position: absolute; left: 0; right: 0; top: 0; height: 34px; border-bottom: 1px solid rgba(255,255,255,.08); background: radial-gradient(circle, var(--bad) 0 5px, transparent 5.5px) 12px 50% / 12px 12px no-repeat, radial-gradient(circle, var(--warn) 0 5px, transparent 5.5px) 30px 50% / 12px 12px no-repeat, radial-gradient(circle, var(--ok) 0 5px, transparent 5.5px) 48px 50% / 12px 12px no-repeat, rgba(255,255,255,.045); } .hero-ch .hero-cover::after { content: "~ — zsh"; position: absolute; inset: 0; text-align: center; font: 600 11px/34px var(--mono); color: var(--dim); } .hero-ch .hero-cover::before { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 400px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); } .hero-ch .toprow .kicker { font-family: var(--mono); letter-spacing: .08em; color: var(--ok); } .hero-ch .toprow .kicker::before { content: "$ "; color: var(--mfg); } .hero-ch .toprow .kicker::after { content: " ⠋"; color: var(--a); animation: hy-spinner 1s steps(1, end) infinite; } @keyframes hy-spinner { 0% { content: " ⠋"; } 12.5% { content: " ⠙"; } 25% { content: " ⠹"; } 37.5% { content: " ⠸"; } 50% { content: " ⠼"; } 62.5% { content: " ⠴"; } 75% { content: " ⠦"; } 87.5% { content: " ⠧"; } } .portal.hero-ch .hero > .who { justify-self: start; max-width: 100%; font-family: var(--mono); font-size: clamp(24px, 7.4vw, 38px); letter-spacing: -.02em; animation: hy-type 1.8s .3s steps(16, end) both; } .hero-ch .hero > .who::before { content: "> "; } .hero-ch .hero > .who::after { content: ""; display: inline-block; width: .5em; height: .9em; margin-left: .08em; vertical-align: -.1em; background: var(--a); animation: hy-blink 1.05s steps(1, end) infinite; } @keyframes hy-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } .hero-ch .chips .status, .hero-ch .chips .pill { border-radius: 6px; font-family: var(--mono); } .hero-ch .hero > .welcome { font-family: var(--mono); font-size: 12.5px; color: color-mix(in oklab, var(--fg) 80%, transparent); animation: hy-fadein .6s 1.9s both; } .hero-ch .hero > .welcome::before { content: "[ OK ] "; color: var(--ok); font-weight: 700; } @keyframes hy-fadein { from { opacity: 0; } } .hero-ch .hero-fx { display: block; } .hero-ch .hero-fx i { display: none; } .hero-ch .hero-fx i:nth-child(1) { display: block; left: 0 !important; top: 34px !important; width: 100%; height: 50px; background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--ok) 10%, transparent)); animation: hy-scan 5s linear infinite; } /* ============ CI constellation: stars that join up, line by line, into a constellation ============ */ .portal.hero-ci { background: radial-gradient(110% 90% at 85% 0%, color-mix(in oklab, var(--a) 22%, var(--solid)), var(--solid) 72%) padding-box, var(--edge) border-box; } .hero-ci .hero { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "top top" "logo name" "logo chips" "text text"; } .portal.hero-ci .orb.s104 { --s: 64px; } .portal.hero-ci .hero > .who { font-size: clamp(24px, 7.4vw, 36px); align-self: end; } .hero-ci .hero > .chips { align-self: start; } .hero-ci .hero-cover { display: block; position: absolute; inset: 0; animation: hy-dust 5s ease-in-out infinite alternate; background-image: radial-gradient(1.2px 1.2px at 12% 18%, rgba(var(--tint), .8), transparent), radial-gradient(1px 1px at 28% 64%, rgba(var(--tint), .6), transparent), radial-gradient(1.4px 1.4px at 47% 12%, rgba(var(--tint), .7), transparent), radial-gradient(1px 1px at 63% 88%, rgba(var(--tint), .6), transparent), radial-gradient(1.2px 1.2px at 88% 76%, rgba(var(--tint), .7), transparent), radial-gradient(1px 1px at 8% 86%, rgba(var(--tint), .5), transparent), radial-gradient(1.3px 1.3px at 36% 38%, rgba(var(--tint), .5), transparent), radial-gradient(1px 1px at 55% 50%, rgba(var(--tint), .6), transparent), radial-gradient(1.2px 1.2px at 94% 8%, rgba(var(--tint), .6), transparent), radial-gradient(1px 1px at 76% 96%, rgba(var(--tint), .5), transparent); } @keyframes hy-dust { from { opacity: .45; } to { opacity: 1; } } .hero-ci .hero-fx { display: block; } .hero-ci .hero-fx i { height: 1.5px; margin-top: -.75px; transform-origin: 0 50%; transform: rotate(var(--r)); background: linear-gradient(90deg, color-mix(in oklab, var(--a2) 70%, var(--hi)), var(--a)); opacity: .75; animation: hy-draw 10s ease-in-out infinite; } @keyframes hy-draw { 0% { transform: rotate(var(--r)) scaleX(0); opacity: .9; } 7%, 78% { transform: rotate(var(--r)) scaleX(1); opacity: .9; } 90%, 100% { transform: rotate(var(--r)) scaleX(1); opacity: 0; } } .hero-ci .hero-fx i:nth-child(1) { left: calc(100% - 168px) !important; top: 58px !important; width: 39px; --r: 24deg; animation-delay: 0s !important; } .hero-ci .hero-fx i:nth-child(2) { left: calc(100% - 132px) !important; top: 74px !important; width: 30px; --r: -23.2deg; animation-delay: .55s !important; } .hero-ci .hero-fx i:nth-child(3) { left: calc(100% - 104px) !important; top: 62px !important; width: 38px; --r: 27.9deg; animation-delay: 1.1s !important; } .hero-ci .hero-fx i:nth-child(4) { left: calc(100% - 70px) !important; top: 80px !important; width: 47px; --r: 50.2deg; animation-delay: 1.65s !important; } .hero-ci .hero-fx i:nth-child(5) { left: calc(100% - 40px) !important; top: 116px !important; width: 51px; --r: 138.2deg; animation-delay: 2.2s !important; } .hero-ci .hero-fx i:nth-child(6) { left: calc(100% - 78px) !important; top: 150px !important; width: 43px; --r: -142.6deg; animation-delay: 2.75s !important; } .hero-ci .hero-fx i:nth-child(7) { left: calc(100% - 112px) !important; top: 124px !important; width: 61px; --r: -46.3deg; animation-delay: 3.3s !important; } .hero-ci .hero-fx i:nth-child(n+8) { width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--hi); box-shadow: 0 0 6px var(--hi), 0 0 14px var(--a2); transform: none; opacity: 1; animation: hy-twinkle 2.6s ease-in-out infinite; } .hero-ci .hero-fx i:nth-child(8) { left: calc(100% - 168px) !important; top: 58px !important; } .hero-ci .hero-fx i:nth-child(9) { left: calc(100% - 132px) !important; top: 74px !important; width: 4px; height: 4px; margin: -2px; } .hero-ci .hero-fx i:nth-child(10) { left: calc(100% - 104px) !important; top: 62px !important; } .hero-ci .hero-fx i:nth-child(11) { left: calc(100% - 70px) !important; top: 80px !important; width: 8px; height: 8px; margin: -4px; } .hero-ci .hero-fx i:nth-child(12) { left: calc(100% - 40px) !important; top: 116px !important; } .hero-ci .hero-fx i:nth-child(13) { left: calc(100% - 78px) !important; top: 150px !important; width: 4px; height: 4px; margin: -2px; } .hero-ci .hero-fx i:nth-child(14) { left: calc(100% - 112px) !important; top: 124px !important; } [data-mode="light"] .hero-ci .hero-fx i:nth-child(n+8) { background: var(--a); box-shadow: 0 0 8px var(--a-60); } /* ============ CJ particle vortex: sparks spiral into the logo ============ */ .hero-cj .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "logo" "name" "chips" "text"; justify-items: center; text-align: center; } .hero-cj .hero > .toprow { justify-self: stretch; } .hero-cj .hero > .chips { justify-content: center; } .portal.hero-cj .orb.s104 { --s: 92px; } .hero-cj .hero-cover { display: block; position: absolute; left: 50%; top: 116px; width: 380px; height: 380px; margin: -190px 0 0 -190px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--a-20) 0 8deg, transparent 18deg 40deg), radial-gradient(closest-side, var(--a-30), transparent 60%); -webkit-mask: radial-gradient(closest-side, #000 25%, transparent 85%); mask: radial-gradient(closest-side, #000 25%, transparent 85%); animation: hy-spin 9s linear infinite; } .hero-cj .hero-fx { display: block; } .hero-cj .hero-fx i { left: 50% !important; top: 116px !important; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--a2); box-shadow: 0 0 8px var(--a2); opacity: 0; animation: hy-vortex 4s cubic-bezier(.45, 0, .85, .55) infinite; } @keyframes hy-vortex { 0% { transform: rotate(var(--s0)) translateX(var(--r0, 190px)) scale(1.3); opacity: 0; } 12% { opacity: 1; } 90% { opacity: .9; } 100% { transform: rotate(calc(var(--s0) + 400deg)) translateX(12px) scale(.15); opacity: 0; } } .hero-cj .hero-fx i:nth-child(1) { --s0: 0deg; animation-duration: 3.6s; } .hero-cj .hero-fx i:nth-child(2) { --s0: 26deg; animation-duration: 4.4s; --r0: 150px; } .hero-cj .hero-fx i:nth-child(3) { --s0: 52deg; animation-duration: 3.9s; background: var(--hi); } .hero-cj .hero-fx i:nth-child(4) { --s0: 78deg; animation-duration: 5s; --r0: 220px; } .hero-cj .hero-fx i:nth-child(5) { --s0: 104deg; animation-duration: 4.2s; } .hero-cj .hero-fx i:nth-child(6) { --s0: 130deg; animation-duration: 3.4s; background: var(--a); box-shadow: 0 0 8px var(--a); } .hero-cj .hero-fx i:nth-child(7) { --s0: 156deg; animation-duration: 4.7s; --r0: 170px; } .hero-cj .hero-fx i:nth-child(8) { --s0: 182deg; animation-duration: 3.8s; } .hero-cj .hero-fx i:nth-child(9) { --s0: 208deg; animation-duration: 4.5s; background: var(--hi); --r0: 210px; } .hero-cj .hero-fx i:nth-child(10) { --s0: 234deg; animation-duration: 3.7s; } .hero-cj .hero-fx i:nth-child(11) { --s0: 260deg; animation-duration: 5.2s; background: var(--a); box-shadow: 0 0 8px var(--a); } .hero-cj .hero-fx i:nth-child(12) { --s0: 286deg; animation-duration: 4.1s; --r0: 160px; } .hero-cj .hero-fx i:nth-child(13) { --s0: 312deg; animation-duration: 3.5s; } .hero-cj .hero-fx i:nth-child(14) { --s0: 338deg; animation-duration: 4.8s; --r0: 230px; } .hero-cj .hero-fx i:nth-child(3n) { width: 4px; height: 4px; margin: -2px; } /* ============ CK gyroscope: rings tumbling round the logo ============ */ .portal.hero-ck { background: radial-gradient(80% 90% at 15% 30%, var(--a-20), transparent 70%), linear-gradient(var(--surface), var(--surface)) padding-box, var(--edge) border-box; } .hero-ck .hero { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "top top" "logo name" "logo chips" "text text"; column-gap: 22px; } .hero-ck .hero > .h-logo { padding: 18px; perspective: 380px; } .portal.hero-ck .orb.s104 { --s: 68px; } .hero-ck .orb .halo { inset: -20px; opacity: 1; -webkit-mask: radial-gradient(closest-side, transparent 93%, #000 95%); mask: radial-gradient(closest-side, transparent 93%, #000 95%); background: conic-gradient(from 0deg, transparent, var(--a2) 20%, transparent 22%, transparent 60%, var(--a) 80%, transparent 82%), rgba(var(--tint), .12); animation: hy-gyro1 4s linear infinite; } @keyframes hy-gyro1 { from { transform: rotateX(70deg) rotateZ(0); } to { transform: rotateX(70deg) rotateZ(360deg); } } .hero-ck .orb::before, .hero-ck .orb::after { content: ""; position: absolute; inset: -14px; z-index: 2; border-radius: 50%; border: 2px solid var(--a-45); border-top-color: var(--a2); border-bottom-color: var(--a); animation: hy-gyro2 5s linear infinite; pointer-events: none; } .hero-ck .orb::after { inset: -8px; border-color: var(--a2-45); border-left-color: var(--hi); animation: hy-gyro3 3.6s linear infinite; } @keyframes hy-gyro2 { from { transform: rotateZ(35deg) rotateY(0); } to { transform: rotateZ(35deg) rotateY(360deg); } } @keyframes hy-gyro3 { from { transform: rotateZ(-40deg) rotateX(0); } to { transform: rotateZ(-40deg) rotateX(-360deg); } } .portal.hero-ck .hero > .who { font-size: clamp(24px, 7.4vw, 36px); align-self: end; } .hero-ck .hero > .chips { align-self: start; } /* ============ CL neon sign: a brick wall and a neon name that flickers on ============ */ .portal.hero-cl { background: radial-gradient(70% 55% at 50% 52%, var(--a-30), transparent 72%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30'%3E%3Cg fill='%23fff' fill-opacity='.045'%3E%3Crect x='1' y='1' width='28' height='13' rx='1'/%3E%3Crect x='31' y='1' width='28' height='13' rx='1' fill-opacity='.03'/%3E%3Crect x='-14' y='16' width='28' height='13' rx='1' fill-opacity='.035'/%3E%3Crect x='16' y='16' width='28' height='13' rx='1'/%3E%3Crect x='46' y='16' width='28' height='13' rx='1' fill-opacity='.035'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 60px 30px, linear-gradient(color-mix(in oklab, var(--a) 12%, #0e0b12), color-mix(in oklab, var(--a) 12%, #0e0b12)) padding-box, var(--edge) border-box; } .hero-cl .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "logo" "name" "chips" "text"; justify-items: center; text-align: center; padding: 30px 30px 32px; } .hero-cl .hero > .toprow { justify-self: stretch; } .hero-cl .hero > .chips { justify-content: center; } .portal.hero-cl .orb.s104 { --s: 52px; } .hero-cl .orb .halo { display: none; } .hero-cl .orb .ball { box-shadow: 0 0 0 2px color-mix(in oklab, var(--a2) 50%, #fff), 0 0 14px var(--a2), 0 0 30px var(--a2-45); } .hero-cl .toprow .kicker { color: color-mix(in oklab, var(--a2) 35%, #fff); text-shadow: 0 0 6px var(--a2), 0 0 14px var(--a2-45); animation: hy-buzz 9s 3s linear infinite; } .portal.hero-cl .hero > .who.gtext { font-size: clamp(34px, 10.5vw, 58px); max-width: 100%; background: none; -webkit-text-fill-color: color-mix(in oklab, var(--a) 22%, #fff); color: #fff; text-shadow: 0 0 2px rgba(255,255,255,.7), 0 0 8px var(--a), 0 0 18px var(--a), 0 0 40px var(--a-60); filter: none; padding: .2em .3em; margin: -.2em -.3em; animation: hy-neon-on 2.2s .2s linear both, hy-buzz 7s 2.6s linear infinite; } @keyframes hy-neon-on { 0% { opacity: .12; } 6% { opacity: 1; } 9% { opacity: .15; } 14% { opacity: .9; } 17% { opacity: .2; } 30% { opacity: 1; } 33% { opacity: .35; } 38%, 100% { opacity: 1; } } @keyframes hy-buzz { 0%, 61%, 63.5%, 66%, 100% { opacity: 1; } 62%, 65% { opacity: .45; } } .hero-cl .hero-cover { display: block; position: absolute; inset: 14px; border-radius: 22px; border: 2px solid color-mix(in oklab, var(--a2) 45%, #fff); box-shadow: 0 0 6px var(--a2), 0 0 18px var(--a2-45), inset 0 0 6px var(--a2), inset 0 0 18px var(--a2-20); animation: hy-neon-on 2.4s 1s linear both, hy-hum 2.6s 3.4s ease-in-out infinite alternate; } @keyframes hy-hum { from { opacity: 1; } to { opacity: .62; } } /* ============ CM gradient mesh: big soft colour fields slowly turning, a huge name over them ============ */ .portal.hero-cm { min-height: 300px; display: flex; background: linear-gradient(var(--solid), var(--solid)) padding-box, var(--edge) border-box; } .hero-cm .hero { width: 100%; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto auto auto; grid-template-areas: "logo top" ". ." "name name" "chips chips" "text text"; } .portal.hero-cm .orb.s104 { --s: 42px; } .hero-cm .orb .halo { display: none; } .hero-cm .hero-cover { display: block; position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; margin: -450px 0 0 -450px; opacity: .9; background: radial-gradient(22% 22% at 36% 40%, var(--a), transparent 70%), radial-gradient(20% 24% at 64% 36%, var(--a2), transparent 70%), radial-gradient(22% 20% at 58% 64%, color-mix(in oklab, var(--a) 45%, var(--a2)), transparent 70%), radial-gradient(18% 18% at 38% 62%, color-mix(in oklab, var(--a2) 55%, #fff), transparent 70%); animation: hy-spin 24s linear infinite; } .hero-cm .hero-cover::after { content: ""; position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(28% 26% at 30% 50%, color-mix(in oklab, var(--a) 40%, #22d3ee), transparent 70%), radial-gradient(26% 30% at 70% 50%, var(--a2), transparent 70%); opacity: .75; animation: hy-spin 15s linear infinite reverse; } .hero-cm .hero-fx { display: block; background: linear-gradient(180deg, rgba(var(--panel), .05) 20%, rgba(var(--panel), .55) 85%); } .hero-cm .hero-fx i { display: none; } .portal.hero-cm .hero > .who.gtext { font-size: clamp(42px, 13vw, 76px); line-height: 1; letter-spacing: -.035em; background: none; -webkit-text-fill-color: #fff; color: #fff; filter: drop-shadow(0 4px 22px rgba(0,0,0,.28)); } .hero-cm .hero > .welcome { color: color-mix(in oklab, var(--fg) 90%, transparent); } [data-mode="light"] .hero-cm .hero-cover { opacity: .5; } [data-mode="light"] .hero-cm .hero-fx { background: linear-gradient(180deg, rgba(var(--panel), .1) 20%, rgba(var(--panel), .65) 85%); } [data-mode="light"] .portal.hero-cm .hero > .who.gtext { -webkit-text-fill-color: var(--fg); color: var(--fg); filter: drop-shadow(0 2px 14px rgba(255,255,255,.6)); } /* ============ CN spotlight: a stage between curtains, a spotlight sweeping across the name ============ */ .portal.hero-cn { background: radial-gradient(70% 40% at 50% 104%, var(--a-30), transparent 70%), linear-gradient(180deg, color-mix(in oklab, var(--solid) 82%, #000), var(--solid)) padding-box, var(--edge) border-box; } [data-mode="light"] .portal.hero-cn { background: radial-gradient(70% 40% at 50% 104%, var(--a-30), transparent 70%), linear-gradient(180deg, color-mix(in oklab, var(--a) 8%, var(--solid)), var(--solid)) padding-box, var(--edge) border-box; } .hero-cn .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "logo" "name" "chips" "text"; justify-items: center; text-align: center; padding-left: 44px; padding-right: 44px; } .hero-cn .hero > .toprow { justify-self: stretch; } .hero-cn .hero > .chips { justify-content: center; } .portal.hero-cn .orb.s104 { --s: 62px; } .portal.hero-cn > .fx { display: block; top: 0; bottom: 0; width: 13%; z-index: 0; border-radius: 0; background: linear-gradient(90deg, rgba(0,0,0,.35), transparent 50%, rgba(0,0,0,.25)) 0 0 / 22px 100%, linear-gradient(180deg, color-mix(in oklab, var(--a) 55%, #000), color-mix(in oklab, var(--a) 35%, #000)); box-shadow: 0 0 22px rgba(0,0,0,.5); transform-origin: 50% 0; animation: hy-curtain 6s ease-in-out infinite alternate; } .portal.hero-cn > .fx.f1 { left: 0; right: auto; border-bottom-right-radius: 70% 26px; } .portal.hero-cn > .fx.f2 { right: 0; left: auto; border-bottom-left-radius: 70% 26px; animation-delay: -3s; } @keyframes hy-curtain { from { transform: skewX(1.5deg); } to { transform: skewX(-1.5deg); } } [data-mode="light"] .portal.hero-cn > .fx { background: linear-gradient(90deg, rgba(0,0,0,.14), transparent 50%, rgba(0,0,0,.08)) 0 0 / 22px 100%, linear-gradient(180deg, color-mix(in oklab, var(--a) 70%, #fff), color-mix(in oklab, var(--a) 50%, #fff)); box-shadow: none; } .hero-cn .hero-cover { display: block; position: absolute; left: 50%; top: -14px; width: 300px; height: 135%; margin-left: -150px; transform-origin: 50% 0; background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.08) 70%, transparent); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); animation: hy-beam 7s ease-in-out infinite alternate; } [data-mode="light"] .hero-cn .hero-cover { background: linear-gradient(180deg, var(--a-30), var(--a-12) 70%, transparent); } @keyframes hy-beam { from { transform: rotate(24deg); } to { transform: rotate(-24deg); } } .portal.hero-cn .hero > .who.gtext { font-size: clamp(32px, 10vw, 56px); max-width: 100%; background-image: radial-gradient(closest-side, rgba(255,255,255,.95), transparent), var(--grad-text); background-size: 45% 160%, 100% 100%; background-repeat: no-repeat; background-position: 0% 50%, 0 0; animation: hy-spot 7s ease-in-out infinite alternate; } [data-mode="light"] .portal.hero-cn .hero > .who.gtext { background-image: radial-gradient(closest-side, var(--a), transparent), var(--grad-text); } @keyframes hy-spot { from { background-position: 0% 50%, 0 0; } to { background-position: 100% 50%, 0 0; } } /* ============ CO retro TV: a curved CRT screen with scanlines, a rolling bar and a power-on flash ============ */ .portal.hero-co { background: linear-gradient(160deg, color-mix(in oklab, var(--a) 14%, #17151d), #0b0a0f) padding-box, var(--edge) border-box; } .hero-co .hero { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "top top" "logo name" "logo chips" "text text"; padding: 30px 30px 32px; animation: hy-poweron .9s .1s cubic-bezier(.2,.8,.2,1) both; } @keyframes hy-poweron { 0% { transform: scale(1, .006); opacity: 0; filter: brightness(4); } 35% { transform: scale(1, .006); opacity: 1; filter: brightness(4); } 70% { transform: scale(1, 1.03); filter: brightness(1.6); } 100% { transform: none; filter: none; } } .portal.hero-co .orb.s104 { --s: 66px; } .portal.hero-co .hero > .who { font-size: clamp(24px, 7.4vw, 36px); align-self: end; filter: drop-shadow(1.5px 0 0 rgba(255,40,90,.5)) drop-shadow(-1.5px 0 0 rgba(40,210,255,.5)) drop-shadow(0 0 14px var(--a-60)); } .hero-co .hero > .chips { align-self: start; } .hero-co .hero-cover { display: block; position: absolute; inset: 10px; border-radius: 30px / 40px; overflow: hidden; background: radial-gradient(120% 110% at 50% 40%, color-mix(in oklab, var(--a) 22%, #12131b), #06070a 78%); box-shadow: inset 0 0 50px rgba(0,0,0,.85), inset 0 0 0 2px rgba(255,255,255,.05), 0 0 0 1px rgba(0,0,0,.6); } .hero-co .hero-cover::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 80px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.07) 50%, transparent); animation: hy-roll 5s linear infinite; } @keyframes hy-roll { from { transform: translateY(-90px); } to { transform: translateY(460px); } } .hero-co .hero-cover::before { content: "AV-1"; position: absolute; right: 22px; bottom: 14px; font: 700 11px/1 var(--mono); letter-spacing: .1em; color: var(--ok); text-shadow: 0 0 6px var(--ok); opacity: .8; } .hero-co::after { content: ""; position: absolute; inset: 10px; z-index: 3; pointer-events: none; border-radius: 30px / 40px; background: repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px), radial-gradient(130% 120% at 50% 45%, transparent 60%, rgba(0,0,0,.35)); animation: hy-flick 6s steps(1, end) infinite; } @keyframes hy-flick { 0%, 100% { opacity: 1; } 47% { opacity: .75; } 48% { opacity: 1; } 81% { opacity: .85; } 82% { opacity: 1; } } /* ============ CP race day: speed lines, racing stripes, a slanted name and a moving checkered strip ============ */ .portal.hero-cp { container-type: inline-size; } .hero-cp .hero { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top top" "name logo" "chips logo" "text text"; padding-bottom: 42px; } .portal.hero-cp .orb.s104 { --s: 70px; } .hero-cp .orb .halo { inset: -9px; opacity: .9; background: repeating-conic-gradient(from 0deg, rgba(var(--tint), .55) 0 8deg, transparent 8deg 22deg); -webkit-mask: radial-gradient(closest-side, transparent 82%, #000 84%); mask: radial-gradient(closest-side, transparent 82%, #000 84%); animation-duration: .8s; } .portal.hero-cp .hero > .who { font-size: clamp(34px, 10.5vw, 58px); font-style: italic; text-transform: uppercase; letter-spacing: -.01em; transform: skewX(-9deg); transform-origin: 0 100%; line-height: 1.05; } .portal.hero-cp > .fx.f1 { display: block; } .portal.hero-cp > .fx.f1 { left: auto; right: 16%; top: -30%; bottom: -30%; width: 74px; transform: rotate(22deg); background: linear-gradient(90deg, var(--a-30) 0 38%, transparent 38% 62%, var(--a2-20) 62%); } .hero-cp .hero-cover { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; opacity: .85; background: conic-gradient(var(--fg) 25%, transparent 0 50%, var(--fg) 0 75%, transparent 0) 0 0 / 14px 14px; animation: hy-checker .45s linear infinite; } @keyframes hy-checker { to { background-position: -28px 0; } } .hero-cp .hero-fx { display: block; } .hero-cp .hero-fx i { left: 100% !important; width: 26cqw; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--a-60) 60%, var(--hi)); opacity: .7; animation: hy-speed 1.1s linear infinite; } .hero-cp .hero-fx i:nth-child(2n) { width: 40cqw; height: 1px; animation-duration: .8s; } .hero-cp .hero-fx i:nth-child(3n) { width: 18cqw; height: 3px; animation-duration: 1.4s; background: linear-gradient(90deg, transparent, var(--a2-45)); } @keyframes hy-speed { from { transform: translateX(0); } to { transform: translateX(calc(-100cqw - 45cqw)); } } /* ============ CQ speedometer: a gauge around the logo, the needle revving ============ */ .hero-cq .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "logo" "name" "chips" "text"; justify-items: center; text-align: center; } .hero-cq .hero > .toprow { justify-self: stretch; } .hero-cq .hero > .chips { justify-content: center; } .hero-cq .hero > .h-logo { position: relative; width: 176px; height: 158px; justify-content: center; align-items: center; margin-bottom: -18px; } .portal.hero-cq .orb.s104 { --s: 82px; } .hero-cq .orb .halo { display: none; } .hero-cq .hero > .h-logo::before { content: ""; position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px; border-radius: 50%; background: conic-gradient(from -135deg, var(--a) 0deg, var(--a2) var(--hy-ang), rgba(var(--tint), .1) var(--hy-ang) 270deg, transparent 270deg); -webkit-mask: radial-gradient(closest-side, transparent 82%, #000 83.5% 96%, transparent 97.5%); mask: radial-gradient(closest-side, transparent 82%, #000 83.5% 96%, transparent 97.5%); --hy-ang: 230deg; animation: hy-rev 6s ease-in-out infinite; } .hero-cq .orb::before { content: ""; position: absolute; inset: -32px; border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(from -135deg, rgba(var(--tint), .55) 0 1.4deg, transparent 1.4deg 27deg); -webkit-mask: radial-gradient(closest-side, transparent 84%, #000 86% 97%, transparent 98%), conic-gradient(from -136deg, #000 0 272deg, transparent 0); -webkit-mask-composite: source-in; mask: radial-gradient(closest-side, transparent 84%, #000 86% 97%, transparent 98%), conic-gradient(from -136deg, #000 0 272deg, transparent 0); mask-composite: intersect; } .hero-cq .orb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 76px; margin-left: -2px; border-radius: 3px; transform-origin: 50% 0; background: linear-gradient(180deg, transparent 50%, var(--bad)); box-shadow: 0 0 8px color-mix(in oklab, var(--bad) 60%, transparent); transform: rotate(275deg); animation: hy-needle 6s ease-in-out infinite; } @keyframes hy-rev { 0%, 100% { --hy-ang: 40deg; } 35% { --hy-ang: 232deg; } 48% { --hy-ang: 205deg; } 64% { --hy-ang: 252deg; } 80% { --hy-ang: 150deg; } } @keyframes hy-needle { 0%, 100% { transform: rotate(85deg); } 35% { transform: rotate(277deg); } 48% { transform: rotate(250deg); } 64% { transform: rotate(297deg); } 80% { transform: rotate(195deg); } } .portal.hero-cq .hero > .who { font-size: clamp(28px, 9vw, 46px); max-width: 100%; } .hero-cq .hero-cover { display: block; position: absolute; left: 50%; top: 128px; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; background: radial-gradient(closest-side, var(--a-20), transparent); } /* ============ CR luxe foil: a black-and-gold card, a foil name and a light sweeping across ============ */ .portal.hero-cr { --gold: color-mix(in oklab, var(--a) 22%, #d8b25a); --gold-l: color-mix(in oklab, var(--a) 12%, #f8e7b4); --gold-d: color-mix(in oklab, var(--a) 22%, #7c5a1c); background: radial-gradient(90% 70% at 50% 0%, color-mix(in oklab, var(--gold) 14%, var(--solid)), color-mix(in oklab, #000 30%, var(--solid)) 80%) padding-box, linear-gradient(135deg, var(--gold-l), var(--gold-d) 40%, var(--gold-l) 60%, var(--gold-d)) border-box; } [data-mode="light"] .portal.hero-cr { --gold: color-mix(in oklab, var(--a) 20%, #a87b22); --gold-l: color-mix(in oklab, var(--a) 15%, #c99a3a); --gold-d: color-mix(in oklab, var(--a) 20%, #5e420d); background: radial-gradient(90% 70% at 50% 0%, #fffaf0, color-mix(in oklab, #e9dcc0 40%, var(--solid)) 80%) padding-box, linear-gradient(135deg, var(--gold-l), var(--gold-d) 40%, var(--gold-l) 60%, var(--gold-d)) border-box; } .hero-cr .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "logo" "name" "rule" "chips" "text"; justify-items: center; text-align: center; padding: 30px 30px 32px; row-gap: 12px; } .hero-cr .hero > .toprow { justify-self: stretch; } .hero-cr .hero > .chips { justify-content: center; } .hero-cr .toprow .kicker { color: var(--gold); letter-spacing: .3em; } .portal.hero-cr .orb.s104 { --s: 70px; } .hero-cr .orb .halo { inset: -7px; background: conic-gradient(var(--gold-l), var(--gold-d), var(--gold-l), var(--gold-d), var(--gold-l)); opacity: 1; -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 90%); mask: radial-gradient(closest-side, transparent 88%, #000 90%); animation-duration: 12s; } .portal.hero-cr .hero > .who.gtext { font-size: clamp(32px, 10vw, 54px); max-width: 100%; letter-spacing: .02em; background-image: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.9) 50%, transparent 60%), linear-gradient(180deg, var(--gold-l) 0%, var(--gold) 45%, var(--gold-d) 58%, var(--gold-l) 100%); background-size: 300% 100%, 100% 100%; background-repeat: no-repeat; filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); animation: hy-glint 6s ease-in-out infinite; } [data-mode="light"] .portal.hero-cr .hero > .who.gtext { filter: none; } .hero-cr .hero::after { content: "◆"; grid-area: rule; width: 170px; font-size: 9px; line-height: 10px; color: var(--gold); background: linear-gradient(90deg, transparent, var(--gold)) 0 50% / calc(50% - 12px) 1px no-repeat, linear-gradient(270deg, transparent, var(--gold)) 100% 50% / calc(50% - 12px) 1px no-repeat; } .hero-cr .hero-cover { display: block; position: absolute; inset: 9px; border-radius: calc(var(--r-2xl) - 6px); border: 1px solid color-mix(in oklab, var(--gold) 55%, transparent); } .hero-cr .hero-cover::before { content: ""; position: absolute; inset: 4px; border-radius: calc(var(--r-2xl) - 10px); border: 1px solid color-mix(in oklab, var(--gold) 25%, transparent); } .hero-cr::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, transparent 38%, color-mix(in oklab, var(--gold-l) 22%, transparent) 48%, transparent 58%) 0 0 / 300% 100% no-repeat; animation: hy-sweep 6s ease-in-out infinite; } @keyframes hy-sweep { 0% { background-position: 120% 0; } 50%, 100% { background-position: -20% 0; } } .hero-cr .hero-fx { display: block; } .hero-cr .hero-fx i { display: none; } .hero-cr .hero-fx i:nth-child(-n+7) { display: block; width: 10px; height: 10px; background: var(--gold-l); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: hy-twinkle 3.2s ease-in-out infinite; } .hero-cr .hero-fx i:nth-child(2) { top: 28% !important; left: 14% !important; } .hero-cr .hero-fx i:nth-child(4) { left: 80% !important; top: 48% !important; } .hero-cr .hero-fx i:nth-child(7) { left: 88% !important; top: 20% !important; width: 7px; height: 7px; } /* ============ CS VHS tape: tracking noise, a colour-split name, PLAY and a running tape counter ============ */ .portal.hero-cs { background: linear-gradient(180deg, color-mix(in oklab, var(--a) 14%, #0d0c12), #070609) padding-box, var(--edge) border-box; } .hero-cs .hero { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top top" "name name" "text logo" "chips logo"; padding-bottom: 42px; } .portal.hero-cs .orb.s104 { --s: 62px; } .hero-cs .toprow .kicker { font-family: var(--mono); color: #fff; letter-spacing: .12em; text-shadow: 0 0 6px rgba(255,255,255,.5); } .hero-cs .toprow .kicker::before { content: "PLAY ▶ "; animation: hy-blink 2s steps(1, end) infinite; } .portal.hero-cs .hero > .who { font-size: clamp(36px, 11.5vw, 62px); line-height: 1; text-transform: uppercase; filter: drop-shadow(2.5px 0 0 rgba(255,40,90,.6)) drop-shadow(-2.5px 0 0 rgba(40,210,255,.6)); animation: hy-jitter 3.5s steps(1, end) infinite; } @keyframes hy-jitter { 0%, 100% { transform: none; } 71% { transform: translateX(3px) skewX(-6deg); } 72% { transform: translateX(-2px); } 73% { transform: none; } 92% { transform: translateX(-3px); } 93% { transform: none; } } .hero-cs .hero-cover { display: block; position: absolute; inset: 0; opacity: .1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px; animation: hy-grain .5s steps(4, end) infinite; } @keyframes hy-grain { 0% { background-position: 0 0; } 25% { background-position: -40px 30px; } 50% { background-position: 50px -60px; } 75% { background-position: -70px -20px; } 100% { background-position: 0 0; } } .hero-cs .hero::after { content: "SP 0:" counter(hym, decimal-leading-zero) ":" counter(hys, decimal-leading-zero); counter-reset: hym var(--hy-m) hys var(--hy-s); position: absolute; left: var(--pd); bottom: 14px; font: 700 12px/1 var(--mono); letter-spacing: .1em; color: #fff; text-shadow: 0 0 6px rgba(255,255,255,.5); animation: hy-sec 60s steps(60, end) infinite, hy-min60 3600s steps(60, end) infinite; } @keyframes hy-min60 { from { --hy-m: 0; } to { --hy-m: 60; } } .hero-cs .hero-fx { display: block; } .hero-cs .hero-fx i { display: none; } .hero-cs .hero-fx i:nth-child(1), .hero-cs .hero-fx i:nth-child(2) { display: block; left: 0 !important; top: 0 !important; width: 100%; height: 16px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 3px, transparent 3px 7px, rgba(255,255,255,.08) 7px 12px, transparent 12px 19px); animation: hy-track 4.2s linear infinite; } .hero-cs .hero-fx i:nth-child(2) { height: 3px; opacity: .6; animation-duration: 2.7s; animation-delay: -1s !important; } @keyframes hy-track { 0% { transform: translateY(-20px) translateX(0); } 50% { transform: translateY(220px) translateX(-12px); } 100% { transform: translateY(460px) translateX(6px); } } .hero-cs::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(180deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px), radial-gradient(120% 110% at 50% 45%, transparent 55%, rgba(0,0,0,.45)); } /* ============ CT floating shapes: playful geometric shapes drifting and turning ============ */ .portal.hero-ct { background: linear-gradient(150deg, color-mix(in oklab, var(--a) 12%, var(--solid)), var(--solid) 60%, color-mix(in oklab, var(--a2) 10%, var(--solid))) padding-box, var(--edge) border-box; } .hero-ct .hero { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top top" "name logo" "chips logo" "text text"; } .portal.hero-ct .orb.s104 { --s: 72px; } .portal.hero-ct .hero > .who { font-size: clamp(30px, 9.5vw, 50px); } .hero-ct .hero-fx { display: block; } .hero-ct .hero-fx i { width: 18px; height: 18px; opacity: .75; animation: hy-float 7s ease-in-out infinite alternate; } @keyframes hy-float { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(10px, -16px) rotate(140deg); } } @keyframes hy-float2 { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-14px, 12px) rotate(-120deg); } } .hero-ct .hero-fx i:nth-child(1) { left: 4% !important; top: 70% !important; border-radius: 50%; background: var(--a); } .hero-ct .hero-fx i:nth-child(2) { left: 90% !important; top: 70% !important; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--a2); animation-name: hy-float2; animation-duration: 9s; } .hero-ct .hero-fx i:nth-child(3) { left: 50% !important; top: 4% !important; width: 22px; height: 20px; background: var(--a2); clip-path: polygon(50% 0, 100% 100%, 0 100%); animation-duration: 8s; } .hero-ct .hero-fx i:nth-child(4) { left: 64% !important; top: 90% !important; width: 16px; height: 16px; border: 3px solid var(--a); border-radius: 3px; animation-name: hy-float2; } .hero-ct .hero-fx i:nth-child(5) { left: 40% !important; top: 34% !important; width: 16px; height: 16px; background: color-mix(in oklab, var(--a2) 60%, var(--hi)); opacity: .45; clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); animation-duration: 6s; } .hero-ct .hero-fx i:nth-child(6) { left: 30% !important; top: 92% !important; width: 8px; height: 8px; border-radius: 50%; background: var(--a2); } .hero-ct .hero-fx i:nth-child(7) { left: 72% !important; top: 8% !important; width: 30px; height: 15px; border-radius: 30px 30px 0 0; background: var(--a); opacity: .55; animation-name: hy-float2; animation-duration: 10s; } .hero-ct .hero-fx i:nth-child(8) { left: 2% !important; top: 30% !important; width: 34px; height: 10px; background: var(--a2); opacity: .55; clip-path: polygon(0 100%, 12.5% 0, 25% 100%, 37.5% 0, 50% 100%, 62.5% 0, 75% 100%, 87.5% 0, 100% 100%, 100% 70%, 87.5% -30%, 75% 70%, 62.5% -30%, 50% 70%, 37.5% -30%, 25% 70%, 12.5% -30%, 0 70%); animation-duration: 11s; } .hero-ct .hero-fx i:nth-child(9) { left: 84% !important; top: 42% !important; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, transparent 0 4px, var(--a) 4.5px); opacity: .5; } .hero-ct .hero-fx i:nth-child(10) { left: 18% !important; top: 4% !important; width: 14px; height: 14px; background: var(--a); transform: rotate(45deg); opacity: .5; animation-name: hy-float2; } .hero-ct .hero-fx i:nth-child(11) { left: 52% !important; top: 66% !important; width: 40px; height: 12px; border-radius: 6px; opacity: .35; background: repeating-linear-gradient(45deg, var(--a2) 0 3px, transparent 3px 7px); animation-duration: 12s; } .hero-ct .hero-fx i:nth-child(12) { left: 94% !important; top: 4% !important; width: 40px; height: 40px; border-radius: 50%; background: var(--a2); opacity: .22; animation-duration: 13s; } .hero-ct .hero-fx i:nth-child(13) { left: 12% !important; top: 52% !important; width: 18px; height: 18px; opacity: .45; background: radial-gradient(circle, var(--a) 0 2px, transparent 2.5px) 0 0 / 6px 6px; animation-name: hy-float2; animation-duration: 8s; } .hero-ct .hero-fx i:nth-child(14) { left: 76% !important; top: 58% !important; width: 18px; height: 18px; background: var(--a); opacity: .5; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } /* ============ CU coin flip: the logo is a ridged coin that hops and flips, with a sparkle when it lands ============ */ .portal.hero-cu { background: radial-gradient(60% 60% at 50% 32%, var(--a-20), transparent 70%), linear-gradient(var(--surface), var(--surface)) padding-box, var(--edge) border-box; } .hero-cu .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "logo" "name" "chips" "text"; justify-items: center; text-align: center; } .hero-cu .hero > .toprow { justify-self: stretch; } .hero-cu .hero > .chips { justify-content: center; } .hero-cu .hero > .h-logo { position: relative; padding: 14px 0 12px; } .portal.hero-cu .orb.s104 { --s: 98px; } .hero-cu .orb .halo { display: none; } .hero-cu .orb { animation: hy-flip 4.5s cubic-bezier(.45, 0, .55, 1) infinite; } .hero-cu .orb::before { content: ""; position: absolute; inset: -7px; z-index: 0; border-radius: 50%; background: repeating-conic-gradient(color-mix(in oklab, var(--a) 70%, #fff) 0 3deg, color-mix(in oklab, var(--a) 60%, #000) 3deg 6deg); -webkit-mask: radial-gradient(closest-side, transparent 86%, #000 88%); mask: radial-gradient(closest-side, transparent 86%, #000 88%); } @keyframes hy-flip { 0%, 62%, 100% { transform: perspective(500px) translateY(0) rotateY(0); } 72% { transform: perspective(500px) translateY(-22px) rotateY(200deg); } 82% { transform: perspective(500px) translateY(0) rotateY(360deg); } 86% { transform: perspective(500px) translateY(-3px) rotateY(360deg); } } .hero-cu .hero > .h-logo::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 84px; height: 12px; margin-left: -42px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); animation: hy-coinshadow 4.5s cubic-bezier(.45, 0, .55, 1) infinite; } @keyframes hy-coinshadow { 0%, 62%, 82%, 100% { transform: scale(1); opacity: 1; } 72% { transform: scale(.6); opacity: .5; } } [data-mode="light"] .hero-cu .hero > .h-logo::after { background: radial-gradient(closest-side, rgba(0,0,0,.2), transparent); } .portal.hero-cu .hero > .who { font-size: clamp(30px, 9.5vw, 50px); max-width: 100%; } .hero-cu .hero-fx { display: block; } .hero-cu .hero-fx i { display: none; } .hero-cu .hero-fx i:nth-child(-n+8) { display: block; left: 50% !important; top: 128px !important; width: 10px; height: 10px; margin: -5px; background: var(--a2); opacity: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: hy-burst 4.5s ease-out infinite; animation-delay: 0s !important; } .hero-cu .hero-fx i:nth-child(1) { --b: 0deg; } .hero-cu .hero-fx i:nth-child(2) { --b: 45deg; background: var(--hi); } .hero-cu .hero-fx i:nth-child(3) { --b: 90deg; } .hero-cu .hero-fx i:nth-child(4) { --b: 135deg; background: var(--a); } .hero-cu .hero-fx i:nth-child(5) { --b: 180deg; } .hero-cu .hero-fx i:nth-child(6) { --b: 225deg; background: var(--hi); } .hero-cu .hero-fx i:nth-child(7) { --b: 270deg; } .hero-cu .hero-fx i:nth-child(8) { --b: 315deg; background: var(--a); } @keyframes hy-burst { 0%, 81% { transform: rotate(var(--b)) translateX(30px) scale(0); opacity: 0; } 84% { opacity: 1; transform: rotate(var(--b)) translateX(58px) scale(1); } 96%, 100% { transform: rotate(var(--b)) translateX(82px) scale(.2); opacity: 0; } } /* ============ CV kaleidoscope: two counter-turning petal patterns behind the logo ============ */ .hero-cv .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "logo" "name" "chips" "text"; justify-items: center; text-align: center; } .hero-cv .hero > .toprow { justify-self: stretch; } .hero-cv .hero > .chips { justify-content: center; } .portal.hero-cv .orb.s104 { --s: 92px; } .hero-cv .hero-cover { display: block; position: absolute; left: 50%; top: 116px; width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--a-45) 0 10deg, transparent 10deg 30deg), radial-gradient(closest-side, transparent 30%, var(--a-12) 31% 33%, transparent 34% 60%, var(--a2-20) 61% 63%, transparent 64%); -webkit-mask: radial-gradient(closest-side, #000 28%, rgba(0,0,0,.45) 46%, transparent 66%); mask: radial-gradient(closest-side, #000 28%, rgba(0,0,0,.45) 46%, transparent 66%); animation: hy-spin 30s linear infinite; } .hero-cv .hero-cover::before { content: ""; position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen; background: repeating-conic-gradient(from 7deg, var(--a2-45) 0 14deg, transparent 14deg 45deg); animation: hy-spin 18s linear infinite reverse; } .hero-cv .hero-cover::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: repeating-radial-gradient(circle, var(--a-20) 0 3px, transparent 3px 14px); animation: hy-breathe 5s ease-in-out infinite; } @keyframes hy-breathe { 0%, 100% { transform: scale(.85); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } } [data-mode="light"] .hero-cv .hero-cover::before { mix-blend-mode: multiply; } .portal.hero-cv .hero > .who { font-size: clamp(30px, 9.5vw, 50px); max-width: 100%; } /* ============ CW DNA helix: a twisting double helix along the bottom of the card ============ */ .hero-cw .hero { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "top top" "logo name" "logo chips" "text text"; padding-bottom: 92px; } .portal.hero-cw .orb.s104 { --s: 68px; } .portal.hero-cw .hero > .who { font-size: clamp(24px, 7.4vw, 36px); align-self: end; } .hero-cw .hero > .chips { align-self: start; } .hero-cw .hero-cover { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 84px; background: linear-gradient(180deg, transparent, var(--a-12)); } .hero-cw .hero-fx { display: block; } .portal.hero-cw .hero-fx i { top: auto !important; bottom: 22px; width: 2px; height: 44px; margin-left: -1px; border-radius: 2px; background: linear-gradient(180deg, var(--a-45), var(--a2-45)); animation: hy-rung 2.6s ease-in-out infinite; animation-delay: var(--d) !important; } .hero-cw .hero-fx i::before, .hero-cw .hero-fx i::after { content: ""; position: absolute; left: 50%; top: 0; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--a); box-shadow: 0 0 10px var(--a-60); animation: hy-strand 2.6s linear infinite; animation-delay: var(--d); } .hero-cw .hero-fx i::after { background: var(--a2); box-shadow: 0 0 10px var(--a2-45); animation-delay: calc(var(--d) - 1.3s); } @keyframes hy-strand { 0% { transform: translateY(0) scale(1); } 12.5% { transform: translateY(6.4px) scale(1.21); } 25% { transform: translateY(22px) scale(1.3); } 37.5% { transform: translateY(37.6px) scale(1.21); } 50% { transform: translateY(44px) scale(1); } 62.5% { transform: translateY(37.6px) scale(.79); } 75% { transform: translateY(22px) scale(.7); } 87.5% { transform: translateY(6.4px) scale(.79); } 100% { transform: translateY(0) scale(1); } } @keyframes hy-rung { 0%, 50%, 100% { transform: scaleY(1); opacity: .9; } 25%, 75% { transform: scaleY(.04); opacity: .3; } } .hero-cw .hero-fx i:nth-child(1) { left: 5% !important; --d: -0.00s; } .hero-cw .hero-fx i:nth-child(2) { left: 11.9% !important; --d: -0.36s; } .hero-cw .hero-fx i:nth-child(3) { left: 18.8% !important; --d: -0.72s; } .hero-cw .hero-fx i:nth-child(4) { left: 25.8% !important; --d: -1.08s; } .hero-cw .hero-fx i:nth-child(5) { left: 32.7% !important; --d: -1.44s; } .hero-cw .hero-fx i:nth-child(6) { left: 39.6% !important; --d: -1.80s; } .hero-cw .hero-fx i:nth-child(7) { left: 46.5% !important; --d: -2.16s; } .hero-cw .hero-fx i:nth-child(8) { left: 53.5% !important; --d: -2.52s; } .hero-cw .hero-fx i:nth-child(9) { left: 60.4% !important; --d: -2.88s; } .hero-cw .hero-fx i:nth-child(10) { left: 67.3% !important; --d: -3.24s; } .hero-cw .hero-fx i:nth-child(11) { left: 74.2% !important; --d: -3.60s; } .hero-cw .hero-fx i:nth-child(12) { left: 81.2% !important; --d: -3.96s; } .hero-cw .hero-fx i:nth-child(13) { left: 88.1% !important; --d: -4.32s; } .hero-cw .hero-fx i:nth-child(14) { left: 95% !important; --d: -4.68s; } /* ============ less motion: stop every moving part (the shared rule in app.css misses pseudo-elements) ============ */ @media (prefers-reduced-motion: reduce) { :is(.hero-by, .hero-bz, .hero-ca, .hero-cb, .hero-cc, .hero-cd, .hero-ce, .hero-cf, .hero-cg, .hero-ch, .hero-ci, .hero-cj, .hero-ck, .hero-cl, .hero-cm, .hero-cn, .hero-co, .hero-cp, .hero-cq, .hero-cr, .hero-cs, .hero-ct, .hero-cu, .hero-cv, .hero-cw), :is(.hero-by, .hero-bz, .hero-ca, .hero-cb, .hero-cc, .hero-cd, .hero-ce, .hero-cf, .hero-cg, .hero-ch, .hero-ci, .hero-cj, .hero-ck, .hero-cl, .hero-cm, .hero-cn, .hero-co, .hero-cp, .hero-cq, .hero-cr, .hero-cs, .hero-ct, .hero-cu, .hero-cv, .hero-cw) :is(*, *::before, *::after), :is(.hero-by, .hero-bz, .hero-ca, .hero-cb, .hero-cc, .hero-cd, .hero-ce, .hero-cf, .hero-cg, .hero-ch, .hero-ci, .hero-cj, .hero-ck, .hero-cl, .hero-cm, .hero-cn, .hero-co, .hero-cp, .hero-cq, .hero-cr, .hero-cs, .hero-ct, .hero-cu, .hero-cv, .hero-cw)::before, :is(.hero-by, .hero-bz, .hero-ca, .hero-cb, .hero-cc, .hero-cd, .hero-ce, .hero-cf, .hero-cg, .hero-ch, .hero-ci, .hero-cj, .hero-ck, .hero-cl, .hero-cm, .hero-cn, .hero-co, .hero-cp, .hero-cq, .hero-cr, .hero-cs, .hero-ct, .hero-cu, .hero-cv, .hero-cw)::after { animation: none !important; } /* the news ticker stops: show the welcome line normally instead */ .hero-cb .hero > .welcome { width: auto; max-width: 100%; min-width: 0; padding-left: 74px; overflow: hidden; text-overflow: ellipsis; } .hero-cj .hero-fx i, .hero-cu .hero-fx i { display: none !important; } }