:root { color-scheme: dark; --ink: #f8f3f9; --muted: #bdb5d2; --hot: #f12930; --pink: #e72bd5; --cyan: #46ecff; --gold: #ffd760; --panel: rgba(20, 17, 54, .53); }
* { box-sizing: border-box; }
html { min-height: 100%; overflow-x: clip; background: #07081a; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: clip; color: var(--ink); font-family: Outfit, Arial, sans-serif; background: radial-gradient(ellipse 60% 65% at 83% 35%, rgba(130, 29, 116, .27), transparent 66%), radial-gradient(ellipse 46% 49% at 21% 53%, rgba(25, 55, 171, .27), transparent 74%), linear-gradient(120deg, #050614 0%, #0c0a25 51%, #080919 100%); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 42px, rgba(160, 114, 255, .035) 42px 43px), linear-gradient(180deg, transparent 75%, rgba(11, 8, 23, .92)); }
.noise { position: fixed; z-index: 6; inset: 0; opacity: .055; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.city { position: fixed; display: flex; align-items: end; gap: clamp(8px, 1.6vw, 28px); width: 100%; height: 28vh; min-height: 150px; bottom: 0; padding: 0 3vw; opacity: .26; filter: blur(1px); overflow: hidden; pointer-events: none; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 90%, transparent); }
.city span { flex: 1; min-width: 21px; background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(120, 192, 255, .45) 5px 7px, transparent 7px 16px), repeating-linear-gradient(0deg, transparent 0 8px, rgba(180, 228, 255, .3) 8px 10px, transparent 10px 21px), linear-gradient(180deg, rgba(53, 50, 105, .28), #020310); box-shadow: 0 0 40px rgba(69, 174, 255, .24); }
.city span:nth-child(1) { height: 30%; }.city span:nth-child(2) { height: 58%; }.city span:nth-child(3) { height: 41%; }.city span:nth-child(4) { height: 82%; }.city span:nth-child(5) { height: 65%; }.city span:nth-child(6) { height: 46%; }.city span:nth-child(7) { height: 93%; }.city span:nth-child(8) { height: 52%; }.city span:nth-child(9) { height: 72%; }.city span:nth-child(10) { height: 38%; }.city span:nth-child(11) { height: 59%; }.city span:nth-child(12) { height: 31%; }
main { position: relative; min-height: calc(100vh - 64px); display: flex; flex-direction: column; }
.topbar { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: center; width: min(1320px, calc(100% - 80px)); margin: 0 auto; padding: 30px 0; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .16em; }
.brand-mini { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 500; }.mini-crown { color: var(--gold); font-size: 18px; line-height: 0; transform: translateY(-1px); }.live-pill { color: #d5cce1; }.live-pill i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 0 0 rgba(241, 41, 48, .55); margin-right: 8px; animation: live 1.4s infinite; }
.hero { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(350px, .97fr) minmax(355px, 1fr); align-items: center; gap: clamp(20px, 5vw, 105px); width: min(1240px, calc(100% - 80px)); margin: auto; padding: 18px 20px 70px; }
.atmosphere { position: absolute; z-index: -1; inset: -23% -18%; overflow: hidden; pointer-events: none; }.orb { position: absolute; border-radius: 50%; filter: blur(1px); }.orb-one { width: 650px; height: 650px; left: -6%; top: 1%; border: 1px solid rgba(125, 111, 255, .16); box-shadow: inset 0 0 90px rgba(60, 166, 255, .08), 0 0 100px rgba(107, 39, 180, .12); animation: float 11s ease-in-out infinite; }.orb-two { width: 330px; height: 330px; left: 27%; top: 45%; background: rgba(251, 39, 128, .06); filter: blur(38px); }.orb-three { width: 280px; height: 280px; right: 0; top: 6%; background: rgba(158, 43, 223, .15); filter: blur(55px); animation: float 9s -3s ease-in-out infinite reverse; }
.spark { position: absolute; display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px 3px rgba(74, 235, 255, .75); animation: blink 2.5s infinite alternate; }.spark-one { left: 30%; top: 17%; }.spark-two { left: 68%; top: 13%; background: #f262e9; box-shadow: 0 0 12px 3px rgba(242, 98, 233, .75); animation-delay: -.9s; }.spark-three { left: 78%; top: 66%; animation-delay: -1.6s; }.spark-four { left: 5%; top: 70%; }.spark-five { left: 48%; top: 4%; background: var(--gold); box-shadow: 0 0 12px 3px rgba(255, 215, 96, .75); animation-delay: -.6s; }
.identity-wrap { position: relative; width: min(100%, 570px); justify-self: center; aspect-ratio: 1; display: grid; place-items: center; }.logo-halo { position: absolute; width: 78%; height: 78%; border-radius: 50%; background: #b625b2; filter: blur(55px); opacity: .33; }.jefa-logo { position: relative; width: 100%; overflow: visible; filter: drop-shadow(0 29px 30px rgba(0, 0, 0, .55)); animation: logo-breathe 4.8s ease-in-out infinite; }.radio-echo { position: absolute; width: 54%; height: 54%; border-radius: 50%; border: 1px solid rgba(93, 241, 255, .35); opacity: 0; animation: echo 3.6s ease-out infinite; }.echo-b { animation-delay: 1.8s; }
.copy { max-width: 530px; padding-bottom: 6px; }.eyebrow { display: flex; gap: 12px; align-items: center; margin: 0 0 17px; color: var(--cyan); font-family: "DM Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: .18em; }.eyebrow span { width: 37px; height: 1px; background: var(--cyan); box-shadow: 0 0 10px 1px var(--cyan); }
h1 { margin: 0; font-family: "Barlow Condensed", Impact, sans-serif; font-size: clamp(65px, 6.4vw, 105px); line-height: .82; letter-spacing: -.055em; text-transform: uppercase; font-weight: 900; text-shadow: 0 5px 0 #1a0f35, 0 10px 40px rgba(198, 41, 179, .2); }h1 em { color: transparent; font-style: italic; -webkit-text-stroke: 1.5px #ff4ce8; text-shadow: 0 0 26px rgba(252, 51, 219, .42); }.intro { max-width: 440px; margin: 28px 0 22px; color: var(--muted); font-size: 16px; line-height: 1.65; }.intro strong { color: #fff0ba; font-weight: 600; }
.tuner { width: min(100%, 420px); padding: 13px 17px 10px; background: linear-gradient(125deg, rgba(63, 52, 105, .57), rgba(18, 17, 47, .6)); border: 1px solid rgba(161, 145, 225, .25); box-shadow: 0 10px 35px rgba(0, 0, 0, .16), inset 0 1px rgba(255,255,255,.08); border-radius: 9px; backdrop-filter: blur(12px); }.tuner-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-family: "DM Mono", monospace; letter-spacing: .12em; font-size: 9px; color: #bab4d8; }.tuner-label b { color: var(--cyan); font-family: "Barlow Condensed", sans-serif; font-size: 29px; line-height: .8; letter-spacing: .02em; }.tuner input { --fill: 77%; display: block; width: 100%; appearance: none; height: 5px; margin: 0; border-radius: 5px; cursor: ew-resize; background: linear-gradient(90deg, var(--cyan) 0 var(--fill), #544a7b var(--fill) 100%); box-shadow: 0 0 9px rgba(72, 232, 255, .42); }.tuner input::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #eaffff; background: var(--hot); box-shadow: 0 0 0 4px rgba(241, 41, 48, .16), 0 0 12px var(--hot); }.tuner input::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; border: 3px solid #eaffff; background: var(--hot); }.tuner-scale { display: flex; justify-content: space-between; margin-top: 7px; color: #a39cba; font: 9px "DM Mono", monospace; }
.signal-button { display: flex; align-items: center; gap: 10px; margin-top: 24px; padding: 14px 17px; color: #160b1e; border: 0; border-radius: 5px; font: 800 13px "DM Mono", monospace; letter-spacing: .08em; background: linear-gradient(100deg, #ffdc5c, #ff9b49); box-shadow: 0 8px 24px rgba(255, 142, 60, .23); cursor: pointer; transition: transform .2s, box-shadow .2s; }.signal-button:hover { transform: translateY(-3px); box-shadow: 0 13px 30px rgba(255, 142, 60, .38); }.signal-button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }.button-icon { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #fff; font-size: 9px; background: #bb2430; }.button-wave { margin-left: 3px; color: #bb2430; letter-spacing: -2px; }.microcopy { min-height: 16px; margin: 12px 0 0; color: #9189aa; font: 10px "DM Mono", monospace; letter-spacing: .03em; }
footer { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 20px; width: min(1320px, calc(100% - 80px)); margin: 0 auto; padding: 18px 0 24px; border-top: 1px solid rgba(169, 151, 230, .16); color: #837a9c; font: 10px "DM Mono", monospace; letter-spacing: .12em; }.footer-right span { color: #4f4967; }.footer-right b { padding-left: 8px; color: var(--gold); font-size: 13px; }.footer-right a { display: inline-block; margin-left: 14px; color: #9189aa; text-decoration: none; transition: color .2s; }.footer-right a strong { color: var(--cyan); font-weight: 500; }.footer-right a:hover, .footer-right a:focus-visible { color: #fff; }.footer-right a:focus-visible { outline: 1px solid var(--cyan); outline-offset: 3px; }
@keyframes live { 70% { box-shadow: 0 0 0 7px rgba(241, 41, 48, 0); } 100% { box-shadow: 0 0 0 0 rgba(241, 41, 48, 0); } } @keyframes logo-breathe { 50% { transform: translateY(-9px) scale(1.012); filter: drop-shadow(0 35px 34px rgba(0,0,0,.62)) brightness(1.06); } } @keyframes echo { 0% { transform: scale(.54); opacity: .7; } 100% { transform: scale(1.55); opacity: 0; } } @keyframes blink { to { opacity: .2; transform: scale(.5); } } @keyframes float { 50% { transform: translate(20px, -15px) scale(1.06); } }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; gap: 0; padding-top: 0; text-align: center; }.identity-wrap { width: min(500px, 82vw); }.copy { justify-self: center; display: flex; flex-direction: column; align-items: center; padding: 0 0 34px; }.eyebrow { margin-top: -4px; }.intro { margin-top: 21px; }.topbar, footer, .hero { width: min(100% - 40px, 620px); }.city { height: 20vh; }.atmosphere { inset: -10% -30%; } }
@media (max-width: 500px) { .topbar { padding: 19px 0; font-size: 8px; }.brand-mini { font-size: 9px; }.hero { padding: 6px 0 38px; }.identity-wrap { width: min(390px, 100%); }.eyebrow { font-size: 9px; }.intro { font-size: 14px; }.tuner { width: 100%; }.signal-button { margin-top: 19px; font-size: 11px; } footer { flex-direction: column; gap: 8px; padding: 15px 0 18px; font-size: 8px; }.city { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }