/* ============================================================ TEAM FITZ — LOOKS (Settings → Look). Classic = no class on . Each look only changes colours, shapes and type; nothing else moves. ============================================================ */ /* ---------- A · Grey Glass ---------- */ body.theme-glass{ --bg:#15181c; --panel:rgba(255,255,255,.05); --panel-2:#20252b; --line:rgba(255,255,255,.10); --r:18px; background: radial-gradient(110% 55% at 15% 0%,rgba(195,245,60,.14) 0%,rgba(0,0,0,0) 55%), radial-gradient(80% 45% at 100% 45%,rgba(195,245,60,.06) 0%,rgba(0,0,0,0) 60%), #15181c fixed; } .theme-glass .stickytop{background:rgba(21,24,28,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px)} .theme-glass header{background:transparent} .theme-glass .card, .theme-glass .stat, .theme-glass .menu-wrap{backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)} .theme-glass .card{border-radius:20px} .theme-glass .stat{border-radius:18px} .theme-glass .btn-primary{box-shadow:0 0 22px rgba(195,245,60,.30); border-radius:14px} .theme-glass .btn{border-radius:12px} .theme-glass .card.hero, .theme-glass .t-keys, .theme-glass .rv-season, .theme-glass .n8{ background:linear-gradient(135deg,rgba(195,245,60,.16),rgba(195,245,60,.03)); border-color:rgba(195,245,60,.45); box-shadow:0 0 36px rgba(195,245,60,.10)} .theme-glass .menu-btn{border-radius:14px} /* ---------- B · Grey Sport ---------- */ body.theme-sport{ --bg:#16191d; --panel:#22272d; --panel-2:#2a3037; --line:#2e343b; --r:18px } .theme-sport h1, .theme-sport h2, .theme-sport .menu-title, .theme-sport .sec-h h2{ font-family:"Anton",Impact,sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.01em} .theme-sport .menu-title{font-size:26px} .theme-sport .sec-h h2{font-size:30px} .theme-sport .stat .n, .theme-sport .t-keys b{font-family:"Anton",Impact,sans-serif; font-weight:400; letter-spacing:.01em} .theme-sport .card{border:0; border-radius:18px} .theme-sport .stat{border:0; border-radius:18px} .theme-sport .btn, .theme-sport .btn-primary{border-radius:999px} .theme-sport .card.hero, .theme-sport .t-keys, .theme-sport .n8{background:#c3f53c; color:#16191d} .theme-sport .card.hero *, .theme-sport .t-keys *, .theme-sport .n8 *{color:#16191d !important; border-color:rgba(22,25,29,.18) !important} /* ---------- C · Grey Telemetry ---------- */ body.theme-telemetry{ --bg:#121418; --panel:rgba(18,20,24,.92); --panel-2:#181c21; --line:#2a3037; --r:6px; font-family:"Rajdhani","Archivo",sans-serif; font-size:17px; background-color:#121418; background-image:linear-gradient(rgba(195,245,60,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(195,245,60,.035) 1px,transparent 1px); background-size:22px 22px; background-attachment:fixed; } .theme-telemetry h1, .theme-telemetry h2, .theme-telemetry .menu-title{font-family:"Rajdhani",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.04em} .theme-telemetry .stat .n, .theme-telemetry .kicker, .theme-telemetry .t-keys b, .theme-telemetry td.t, .theme-telemetry .muted.small, .theme-telemetry .savestate{font-family:"JetBrains Mono",ui-monospace,monospace} .theme-telemetry .kicker{letter-spacing:.08em} .theme-telemetry .card, .theme-telemetry .stat, .theme-telemetry .btn{border-radius:6px} .theme-telemetry .card.hero, .theme-telemetry .t-keys, .theme-telemetry .n8{border-color:rgba(195,245,60,.55); box-shadow:inset 0 0 30px rgba(195,245,60,.08)} .theme-telemetry .stickytop{background:rgba(18,20,24,.9)} /* ---------- Settings → Look ---------- */ .look-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px} .look-opt{font:inherit; text-align:left; padding:0; border:2px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel); color:var(--ink); cursor:pointer} .look-opt.on{border-color:#c3f53c} .look-sw{height:86px; position:relative} .look-name{padding:9px 10px 10px; font-weight:800; font-size:14px} .look-name small{display:block; font-weight:500; color:var(--muted); font-size:11.5px; margin-top:2px} /* ---------- Telemetry: full version ---------- */ body.has-tabbar{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))} .tl-tabbar{position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; justify-content:space-around; align-items:center; height:calc(58px + env(safe-area-inset-bottom,0px)); padding-bottom:env(safe-area-inset-bottom,0px); background:rgba(18,20,24,.96); border-top:1px solid #2a3037; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)} .tl-tabbar button{flex:1; height:100%; background:none; border:0; color:#6c7883; font:700 11.5px "JetBrains Mono",ui-monospace,monospace; letter-spacing:.04em} .tl-tabbar button.on{color:#c3f53c} .tl-hero{margin:4px 0 14px} .tl-top{display:flex; justify-content:space-between; font:11px "JetBrains Mono",monospace; color:#6c7883} .tl-live{color:#ff7a1a} .tl-live b{font-weight:700} .tl-row{display:flex; gap:10px; margin-top:10px} .tl-count{flex:1.4; border:1px solid rgba(255,122,26,.45); border-radius:6px; padding:12px; background:linear-gradient(180deg,rgba(255,122,26,.10),transparent)} .tl-ring{flex:1; border:1px solid #2a3037; border-radius:6px; padding:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(18,20,24,.85)} .tl-lab{font:10px "JetBrains Mono",monospace; color:#ff7a1a; letter-spacing:.06em} .tl-ring .tl-lab{color:#c3f53c; margin-top:2px} .tl-big{font:700 34px "JetBrains Mono",monospace; letter-spacing:-.02em; color:#e9eef0; margin-top:2px} .tl-sub{font-size:14px; color:#8aa0ad} .tl-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:8px} .tl-tile{border:1px solid #2a3037; border-radius:6px; padding:8px; background:rgba(18,20,24,.85)} .tl-tile .tl-lab{color:#6c7883} .tl-val{font:700 17px "JetBrains Mono",monospace} .tl-sheet{margin-top:6px; border-left:2px solid #2a3037; padding-left:14px} .tl-step{position:relative; display:flex; gap:10px; align-items:baseline; padding:6px 0} .tl-dot{position:absolute; left:-20px; top:11px; width:10px; height:10px; border-radius:50%} .tl-time{font:700 14px "JetBrains Mono",monospace; width:48px} .tl-name{flex:1; font:600 16px "Rajdhani",sans-serif; letter-spacing:.03em} .tl-dur{font:11px "JetBrains Mono",monospace; color:#6c7883}