/* Ralli Alumine Riba — paneel ja muu MITTEKRIITILINE CSS (eraldi fail, ). Riba enda CSS on failis riba-kriitiline.css, mis trükitakse lehe -i inline (1.9.0). RUCSS-ist välistatud (rocket_rucss_external_exclusions). */ /* ========================================================================================================= Menüü-paneel (1.5.0): alt kerkiv paneel riba TAGANT (riba z 10010 > paneel 10002 > kate 10001 > ankur 9999 > video 1500), avatud olles katab kõik riba kohal (ankur, video); riba ise jääb paigale. Liikumine ainult transform + opacity; visibility lülitub viivitusega, et suletud paneel ei püüaks puudutusi. Rubriigid ilmuvad järjest (--i * 22 ms). 1.11.0 alumine leht: paneeli max kõrgus = 88 % vaateaknast miinus riba (ülaserv 12 % kõrgusel; dvh kus on), ülemised nurgad 5 px, kate (rgba .45) riba kohal katab lehe ja sulgeb puudutusel; pikk loend kerib paneeli SEES (overflow-y auto), leht taga ei keri (body overflow hidden + skripti puutelukk riba.php-s). Ava/sulge liikumine sama (transform + opacity, reduced-motion). */ .ralli-riba,.ralli-riba-ruum,.ralli-riba-kate,.ralli-riba-paneel{display:none;} @media only screen and (max-width:1024px){ .ralli-riba-kate{display:block;position:fixed;left:0;right:0;top:0;bottom:var(--ralli-riba-ruum);z-index:10001;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;-webkit-tap-highlight-color:transparent;touch-action:none;} .ralli-riba-paneel{display:block;position:fixed;left:0;right:0;bottom:var(--ralli-riba-ruum);z-index:10002;max-height:calc(88vh - var(--ralli-riba-ruum));max-height:calc(88dvh - var(--ralli-riba-ruum));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;box-sizing:border-box;margin:0;padding:16px 16px 22px;background:#fff;color:#111;border-radius:5px 5px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.18);outline:none;transform:translateY(104%);opacity:0;visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility 0s linear .3s;} body.ralli-riba-lahti .ralli-riba-kate{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s;} body.ralli-riba-lahti .ralli-riba-paneel{transform:none;opacity:1;visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility 0s;} /* Leht taga ei keri: overflow hidden AINULT body peal (sama võte, mida saidi Lisa-CSS teema menüü puhul kasutab); koos html-iga hüppaks leht avamisel üles (teema html{height:100%} → html-ist saab keriala, asend nullitakse; mõõdetud). */ body.ralli-riba-lahti{overflow:hidden!important;} /* Otsing: saidi tavaline otsing (?s=) */ .ralli-riba-paneel .ralli-riba-otsing{display:flex;margin:0 0 14px;} .ralli-riba-paneel .ralli-riba-otsing input[type=search]{flex:1 1 auto;min-width:0;height:44px;margin:0 8px 0 0;padding:0 14px;border:1px solid #cfd4da;border-radius:5px;background:#fff;color:#111;font-size:16px;line-height:44px;-webkit-appearance:none;appearance:none;box-shadow:none;} .ralli-riba-paneel .ralli-riba-otsing input[type=search]:focus{border-color:#0072ce;outline:none;box-shadow:0 0 0 2px rgba(0,114,206,.2);} .ralli-riba-paneel .ralli-riba-otsing button{flex:0 0 44px;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:5px;background:#0072ce;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-appearance:none;appearance:none;} .ralli-riba-paneel .ralli-riba-otsing button svg{width:22px;height:22px;display:block;} /* 1.9.0: „Reklaam“ ja „Kontakt“ (mobiilimenüü mob-top-link punktid) väikeste tekstilinkidena ühel real — sama välimus, mille saidi Lisa-CSS annab teema telefonimenüü ülemisele reale (13 px, hall; „Reklaam“ lisaklassiga mob-top-reklaam sinine ja paks); puuteala 44 px. Ilma flex gap'ita (iOS 13). 1.10.0: tumeda režiimi lüliti läks paneelist mobiilipäisesse (riba-kriitiline.css). */ .ralli-riba-paneel .ralli-riba-nupurida{display:flex;align-items:center;margin:0 0 12px;padding:0;min-height:44px;} .ralli-riba-paneel .ralli-riba-plink{display:inline-flex;align-items:center;min-height:44px;margin:0 20px 0 0;padding:0;border:0;background:none;color:#8a8a8a!important;font-size:13px;font-weight:400;line-height:1.2;text-transform:none;text-decoration:none!important;-webkit-tap-highlight-color:transparent;} .ralli-riba-paneel .ralli-riba-plink.mob-top-reklaam{color:#0072ce!important;font-weight:700;} .ralli-riba-paneel .ralli-riba-plink:active{color:#0072ce!important;} /* Tumeda režiimi lüliti (1.9.0): sama märkeruut-klass kui teema päise lülitil (.jeg_dark_mode_toggle) — teema skript käsitleb klikki, küpsist ja body klassi täpselt nagu päise lülitil; välimus on plugina oma (SVG päike/kuu, fonti ei laeta). Lüliti 46×26, nupp 22 px; sees = sinine rada ja nupp paremal. Klahvifookus rõngana rajal. */ /* 1.11.0: „Reklaamivaba ralli.ee“ (mobiilimenüü punkt URL-iga /toeta/, pealkiri koos krooniga tuleb menüüst) omaette täislaiuses real otsingu ja Reklaam/Kontakt rea all, RUBRIIGID pealkirja kohal: helesinine taust, brändisinine paks kiri keskel, 44 px, nurgad 5 px, külgvahe = paneeli padding. Vajutus nagu riba nuppudel (kriitiline CSS): sama poolläbipaistev sinine plokk (::before, z −1 = tausta ja teksti vahel) + kerge kokkuvajumine; tumedas riba tumedad toonid (aktiivne #3d9bf0, vajutus #78bcff, plokk rgba(120,188,255,.3)). Ühel real, pikk tekst ellipsiga. Fookus ei värvi (teema a:focus). */ .ralli-riba-paneel .ralli-riba-toeta{display:block;position:relative;z-index:0;height:44px;margin:0 0 14px;padding:0 12px;border:0;border-radius:5px;background:#e6f1fb;color:#0072ce!important;font-size:15px;font-weight:700;line-height:44px;text-align:center;text-decoration:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-tap-highlight-color:transparent;transition:transform .1s ease;} .ralli-riba-paneel .ralli-riba-toeta::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;border-radius:5px;background:rgba(0,114,206,.12);opacity:0;transition:opacity .1s ease;pointer-events:none;z-index:-1;} .ralli-riba-paneel .ralli-riba-toeta:hover,.ralli-riba-paneel .ralli-riba-toeta:focus{color:#0072ce!important;text-decoration:none!important;outline:none;} .ralli-riba-paneel .ralli-riba-toeta:focus-visible{outline:2px solid #0072ce;outline-offset:-2px;} .ralli-riba-paneel .ralli-riba-toeta:active{color:#0072ce!important;transform:scale(.96);transition-duration:.06s;} .ralli-riba-paneel .ralli-riba-toeta:active::before{opacity:1;transition-duration:.06s;} /* Rubriigid kahes veerus, paks kiri, õhuke joon iga rea all. 1.11.0: read ühekõrgused (43 + 1 px joon = 44), nimi ühel real, pikk nimi ellipsiga (veerud minmax(0,1fr) + li min-width 0, muidu venitaks pikk nimi veeru laiaks); ≤359 px (iPhone SE 320) kiri 14/13 px ja veeruvahe 12 px, et praegused nimed („Kurvilise tee legendid“) tervelt ära mahuksid. */ .ralli-riba-paneel .ralli-riba-pealkiri{margin:0 0 4px!important;padding:0;font-size:12px!important;font-weight:700!important;letter-spacing:.08em;text-transform:uppercase;color:#6b7280!important;line-height:1.4;} .ralli-riba-paneel .ralli-riba-rubriigid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-column-gap:16px;column-gap:16px;} .ralli-riba-paneel .ralli-riba-rubriigid li{min-width:0;margin:0;padding:0;border-bottom:1px solid #e3e5e8;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;transition-delay:0s;} body.ralli-riba-lahti .ralli-riba-rubriigid li{opacity:1;transform:none;transition-delay:calc(60ms + var(--i,0) * 22ms);} .ralli-riba-paneel .ralli-riba-rubriigid a{display:block;height:43px;padding:0;color:#111!important;font-size:15px;font-weight:700;line-height:43px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none!important;-webkit-tap-highlight-color:transparent;} .ralli-riba-paneel .ralli-riba-rubriigid li.on-alam a{font-size:14px;font-weight:600;} @media (max-width:359px){ .ralli-riba-paneel .ralli-riba-rubriigid{grid-column-gap:12px;column-gap:12px;} .ralli-riba-paneel .ralli-riba-rubriigid a{font-size:14px;} .ralli-riba-paneel .ralli-riba-rubriigid li.on-alam a{font-size:13px;} } .ralli-riba-paneel .ralli-riba-rubriigid a:active{color:#0072ce!important;} /* Menüü-nupu kolm triipu → rist (transform-origin ikooni keskel) */ .ralli-riba-menyy svg path{transform-box:view-box;transform-origin:12px 12px;transition:transform .3s ease,opacity .3s ease;} body.ralli-riba-lahti .ralli-riba-menyy .ralli-riba-triip-1{transform:translateY(6px) rotate(45deg);} body.ralli-riba-lahti .ralli-riba-menyy .ralli-riba-triip-2{opacity:0;} body.ralli-riba-lahti .ralli-riba-menyy .ralli-riba-triip-3{transform:translateY(-6px) rotate(-45deg);} /* Tume režiim: sama otsus kui ribal (body.jnews-dark-mode) */ body.jnews-dark-mode .ralli-riba-paneel{background:#1c1f24;color:#e6e8eb;box-shadow:0 -8px 24px rgba(0,0,0,.6);} body.jnews-dark-mode .ralli-riba-paneel .ralli-riba-otsing input[type=search]{background:#262a30;border-color:#3a3f47;color:#fff;} body.jnews-dark-mode .ralli-riba-paneel .ralli-riba-otsing button{background:#3d9bf0;color:#111;} body.jnews-dark-mode .ralli-riba-paneel .ralli-riba-plink{color:#a0a0a0!important;} body.jnews-dark-mode .ralli-riba-paneel .ralli-riba-plink.mob-top-reklaam,body.jnews-dark-mode .ralli-riba-paneel .ralli-riba-plink:active{color:#3d9bf0!important;} body.jnews-dark-mode .ralli-riba-paneel .ralli-riba-toeta,body.jnews-dark-mode .ralli-riba-paneel .ralli-riba-toeta:hover,body.jnews-dark-mode .ralli-riba-paneel .ralli-riba-toeta:focus{background:#17304a;color:#3d9bf0!important;} body.jnews-dark-mode .ralli-riba-paneel .ralli-riba-toeta:active{color:#78bcff!important;} body.jnews-dark-mode .ralli-riba-paneel .ralli-riba-toeta::before{background:rgba(120,188,255,.3);} body.jnews-dark-mode .ralli-riba-paneel .ralli-riba-toeta:focus-visible{outline-color:#78bcff;} body.jnews-dark-mode .ralli-riba-paneel .ralli-riba-pealkiri{color:#9aa0a8!important;} body.jnews-dark-mode .ralli-riba-paneel .ralli-riba-rubriigid li{border-bottom-color:#2c3037;} body.jnews-dark-mode .ralli-riba-paneel .ralli-riba-rubriigid a{color:#e6e8eb!important;} body.jnews-dark-mode .ralli-riba-paneel .ralli-riba-rubriigid a:active{color:#3d9bf0!important;} /* Vähendatud liikumine: ilma animatsioonita lahti/kinni (riba nuppude omad on kriitilises CSS-is) */ @media (prefers-reduced-motion:reduce){ .ralli-riba-kate,.ralli-riba-paneel,.ralli-riba-paneel .ralli-riba-rubriigid li,.ralli-riba-menyy svg path,.ralli-riba-paneel .ralli-riba-toeta,.ralli-riba-paneel .ralli-riba-toeta::before{transition:none!important;} .ralli-riba-paneel .ralli-riba-toeta:active{transform:none;} } }