/************************************/ /* TAMNA TEMA Učitava se POSLE svih ostalih fajlova i ništa u njima ne dira. Skoro sve ide kroz varijable iz general.css — komponente ispod su samo one koje se ne mogu opisati bojom iz palete (fotografije, mapa, providne trake). Uključuje se atributom na : data-tema="tamna". Atribut postavlja kratka skripta u , pre crtanja strane, da ne bi bljesnula svetla verzija. Ton: veče na reci. Isti odnosi kao u svetloj temi, samo obrnuti — voda-tamna (naslovi) postaje svetla, pesak (pozadina) postaje tamna. --boja-bela ostaje svetla, jer je to tekst preko boje. */ /************************************/ [data-tema="tamna"] { color-scheme: dark; --boja-voda-tamna: #a9c6d6; --boja-voda: #8aa9bb; /* nosi traku raspona u kalendaru, ivice polja i boju placeholdera — zato je srednje tamna, a ne skoro crna */ --boja-voda-svetla: #4a6b7d; --boja-mint-tamni: #93c4ac; --boja-mint: #6d9b86; --boja-mint-svetli: #1d2b26; --boja-kajsija-tamna: #d79c72; --boja-kajsija: #e5b490; --boja-kajsija-svetla: #3a2a22; --boja-terakota: #d5876a; /* u tamnoj temi hover ide ka svetlijem, ne ka tamnijem */ --boja-terakota-tamna: #e8a184; --boja-vazno: #f09079; --boja-vazno-podloga: #3a211b; --boja-pesak: #12171a; --boja-pesak-topli: #171e22; --boja-pesak-tamni: #2b353b; --boja-tekst: #e6e0d9; --boja-tekst-blaga: #a49b91; --boja-bela: #fffdfb; --boja-povrsina: #1c2429; --sloj-providan: rgba(18, 23, 26, 0.88); --sloj-providan-jak: rgba(18, 23, 26, 0.97); /* senke su na tamnoj podlozi gotovo nevidljive, pa nose i blagu svetlu ivicu koja odvaja karticu od pozadine */ --senka-meka: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(169, 198, 214, 0.08); --senka-podignuta: 0 2rem 4.8rem rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(169, 198, 214, 0.12); } /************************************/ /* FOTOGRAFIJE I MAPA */ /************************************/ /* slike se blago prigušuju da ne "gore" na tamnoj strani */ [data-tema="tamna"] .o-nama-img, [data-tema="tamna"] .hrana-slika img, [data-tema="tamna"] .prilike-slika img, [data-tema="tamna"] .galerija-item img, [data-tema="tamna"] .cta-slika img { filter: brightness(0.88) saturate(0.94); } /* u lightboxu se gleda sama fotografija — tu se ništa ne prigušuje */ [data-tema="tamna"] .lightbox-img { filter: none; } [data-tema="tamna"] .mapa { filter: invert(0.9) hue-rotate(180deg) saturate(0.7) brightness(0.95); } /* hero fotografija nosi svetao tekst i u svetloj temi; noću se veo pojača da se prelaz ka tamnoj strani ne oseti kao skok */ [data-tema="tamna"] .hero-veo { background: linear-gradient( 180deg, rgba(10, 16, 20, 0.62) 0%, rgba(10, 16, 20, 0.34) 35%, rgba(10, 16, 20, 0.72) 100% ); } [data-tema="tamna"] .sekcija-hero { background: linear-gradient(180deg, #24303a 0%, #1b262e 45%, #12171a 100%); } /************************************/ /* POVRŠINE KOJE NISU IZ PALETE */ /************************************/ /* popup je u svetloj temi boje strane; u tamnoj mora da bude svetliji od nje, inače se ne vidi da je iznad sadržaja */ [data-tema="tamna"] .popup-sadrzaj { background-color: var(--boja-pesak-topli); } [data-tema="tamna"] .popup { background-color: rgba(6, 10, 12, 0.6); } /* prošli dani: --boja-pesak-tamni je noću ivica, pa bi broj nestao */ [data-tema="tamna"] .dan--proslo { color: #4b565d; } /* PUNE POVRŠINE U BOJI NASLOVA --boja-voda-tamna je noću svetla (to je boja naslova), pa svuda gde je u svetloj temi bila PODLOGA sa belim tekstom mora da se navede svoja tamna vrednost. Inače ispadne bela slova na svetloplavom. */ [data-tema="tamna"] .cta { background: linear-gradient(120deg, #1f4d66 0%, #2b6683 100%); } /* izabran dan i aktivan tab su noću obrnuti: svetla podloga, taman tekst — tako se i dalje jasno izdvajaju od ostatka */ [data-tema="tamna"] .galerija-tab--aktivan { background-color: #8fb9d0; border-color: #8fb9d0; color: #12252f; } [data-tema="tamna"] .dan--izabran, [data-tema="tamna"] .dan--slobodan.dan--izabran, [data-tema="tamna"] .dan--izabran:hover, [data-tema="tamna"] .dan--slobodan.dan--izabran:hover { background-color: #8fb9d0; color: #12252f; box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.45); } [data-tema="tamna"] .dan--izabran.dan--danas { box-shadow: inset 0 0 0 2px var(--boja-kajsija), 0 0.4rem 1.2rem rgba(0, 0, 0, 0.45); } [data-tema="tamna"] .dan--u-rasponu:hover { background-color: #4a6b7d; color: var(--boja-bela); } [data-tema="tamna"] .sekcija--utisci { background: linear-gradient( 180deg, var(--boja-pesak) 0%, var(--boja-pesak-topli) 100% ); } /* isprekidane linije u računu i cenovniku su zadate toplim crnim */ [data-tema="tamna"] .rez-stavke li { border-bottom-color: rgba(230, 224, 217, 0.14); } [data-tema="tamna"] .cena-kartica--istaknuta .cena-dani, [data-tema="tamna"] .cena-kartica--istaknuta .cena-lista li:not(:last-child) { border-bottom-color: rgba(230, 224, 217, 0.12); } /* mala slika u sekciji „O mestu" ima okvir u boji strane */ [data-tema="tamna"] .o-nama-img--mala { border-color: var(--boja-pesak); } /************************************/ /* ALATKE ZAGLAVLJA — tema i jezik Nisu deo tamne teme, ali su nove komponente pa stoje ovde da bi se ceo dodatak (tema + jezik) prenosio jednim fajlom. Isto je urađeno i kod Studenca. Raspored: logotip i prekidači zajedno levo, navigacija ostaje uz desnu ivicu, hamburger na telefonu skroz desno. Preko hero fotografije su prekidači svetli i providni; kad zaglavlje postane belo (sticky) ili se otvori meni, prelaze u boje sajta. */ /************************************/ .zaglavlje-levo { display: flex; align-items: center; gap: 2rem; /* iznad mobilne navigacije koja prekriva ceo ekran */ z-index: 110; } .zaglavlje-alatke { display: flex; align-items: center; gap: 0.8rem; } .prekidac-tema { display: flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; flex-shrink: 0; padding: 0; color: var(--boja-bela); background-color: rgba(255, 253, 251, 0.16); border: none; border-radius: 50%; cursor: pointer; transition: background-color 400ms var(--lako), color 400ms var(--lako), transform 500ms var(--lako); } .prekidac-tema:hover { background-color: rgba(255, 253, 251, 0.28); transform: rotate(-12deg); } .prekidac-tema .ikona { width: 2.1rem; height: 2.1rem; } /* vidi se ona ikona koja nudi drugu temu — mesec dok je svetlo */ .prekidac-tema .ikona--sunce-tema { display: none; } [data-tema="tamna"] .prekidac-tema .ikona--mesec { display: none; } [data-tema="tamna"] .prekidac-tema .ikona--sunce-tema { display: block; } .prekidac-jezik, .prekidac-jezik:link, .prekidac-jezik:visited { display: flex; align-items: center; justify-content: center; height: 4.4rem; padding: 0 1.4rem; flex-shrink: 0; font-family: inherit; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; color: var(--boja-bela); background-color: rgba(255, 253, 251, 0.16); border: none; border-radius: 10rem; cursor: pointer; transition: background-color 400ms var(--lako), color 400ms var(--lako); } .prekidac-jezik:hover { background-color: rgba(255, 253, 251, 0.28); } .sticky .prekidac-tema, .nav-open .prekidac-tema, .sticky .prekidac-jezik, .sticky .prekidac-jezik:link, .sticky .prekidac-jezik:visited, .nav-open .prekidac-jezik, .nav-open .prekidac-jezik:link, .nav-open .prekidac-jezik:visited { color: var(--boja-voda-tamna); background-color: var(--boja-mint-svetli); } @media (max-width: 59em) { .zaglavlje-levo { gap: 1.4rem; } .zaglavlje-alatke { gap: 0.6rem; } } /* na malim telefonima logotip i dva prekidača jedva staju u jedan red */ @media (max-width: 25em) { .zaglavlje-levo { gap: 1rem; } .prekidac-tema { width: 4rem; height: 4rem; } .prekidac-jezik, .prekidac-jezik:link, .prekidac-jezik:visited { height: 4rem; padding: 0 1.1rem; font-size: 1.3rem; } } /* prekidači ne smeju da ostanu „upaljeni" posle dodira */ @media (hover: none) { .prekidac-tema:hover { transform: none; background-color: rgba(255, 253, 251, 0.16); } .prekidac-jezik:hover { background-color: rgba(255, 253, 251, 0.16); } .sticky .prekidac-tema:hover, .nav-open .prekidac-tema:hover, .sticky .prekidac-jezik:hover, .nav-open .prekidac-jezik:hover { background-color: var(--boja-mint-svetli); } }