/* ========================================= GLOBAL VARIABLES - CHANGE SETTINGS HERE ========================================= */ /* Skip-link (a11y): vidno samo ob focus prek tipkovnice (Tab) */ .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 100000; background: #fff; color: #000; padding: 8px 14px; text-decoration: none; font-weight: 600; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.18); } .skip-link:focus { left: 8px; top: 8px; width: auto; height: auto; overflow: visible; outline: 3px solid #18B9E8; outline-offset: 2px; } :root { /* --- PISAVE (FONTS) --- */ --font-main: 'Raleway', sans-serif; --font-condensed: 'Roboto Condensed', sans-serif; --font-serif: 'Noto Serif', "Times New Roman", Times, serif; --font-icon-pro: 'Font Awesome 7 Pro'; --font-icon-brands: 'Font Awesome 7 Brands'; --font-helvetica: "HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif; /* Shadowbox */ --font-lucida: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* AddEvent */ --font-tahoma: Tahoma; /* Datepicker */ --font-arial: Arial, Helvetica, sans-serif; /* Izbornik */ --font-simple: sans-serif; /* Slide counter */ /* --- FONT SIZES --- */ --font-urakraj: 1em; --font-xs: 9px; /* Extra small text (footers, etc) */ --font-sm: 11px; /* Small text (mobile body, meta info) */ --font-base: 12px; /* Standard text size */ --font-md: 13px; /* Slightly larger (inputs, details) */ --font-lg: 14px; /* Large text (dates, headers) */ --font-xl: 16px; /* Menu items, days */ --font-2xl: 18px; /* Sub-headings (h2) */ --font-3xl: 20px; /* Headings (h1) */ --font-4xl: 24px; /* Big titles */ /* --- THEME COLORS --- */ --col-blue: #18B9E8; /* Dogodki */ --col-pink: #E1007A; /* Novice */ --col-green: #A1C201; /* Koledar / Galerija */ --col-orange: #F39200; /* Katalog */ --col-blue-dark: #0D7AA0; --col-pink-dark: #94004F; --col-green-dark: #6B7F00; --col-orange-dark: #A36100; --col-white: #FFF; --col-grey: #666; /* Dim base (privzeto) — body.tema-* overridajo z lahko tinto v barvi strani */ --col-dim: rgb(40, 40, 40); /* --- BORDER RADIUS --- */ --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; /* --- BARVNA PALETA ZVRSTNIH KATEGORIJ (dostopna povsod) --- */ --nas-glasba: #0D97BF; --nas-gledalisce: #79A22D; --nas-razstave: #e9118c; --nas-za-otroke: #0066CC; --nas-izobrazevanje: #EC8904; --nas-drugo: #782d8e; --nas-novice: #e91e63; /* ===== Semantic theme variables (8.2 Dark mode) ===== */ --theme-bg: #ffffff; --theme-bg-soft: #f7f7f7; /* za podtemne sekcije v svetli temi */ --theme-text: #222222; --theme-text-muted: #666666; --theme-card: #ffffff; --theme-card-elev: #ffffff; /* poudarjeni kontejnerji */ --theme-border: #dddddd; --theme-border-soft: #eeeeee; --theme-shadow: rgba(0, 0, 0, 0.10); --theme-shadow-lg: rgba(0, 0, 0, 0.18); --theme-link: #C2007E; --theme-input-bg: #ffffff; --theme-overlay: rgba(0, 0, 0, 0.5); color-scheme: light; } /* Dark mode overrides — aktivirajo se prek data-theme="dark" na . */ html[data-theme="dark"] { --theme-bg: #181818; --theme-bg-soft: #222222; --theme-text: #e6e6e6; --theme-text-muted: #a0a0a0; --theme-card: #232323; --theme-card-elev: #2a2a2a; --theme-border: #3a3a3a; --theme-border-soft: #2e2e2e; --theme-shadow: rgba(0, 0, 0, 0.4); --theme-shadow-lg: rgba(0, 0, 0, 0.6); --theme-link: #ff5ba8; --theme-input-bg: #1f1f1f; --theme-overlay: rgba(0, 0, 0, 0.7); color-scheme: dark; } html[data-theme="dark"] body { background: var(--theme-bg); color: var(--theme-text); } html[data-theme="dark"] .moje-sekcija { background: var(--theme-card); border-color: var(--theme-border); color: var(--theme-text); } html[data-theme="dark"] .moje-sekcija h2 { color: var(--theme-text); } html[data-theme="dark"] .moje-sekcija p, html[data-theme="dark"] .moje-sekcija li { color: var(--theme-text); } html[data-theme="dark"] .welcome-modal-panel, html[data-theme="dark"] .push-pre-modal .welcome-modal-panel { background: var(--theme-card); color: var(--theme-text); } html[data-theme="dark"] .welcome-modal-body h2 { color: var(--theme-link); } html[data-theme="dark"] .welcome-modal-body p, html[data-theme="dark"] .welcome-kanali li { color: var(--theme-text); } html[data-theme="dark"] .welcome-namig { color: var(--theme-text-muted); } html[data-theme="dark"] .welcome-modal-x { color: var(--theme-text-muted); } html[data-theme="dark"] .welcome-modal-x:hover, html[data-theme="dark"] .welcome-modal-x:focus-visible { color: var(--theme-text); } html[data-theme="dark"] .narocnina-toast { background: var(--theme-card-elev); color: var(--theme-text); box-shadow: 0 10px 30px var(--theme-shadow-lg); } html[data-theme="dark"] .filter-empty-state { color: var(--theme-text-muted); } html[data-theme="dark"] .filter-empty-naslov { color: var(--theme-text); } html[data-theme="dark"] .filter-empty-state p { color: var(--theme-text); } html[data-theme="dark"] .filter-empty-ilustracija { background: linear-gradient(135deg, rgba(255,91,168,0.15), rgba(24,185,232,0.10)); } html[data-theme="dark"] .filter-empty-sek { background: var(--theme-card-elev); color: var(--theme-text); border-color: var(--theme-border); } html[data-theme="dark"] .filter-empty-sek:hover, html[data-theme="dark"] .filter-empty-sek:focus-visible { background: var(--theme-bg-soft); color: var(--theme-link); } html[data-theme="dark"] .snooze-banner { background: linear-gradient(135deg, rgba(255,91,168,0.12), rgba(24,185,232,0.08)); color: var(--theme-text); } html[data-theme="dark"] .snooze-gumb { background: var(--theme-card-elev); color: var(--theme-text); border-color: var(--theme-border); } html[data-theme="dark"] .snooze-gumb:hover:not(:disabled), html[data-theme="dark"] .snooze-gumb:focus-visible { background: var(--theme-bg-soft); color: var(--theme-link); border-color: var(--theme-link); } html[data-theme="dark"] .narocnina-modal-panel { background: var(--theme-card); color: var(--theme-text); } html[data-theme="dark"] .dogodek_card, html[data-theme="dark"] .ponudba_card, html[data-theme="dark"] .novica_card { background: var(--theme-card); color: var(--theme-text); border-color: var(--theme-border); } html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--theme-input-bg); color: var(--theme-text); border-color: var(--theme-border); } /* Theme toggle gumb (mobile in tablet — v #header_actions) */ #btn_theme { background: transparent; border: 0; color: inherit; cursor: pointer; padding: 6px 8px; font-size: 18px; line-height: 1; } #btn_theme:hover, #btn_theme:focus-visible { color: var(--theme-link); } /* Theme toggle gumb desktop — tik desno od jezikovnega chip-a (#container ima relative pozicijo + 1028px center; isti absolutni layout kot .jezik-preklop-desktop). */ .btn-theme-desktop { position: absolute; top: 12px; left: 96px; z-index: 100; background: rgba(255,255,255,0.85); border: 1px solid rgba(0,0,0,0.06); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); color: #333; cursor: pointer; padding: 6px 10px; font-size: 18px; line-height: 1; height: 32px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; } .btn-theme-desktop:hover, .btn-theme-desktop:focus-visible { background: #fff; color: var(--theme-link); } @media (max-width: 816px) { .btn-theme-desktop { display: none; } } html[data-theme="dark"] .btn-theme-desktop { background: rgba(40,40,40,0.85); color: #e6e6e6; border-color: rgba(255,255,255,0.10); } html[data-theme="dark"] .btn-theme-desktop:hover, html[data-theme="dark"] .btn-theme-desktop:focus-visible { background: #2a2a2a; color: var(--theme-link); } /* Theme toggle ikone: vidnost na podlagi izbire uporabnika (data-theme-izbira) — ne dejansko aplicirane teme — da je jasno vidno, ali si v auto modu. */ .theme-icon { display: none; } html[data-theme-izbira="light"] .theme-icon-light { display: inline; } html[data-theme-izbira="dark"] .theme-icon-dark { display: inline; } html[data-theme-izbira="auto"] .theme-icon-auto { display: inline; } /* Fallback: če JS še ni postavil data-theme-izbira atributa (pre-FOUC ali brez JS), prikaži ikono v auto stanju (◐), ker je auto privzeti način. */ html:not([data-theme-izbira]) .theme-icon-auto { display: inline; } body.tema-dogodki { --col-dim: color-mix(in srgb, var(--col-blue) 14%, rgb(40, 40, 40)); } body.tema-koledar { --col-dim: color-mix(in srgb, var(--col-green) 14%, rgb(40, 40, 40)); } body.tema-katalog { --col-dim: color-mix(in srgb, var(--col-orange) 14%, rgb(40, 40, 40)); } body.tema-novice { --col-dim: color-mix(in srgb, var(--col-pink) 14%, rgb(40, 40, 40)); } /* box-sizing: border-box samo za nove elemente (stari float-based layout računa s content-box) */ #siteheader, #siteheader *, #bottom_nav, #bottom_nav *, #top_nav, #top_nav *, #brand, #brand *, #header_actions, #header_actions *, #iskanje_bar, #iskanje_bar *, #filter_drawer, #filter_drawer * { box-sizing: border-box; } /* A11y: vidna fokusna obroba samo pri tipkovniški navigaciji (Faza I) */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--col-blue, #00aeef); outline-offset: 2px; border-radius: 2px; } /* Respektiraj uporabnikovo nastavitev za zmanjšane animacije */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Izjema: cssmenu kolaps/razpiranje prenaša UX informacijo (kje so meniji), zato ohrani tranzicijo tudi pri reduce-motion. */ #cssmenu, #cssmenu li { transition-duration: 0.32s !important; } } /* roboto-condensed-300 - latin */ @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/roboto-condensed-v16-latin-300.eot'); /* IE9 Compat Modes */ src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'), url('fonts/roboto-condensed-v16-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/roboto-condensed-v16-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/roboto-condensed-v16-latin-300.woff') format('woff'), /* Modern Browsers */ url('fonts/roboto-condensed-v16-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/roboto-condensed-v16-latin-300.svg#RobotoCondensed') format('svg'); /* Legacy iOS */ } /* roboto-condensed-regular - latin */ @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/roboto-condensed-v16-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url('fonts/roboto-condensed-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/roboto-condensed-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/roboto-condensed-v16-latin-regular.woff') format('woff'), /* Modern Browsers */ url('fonts/roboto-condensed-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/roboto-condensed-v16-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */ } /* roboto-condensed-italic - latin */ @font-face { font-family: 'Roboto Condensed'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/roboto-condensed-v16-latin-italic.eot'); /* IE9 Compat Modes */ src: local('Roboto Condensed Italic'), local('RobotoCondensed-Italic'), url('fonts/roboto-condensed-v16-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/roboto-condensed-v16-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/roboto-condensed-v16-latin-italic.woff') format('woff'), /* Modern Browsers */ url('fonts/roboto-condensed-v16-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/roboto-condensed-v16-latin-italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */ } .fotka_mobilna { display: none; width: 100%; max-width: 100%; /* Prepreči, da bi element bil širši od starša */ box-sizing: border-box; /* Zagotovi, da padding ne poveča širine */ overflow: hidden; /* Skrije morebitno vsebino, ki bi "ušla" ven */ margin: 0 auto; /* Centriranje, če je slučajno ožja */ margin-top: 10px; margin-bottom: -16px !important; } .fotka_mobilna img { display: block; /* Odpravi prazen prostor (ghost space) pod sliko */ width: 100%; max-width: 100%; /* Slika ne sme biti širša od kontejnerja */ height: auto; /* Ohrani pravilno razmerje stranic (da slika ni razpotegnjena) */ box-sizing: border-box; border-radius: var(--radius-lg); } .mobilno_skrij { display: inline; } li { font-size: 1.2em; } body { background-image: url(slike/podlaga1.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: 0 top; margin: 0; padding: 0; font-size: var(--font-base); /* 12px */ } *, p { font-family: var(--font-main); line-height: 1.5em; } ::placeholder { color: darkred; } input:focus::placeholder { color: transparent; } .mobile_video { display:none; } .mobile_kontakt { display:none; } .sam_video { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; padding-top: 12px; margin-bottom: 16px; border: 0; } .dogode-vsebina { display: flex; gap: 10px; align-items: flex-start; } .dogode-vsebina .opis { flex: 1 1 0; min-width: 0; font-size: 1.2em; text-align: justify; } .dogode-vsebina .dogodek_fotka_link { flex: 0 0 auto; } .sam_video_dogodki { display:block; width:574px; height:300px; padding-top: 0; } #map_canvas { width:574px; height:300px; } .zafotko { min-height:110px; font-size: var(--font-md); /* 13px */ } #container { position: relative; width: 1028px; margin: 0 auto; } #glava { height:100px; } #glava_levo { width:686px; height:100px; float:left; } #glava_desno { width:342px; float:left; } #vsebina { width:1028px; } #centralni_stolpec { width:814px; float:left; } #desni_stolpec { position: fixed; margin-left: 814px; margin-top: -8px; width: 214px; } .socialink { float: left; width: 42px; text-align: center; cursor: pointer; opacity: 0.6; } .socialink:hover { opacity: 1; } /* Brand barve social share ikon v #desni_linki — prej inline `style="color:..."` na elementih (index.php). Preneseno v CSS, da lahko dodamo dark mode. */ #desni_linki .socialink i.fa-facebook { color: #4267B2; } #desni_linki .socialink i.fa-x-twitter { color: #000; } #desni_linki .socialink i.fa-reddit { color: #FF4500; } #desni_linki .socialink i.fa-threads { color: #000; } #desni_linki .socialink i.fa-viber { color: #7360f2; } #desni_linki .socialink i.fa-whatsapp { color: #075e54; } #desni_linki .socialink i.fa-telegram { color: #24A1DE; } #desni_linki .socialink i.fa-circle-envelope { color: #000; } .socialink_m { display: inline-block; width: 10.5%; text-align: center; cursor: pointer; opacity: 0.8; } .socialink:hover { opacity: 1; } #mobilni_linki { font-size: 2.5em; display: none; } #desni_linki { margin-top: 8px; margin-left: 6px; width: 210px; height: 46px; font-size: 2.8em; } #desni, #desni1, #desni2 { display:block; float:left; width:32px; height:33px; } #desni span, #desni1 span, #desni2 span { display:none; } .tw, .go, .em { margin-left:14px; } #noga { width:1028px; } #noga_levo p { margin:0; width:200px; padding:14px; float:left; } #noga_levo #boreoslikca { margin-left:50px; margin-top:12px; font-size: var(--font-4xl); /* 24px */ width:86px; height:98px; float:left; background-image:url(slike/naslovne_ikone.png); background-repeat:no-repeat; background-position:0px -158px; } #noga_desno p { font-size: var(--font-xs); /* 9px */ margin:0; width:190px; padding-top:14px; float:left; } #noga_desno #slikce { margin-left:0px; margin-top:16px; float:left; } #noga_desno #ess{ width:173px; height:39px; background-image:url(slike/naslovne_ikone.png); background-repeat:no-repeat; background-position:0px -262px; } #noga_desno #mnz{ margin-top:26px; width:173px; height:39px; background-image:url(slike/naslovne_ikone.png); background-repeat:no-repeat; background-position:-87px -163px; } /* CSS MENU */ /* CSS MENU — pure CSS krogi (zamenjano za bitmap sprite zaradi i18n). Krogi se z negativnim top zamikom dvignejo nad zgornji rob strani (kot v originalnem bitmap dizajnu). */ #cssmenu { position: fixed; top: -64px; /* dvignjeno: ~polovica kroga čez zgornji rob strani */ z-index: 200; border: none; width: 360px; height: 170px; color: var(--col-white); background: none; pointer-events: none; /* prazni prostor med krogi naj prepušča klike */ } #cssmenu ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; height: 170px; } #cssmenu li { width: 130px; height: 130px; margin: 0; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: filter 0.18s, transform 0.18s; box-shadow: 0 3px 8px rgba(0,0,0,0.14); box-sizing: border-box; flex: 0 0 auto; pointer-events: auto; /* krogi so klikabilni */ } #cssmenu li:hover { filter: brightness(1.08); transform: translateY(-3px); } #cssmenu li + li { margin-left: -22px; } /* prekrivanje krogov */ /* Za WCAG kontrast: bele črke na svetlih barvah (cyan #18B9E8, lime #A1C201) ne dosežejo 4.5 razmerja; uporabljamo dark variante samo za #cssmenu krogi. Pink #E1007A je dovolj temen, da beli tekst pasira. */ #cssmenu li.novice { background: var(--col-pink); margin-top: 4px; } #cssmenu li.dogodki { background: var(--col-blue-dark); margin-top: 28px; } #cssmenu li.dogodki a { padding-top: 70px; } /* dvignjen napis za 8px (vidno višje v vidnem delu kroga) */ #cssmenu li.galerija { background: var(--col-green-dark); margin-top: 6px; } #cssmenu li.koledar { display: none; } /* Besedilo: centrirano znotraj VIDNE polovice kroga. Krog je 130px, ~64px ga je čez zgornji rob (top: -64px + margin-top). Center vidne polovice ≈ y 93px znotraj kroga → padding-top: 64px in align-items: flex-start postavi besedilo v ta sredinski razpon. */ #cssmenu li a { display: flex; align-items: flex-start; justify-content: center; width: 100%; height: 100%; padding: 78px 12px 0; color: #fff; text-decoration: none; font-size: 18px; font-weight: 500; text-align: center; line-height: 1.15; word-break: break-word; hyphens: auto; overflow: hidden; box-sizing: border-box; } #cssmenu li a:hover { color: #fff; text-decoration: none; } /* Active state (trenutna stran) — PHP doda .novicehover/.dogodkihover/.galerijahover class na #cssmenu glede na $menustil[$id]. Označi aktivni krog z inset robom. */ #cssmenu.novicehover .novice { box-shadow: 0 0 0 3px rgba(255,255,255,0.85) inset, 0 3px 8px rgba(0,0,0,0.18); } #cssmenu.dogodkihover .dogodki { box-shadow: 0 0 0 3px rgba(255,255,255,0.85) inset, 0 3px 8px rgba(0,0,0,0.18); } #cssmenu.galerijahover .galerija { box-shadow: 0 0 0 3px rgba(255,255,255,0.85) inset, 0 3px 8px rgba(0,0,0,0.18); } /* Scroll collapse: ko user skrola, vsi krogi se vsujejo v DESNI položaj (kjer je galerija). Aktivni krog dobi z-index 10 → ostane na vrhu in pokrije ostale. Uporabnik vidi samo en krog (z barvo aktualne strani). Hover na cssmenu razpre nazaj. JS doda body.cssmenu-zlozen pri scrollY > 80. margin-left: -22px med li-ji pomeni center-to-center 130-22 = 108px. Vrstni red v HTML: novice, dogodki, galerija (leva → desna). */ /* Cel #cssmenu se premakne horizontalno tako, da je collapsed krog poravnan s centrom koledarja v #desni_stolpec (calendar center ~921px, galerija center default ~967px → premik -46px). Tune po potrebi. POMEMBNO za Chrome: eksplicitno definiramo inicijalne vrednosti transform/opacity v base selektorju — Chrome ne sproži animacije iz 'none' v 'translateX(0)' brez izrecno postavljenega začetnega stanja. */ #cssmenu { transform: translateX(0); transition: transform 0.32s cubic-bezier(.4,.2,.4,1); will-change: transform; } #cssmenu li { opacity: 1; transition: transform 0.32s cubic-bezier(.4,.2,.4,1), opacity 0.32s; will-change: transform, opacity; } body.cssmenu-zlozen #cssmenu { transform: translateX(-46px); } body.cssmenu-zlozen #cssmenu li { z-index: 1; opacity: 0; /* privzeto skrij vse — aktivni dobi opacity 1 spodaj */ pointer-events: none; /* prepreči, da bi skrit krog ujel klik */ } /* Vsi se premaknejo na desni položaj (galerija stays put, ostali translate desno) */ body.cssmenu-zlozen #cssmenu .novice { transform: translateX(216px); } body.cssmenu-zlozen #cssmenu .dogodki { transform: translateX(108px); } body.cssmenu-zlozen #cssmenu .galerija { transform: translateX(0); } /* Aktivni krog na vrhu in vidni. Ostali so skriti (opacity 0). */ body.cssmenu-zlozen #cssmenu.novicehover .novice, body.cssmenu-zlozen #cssmenu.dogodkihover .dogodki, body.cssmenu-zlozen #cssmenu.galerijahover .galerija { z-index: 10; opacity: 1; pointer-events: auto; } /* Fallback za strani brez aktivnega razreda (npr. / = 0.php): pokaži .dogodki kot privzeti viden krog, da menu po kolapsu ne izgine. */ body.cssmenu-zlozen #cssmenu:not(.novicehover):not(.dogodkihover):not(.galerijahover) .dogodki { z-index: 10; opacity: 1; pointer-events: auto; } /* Hover na cssmenu razpre vse nazaj na privzeti položaj + opacity 1 in vrne cssmenu na originalno X pozicijo (brez -46px premika). Kljub pointer-events:none na #cssmenu se hover iz li (pointer-events:auto) prenese (bubble) na starša — zato navaden :hover deluje in se izognemo Chrome bugu z :has() + transform. */ body.cssmenu-zlozen #cssmenu:hover { transform: translateX(0); } body.cssmenu-zlozen #cssmenu:hover li { opacity: 1; pointer-events: auto; } body.cssmenu-zlozen #cssmenu:hover li.novice, body.cssmenu-zlozen #cssmenu:hover li.dogodki, body.cssmenu-zlozen #cssmenu:hover li.galerija { transform: translateX(0); } body.cssmenu-zlozen #cssmenu:hover li.novice:hover, body.cssmenu-zlozen #cssmenu:hover li.dogodki:hover, body.cssmenu-zlozen #cssmenu:hover li.galerija:hover { transform: translateY(-3px); } /* Touch device: na mobilnem/tabletu je #cssmenu sploh skrit, problema ni. */ /* CSS MENU KONEC */ /* NASLOVNICA */ #naslovna_dogodki, #naslovna_novice, #noga_levo, #noga_desno { width:400px; float:left; padding-left:14px; } #naslovna_novice { padding:0; } #naslovna_ikona, #naslovna_ikona_novice { position:absolute; margin-left:243px; margin-top:-30px; width:128px; height:128px; background-image:url(slike/naslovne_ikone.png); background-repeat:no-repeat; } .novice_ikona { background-position:-130px 0; } .galerija_ikona { background-position:-262px -255px; } #naslovna_ikona.podstran { margin-left:630px; } #naslovna_dogodki_krogec { position:absolute; margin-left:-10px; margin-top:-10px; width:28px; height:28px; background-image:url(slike/naslovne_ikone.png); background-repeat:no-repeat; background-position:0px -129px; } #naslovna_seznam_dogodkov, #naslovna_seznam_novic { width:388px; -webkit-border-radius: var(--radius-lg); -moz-border-radius: var(--radius-lg); border-radius: var(--radius-lg); -webkit-box-shadow: 0px 0px 32px 0px rgba(50, 50, 50, 0.4); -moz-box-shadow: 0px 0px 32px 0px rgba(50, 50, 50, 0.4); box-shadow: 0px 0px 32px 0px rgba(50, 50, 50, 0.4); background-color:#FFF; min-height:350px; } #naslovna_novice_head, #naslovna_dogodki_head { height:69px; -webkit-border-radius: 12px 12px 0px 12px; -moz-border-radius: 12px 12px 0px 12px; border-radius: 12px 12px 0px 12px; } #naslovna_dogodki_head { background-color: var(--col-blue); } #naslovna_novice_head { background-color: var(--col-pink); } .naslov_dve { font-size: var(--font-4xl); /* 24px */ font-family:'Noto Serif', "Times New Roman", Times, serif; font-weight:bold; color: var(--col-white); } .naslov_ostalo { font-weight:normal; font-size: var(--font-4xl); /* 24px */ font-family:'Noto Serif', "Times New Roman", Times, serif; font-style:italic; color: var(--col-white); } .naslovna_naslov { font-weight:normal; margin:0; padding-top:30px; padding-left:14px; } .organizator { font-size: var(--font-sm); /* 11px */ } .naslovna_vec { color: var(--col-white); font-size: var(--font-base); /* 12px */ text-align: center; float: right; margin-right: 30px; padding-top:2px; background-image: url(slike/naslovne_ikone.png); background-repeat: no-repeat; background-position: -29px -129px; -webkit-border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px; height: 19px; width: 139px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; } .naslovna_vec a { text-decoration:none; color: var(--col-white); } .naslovna_vec a:hover { text-decoration:none; color:#444 ; } .naslovna_vsi_dogodki { padding:14px; } .kjekaj { clear:both; } .kjekaj_naslovka { padding-top:8px; clear:both; } .datum { float:left; width:42px; text-align:center; color:white; font-family:'Noto Serif', "Times New Roman", Times, serif; } .vmesdatum { float:left; width:24px; padding-top:6px; text-align:center; font-size: var(--font-4xl); /* 24px */ color:black; font-family:'Noto Serif', "Times New Roman", Times, serif; } .kondatum { float:left; width:42px; text-align:center; color:white; font-family:'Noto Serif', "Times New Roman", Times, serif; } .mesec { background-color: black; padding-bottom:1px; line-height:22px; -webkit-border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; font-weight:bold; font-size: var(--font-lg); /* 14px */ } .dan { background-color: var(--col-blue); line-height:22px; height:22px; padding-bottom:1px; -webkit-border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px; font-weight:bold; font-size: var(--font-lg); /* 14px */ } .adddan { background-color: #D50000; padding-bottom:1px; line-height:22px; -webkit-border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; font-weight:bold; font-size: var(--font-lg); /* 14px */ } .urakraj_vstopna { float:left; padding-left:14px; margin-top:0; width:300px; line-height: 1em; font-size: var(--font-urakraj); } .urakraj { margin-top:0; float:left; padding-left:48px; position:absolute; line-height: 1em; max-width:50%; font-size: var(--font-urakraj); } /* Novice — pravila za naslov in urakraj (kosi/1.php seznam + kosi/5.php detail) */ .novica_urakraj { margin-top: 0; } .novica_naslov { float: left; width: 500px; max-width: 100%; padding-top: 0; padding-bottom: 12px; word-wrap: break-word; overflow-wrap: break-word; } .novica_kartica { padding-bottom: 16px; margin-bottom: 12px; border-bottom: 1px solid #eee; } .urakraj_vecdni { float:left; padding-left:115px; position:absolute; line-height: 1em; font-size: var(--font-urakraj); } .kajzakaj { clear:both; color:#555; font-size: var(--font-base); /* 12px */ } .kajzakaj p span { font-size: 1.1em; } .kajzakaj a{ text-decoration:none; color:inherit; } .kajzakaj a:hover{ text-decoration: none; color: #000; } h1, h2, h1 a, h2 a { margin:0; font-weight:bold; font-family:'Noto Serif', "Times New Roman", Times, serif; text-decoration:none; } h1 { font-size: var(--font-3xl); /* 20px */ padding-top:12px; } h2 { padding:0; padding-top:8px; font-size: var(--font-2xl); /* 18px */ padding-bottom:0; } .kajzakaj p { margin-top: 4px; padding: 0; text-align: justify; font-size: 1.1em; } .podnaslov { color: #222; padding: 0; line-height: 1.5; font-size: var(--font-md); margin: 0 0 12px 0; } .dogodki_vmes { width: auto; height: 1px; border-top-width: 1px; border-top-style: dashed; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-color: #B6C9D3; margin-top:12px; margin-bottom:14px; } #naslovna_seznam_novic .dan { background-color: var(--col-pink); } ul { list-style: square; } /* NASLOVNICA KONEC */ /* NOVICE */ #vsebina { margin-left:14px; width:788px; -webkit-border-radius: var(--radius-lg); -moz-border-radius: var(--radius-lg); border-radius: var(--radius-lg); -webkit-box-shadow: 0px 0px 32px 0px rgba(50, 50, 50, 0.4); -moz-box-shadow: 0px 0px 32px 0px rgba(50, 50, 50, 0.4); box-shadow: 0px 0px 32px 0px rgba(50, 50, 50, 0.4); background-color:#FFF; min-height:300px; } #vsebina_head { height:69px; width:788px; -webkit-border-radius: 12px 12px 0px 0px; -moz-border-radius: 12px 12px 0px 0px; border-radius: 12px 12px 0px 0px; } .podlaga_prijava { background-color:#C32E31; } .podlaga_dogodki { background-color: var(--col-blue); } .podlaga_novice { background-color: var(--col-pink); } .podlaga_galerija { background-color: var(--col-green); } /* A11y: --col-blue (#18B9E8) ima na belem ozadju kontrast 2.29:1 (FAIL). --col-blue-dark (#0D7AA0) doseže ~5.4:1 (WCAG AA). Brand barva (--col-blue) ostaja za ozadja in dekoracije, dark variant je za besedilo na belem. */ .pisava_dogodki, .pisava_dogodki a { color: var(--col-blue-dark); } .pisava_dogodki a:hover { color: #0B697D; } .pisava_doglevo, .pisava_doglevo a { color: var(--col-pink); } .pisava_doglevo a:hover { color: #A4005A; } .pisava_novice, .pisava_novice a { color: var(--col-pink); } .pisava_novice a:hover { color: #B90066; } .pisava_galerija, .pisava_galerija a { color: var(--col-green-dark); } /* a11y: cf. ostali pisava_* */ .pisava_galerija a:hover { color: #809A01; } .pisava_sivo, .pisava_sivo a { color: var(--col-grey); text-decoration:none; } .pisava_sivo a:hover { color: #000000; } .vsebina_naslov { margin:0; padding-top:20px; padding-left:30px; } .vsebina_naslov a{ text-decoration:none; } #vsebina_spodaj, .vsebina_spodaj { position: relative; /* containing block za absolutno pozicioniran #vsebina_menu_abs */ padding-left: 14px; padding-right: 14px; margin-top: 24px; width: 760px; clear: both; } #vsebina_menu, .vsebina_menu { width:186px; float:left; min-height:1px; height: 1px !important; } /* Detail dogodka ima v .vsebina_menu pravo vsebino (info-akcije, kontakt …), ne le placeholder za #vsebina_menu_abs. Privzeti `.vsebina_menu { float: left; height: 1px !important }` (zasnovan za listing strani) povzroči da vsebina sidebar-ja overflowa iz 1px škatla in jo naslednji .vsebina_spodaj sibling vizualno prekrije — gumb "Dodaj v koledar" (zadnji v sidebar-u) postane ne-klikabilen, ker intercepts pointer events. Naivni fix (height: auto) pa povzroči, da naslednji .vsebina_spodaj s `clear: both` čaka, dokler ni konec daljšega sidebar-ja, kar pusti prazen prostor med kratkim opisom in opis/ zemljevid bloki. Pravi fix: sidebar postavimo `position: absolute` (out-of-flow), tako da naslednji bloki ne čakajo nanj. `z-index` zagotovi, da sidebar ostane klikabilen, tudi če overflowa v naslednji blok. Pravilo ujema samo sidebar z dejansko vsebino (info-blok ali info-akcije), tako da ne ruši praznih placeholderjev v opis/zemljevid blokih. */ body.detail-stran .vsebina_spodaj > .vsebina_menu:has(.info-blok, .info-akcije) { position: absolute; left: 14px; /* poravnano z .vsebina_spodaj padding-left */ top: 0; width: 186px; height: auto !important; min-height: 0; float: none; z-index: 5; /* nad morebitnim overflowom v naslednje .vsebina_spodaj */ } /* Levi zvrstni/občinski menu je absolutno pozicioniran, da dogodki, ki bi se sicer prelili pod njim (float wrap), ne uidejo na levi rob. */ #vsebina_menu_abs { position: absolute; left: 14px; /* poravnano z .vsebina_spodaj padding-left */ top: 0; width: 186px; } #vsebina_vsebina, .vsebina_vsebina { width: 574px; margin-left: 186px; /* rezerviran prostor za absolutno pozicioniran #vsebina_menu_abs */ float: left; padding-bottom: 12px; } .srednji { width:574px; float:none; } .srdanes { background: none; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,0),rgba(255,0,0,0.06),rgba(255,0,0,0)); /*Safari 5.1-6*/ background: -o-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,0),rgba(255,0,0,0.06),rgba(255,0,0,0)); /*Opera 11.1-12*/ background: -moz-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,0)),rgba(255,0,0,0.06,rgba(255,0,0,0)); /*Fx 3.6-15*/ background: linear-gradient(to left, rgba(255,0,0,0),rgba(255,0,0,0),rgba(255,0,0,0.06),rgba(255,0,0,0)); } .o_dogodku { float:left; width:574px; } .o_dogodku_brezvidea { float:left; width:574px; } .nastopajoci p { padding-right:4px; font-size: 1.1em; } .fotka_desno, .fotka_levo { display:block; margin-left:14px; float:left; width:172px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0px 0px 6px 0px rgba(50, 50, 50, 0.7); -moz-box-shadow: 0px 0px 6px 0px rgba(50, 50, 50, 0.7); box-shadow: 0px 0px 6px 0px rgba(50, 50, 50, 0.7); } .fotka_levo { margin-left:0px; padding-left:0; } .hspacer { height:12px; } .hspacer1 { height:28px; } .splosni_linki, .splosni_linki_off { list-style: none; margin: 0; margin-top: 22px; padding: 0; } .splosni_linki li{ height:32px; margin-left:0; } .splosni_linki li span { display:block; float:left; width:340px; border-bottom-width: thin; border-bottom-style: dashed; border-bottom-color: #CCC; } .splosni_linki li span a { font-family: 'Roboto Condensed', sans-serif; font-weight: lighter; } /* Ikone v .splosni_linki — prej narejene prek `::before` pseudo-elementa z `font-family: 'Font Awesome 7 Brands'`. To je odpovedalo, ko se je preklopilo na FA subset (uporablja družini "FA" / "FAB", in ne vključi codepoint-ov, ki jih source code ne uporablja kot `