/** * SVIJETLA TEMA — preview sloj * ============================================================================= * Aktivira se samo na ?tema=svijetlo (vidi ks26_light_preview_active() u * functions.php). Tamna tema ostaje netaknuta — ovaj fajl se tada ni ne učita. * * KAKO RADI * style.css je gotovo potpuno tokenizovan (652 poziva var(), samo 22 hex boje), * pa se svijetla tema dobija redefinisanjem tokena — ne prepisivanjem stilova. * * Trik je u tome što --navy i --cream u tamnoj temi već imaju obrnute uloge: * --navy = podloga stranice, ALI i tekst na svijetlim akcentima * --cream = glavni tekst, ALI i podloga akcentnih blokova (newsletter, chipovi) * Zamjenom te dvije boje obje uloge ostaju ispravne. * * ŽUTO-ZELENA (--acid #D4FF3A) OSTAJE NEPROMIJENJENA. * To ima jednu tvrdu posljedicu: na bijeloj podlozi ima kontrast 1,2:1, pa kao * BOJA TEKSTA je nevidljiva — nijedna vrijednost je ne može učiniti čitljivom * bez zatamnjivanja. U style.css se acid koristi na dva načina, pa se i ovdje * tretira na dva načina: * * 1) kao ISPUNA ili OBRUB (30 mjesta) → ostaje #D4FF3A, netaknuta. * Mijenja se samo tekst NA njoj: bio je --navy, koji je sad bijel, pa * postaje tamni. Ishod je identičan tamnoj temi: žuto-zelena ploča, * tamna slova. * * 2) kao BOJA TEKSTA (~45 mjesta: linkovi, hover stanja, labele) → tekst * postaje tamni, a žuto-zelena ostaje uz njega kao podvlaka ili marker. * Boja je time vidljiva na svim tim mjestima, samo nosi akcent umjesto * slova. * * PALETA je hladna: bijelo + bijelo-sivo, bez beža. * Kontrasti: tekst 16,8:1 lavanda 8,0:1 roze 5,7:1 tamno na acidu 15,1:1 */ /* ========================================================= TOKENI :root uz body je zbog — on je iznad , pa bez ovoga ostaje tamna podloga pri overscrollu i na kratkim stranicama. ========================================================= */ .tema-svijetlo { --navy: #FFFFFF; /* bila podloga → ostaje podloga, sad bijela */ --navy-deep: #F1F4F8; /* hladno bijelo-sivo: utonuli blokovi i hover */ --cream: #10142A; /* bio glavni tekst → ostaje tekst, sad tamni */ --lavender: #8CA0F0; /* NEPROMIJENJENA */ --acid: #D4FF3A; /* NEPROMIJENJENA */ --rose: #D11F45; /* iz #FF5C7A */ --line: rgba(16, 20, 42, 0.13); /* Pomoćne — ne koriste se u style.css */ --na-acidu: #10142A; /* tekst na žuto-zelenoj ispuni */ --na-slici: #FFFFFF; /* tekst preko slike / tamnog gradijenta */ --rose-živi: #FF5C7A; /* originalni roze — za tamne blokove */ --lavanda-sitno: #5566CE; /* ista nijansa, zasićenija — za sitni tekst */ --ljubicasta: #4A57C0; /* slova na acid ispuni u filterima kalendara: 5,3:1 na acidu i 6,1:1 na bijelom — lavanda (2,2:1) ni --lavanda-sitno (4,4:1) ne prolaze */ } /* ========================================================= ZRNATOST `overlay` na svijetloj podlozi sivi cijelu stranicu. `multiply` daje teksturu, ali na bijelom mora biti jedva prisutan da ostane čisto. ========================================================= */ .tema-svijetlo body::before { mix-blend-mode: multiply; opacity: 0.022; } /* ========================================================= ŽUTO-ZELENA (1) — KAO ISPUNA Boja ostaje. Tekst na njoj je bio --navy (sad bijel) → tamni. ========================================================= */ .tema-svijetlo .hero-text h1 .accent, .tema-svijetlo .cal-hero h1 .accent, .tema-svijetlo .mag-hero h1 .accent, .tema-svijetlo .cta-btn:hover, .tema-svijetlo .hero-cta.ghost:hover, .tema-svijetlo .view-tab.active, .tema-svijetlo .icon-btn.open, .tema-svijetlo .filter-btn.open, .tema-svijetlo .filter-btn.has-active.open, .tema-svijetlo .filter-btn.is-view.open, .tema-svijetlo .dropdown-item.active, .tema-svijetlo .range-nav .nav-btn:hover, .tema-svijetlo .day-block.today .day-header h2 .day-num, .tema-svijetlo .week-col.today .wh-day, .tema-svijetlo .week-col.today .wh-count, .tema-svijetlo .month-cell.today .m-num, .tema-svijetlo .ew-cta-big:hover, .tema-svijetlo .issue-card.current, .tema-svijetlo .ss-copy:hover, .tema-svijetlo .se-btn.primary, .tema-svijetlo .pagination .page-numbers.current, .tema-svijetlo .ks-submit, .tema-svijetlo .modal-event-card .category-tag, .tema-svijetlo .modal-share-button.is-copied::after, .tema-svijetlo .ks-action-menu a:hover, .tema-svijetlo .modal-btn, .tema-svijetlo .fld input[type="file"]::file-selector-button:hover { color: var(--na-acidu); } /* ========================================================= ŽUTO-ZELENA (2a) — HOVER AKCENTI Bili su acid tekst. Tekst postaje tamni, boja ostaje kao podvlaka. ========================================================= */ .tema-svijetlo .main-nav a:hover, .tema-svijetlo .main-nav .submenu a:hover, .tema-svijetlo .event-mini:hover h3, .tema-svijetlo .focus-grid .article:hover h3, .tema-svijetlo .city:hover .city-name, .tema-svijetlo .event-card:hover h3, .tema-svijetlo .timeline-row:hover h3, .tema-svijetlo .week-head:hover .wh-day, .tema-svijetlo .week-ev:hover .we-n, .tema-svijetlo .m-ev:hover .me-n, .tema-svijetlo .mag-hero .hero-text:hover h1, .tema-svijetlo .mag-grid .article:hover .a-title, .tema-svijetlo .issue-card:hover, .tema-svijetlo .view-tab:hover, .tema-svijetlo .icon-btn:hover, .tema-svijetlo .filter-btn:hover { color: var(--cream); text-decoration: underline; text-decoration-color: var(--acid); text-decoration-thickness: 3px; text-underline-offset: 3px; } /* Ikone (SVG stroke = currentColor) — podvlaka na ikoni nema smisla */ .tema-svijetlo .hdr-search button:hover, .tema-svijetlo .hdr-search:focus-within button, .tema-svijetlo .nav-toggle:hover { color: var(--cream); text-decoration: none; } .tema-svijetlo .nav-toggle:hover { border-color: var(--cream); } /* ========================================================= ŽUTO-ZELENA (2b) — LINKOVI Većina ih je već imala acid podvlaku; tekst se stišava, podvlaka pojačava. ========================================================= */ .tema-svijetlo .sec-h .sec-meta a, .tema-svijetlo .feature-essay .fe-byline a, .tema-svijetlo .mag-hero .byline-row .read-cta, .tema-svijetlo .sec-header .right-meta a, .tema-svijetlo .mag-grid .a-meta .read, .tema-svijetlo .ew-cta-big, .tema-svijetlo .event-card .ev-link, .tema-svijetlo .co-text a, .tema-svijetlo .se-content a, .tema-svijetlo .se-row .v a, .tema-svijetlo #ez-toc-container .ez-toc-link:hover, .tema-svijetlo #ez-toc-container .ez-toc-link.active { color: var(--cream); border-bottom-color: var(--acid); border-bottom-width: 2px; } /* ========================================================= ŽUTO-ZELENA (2c) — MARKER Gdje je acid nosio naglašenu riječ ili sitnu oznaku, postaje highlight: žuto-zelena podloga, tamna slova. Ista logika kao hero akcent. ========================================================= */ .tema-svijetlo .feature-essay h2 b, .tema-svijetlo .mag-hero .hero-img-tag, .tema-svijetlo .mag-grid .a-cat.live, .tema-svijetlo .timeline-row .t-meta b, .tema-svijetlo .ss-done, .tema-svijetlo .event-card .ev-cat.cat-sport, .tema-svijetlo .event-card .ev-cat.cat-izlozba, .tema-svijetlo .event-card.event-card--row .ev-c.cat-sport, .tema-svijetlo .event-card.event-card--row .ev-c.cat-izlozba, .tema-svijetlo .sae-cat.cat-sport, .tema-svijetlo .sae-cat.cat-izlozba { background: var(--acid); color: var(--na-acidu); padding: 0 6px; } /* Preostale acid labele bez podloge — samo tamni tekst */ .tema-svijetlo .editor-note .signature, .tema-svijetlo .se-side h3, .tema-svijetlo .site-footer h5 { color: var(--cream); } /* Footer labele zadržavaju boju kao tanka linija ispod */ .tema-svijetlo .site-footer h5 { border-bottom: 2px solid var(--acid); padding-bottom: 6px; display: inline-block; } /* ========================================================= ŽUTO-ZELENA (3) — nije više potrebno gasiti lavandu (blok ostavljen prazan namjerno; vidi LAVANDA ispod) ========================================================= */ /* ========================================================= LAVANDA --lavender ostaje originalna #8CA0F0 iz tamne teme, pa svi kurzivni akcenti u naslovima ("sutra", "idemo?", "vikend"), podloge, obrubi i dekor izgledaju isto kao tamo. Dvije posljedice se moraju pokriti: ========================================================= */ /* (a) Kao PODLOGA: tekst na njoj je bio --navy, koji je sad bijel → bijelo na svijetloj lavandi je 1,6:1. Tekst postaje tamni. */ .tema-svijetlo .hero-cta.primary, .tema-svijetlo .article.sponsored::after, .tema-svijetlo .event-card.sponsored .ev-sponsor-tag, .tema-svijetlo .weekend-day .wd-date .num, .tema-svijetlo .events-widget, .tema-svijetlo .ss-email:hover, .tema-svijetlo .fld input[type="file"]::file-selector-button, .tema-svijetlo .bottom-marquee, .tema-svijetlo .bottom-marquee-track .star { color: var(--na-acidu); } /* (b) Kao SITNI TEKST (≤16px, ~50 mjesta: meta linije, lokacije, brojači, labele): #8CA0F0 na bijelom je 2,4:1 i sitna slova se gube. Ista nijansa, zasićenija — 4,8:1. Veliki kurzivi i naslovi ostaju originalni. */ .tema-svijetlo .sec-h .sec-meta, .tema-svijetlo .event-mini .em-cat, .tema-svijetlo .event-mini .em-venue, .tema-svijetlo .feature-essay .fe-byline, .tema-svijetlo .focus-grid .article .a-meta, .tema-svijetlo .weekend-day .wd-count, .tema-svijetlo .weekend-day .wd-event .we-venue, .tema-svijetlo .weekend-day .wd-empty, .tema-svijetlo .city-stat, .tema-svijetlo .cal-hero .stats, .tema-svijetlo .filter-reset, .tema-svijetlo .day-meta, .tema-svijetlo .event-card .ev-cat, .tema-svijetlo .event-card .ev-venue, .tema-svijetlo .timeline-row .t-venue, .tema-svijetlo .wh-date, .tema-svijetlo .wh-count, .tema-svijetlo .we-t, .tema-svijetlo .we-c, .tema-svijetlo .week-empty, .tema-svijetlo .month-day-name, .tema-svijetlo .me-t, .tema-svijetlo .month-legend, .tema-svijetlo .mag-hero .byline-row, .tema-svijetlo .editor-note .signature small, .tema-svijetlo .sec-header .right-meta, .tema-svijetlo .mag-grid .a-dek, .tema-svijetlo .mag-grid .a-meta, .tema-svijetlo .issue-card, .tema-svijetlo .arh-count, .tema-svijetlo .arh-close, .tema-svijetlo .arh-loading, .tema-svijetlo .sae-meta, .tema-svijetlo #ez-toc-container .ez-toc-list a, .tema-svijetlo #ez-toc-container .ez-toc-link, .tema-svijetlo .ss-label, .tema-svijetlo .se-row .k, .tema-svijetlo .single-article .sa-byline, .tema-svijetlo .archive-hero .a-sub, .tema-svijetlo .cm-row .k, .tema-svijetlo .fld label, .tema-svijetlo .fld small, .tema-svijetlo .footer-brand p, .tema-svijetlo .site-footer .footer-bottom, .tema-svijetlo .site-footer-m .footer-bottom, .tema-svijetlo .ctl-label, .tema-svijetlo .ks-modal-loading, .tema-svijetlo .modal-event-meta strong, .tema-svijetlo .event-disclaimer, .tema-svijetlo .imp-label, .tema-svijetlo .hdr-search input::placeholder, .tema-svijetlo .hdr-search button, .tema-svijetlo .fld input::placeholder, .tema-svijetlo .fld textarea::placeholder, .tema-svijetlo .ticker, .tema-svijetlo .event-card .ev-cat.cat-muzika, .tema-svijetlo .event-card .ev-cat.cat-ostalo, .tema-svijetlo .event-card.event-card--row .ev-c.cat-muzika, .tema-svijetlo .event-card.event-card--row .ev-c.cat-ostalo, .tema-svijetlo .sae-cat.cat-muzika { color: var(--lavanda-sitno); } /* Linkovi u uvodnom pasusu heroja: 20px jeste "veliki tekst", ali originalna lavanda ima 2,4:1 na bijelom — ispod praga i za veliki tekst (3:1). */ .tema-svijetlo .hero-text .lede a { color: var(--lavanda-sitno); } /* Hover na lavanda dugmetu: podloga postaje prozirna, pa lavanda ostaje kao tekst — na bijelom treba zasićenija */ .tema-svijetlo .hero-cta.primary:hover { color: var(--lavanda-sitno); border-color: var(--lavanda-sitno); } /* ========================================================= LOGOTIP Prebacivanje verzija (tema-logo--tamna / --svijetla) i njihove dimenzije su u style.css, uz ostale stilove logotipa — ovdje ostaje samo mobilna korekcija širine, jer mobilni raspored živi u style.css @media bloku. ========================================================= */ @media (max-width: 700px) { /* Bijeli logo je na mobitelu height:26px → slova ~12px, širina ~131px. Tamna verzija na 131px daje istu visinu slova. */ .tema-svijetlo .logo-wordmark.tema-logo--svijetla { width: 131px; } .tema-svijetlo .site-footer-m .footer-wordmark-img.tema-logo--svijetla { width: 152px; } } /* APP IT logo je tamni tekst na prozirnom — invert je bio zbog navy podloge */ .tema-svijetlo .appit-logo, .tema-svijetlo .appit-banner:hover .appit-logo { filter: none; } /* ========================================================= TEKST PREKO SLIKE Hero poster ima tamni gradijent preko fotografije. Gradijent OSTAJE taman (čitljivost), pa tekst na njemu ostaje svijetao — suprotno od stranice. Tu je i žuto-zelena čitljiva, pa ostaje boja teksta. ========================================================= */ .tema-svijetlo .hero-poster .pp-title { color: var(--na-slici); } .tema-svijetlo .hero-poster .pp-meta { color: rgba(255, 255, 255, 0.85); } .tema-svijetlo .hero-poster .pp-cat { color: var(--acid); } /* ========================================================= ROZE PODLOGA + SVIJETLI TEKST Ova mjesta imaju cream tekst na roze podlozi. Roze je potamnjena, a cream je sad tamni tekst — pa bi bilo tamno na tamnom. (Lavanda podloge su pokrivene gore, u LAVANDA (a) — tamo tekst ide u tamno, jer je lavanda ostala svijetla.) ========================================================= */ .tema-svijetlo .hero-poster .pp-tag, .tema-svijetlo .event-card .ev-tag, .tema-svijetlo .back-mag h3 b, .tema-svijetlo .modal-btn:hover { color: var(--na-slici); } /* ========================================================= PROZIRNE PODLOGE Hardkodirane rgba(140,160,240,…) su prozirna lavanda za tamnu podlogu — na bijelom su nevidljive. Zamjena je hladno bijelo-sivo. ========================================================= */ .tema-svijetlo .event-mini, .tema-svijetlo .hdr-search { background: rgba(16, 20, 42, 0.03); } .tema-svijetlo .hdr-search:focus-within { background: rgba(212, 255, 58, 0.22); border-color: var(--acid); } .tema-svijetlo .article.sponsored { background: rgba(16, 20, 42, 0.04) !important; } /* Sjene su računale na tamnu podlogu — na bijelom su prljave mrlje */ .tema-svijetlo .main-nav .submenu { box-shadow: 0 14px 34px rgba(16, 20, 42, 0.12); } .tema-svijetlo .ks-modal-dialog { box-shadow: 0 30px 80px rgba(16, 20, 42, 0.25); } .tema-svijetlo .ks-action-menu { box-shadow: 0 12px 40px rgba(16, 20, 42, 0.2); } .tema-svijetlo .ks-modal-backdrop { background: rgba(16, 20, 42, 0.5); } /* ========================================================= NEWSLETTER Blok je imao cream podlogu → sad je tamni, i to je namjerno: na bijeloj stranici radi kao kontrapunkt. Roze i statusne boje unutra su sad na tamnom, pa se vraćaju na svjetlije varijante. ========================================================= */ .tema-svijetlo .newsletter .nl-text h2 em, .tema-svijetlo .newsletter .nl-stats b { color: var(--rose-živi); } .tema-svijetlo .newsletter button:hover { background: var(--rose-živi); color: #10142A; } .tema-svijetlo .newsletter input:focus { border-color: var(--rose-živi); } .tema-svijetlo .newsletter .nl-msg.ok { color: #7CD992; } .tema-svijetlo .newsletter .nl-msg.err { color: #FF8A8A; } /* ========================================================= KALENDAR — FILTERI: ZELENI OBRUB, LJUBIČASTA SLOVA Na filterima kalendara acid nosi STANJE (aktivan filter, otvoren dropdown, izabrani prikaz), a ne ukras. Kao BOJA SLOVA je na bijelom nevidljiv (1,2:1), pa se stanje gubi — zato ovdje acid ostaje samo kao obrub i ispuna, a slova preuzima ljubičasta (--ljubicasta). Ostatak sajta je nepromijenjen. Mora doći POSLIJE sekcija "ŽUTO-ZELENA (1)/(2a)" — one ovim elementima zadaju tamni tekst, što bi pregazilo ljubičastu. ========================================================= */ /* Mirno stanje: aktivan filter i dugme "Prikaz" — acid obrub, ljubičasta slova */ .tema-svijetlo .controls-bar .filter-btn.is-view, .tema-svijetlo .controls-bar .filter-btn.has-active { border-color: var(--acid); color: var(--ljubicasta); background: rgba(212, 255, 58, 0.18); } /* Hover: obrub ostaje acid, slova ljubičasta (generičko pravilo iznad ih pretvara u tamna i dodaje acid podvlaku — podvlaka ostaje) */ .tema-svijetlo .controls-bar .filter-btn:hover { border-color: var(--acid); color: var(--ljubicasta); } /* Puno stanje: acid ploča, ljubičasta slova */ .tema-svijetlo .controls-bar .filter-btn.open, .tema-svijetlo .controls-bar .filter-btn.has-active.open, .tema-svijetlo .controls-bar .filter-btn.is-view.open, .tema-svijetlo .controls-bar .dropdown-item.active, .tema-svijetlo .view-tab.active, .tema-svijetlo .range-nav .nav-btn:hover { background: var(--acid); border-color: var(--acid); color: var(--ljubicasta); } /* ========================================================= SITNICE ========================================================= */ /* Ticker: žuto-zelena linija na bijelom traži malo više debljine da se vidi */ .tema-svijetlo .ticker { border-top-width: 3px; border-bottom-width: 3px; } /* Ikonice u podnožju modala (podijeli / kalendar / izvor) na hover dobijaju acid boju — na bijelom nevidljivu. Ikona potamni, acid ostaje na obrubu. */ .tema-svijetlo .modal-action-button:hover { color: var(--cream); } /* Fallback ispod slika je bio tamni #1a1a3a — crna kutija dok se slika učitava */ .tema-svijetlo .event-mini .em-img { background-color: var(--navy-deep); } /* Marquee: lavanda podloga je tamna, a donji obrub je bio navy (sad bijel) */ .tema-svijetlo .bottom-marquee { border-bottom-color: var(--lavender); } /* "Po gradu": mreža se dobija tako što blok ima podlogu --line, a 1px gap je propušta između ćelija. Na tamnoj podlozi je prozirna lavanda neupadljiva, na svijetloj ispadne siva ploča oko sekcije (padding je 64px). */ .tema-svijetlo .cities { background: var(--navy-deep); border-color: rgba(16, 20, 42, 0.09); } /* Prekidač teme u headeru: u svijetloj temi lavanda obrub je preblijed */ .tema-svijetlo .tema-toggle { border-color: rgba(16, 20, 42, 0.2); } .tema-svijetlo .tema-toggle:hover { border-color: var(--cream); color: var(--cream); } /* ========================================================= SFF KALENDAR --sff (#FF3B4E) je na bijelom 3,4:1 — prolazi kao ispuna i obrub, ali ne kao boja teksta. Zato ista logika kao kod --rose: potamnjena varijanta za slova, originalna za ispune na kojima stoji bijeli tekst. ========================================================= */ .tema-svijetlo { --sff: #C81E32; /* iz #FF3B4E — 6,4:1 na bijelom */ --sff-zivi: #FF3B4E; /* originalna — za ispune */ } /* Hero ploča: crvena ostaje živa, tekst na njoj bijel (--cream je ovdje taman) */ .tema-svijetlo .cal-hero-sff h1 .accent-sff { background: var(--sff-zivi); color: var(--na-slici); } /* Aktivan filter po kinu — obrub crven, slova tamna da se čitaju na bijelom */ .tema-svijetlo .controls-bar-sff .filter-btn.has-active { border-color: var(--sff); background: rgba(200, 30, 50, 0.08); color: var(--sff); } .tema-svijetlo .controls-bar-sff .filter-btn.has-active:hover { border-color: var(--sff); color: var(--sff); } /* Otvoreno stanje ostaje acid kao kod svih filtera — boja interakcije. */ .tema-svijetlo .controls-bar-sff .filter-btn.has-active.open { background: var(--acid); border-color: var(--acid); color: var(--ljubicasta); } /* ========================================================= ČLANAK — DESNA TRAKA (desktop) Sitni tekst u traci je u tamnoj temi lavanda, a lavanda na bijelom daje 2,4:1 — pa ide zasićenija --lavanda-sitno. "Cijeli magazin →" je acid, koji kao boja slova na bijelom pada (1,2:1): tekst potamni, a acid ostaje kao podvlaka — ista podjela kao kod ostalih linkova u ovoj temi. ========================================================= */ .tema-svijetlo .rail-meta, .tema-svijetlo .rail-ev-date .mj { color: var(--lavanda-sitno); } .tema-svijetlo .rail-more { color: var(--cream); border-bottom-color: var(--acid); border-bottom-width: 2px; } .tema-svijetlo .rail-more:hover { color: var(--lavanda-sitno); border-bottom-color: var(--lavanda-sitno); }