/* ============================================================= AHLY07 TV — Cinematic TV-on-Desk Scene Applies only when is present. All scene classes are prefixed to avoid collisions with the existing ahly07.css / videos.css / site.css styles. ============================================================= */ /* ── 1. Body lock ──────────────────────────────────────────── */ .tv-body { overflow: hidden !important; background: #000 !important; height: 100dvh; font-family: 'Cairo', 'Tajawal', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } /* Hide the default layout chrome on TV pages */ .tv-body > .navbar, .tv-body > #topbar-slot, .tv-body > main, .tv-body > footer, .tv-body > section.fb-follow-section, .tv-body > div[style*="footer-banner"], .tv-body > div[style*="margin-top"] { display: none !important; } /* ── 2. Fixed scene (wall + desk) ──────────────────────────── */ .scene { position: fixed; inset: 0; overflow: hidden; } .scene-bg { position: absolute; inset: 0; background-image: url('../images/tv/wood.png'), url('../images/tv/fullbg.png'); /* Deeper wooden desk band so the mug / remote / scarf read as sitting on a real surface in the foreground (matches the reference photo). */ background-size: 100% clamp(180px, 24vh, 260px), cover; background-position: center bottom, center center; background-repeat: no-repeat, no-repeat; } /* Soft ambient contact shadow where the desk meets the wall — grounds the desk and gives the props something to cast onto. */ .scene-bg::before { content: ''; position: absolute; left: 0; right: 0; bottom: clamp(180px, 24vh, 260px); height: 90px; background: linear-gradient(to top, rgba(0,0,0,.55), transparent); pointer-events: none; } .scene-bg::after { content: ''; position: absolute; inset: 0; background: /* deeper cinematic vignette drawing the eye to the centred TV */ radial-gradient(115% 78% at 50% 32%, transparent 32%, rgba(0,0,0,.80) 100%), /* darkened corners for extra depth */ radial-gradient(140% 140% at 50% 42%, transparent 60%, rgba(0,0,0,.45) 100%), /* warm red core keeping the stadium mood */ radial-gradient(80% 60% at 50% 48%, rgba(120,12,12,.20), transparent 60%); pointer-events: none; } /* Red ambient glows */ .ambient { position: absolute; pointer-events: none; mix-blend-mode: screen; } .ambient--left { left:-10vw; top:10vh; width:55vw; height:55vh; background:radial-gradient(50% 50% at 50% 50%,rgba(255,30,30,.18),transparent 70%); filter:blur(40px); } .ambient--right { right:-10vw; top:8vh; width:55vw; height:55vh; background:radial-gradient(50% 50% at 50% 50%,rgba(255,30,30,.18),transparent 70%); filter:blur(40px); } .ambient--floor { left:0; right:0; bottom:30vh; height:8vh; background:linear-gradient(to bottom,transparent,rgba(230,30,30,.35),transparent); filter:blur(18px); } /* ── 3. Desk props ─────────────────────────────────────────── */ .prop { position: absolute; pointer-events: none; user-select: none; transform-style: preserve-3d; will-change: transform, filter; } /* Mug — upright, bottom-right of the desk, closest layer to the viewer */ /*.prop--mug { width: clamp(130px, 13vw, 210px); right: 3vw; bottom: 1.5vh; z-index: 10; filter: drop-shadow(0 22px 16px rgba(0,0,0,.75))*/ /* sharp contact */ /*drop-shadow(0 42px 40px rgba(0,0,0,.50))*/ /* soft ambient spread */ /*drop-shadow(-16px 8px 24px rgba(210,20,20,.16));*/ /* red-bounce from screen */ /*}*/ /* Scarf — draped across the lower-left of the desk, largest prop, furthest back */ /*.prop--scarf { width: clamp(280px, 28vw, 360px); left: -3vw; bottom: -3vh; z-index: 7;*/ /* transform: rotate(-7deg);*/ /*transform-origin: bottom left; filter: drop-shadow(0 26px 22px rgba(0,0,0,.68)) drop-shadow(0 46px 44px rgba(0,0,0,.44)); }*/ /* Remote — lying flat on the desk, just right of centre, natural angle */ /*.prop--remote { width: clamp(140px, 15vw, 205px); left: 50%; bottom: 0.5vh; z-index: 8; transform: translateX(-50%) rotate(37deg); filter: drop-shadow(0 20px 14px rgba(0,0,0,.70)) drop-shadow(0 34px 34px rgba(0,0,0,.50)); }*/ .prop::before { content: ""; position: absolute; left: 50%; bottom: -5%; width: 86%; height: 24%; transform: translateX(-50%) rotate(-2deg); border-radius: 50%; background: radial-gradient( ellipse at center, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.58) 38%, rgba(0, 0, 0, 0.24) 68%, rgba(0, 0, 0, 0) 100% ); filter: blur(11px); z-index: 1; opacity: 0.95; } /* انعكاس/إضاءة حمرا خفيفة على الترابيزة */ .prop::after { content: ""; position: absolute; left: 50%; bottom: -10%; width: 96%; height: 22%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient( ellipse at center, rgba(224, 26, 26, 0.34) 0%, rgba(160, 0, 0, 0.15) 42%, rgba(0, 0, 0, 0) 75% ); filter: blur(15px); mix-blend-mode: screen; z-index: 0; opacity: 0.72; } /* Scarf */ .prop--scarf { width: clamp(280px, 28vw, 370px); left: -3vw; bottom: -3vh; z-index: 7; transform: rotate(-2deg); filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .52)) drop-shadow(0 34px 34px rgba(0, 0, 0, .28)); } .prop--scarf::before { width: 88%; height: 18%; bottom: 2%; transform: translateX(-48%) rotate(-6deg); opacity: 0.78; filter: blur(12px); } .prop--scarf::after { width: 80%; height: 16%; bottom: 0%; opacity: 0.42; } /* Remote */ .prop--remote { width: clamp(165px, 16vw, 230px); left: 50%; bottom: 0.35vh; z-index: 8; /* خلي 37deg لو صورة الريموت نفسها منظورها مظبوط. لو حاسه واقف زيادة، جرّب 30deg أو 32deg. */ transform: translateX(-50%) rotate(34deg); filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .55)) drop-shadow(0 24px 24px rgba(0, 0, 0, .34)); } .prop--remote::before { width: 78%; height: 18%; bottom: -2%; transform: translateX(-50%) rotate(-3deg); opacity: 0.92; filter: blur(8px); } .prop--remote::after { width: 72%; height: 16%; bottom: -5%; opacity: 0.55; filter: blur(12px); } /* Mug */ .prop--mug { width: clamp(130px, 13vw, 210px); right: 3vw; bottom: 1.5vh; z-index: 10; filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .62)) drop-shadow(0 32px 34px rgba(0, 0, 0, .36)) drop-shadow(-14px 8px 22px rgba(210, 20, 20, .16)); } .prop--mug::before { width: 70%; height: 18%; bottom: -2%; transform: translateX(-50%) rotate(1deg); opacity: 0.86; filter: blur(10px); } .prop--mug::after { width: 78%; height: 18%; bottom: -8%; opacity: 0.5; } /* Decorative desk props (mug/scarf/remote) and the TV legs are hidden by request — the desk-setup look didn't read as realistic enough. Styling above is kept so they can be re-enabled by removing this single rule. */ .badge-corner { position:absolute; right:14px; bottom:8px; font-size:10px; letter-spacing:.12em; color:rgba(255,255,255,.18); font-weight:600; pointer-events:none; } /* ── 4. TV unit ────────────────────────────────────────────── */ .tv { position: absolute; top: 50%; left: 50%; /* Lift the set higher so a proper desk foreground opens up beneath it for the mug / remote / scarf, while the TV stays the dominant element. */ transform: translate(-50%, calc(-50% - 6vh)); width: min(96vw, 1440px); aspect-ratio: 13 / 9.4; max-height: 85vh; /* transform: translate(-50%, calc(-50% - 9vh)); width: min(92vw, 1440px); aspect-ratio: 16 / 9.4; max-height: 76vh;*/ } /* Light pooling on the desk beneath the set — the silver neon rim plus a warm red spill from the screen, so the TV reads as a real light source lighting the wood in front of it (without touching the wood texture itself). */ .tv::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7vh; height: 15vh; background: /* tight silver pool right under the frame */ radial-gradient(46% 70% at 50% 8%, rgba(202,216,240,.15), rgba(202,216,240,.05) 55%, transparent 78%), /* broad warm red glow bleeding onto the table */ radial-gradient(72% 120% at 50% 24%, rgba(224,32,32,.24), rgba(176,10,10,.10) 46%, transparent 74%); filter: blur(16px); mix-blend-mode: screen; pointer-events: none; z-index: -1; } .tv__halo { position: absolute; inset: -6%; background: radial-gradient(60% 40% at 50% 40%, rgba(230,41,41,.28), transparent 70%), radial-gradient(40% 30% at 30% 60%, rgba(230,41,41,.22), transparent 70%), radial-gradient(40% 30% at 70% 60%, rgba(230,41,41,.22), transparent 70%); filter: blur(30px); z-index: -1; } .tv__bezel { position: relative; width: 100%; height: 100%; /* Vintage plastic shell — warmer, with a soft top sheen */ background: radial-gradient(120% 90% at 50% -10%, #3a2b2d 0%, transparent 45%), linear-gradient(180deg, #241a1c 0%, #160e10 45%, #0c0709 100%); border-radius: 40px / 34px; /* chunky CRT corners (asymmetric) */ padding: 34px 30px 40px; /* thick plastic frame */ box-shadow: inset 0 0 0 1px #3a2c2e, inset 0 3px 1px rgba(255,255,255,.10), /* top plastic highlight */ inset 0 -4px 2px rgba(0,0,0,.6), /* bottom shadow */ inset 6px 0 10px -6px rgba(0,0,0,.5), /* left inner bevel */ inset -6px 0 10px -6px rgba(0,0,0,.5), /* right inner bevel */ 0 60px 90px -30px rgba(0,0,0,.9), 0 0 80px -20px rgba(230,41,41,.22), /* premium silver neon — soft white-silver halo hugging the shell */ 0 0 0 1px rgba(212,222,238,.30), 0 0 14px -2px rgba(212,226,246,.30), 0 0 44px -8px rgba(178,198,230,.16); } /* Metallic silver rim — thin gradient ring tracing the outer TV shell only. The mask keeps just the 2px band; the glow itself lives on the bezel's box-shadow above (a mask would clip shadows painted by this element). */ .tv__bezel::after { content: ''; position: absolute; inset: -2.5px; border-radius: inherit; /* follows the mobile radius change too */ padding: 2px; /* ring thickness */ background: linear-gradient(160deg, #f4f7fb 0%, #8b929c 16%, #dde2ea 32%, #6f757e 50%, #cfd5de 66%, #83898f 84%, #e8ecf2 100%); -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, linear-gradient(#000 0 0); mask-composite: exclude; opacity: .85; pointer-events: none; z-index: 3; } /* Recessed screen well around the tube */ .tv__bezel::before { content: ''; position: absolute; inset: 20px; border-radius: 28px / 22px; pointer-events: none; z-index: 1; box-shadow: 0 0 0 2px #0a0607, inset 0 0 0 3px #050304, inset 0 6px 14px rgba(0,0,0,.85), inset 0 -3px 8px rgba(0,0,0,.7); } .tv__chrome { position: absolute; inset: 0; border-radius: 40px / 34px; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 10%), linear-gradient(0deg, rgba(255,255,255,.04), transparent 10%), /* cool silver reflections catching the black plastic edges */ linear-gradient(105deg, transparent 5%, rgba(215,228,248,.07) 9%, transparent 15%), linear-gradient(285deg, transparent 5%, rgba(215,228,248,.05) 9%, transparent 14%); } .tv__body { position: relative; width: 100%; height: 100%; display: flex; flex-direction: row; /* RTL: first child (control panel) sits on the RIGHT */ gap: 12px; border-radius: 22px / 18px; /* curved CRT tube corners */ overflow: hidden; background: #000; box-shadow: inset 0 0 0 2px #050304, inset 0 0 0 5px #140c0d, inset 0 0 70px rgba(0,0,0,.9); } /* Brand label & power LED */ .tv__brand { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 10px; letter-spacing: .18em; /* A touch more legible, with a faint red halo — elegant, not bright. */ color: rgba(255,255,255,.34); padding: 3px 10px; text-shadow: 0 0 6px rgba(230,41,41,.28), 0 1px 1px rgba(0,0,0,.6); } .tv__brand span { color: rgba(240,70,60,.78); text-shadow: 0 0 8px rgba(230,41,41,.5); } .tv__led { position: absolute; bottom: 6px; left: 18px; width: 5px; height: 5px; border-radius: 50%; background: #e62929; box-shadow: 0 0 8px #e62929, 0 0 16px rgba(230,41,41,.6); animation: tv-led 2.6s ease-in-out infinite; } @keyframes tv-led { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.15)} } /* Twin premium dark-metal support legs (PNG art). z-index:-1 keeps them behind the bezel, so the square connectors read as inserted up into the bottom TV frame rather than floating in front of it. */ .tv__legs { position: absolute; left: 0; right: 0; /* small overlap: the square connector straddles the frame seam so it looks partially inserted, with the rest of the leg emerging below. */ top: calc(100% - clamp(7px, 1.1vh, 14px)); height: clamp(74px, 11vh, 128px); pointer-events: none; z-index: -1; } .tv__leg { position: absolute; bottom: 0; height: 100%; background: bottom center / contain no-repeat; /* Dark-red cinematic integration: layered soft contact shadow grounding the foot on the desk, plus a faint red bounce from the screen. */ filter: drop-shadow(0 8px 6px rgba(0,0,0,.62)) drop-shadow(0 16px 16px rgba(0,0,0,.42)) drop-shadow(0 3px 9px rgba(224,30,30,.14)); } /* Stance pulled inboard so both legs sit in the clear desk gaps flanking the remote, rather than being hidden behind the scarf / mug in the foreground. */ .tv__leg--l { left: 26%; aspect-ratio: 460 / 476; background-image: url('../images/tv/leg-l.png'); } .tv__leg--r { right: 26%; aspect-ratio: 459 / 485; background-image: url('../images/tv/leg-r.png'); } /* Subtle red screen-reflection sheen on the upper metal facing the tube. */ .tv__leg::before { content: ''; position: absolute; top: 12%; left: 15%; right: 15%; height: 46%; background: radial-gradient(60% 70% at 50% 30%, rgba(230,40,40,.16), transparent 72%); mix-blend-mode: screen; filter: blur(4px); } /* Faint glossy reflection of the leg on the polished wooden table under each foot. */ .tv__leg::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: -7%; height: 16%; background: radial-gradient(ellipse at center, rgba(190,120,110,.20) 0%, rgba(150,20,20,.10) 45%, transparent 76%); filter: blur(6px); mix-blend-mode: screen; } /* ── 5. Screen — scrollable content ────────────────────────── */ .tv__screen { position: relative; flex: 1 1 auto; height: 100%; overflow-y: auto; overflow-x: hidden; background: #0b0507; scroll-behavior: smooth; border-radius: 16px / 12px; /* curved tube edge */ box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), inset 0 0 70px rgba(0,0,0,.78); scrollbar-width: thin; scrollbar-color: #3a1417 transparent; } .tv__screen::-webkit-scrollbar { width:4px } .tv__screen::-webkit-scrollbar-track { background:transparent } .tv__screen::-webkit-scrollbar-thumb { background:#3a1417; border-radius:3px } .tv__screen::-webkit-scrollbar-thumb:hover { background:#6a1c1f } .tv__glare { position:absolute; inset:0; pointer-events:none; border-radius:16px / 12px; background: /* bright glass sheen hugging the TOP edge, fading down */ linear-gradient(180deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.035) 6%, transparent 17%), /* cool reflections catching the LEFT & RIGHT glass edges */ linear-gradient(90deg, rgba(220,230,245,.07) 0%, transparent 7%, transparent 93%, rgba(220,230,245,.055) 100%), /* diagonal corner-to-corner sheen */ linear-gradient(115deg, rgba(255,255,255,.06) 0%, transparent 20%, transparent 82%, rgba(255,255,255,.035) 100%), /* very subtle glass film — knocks the "flat screenshot" look off the content */ linear-gradient(160deg, rgba(255,255,255,.02) 0%, rgba(0,0,0,.015) 52%, rgba(0,0,0,.055) 100%), /* convex-tube edge darkening + vignette focusing the centre */ radial-gradient(125% 120% at 50% 45%, transparent 55%, rgba(0,0,0,.62) 100%); z-index:50; } .tv__scanlines { position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0px,rgba(255,255,255,.018) 1px,transparent 1px,transparent 3px); mix-blend-mode:overlay; z-index:49; opacity:.6; } /* ── 6. Side panel — natural vintage tuner column (RIGHT side) ──── */ /* Dark warm bakelite cabinet that the brass control plate screws into */ .tv__side { position: relative; flex: 0 0 17%; min-width: 152px; max-width: 220px; height: 100%; display: flex; flex-direction: column; gap: 11px; padding: 14px 12px 13px; background: radial-gradient(130% 50% at 50% 0%, #2c2022 0%, transparent 55%), linear-gradient(180deg, #1f1517 0%, #140d0f 55%, #0b0709 100%); border-radius: 14px / 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 2px 0 7px -3px rgba(0,0,0,.65), /* groove next to screen */ inset 0 0 0 1px rgba(255,255,255,.03), inset 0 -3px 9px rgba(0,0,0,.6); } /* Brushed-brass control plate holding the two tuners */ .tuner { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 13px 10px 14px; border-radius: 12px; /* Darker, desaturated aged-bronze plate — premium but recessive, so it never competes with the Ahly07 logo for attention. */ background: linear-gradient(180deg, rgba(224,214,188,.32) 0%, transparent 7%), repeating-linear-gradient(90deg, rgba(200,186,150,.07) 0 1px, rgba(48,32,12,.14) 1px 2px), linear-gradient(108deg, #7c6538 0%, #948049 20%, #6f5730 44%, #897448 64%, #5f4c28 100%); box-shadow: inset 0 1px 0 rgba(228,214,182,.42), inset 0 0 0 1px rgba(86,60,26,.6), inset 0 -5px 12px rgba(40,26,8,.6), 0 2px 5px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.5); } /* mounting screws, top corners */ .tuner::before, .tuner::after { content: ''; position: absolute; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fff6df, #b38f4e 60%, #6f5320 100%); box-shadow: inset 0 0 0 1px rgba(80,56,20,.7), 0 1px 1px rgba(0,0,0,.4); } .tuner::before { left: 6px; } .tuner::after { right: 6px; } /* Channel readout — dark glass window with glowing digits */ .tuner__readout { display: flex; align-items: baseline; gap: 4px; padding: 3px 13px 4px; margin-bottom: 1px; border-radius: 5px; background: linear-gradient(180deg, #1a0c0d, #070304); box-shadow: inset 0 2px 5px rgba(0,0,0,.85), inset 0 0 0 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,250,232,.55); } .tuner__readout-cap { font: 800 8px/1 'Cairo', sans-serif; letter-spacing: .14em; color: #9c5b30; text-shadow: 0 0 6px rgba(230,80,40,.4); } .tuner__readout-num { font: 800 17px/1 'Cairo', sans-serif; letter-spacing: .06em; color: #ff5a36; text-shadow: 0 0 8px rgba(255,70,40,.85), 0 0 18px rgba(255,40,20,.5); transition: color .12s, text-shadow .12s; } .tuner__readout-num.flash { color: #fff; text-shadow: 0 0 12px #fff, 0 0 22px rgba(255,90,50,.95); } /* Knob assembly */ .knob-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; } .knob { --num-r: clamp(23px, 3.44vw, 33px); position: relative; width: clamp(58px, 8.6vw, 84px); aspect-ratio: 1; border-radius: 50%; cursor: grab; touch-action: none; outline: none; } .knob--channel { cursor: pointer; } .knob:focus-visible { box-shadow: 0 0 0 2px rgba(255,90,50,.85); } /* engraved seat groove in the brass */ .knob::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; box-shadow: inset 0 1px 1px rgba(255,250,232,.6), inset 0 -2px 3px rgba(70,44,14,.6), 0 0 0 1px rgba(90,64,26,.45); } /* printed (engraved) number ring — static */ .knob__face { position: absolute; inset: 0; } .knob__num { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; display: grid; place-items: center; font: 800 8px/1 'Cairo', sans-serif; color: #2c2007; text-shadow: 0 1px 0 rgba(255,250,232,.55); transform: rotate(var(--a)) translateY(calc(-1 * var(--num-r))) rotate(calc(-1 * var(--a))); } /* rotating knurled grip cap */ .knob__cap { position: absolute; top: 50%; left: 50%; width: 60%; height: 60%; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); border-radius: 50%; background: repeating-conic-gradient(from 0deg, #181210 0 6deg, #070504 6deg 12deg); box-shadow: inset 0 0 0 2px #0b0706, inset 0 -3px 6px rgba(0,0,0,.7), 0 2px 5px rgba(0,0,0,.6), 0 0 0 3px rgba(255,248,224,.22), 0 0 0 4px rgba(80,56,20,.5); transition: transform .16s cubic-bezier(.34,1.4,.5,1); } .knob--active .knob__cap { transition: none; cursor: grabbing; } /* chrome dome on the cap */ .knob__cap::after { content: ''; position: absolute; inset: 26%; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #fdfdfb 0%, #c8ccd0 34%, #6c7176 70%, #34373c 100%); box-shadow: inset 0 -2px 4px rgba(0,0,0,.55), inset 0 2px 3px rgba(255,255,255,.7), 0 1px 2px rgba(0,0,0,.5); } /* indicator pointer (rotates with the cap) */ .knob__pointer { position: absolute; top: 6%; left: 50%; width: 3px; height: 26%; margin-left: -1.5px; border-radius: 2px; background: linear-gradient(180deg, #fff3d4, #e7b86a); box-shadow: 0 0 5px rgba(255,225,150,.8); z-index: 2; } .knob__legend { font: 800 9px/1 'Cairo', sans-serif; letter-spacing: .04em; color: #3a2b0c; text-shadow: 0 1px 0 rgba(255,250,232,.5); } /* ── Channel selector — vintage numbered preset pushbuttons ────── */ .ch-selector { width: 100%; display: flex; flex-direction: column; gap: 5px; } .ch-selector__label { font: 800 9px/1 'Cairo', sans-serif; letter-spacing: .04em; text-align: center; color: #3a2b0c; text-shadow: 0 1px 0 rgba(255,250,232,.5); } .ch-selector__row { display: flex; gap: 6px; align-items: stretch; } /* dark glass readout showing the current page/channel name */ .ch-screen { flex: 1 1 auto; min-width: 0; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 7px 10px; border-radius: 7px; background: linear-gradient(180deg, #0b0607, #040203); box-shadow: inset 0 2px 6px rgba(0,0,0,.85), inset 0 0 0 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,250,232,.5); } .ch-screen::before { /* faint LCD scanlines */ content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px); } .ch-screen__num { font: 800 9px/1 'Cairo', sans-serif; letter-spacing: .12em; color: #ff5a36; text-shadow: 0 0 7px rgba(255,70,40,.65); } .ch-screen__name { font: 800 12px/1.25 'Cairo', sans-serif; color: #ffce8a; text-shadow: 0 0 7px rgba(255,180,90,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s, text-shadow .15s; } .ch-screen.flash .ch-screen__name, .ch-screen.flash .ch-screen__num { color: #fff; text-shadow: 0 0 11px #fff, 0 0 18px rgba(255,120,80,.8); } /* vertical rocker (▲ next / ▼ prev) */ .ch-rocker { flex: 0 0 auto; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(150,108,52,.5), 0 1px 2px rgba(0,0,0,.5); } .ch-rocker__btn { width: 32px; flex: 1 1 0; border: 0; cursor: pointer; padding: 6px 0; display: grid; place-items: center; color: #f0e0c4; background: linear-gradient(180deg, #2a1d12, #120b07); transition: color .15s, background .15s, transform .08s; } .ch-rocker__btn:first-child { box-shadow: inset 0 -1px 0 rgba(0,0,0,.55), inset 0 1px 0 rgba(255,240,210,.16); } .ch-rocker__btn:hover { color: #fff; background: linear-gradient(180deg, #3a2715, #1b0f08); } .ch-rocker__btn:active { transform: scale(.92); } .ch-rocker__btn svg { width: 14px; height: 14px; } /* Recessed advertising insert */ .tv-side-ad { flex: 1 1 auto; min-height: 100px; display: flex; flex-direction: column; padding: 6px; border-radius: 8px; background: linear-gradient(180deg, #0a0608, #060304); box-shadow: inset 0 2px 6px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,248,224,.05), 0 1px 0 rgba(255,248,224,.22); } .tv-side-ad .ad-unit { margin:0; height:100%; flex:1; } .tv-side-ad .ad-unit--demo { width:100%; height:100%; min-height:80px; border-radius: 6px; border-color: rgba(230,41,41,.30); background: repeating-linear-gradient(135deg, rgba(230,41,41,.05) 0px, rgba(230,41,41,.05) 8px, transparent 8px, transparent 16px), transparent; } /* Speaker grille — brass-framed louvered slats */ .side-grille { position: relative; flex: 0 0 auto; height: 52px; border-radius: 7px; background: repeating-linear-gradient(180deg, #080605 0 2px, #2a1d12 2px 3px, #080605 3px 5px); box-shadow: inset 0 0 0 2px rgba(150,108,52,.5), inset 0 2px 7px rgba(0,0,0,.85), 0 1px 0 rgba(255,248,224,.2); display: grid; place-items: center; } .side-grille__badge { font: 800 8px/1 'Cairo', sans-serif; letter-spacing: .14em; color: rgba(214,170,110,.6); background: rgba(8,5,4,.72); padding: 2px 8px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(150,108,52,.4); } /* Power push-button — brass-rimmed vintage button */ .side-power { flex: 0 0 auto; width: 38px; height: 38px; margin: 1px auto 0; border-radius: 50%; display: grid; place-items: center; color: #e62929; cursor: pointer; border: 0; background: radial-gradient(circle at 36% 30%, #2a1c1e, #0b0707 74%); box-shadow: inset 0 1px 1px rgba(255,255,255,.14), inset 0 -3px 6px rgba(0,0,0,.7), 0 2px 5px rgba(0,0,0,.55), 0 0 0 2px rgba(150,108,52,.45), 0 0 12px rgba(230,41,41,.4); transition: transform .1s, box-shadow .2s, color .2s; } .side-power:hover { color: #ff4b4b; box-shadow: inset 0 1px 1px rgba(255,255,255,.14), inset 0 -3px 6px rgba(0,0,0,.7), 0 2px 5px rgba(0,0,0,.55), 0 0 0 2px rgba(150,108,52,.6), 0 0 16px rgba(230,41,41,.6); } .side-power:active { transform: translateY(1px) scale(.96); } .side-power--off { color: #5a4244; box-shadow: inset 0 1px 1px rgba(255,255,255,.1), inset 0 -3px 6px rgba(0,0,0,.7), 0 2px 5px rgba(0,0,0,.55), 0 0 0 2px rgba(90,64,26,.4); } /* ── 6b. On-screen display (volume / channel / power) ──────────── */ .tv-osd { position: absolute; left: 16px; bottom: 7%; z-index: 70; pointer-events: none; min-width: 178px; padding: 11px 15px; display: flex; flex-direction: column; gap: 8px; background: rgba(8,4,5,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(230,41,41,.3); border-radius: 12px; box-shadow: 0 18px 45px rgba(0,0,0,.6), 0 0 26px rgba(230,41,41,.18); opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .18s ease, transform .18s ease; } .tv-osd--in { opacity: 1; transform: translateY(0) scale(1); } .tv-osd__row { display: flex; align-items: center; gap: 9px; color: #f0e6e6; } .tv-osd__ico { width: 20px; height: 20px; flex: 0 0 auto; color: #e62929; display: grid; place-items: center; } .tv-osd__ico svg { width: 100%; height: 100%; } .tv-osd__label { font: 800 13px/1 'Cairo', sans-serif; } .tv-osd__big { margin-inline-start: auto; font: 800 18px/1 'Cairo', sans-serif; color: #fff; } .tv-osd__meter { height: 7px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.1); box-shadow: inset 0 1px 2px rgba(0,0,0,.6); } .tv-osd__meter i { display: block; height: 100%; width: 0%; border-radius: 4px; background: linear-gradient(90deg, #a40b0b, #e62929 70%, #ff6b6b); box-shadow: 0 0 10px rgba(230,41,41,.7); transition: width .1s ease; } .tv-osd--channel .tv-osd__meter { display: none; } /* When powered off, freeze the screen scroll so the standby overlay covers it */ .tv__screen--off { overflow: hidden; } /* ── 6c. Playlist video stepper (under the channel knob) ───────── */ .knob-pnav { display: flex; align-items: center; gap: 6px; margin: 1px 0 1px; padding: 4px 7px; border-radius: 9px; background: linear-gradient(180deg, rgba(24,14,9,.6), rgba(8,5,4,.72)); box-shadow: inset 0 0 0 1px rgba(150,108,52,.45), inset 0 1px 2px rgba(0,0,0,.6), 0 1px 0 rgba(255,248,224,.18); } .knob-pnav[hidden] { display: none !important; } .pnav-btn { width: 30px; height: 26px; border: 0; cursor: pointer; display: grid; place-items: center; border-radius: 6px; color: #f0e0c4; background: linear-gradient(180deg, #2a1d12, #120b07); box-shadow: inset 0 1px 0 rgba(255,240,210,.18), inset 0 -2px 4px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5); transition: transform .1s, color .15s, box-shadow .15s; } .pnav-btn:hover { color: #fff; box-shadow: inset 0 1px 0 rgba(255,240,210,.2), 0 0 10px rgba(230,41,41,.5), 0 1px 2px rgba(0,0,0,.5); } .pnav-btn:active { transform: translateY(1px) scale(.94); } .pnav-btn svg { width: 15px; height: 15px; } .knob-pnav__lbl { font: 800 8px/1 'Cairo', sans-serif; letter-spacing: .08em; color: #d6aa5e; padding: 0 1px; } /* ── 6d. Standby overlay (TV powered off) ──────────────────────── */ /* Lives in .tv__body (non-scrolling) and sits BELOW the side panel so the brass controls stay visible/usable while it covers the whole screen. */ .tv-standby { position: absolute; inset: 0; z-index: 55; /* above nav (40) + glare (50) */ display: flex; align-items: center; justify-content: center; text-align: center; background: radial-gradient(120% 90% at 50% 38%, rgba(22,7,9,.86), rgba(3,1,2,.985) 70%), repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px), #030102; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .tv-standby--on { opacity: 1; pointer-events: auto; } /* Keep the control column above the standby veil */ .tv__side { z-index: 60; } .tv-standby__inner { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 24px; transform: translateY(10px) scale(.98); transition: transform .45s cubic-bezier(.2,.7,.3,1); } .tv-standby--on .tv-standby__inner { transform: translateY(0) scale(1); } .tv-standby__dot { width: 12px; height: 12px; border-radius: 50%; background: #e62929; box-shadow: 0 0 10px #e62929, 0 0 24px rgba(230,41,41,.75); animation: tv-led 2s ease-in-out infinite; } .tv-standby__brand { font: 900 22px/1 'Cairo', sans-serif; color: #fff; letter-spacing: .03em; margin-top: 2px; } .tv-standby__brand span { color: #e62929; } .tv-standby__title { font: 800 16px/1.4 'Cairo', sans-serif; color: #f0e0e0; } .tv-standby__sub { font: 600 13px/1.6 'Cairo', sans-serif; color: #b08a8a; max-width: 330px; } .tv-standby__btn { margin-top: 8px; padding: 11px 24px; border: 0; border-radius: 11px; cursor: pointer; font: 800 14px/1 'Cairo', sans-serif; color: #fff; background: linear-gradient(180deg, #e62929, #a40b0b); box-shadow: 0 10px 26px -6px rgba(230,41,41,.7), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .12s, box-shadow .2s; } .tv-standby__btn:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -6px rgba(230,41,41,.85), inset 0 1px 0 rgba(255,255,255,.3); } .tv-standby__btn:active { transform: translateY(0) scale(.97); } /* ── 7. TV top navigation ──────────────────────────────────── */ .tv-topnav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 7px 14px; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.3) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.05); position: sticky; top: 0; z-index: 40; } .tv-topnav__logo { display:flex; align-items:center; } .tv-topnav__logo img { width:130px; height:32px; object-fit:fill; filter:drop-shadow(0 2px 8px rgba(230,41,41,.4)); } .tv-topnav__menu { display: flex; align-items: center; gap: 1px; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; } .tv-topnav__menu::-webkit-scrollbar { display:none } /* Override existing .nav-link, .nav-drop-wrap inside the TV nav */ .tv-topnav__menu .nav-link, .tv-topnav__menu .nav-link-has-drop, .tv-nav-item { padding: 6px 10px !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 600 !important; color: #d8c9c9 !important; white-space: nowrap !important; transition: color .2s, background .2s !important; background: transparent !important; border: none !important; text-decoration: none !important; position: relative !important; } .tv-topnav__menu .nav-link:hover, .tv-topnav__menu .nav-link-has-drop:hover, .tv-nav-item:hover { color:#fff !important; background:rgba(255,255,255,.05) !important; } .tv-topnav__menu .nav-link.active, .tv-nav-item--active { color:#fff !important; } .tv-topnav__menu .nav-link.active::after, .tv-nav-item--active::after { content:''; position:absolute; left:8px; right:8px; bottom:-1px; height:2px; background:linear-gradient(90deg,#ff3030,#a90b0b); border-radius:2px; box-shadow:0 0 12px rgba(230,41,41,.7); } /* Nav dropdowns inside TV — override existing nav-drop */ .tv-topnav__menu .nav-drop-wrap { position:relative; } .tv-topnav__menu .nav-drop { position:absolute !important; top:calc(100% + 8px) !important; right:0 !important; background:rgba(10,4,7,.97) !important; border:1px solid rgba(230,41,41,.25) !important; border-radius:10px !important; padding:8px !important; min-width:180px !important; z-index:60 !important; backdrop-filter:blur(8px) !important; box-shadow:0 20px 50px rgba(0,0,0,.65),0 0 30px rgba(230,41,41,.16) !important; } .tv-topnav__menu .nav-drop-item { display:flex !important; align-items:center !important; gap:8px !important; padding:8px 10px !important; border-radius:6px !important; font-size:12px !important; color:#d8c9c9 !important; transition:background .15s !important; text-decoration:none !important; } .tv-topnav__menu .nav-drop-item:hover { background:rgba(230,41,41,.12) !important; color:#fff !important; } .tv-topnav__menu .nav-drop-divider { height:1px; background:rgba(255,255,255,.06); margin:4px 0; } .tv-topnav__actions { display:flex; align-items:center; gap:6px; } /* Icon buttons */ .tv-icon-btn { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); color:#d8c9c9; cursor:pointer; transition:all .2s; } .tv-icon-btn:hover { background:rgba(230,41,41,.14); border-color:rgba(230,41,41,.4); color:#fff; } .tv-icon-btn.tv-hamburger { border-radius:6px; flex-direction:column; gap:0; padding:8px; } .tv-hamburger span { display:block; width:16px; height:1.5px; background:currentColor; border-radius:1px; } .tv-hamburger span + span { margin-top:4px; } /* Login button */ .tv-login-btn { padding:5px 12px; border-radius:6px; background:rgba(230,41,41,.15); border:1px solid rgba(230,41,41,.35); color:#f0e6e6; font-size:12px; font-weight:700; cursor:pointer; transition:all .2s; text-decoration:none !important; display:inline-flex; align-items:center; } .tv-login-btn:hover { background:rgba(230,41,41,.28); color:#fff; } /* User menu */ .tv-user-menu { position:relative; } .tv-user-btn { display:flex; align-items:center; gap:6px; padding:5px 10px; border-radius:6px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); color:#d8c9c9; cursor:pointer; font-size:12px; font-family:inherit; } .tv-user-avatar { width:24px; height:24px; border-radius:50%; background:linear-gradient(180deg,#e62929,#a40b0b); display:grid; place-items:center; font-size:11px; font-weight:800; color:#fff; } .tv-user-dropdown { display:none; position:absolute; top:calc(100% + 8px); left:0; background:rgba(10,4,7,.97); border:1px solid rgba(230,41,41,.25); border-radius:10px; padding:8px; min-width:150px; z-index:60; backdrop-filter:blur(8px); box-shadow:0 20px 50px rgba(0,0,0,.65); } .tv-user-menu:hover .tv-user-dropdown, .tv-user-menu:focus-within .tv-user-dropdown, .tv-user-menu--open .tv-user-dropdown { display:block } .tv-user-dropdown a, .tv-user-dropdown button { display:block; width:100%; padding:8px 10px; border-radius:6px; font-size:12px; color:#d8c9c9; text-align:right; background:none; border:0; cursor:pointer; font-family:inherit; transition:background .15s; text-decoration:none !important; } .tv-user-dropdown a:hover, .tv-user-dropdown button:hover { background:rgba(230,41,41,.12); color:#fff } /* ── 8. Dark theme for existing content components ─────────── */ /* Override CSS custom properties in the TV main area so all child components (vcard, section-block, etc.) inherit dark colors */ .tv-main { --white: #100a0c; --surface: #170c0f; --ink: #f0e6e6; --muted: #b8a4a4; --border: rgba(255,255,255,0.06); --bg: #0b0507; --red-600: #e62929; --red-700: #c41a1a; color: #f0e6e6; padding: 0 14px 20px; } /* Video cards */ .tv-main .vcard { background:linear-gradient(180deg,#170c0f,#0a0507) !important; border-color:rgba(255,255,255,.06) !important; } .tv-main .vcard-title { color:#ece3e3 !important; } .tv-main .vcard-meta { color:#b8a4a4 !important; } .tv-main .vcard-tag { background:rgba(230,41,41,.12) !important; border-color:rgba(230,41,41,.25) !important; color:#e0c9cc !important; } .tv-main .vcard-tag:hover { background:rgba(230,41,41,.25) !important; color:#fff !important; } .tv-main .vcard:hover { border-color:rgba(230,41,41,.4) !important; box-shadow:0 8px 24px rgba(0,0,0,.5) !important; } /* Mini cards */ .tv-main .mini-card, .tv-main .mw-item { background:linear-gradient(180deg,#170c0f,#0a0507) !important; border-color:rgba(255,255,255,.06) !important; } .tv-main .mw-title { color:#ece3e3 !important; } .tv-main .mw-meta { color:#b8a4a4 !important; } /* Section headers */ .tv-main .section-title { color:#f0e6e6 !important; } .tv-main .section-title span { color:#e62929 !important; } .tv-main .section-header { border-color:rgba(255,255,255,.06) !important; } .tv-main .section-block { background:transparent !important; } .tv-main .see-all { color:#e62929 !important; } .tv-main .see-all:hover { color:#ff5252 !important; } /* Trending strip */ .tv-main .trending-strip { background:rgba(255,255,255,.03) !important; border-color:rgba(255,255,255,.06) !important; border-radius:8px !important; } .tv-main .trending-chip { background:rgba(230,41,41,.12) !important; border-color:rgba(230,41,41,.25) !important; color:#e0c9cc !important; } .tv-main .trending-chip:hover { background:rgba(230,41,41,.25) !important; color:#fff !important; } /* Like button inside dark theme */ .tv-main .like-btn { border-color:rgba(255,255,255,.12) !important; color:#b8a4a4 !important; background:rgba(255,255,255,.04) !important; } .tv-main .like-btn.liked, .tv-main .like-btn:hover { border-color:rgba(230,41,41,.4) !important; color:#e62929 !important; } /* ── 9. TV Hero section ─────────────────────────────────────── */ .tv-hero { position: relative; border-radius: 12px; overflow: hidden; height: clamp(160px, 26vh, 300px); margin-bottom: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 20px 40px -20px rgba(230,41,41,.4); } .tv-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(1.1) contrast(1.05); } .tv-hero__vignette { position: absolute; inset: 0; background: linear-gradient(to left, rgba(0,0,0,.82) 0%, rgba(0,0,0,.25) 50%, transparent 100%), linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 55%), linear-gradient(to bottom, rgba(0,0,0,.4) 0%, transparent 30%); } .tv-hero__sparkles { position:absolute; inset:0; pointer-events:none; } .tv-hero__sparkles span { position:absolute; width:3px; height:3px; border-radius:50%; background:#ff6464; box-shadow:0 0 6px #ff3030,0 0 12px rgba(230,41,41,.6); animation:tv-spark 4s ease-in-out infinite; } .tv-hero__sparkles span:nth-child(1){left:12%;top:30%;animation-delay:0s} .tv-hero__sparkles span:nth-child(2){left:25%;top:65%;animation-delay:.7s} .tv-hero__sparkles span:nth-child(3){left:50%;top:20%;animation-delay:1.3s} .tv-hero__sparkles span:nth-child(4){left:70%;top:55%;animation-delay:1.9s} .tv-hero__sparkles span:nth-child(5){left:83%;top:35%;animation-delay:2.5s} .tv-hero__sparkles span:nth-child(6){left:91%;top:70%;animation-delay:3.1s} @keyframes tv-spark { 0%,100%{transform:translateY(0);opacity:.4} 50%{transform:translateY(-10px);opacity:1} } .tv-hero__content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 20px; z-index: 3; } .tv-hero__badges { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; } .tv-hero__title { font-size: clamp(13px, 1.7vw, 20px); font-weight: 800; color: #fff; line-height: 1.4; text-shadow: 0 2px 12px rgba(0,0,0,.85); text-decoration: none !important; display: block; margin-bottom: 6px; } .tv-hero__title:hover { opacity:.9 } .tv-hero__meta { display:flex; gap:10px; flex-wrap:wrap; font-size:11px; color:rgba(255,255,255,.6); } .tv-hero__play { position:absolute; top:50%; right:20px; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:rgba(230,41,41,.88); display:grid; place-items:center; box-shadow:0 0 20px rgba(230,41,41,.65),0 0 0 3px rgba(255,255,255,.12); text-decoration:none !important; transition:transform .2s,box-shadow .2s; z-index:4; } .tv-hero__play:hover { transform:translateY(-50%) scale(1.1); box-shadow:0 0 30px rgba(230,41,41,.85),0 0 0 4px rgba(255,255,255,.18); } /* ── 10. Quick links ───────────────────────────────────────── */ .tv-quicks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 14px; } .tv-quick { position: relative; background: linear-gradient(180deg, #190d10, #0c0608); border: 1px solid rgba(255,255,255,.05); border-radius: 10px; padding: 14px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 7px; color: #e0c9cc; text-decoration: none !important; transition: all .25s ease; overflow: hidden; cursor: pointer; } .tv-quick::before { content:''; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 0%,rgba(230,41,41,.18),transparent 70%); opacity:0; transition:opacity .3s; } .tv-quick:hover, .tv-quick:focus { border-color:rgba(230,41,41,.55); transform:translateY(-2px); color:#fff !important; box-shadow:0 10px 22px -8px rgba(230,41,41,.4),0 0 0 1px rgba(230,41,41,.35); } .tv-quick:hover::before { opacity:1 } .tv-quick__icon { width:32px; height:32px; display:grid; place-items:center; color:#e62929; filter:drop-shadow(0 0 8px rgba(230,41,41,.4)); } .tv-quick__icon svg { width:100%; height:100% } .tv-quick__label { font-size:11px; font-weight:700; text-align:center; line-height:1.3; } /* ── 11. Ticker ────────────────────────────────────────────── */ .tv-ticker { display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg,#170b0e,#0a0507); border: 1px solid rgba(255,255,255,.04); border-radius: 8px; padding: 8px 12px; overflow: hidden; margin: 10px 0; } .tv-ticker__chip { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; background:#e62929; color:#fff; padding:4px 10px; border-radius:5px; font-size:11px; font-weight:800; box-shadow:0 0 12px rgba(230,41,41,.45); white-space:nowrap; } .tv-ticker__dot { width:6px; height:6px; border-radius:50%; background:#fff; animation:tv-dot 1.4s infinite; } @keyframes tv-dot { 0%,100%{opacity:1} 50%{opacity:.4} } .tv-ticker__track { display:flex; gap:36px; white-space:nowrap; flex:1; min-width:0; animation:tv-ticker 34s linear infinite; font-size:12px; color:#d8c9c9; } .tv-ticker__track a { color:inherit; text-decoration:none !important; } .tv-ticker__track a:hover { color:#fff } .tv-ticker__track:hover { animation-play-state:paused } @keyframes tv-ticker { from{transform:translateX(-50%)} to{transform:translateX(50%)} } /* ── 12. TV footer ─────────────────────────────────────────── */ .tv-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.05); margin-top: 6px; font-size:11px; } .tv-footer__brand { font-size:15px; font-weight:900; color:#e62929; } .tv-footer__brand span { color:#fff } .tv-footer__brand em { color:rgba(255,255,255,.35); font-style:normal; } .tv-footer__links { display:flex; gap:10px; flex-wrap:wrap; } .tv-footer__links a { color:#9a8285; font-size:11px; text-decoration:none !important; transition:color .2s; } .tv-footer__links a:hover { color:#e62929 } .tv-footer__copy { color:#5a4244; font-size:10px; } /* ── 13. Search overlay (inside TV screen) ─────────────────── */ .tv-search-overlay { position: absolute; inset: 0; z-index: 80; background: rgba(5,1,3,.88); backdrop-filter: blur(10px); display: grid; place-items: start center; padding-top: 16%; opacity: 0; pointer-events: none; transition: opacity .22s ease; } .tv-search-overlay--in { opacity:1; pointer-events:all } .tv-search-card { display:flex; gap:8px; width:min(520px,78%); background:#0e0608; border:1px solid rgba(230,41,41,.28); border-radius:12px; padding:10px; box-shadow:0 30px 70px rgba(0,0,0,.65),0 0 30px rgba(230,41,41,.2); } .tv-search-card input { flex:1; background:transparent; border:0; outline:0; color:#fff; font:600 15px 'Cairo'; padding:8px 10px; text-align:right; } .tv-search-card input::placeholder { color:#7a5d60 } .tv-search-submit { padding:8px 16px; border-radius:7px; background:linear-gradient(180deg,#e62929,#a40b0b); color:#fff; font-size:12px; font-weight:700; border:0; cursor:pointer; font-family:inherit; white-space:nowrap; } /* ── 14. Mobile drawer ─────────────────────────────────────── */ .tv-drawer { position: fixed; inset-block: 0; right: -290px; width: 280px; background: linear-gradient(180deg,#130a0c,#0a0508); border-left: 1px solid rgba(230,41,41,.22); z-index: 300; padding: 18px 14px 24px; transition: right .3s cubic-bezier(.4,0,.2,1); overflow-y: auto; } .tv-drawer.open { right: 0 } .tv-drawer__close { position:absolute; top:12px; left:14px; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.06); border:0; color:#d8c9c9; font-size:18px; cursor:pointer; display:grid; place-items:center; } .tv-drawer__head { font-size:14px; font-weight:800; color:#e62929; margin-bottom:16px; padding-top:4px; } .tv-drawer nav { display:flex; flex-direction:column; gap:2px; } .tv-drawer nav a, .tv-drawer nav .nav-link { display:block !important; padding:10px 10px !important; border-radius:7px !important; color:#d8c9c9 !important; font-size:13px !important; font-weight:600 !important; text-decoration:none !important; transition:background .2s !important; background:transparent !important; } .tv-drawer nav a:hover, .tv-drawer nav .nav-link:hover { background:rgba(230,41,41,.12) !important; color:#fff !important; } .tv-drawer nav .nav-drop-wrap { position:static; } .tv-drawer nav .nav-drop-wrap { position: static; } /* Default: closed - no height */ .tv-drawer nav .nav-drop { position: static !important; display: block !important; max-height: 0 !important; overflow: hidden !important; opacity: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 0 0 12px !important; margin: 0 !important; backdrop-filter: none !important; transition: max-height .25s ease, opacity .2s ease, padding .2s ease !important; } /* Open on hover or keyboard focus */ .tv-drawer nav .nav-drop-wrap:hover .nav-drop, .tv-drawer nav .nav-drop-wrap:focus-within .nav-drop { max-height: 500px !important; opacity: 1 !important; padding: 2px 0 2px 12px !important; } /* Parent item active background while dropdown open */ .tv-drawer nav .nav-drop-wrap:hover > .nav-link, .tv-drawer nav .nav-drop-wrap:focus-within > .nav-link { background: rgba(230,41,41,.12) !important; color: #fff !important; } /* Rotate caret */ .tv-drawer nav .nav-drop-wrap:hover .nav-caret, .tv-drawer nav .nav-drop-wrap:focus-within .nav-caret { transform: rotate(180deg); } .tv-drawer nav .nav-caret { transition: transform .2s ease; } /* Dropdown items */ .tv-drawer nav .nav-drop-item { font-size: 12px !important; color: #9a8285 !important; padding-inline-start: 16px !important; } .tv-drawer nav .nav-drop-item:hover { background: rgba(230,41,41,.08) !important; color: #fff !important; } .tv-drawer nav .nav-drop-divider { display: none; } .tv-drawer nav .nav-drop-item { font-size:12px !important; color:#9a8285 !important; } .tv-drawer nav .nav-drop-item:hover { background:rgba(230,41,41,.08) !important; color:#fff !important; } .tv-drawer nav .nav-drop-divider { display:none; } .tv-drawer-overlay { display:none; position:fixed; inset:0; z-index:299; background:rgba(0,0,0,.65); } .tv-drawer-overlay.open { display:block } /* ── 15. Responsive breakpoints ────────────────────────────── */ @media (max-width: 1100px) { .tv-quicks { grid-template-columns:repeat(4, 1fr) } } @media (max-width: 820px) { .tv { width: 97vw; max-height: none; height: auto; aspect-ratio: auto; top: 50%; transform: translate(-50%, -50%); } .tv__bezel { padding: 16px 14px 20px; border-radius: 26px / 22px; } .tv::after { display: none; } /* no desk under the stacked layout */ .tv__bezel::before { inset: 9px; border-radius: 18px / 15px; } .tv__chrome { border-radius: 26px / 22px; } .tv__body { flex-direction: column-reverse; } .tv__side { flex: 0 0 auto; width: 100%; max-width: none; flex-direction: row; height: auto; padding: 8px 9px; gap: 9px; align-items: center; border-radius: 12px; } .tuner { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 9px; padding: 8px 11px; } .tuner::before, .tuner::after { display: none; } .tuner__readout { display: none; } .ch-selector__label { display: none; } .ch-screen { padding: 5px 8px; } .ch-screen__name { font-size: 11px; max-width: 90px; } .knob { --num-r: 19px; width: 48px; } .knob__num { font-size: 6.5px; } .knob__legend { display: none; } .tv-side-ad { min-height: 58px; flex: 1 1 auto; } .side-grille { display: none; } .side-power { width: 34px; height: 34px; margin: 0; } .tv-osd { bottom: auto; top: 12px; left: 12px; } .tv__legs { display: none; } .knob-pnav { padding: 3px 5px; gap: 4px; } .knob-pnav__lbl { display: none; } .tv__screen { height: 80vh; min-height: 500px } /* No desk foreground in the stacked layout — the control panel drops below the screen, so the desk props would collide with it. Hide all three. */ .prop--remote, .prop--scarf, .prop--mug { display: none } .tv-quicks { grid-template-columns: repeat(3, 1fr) } .tv-topnav { padding: 6px 10px; gap: 6px } .tv-hero { height: 200px } .tv-topnav__menu .nav-drop { display:none !important } /* hide dropdowns on mobile, use drawer */ } @media (max-width: 520px) { .tv-quicks { grid-template-columns: repeat(3, 1fr); gap: 6px } .tv-quick { padding: 10px 4px 8px } .tv-quick__icon { width: 26px; height: 26px } .tv-quick__label{ font-size: 10px } .tv-hero { height: 170px } .tv-hero__play { width: 40px; height: 40px } .tv-footer { flex-direction: column; align-items: flex-start; gap: 5px } .tv-main { padding: 0 10px 16px } .knob { --num-r: 16px; width: 42px; } .knob__num { display: none } } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; } }