.tvw-quick-fab{position:fixed;right:22px;bottom:22px;z-index:9997;width:88px;height:54px;padding:2px;display:flex;align-items:center;justify-content:flex-start;overflow:visible;border-radius:18px;border:2px solid #0b76b7;background:#0787c8;box-shadow:0 8px 28px rgba(0,0,0,.28),0 0 0 0 rgba(7,135,200,.30);cursor:pointer;animation:tvw-fab-pulse 3.8s ease-out infinite}.tvw-quick-fab img{position:relative;z-index:2;flex:0 0 48px;width:48px;height:48px;object-fit:cover;border-radius:50%;display:block;border:2px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.28)}.tvw-quick-fab__radial{position:absolute;right:8px;top:50%;width:24px;height:24px;transform:translateY(-50%);display:block}.tvw-quick-fab__radial i{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}.tvw-quick-fab__radial i:nth-child(1){left:1px;top:10px}.tvw-quick-fab__radial i:nth-child(2){right:1px;top:2px}.tvw-quick-fab__radial i:nth-child(3){right:1px;bottom:2px}.tvw-quick-fab__radial:after{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.75);border-radius:50%}.tvw-quick-fab:hover,.tvw-quick-fab:focus{background:#067ab5;transform:translateY(-1px);outline:none} .tvw-radial{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:0;transition:opacity .18s ease}.tvw-radial.is-open{pointer-events:auto;opacity:1}.tvw-radial__backdrop{position:absolute;inset:0;background:rgba(4,8,15,.72);backdrop-filter:blur(10px)} .tvw-radial__orbit{--rx:50vw;--ry:50vh;position:fixed;left:var(--rx);top:var(--ry);width:326px;height:326px;transform:translate(-50%,-50%) scale(.72) rotate(-7deg);border:1px solid rgba(255,255,255,.15);border-radius:50%;background:radial-gradient(circle,rgba(21,30,44,.97) 0 23%,rgba(10,17,28,.91) 24% 57%,rgba(5,10,18,.78) 58% 100%);box-shadow:0 24px 85px rgba(0,0,0,.48),inset 0 0 42px rgba(255,255,255,.018);transition:transform .25s cubic-bezier(.2,.8,.2,1);isolation:isolate}.tvw-radial.is-open .tvw-radial__orbit{transform:translate(-50%,-50%) scale(1) rotate(0)} .tvw-radial__orbit:before,.tvw-radial__orbit:after{content:"";position:absolute;border-radius:50%;pointer-events:none}.tvw-radial__orbit:before{inset:35px;border:1px dashed rgba(255,255,255,.10);animation:tvw-orbit 22s linear infinite}.tvw-radial__orbit:after{inset:88px;border:1px solid rgba(227,27,35,.24)} .tvw-radial__brand{position:absolute;left:50%;top:31px;transform:translateX(-50%);color:rgba(255,255,255,.34);font:900 8px/1 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase} .tvw-radial__center{position:absolute;z-index:3;left:50%;top:50%;width:76px;height:76px;transform:translate(-50%,-50%);padding:0;border:2px solid rgba(255,255,255,.9);border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 7px rgba(227,27,35,.075),0 8px 28px rgba(0,0,0,.46);cursor:pointer}.tvw-radial__center img{width:100%;height:100%;object-fit:cover;display:block} .tvw-radial__item{--a:0deg;position:absolute;z-index:4;left:50%;top:50%;width:92px;min-height:42px;display:flex;align-items:center;justify-content:center;padding:7px 8px;border:1px solid rgba(255,255,255,.16);border-radius:22px;background:rgba(12,20,32,.91);backdrop-filter:blur(8px);color:#fff!important;text-decoration:none!important;text-align:center;font:800 10.5px/1.03 system-ui,sans-serif;letter-spacing:.015em;box-shadow:0 6px 16px rgba(0,0,0,.20);opacity:0;cursor:pointer;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-52px) rotate(calc(-1 * var(--a))) scale(.62);transition:transform .23s cubic-bezier(.2,.85,.25,1),opacity .16s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease;transition-delay:0s;overflow:hidden}.tvw-radial__item span{display:-webkit-box;max-width:76px;max-height:2.08em;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;hyphens:auto}.tvw-radial.is-open .tvw-radial__item{opacity:1;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-124px) rotate(calc(-1 * var(--a)));transition-delay:calc(var(--i,0) * 18ms + 55ms)}.tvw-radial.is-open .tvw-radial__item:hover,.tvw-radial.is-open .tvw-radial__item:focus,.tvw-radial.is-open .tvw-radial__item.is-target{background:#e31b23;border-color:rgba(255,255,255,.52);box-shadow:0 8px 25px rgba(227,27,35,.34);transform:translate(-50%,-50%) rotate(var(--a)) translateY(-129px) rotate(calc(-1 * var(--a))) scale(1.09);transition-delay:0s;outline:none}.tvw-radial__item.is-long{font-size:9.4px}.tvw-radial__item.is-xlong{font-size:8.5px}.tvw-radial__item.has-satellite:after{content:"";position:absolute;right:8px;bottom:6px;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.44);box-shadow:0 0 8px rgba(255,255,255,.28)} .tvw-radial__item--0{--a:0deg;--i:0}.tvw-radial__item--1{--a:45deg;--i:1}.tvw-radial__item--2{--a:90deg;--i:2}.tvw-radial__item--3{--a:135deg;--i:3}.tvw-radial__item--4{--a:180deg;--i:4}.tvw-radial__item--5{--a:225deg;--i:5}.tvw-radial__item--6{--a:270deg;--i:6}.tvw-radial__item--7{--a:315deg;--i:7}.tvw-radial__favorite{border-style:dashed}.tvw-radial__favorite.has-favorite{border-style:solid;background:rgba(227,27,35,.16);border-color:rgba(227,27,35,.42)}.tvw-radial__hint{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);margin:0;white-space:nowrap;color:rgba(255,255,255,.65);font:700 9px/1 system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase}.tvw-radial__hint.is-learned{display:none} .tvw-radial__satellite{--sat-x:50vw;--sat-y:50vh;--sat-accent:#e31b23;--fan-base:0deg;position:fixed;z-index:10004;left:var(--sat-x);top:var(--sat-y);width:1px;height:1px;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0;transform:none!important;opacity:0;pointer-events:none;transition:opacity .12s ease;overflow:visible;isolation:isolate}.tvw-radial__satellite.is-open{opacity:1;pointer-events:none}.tvw-radial__satellite-arc{position:absolute;z-index:1;left:0;top:0;width:236px;height:236px;border-radius:50%;border:2px solid transparent;border-top-color:color-mix(in srgb,var(--sat-accent) 72%,#fff 8%);box-shadow:0 -8px 28px color-mix(in srgb,var(--sat-accent) 22%,transparent);transform:translate(-50%,-50%) rotate(calc(var(--fan-base) - 75deg)) scale(.18);transform-origin:center;opacity:0;clip-path:inset(0 0 50% 0);transition:transform .25s cubic-bezier(.2,.85,.25,1),opacity .13s ease}.tvw-radial__satellite.is-open .tvw-radial__satellite-arc{opacity:.78;transform:translate(-50%,-50%) rotate(calc(var(--fan-base) - 75deg)) scale(1)}.tvw-radial__satellite-title{display:none}.tvw-radial__satellite-items{position:absolute;inset:0;overflow:visible;pointer-events:none}.tvw-radial__satellite-item{position:absolute;z-index:4;left:0;top:0;width:94px;min-height:39px;padding:6px 7px;display:flex;align-items:center;justify-content:center;border-radius:22px;border:1px solid color-mix(in srgb,var(--item-accent) 38%,rgba(255,255,255,.15));background:color-mix(in srgb,var(--item-accent) 9%,rgba(13,21,34,.97));color:#fff!important;text-decoration:none!important;text-align:center;font:850 9.4px/1.04 system-ui,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.30);opacity:0;pointer-events:auto;cursor:pointer;transform:translate(-50%,-50%) rotate(calc(var(--fan-base) + var(--sa))) translateY(-22px) rotate(calc(-1 * (var(--fan-base) + var(--sa)))) scale(.55);transition:transform .25s cubic-bezier(.2,.9,.22,1),opacity .14s ease,background .1s ease,box-shadow .1s ease;transition-delay:calc(var(--si,0) * 25ms)}.tvw-radial__satellite.is-open .tvw-radial__satellite-item{opacity:1;transform:translate(-50%,-50%) rotate(calc(var(--fan-base) + var(--sa))) translateY(-118px) rotate(calc(-1 * (var(--fan-base) + var(--sa)))) scale(1)}.tvw-radial__satellite-item span{display:-webkit-box;width:100%;max-height:2.1em;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;hyphens:auto}.tvw-radial__satellite-item.is-long{font-size:8.4px}.tvw-radial__satellite-item.is-xlong{font-size:7.5px}.tvw-radial__satellite-item[data-has-children="1"]:after{content:"";position:absolute;right:7px;bottom:5px;width:4px;height:4px;border-radius:50%;background:var(--item-accent);box-shadow:0 0 8px var(--item-accent)}.tvw-radial__satellite-item:hover,.tvw-radial__satellite-item:focus,.tvw-radial__satellite-item.is-target{outline:0;background:var(--item-accent);border-color:rgba(255,255,255,.72);box-shadow:0 10px 32px color-mix(in srgb,var(--item-accent) 46%,transparent);transform:translate(-50%,-50%) rotate(calc(var(--fan-base) + var(--sa))) translateY(-121px) rotate(calc(-1 * (var(--fan-base) + var(--sa)))) scale(1.08)!important;transition-delay:0s}.tvw-radial__satellite.is-latched .tvw-radial__satellite-arc{opacity:.92;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--sat-accent) 24%,transparent))}.tvw-radial__satellite.is-latched .tvw-radial__satellite-item{cursor:pointer} .tvw-radial__item.has-satellite,.tvw-radial__satellite,.tvw-radial__satellite-item{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} @keyframes tvw-orbit{to{transform:rotate(360deg)}}@keyframes tvw-fab-pulse{0%,72%,100%{box-shadow:0 8px 28px rgba(0,0,0,.28),0 0 0 0 rgba(227,27,35,.28)}84%{box-shadow:0 8px 28px rgba(0,0,0,.28),0 0 0 12px rgba(227,27,35,0)}} body.tvw-quick-open{overflow:hidden} @media(max-width:520px){.tvw-quick-fab{right:14px;bottom:14px;width:82px;height:52px;border-radius:17px}.tvw-quick-fab img{width:46px;height:46px;flex-basis:46px}.tvw-quick-fab__radial{right:7px}.tvw-radial__orbit{width:300px;height:300px}.tvw-radial.is-open .tvw-radial__item{transform:translate(-50%,-50%) rotate(var(--a)) translateY(-119px) rotate(calc(-1 * var(--a)))}.tvw-radial.is-open .tvw-radial__item:hover,.tvw-radial.is-open .tvw-radial__item:focus,.tvw-radial.is-open .tvw-radial__item.is-target{transform:translate(-50%,-50%) rotate(var(--a)) translateY(-124px) rotate(calc(-1 * var(--a))) scale(1.08)}.tvw-radial__satellite-arc{width:206px;height:206px}.tvw-radial__satellite-item{width:82px;min-height:36px;font-size:8.3px}.tvw-radial__satellite.is-open .tvw-radial__satellite-item{transform:translate(-50%,-50%) rotate(calc(var(--fan-base) + var(--sa))) translateY(-103px) rotate(calc(-1 * (var(--fan-base) + var(--sa)))) scale(1)}.tvw-radial__satellite-item:hover,.tvw-radial__satellite-item:focus,.tvw-radial__satellite-item.is-target{transform:translate(-50%,-50%) rotate(calc(var(--fan-base) + var(--sa))) translateY(-106px) rotate(calc(-1 * (var(--fan-base) + var(--sa)))) scale(1.06)!important}} @media(prefers-reduced-motion:reduce){.tvw-radial__orbit:before,.tvw-quick-fab{animation:none}.tvw-radial__satellite,.tvw-radial__satellite-item{transition:none}} /* ========================================================= TV WIEN RADIAL 1.1 — NEON FAN / MOBILE LONG-PRESS FIX Selected branch grows, fan arc is brighter and labels stay readable. ========================================================= */ .tvw-radial, .tvw-radial *, .tvw-radial a, .tvw-radial button{ -webkit-touch-callout:none!important; -webkit-user-select:none!important; user-select:none!important; -webkit-tap-highlight-color:transparent; } .tvw-radial img{-webkit-user-drag:none;user-drag:none} /* Selected main branch: make it unmistakable before the fan opens. */ .tvw-radial.is-open .tvw-radial__item.is-expanded, .tvw-radial.is-open .tvw-radial__item.is-expanded:hover, .tvw-radial.is-open .tvw-radial__item.is-expanded:focus{ z-index:35; background:linear-gradient(180deg,#168cff 0%,#0759d9 100%); border-color:#79d4ff; color:#fff!important; box-shadow: 0 0 0 2px rgba(74,185,255,.22), 0 0 18px rgba(0,151,255,.95), 0 0 42px rgba(0,122,255,.62), 0 13px 36px rgba(0,0,0,.42); transform:translate(-50%,-50%) rotate(var(--a)) translateY(-133px) rotate(calc(-1 * var(--a))) scale(1.24)!important; transition-delay:0s!important; } .tvw-radial.is-open .tvw-radial__item.is-expanded span{ max-width:95px; font-size:12px; line-height:1.08; text-shadow:0 1px 8px rgba(0,0,0,.35); } .tvw-radial.is-open .tvw-radial__item.is-expanded:before{ content:""; position:absolute; inset:-10px; border-radius:30px; border:1px solid rgba(91,201,255,.55); box-shadow:0 0 24px rgba(0,158,255,.52); pointer-events:none; } /* Fan: electric blue arc with a second soft halo so it remains visible on photos. */ .tvw-radial__satellite{--sat-accent:#159cff!important} .tvw-radial__satellite-arc{ width:300px; height:300px; border-width:4px; border-top-color:#21a9ff; filter:drop-shadow(0 0 7px #078cff) drop-shadow(0 0 18px rgba(0,132,255,.72)); box-shadow: 0 -7px 20px rgba(25,166,255,.62), inset 0 0 18px rgba(25,166,255,.12); opacity:0; } .tvw-radial__satellite.is-open .tvw-radial__satellite-arc{opacity:1} .tvw-radial__satellite.is-latched .tvw-radial__satellite-arc{ opacity:1; filter:drop-shadow(0 0 8px #159cff) drop-shadow(0 0 24px rgba(0,132,255,.86)); } /* Child buttons are larger, higher contrast and blue-lit. */ .tvw-radial__satellite-item{ width:112px; min-height:46px; padding:8px 10px; border-radius:25px; border:1px solid rgba(86,194,255,.72); background:linear-gradient(180deg,rgba(13,38,66,.98),rgba(7,20,38,.98)); color:#fff!important; font:850 11.2px/1.08 system-ui,sans-serif; letter-spacing:.01em; text-shadow:0 1px 5px rgba(0,0,0,.46); box-shadow: 0 0 0 1px rgba(41,164,255,.08), 0 0 16px rgba(0,124,255,.32), 0 10px 26px rgba(0,0,0,.34); } .tvw-radial__satellite-item span{ max-height:2.25em; -webkit-line-clamp:2; } .tvw-radial__satellite-item.is-long{font-size:10px} .tvw-radial__satellite-item.is-xlong{font-size:9px} .tvw-radial__satellite-item:hover, .tvw-radial__satellite-item:focus, .tvw-radial__satellite-item.is-target{ background:linear-gradient(180deg,#1aa5ff,#0861da)!important; border-color:#b9ecff!important; box-shadow: 0 0 0 2px rgba(111,211,255,.20), 0 0 22px rgba(0,158,255,.92), 0 0 46px rgba(0,116,255,.58), 0 12px 30px rgba(0,0,0,.38)!important; } .tvw-radial__satellite-item[data-has-children="1"]:after{ background:#75d7ff; box-shadow:0 0 10px #159cff; } /* A soft blue light runs around the main wheel while a branch is open. */ .tvw-radial:has(.tvw-radial__satellite.is-open) .tvw-radial__orbit{ box-shadow: 0 24px 85px rgba(0,0,0,.48), 0 0 36px rgba(0,123,255,.18), inset 0 0 42px rgba(255,255,255,.018); } @media(max-width:520px){ .tvw-radial.is-open .tvw-radial__item.is-expanded, .tvw-radial.is-open .tvw-radial__item.is-expanded:hover, .tvw-radial.is-open .tvw-radial__item.is-expanded:focus{ transform:translate(-50%,-50%) rotate(var(--a)) translateY(-127px) rotate(calc(-1 * var(--a))) scale(1.18)!important; } .tvw-radial__satellite-arc{width:246px;height:246px;border-width:3px} .tvw-radial__satellite-item{width:92px;min-height:42px;padding:7px 8px;font-size:10px} .tvw-radial__satellite-item.is-long{font-size:9px} .tvw-radial__satellite-item.is-xlong{font-size:8.2px} .tvw-radial__satellite.is-open .tvw-radial__satellite-item{ transform:translate(-50%,-50%) rotate(calc(var(--fan-base) + var(--sa))) translateY(-123px) rotate(calc(-1 * (var(--fan-base) + var(--sa)))) scale(1); } .tvw-radial__satellite-item:hover, .tvw-radial__satellite-item:focus, .tvw-radial__satellite-item.is-target{ transform:translate(-50%,-50%) rotate(calc(var(--fan-base) + var(--sa))) translateY(-126px) rotate(calc(-1 * (var(--fan-base) + var(--sa)))) scale(1.08)!important; } } /* ========================================================= TV WIEN RADIAL 1.3.0 — LIVE FAN GESTURE Clean neon arc + blue selector follows finger / mouse ========================================================= */ .tvw-radial__satellite{--cursor-angle:0deg;} /* Remove the old clipped-circle look: only a clean luminous arc remains. */ .tvw-radial__satellite-arc{ width:310px!important; height:310px!important; border:0!important; border-radius:50%!important; clip-path:none!important; background:conic-gradient( from calc(var(--fan-base) - 75deg), transparent 0deg 104deg, #24b6ff 105deg, #058cff 150deg, #24b6ff 195deg, transparent 196deg 360deg )!important; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px))!important; mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px))!important; transform:translate(-50%,-50%) scale(.2)!important; filter:drop-shadow(0 0 6px #20aaff) drop-shadow(0 0 18px rgba(0,132,255,.72))!important; box-shadow:none!important; opacity:0!important; } .tvw-radial__satellite.is-open .tvw-radial__satellite-arc{ transform:translate(-50%,-50%) scale(1)!important; opacity:.96!important; } /* Small blue lamp that physically follows the pointer around the fan. */ .tvw-radial__satellite::after{ content:""; position:absolute; z-index:8; left:0; top:0; width:13px; height:13px; border-radius:50%; background:#e8f9ff; border:2px solid #6fd7ff; box-shadow:0 0 8px #fff,0 0 17px #1aa7ff,0 0 32px rgba(0,119,255,.9); transform:translate(-50%,-50%) rotate(var(--cursor-angle)) translateY(-155px); opacity:0; pointer-events:none; transition:opacity .08s ease; } .tvw-radial__satellite.is-open.is-tracking::after{opacity:1;} /* Active child grows clearly while the gesture moves over it. */ .tvw-radial__satellite-item.is-target{ transform:translate(-50%,-50%) rotate(calc(var(--fan-base) + var(--sa))) translateY(-127px) rotate(calc(-1 * (var(--fan-base) + var(--sa)))) scale(1.16)!important; background:linear-gradient(180deg,#23b4ff,#0864df)!important; border-color:#d8f5ff!important; box-shadow:0 0 0 2px rgba(133,223,255,.28),0 0 24px rgba(0,164,255,.98),0 0 52px rgba(0,103,255,.62),0 14px 32px rgba(0,0,0,.38)!important; } @media(max-width:520px){ .tvw-radial__satellite-arc{width:260px!important;height:260px!important;} .tvw-radial__satellite::after{transform:translate(-50%,-50%) rotate(var(--cursor-angle)) translateY(-130px);width:11px;height:11px;} .tvw-radial__satellite-item.is-target{ transform:translate(-50%,-50%) rotate(calc(var(--fan-base) + var(--sa))) translateY(-129px) rotate(calc(-1 * (var(--fan-base) + var(--sa)))) scale(1.13)!important; } } /* ========================================================= TV WIEN RADIAL 1.4.0 — COLOUR TRACKING / CLEAN FAN Active fan category lights in its own colour. The selector lamp follows the gesture and inherits the same colour. ========================================================= */ .tvw-radial__satellite{--cursor-accent:#20aef3;} /* Unselected fan items stay calm; the selected one lights in its theme colour. */ .tvw-radial__satellite-item{ background:linear-gradient(180deg,rgba(12,31,52,.98),rgba(6,18,33,.98))!important; border-color:color-mix(in srgb,var(--item-accent) 62%,rgba(255,255,255,.20))!important; box-shadow:0 0 10px color-mix(in srgb,var(--item-accent) 18%,transparent),0 10px 26px rgba(0,0,0,.34)!important; } .tvw-radial__satellite-item:hover, .tvw-radial__satellite-item:focus, .tvw-radial__satellite-item.is-target{ background:linear-gradient(180deg,color-mix(in srgb,var(--item-accent) 92%,#fff 8%),color-mix(in srgb,var(--item-accent) 72%,#001631 28%))!important; border-color:rgba(255,255,255,.92)!important; color:#fff!important; text-shadow:0 1px 6px rgba(0,0,0,.50)!important; box-shadow: 0 0 0 2px color-mix(in srgb,var(--item-accent) 30%,transparent), 0 0 20px color-mix(in srgb,var(--item-accent) 96%,transparent), 0 0 46px color-mix(in srgb,var(--item-accent) 58%,transparent), 0 14px 32px rgba(0,0,0,.40)!important; } /* Tracking lamp uses the colour of the category currently under the finger/mouse. */ .tvw-radial__satellite::after{ background:#fff!important; border-color:color-mix(in srgb,var(--cursor-accent) 65%,#fff 35%)!important; box-shadow: 0 0 7px #fff, 0 0 18px var(--cursor-accent), 0 0 38px color-mix(in srgb,var(--cursor-accent) 82%,transparent)!important; } /* Never render a nested child fan automatically during a drag gesture. This prevents a duplicate category from appearing inside the main wheel. */ .tvw-radial__satellite-title{display:none!important;} /* ========================================================= TV WIEN RADIAL 1.5.0 — ICONS / MENU-SYNC / CLEAN FIRST RING ========================================================= */ .tvw-radial__item{ width:104px; min-height:48px; gap:7px; padding:8px 10px; } .tvw-radial__item .tvw-radial__icon{ flex:0 0 20px; width:20px; height:20px; display:block!important; max-width:none!important; max-height:none!important; overflow:visible!important; color:#dcecff; } .tvw-radial__item .tvw-radial__icon svg{display:block;width:100%;height:100%;} .tvw-radial__item .tvw-radial__label{ display:-webkit-box!important; max-width:72px!important; max-height:2.2em!important; overflow:hidden!important; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .tvw-radial.is-open .tvw-radial__item.is-expanded .tvw-radial__icon{ width:24px;height:24px;flex-basis:24px;color:#fff; filter:drop-shadow(0 0 8px rgba(255,255,255,.55)); } .tvw-radial.is-open .tvw-radial__item.is-expanded .tvw-radial__label{ max-width:88px!important; font-size:12px; } .tvw-radial__favorite.has-favorite{ background:rgba(13,29,49,.96)!important; border-color:rgba(75,178,255,.46)!important; } .tvw-radial__favorite.has-favorite:after{ content:"★"; right:7px; bottom:4px; width:auto; height:auto; background:transparent; color:#6fd6ff; font-size:8px; box-shadow:none; } .tvw-radial__satellite-item{ width:106px; min-height:52px; gap:6px; padding:7px 9px; flex-direction:row; } .tvw-radial__satellite-item .tvw-radial__sat-icon{ flex:0 0 22px; width:22px; height:22px; display:block!important; max-width:none!important; max-height:none!important; overflow:visible!important; color:#dff4ff; } .tvw-radial__satellite-item .tvw-radial__sat-icon svg{display:block;width:100%;height:100%;} .tvw-radial__satellite-item .tvw-radial__sat-label{ display:-webkit-box!important; width:auto!important; max-width:70px!important; max-height:2.2em!important; overflow:hidden!important; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:11px; line-height:1.05; } .tvw-radial__satellite-item.is-target .tvw-radial__sat-icon{ color:#fff; filter:drop-shadow(0 0 7px rgba(255,255,255,.62)); } .tvw-radial__satellite-item.is-target .tvw-radial__sat-label{font-size:11.5px;} /* Keep the active FAN clean: children never duplicate into the first ring. */ .tvw-radial__satellite-item[data-has-children="1"]:after{display:none!important;} @media(max-width:520px){ .tvw-radial__item{width:98px;min-height:46px;gap:6px;padding:7px 8px;} .tvw-radial__item .tvw-radial__icon{width:18px;height:18px;flex-basis:18px;} .tvw-radial__item .tvw-radial__label{max-width:68px!important;font-size:10px;} .tvw-radial__satellite-item{width:98px;min-height:48px;gap:5px;padding:6px 8px;} .tvw-radial__satellite-item .tvw-radial__sat-icon{width:20px;height:20px;flex-basis:20px;} .tvw-radial__satellite-item .tvw-radial__sat-label{max-width:64px!important;font-size:10.2px;} } /* ========================================================= TV WIEN RADIAL 1.8.0 — SIGNATURE FAB Final homepage visual: compact circular TV Wien control. Logic, fans and gestures intentionally unchanged. ========================================================= */ .tvw-quick-fab{ right:24px!important; bottom:24px!important; width:72px!important; height:72px!important; padding:5px!important; display:flex!important; align-items:center!important; justify-content:center!important; border:0!important; border-radius:50%!important; overflow:visible!important; background: linear-gradient(#07111f,#07111f) padding-box, conic-gradient(from 18deg,#ef3340 0 24%,#168fbd 24% 49%,#d58c0c 49% 74%,#7040d8 74% 100%) border-box!important; border:3px solid transparent!important; box-shadow: 0 15px 36px rgba(3,10,20,.34), 0 0 0 1px rgba(255,255,255,.15), 0 0 0 7px rgba(7,17,31,.08)!important; animation:tvw-signature-breathe 4.8s ease-in-out infinite!important; transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease!important; } .tvw-quick-fab::before{ content:""; position:absolute; inset:-8px; z-index:-1; border-radius:50%; border:1px solid rgba(22,143,189,.20); opacity:.72; transition:inset .22s ease,opacity .22s ease,border-color .22s ease; } .tvw-quick-fab::after{ content:"REDIAL"; position:absolute; right:58px; top:50%; transform:translate(8px,-50%); padding:7px 10px 6px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(7,17,31,.94); box-shadow:0 8px 24px rgba(0,0,0,.22); color:#fff; font:900 9px/1 system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:.14em; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .18s ease,transform .18s ease; } .tvw-quick-fab:hover, .tvw-quick-fab:focus-visible{ transform:translateY(-3px) scale(1.035)!important; box-shadow: 0 18px 42px rgba(3,10,20,.40), 0 0 0 1px rgba(255,255,255,.22), 0 0 28px rgba(22,143,189,.20)!important; outline:none!important; } .tvw-quick-fab:hover::before, .tvw-quick-fab:focus-visible::before{inset:-11px;opacity:1;border-color:rgba(239,51,64,.25)} .tvw-quick-fab:hover::after, .tvw-quick-fab:focus-visible::after{opacity:1;transform:translate(0,-50%)} .tvw-quick-fab img{ position:relative!important; z-index:2!important; width:58px!important; height:58px!important; flex:0 0 58px!important; display:block!important; object-fit:cover!important; border:2px solid rgba(255,255,255,.96)!important; border-radius:50%!important; box-shadow:0 5px 16px rgba(0,0,0,.34)!important; } .tvw-quick-fab__radial{ right:-3px!important; top:4px!important; width:22px!important; height:22px!important; transform:none!important; border:2px solid #fff!important; border-radius:50%!important; background:#07111f!important; box-shadow:0 4px 10px rgba(0,0,0,.35)!important; } .tvw-quick-fab__radial::after{display:none!important} .tvw-quick-fab__radial i{ width:4px!important; height:4px!important; background:#fff!important; box-shadow:none!important; } .tvw-quick-fab__radial i:nth-child(1){left:3px!important;top:8px!important} .tvw-quick-fab__radial i:nth-child(2){right:3px!important;top:3px!important} .tvw-quick-fab__radial i:nth-child(3){right:3px!important;bottom:3px!important} /* Open wheel gets the same visual language as the homepage. */ .tvw-radial__center{ width:82px!important; height:82px!important; border:3px solid rgba(255,255,255,.96)!important; background:#07111f!important; box-shadow: 0 0 0 6px rgba(7,17,31,.82), 0 0 0 8px rgba(22,143,189,.30), 0 12px 34px rgba(0,0,0,.48)!important; } .tvw-radial__orbit{ border-color:rgba(255,255,255,.17)!important; background: radial-gradient(circle,rgba(17,31,52,.98) 0 23%,rgba(9,20,35,.94) 24% 57%,rgba(5,11,20,.84) 58% 100%)!important; box-shadow:0 28px 95px rgba(0,0,0,.54),inset 0 0 50px rgba(22,143,189,.035)!important; } .tvw-radial__orbit:after{border-color:rgba(22,143,189,.28)!important} @keyframes tvw-signature-breathe{ 0%,68%,100%{box-shadow:0 15px 36px rgba(3,10,20,.34),0 0 0 1px rgba(255,255,255,.15),0 0 0 7px rgba(7,17,31,.08)} 82%{box-shadow:0 15px 36px rgba(3,10,20,.34),0 0 0 1px rgba(255,255,255,.18),0 0 0 11px rgba(22,143,189,.07)} } @media(max-width:520px){ .tvw-quick-fab{ right:14px!important; bottom:14px!important; width:64px!important; height:64px!important; padding:4px!important; } .tvw-quick-fab img{width:52px!important;height:52px!important;flex-basis:52px!important} .tvw-quick-fab__radial{right:-3px!important;top:2px!important;width:20px!important;height:20px!important} .tvw-quick-fab::after{display:none!important} .tvw-radial__center{width:76px!important;height:76px!important} } @media(prefers-reduced-motion:reduce){.tvw-quick-fab{animation:none!important}} /* ========================================================= TV WIEN RADIAL 1.8.1 — CLEAN 8 / EQUAL FRAMES Vizual v1.8 ostaje netaknut. Mijenjamo samo hijerarhiju i zaključavamo svih 8 glavnih okvira na istu veličinu. ========================================================= */ .tvw-radial__item, .tvw-radial__item.is-long, .tvw-radial__item.is-xlong{ width:104px!important; height:52px!important; min-height:52px!important; max-height:52px!important; padding:8px 10px!important; box-sizing:border-box!important; } .tvw-radial__item .tvw-radial__label, .tvw-radial__item.is-long .tvw-radial__label, .tvw-radial__item.is-xlong .tvw-radial__label{ max-width:72px!important; font-size:10.5px!important; line-height:1.05!important; } @media(max-width:520px){ .tvw-radial__item, .tvw-radial__item.is-long, .tvw-radial__item.is-xlong{ width:98px!important; height:48px!important; min-height:48px!important; max-height:48px!important; padding:7px 8px!important; } .tvw-radial__item .tvw-radial__label, .tvw-radial__item.is-long .tvw-radial__label, .tvw-radial__item.is-xlong .tvw-radial__label{ max-width:68px!important; font-size:10px!important; } } /* ========================================================= TV WIEN RADIAL 1.8.2 — SAME LAUNCHER DESKTOP + MOBILE Samo zatvoreni gumb u donjem desnom kutu. Otvoreni REDIAL, orbit, fanovi i responsive ostaju iz v1.8.1. ========================================================= */ /* Jedan isti launcher na svim uređajima */ .tvw-quick-fab{ right:16px!important; bottom:16px!important; width:82px!important; height:52px!important; padding:2px!important; border-radius:17px!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; overflow:visible!important; background:#0787c8!important; border:2px solid #0b76b7!important; } .tvw-quick-fab img{ width:46px!important; height:46px!important; flex:0 0 46px!important; border-radius:50%!important; border:2px solid #fff!important; } .tvw-quick-fab__radial{ right:7px!important; top:50%!important; width:22px!important; height:22px!important; transform:translateY(-50%)!important; } /* Poništi mobilni kružni launcher iz v1.8 — ostaje ista plava kapsula */ @media(max-width:520px){ .tvw-quick-fab{ right:14px!important; bottom:14px!important; width:82px!important; height:52px!important; padding:2px!important; border-radius:17px!important; } .tvw-quick-fab img{ width:46px!important; height:46px!important; flex:0 0 46px!important; } .tvw-quick-fab__radial{ right:7px!important; top:50%!important; width:22px!important; height:22px!important; transform:translateY(-50%)!important; } } /* ========================================================= TV WIEN RADIAL 1.8.4 — MOBILE TAP / 12 O'CLOCK MODE Desktop remains the stable v1.8 behaviour. ========================================================= */ @media(max-width:520px){ .tvw-radial__item[data-tvw-radial-main]{touch-action:manipulation!important;} .tvw-radial.is-mobile-branch .tvw-radial__item[data-tvw-radial-main].is-mobile-muted{ opacity:.12!important; filter:saturate(.28) brightness(.48)!important; pointer-events:none!important; box-shadow:none!important; } .tvw-radial.is-open.is-mobile-branch .tvw-radial__item[data-tvw-radial-main].is-mobile-active, .tvw-radial.is-open.is-mobile-branch .tvw-radial__item[data-tvw-radial-main].is-mobile-active:hover, .tvw-radial.is-open.is-mobile-branch .tvw-radial__item[data-tvw-radial-main].is-mobile-active:focus, .tvw-radial.is-open.is-mobile-branch .tvw-radial__item[data-tvw-radial-main].is-mobile-active.is-expanded{ opacity:1!important; pointer-events:auto!important; z-index:10020!important; transform:translate(-50%,-50%) rotate(0deg) translateY(-124px) rotate(0deg) scale(1.13)!important; background:linear-gradient(180deg,#168cff 0%,#0759d9 100%)!important; border-color:#8adaff!important; box-shadow:0 0 0 2px rgba(74,185,255,.22),0 0 22px rgba(0,151,255,.88),0 12px 30px rgba(0,0,0,.40)!important; transition:transform .28s cubic-bezier(.2,.85,.25,1),opacity .18s ease,filter .18s ease!important; } .tvw-radial.is-mobile-branch .tvw-radial__hint{font-size:0!important;} .tvw-radial.is-mobile-branch .tvw-radial__hint:after{ content:'TAPNI TEMU · TAPNI RUBRIKU ZA NATRAG'; font:800 8px/1 system-ui,sans-serif; letter-spacing:.10em; color:rgba(255,255,255,.72); } .tvw-radial__satellite.is-mobile-branch{z-index:10018!important;} .tvw-radial__satellite.is-mobile-branch .tvw-radial__satellite-arc{width:238px!important;height:238px!important;opacity:.96!important;} .tvw-radial__satellite.is-mobile-branch .tvw-radial__satellite-item{ width:88px!important;min-height:40px!important;padding:6px 7px!important;font-size:9.2px!important;touch-action:manipulation!important; } .tvw-radial__satellite.is-mobile-branch.is-open .tvw-radial__satellite-item{ transform:translate(-50%,-50%) rotate(calc(180deg + var(--sa))) translateY(-101px) rotate(calc(-1 * (180deg + var(--sa)))) scale(1)!important; } .tvw-radial__satellite.is-mobile-branch .tvw-radial__satellite-item:hover, .tvw-radial__satellite.is-mobile-branch .tvw-radial__satellite-item:focus, .tvw-radial__satellite.is-mobile-branch .tvw-radial__satellite-item.is-target{ transform:translate(-50%,-50%) rotate(calc(180deg + var(--sa))) translateY(-104px) rotate(calc(-1 * (180deg + var(--sa)))) scale(1.05)!important; } } /* ========================================================= TV WIEN REDIAL 2.0.0-beta1 — PHOTO RING / HUB TEST Main ring uses real article photos, loaded only after opening. ========================================================= */ .tvw-radial--v2-test .tvw-radial__orbit{ width:390px!important; height:390px!important; background: radial-gradient(circle at 50% 50%,rgba(18,34,56,.99) 0 24%,rgba(7,18,33,.965) 25% 59%,rgba(3,10,20,.94) 60% 100%)!important; border:1px solid rgba(125,205,255,.22)!important; box-shadow:0 32px 105px rgba(0,0,0,.62),inset 0 0 70px rgba(22,143,189,.07)!important; } .tvw-radial--v2-test .tvw-radial__orbit:before{inset:39px!important;border-color:rgba(255,255,255,.10)!important} .tvw-radial--v2-test .tvw-radial__orbit:after{inset:118px!important;border-color:rgba(213,140,12,.28)!important} .tvw-radial--v2-test .tvw-radial__brand{top:18px!important;color:rgba(255,255,255,.52)!important;letter-spacing:.18em!important} .tvw-radial__test-badge{ position:absolute;z-index:40;left:50%;bottom:17px;transform:translateX(-50%); padding:5px 9px;border-radius:999px;border:1px solid rgba(213,140,12,.55); background:rgba(7,17,31,.88);color:#f1c36b;font:900 8px/1 system-ui,sans-serif; letter-spacing:.14em;white-space:nowrap;pointer-events:none; } .tvw-radial--v2-test .tvw-radial__center{ width:88px!important;height:88px!important; border:3px solid #fff!important; box-shadow:0 0 0 7px rgba(7,17,31,.88),0 0 0 9px rgba(213,140,12,.42),0 14px 34px rgba(0,0,0,.50)!important; } .tvw-radial--v2-test .tvw-radial__item, .tvw-radial--v2-test .tvw-radial__item.is-long, .tvw-radial--v2-test .tvw-radial__item.is-xlong{ width:92px!important;height:92px!important;min-height:92px!important;max-height:92px!important; padding:9px!important;border-radius:50%!important;flex-direction:column!important;gap:4px!important; border:2px solid rgba(207,232,249,.78)!important; background:linear-gradient(160deg,#173550,#07111f)!important; box-shadow:0 11px 27px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.05)!important; isolation:isolate!important; } .tvw-radial--v2-test .tvw-radial__item::before{ content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none; background:linear-gradient(180deg,rgba(4,12,23,.06) 0%,rgba(4,12,23,.24) 40%,rgba(4,12,23,.88) 100%); } .tvw-radial--v2-test .tvw-radial__item .tvw-radial__photo{ position:absolute!important;inset:0!important;z-index:0!important;display:block!important; width:auto!important;height:auto!important;max-width:none!important;max-height:none!important; background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important; transform:scale(1.035);transition:transform .24s ease,filter .24s ease; } .tvw-radial--v2-test .tvw-radial__item:not(.has-photo) .tvw-radial__photo{display:none!important} .tvw-radial--v2-test .tvw-radial__item .tvw-radial__icon{ position:relative!important;z-index:2!important;width:24px!important;height:24px!important;flex:0 0 24px!important; padding:4px;border-radius:50%;background:rgba(7,17,31,.68);color:#fff!important; box-shadow:0 2px 10px rgba(0,0,0,.28);backdrop-filter:blur(5px); } .tvw-radial--v2-test .tvw-radial__item .tvw-radial__label, .tvw-radial--v2-test .tvw-radial__item.is-long .tvw-radial__label, .tvw-radial--v2-test .tvw-radial__item.is-xlong .tvw-radial__label{ position:relative!important;z-index:2!important;display:block!important; width:76px!important;max-width:76px!important;max-height:2.4em!important; color:#fff!important;font:900 10px/1.08 system-ui,-apple-system,"Segoe UI",sans-serif!important; text-shadow:0 2px 8px rgba(0,0,0,.88);text-align:center;letter-spacing:.005em; } .tvw-radial--v2-test.is-open .tvw-radial__item{ transform:translate(-50%,-50%) rotate(var(--a)) translateY(-148px) rotate(calc(-1 * var(--a)))!important; } .tvw-radial--v2-test.is-open .tvw-radial__item:hover, .tvw-radial--v2-test.is-open .tvw-radial__item:focus, .tvw-radial--v2-test.is-open .tvw-radial__item.is-target{ border-color:#fff!important; box-shadow:0 0 0 3px rgba(22,143,189,.25),0 0 26px rgba(22,143,189,.72),0 14px 32px rgba(0,0,0,.46)!important; transform:translate(-50%,-50%) rotate(var(--a)) translateY(-151px) rotate(calc(-1 * var(--a))) scale(1.08)!important; } .tvw-radial--v2-test.is-open .tvw-radial__item:hover .tvw-radial__photo, .tvw-radial--v2-test.is-open .tvw-radial__item:focus .tvw-radial__photo{transform:scale(1.12)} .tvw-radial--v2-test .tvw-radial__item.has-satellite:after{ z-index:3!important;right:9px!important;bottom:9px!important;width:7px!important;height:7px!important; background:#f1c36b!important;border:1px solid rgba(255,255,255,.8);box-shadow:0 0 10px rgba(241,195,107,.8)!important; } .tvw-radial--v2-test .tvw-radial__hint{bottom:-28px!important;color:rgba(255,255,255,.74)!important;letter-spacing:.11em!important} /* Large mobile branches become a clean selection panel instead of overlapping fan labels. */ @media(max-width:520px){ .tvw-radial--v2-test .tvw-radial__orbit{width:330px!important;height:330px!important;} .tvw-radial--v2-test .tvw-radial__orbit:before{inset:34px!important} .tvw-radial--v2-test .tvw-radial__orbit:after{inset:101px!important} .tvw-radial--v2-test .tvw-radial__brand{top:13px!important;font-size:7px!important} .tvw-radial--v2-test .tvw-radial__test-badge{bottom:10px;font-size:7px;padding:4px 7px} .tvw-radial--v2-test .tvw-radial__center{width:72px!important;height:72px!important} .tvw-radial--v2-test .tvw-radial__item, .tvw-radial--v2-test .tvw-radial__item.is-long, .tvw-radial--v2-test .tvw-radial__item.is-xlong{ width:76px!important;height:76px!important;min-height:76px!important;max-height:76px!important;padding:6px!important; } .tvw-radial--v2-test .tvw-radial__item .tvw-radial__icon{width:20px!important;height:20px!important;flex-basis:20px!important;padding:3px} .tvw-radial--v2-test .tvw-radial__item .tvw-radial__label, .tvw-radial--v2-test .tvw-radial__item.is-long .tvw-radial__label, .tvw-radial--v2-test .tvw-radial__item.is-xlong .tvw-radial__label{ width:64px!important;max-width:64px!important;font-size:8.4px!important;line-height:1.04!important; } .tvw-radial--v2-test.is-open .tvw-radial__item{ transform:translate(-50%,-50%) rotate(var(--a)) translateY(-127px) rotate(calc(-1 * var(--a)))!important; } .tvw-radial--v2-test.is-open .tvw-radial__item:hover, .tvw-radial--v2-test.is-open .tvw-radial__item:focus, .tvw-radial--v2-test.is-open .tvw-radial__item.is-target{ transform:translate(-50%,-50%) rotate(var(--a)) translateY(-129px) rotate(calc(-1 * var(--a))) scale(1.06)!important; } .tvw-radial--v2-test.is-open.is-mobile-branch .tvw-radial__item[data-tvw-radial-main].is-mobile-active, .tvw-radial--v2-test.is-open.is-mobile-branch .tvw-radial__item[data-tvw-radial-main].is-mobile-active:hover, .tvw-radial--v2-test.is-open.is-mobile-branch .tvw-radial__item[data-tvw-radial-main].is-mobile-active:focus, .tvw-radial--v2-test.is-open.is-mobile-branch .tvw-radial__item[data-tvw-radial-main].is-mobile-active.is-expanded{ transform:translate(-50%,-50%) rotate(0deg) translateY(-127px) rotate(0deg) scale(1.08)!important; } .tvw-radial__satellite.is-mobile-grid{ left:50%!important;top:54%!important;width:min(92vw,360px)!important;height:auto!important; transform:translate(-50%,-50%)!important;padding:8px!important; border:1px solid rgba(111,211,255,.30)!important;border-radius:22px!important; background:rgba(6,16,30,.97)!important; box-shadow:0 22px 70px rgba(0,0,0,.66),0 0 0 1px rgba(255,255,255,.05) inset!important; backdrop-filter:blur(16px)!important;pointer-events:auto!important; } .tvw-radial__satellite.is-mobile-grid .tvw-radial__satellite-arc{display:none!important} .tvw-radial__satellite.is-mobile-grid .tvw-radial__satellite-items{ position:relative!important;inset:auto!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px!important;padding:8px!important;pointer-events:auto!important; } .tvw-radial__satellite.is-mobile-grid .tvw-radial__satellite-item, .tvw-radial__satellite.is-mobile-grid.is-open .tvw-radial__satellite-item, .tvw-radial__satellite.is-mobile-grid .tvw-radial__satellite-item:hover, .tvw-radial__satellite.is-mobile-grid .tvw-radial__satellite-item:focus, .tvw-radial__satellite.is-mobile-grid .tvw-radial__satellite-item.is-target{ position:relative!important;left:auto!important;top:auto!important;width:auto!important;min-height:50px!important; opacity:1!important;transform:none!important;margin:0!important;padding:8px 9px!important; border-radius:14px!important;justify-content:flex-start!important;text-align:left!important;pointer-events:auto!important; } .tvw-radial__satellite.is-mobile-grid .tvw-radial__satellite-item .tvw-radial__sat-label{ max-width:none!important;font-size:10px!important;text-align:left!important; } body.single-post .tvw-quick-fab{bottom:94px!important} } /* ========================================================= TV WIEN REDIAL 2.0.2-beta3 — CLEAN DESKTOP BRANCHES Desktop: submenu opens as a clear foreground panel beside the wheel. Mobile keeps the existing compact branch / grid behaviour. ========================================================= */ .tvw-radial__test-badge{display:none!important} @media(min-width:521px){ .tvw-radial.is-open .tvw-radial__item.is-expanded{ z-index:40!important; } .tvw-radial__satellite.is-desktop-panel{ left:var(--panel-x)!important; top:var(--panel-y)!important; width:360px!important; height:auto!important; min-height:0!important; padding:16px!important; transform:translateY(-50%)!important; border:1px solid rgba(111,211,255,.28)!important; border-radius:22px!important; background:linear-gradient(180deg,rgba(10,24,42,.985),rgba(4,14,27,.985))!important; box-shadow:0 24px 80px rgba(0,0,0,.68),0 0 0 1px rgba(255,255,255,.045) inset,0 0 30px rgba(22,143,189,.16)!important; backdrop-filter:blur(18px)!important; opacity:0!important; pointer-events:auto!important; overflow:visible!important; isolation:isolate!important; } .tvw-radial__satellite.is-desktop-panel.is-open{opacity:1!important} .tvw-radial__satellite.is-desktop-panel .tvw-radial__satellite-arc, .tvw-radial__satellite.is-desktop-panel::after{display:none!important} .tvw-radial__satellite.is-desktop-panel .tvw-radial__satellite-title{ position:relative!important; z-index:2!important; display:block!important; margin:0 0 12px!important; padding:0 2px 11px!important; border-bottom:1px solid rgba(255,255,255,.10)!important; color:#fff!important; font:900 15px/1.15 system-ui,-apple-system,"Segoe UI",sans-serif!important; letter-spacing:.02em!important; text-transform:none!important; } .tvw-radial__satellite.is-desktop-panel .tvw-radial__satellite-title::after{ content:""; position:absolute; left:2px; bottom:-1px; width:54px; height:2px; border-radius:2px; background:#e31b23; } .tvw-radial__satellite.is-desktop-panel .tvw-radial__satellite-items{ position:relative!important; inset:auto!important; z-index:3!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:9px!important; width:100%!important; pointer-events:auto!important; overflow:visible!important; } .tvw-radial__satellite.is-desktop-panel .tvw-radial__satellite-item, .tvw-radial__satellite.is-desktop-panel.is-open .tvw-radial__satellite-item{ position:relative!important; left:auto!important; top:auto!important; z-index:4!important; width:auto!important; min-width:0!important; min-height:54px!important; margin:0!important; padding:9px 10px!important; opacity:1!important; transform:none!important; transition:transform .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease!important; transition-delay:0s!important; border-radius:15px!important; justify-content:flex-start!important; text-align:left!important; pointer-events:auto!important; touch-action:manipulation!important; overflow:visible!important; } .tvw-radial__satellite.is-desktop-panel .tvw-radial__satellite-item:hover, .tvw-radial__satellite.is-desktop-panel .tvw-radial__satellite-item:focus, .tvw-radial__satellite.is-desktop-panel .tvw-radial__satellite-item.is-target{ z-index:30!important; transform:translateY(-2px) scale(1.025)!important; outline:none!important; box-shadow:0 0 0 2px color-mix(in srgb,var(--item-accent) 32%,transparent),0 10px 28px rgba(0,0,0,.36),0 0 24px color-mix(in srgb,var(--item-accent) 42%,transparent)!important; } .tvw-radial__satellite.is-desktop-panel .tvw-radial__satellite-item .tvw-radial__sat-icon{ flex:0 0 24px!important; width:24px!important; height:24px!important; } .tvw-radial__satellite.is-desktop-panel .tvw-radial__satellite-item .tvw-radial__sat-label{ display:block!important; width:auto!important; max-width:none!important; max-height:none!important; overflow:visible!important; -webkit-line-clamp:unset!important; font-size:11px!important; line-height:1.12!important; text-align:left!important; hyphens:none!important; } } /* ========================================================= TV WIEN REDIAL 2.0.3-beta4 — ORBIT SUB-RING Parent categories stay in the main photo wheel. Clicking a parent opens a second, larger CIRCULAR ring. Clicking the same parent again closes it. Desktop and mobile use different radii, but identical labels. ========================================================= */ .tvw-radial__satellite.is-orbit-ring{ z-index:10030!important; width:1px!important; height:1px!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; transform:none!important; overflow:visible!important; pointer-events:none!important; isolation:isolate!important; } .tvw-radial__satellite.is-orbit-ring::before{ content:""; position:absolute; z-index:0; left:0; top:0; width:610px; height:610px; transform:translate(-50%,-50%) scale(.82); border-radius:50%; border:1px solid color-mix(in srgb,var(--sat-accent) 42%,rgba(255,255,255,.18)); background:radial-gradient(circle,transparent 0 62%,rgba(5,16,30,.18) 63% 75%,rgba(5,16,30,.48) 76% 100%); box-shadow:0 0 0 1px rgba(255,255,255,.025) inset,0 0 60px color-mix(in srgb,var(--sat-accent) 16%,transparent); opacity:0; transition:opacity .18s ease,transform .24s cubic-bezier(.2,.85,.25,1); pointer-events:none; } .tvw-radial__satellite.is-orbit-ring.is-open::before{ opacity:.92; transform:translate(-50%,-50%) scale(1); } .tvw-radial__satellite.is-orbit-ring::after, .tvw-radial__satellite.is-orbit-ring .tvw-radial__satellite-arc{display:none!important} .tvw-radial__satellite.is-orbit-ring .tvw-radial__satellite-items{ position:absolute!important; inset:0!important; overflow:visible!important; pointer-events:none!important; } .tvw-radial__satellite.is-orbit-ring .tvw-radial__satellite-item, .tvw-radial__satellite.is-orbit-ring.is-open .tvw-radial__satellite-item{ position:absolute!important; left:0!important; top:0!important; z-index:20!important; width:104px!important; height:104px!important; min-width:104px!important; min-height:104px!important; max-width:104px!important; max-height:104px!important; margin:0!important; padding:10px 8px!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:6px!important; border-radius:50%!important; border:2px solid color-mix(in srgb,var(--item-accent) 48%,rgba(255,255,255,.48))!important; background: radial-gradient(circle at 38% 28%,rgba(255,255,255,.10),transparent 32%), linear-gradient(155deg,color-mix(in srgb,var(--item-accent) 32%,#15304c),rgba(5,14,27,.98))!important; color:#fff!important; box-shadow:0 13px 36px rgba(0,0,0,.44),inset 0 0 0 1px rgba(255,255,255,.05)!important; opacity:0!important; pointer-events:auto!important; touch-action:manipulation!important; overflow:hidden!important; transform:translate(-50%,-50%) rotate(var(--sa)) translateY(-170px) rotate(calc(-1 * var(--sa))) scale(.45)!important; transition:transform .24s cubic-bezier(.2,.9,.22,1),opacity .15s ease,box-shadow .13s ease,border-color .13s ease,filter .13s ease!important; transition-delay:calc(var(--si,0) * 17ms)!important; } .tvw-radial__satellite.is-orbit-ring.is-open .tvw-radial__satellite-item{ opacity:1!important; transform:translate(-50%,-50%) rotate(var(--sa)) translateY(-286px) rotate(calc(-1 * var(--sa))) scale(1)!important; } .tvw-radial__satellite.is-orbit-ring .tvw-radial__satellite-item:hover, .tvw-radial__satellite.is-orbit-ring .tvw-radial__satellite-item:focus, .tvw-radial__satellite.is-orbit-ring .tvw-radial__satellite-item.is-target{ z-index:80!important; outline:none!important; border-color:#fff!important; filter:saturate(1.12) brightness(1.08)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--item-accent) 30%,transparent),0 0 30px color-mix(in srgb,var(--item-accent) 70%,transparent),0 16px 42px rgba(0,0,0,.54)!important; transform:translate(-50%,-50%) rotate(var(--sa)) translateY(-290px) rotate(calc(-1 * var(--sa))) scale(1.13)!important; transition-delay:0s!important; } .tvw-radial__satellite.is-orbit-ring .tvw-radial__sat-icon{ flex:0 0 30px!important; width:30px!important; height:30px!important; color:#fff!important; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); } .tvw-radial__satellite.is-orbit-ring .tvw-radial__sat-label, .tvw-radial__satellite.is-orbit-ring .tvw-radial__satellite-item.is-long .tvw-radial__sat-label, .tvw-radial__satellite.is-orbit-ring .tvw-radial__satellite-item.is-xlong .tvw-radial__sat-label{ display:block!important; width:86px!important; max-width:86px!important; max-height:2.45em!important; overflow:hidden!important; -webkit-line-clamp:2!important; color:#fff!important; font:900 10px/1.08 system-ui,-apple-system,"Segoe UI",sans-serif!important; text-align:center!important; text-shadow:0 2px 7px rgba(0,0,0,.75)!important; hyphens:none!important; } /* Open branch: calm the other main categories, keep the chosen parent in front. */ @media(min-width:521px){ .tvw-radial.has-subring .tvw-radial__item[data-tvw-radial-main]:not(.is-expanded){ opacity:.48!important; filter:saturate(.55) brightness(.72)!important; } .tvw-radial.has-subring .tvw-radial__item[data-tvw-radial-main].is-expanded, .tvw-radial.has-subring .tvw-radial__item[data-tvw-radial-main].is-expanded:hover, .tvw-radial.has-subring .tvw-radial__item[data-tvw-radial-main].is-expanded:focus{ z-index:10040!important; opacity:1!important; border-color:#fff!important; filter:none!important; box-shadow:0 0 0 3px rgba(255,255,255,.12),0 0 28px color-mix(in srgb,var(--sat-accent,#20aef3) 64%,transparent),0 16px 38px rgba(0,0,0,.46)!important; } } /* MOBILE: still circular, but more compact. Other main categories disappear while the selected branch is open so the child names stay readable. */ @media(max-width:520px){ .tvw-radial__satellite.is-orbit-ring::before{ width:min(96vw,354px)!important; height:min(96vw,354px)!important; background:radial-gradient(circle,transparent 0 56%,rgba(5,16,30,.22) 57% 72%,rgba(5,16,30,.58) 73% 100%)!important; } .tvw-radial.is-mobile-branch .tvw-radial__item[data-tvw-radial-main].is-mobile-muted{ opacity:0!important; pointer-events:none!important; filter:none!important; } .tvw-radial.is-open.is-mobile-branch .tvw-radial__item[data-tvw-radial-main].is-mobile-active, .tvw-radial.is-open.is-mobile-branch .tvw-radial__item[data-tvw-radial-main].is-mobile-active:hover, .tvw-radial.is-open.is-mobile-branch .tvw-radial__item[data-tvw-radial-main].is-mobile-active:focus, .tvw-radial.is-open.is-mobile-branch .tvw-radial__item[data-tvw-radial-main].is-mobile-active.is-expanded{ z-index:10050!important; opacity:1!important; width:72px!important;height:72px!important;min-height:72px!important; transform:translate(-50%,-50%) rotate(0deg) translateY(-74px) rotate(0deg) scale(1)!important; border-color:#fff!important; background:linear-gradient(160deg,#173550,#07111f)!important; box-shadow:0 0 0 3px rgba(32,174,243,.20),0 0 23px rgba(32,174,243,.62),0 10px 25px rgba(0,0,0,.42)!important; } .tvw-radial__satellite.is-orbit-ring .tvw-radial__satellite-item, .tvw-radial__satellite.is-orbit-ring.is-open .tvw-radial__satellite-item{ width:68px!important; height:68px!important; min-width:68px!important; min-height:68px!important; max-width:68px!important; max-height:68px!important; padding:5px!important; gap:3px!important; transform:translate(-50%,-50%) rotate(var(--sa)) translateY(-82px) rotate(calc(-1 * var(--sa))) scale(.5)!important; } .tvw-radial__satellite.is-orbit-ring.is-open .tvw-radial__satellite-item{ opacity:1!important; transform:translate(-50%,-50%) rotate(var(--sa)) translateY(calc(-1 * min(39vw,145px))) rotate(calc(-1 * var(--sa))) scale(1)!important; } .tvw-radial__satellite.is-orbit-ring .tvw-radial__satellite-item:hover, .tvw-radial__satellite.is-orbit-ring .tvw-radial__satellite-item:focus, .tvw-radial__satellite.is-orbit-ring .tvw-radial__satellite-item.is-target{ z-index:90!important; transform:translate(-50%,-50%) rotate(var(--sa)) translateY(calc(-1 * min(39vw,145px))) rotate(calc(-1 * var(--sa))) scale(1.09)!important; } .tvw-radial__satellite.is-orbit-ring .tvw-radial__sat-icon{width:20px!important;height:20px!important;flex-basis:20px!important} .tvw-radial__satellite.is-orbit-ring .tvw-radial__sat-label, .tvw-radial__satellite.is-orbit-ring .tvw-radial__satellite-item.is-long .tvw-radial__sat-label, .tvw-radial__satellite.is-orbit-ring .tvw-radial__satellite-item.is-xlong .tvw-radial__sat-label{ width:58px!important;max-width:58px!important;font-size:7.6px!important;line-height:1.02!important;max-height:2.15em!important; } .tvw-radial.is-mobile-branch .tvw-radial__hint:after{ content:'TAPNI ISTU RUBRIKU ZA NATRAG'!important; } } \n\n/* =========================================================\n TV WIEN REDIAL 2.1.2-test — PHOTO WHEEL RESTORE / READABILITY\n RC1 changed the wrapper class and accidentally bypassed the\n proven v2 photo-wheel rules. RC2 restores them without\n changing the editorial structure.\n ========================================================= */\n.tvw-radial--v2-rc2 .tvw-radial__item.is-xlong .tvw-radial__label{\n max-height:3.25em!important;\n -webkit-line-clamp:3!important;\n font-size:8.8px!important;\n line-height:1.04!important;\n}\n@media(max-width:520px){\n .tvw-radial--v2-rc2 .tvw-radial__item.is-xlong .tvw-radial__label{\n max-height:3.2em!important;\n -webkit-line-clamp:3!important;\n font-size:7.4px!important;\n line-height:1.02!important;\n }\n .tvw-radial--v2-rc2 .tvw-radial__satellite.is-orbit-ring .tvw-radial__satellite-item,\n .tvw-radial--v2-rc2 .tvw-radial__satellite.is-orbit-ring.is-open .tvw-radial__satellite-item{\n width:72px!important;\n height:72px!important;\n min-width:72px!important;\n min-height:72px!important;\n max-width:72px!important;\n max-height:72px!important;\n }\n .tvw-radial--v2-rc2 .tvw-radial__satellite.is-orbit-ring .tvw-radial__sat-label,\n .tvw-radial--v2-rc2 .tvw-radial__satellite.is-orbit-ring .tvw-radial__satellite-item.is-long .tvw-radial__sat-label,\n .tvw-radial--v2-rc2 .tvw-radial__satellite.is-orbit-ring .tvw-radial__satellite-item.is-xlong .tvw-radial__sat-label{\n width:62px!important;\n max-width:62px!important;\n font-size:8px!important;\n line-height:1.03!important;\n }\n}\n{} /* ========================================================= TV WIEN REDIAL 2.1.2 TEST — FIXED LIGHTWEIGHT PHOTO ASSETS Main wheel keeps the accepted photo look, but photos are now local 256x256 WebP assets instead of featured images from posts. Austria and INFO – Beč can reuse the same visual family in subrings. No preload is added: homepage/LCP priority remains untouched. ========================================================= */ .tvw-radial--v2-12-test .tvw-radial__item .tvw-radial__photo{ will-change:auto!important; } .tvw-radial--v2-12-test .tvw-radial__satellite.is-orbit-ring .tvw-radial__satellite-item.has-photo{ isolation:isolate!important; background:#07111f!important; } .tvw-radial--v2-12-test .tvw-radial__satellite.is-orbit-ring .tvw-radial__satellite-item.has-photo::before{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; background:linear-gradient(180deg,rgba(4,12,23,.05) 0%,rgba(4,12,23,.18) 42%,rgba(4,12,23,.88) 100%); pointer-events:none; } .tvw-radial--v2-12-test .tvw-radial__sat-photo{ position:absolute; inset:0; z-index:0; display:block; border-radius:inherit; background-position:center; background-size:cover; background-repeat:no-repeat; transform:scale(1.025); } .tvw-radial--v2-12-test .tvw-radial__satellite-item.has-photo .tvw-radial__sat-icon, .tvw-radial--v2-12-test .tvw-radial__satellite-item.has-photo .tvw-radial__sat-label{ position:relative; z-index:2; } /* ========================================================= TV WIEN REDIAL 2.1.2 SAFE UX1 - desktop mouse never triggers global hold-to-open - compact HR/DE switch + search inside the existing wheel - no preload / no homepage critical-path changes ========================================================= */ .tvw-radial--safe-ux1 .tvw-radial__tools{ position:absolute; z-index:45; left:50%; top:calc(50% + 51px); transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:3px; min-height:24px; padding:3px 5px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(4,14,27,.90); box-shadow:0 7px 18px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.025); white-space:nowrap; } .tvw-radial--safe-ux1 .tvw-radial__lang, .tvw-radial--safe-ux1 .tvw-radial__search-btn{ appearance:none; -webkit-appearance:none; border:0; margin:0; padding:0; background:transparent; color:rgba(255,255,255,.68); cursor:pointer; font:900 9px/1 system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:.07em; } .tvw-radial--safe-ux1 .tvw-radial__lang{ min-width:22px; height:18px; border-radius:999px; } .tvw-radial--safe-ux1 .tvw-radial__lang:hover, .tvw-radial--safe-ux1 .tvw-radial__lang:focus-visible, .tvw-radial--safe-ux1 .tvw-radial__lang.is-active{ outline:none; color:#fff; background:#e31b23; box-shadow:0 0 10px rgba(227,27,35,.34); } .tvw-radial--safe-ux1 .tvw-radial__tools-sep{ color:rgba(255,255,255,.28); font:800 10px/1 system-ui,sans-serif; } .tvw-radial--safe-ux1 .tvw-radial__search-btn{ width:22px; height:18px; margin-left:2px; display:grid; place-items:center; border-left:1px solid rgba(255,255,255,.12); padding-left:4px; box-sizing:content-box; } .tvw-radial--safe-ux1 .tvw-radial__search-btn svg{width:13px;height:13px;display:block} .tvw-radial--safe-ux1 .tvw-radial__search-btn:hover, .tvw-radial--safe-ux1 .tvw-radial__search-btn:focus-visible{outline:none;color:#62c8ff} .tvw-radial-search-overlay{ position:fixed; inset:0; z-index:10080; display:grid; place-items:center; padding:20px; background:rgba(3,8,15,.76); opacity:0; pointer-events:none; transition:opacity .16s ease; } .tvw-radial-search-overlay.is-open{opacity:1;pointer-events:auto} .tvw-radial-search-panel{ position:relative; width:min(92vw,480px); padding:24px; border:1px solid rgba(102,199,244,.26); border-radius:20px; background:linear-gradient(180deg,rgba(10,26,45,.985),rgba(5,15,28,.99)); box-shadow:0 24px 80px rgba(0,0,0,.64),0 0 30px rgba(22,143,189,.12); } .tvw-radial-search-close{ position:absolute; right:10px; top:8px; width:34px; height:34px; border:0; border-radius:50%; background:transparent; color:rgba(255,255,255,.72); font:300 26px/1 system-ui,sans-serif; cursor:pointer; } .tvw-radial-search-close:hover,.tvw-radial-search-close:focus-visible{outline:none;color:#fff;background:rgba(255,255,255,.08)} .tvw-radial-search-form label{ display:block; margin:0 42px 14px 0; color:#fff; font:900 18px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif; } .tvw-radial-search-row{display:flex;gap:8px} .tvw-radial-search-row input{ flex:1 1 auto; min-width:0; height:46px; padding:0 14px; border:1px solid rgba(255,255,255,.18); border-radius:12px; outline:none; background:#fff; color:#101722; font:600 15px/1 system-ui,-apple-system,"Segoe UI",sans-serif; } .tvw-radial-search-row input:focus{border-color:#168fbd;box-shadow:0 0 0 3px rgba(22,143,189,.18)} .tvw-radial-search-row button{ height:46px; padding:0 16px; border:0; border-radius:12px; background:#e31b23; color:#fff; font:900 11px/1 system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:.06em; cursor:pointer; } .tvw-radial-search-row button:hover,.tvw-radial-search-row button:focus-visible{outline:none;background:#c9161d} @media(max-width:520px){ .tvw-radial--safe-ux1 .tvw-radial__tools{top:calc(50% + 43px);transform:translateX(-50%) scale(.92)} .tvw-radial--safe-ux1.is-mobile-branch .tvw-radial__tools{opacity:.52} .tvw-radial--safe-ux1.is-lang-de.is-mobile-branch .tvw-radial__hint:after{content:'GLEICHE RUBRIK ANTIPPEN · ZURÜCK'!important} .tvw-radial-search-panel{padding:20px 16px 16px} .tvw-radial-search-form label{font-size:16px} .tvw-radial-search-row{flex-direction:column} .tvw-radial-search-row button{width:100%} }