/* STUDENAC — tamna tema Učitava se POSLE svih ostalih fajlova (general, style, staklo, queries) i ništa u njima ne dira. Uključuje se atributom na : data-tema="tamna", koji postavlja kratka skripta u pre nego što se strana nacrta — inače bi bljesnula svetla verzija. Zašto je ovaj fajl duži nego kod Savskog izloga: tamo su boje od početka bile u :root varijablama, pa je tamna tema samo njihova zamena. Studenac je stariji projekat i dobar deo boja stoji direktno u komponentama, pa se one ovde nabrajaju jednu po jednu. Kad se sistem radi za nov objekat, ide se putem Savskog izloga. Ton: noć u borovoj šumi. Zelena ostaje ista boja, samo svetlija da bi se čitala na tamnoj podlozi. */ /************************************/ /* VARIJABLE */ /************************************/ [data-tema="tamna"] { color-scheme: dark; --zelena: #109a70; --zelena-tamna: #17b283; /* ovo je boja NASLOVA, pa u tamnoj temi mora da bude svetla */ --zelena-vrlo-tamna: #cfe9de; --zelena-blaga: #16211c; --zelena-blaga-2: #1c2f28; --vazno: #f0917a; --vazno-podloga: rgba(240, 145, 122, 0.13); --staklo-povrsina: rgba(31, 41, 36, 0.62); --staklo-povrsina-jaka: rgba(31, 41, 36, 0.82); --staklo-ivica: rgba(163, 205, 188, 0.14); --staklo-ivica-donja: rgba(163, 205, 188, 0.12); --staklo-senka: 0 0.8rem 3.2rem rgba(0, 0, 0, 0.45); --staklo-senka-jaka: 0 1.6rem 4.8rem rgba(0, 0, 0, 0.62); /* sopstvene boje tamne teme */ --t-pozadina: #0f1512; --t-povrsina: #18201c; --t-povrsina-2: #1e2723; --t-ivica: #2a3631; --t-tekst: #c9d2cd; --t-naslov: #e9efec; --t-tiho: #8d9a94; --t-vrlo-tiho: #6c7873; } /************************************/ /* OSNOVA */ /************************************/ [data-tema="tamna"] body { color: var(--t-tekst); background-color: var(--t-pozadina); } [data-tema="tamna"] .heading-primary, [data-tema="tamna"] .heading-secondary, [data-tema="tamna"] .heading-tertiary, [data-tema="tamna"] .heading-tertiery { color: var(--t-naslov); } [data-tema="tamna"] .subheading { color: var(--zelena-tamna); } [data-tema="tamna"] .link:link, [data-tema="tamna"] .link:visited { color: var(--zelena-tamna); } [data-tema="tamna"] .btn--outline, [data-tema="tamna"] .btn--outline:link, [data-tema="tamna"] .btn--outline:visited { background-color: rgba(31, 41, 36, 0.8); color: var(--t-naslov); box-shadow: inset 0 0 0 1.5px rgba(16, 154, 112, 0.4); } [data-tema="tamna"] .btn--outline:hover { background-color: var(--t-povrsina-2); box-shadow: inset 0 0 0 1.5px var(--zelena-tamna); } /************************************/ /* ZAGLAVLJE I NAVIGACIJA */ /************************************/ [data-tema="tamna"] .header { background-color: var(--zelena-blaga); } [data-tema="tamna"].sticky .header, [data-tema="tamna"] .sticky .header { background-color: rgba(15, 21, 18, 0.78) !important; } [data-tema="tamna"] .navigation-main-link:link, [data-tema="tamna"] .navigation-main-link:visited { color: var(--t-tekst); } [data-tema="tamna"] .navigation-main-link:hover, [data-tema="tamna"] .navigation-main-link:active { color: var(--zelena-tamna); background-color: rgba(163, 205, 188, 0.1); } /* na dodirnim ekranima hover ostaje zalepljen, pa bi jedna stavka menija zauvek nosila okvir — vraća se na providno */ @media (hover: none) { [data-tema="tamna"] .navigation-main-link:hover, [data-tema="tamna"] .navigation-main-link:active { color: var(--t-tekst); background-color: transparent; } } /* Logotip je pun crn otisak na providnoj pozadini — na tamnoj strani bi se izgubio. Pretvara se u beli otisak istog oblika. */ [data-tema="tamna"] .logo { filter: brightness(0) invert(1); opacity: 0.92; } [data-tema="tamna"] .navigation-main-link.nav-btn-cta:link, [data-tema="tamna"] .navigation-main-link.nav-btn-cta:visited { color: #fff; } [data-tema="tamna"] .icon-mob-nav { color: var(--t-naslov); } /* Mobilni meni preko cele strane. MORA da bude unutar media upita: `.navigation-main` dobija pozadinu tek ispod 62.5em, a na desktopu je to obična traka bez podloge. Bez ovog upita se na širokom ekranu iscrta tamna „tabla" iza celog menija. */ @media (max-width: 62.5em) { [data-tema="tamna"] .navigation-main { background-color: rgba(15, 21, 18, 0.97); } [data-tema="tamna"] .nav-open .navigation-main, [data-tema="tamna"] .header.nav-open .navigation-main { background-color: rgba(15, 21, 18, 0.9) !important; } } /************************************/ /* HERO */ /************************************/ [data-tema="tamna"] .section-hero { background-color: var(--zelena-blaga); } [data-tema="tamna"] .zadovoljni-gosti-imgs img { border-color: var(--zelena-blaga); } [data-tema="tamna"] .zadovoljni-gosti-text span { color: var(--zelena-tamna); } /* fotografije se blago prigušuju da ne „gore" na tamnoj strani */ [data-tema="tamna"] .hero-img, [data-tema="tamna"] .proizvod-img, [data-tema="tamna"] .galerija-img, [data-tema="tamna"] .uputstvo-img { filter: brightness(0.9) saturate(0.95); } /* u lightboxu se gleda sama fotografija — tu ništa ne prigušujemo */ [data-tema="tamna"] .lightbox-img { filter: none; } /************************************/ /* LOGOTIPI PARTNERA */ /************************************/ [data-tema="tamna"] .heading-featured { color: var(--t-vrlo-tiho); } /* brightness(0) ih pravi crnim — na tamnoj podlozi moraju da budu beli */ [data-tema="tamna"] .featured-logo-img { filter: brightness(0) invert(1); opacity: 0.45; } /************************************/ /* UPUTSTVO */ /************************************/ [data-tema="tamna"] .uputstvo-img-box::before { background-color: #16211c; } [data-tema="tamna"] .uputstvo-img-box::after { background-color: #1d2c26; } [data-tema="tamna"] .uputstvo-number { color: #2f3a35; } /************************************/ /* PROIZVODI */ /************************************/ [data-tema="tamna"] .proizvod-kartica { background-color: var(--t-povrsina); box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(163, 205, 188, 0.08); } [data-tema="tamna"] .proizvod-naziv, [data-tema="tamna"] .proizvod-cena { color: var(--t-naslov); } [data-tema="tamna"] .icon-proizvodi { color: var(--zelena-tamna); } /************************************/ /* GALERIJE I UTISCI */ /************************************/ [data-tema="tamna"] .section-galerija { background-color: var(--t-povrsina); } [data-tema="tamna"] .section-galerija-kuca { background-color: var(--zelena-blaga); border-bottom-color: var(--t-ivica); } [data-tema="tamna"] .testimonial-gost { color: var(--t-tiho); } /************************************/ /* CENOVNIK */ /************************************/ [data-tema="tamna"] .cenovnik-classic { border-color: #223029; background-color: var(--t-povrsina); } [data-tema="tamna"] .cenovnik-best { background-color: #17251f; } [data-tema="tamna"] .plan-naziv { color: var(--zelena-tamna); } [data-tema="tamna"] .plan-cena { color: var(--t-naslov); } [data-tema="tamna"] .plan-text { color: var(--t-tiho); } [data-tema="tamna"] .specifikacije-icon { background-color: #1c2b25; color: var(--zelena-tamna); } [data-tema="tamna"] .specifikacije-naslov { color: var(--t-naslov); } /************************************/ /* SEKCIJA REZERVACIJE */ /************************************/ [data-tema="tamna"] .section-rezervacija { background: linear-gradient(180deg, var(--t-pozadina) 0%, #14201b 100%); } [data-tema="tamna"] .rez-uvod, [data-tema="tamna"] .kal-legenda, [data-tema="tamna"] .rez-uspeh-tekst { color: var(--t-tekst); } /* odsjaj po gornjoj ivici stakla mora da bude jedva vidljiv */ [data-tema="tamna"] .staklo::before { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ); } [data-tema="tamna"] .staklo--racun { background-color: rgba(23, 37, 31, 0.72); border-color: rgba(163, 205, 188, 0.16); } [data-tema="tamna"] .kal-strelica { color: var(--zelena-tamna); background-color: rgba(31, 41, 36, 0.8); } [data-tema="tamna"] .kal-strelica:hover:not(:disabled) { background-color: var(--t-povrsina-2); } [data-tema="tamna"] .kal-ucitavanje, [data-tema="tamna"] .kal-izbor-tekst, [data-tema="tamna"] .kal-poruka, [data-tema="tamna"] .rez-napomena, [data-tema="tamna"] .rez-sitno, [data-tema="tamna"] .rez-pomoc, [data-tema="tamna"] .rez-stavka-opis em, [data-tema="tamna"] .rez-oznaka em, [data-tema="tamna"] .kal-dani-nedelje span, [data-tema="tamna"] .rez-prekidac label em { color: var(--t-tiho); } [data-tema="tamna"] .kal-izbor { background-color: rgba(31, 41, 36, 0.6); } [data-tema="tamna"] .kal-izbor--gotov { background-color: rgba(28, 47, 40, 0.9); } [data-tema="tamna"] .kal-ponisti { color: var(--zelena-tamna); } /************************************/ /* DANI U KALENDARU */ /************************************/ [data-tema="tamna"] .dan { color: var(--t-tekst); } [data-tema="tamna"] .dan--proslo { color: #3c4742; } [data-tema="tamna"] .dan--slobodan { background-color: rgba(28, 47, 40, 0.9); color: #7fd0ad; } [data-tema="tamna"] .dan--zauzet { background-color: #33211c; color: #d98d76; } [data-tema="tamna"] .dan--slobodan:hover { background-color: var(--zelena); color: #fff; box-shadow: 0 0.6rem 1.6rem rgba(16, 154, 112, 0.35); } [data-tema="tamna"] .dan--zauzet:hover { background-color: #4a2f27; color: #f0b8a6; } /* raspon: neprovidne boje, isto pravilo kao u svetloj temi */ [data-tema="tamna"] .dan--u-rasponu { background-color: #235945; color: #bdeeda; } [data-tema="tamna"] .dan--u-rasponu:hover { background-color: #2c6d55; color: #fff; } [data-tema="tamna"] .dan--izabran, [data-tema="tamna"] .dan--slobodan.dan--izabran { background-color: var(--zelena); color: #fff; } [data-tema="tamna"] .dan--izabran:hover, [data-tema="tamna"] .dan--slobodan.dan--izabran:hover { background-color: var(--zelena-tamna); color: #fff; } [data-tema="tamna"] .dan--izabran.dan--danas { box-shadow: inset 0 0 0 2px #bdeeda, 0 0.4rem 1.2rem rgba(0, 0, 0, 0.4); } /* na dodirnim ekranima hover „zapinje" — dani moraju da vrate i boju teksta, inače ostane tamna cifra na tamnoj podlozi */ @media (hover: none) { [data-tema="tamna"] .dan--slobodan:hover { background-color: rgba(28, 47, 40, 0.9); color: #7fd0ad; box-shadow: none; } [data-tema="tamna"] .dan--zauzet:hover { background-color: #33211c; color: #d98d76; } [data-tema="tamna"] .dan--u-rasponu:hover { background-color: #235945; color: #bdeeda; } [data-tema="tamna"] .dan--izabran:hover, [data-tema="tamna"] .dan--slobodan.dan--izabran:hover { background-color: var(--zelena); color: #fff; } } /************************************/ /* POLJA FORME */ /************************************/ [data-tema="tamna"] .rez-polje input, [data-tema="tamna"] .rez-polje textarea { color: var(--t-naslov); background-color: rgba(15, 21, 18, 0.6); border-color: rgba(163, 205, 188, 0.16); } [data-tema="tamna"] .rez-polje input:focus, [data-tema="tamna"] .rez-polje textarea:focus { background-color: rgba(15, 21, 18, 0.9); border-color: var(--zelena-tamna); box-shadow: 0 0 0 0.4rem rgba(16, 154, 112, 0.22); } [data-tema="tamna"] .rez-polje input::placeholder, [data-tema="tamna"] .rez-polje textarea::placeholder { color: #5d6a64; } [data-tema="tamna"] .rez-prekidac label { background-color: rgba(31, 41, 36, 0.7); } [data-tema="tamna"] .rez-prekidac input:checked + label { border-color: var(--zelena-tamna); background-color: rgba(28, 47, 40, 0.9); } /************************************/ /* RAČUN */ /************************************/ [data-tema="tamna"] .rez-racun-naslov, [data-tema="tamna"] .rez-iznos { color: var(--zelena-tamna); } [data-tema="tamna"] .rez-stavke li { color: var(--t-tekst); border-bottom-color: rgba(163, 205, 188, 0.16); } [data-tema="tamna"] .rez-stavka-iznos { color: var(--t-naslov); } [data-tema="tamna"] .rez-uspeh .rez-vazno { background-color: rgba(240, 145, 122, 0.12); } [data-tema="tamna"] .rez-racun-desno { border-top-color: rgba(163, 205, 188, 0.16); } /************************************/ /* CTA */ /************************************/ [data-tema="tamna"] .cta { background-image: linear-gradient(to right bottom, #14513f, #0a3728); box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.45); } [data-tema="tamna"] .cta-text-box { color: #d9eee5; } [data-tema="tamna"] .cta-form input, [data-tema="tamna"] .cta-form select { color: var(--t-naslov); background-color: rgba(15, 21, 18, 0.7); } [data-tema="tamna"] .cta-form input::placeholder { color: #5d6a64; } [data-tema="tamna"] .btn--form { background-color: #06231a; color: #d9eee5; } [data-tema="tamna"] .btn--form:hover { background-color: #d9eee5; color: #06231a; } /************************************/ /* FOOTER */ /************************************/ [data-tema="tamna"] .footer { border-top-color: var(--t-ivica); } [data-tema="tamna"] .copyright, [data-tema="tamna"] .footer-link:link, [data-tema="tamna"] .footer-link:visited { color: var(--t-tiho); } [data-tema="tamna"] .footer-link:hover, [data-tema="tamna"] .footer-link:active { color: var(--zelena-tamna); } [data-tema="tamna"] .footer-heading { color: var(--t-naslov); } /************************************/ /* MOBILNA TRAKA */ /************************************/ [data-tema="tamna"] .mob-traka { background-color: rgba(15, 21, 18, 0.78); } [data-tema="tamna"] .mob-traka-btn--tiho { color: #7fd0ad; background-color: rgba(28, 47, 40, 0.95); } /************************************/ /* POPUP-I */ /************************************/ [data-tema="tamna"] .popup-overlay { background-color: rgba(0, 0, 0, 0.7); } [data-tema="tamna"] .popup-card { background: var(--t-povrsina-2); box-shadow: 0 2.4rem 6.4rem rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(163, 205, 188, 0.1); } [data-tema="tamna"] .popup-close { color: var(--t-tiho); } [data-tema="tamna"] .popup-close:hover { background-color: #2a3631; color: var(--t-naslov); } /* DOMAĆIN */ [data-tema="tamna"] .popup-domacin-header, [data-tema="tamna"] .jelovnik-kategorija-naslov, [data-tema="tamna"] .jelovnik-napomene-naslov, [data-tema="tamna"] .popup-lokacija-tekst strong { color: var(--zelena-tamna); } [data-tema="tamna"] .popup-domacin-avatar, [data-tema="tamna"] .popup-sifra-ikona, [data-tema="tamna"] .popup-lokacija-ikona { background-color: #1c2b25; color: var(--zelena-tamna); } [data-tema="tamna"] .popup-domacin-avatar { border-color: #2c4238; } [data-tema="tamna"] .popup-domacin-ime, [data-tema="tamna"] .jelovnik-naslov, [data-tema="tamna"] .popup-sifra-naslov, [data-tema="tamna"] .popup-lokacija-naslov { color: var(--t-naslov); } [data-tema="tamna"] .popup-domacin-telefon, [data-tema="tamna"] .jelovnik-podnaslov, [data-tema="tamna"] .popup-sifra-opis, [data-tema="tamna"] .jelovnik-kontakt { color: var(--t-tiho); } /* JELOVNIK */ [data-tema="tamna"] .jelovnik-kategorija-naslov { border-bottom-color: #223029; } [data-tema="tamna"] .jelovnik-stavka, [data-tema="tamna"] .popup-lokacija-tekst { color: var(--t-tekst); } [data-tema="tamna"] .jelovnik-stavka::before, [data-tema="tamna"] .jelovnik-napomene-stavka::before { color: var(--zelena-tamna); } [data-tema="tamna"] .jelovnik-divider { border-top-color: var(--t-ivica); } [data-tema="tamna"] .jelovnik-napomene, [data-tema="tamna"] .popup-lokacija-tekst-box { background-color: #16211c; border-left-color: var(--zelena); } [data-tema="tamna"] .jelovnik-napomene-stavka, [data-tema="tamna"] .jelovnik-kontakt span { color: var(--t-tekst); } [data-tema="tamna"] .popup-jelovnik-card::-webkit-scrollbar-thumb { background-color: #2c4238; } /* ŠIFRA */ [data-tema="tamna"] .popup-sifra-input { color: var(--t-naslov); background-color: rgba(15, 21, 18, 0.7); border-color: #2a3631; } [data-tema="tamna"] .popup-sifra-input:focus { border-color: var(--zelena-tamna); box-shadow: 0 0 0 0.4rem rgba(16, 154, 112, 0.2); } [data-tema="tamna"] .popup-sifra-input::placeholder { color: #5d6a64; } [data-tema="tamna"] .popup-sifra-input.input-error, [data-tema="tamna"] .popup-sifra-greska { border-color: #e8705f; color: #f0917a; } /* LOKACIJA */ [data-tema="tamna"] .popup-maps-link { background-color: var(--zelena); color: #fff; } [data-tema="tamna"] .popup-maps-link:hover { background-color: var(--zelena-tamna); } /************************************/ /* AKO BROWSER NE PODRŽAVA STAKLO */ /************************************/ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-tema="tamna"] .staklo, [data-tema="tamna"] .mob-traka { background-color: rgba(24, 32, 28, 0.97); } [data-tema="tamna"] .sticky .header { background-color: var(--zelena-blaga) !important; } } /************************************/ /* ALATKE ZAGLAVLJA — tema i jezik Nisu deo tamne teme, ali su nove komponente pa stoje uz nju da bi se ceo dodatak prenosio jednim fajlom. Raspored: logotip i prekidači zajedno levo, navigacija ostaje uz desnu ivicu, hamburger na telefonu skroz desno. */ /************************************/ .zaglavlje-levo { display: flex; align-items: center; gap: 2.4rem; /* iznad mobilne navigacije koja prekriva ceo ekran */ z-index: 999; } .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(--zelena); background-color: rgba(255, 255, 255, 0.55); border: 1px solid var(--staklo-ivica); border-radius: 50%; cursor: pointer; transition: background-color 400ms var(--meko), color 400ms var(--meko), transform 500ms var(--opruga); } .prekidac-tema:hover { background-color: #fff; transform: rotate(-12deg); } .prekidac-tema svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* vidi se ona ikona koja nudi drugu temu — mesec dok je svetlo */ .prekidac-tema .i-sunce { display: none; } [data-tema="tamna"] .prekidac-tema { color: #7fd0ad; background-color: rgba(31, 41, 36, 0.8); } [data-tema="tamna"] .prekidac-tema:hover { background-color: var(--t-povrsina-2); } [data-tema="tamna"] .prekidac-tema .i-mesec { display: none; } [data-tema="tamna"] .prekidac-tema .i-sunce { 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(--zelena); background-color: rgba(255, 255, 255, 0.55); border: 1px solid var(--staklo-ivica); border-radius: 10rem; transition: background-color 400ms var(--meko), color 400ms var(--meko); } .prekidac-jezik:hover { background-color: #fff; } [data-tema="tamna"] .prekidac-jezik, [data-tema="tamna"] .prekidac-jezik:link, [data-tema="tamna"] .prekidac-jezik:visited { color: #7fd0ad; background-color: rgba(31, 41, 36, 0.8); } [data-tema="tamna"] .prekidac-jezik:hover { background-color: var(--t-povrsina-2); } @media (max-width: 62.5em) { .zaglavlje-levo { gap: 1.6rem; } .zaglavlje-alatke { gap: 0.6rem; } } /* na malim telefonima logotip i dva prekidača jedva staju u jedan red */ @media (max-width: 34em) { .zaglavlje-levo { gap: 1rem; } .prekidac-tema { width: 4rem; height: 4rem; } .prekidac-tema svg { width: 1.8rem; height: 1.8rem; } .prekidac-jezik, .prekidac-jezik:link, .prekidac-jezik:visited { height: 4rem; padding: 0 1.1rem; font-size: 1.3rem; } } @media (hover: none) { .prekidac-tema:hover { transform: none; background-color: rgba(255, 255, 255, 0.55); } .prekidac-jezik:hover { background-color: rgba(255, 255, 255, 0.55); } [data-tema="tamna"] .prekidac-tema:hover, [data-tema="tamna"] .prekidac-jezik:hover { background-color: rgba(31, 41, 36, 0.8); } }