/* Theme Name: Kamo Sutra Redesign 26 Theme URI: https://kamosutra.ba Description: Redizajn teme za Kamo Sutra — magazin i kalendar kulturnih događaja u BiH. Editorial/brutalist stil. Radi s postojećim ACF poljima (event_date, event_city, event_location, event_price, event_url, event_featured) i default `post` tipom. Version: 1.0 Author: APP IT Text Domain: kamosutra-redesign26 */ /* ========================================================= TOKENI ========================================================= */ :root { --navy: #0D0D2B; --navy-deep: #07071A; --lavender: #8CA0F0; --acid: #D4FF3A; --cream: #F5F0E1; --rose: #FF5C7A; --line: rgba(140, 160, 240, 0.18); --wrap: 1440px; --pad: 32px; --pad-m: 20px; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { background: var(--navy); color: var(--cream); font-family: 'Archivo', sans-serif; /* `overflow-x: hidden` pretvara u scroll kontejner, pa position:sticky unutar njega nikad ne "uhvati" vrh — sticky header zbog toga nije radio. `clip` reže isto prekoračenje po X, ali NE pravi scroll kontejner. `hidden` ostaje kao fallback za stare browsere koji ne znaju za `clip`. */ overflow-x: hidden; overflow-x: clip; } /* Da sidra (#arhiva, #newsletter) i scrollIntoView ne završe ispod sticky vrha */ html { scroll-padding-top: 120px; } @media (max-width: 700px) { html { scroll-padding-top: 115px; } } /* Filmska zrnatost preko cijele stranice */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: 0.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' /%3E%3C/svg%3E"); } img { max-width: 100%; height: auto; } /* Glavne sekcije centrirane na max 1440px. Ticker i marquee ostaju full-width (potrebno za scroll efekt). */ .site-header, .hero, .tonight, .recommended, .feature-essay, .focus-grid, .ad-slot, .weekend-preview, .cities, .by-cat, .newsletter, .cal-hero, .controls-bar, .day-block, .month-wrap, .back-mag, .mag-hero, .editor-note, .mag-grid, .issues-strip, .arhiva-rezultati, .events-widget, .city-outro, .single-wrap, .archive-wrap, .site-footer { max-width: var(--wrap); margin-left: auto; margin-right: auto; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; } /* ========================================================= TICKER ========================================================= */ /* Sticky vrh stranice: ticker + header putuju zajedno. Sticky je na omotaču (ne na svakom ponaosob) da ne moramo hardkodirati visinu tickera kao `top` offset headera. */ .site-top { position: sticky; top: 0; z-index: 60; background: var(--navy); } .ticker { background: var(--navy); color: var(--lavender); padding: 9px 0; overflow: hidden; border-top: 1.5px solid var(--acid); border-bottom: 1.5px solid var(--acid); } .ticker-track { display: inline-flex; gap: 40px; white-space: nowrap; animation: scroll 50s linear infinite; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .ticker-track span { display: inline-flex; align-items: center; gap: 40px; } .ticker-track span::after { content: ''; width: 1.5px; height: 14px; background: var(--acid); flex: 0 0 auto; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ticker-track, .bottom-marquee-track { animation: none; } } /* ========================================================= HEADER ========================================================= */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--pad); border-bottom: 1px solid var(--line); } .logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } .logo-mark { width: 28px; height: 28px; flex-shrink: 0; /* Logo je prozirni PNG — bez podloge, znak sjeda direktno na navy */ object-fit: contain; transition: transform 0.2s; } .logo:hover .logo-mark { transform: rotate(-4deg); } /* Puni logotip u headeru — prozirni PNG, omjer 2199x435 (~5.06:1) */ .logo-wordmark { height: 38px; width: auto; display: block; transition: opacity 0.2s; } .logo:hover .logo-wordmark { opacity: 0.85; } /* Dvije verzije logotipa u DOM-u — prikazuje se ona koja odgovara temi. Prebacuje ih CSS, a ne JS, jer prekidač teme mijenja samo klasu na : zamjena `src` skriptom bi dala bljesak pogrešnog logotipa. Tamna verzija je tijesno kropovana (2200×202) pa joj se zadaje ŠIRINA — osnovna (2199×435) ima prazan okvir oko slova, pa njoj odgovara visina. */ /* `html` prefiks nije ukras — bez njega ova pravila gubi svako kasnije pravilo koje istom slikom postavlja `display` s istom specifičnošću. Tako je i bilo: `.footer-wordmark-img { display: block }` (niže u fajlu) je nadjačalo skrivanje, pa su se u tamnoj temi u podnožju vidjela OBA logotipa jedan do drugog. Prefiks digne specifičnost i redoslijed prestaje biti bitan. */ html .tema-logo--svijetla { display: none; } html.tema-svijetlo .tema-logo--tamna { display: none; } html.tema-svijetlo .tema-logo--svijetla { display: block; } .tema-svijetlo .logo-wordmark.tema-logo--svijetla { height: auto; width: 192px; } .tema-svijetlo .footer-wordmark-img.tema-logo--svijetla { height: auto; width: 243px; } .tema-svijetlo .site-footer-m .footer-wordmark-img.tema-logo--svijetla { width: 192px; } /* .logo-text i .logo-mark ostaju zbog footera i eventualnog vraćanja natpisa */ .logo-text { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 24px; letter-spacing: 0.02em; color: var(--cream); text-transform: uppercase; line-height: 1; } .logo-text em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; text-transform: lowercase; color: var(--lavender); letter-spacing: 0; } .main-nav ul { display: flex; gap: 32px; list-style: none; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .main-nav a { color: var(--cream); text-decoration: none; position: relative; transition: color 0.2s; } .main-nav a:hover { color: var(--acid); } .main-nav li.current-menu-item > a::after, .main-nav a.active::after { content: ''; position: absolute; left: -8px; right: -8px; bottom: -3px; height: 2px; background: var(--acid); z-index: -1; transform: skewX(-12deg); } /* Gradovi — dropdown */ .main-nav .has-submenu { position: relative; } .main-nav .submenu { position: absolute; top: 100%; left: -14px; min-width: 190px; background: var(--navy-deep); border: 1.5px solid var(--line); flex-direction: column; gap: 0; padding: 6px 0; z-index: 60; margin-top: 14px; /* vizuelni razmak bez „dead zone" (bridge ispod) */ display: none; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); } /* Nevidljivi most preko razmaka — drži hover aktivnim do dropdowna */ .main-nav .has-submenu::after { content: ''; position: absolute; top: 100%; left: 0; right: -20px; height: 18px; display: none; } .main-nav .has-submenu:hover::after { display: block; } .main-nav .has-submenu:hover .submenu, .main-nav .has-submenu:focus-within .submenu { display: flex; } .main-nav .submenu li { display: block; } .main-nav .submenu a { display: block; padding: 9px 18px; font-size: 12px; white-space: nowrap; } .main-nav .submenu a:hover { color: var(--acid); } .cta-btn { background: var(--cream); color: var(--navy); padding: 10px 18px; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; border: 2px solid var(--cream); cursor: pointer; transition: all 0.2s; display: inline-block; } .cta-btn:hover { background: var(--acid); border-color: var(--acid); } /* Pretraga u headeru (zamijenila "Pretplati se") */ .hdr-search { display: flex; align-items: center; border: 1.5px solid var(--line); background: rgba(140, 160, 240, 0.06); transition: border-color 0.2s, background 0.2s; } .hdr-search:focus-within { border-color: var(--acid); background: rgba(212, 255, 58, 0.05); } .hdr-search input { width: 150px; padding: 9px 12px 9px 4px; background: transparent; border: 0; outline: none; color: var(--cream); font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; } .hdr-search input::placeholder { color: var(--lavender); opacity: 0.7; } /* Ukloni nativni "x" iz type=search da ne kvari brutalist izgled */ .hdr-search input::-webkit-search-cancel-button { -webkit-appearance: none; } .hdr-search button { order: -1; /* ikona lijevo od polja */ background: transparent; border: 0; cursor: pointer; color: var(--lavender); padding: 0 6px 0 10px; display: inline-flex; align-items: center; transition: color 0.2s; } .hdr-search button:hover, .hdr-search:focus-within button { color: var(--acid); } .hdr-search svg { width: 16px; height: 16px; } /* Prekidač tamna/svijetla tema. Prikazuje se ikona onoga ŠTA ĆE SE DOGODITI na klik: u tamnoj temi sunce, u svijetloj mjesec. Prebacuje ih CSS (klasa je na ), pa je ikona ispravna već pri prvom crtanju — bez čekanja na JS. */ .tema-toggle { flex: 0 0 auto; width: 36px; height: 36px; margin-left: 4px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1.5px solid var(--line); color: var(--lavender); cursor: pointer; transition: color 0.2s, border-color 0.2s; } .tema-toggle:hover { color: var(--acid); border-color: var(--acid); } .tema-toggle svg { width: 17px; height: 17px; display: block; } .tema-toggle .ikona-mjesec { display: none; } .tema-svijetlo .tema-toggle .ikona-sunce { display: none; } .tema-svijetlo .tema-toggle .ikona-mjesec { display: block; } /* Strelica za gradove — samo mobilni; na desktopu podmeni otvara hover */ .submenu-toggle { display: none; } /* Mobilni meni */ .nav-toggle { display: none; background: transparent; border: 1.5px solid var(--lavender); color: var(--cream); width: 42px; height: 42px; cursor: pointer; align-items: center; justify-content: center; } .nav-toggle:hover { border-color: var(--acid); color: var(--acid); } .nav-toggle svg { width: 20px; height: 20px; } /* ========================================================= SEKCIJSKI NASLOVI ========================================================= */ .sec-h { padding: 64px var(--pad) 24px; display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; max-width: var(--wrap); margin: 0 auto; } .sec-h h2 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(40px, 6vw, 80px); line-height: 0.9; text-transform: none; letter-spacing: -0.02em; } .sec-h h2 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; text-transform: lowercase; color: var(--lavender); } .sec-h .sec-meta { display: flex; align-items: center; gap: 16px; font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--lavender); } .sec-h .sec-meta a { color: var(--acid); text-decoration: none; border-bottom: 1px solid var(--acid); } /* ========================================================= HERO (naslovnica) ========================================================= */ .hero { padding: 80px var(--pad) 64px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center; border-bottom: 1px solid var(--line); } .hero-text .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--rose); text-transform: uppercase; margin-bottom: 24px; } .hero-text .eyebrow::before { content: ''; width: 32px; height: 1.5px; background: var(--rose); } .hero-text h1 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(56px, 9vw, 132px); line-height: 0.98; text-transform: none; letter-spacing: -0.02em; margin-bottom: 32px; } .hero-text h1 .q { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; text-transform: lowercase; color: var(--lavender); letter-spacing: 0; } .hero-text h1 .accent { background: var(--acid); color: var(--navy); padding: 0 14px; display: inline-block; transform: rotate(-2deg); } .hero-text .lede { font-size: 20px; line-height: 1.4; color: var(--cream); font-weight: 700; max-width: 540px; margin-bottom: 32px; } /* ne mijenja ništa — cijeli pasus je već cream i podebljan. Ostavljen je u markupu jer označava smisaoni naglasak, ne izgled. */ .hero-text .lede b { font-weight: inherit; } /* Linkovi se izdvajaju bojom i TANJIM rezom naspram podebljanog okoliša, bez podvlake — ona se pojavljuje tek na hover/fokus. Boja u svijetloj temi ide na --lavanda-sitno (light.css): originalna lavanda ima 2,4:1 na bijelom i ne bi se čitala. Mora doći poslije pravila za , jer je "kalendar" unutar njega, a specifičnost je ista. */ .hero-text .lede a { color: var(--lavender); font-weight: 400; text-decoration: none; transition: color 0.2s; } .hero-text .lede a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .hero-text .lede a:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; } .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; } .hero-cta { padding: 16px 24px; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 18px; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; transition: all 0.2s; display: inline-flex; align-items: center; gap: 10px; } .hero-cta.primary { background: var(--lavender); color: var(--navy); border: 2px solid var(--lavender); } .hero-cta.primary:hover { background: transparent; color: var(--lavender); } .hero-cta.ghost { background: transparent; color: var(--cream); border: 2px solid var(--acid); } /* Obrub je već zelen, pa hover puni dugme umjesto da mijenja boju obruba */ .hero-cta.ghost:hover { background: var(--acid); color: var(--navy); } /* Hero poster (izdvojeni događaj) */ .hero-poster { position: relative; aspect-ratio: 4/5; background-size: cover; background-position: center; background-color: var(--navy-deep); border: 1px solid var(--line); overflow: hidden; text-decoration: none; color: inherit; display: block; } .hero-poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(13,13,43,0.85) 100%); } .hero-poster .pp-tag { position: absolute; top: 20px; left: 20px; background: var(--rose); color: var(--cream); padding: 6px 12px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; z-index: 2; } .hero-poster .pp-date { position: absolute; top: 20px; right: 20px; background: var(--cream); color: var(--navy); padding: 6px 12px; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 18px; z-index: 2; } .hero-poster .pp-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; z-index: 2; } .hero-poster .pp-cat { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--acid); font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 8px; } .hero-poster .pp-title { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 26px; color: var(--cream); text-transform: none; line-height: 1.1; letter-spacing: 0.04em; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .hero-poster .pp-meta { font-family: 'Archivo', sans-serif; font-size: 14px; color: var(--lavender); } /* ========================================================= ŠTA VEČERAS — mini kartice ========================================================= */ /* padding-top, a ne veći razmak na .sec-h: taj naslov dijele sve sekcije naslovnice, pa bi izmjena tamo pomjerila i "U fokusu", "Ovaj vikend"… */ .tonight { padding: 32px var(--pad) 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } /* ---- Preporučeni događaji: iste kartice kao "Gdje idemo", ali se smjenjuju ---- */ .recommended { padding: 0 var(--pad) 64px; } .rec-track { display: grid; grid-auto-flow: column; /* Tri kartice u redu, iste širine kao .tonight */ grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; /* Traka za skrol se ne prikazuje — kretanje ide preko tačkica */ scrollbar-width: none; -ms-overflow-style: none; } .rec-track::-webkit-scrollbar { display: none; } .rec-track > * { scroll-snap-align: start; } .rec-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; } .rec-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .rec-dot:hover { background: var(--ink, #333); } .rec-dot.is-active { background: var(--accent, #333); transform: scale(1.4); } @media (prefers-reduced-motion: reduce) { .rec-track { scroll-behavior: auto; } .rec-dot { transition: none; } } .event-mini { background: rgba(140,160,240,0.04); border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; transition: all 0.2s; } .event-mini:hover { border-color: var(--acid); transform: translateY(-3px); } .event-mini:hover h3 { color: var(--acid); } .event-mini .em-img { aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: #1a1a3a; position: relative; } .event-mini .em-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(13,13,43,0.4) 100%); } .event-mini .em-time { position: absolute; top: 12px; left: 12px; background: var(--cream); color: var(--navy); padding: 6px 10px; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 16px; z-index: 2; } .event-mini .em-cat { position: absolute; top: 12px; right: 12px; background: var(--navy); color: var(--lavender); padding: 4px 10px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; z-index: 2; } .event-mini .em-body { padding: 18px; } .event-mini h3 { font-family: 'Archivo', sans-serif; font-size: 18px; font-weight: 700; line-height: 1.2; margin-bottom: 8px; transition: color 0.2s; } .event-mini .em-venue { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.1em; } /* ========================================================= FEATURE ESSAY ========================================================= */ .feature-essay { padding: 64px var(--pad); display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .feature-essay .fe-text .eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--rose); text-transform: uppercase; margin-bottom: 16px; display: block; } .feature-essay h2 { font-family: 'Archivo', sans-serif; font-style: normal; font-weight: 700; font-size: clamp(40px, 5vw, 72px); line-height: 1.05; margin-bottom: 20px; letter-spacing: -0.02em; } /* Naslov je link, ali vizuelno ostaje naslov — boju i podvlaku dobija tek na hover, isto kao naslovi kartica u gridu. */ .feature-essay h2 a { color: inherit; text-decoration: none; transition: color 0.2s; } .feature-essay h2 a:hover { color: var(--acid); } .feature-essay h2 b { font-family: 'Archivo', sans-serif; font-weight: 900; font-style: normal; color: var(--acid); text-transform: none; letter-spacing: 0; } .feature-essay .fe-dek { font-size: 17px; line-height: 1.5; color: var(--lavender); margin-bottom: 24px; max-width: 540px; } .feature-essay .fe-byline { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.1em; } .feature-essay .fe-byline a { color: var(--acid); text-decoration: none; border-bottom: 1.5px solid var(--acid); padding-bottom: 2px; } .feature-essay .fe-img { /* Bilo 4/5 (uspravno) — niža slika da ne nadvisi tekst uz sebe */ aspect-ratio: 1/1; background-size: cover; background-position: center; background-color: var(--navy-deep); display: block; } /* ========================================================= U FOKUSU — magazinski grid (naslovnica) ========================================================= */ .focus-grid { padding: 0 var(--pad) 64px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; } .focus-grid .article { grid-column: span 4; padding: 32px 24px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); cursor: pointer; transition: background 0.2s; text-decoration: none; color: inherit; display: flex; flex-direction: column; } .focus-grid .article:hover { background: var(--navy-deep); } .focus-grid .article:hover h3 { color: var(--acid); } .focus-grid .article.lg { grid-column: span 8; padding: 40px 32px; } /* Zadnja kartica u redu nema desni rub. Na naslovnici je zadnje dijete .focus-list (pa pravilo tamo ne pogađa ništa i velika kartica zadrži rub prema listi); u single.php "Još iz magazina" gasi rub trećoj kartici. */ .focus-grid > .article:last-child { border-right: none; } .focus-grid .article .a-cat { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; color: var(--rose); text-transform: uppercase; margin-bottom: 12px; } .focus-grid .article h3 { font-family: 'Archivo', sans-serif; font-size: 22px; font-weight: 800; line-height: 1.15; margin-bottom: 12px; transition: color 0.2s; } .focus-grid .article.lg h3 { font-size: 32px; } .focus-grid .article h3 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--lavender); } .focus-grid .article .a-img { width: 100%; aspect-ratio: 16/10; margin-bottom: 16px; background-size: cover; background-position: center; background-color: var(--navy-deep); } .focus-grid .article.lg .a-img { aspect-ratio: 16/9; } .focus-grid .article .a-meta { margin-top: auto; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.08em; padding-top: 16px; display: flex; justify-content: space-between; gap: 8px; } /* ---- Urednička lista desno od velike kartice ---- MORA stajati poslije pravila za .focus-grid .article iznad: selektori su iste specifičnosti (0,2,1 / 0,3,0), pa odlučuje samo redoslijed. Lista nosi četiri kompaktne stavke i po visini prati veliku karticu — `flex: 1` dijeli raspoloživu visinu na jednake dijelove, pa se donja ivica liste poklopi s donjom ivicom velike kartice. */ .focus-list { grid-column: span 4; border-top: 1px solid var(--line); display: flex; flex-direction: column; } .focus-grid .focus-list .article { grid-column: auto; flex: 1; padding: 18px 24px; border-top: 0; border-right: 0; /* Sličica lijevo, tekst desno — bez dodatnog omotača u markupu: slika drži prvu kolonu kroz sva tri reda. */ display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 14px; align-content: center; } .focus-list .article + .article { border-top: 1px solid var(--line); } .focus-grid .focus-list .a-img { grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 1 / 1; margin-bottom: 0; } .focus-grid .focus-list .a-cat { grid-column: 2; grid-row: 1; margin-bottom: 6px; } .focus-grid .focus-list h3 { grid-column: 2; grid-row: 2; font-size: 16px; line-height: 1.25; margin-bottom: 6px; } .focus-grid .focus-list .a-meta { grid-column: 2; grid-row: 3; margin-top: 0; padding-top: 0; font-size: 10px; } /* ========================================================= AD SLOTOVI — pravi banneri (slike), centrirani Glavni format: 1092 × 110 px (slike su @2x → 2184 × 220) ========================================================= */ .ad-slot { position: relative; width: 100%; max-width: 1092px; /* širina glavnog bannera */ margin: 48px auto; /* ← centriranje na stranici */ padding: 0 var(--pad); } /* ---- VRH STRANICE: header → reklama → sadržaj --------------------------- Isti ritam na SVIM stranicama, ne samo na početnoj. `.site-top + .ad-slot` hvata oba slučaja: baner koji header.php ispisuje na podstranicama (slot 'top') i prvi baner iz front-page.php na početnoj — u oba je reklama prvi element odmah nakon sticky vrha. `:has(+ .hero)` ostaje za slučaj da reklama na početnoj nije prva. Standardnih 48px margine + 56–80px gornjeg padinga sekcije davalo je preko 100px praznine između headera i sadržaja. ------------------------------------------------------------------------ */ .site-top + .ad-slot, .ad-slot:has(+ .hero) { margin-top: 24px; margin-bottom: 16px; } /* Prva sekcija ODMAH ISPOD reklame — inače na razmak reklame dodaje još i svoj puni gornji padding, pa baner vizuelno visi odvojen od sadržaja. */ .ad-slot + .hero, .ad-slot + .cal-hero, .ad-slot + .archive-hero, .ad-slot + .mag-hero, .ad-slot + .single-wrap, .ad-slot + .back-mag, .ad-slot + .sec-header, .ad-slot + .editor-note { padding-top: 24px; } /* Kad reklame nema (plugin bez aktivne kampanje za 'top'), sadržaj ide odmah ispod headera — isti gornji razmak, da vrh stranice izgleda jednako sa i bez banera. */ .site-top + .hero, .site-top + .cal-hero, .site-top + .archive-hero, .site-top + .mag-hero, .site-top + .single-wrap, .site-top + .back-mag, .site-top + .sec-header, .site-top + .editor-note { padding-top: 28px; } /* Sam banner */ .ad-banner-link { display: block; width: 100%; line-height: 0; /* bez procjepa ispod slike */ border: 1px solid var(--line); background: var(--navy-deep); transition: border-color 0.2s, transform 0.2s; } .ad-banner-link:hover { border-color: var(--acid); transform: translateY(-2px); } .ad-banner-link img { width: 100%; height: auto; display: block; } /* Rotator: svi slajdovi u istom prostoru, aktivan se prikazuje */ .ad-rotator { position: relative; } .ad-rotator .ad-slide { display: none; } .ad-rotator .ad-slide.is-active { display: block; } /* Desktop / mobilni banner */ .ad-mobile-only { display: none; } .ad-desktop-only { display: block; } /* --- APP IT reklama: HTML (logo + slogan), ne slika --- */ .ad-slot.ad-appit { max-width: 820px; } .appit-banner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 110px; padding: 20px 24px; background: var(--navy-deep); border: 1px solid var(--line); text-decoration: none; transition: border-color 0.2s, transform 0.2s; } .appit-banner:hover { border-color: var(--acid); transform: translateY(-2px); } .appit-logo { height: 48px; width: auto; flex-shrink: 0; /* Logo je tamni tekst na prozirnoj podlozi — na navy pozadini treba invertovati */ filter: brightness(0) invert(1); transition: filter 0.2s; } .appit-banner:hover .appit-logo { filter: none; } .appit-slogan { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #2E9BF6; /* APP IT brend plava */ text-align: center; } @media (max-width: 700px) { .ad-slot { margin: 32px auto; padding: 0 var(--pad-m); max-width: 100%; } .ad-slot.ad-appit { max-width: 100%; } .ad-desktop-only { display: none; } .ad-mobile-only { display: block; } .appit-logo { height: 40px; } .appit-slogan { font-size: 10px; letter-spacing: 0.1em; } } /* Sponzorisani varijeteti */ .article.sponsored { position: relative; background: rgba(140,160,240,0.05) !important; } .article.sponsored::after { content: '\25C6 SPONZORISANO'; position: absolute; top: 12px; right: 12px; background: var(--lavender); color: var(--navy); padding: 4px 10px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; z-index: 3; } .event-card.sponsored { border: 2px solid var(--lavender); } .event-card.sponsored .ev-sponsor-tag { position: absolute; bottom: 12px; left: 12px; background: var(--lavender); color: var(--navy); padding: 4px 10px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.15em; z-index: 2; text-transform: uppercase; } /* ========================================================= VIKEND PREGLED ========================================================= */ .weekend-preview { padding: 32px var(--pad) 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .weekend-day { border: 1px solid var(--line); padding: 32px; display: flex; flex-direction: column; gap: 20px; position: relative; } .weekend-day .wd-header { display: flex; align-items: end; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 20px; } .weekend-day .wd-date { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 64px; line-height: 0.9; letter-spacing: -0.01em; } .weekend-day .wd-date .num { background: var(--lavender); color: var(--navy); padding: 0 12px; display: inline-block; } .weekend-day .wd-name { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 24px; color: var(--lavender); display: block; margin-top: 4px; } .weekend-day .wd-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--lavender); text-align: right; line-height: 1.6; } .weekend-day .wd-count b { color: var(--rose); font-weight: 700; font-size: 14px; } .weekend-day .wd-list { display: flex; flex-direction: column; gap: 14px; } .weekend-day .wd-event { /* Vrijeme je sitnije nego prije (18px), pa mu treba uža kolona; širi razmak ga odvaja od naslova umjesto da se naslanjaju jedno na drugo. */ display: grid; grid-template-columns: 56px 1fr auto; column-gap: 26px; row-gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); text-decoration: none; color: inherit; cursor: pointer; transition: opacity 0.2s; } /* Grid ćelije se po defaultu ne smiju suziti ispod svog min-content — duga riječ u naslovu tako probije karticu. min-width:0 to dozvoljava. */ .weekend-day .wd-event > * { min-width: 0; } .weekend-day .wd-event:hover { opacity: 0.7; } .weekend-day .wd-event:last-child { border-bottom: none; } .weekend-day .wd-event .we-time { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 18px; color: var(--lavender); } .weekend-day .wd-event .we-title { font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; } .weekend-day .wd-event .we-venue { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; overflow-wrap: anywhere; } .weekend-day .wd-event .we-city { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--cream); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; } .weekend-day .wd-empty { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.1em; padding: 20px 0; } /* ========================================================= GRADOVI ========================================================= */ .cities { padding: 64px var(--pad); /* gornji padding izjednačen s donjim */ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } /* ---- Po kategorijama ---- */ .by-cat { padding: 0 var(--pad) 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .cat-block { display: flex; flex-direction: column; border-top: 3px solid var(--line); padding-top: 14px; } .cb-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .cb-name { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 22px; text-transform: none; letter-spacing: 0.01em; text-decoration: none; color: inherit; } .cb-name:hover { text-decoration: underline; } .cb-count { font-family: 'JetBrains Mono', monospace; font-size: 12px; opacity: 0.6; white-space: nowrap; } .cb-list { display: flex; flex-direction: column; flex: 1; } .cb-event { display: grid; grid-template-columns: 46px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; } .cb-event > * { min-width: 0; } .cb-event:first-child { border-top: 0; } .cb-event:hover .cb-title { text-decoration: underline; } .cb-date { font-family: 'JetBrains Mono', monospace; font-size: 12px; opacity: 0.6; padding-top: 2px; } .cb-title { font-size: 15px; line-height: 1.3; font-weight: 500; overflow-wrap: anywhere; } .cb-venue { font-size: 12px; opacity: 0.6; margin-top: 3px; overflow-wrap: anywhere; } .cb-more { margin-top: 12px; font-family: 'JetBrains Mono', monospace; font-size: 12px; text-decoration: none; color: inherit; opacity: 0.7; } .cb-more:hover { opacity: 1; text-decoration: underline; } /* Boja gornjeg ruba = kategorija (isti ključ kao drugdje u temi) */ .cat-block.cat-muzika { border-top-color: var(--lavender); } .cat-block.cat-teatar { border-top-color: var(--rose); } .cat-block.cat-festival { border-top-color: var(--cream); } .cat-block.cat-sport { border-top-color: var(--acid); } .cat-block.cat-film { border-top-color: var(--cream); } .cat-block.cat-izlozba { border-top-color: var(--acid); } .cat-block.cat-ostalo { border-top-color: var(--lavender); } .city { background: var(--navy); padding: 32px 24px; cursor: pointer; transition: background 0.2s; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; min-height: 180px; } .city:hover { background: var(--navy-deep); } .city:hover .city-name { color: var(--acid); } .city-name { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 36px; line-height: 0.95; text-transform: none; letter-spacing: -0.02em; transition: color 0.2s; } .city-stat { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.12em; } .city-stat b { color: var(--rose); font-weight: 700; } .city-next { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line); font-family: 'Archivo', sans-serif; font-size: 13px; color: var(--cream); font-weight: 600; line-height: 1.3; } .city-next em { font-family: 'Instrument Serif', serif; font-style: italic; color: var(--lavender); font-weight: 400; } /* ========================================================= NEWSLETTER ========================================================= */ .newsletter { background: var(--cream); color: var(--navy); padding: 72px var(--pad); /* Krem blok se odvaja od tamne sekcije gradova iznad: navy procjep + lavanda linija. (Stari border-top je bio navy na navy — nevidljiv, blok je nalijegao na gradove.) */ margin-top: 88px; border-top: 2px solid var(--lavender); border-bottom: 2px solid var(--lavender); display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .newsletter .nl-text h2 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(40px, 5vw, 72px); line-height: 0.9; text-transform: none; letter-spacing: -0.02em; margin-bottom: 16px; } .newsletter .nl-text h2 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; text-transform: lowercase; color: var(--rose); } .newsletter .nl-text p { font-size: 17px; line-height: 1.5; max-width: 460px; color: var(--navy); opacity: 0.8; } .newsletter .nl-stats { margin-top: 20px; font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--navy); opacity: 0.65; } .newsletter .nl-stats b { color: var(--rose); opacity: 1; } .newsletter .nl-form { display: flex; flex-direction: column; gap: 12px; } .newsletter input { width: 100%; padding: 18px 20px; background: transparent; border: 2px solid var(--navy); font-family: 'Archivo', sans-serif; font-size: 16px; color: var(--navy); outline: none; } .newsletter input::placeholder { color: var(--navy); opacity: 0.5; } .newsletter input:focus { border-color: var(--rose); } .newsletter button { background: var(--navy); color: var(--cream); padding: 18px 28px; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 20px; text-transform: uppercase; letter-spacing: 0.04em; border: 2px solid var(--navy); cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .newsletter button:hover { background: var(--rose); color: var(--navy); border-color: var(--rose); } .newsletter button:disabled { opacity: 0.5; cursor: wait; } .newsletter .nl-disclaimer { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--navy); opacity: 0.55; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; } .newsletter .nl-msg { font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 0; } .newsletter .nl-msg.ok { color: #1a7a3a; } .newsletter .nl-msg.err { color: #c0392b; } /* ========================================================= KALENDAR ========================================================= */ .cal-hero { padding: 56px var(--pad) 32px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: end; } .cal-hero h1 { font-family: 'Archivo', sans-serif; font-weight: 900; /* "KALENDAR BiH" mora stati u jedan red — zato nowrap i manji raspon nego prije (bio: 72–180px) */ font-size: clamp(38px, 7.5vw, 112px); white-space: nowrap; line-height: 0.95; text-transform: none; letter-spacing: -0.02em; } .cal-hero h1 .italic { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; text-transform: lowercase; color: var(--lavender); letter-spacing: 0; } .cal-hero h1 .accent { background: var(--acid); color: var(--navy); padding: 0 14px; display: inline-block; transform: rotate(-2deg) translateY(-4px); } .cal-hero .stats { text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.7; } .cal-hero .stats .big { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 72px; line-height: 1; color: var(--cream); letter-spacing: 0; display: block; margin-bottom: 4px; } .cal-hero .stats .sub { color: var(--rose); font-weight: 700; } /* --- PRIKAZI: vidljivi tabovi --- */ .view-tabs-wrap { max-width: var(--wrap); margin: 0 auto; padding: 28px var(--pad) 0; } .view-tabs { display: flex; gap: 0; border: 2px solid var(--lavender); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .view-tabs::-webkit-scrollbar { display: none; } .view-tab { flex: 1 1 0; padding: 16px 20px; text-align: center; white-space: nowrap; text-decoration: none; color: var(--cream); background: transparent; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; border-right: 2px solid var(--lavender); transition: background 0.15s, color 0.15s; } .view-tab:last-child { border-right: none; } /* Na desktopu pun naziv, na mobilnom kratki (vidi media query) */ .view-tab .vt-short { display: none; } .view-tab:hover { background: rgba(140,160,240,0.12); color: var(--acid); } .view-tab.active { background: var(--acid); color: var(--navy); } /* Kontrolna traka */ .controls-bar { padding: 24px var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); position: relative; z-index: 40; flex-wrap: wrap; } .controls-bar .left, .controls-bar .right { display: flex; gap: 8px; align-items: center; } .icon-wrap { position: relative; } .icon-btn { width: 44px; height: 44px; border: 1.5px solid var(--lavender); background: transparent; color: var(--cream); border-radius: 50%; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; position: relative; } .icon-btn:hover { border-color: var(--acid); color: var(--acid); } .icon-btn.open { background: var(--acid); color: var(--navy); border-color: var(--acid); } .icon-btn svg { width: 18px; height: 18px; display: block; } .icon-btn.has-active::after { content: ''; position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; background: var(--rose); border-radius: 50%; border: 2px solid var(--navy); } .icon-btn.open.has-active::after { border-color: var(--acid); } /* Filter dugme s tekstom — pokazuje šta je trenutno izabrano */ .filter-btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 1.5px solid var(--lavender); background: transparent; color: var(--cream); cursor: pointer; transition: all 0.2s; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .filter-btn:hover { border-color: var(--acid); color: var(--acid); } .filter-btn.open { background: var(--acid); color: var(--navy); border-color: var(--acid); } .filter-btn svg { width: 16px; height: 16px; flex-shrink: 0; } .filter-btn .caret { font-size: 10px; opacity: 0.7; } /* Aktivan filter = acid okvir, da se vidi da je nešto suženo */ .filter-btn.has-active { border-color: var(--acid); background: rgba(212,255,58,0.1); } .filter-btn.has-active.open { background: var(--acid); } /* Mikro-labele iznad polja kontrolne trake — samo mobilni. Na desktopu su suvišne (ima mjesta za pun tekst u dugmetu). */ .ctl-label { display: none; } /* "Prikaz" dropdown postoji samo na mobitelu; desktop koristi traku .view-tabs. */ .ctl-view { display: none; } /* Acid akcenat: prikaz je glavni prekidač kalendara, ne obični filter. */ .filter-btn.is-view { border-color: var(--acid); color: var(--acid); background: rgba(212,255,58,0.08); } .filter-btn.is-view.open { background: var(--acid); color: var(--navy); } .dropdown { position: absolute; top: calc(100% + 10px); background: var(--cream); color: var(--navy); min-width: 220px; padding: 8px 0 12px; z-index: 50; display: none; box-shadow: 0 16px 40px rgba(0,0,0,0.45); border: 1px solid var(--navy); max-height: 70vh; overflow-y: auto; } .dropdown.open { display: block; } .dropdown.from-left { left: 0; } .dropdown.from-right { right: 0; } .dropdown-title { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy); opacity: 0.55; padding: 12px 18px 10px; border-bottom: 1px solid rgba(13,13,43,0.1); margin-bottom: 4px; } .dropdown-item { display: block; padding: 10px 18px; font-family: 'Archivo', sans-serif; font-size: 14px; font-weight: 500; color: var(--navy); cursor: pointer; transition: background 0.15s; background: transparent; border: none; width: 100%; text-align: left; border-left: 3px solid transparent; text-decoration: none; } .dropdown-item:hover { background: rgba(13,13,43,0.06); } /* "Poništi filtere" — diskretno, uz dugmad filtera */ .filter-reset { align-self: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lavender); text-decoration: none; white-space: nowrap; } .filter-reset:hover { color: var(--cream); text-decoration: underline; } .dropdown-item.active { background: var(--acid); border-left-color: var(--navy); font-weight: 700; } .range-nav { display: flex; align-items: center; gap: 6px; } .range-nav .range-label { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--cream); padding: 0 14px; min-width: 140px; text-align: center; } .range-nav .range-label em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--lavender); text-transform: lowercase; } .range-nav .nav-btn { background: transparent; border: 1.5px solid var(--lavender); color: var(--cream); width: 38px; height: 38px; /* Kockica, ne krug — ostatak sajta nema zaobljenja (brutalist raster). */ font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 18px; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .range-nav .nav-btn:hover { background: var(--acid); color: var(--navy); border-color: var(--acid); } /* Dnevni blokovi */ .day-block { padding: 48px var(--pad) 32px; border-bottom: 1px solid var(--line); position: relative; } .day-block.today { background: linear-gradient(180deg, rgba(212,255,58,0.06) 0%, transparent 30%); } .day-block.today::before { content: '\25C6 DANAS'; position: absolute; top: 24px; right: var(--pad); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: var(--acid); } .day-block.past { opacity: 0.45; } .day-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; } .day-header h2 { /* Smanjeno 29.07.2026. — 108px je gutalo pola ekrana prije prve kartice. */ font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(24px, 3vw, 40px); line-height: 1; text-transform: none; letter-spacing: -0.02em; } .day-header h2 .day-num { color: var(--lavender); margin-right: 8px; } .day-block.today .day-header h2 .day-num { background: var(--acid); color: var(--navy); padding: 0 14px; display: inline-block; transform: rotate(-2deg); } .day-header h2 .day-name { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; text-transform: lowercase; color: var(--cream); letter-spacing: 0; } .day-header h2 .day-mo { font-size: 0.4em; color: var(--lavender); margin-left: 8px; letter-spacing: 0.1em; } .day-meta { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.1em; text-align: right; line-height: 1.6; } .day-meta b { color: var(--rose); font-weight: 700; font-size: 14px; } /* Event kartice */ /* ========================================================= RED-KARTICA (3 dana / vikend u kalendaru) — sličica skroz lijevo ========================================================= */ .event-card.event-card--row { flex-direction: row; align-items: stretch; } .event-card.event-card--row .ev-img { flex: 0 0 120px; width: 120px; aspect-ratio: 4 / 3; align-self: center; margin: 12px 0 12px 12px; border: 1px solid var(--line); } .event-card.event-card--row:hover .ev-img { border-color: var(--acid); } /* U redu nema preklapajućih čipova preko slike — vrijeme i kategorija idu u tekst. */ .event-card.event-card--row .ev-img::after { display: none; } .event-card.event-card--row .ev-body { padding: 12px 16px; gap: 6px; justify-content: center; } .event-card.event-card--row .ev-head { display: flex; align-items: center; gap: 10px; } .event-card.event-card--row .ev-t { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--cream); } .event-card.event-card--row .ev-c { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--rose); } .event-card.event-card--row .ev-c.cat-muzika { color: var(--lavender); } .event-card.event-card--row .ev-c.cat-teatar { color: var(--rose); } .event-card.event-card--row .ev-c.cat-festival { color: var(--cream); } .event-card.event-card--row .ev-c.cat-sport { color: var(--acid); } .event-card.event-card--row .ev-c.cat-film { color: var(--cream); } .event-card.event-card--row .ev-c.cat-izlozba { color: var(--acid); } .event-card.event-card--row .ev-c.cat-ostalo { color: var(--lavender); } .event-card.event-card--row h3 { font-size: 19px; } .event-card.event-card--row:hover { transform: none; } .events-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } /* Kalendarski dan: redovi jedan ispod drugog, ne mreža kartica */ .day-block .events-grid { grid-template-columns: 1fr; gap: 10px; } .events-grid.compact { grid-template-columns: repeat(3, 1fr); } .event-card { background: rgba(140,160,240,0.04); border: 1px solid var(--line); cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; } .event-card:hover { border-color: var(--acid); transform: translateY(-3px); } .event-card:hover h3 { color: var(--acid); } .event-card .ev-img { aspect-ratio: 5/3; background-color: #1a1a3a; background-size: cover; background-position: center; position: relative; filter: contrast(1.05) saturate(0.95); } .event-card .ev-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(13,13,43,0.5) 100%); } .event-card .ev-time { position: absolute; top: 12px; left: 12px; background: var(--cream); color: var(--navy); padding: 6px 10px; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 16px; letter-spacing: 0.04em; z-index: 2; } .event-card .ev-cat { position: absolute; top: 12px; right: 12px; background: var(--navy); color: var(--lavender); padding: 4px 10px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; z-index: 2; } /* Kategorijske boje (mapirano na 7 kategorija iz baze) */ .event-card .ev-cat.cat-muzika { color: var(--lavender); } .event-card .ev-cat.cat-teatar { color: var(--rose); } .event-card .ev-cat.cat-festival { color: var(--cream); } .event-card .ev-cat.cat-sport { color: var(--acid); } .event-card .ev-cat.cat-film { color: var(--cream); } .event-card .ev-cat.cat-izlozba { color: var(--acid); } .event-card .ev-cat.cat-ostalo { color: var(--lavender); } .event-card .ev-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; position: relative; } .event-card h3 { font-family: 'Archivo', sans-serif; font-size: 17px; font-weight: 700; line-height: 1.2; transition: color 0.2s; } .event-card .ev-venue { font-family: 'Archivo', sans-serif; font-size: 13px; color: var(--lavender); line-height: 1.3; } .event-card .ev-bottom { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; justify-content: space-between; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; } .event-card .ev-city { color: var(--cream); font-weight: 700; } .event-card .ev-link { color: var(--acid); } .event-card .ev-tag { background: var(--rose); color: var(--cream); padding: 3px 8px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em; transform: rotate(-2deg); align-self: flex-start; } /* Dnevni timeline */ .timeline-list { padding: 0; } .timeline-row { display: grid; grid-template-columns: 120px 1fr auto; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: center; cursor: pointer; transition: background 0.2s; text-decoration: none; color: inherit; } .timeline-row:hover { background: var(--navy-deep); } .timeline-row:hover h3 { color: var(--acid); } /* Vrijeme više nije vodeći element (bilo: Archivo 900, 36px, prva kolona) — sada je sitna oznaka uz kategoriju, a sličica je ta koja drži lijevu ivicu. */ .timeline-row .t-head { display: flex; align-items: center; gap: 10px; } .timeline-row .t-time { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--cream); } /* Sličica 4:3 — oštri uglovi i tanka linija, u duhu ostatka teme. Kad slike nema, ostaje prazan okvir na --navy-deep (bez rupe u mreži). */ .timeline-row .t-img { width: 120px; aspect-ratio: 4 / 3; background: var(--navy-deep) center/cover no-repeat; border: 1px solid var(--line); transition: border-color 0.2s; } .timeline-row:hover .t-img { border-color: var(--acid); } .timeline-row .t-body { display: flex; flex-direction: column; gap: 4px; } .timeline-row .t-cat { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--rose); } .timeline-row h3 { font-family: 'Instrument Serif', serif; font-size: 28px; font-weight: 400; line-height: 1.1; transition: color 0.2s; } .timeline-row h3 em { font-style: italic; color: var(--lavender); } .timeline-row .t-venue { font-size: 13px; color: var(--lavender); } .timeline-row .t-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; text-align: right; color: var(--cream); } .timeline-row .t-meta b { color: var(--acid); display: block; font-weight: 400; } /* ========================================================= SEDMIČNI PRIKAZ — 7 kolona, dan po dan ========================================================= */ .week-wrap { padding: 32px var(--pad) 48px; max-width: var(--wrap); margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; } .week-grid { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 12px; align-items: start; min-width: 100%; } .week-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .week-col.past { opacity: 0.4; } /* Zaglavlje dana */ .week-head { display: flex; flex-direction: column; gap: 2px; padding: 14px 12px; border-bottom: 2px solid var(--line); text-decoration: none; color: inherit; position: relative; transition: border-color 0.2s; } .week-head:hover { border-bottom-color: var(--acid); } .week-head:hover .wh-day { color: var(--acid); } .wh-day { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 17px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--cream); line-height: 1.1; transition: color 0.2s; } .wh-date { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--lavender); letter-spacing: 0.08em; } .wh-count { position: absolute; top: 12px; right: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: var(--lavender); background: rgba(140,160,240,0.12); padding: 2px 7px; } /* Današnja kolona */ .week-col.today .week-head { border-bottom-color: var(--acid); } .week-col.today .wh-day { background: var(--acid); color: var(--navy); padding: 0 6px; align-self: flex-start; } .week-col.today .wh-count { background: var(--acid); color: var(--navy); } /* Lista događaja u koloni */ .week-list { display: flex; flex-direction: column; gap: 8px; } /* Sedmični prikaz koristi istu karticu (.event-card--row) kao ostali prikazi. Kolone su uske (~1/7 širine), pa je ovdje sve skalirano — sličica, tekst, razmaci. */ .week-list .event-card.event-card--row .ev-img { flex: 0 0 52px; width: 52px; aspect-ratio: 3 / 4; /* uspravni plakatski format */ margin: 10px 0 10px 10px; } /* min-width:0 + prelom riječi — bez toga duge riječi ("Internacionalnog", nazivi izvođača) probiju usku kolonu i budu odsječene na sredini. */ .week-list .event-card.event-card--row .ev-body { padding: 10px; gap: 4px; min-width: 0; } .week-list .event-card.event-card--row h3, .week-list .event-card.event-card--row .ev-city { overflow-wrap: anywhere; } .week-list .event-card.event-card--row .ev-bottom { min-width: 0; } .week-list .event-card.event-card--row .ev-head { flex-wrap: wrap; gap: 6px; } .week-list .event-card.event-card--row .ev-t { font-size: 11px; } .week-list .event-card.event-card--row .ev-c { font-size: 9px; letter-spacing: 0.1em; } .week-list .event-card.event-card--row h3 { font-size: 13px; line-height: 1.3; /* Duge nazive skrati na 4 reda umjesto da kolona nabuja */ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .week-list .event-card.event-card--row .ev-venue { display: none; } .week-list .event-card.event-card--row .ev-bottom { font-size: 9px; } .week-list .event-card.event-card--row .ev-link { display: none; } /* --- staro .week-ev (zadržano zbog eventualnog povratka na kompaktni čip) --- */ .week-ev { display: grid; grid-template-columns: 40px 1fr; gap: 4px 8px; align-items: start; padding: 10px 12px; background: rgba(140,160,240,0.05); border-left: 3px solid var(--lavender); /* boja se prepisuje po kategoriji */ text-decoration: none; color: inherit; transition: background 0.15s, transform 0.15s; } .week-ev:hover { background: rgba(140,160,240,0.14); transform: translateX(2px); } .week-ev:hover .we-n { color: var(--acid); } .we-img { grid-column: 1; grid-row: 1 / -1; /* Uspravni pravougaonik (plakatski format), i dalje skroz lijevo. */ width: 40px; aspect-ratio: 3 / 4; background: var(--navy-deep) center/cover no-repeat; border: 1px solid var(--line); } .we-t, .we-n, .we-c { grid-column: 2; } .we-t { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--lavender); letter-spacing: 0.06em; } .we-n { font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--cream); transition: color 0.2s; /* Duge nazive skrati na 4 reda umjesto da kolona nabuja */ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .we-c { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.75; } /* Boja lijevog ruba = kategorija (isti ključ kao tačkice u mjesečnom) */ .week-ev.cat-muzika { border-left-color: var(--lavender); } .week-ev.cat-teatar { border-left-color: var(--rose); } .week-ev.cat-festival { border-left-color: var(--cream); } .week-ev.cat-sport { border-left-color: var(--acid); } .week-ev.cat-film { border-left-color: var(--cream); } .week-ev.cat-izlozba { border-left-color: var(--acid); } .week-ev.cat-ostalo { border-left-color: var(--lavender); } .week-empty { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--lavender); opacity: 0.3; padding: 12px; } @media (max-width: 900px) and (min-width: 701px) { /* Tablet: 7 kolona ne stane — klizanje prstom lijevo/desno */ .week-wrap { padding: 24px var(--pad-m) 40px; } .week-grid { grid-template-columns: repeat(7, 165px); gap: 10px; } } @media (max-width: 700px) { /* Mobitel: dani jedan ispod drugog, sa događajima za taj dan */ .week-wrap { padding: 24px var(--pad-m) 40px; overflow-x: visible; } .week-grid { grid-template-columns: 1fr; gap: 28px; } .week-col { gap: 12px; } } /* Mjesečni grid */ .month-wrap { padding: 32px; } .month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .month-day-name { background: var(--navy); padding: 12px 8px; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--lavender); } .month-cell { background: var(--navy); min-height: 150px; /* raste po sadržaju umjesto fiksnog kvadrata */ padding: 10px 8px; display: flex; flex-direction: column; gap: 8px; color: inherit; position: relative; } .month-cell.weekend { background: rgba(140,160,240,0.04); } .month-cell.outside { opacity: 0.25; } .month-cell.empty { background: rgba(7,7,26,0.35); } /* Današnja kockica: samo broj je acid, ne cijela ćelija — inače kartice događaja unutra postanu nečitke na zelenoj podlozi. */ .month-cell.today { background: rgba(212,255,58,0.07); box-shadow: inset 0 0 0 2px var(--acid); } .month-cell .m-num { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 20px; line-height: 1; color: var(--cream); flex-shrink: 0; } .month-cell.weekend .m-num, .month-cell.outside .m-num { color: var(--lavender); } .month-cell.today .m-num { background: var(--acid); color: var(--navy); padding: 2px 7px; align-self: flex-start; } /* Događaji u kockici */ .m-list { display: flex; flex-direction: column; gap: 5px; } .m-ev { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; background: rgba(140,160,240,0.06); border-left: 3px solid var(--lavender); /* boja po kategoriji */ text-decoration: none; color: inherit; transition: background 0.15s; } .m-ev:hover { background: rgba(140,160,240,0.16); } .m-ev:hover .me-n { color: var(--acid); } .me-t { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: var(--lavender); letter-spacing: 0.05em; } .me-n { font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--cream); transition: color 0.2s; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .m-ev.cat-muzika { border-left-color: var(--lavender); } .m-ev.cat-teatar { border-left-color: var(--rose); } .m-ev.cat-festival { border-left-color: var(--cream); } .m-ev.cat-sport { border-left-color: var(--acid); } .m-ev.cat-film { border-left-color: var(--cream); } .m-ev.cat-izlozba { border-left-color: var(--acid); } .m-ev.cat-ostalo { border-left-color: var(--lavender); } /* Svi događaji dana su vidljivi — nema više dugmeta "Prikaži još N" ni skrivenog viška; kockica jednostavno raste po sadržaju. */ /* Sticky traka s danima — vidi se samo na mobitelu (pravila u RESPONSIVE). Na desktopu red naziva unutar grida radi posao, pa je traka ugašena. */ .month-days-sticky { display: none; } /* Navigacija perioda na dnu kalendara — ista kao u kontrolnoj traci, da se poslije duge liste ne mora skrolati nazad na vrh. Klase .range-nav/.nav-btn su namjerno iste: preuzimaju izgled i AJAX ponašanje bez dupliranja. */ .cal-bottom-nav { max-width: var(--wrap); margin: 0 auto 64px; /* odmak od bijelog "Tražiš kontekst" bloka */ padding: 28px var(--pad) 0; border-top: 1px solid var(--line); display: flex; justify-content: center; } /* Datum je goli tekst između strelica, ne polje — strelice mu prilaze blizu (gore u kontrolnoj traci ostaje kako jeste). */ .cal-bottom-nav .range-nav { justify-content: center; gap: 8px; } .cal-bottom-nav .range-label { min-width: 0; padding: 0 4px; border: 0; } /* Kalendar se mijenja AJAX-om — dok stiže novi sadržaj, stari se pritamni i ne prima klikove (sprječava dupli klik na strelicu). */ #kal-body { transition: opacity 0.15s; } #kal-body.is-loading { opacity: 0.45; pointer-events: none; } .month-legend { margin-top: 24px; display: flex; gap: 24px; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.1em; } .month-legend .leg { display: inline-flex; align-items: center; gap: 8px; } .month-legend .leg-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } /* Prazno stanje */ .empty-state { padding: 64px var(--pad); text-align: center; font-family: 'Instrument Serif', serif; font-style: italic; font-size: 28px; color: var(--lavender); } /* Nazad na magazin */ .back-mag { background: var(--cream); color: var(--navy); padding: 56px var(--pad); display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; border-top: 1px solid var(--line); border-bottom: 2px solid var(--navy); margin-bottom: 48px; } .back-mag h3 { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; font-size: clamp(24px, 3.6vw, 40px); line-height: 1.1; max-width: 720px; } .back-mag h3 b { background: var(--rose); color: var(--cream); padding: 0 10px; font-style: normal; font-weight: 400; } .back-mag-btn { background: var(--navy); color: var(--cream); padding: 18px 28px; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 18px; text-transform: uppercase; text-decoration: none; transition: all 0.2s; display: inline-flex; align-items: center; gap: 10px; letter-spacing: 0.03em; } .back-mag-btn:hover { background: var(--rose); color: var(--navy); } /* ========================================================= MAGAZIN ========================================================= */ .mag-hero { padding: 64px var(--pad); display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; border-bottom: 1px solid var(--line); } /* Cijeli tekstualni blok vodećeg članka je link (vidi page-magazin.php) */ .mag-hero .hero-text { display: block; text-decoration: none; color: inherit; } .mag-hero .hero-text:hover h1 { color: var(--acid); } .mag-hero .hero-text h1 { transition: color 0.2s; } .mag-hero .kicker { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--rose); text-transform: uppercase; margin-bottom: 24px; } .mag-hero h1 { font-family: 'Archivo', sans-serif; font-weight: 900; /* Bilo 48–88px: duži naslovi su se lomili u 7–8 redova i gurali sliku van ekrana. */ font-size: clamp(26px, 3vw, 44px); line-height: 1.05; text-transform: none; margin-bottom: 20px; letter-spacing: -0.02em; } .mag-hero h1 em, .mag-hero h1 .roman { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; text-transform: none; color: var(--lavender); letter-spacing: 0; } .mag-hero h1 .accent { background: var(--acid); color: var(--navy); padding: 0 12px; display: inline-block; transform: rotate(-1.5deg); } .mag-hero .dek { font-size: 18px; line-height: 1.5; color: var(--lavender); max-width: 560px; margin-bottom: 24px; } .mag-hero .dek em { font-family: 'Instrument Serif', serif; color: var(--cream); } .mag-hero .byline-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.1em; } .mag-hero .byline-row .author { color: var(--cream); font-weight: 700; } .mag-hero .byline-row .read-cta { color: var(--acid); text-decoration: none; border-bottom: 1.5px solid var(--acid); padding-bottom: 2px; } .mag-hero .hero-img-wrap { position: relative; max-width: 460px; margin-left: auto; width: 100%; } .mag-hero .hero-img { /* Bilo 4/5 (visok uspravni kadar) — slika je dominirala nad tekstom. */ aspect-ratio: 4/3; background-size: cover; background-position: center; background-color: var(--navy-deep); filter: contrast(1.05) saturate(0.92); } .mag-hero .hero-img-tag { position: absolute; top: 20px; left: 20px; z-index: 2; background: var(--navy); color: var(--acid); padding: 6px 12px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .mag-hero .hero-img-tag.right { right: 20px; left: auto; background: var(--rose); color: var(--cream); } /* Od urednice */ .editor-note { padding: 56px var(--pad); display: grid; grid-template-columns: auto 1fr; gap: 40px; border-bottom: 1px solid var(--line); } .editor-note .label { /* Vertikalno centrirana uz cijeli blok (tekst + potpis), ne uz sam vrh. */ align-self: center; writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--rose); white-space: nowrap; } .editor-note p { font-family: 'Instrument Serif', serif; font-size: 24px; line-height: 1.4; color: var(--cream); max-width: 900px; } .editor-note p em { font-style: italic; color: var(--lavender); } .editor-note .signature { margin-top: 24px; font-family: 'Caveat', cursive; font-size: 32px; color: var(--acid); } .editor-note .signature small { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; } .sec-header { padding: 72px var(--pad) 32px; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; max-width: var(--wrap); margin: 0 auto; } .sec-header h2 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(48px, 7vw, 96px); line-height: 0.85; text-transform: none; letter-spacing: -0.02em; } .sec-header h2 .italic { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; text-transform: lowercase; color: var(--lavender); } .sec-header .right-meta { text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lavender); line-height: 1.8; } .sec-header .right-meta a { color: var(--acid); text-decoration: none; border-bottom: 1px solid var(--acid); padding-bottom: 2px; } /* Magazinski grid */ .mag-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; } .mag-grid .article { grid-column: span 4; padding: 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; transition: background 0.3s; display: flex; flex-direction: column; gap: 16px; min-height: 460px; text-decoration: none; color: inherit; } .mag-grid .article:hover { background: var(--navy-deep); } .mag-grid .article:hover .a-title { color: var(--acid); } .mag-grid .article.lg { grid-column: span 6; grid-row: span 2; } .mag-grid .article.lg .a-img { aspect-ratio: 16/10; } .mag-grid .article.lg .a-title { font-size: 32px; } .mag-grid .article.lg .a-dek { display: block; } .mag-grid .article.md { grid-column: span 6; } .mag-grid .article.md .a-img { aspect-ratio: 16/9; } .mag-grid .article.md .a-title { font-size: 26px; } .mag-grid .a-img { aspect-ratio: 4/3; background-color: #1a1a3a; background-size: cover; background-position: center; position: relative; overflow: hidden; filter: contrast(1.05) saturate(0.92); } .mag-grid .a-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(13,13,43,0.3) 100%); pointer-events: none; } .mag-grid .a-cat { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--rose); } .mag-grid .a-cat.live { color: var(--acid); } /* Isti font kao naslovi kartica na početnoj (.focus-grid .article h3) — Archivo 800, a kurziv unutar naslova ostaje serifni akcent. */ .mag-grid .a-title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 22px; line-height: 1.15; letter-spacing: -0.005em; color: var(--cream); transition: color 0.2s; } .mag-grid .a-title em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--lavender); } .mag-grid .a-dek { display: none; font-family: 'Archivo', sans-serif; font-size: 15px; line-height: 1.5; color: var(--lavender); max-width: 480px; } .mag-grid .a-meta { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.1em; display: flex; justify-content: space-between; gap: 8px; } .mag-grid .a-meta .read { color: var(--acid); } /* Events widget (u magazinu) */ .events-widget { background: var(--lavender); color: var(--navy); padding: 64px var(--pad); position: relative; overflow: hidden; } .events-widget::before { content: ''; position: absolute; top: -40px; right: -40px; width: 240px; height: 240px; background: var(--acid); border-radius: 50%; opacity: 0.4; filter: blur(60px); } .ew-header { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; position: relative; z-index: 1; } .ew-header h2 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(56px, 9vw, 120px); line-height: 0.85; text-transform: none; color: var(--navy); letter-spacing: -0.02em; } .ew-header h2 .italic { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; text-transform: lowercase; color: var(--cream); background: var(--navy); padding: 0 12px; display: inline-block; transform: rotate(-2deg); position: relative; top: -0.28em; left: 2.6em; z-index: 2; } .ew-header .stats { text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--navy); text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.6; } .ew-header .stats b { display: block; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 64px; color: var(--navy); line-height: 1; letter-spacing: 0; } .ew-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; z-index: 1; margin-bottom: 40px; } .ew-card { background: var(--cream); color: var(--navy); padding: 20px; cursor: pointer; transition: transform 0.2s; border: 2px solid var(--navy); display: flex; flex-direction: column; gap: 12px; min-height: 220px; text-decoration: none; } .ew-card:hover { transform: translate(-4px, -4px); box-shadow: 4px 4px 0 var(--navy); } .ew-card .ew-cat { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--rose); } .ew-card .ew-date { font-family: 'Archivo', sans-serif; font-weight: 900; line-height: 0.9; display: flex; align-items: baseline; gap: 8px; } .ew-card .ew-date .day { font-size: 56px; color: var(--navy); } .ew-card .ew-date .mo { font-size: 14px; letter-spacing: 0.12em; } .ew-card > * { min-width: 0; } .ew-card h4 { font-family: 'Archivo', sans-serif; font-size: 17px; line-height: 1.2; font-weight: 700; color: var(--navy); margin-top: auto; /* Sigurnosna mreža: i da naslov opet dobije neprelomljiv razmak iz importa, kartica ostaje u širini kolone. Vidi ks26_fix_nbsp() u functions.php. */ overflow-wrap: anywhere; } .ew-card .ew-loc { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--navy); opacity: 0.7; padding-top: 8px; border-top: 1px dashed var(--navy); } .ew-cta-row { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 2px solid var(--navy); flex-wrap: wrap; gap: 16px; position: relative; z-index: 1; } .ew-cta-row .cta-text { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 24px; color: var(--navy); max-width: 480px; } .ew-cta-big { background: var(--navy); color: var(--acid); padding: 18px 32px; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 20px; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; border: 2px solid var(--navy); transition: all 0.2s; display: inline-flex; align-items: center; gap: 12px; } .ew-cta-big:hover { background: var(--acid); color: var(--navy); } .ew-cta-big .arrow { transition: transform 0.2s; } .ew-cta-big:hover .arrow { transform: translateX(6px); } /* Arhiva strip */ .issues-strip { padding: 48px var(--pad); border-bottom: 1px solid var(--line); display: flex; gap: 48px; align-items: center; flex-wrap: wrap; } .issues-strip h3 { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; font-size: 32px; color: var(--cream); } .issues-strip .issues-list { display: flex; gap: 12px; flex-wrap: wrap; flex: 1; } .issue-card { border: 1px solid var(--lavender); padding: 8px 16px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: all 0.2s; text-decoration: none; } .issue-card:hover { border-color: var(--acid); color: var(--acid); } .issue-card.current { background: var(--acid); color: var(--navy); border-color: var(--acid); font-weight: 700; } /* Rezultati arhive — članci odabranog mjeseca, ispod trake */ .arhiva-rezultati[hidden] { display: none; } .arhiva-rezultati { border-bottom: 1px solid var(--line); } .arhiva-rezultati.is-loading { opacity: 0.55; } .arh-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding: 40px var(--pad) 24px; } .arh-head h4 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 34px; line-height: 1; text-transform: none; letter-spacing: -0.02em; color: var(--cream); } .arh-count { font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lavender); } .arh-close { margin-left: auto; background: none; cursor: pointer; border: 1px solid var(--lavender); padding: 8px 16px; font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lavender); transition: all 0.2s; } .arh-close:hover { border-color: var(--rose); color: var(--rose); } /* Arhiva ide u ujednačen grid — bez lg/md ritma glavnog magazina */ .arh-grid { border-top: 1px solid var(--line); } .arh-loading { padding: 48px var(--pad); text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lavender); } /* ========================================================= SINGLE (događaj + članak) ========================================================= */ .single-wrap { padding: 56px var(--pad) 72px; } /* Redoslijed: zaglavlje (puna širina) → slika+detalji (2 kolone) → opis (puna širina) */ .single-event { display: block; } .se-header { margin-bottom: 36px; } .se-top { display: grid; grid-template-columns: 1fr 400px; gap: 56px; align-items: start; margin-bottom: 48px; } .se-cat { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--rose); text-transform: uppercase; margin-bottom: 20px; display: inline-block; } .single-event h1 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(40px, 5.5vw, 84px); line-height: 1.05; text-transform: none; letter-spacing: -0.02em; margin: 0; /* Dug naslov se prelama umjesto da gura stranicu ušir */ overflow-wrap: anywhere; word-break: break-word; hyphens: auto; } .se-img { width: 100%; aspect-ratio: 16/9; margin: 0; background-size: cover; background-position: center; background-color: var(--navy-deep); border: 1px solid var(--line); } /* ---- Povezani događaji uz članak: horizontalne kartice, jedna ispod druge ---- */ .sa-events { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin-top: 36px; } .sa-event { display: grid; grid-template-columns: 200px 1fr; text-decoration: none; color: inherit; border: 1px solid var(--line); overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease; } .sa-event:hover { border-color: var(--acid); transform: translateX(3px); } .sae-img { position: relative; min-height: 132px; background-color: var(--line); background-size: cover; background-position: center; } .sae-cat { position: absolute; left: 10px; bottom: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; background: var(--navy); color: var(--cream); } .sae-cat.cat-muzika { color: var(--lavender); } .sae-cat.cat-teatar { color: var(--rose); } .sae-cat.cat-festival { color: var(--cream); } .sae-cat.cat-sport, .sae-cat.cat-izlozba { color: var(--acid); } .sae-body { padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; } .sae-body h3 { font-size: 17px; line-height: 1.25; margin: 0; } .sa-event:hover .sae-body h3 { text-decoration: underline; } .sae-meta { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--lavender); } .sae-loc { font-size: 13px; opacity: 0.7; } @media (max-width: 700px) { .sa-event { grid-template-columns: 110px 1fr; } .sae-img { min-height: 110px; } .sae-body { padding: 12px 14px; } .sae-body h3 { font-size: 15px; } } /* ---- Sadržaj (plugin Easy Table of Contents) ---- Plugin dolazi sa svijetlom "grey" temom, a naslov "Sadržaj" nasljeđuje boju teksta iz teme (cream) — otud bijelo na bijelom. Kad LiteSpeed odgodi ili spoji plugin CSS, ishod je nepredvidiv, pa ovdje eksplicitno postavljamo sve boje. !important je namjeran: redoslijed učitavanja nije zagarantovan. */ #ez-toc-container { background: var(--navy-deep) !important; border: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; max-width: 820px; padding: 20px 22px !important; margin: 32px 0 !important; } #ez-toc-container .ez-toc-title { font-family: 'Archivo', sans-serif !important; font-weight: 900 !important; font-size: 20px !important; letter-spacing: 0.02em; text-transform: none; color: var(--cream) !important; } #ez-toc-container .ez-toc-list a, #ez-toc-container .ez-toc-link, #ez-toc-container .ez-toc-link:visited { font-family: 'Archivo', sans-serif; font-size: 15px; line-height: 1.5; color: var(--lavender) !important; text-decoration: none !important; box-shadow: none !important; } #ez-toc-container .ez-toc-link:hover, #ez-toc-container .ez-toc-link.active { color: var(--acid) !important; text-decoration: underline !important; } #ez-toc-container .ez-toc-list { padding-left: 18px; } #ez-toc-container .ez-toc-list li { margin: 6px 0; } #ez-toc-container .ez-toc-counter li::before { color: var(--lavender) !important; } /* Strelica/ikona za sklapanje — plugin je crta inline stilom fill:#999 */ #ez-toc-container .ez-toc-title-toggle svg { fill: var(--lavender) !important; color: var(--lavender) !important; } #ez-toc-container .ez-toc-btn { background: none !important; border: none !important; box-shadow: none !important; } /* ---- Podijeli: dugmad ispod članka ---- */ .sa-share { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; max-width: 820px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); } .ss-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lavender); } .ss-btns { display: flex; flex-wrap: wrap; gap: 8px; } .ss-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; color: inherit; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* Boja brenda tek na hover — u mirovanju red dugmadi ostaje diskretan */ .ss-btn:hover { color: #fff; border-color: transparent; } .ss-facebook:hover { background: #1877F2; } .ss-messenger:hover { background: #A334FA; } .ss-x:hover { background: #000; } .ss-whatsapp:hover { background: #25D366; } .ss-viber:hover { background: #7360F2; } .ss-linkedin:hover { background: #0A66C2; } .ss-email:hover { background: var(--lavender); } .ss-copy:hover { background: var(--acid); color: var(--navy); } .ss-done { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--acid); } @media (max-width: 700px) { .sa-share { gap: 10px; } .ss-btn { width: 34px; height: 34px; } } /* ---- Tekst o gradu, na dnu stranice grada ---- */ .city-outro { padding: 8px var(--pad) 72px; border-top: 1px solid var(--line); margin-top: 24px; } .city-outro h2 { font-family: 'Archivo', sans-serif; font-weight: 900; text-transform: none; font-size: 28px; line-height: 1; margin: 40px 0 20px; letter-spacing: -0.02em; } .co-text { font-size: 17px; line-height: 1.65; color: var(--cream); max-width: 820px; } .co-text p { margin-bottom: 18px; } .co-text p:last-child { margin-bottom: 0; } .co-text a { color: var(--acid); } .se-content { font-size: 17px; line-height: 1.65; color: var(--cream); max-width: 820px; } .se-content p { margin-bottom: 18px; } .se-content a { color: var(--acid); } .se-content h2, .se-content h3 { font-family: 'Archivo', sans-serif; font-weight: 900; text-transform: none; margin: 32px 0 14px; line-height: 1; letter-spacing: -0.02em; } .se-content img { margin: 20px 0; } .se-content ul, .se-content ol { margin: 0 0 18px 22px; } /* Sidebar sa detaljima */ .se-side { border: 1px solid var(--line); background: rgba(140,160,240,0.04); padding: 28px; } .se-side h3 { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--acid); margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .se-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--line); } .se-row:last-of-type { border-bottom: none; } .se-row .k { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.12em; flex-shrink: 0; padding-top: 3px; } .se-row .v { font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 600; color: var(--cream); text-align: right; word-break: break-word; } .se-row .v.big { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 26px } .se-row .v a { color: var(--acid); text-decoration: none; word-break: break-all; } .se-row .v a:hover { text-decoration: underline; } .se-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; position: relative; } .se-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 20px; text-decoration: none; cursor: pointer; width: 100%; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; transition: all 0.2s; } .se-btn.primary { background: var(--acid); color: var(--navy); border: 2px solid var(--acid); } .se-btn.primary:hover { background: transparent; color: var(--acid); } .se-btn.ghost { background: transparent; color: var(--cream); border: 2px solid var(--lavender); } .se-btn.ghost:hover { border-color: var(--acid); color: var(--acid); } /* Članak */ /* Članak koristi istu širinu kao header i single-događaj (--wrap preko .single-wrap). Da tekst ne bi bio nečitljivo dug red, sam sadržaj je ograničen na istu mjeru kao .se-content kod događaja (820px). */ .single-article { max-width: none; margin: 0; } .single-article .sa-byline, .single-article .sa-content, .single-article .sa-share { max-width: 820px; } /* Naslovna slika / galerija: šire od teksta, ali ne 1440px — inače hero naraste preko 800px u visinu na velikim ekranima. */ .single-article .sa-img, .single-article .sa-gallery { max-width: 1080px; } .single-article .sa-kicker { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--rose); text-transform: uppercase; margin-bottom: 20px; display: inline-block; } .single-article h1 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: clamp(36px, 5vw, 68px); line-height: 1.05; margin-bottom: 24px; letter-spacing: -0.02em; } /* Kurziv unutar naslova ostaje serif akcent (kao i u .mag-hero h1 em) */ .single-article h1 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--lavender); } .single-article .sa-byline { display: flex; gap: 16px; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.1em; padding-bottom: 28px; border-bottom: 1px solid var(--line); margin-bottom: 32px; } .single-article .sa-byline .author { color: var(--cream); font-weight: 700; } .single-article .sa-img { width: 100%; aspect-ratio: 16/9; margin-bottom: 36px; background-size: cover; background-position: center; background-color: var(--navy-deep); } /* ---- Uvodna galerija (carousel) ----------------------------------------- Zamjenjuje .sa-img kad je prvi blok članka "Galerija" s 2+ slike. Traka je scroll kontejner sa scroll-snap: bez JS-a radi kao swipe galerija, a strelice i tačkice dodaje initArticleGallery(). Vidi ks26_hero_galerija(). ------------------------------------------------------------------------ */ .sa-gallery { margin: 0 0 36px; } .sag-viewport { position: relative; } .sag-track { /* Podloga je na traci, ne na cijeloj galeriji — inače tamna traka viri iza tačkica ispod slike. */ background: var(--navy-deep); display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .sag-track::-webkit-scrollbar { display: none; } .sag-slide { scroll-snap-align: start; position: relative; min-width: 0; } .sag-slide img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; margin: 0; } /* Opis slike leži preko dna, na gradijentu — inače bi svaka slika mijenjala visinu trake i carousel bi poskakivao pri prelasku. */ .sag-opis { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 20px 14px; background: linear-gradient(to top, rgba(7,7,26,0.85), rgba(7,7,26,0)); font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.5; color: #F5F0E1; } /* Strelice: ista kockica kao u kalendaru, samo preko slike */ .sag-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; background: rgba(7,7,26,0.55); border: 1.5px solid rgba(245,240,225,0.5); color: #F5F0E1; cursor: pointer; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 20px; transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s; } .sag-nav.prev { left: 12px; } .sag-nav.next { right: 12px; } .sag-nav:hover { background: var(--acid); border-color: var(--acid); color: var(--navy); } .sag-nav:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; } /* Na kraju trake strelica se stiša, ali ostaje na mjestu (ne skače raspored) */ .sag-nav[disabled] { opacity: 0.3; cursor: default; } .sag-nav[disabled]:hover { background: rgba(7,7,26,0.55); border-color: rgba(245,240,225,0.5); color: #F5F0E1; } /* Brojač 1/6 — brži orijentir od tačkica kad slika ima puno */ .sag-count { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 4px 9px; background: rgba(7,7,26,0.6); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #F5F0E1; } .sag-dots { display: flex; justify-content: center; gap: 8px; padding: 14px 0 0; } .sag-dot { width: 8px; height: 8px; padding: 0; border: 0; background: var(--line); cursor: pointer; transition: background 0.2s, transform 0.2s; } .sag-dot:hover { background: var(--lavender); } .sag-dot.is-active { background: var(--acid); transform: scale(1.4); } .sag-dot:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .sag-track { scroll-behavior: auto; } .sag-dot, .sag-nav { transition: none; } } .single-article .sa-content { font-size: 18px; line-height: 1.7; color: var(--cream); } .single-article .sa-content p { margin-bottom: 22px; } .single-article .sa-content a { color: var(--acid); } .single-article .sa-content h2 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 32px; text-transform: none; margin: 40px 0 16px; line-height: 1; letter-spacing: -0.02em; } .single-article .sa-content h3 { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 28px; margin: 32px 0 14px; } .single-article .sa-content blockquote { border-left: 3px solid var(--acid); padding-left: 24px; margin: 32px 0; font-family: 'Instrument Serif', serif; font-style: italic; font-size: 24px; color: var(--lavender); } .single-article .sa-content ul, .single-article .sa-content ol { margin: 0 0 22px 24px; } .single-article .sa-content img { margin: 24px 0; } /* ========================================================= ČLANAK — DESKTOP RASPORED (lijevo dijeljenje / tekst / desna traka) ========================================================= Ispod 1101px ovdje se NIŠTA ne mijenja u odnosu na raniji izgled: .sa-layout je običan stup, desna traka je skrivena, a lijeva (potpis + dugmad za dijeljenje) se raspada: `display: contents` briše samu
kutiju pa potpis i dijeljenje postaju zasebne stavke stupa. Potpis time ostaje na vrhu (iznad slike), a dijeljenje preko `order` pada na dno — mobilni redoslijed ostaje uvod → slika → tekst → povezani → dijeljenje. Markup je u single.php (grana za članak). */ .sa-layout { display: flex; flex-direction: column; } .sa-main { min-width: 0; } .sa-rail--share { display: contents; } .sa-rail--share .sa-share { order: 3; } .sa-rail--related { display: none; } @media (min-width: 1101px) { .sa-layout { display: grid; /* Obje trake su namjerno iste širine da tekst stoji tačno na sredini stranice. Pri --wrap 1440px ostaje ~776px za sam članak — blizu mjere čitljivog reda (820px), pa .sa-main max-width ne veže. */ grid-template-columns: 260px minmax(0, 1fr) 260px; gap: 40px; align-items: start; } .sa-rail--share { display: block; } .sa-rail--share .sa-share { order: 0; } .sa-rail--related { display: block; } /* Širinu sada drži kolona grida, pa pojedinačni max-width-ovi (820/1080px) otpadaju — inače bi slika i tekst bili uži od svoje kolone. */ .sa-main { max-width: 820px; } .single-article .sa-byline, .single-article .sa-content, .single-article .sa-events, .single-article .sa-img, .single-article .sa-gallery { max-width: none; } /* Isti članci stoje u desnoj traci → dolje ih ne ponavljamo */ .sa-more-mag { display: none; } /* Cijela lijeva traka (potpis + dijeljenje) putuje uz tekst. `top` računa visinu sticky vrha stranice (--ks26-top-h postavlja JS). */ .sa-rail--share { position: sticky; top: calc(var(--ks26-top-h, 115px) + 24px); } /* Potpis: uspravan stup, bez crte ispod — traku već odvaja bijeli prostor. */ .sa-rail--share .sa-byline { display: flex; flex-direction: column; gap: 10px; padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } .sa-rail--share .sa-share { display: block; max-width: none; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); } /* Dugmad idu po dvoje u redu, poravnata uz lijevu ivicu trake. */ .sa-rail--share .ss-btns { display: grid; grid-template-columns: repeat(2, 38px); gap: 10px; justify-content: start; } .sa-rail--share .ss-label { display: block; margin-bottom: 12px; } /* :not([hidden]) — bez toga bi `display: block` pobijedio atribut `hidden` iz single.php i poruka bi stajala na ekranu i prije kopiranja. */ .sa-rail--share .ss-done:not([hidden]) { display: block; } .sa-rail--share .ss-done { font-size: 10px; line-height: 1.3; margin-top: 10px; } .sa-rail--related { position: sticky; top: calc(var(--ks26-top-h, 115px) + 24px); } } /* ---- Desna traka: sadržaj ---- */ .rail-box { margin-bottom: 40px; } .rail-h { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 20px; letter-spacing: -0.01em; text-transform: none; margin: 0 0 6px; padding-bottom: 10px; border-bottom: 2px solid var(--cream); } .rail-list { list-style: none; margin: 0; padding: 0; } .rail-item + .rail-item { border-top: 1px solid var(--line); } .rail-item a { display: block; padding: 13px 0; text-decoration: none; color: inherit; } .rail-kicker { display: block; margin-bottom: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose); } .rail-title { display: block; font-size: 15px; line-height: 1.35; font-weight: 600; } .rail-meta { display: block; margin-top: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--lavender); } .rail-item a:hover .rail-title, .rail-ev:hover .rail-title { text-decoration: underline; text-decoration-color: var(--acid); } .rail-ev { display: grid; grid-template-columns: 46px 1fr; gap: 12px; padding: 13px 0; text-decoration: none; color: inherit; } .rail-ev + .rail-ev { border-top: 1px solid var(--line); } .rail-ev-date { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 2px; border: 1px solid var(--line); font-family: 'JetBrains Mono', monospace; line-height: 1.1; } .rail-ev-date .num { font-size: 18px; font-weight: 700; color: var(--cream); } .rail-ev-date .mj { font-size: 10px; color: var(--lavender); } .rail-ev-body { min-width: 0; } .rail-more { display: inline-block; margin-top: 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acid); text-decoration: none; border-bottom: 1px solid var(--acid); } .rail-more:hover { color: var(--cream); border-bottom-color: var(--cream); } /* Povezani događaji / članci */ .related { padding: 0 var(--pad) 64px; max-width: var(--wrap); margin: 0 auto; } /* ========================================================= ARHIVE (kategorija / grad / pretraga) ========================================================= */ .archive-wrap { padding: 0 var(--pad) 64px; } .archive-hero { padding: 56px var(--pad) 32px; border-bottom: 1px solid var(--line); max-width: var(--wrap); margin: 0 auto; } .archive-hero h1 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(48px, 8vw, 120px); line-height: 0.85; text-transform: none; letter-spacing: -0.02em; } .archive-hero h1 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; text-transform: lowercase; color: var(--lavender); } .archive-hero .a-sub { margin-top: 16px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.12em; } .archive-hero .a-sub b { color: var(--rose); } /* Paginacija */ .pagination { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 48px var(--pad); } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1.5px solid var(--lavender); color: var(--cream); font-family: 'JetBrains Mono', monospace; font-size: 13px; text-decoration: none; transition: all 0.2s; } .pagination .page-numbers:hover { border-color: var(--acid); color: var(--acid); } .pagination .page-numbers.current { background: var(--acid); color: var(--navy); border-color: var(--acid); font-weight: 700; } /* ========================================================= FORME (prijavi događaj / kontakt) ========================================================= */ .form-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; } .form-intro h2 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(32px, 4vw, 56px); line-height: 0.95; text-transform: none; margin-bottom: 20px; letter-spacing: -0.02em; } .form-intro p { font-size: 17px; line-height: 1.55; color: var(--lavender); margin-bottom: 32px; } .form-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; } .fstep { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--line); font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 600; color: var(--cream); } .fstep .n { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 24px; color: var(--acid); min-width: 40px; } .form-contact { border: 1px solid var(--line); background: rgba(140,160,240,0.04); padding: 24px; } .form-contact h5 { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--acid); margin-bottom: 10px; } .form-contact p { font-size: 14px; margin-bottom: 12px; } .form-contact a { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 22px; color: var(--cream); text-decoration: none; border-bottom: 2px solid var(--acid); } .form-contact a:hover { color: var(--acid); } /* Kontakt podaci ispod maila */ .contact-meta { margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 10px; } .cm-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } .cm-row .k { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.12em; } .cm-row .v { font-family: 'Archivo', sans-serif; font-size: 14px; font-weight: 600; color: var(--cream); text-align: right; } .cm-row .v a { color: var(--acid); text-decoration: none; } .cm-row .v a:hover { text-decoration: underline; } .ks-form { border: 1px solid var(--line); background: rgba(140,160,240,0.04); padding: 36px; display: flex; flex-direction: column; gap: 22px; } .form-title { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(28px, 3.4vw, 44px); line-height: 0.95; text-transform: none; letter-spacing: -0.02em; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 2px; } .form-title em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; text-transform: lowercase; color: var(--lavender); } .fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .fld { display: flex; flex-direction: column; gap: 8px; } .fld label { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lavender); } .fld label span { color: var(--rose); } .fld input, .fld select, .fld textarea { width: 100%; padding: 14px 16px; background: var(--navy-deep); border: 1.5px solid var(--line); font-family: 'Archivo', sans-serif; font-size: 16px; color: var(--cream); outline: none; transition: border-color 0.2s; } .fld input::placeholder, .fld textarea::placeholder { color: var(--lavender); opacity: 0.45; } .fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--acid); } .fld textarea { resize: vertical; line-height: 1.5; } .fld select { cursor: pointer; } /* Odabir slike — nativno dugme se ne da stilizovati, pa se boji samo ono što može */ .fld input[type="file"] { padding: 11px 16px; font-size: 14px; cursor: pointer; } .fld input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; cursor: pointer; background: var(--lavender); color: var(--navy); border: 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .fld input[type="file"]::file-selector-button:hover { background: var(--acid); } .fld small { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--lavender); opacity: 0.7; letter-spacing: 0.05em; } .ks-submit { background: var(--acid); color: var(--navy); padding: 18px 28px; border: 2px solid var(--acid); cursor: pointer; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 20px; text-transform: uppercase; letter-spacing: 0.04em; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.2s; margin-top: 8px; } .ks-submit:hover { background: transparent; color: var(--acid); } .ks-submit:disabled { opacity: 0.5; cursor: wait; } .ks-msg { padding: 16px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.06em; line-height: 1.5; } .ks-msg.ok { background: rgba(212,255,58,0.12); color: var(--acid); border: 1px solid var(--acid); } .ks-msg.err { background: rgba(255,92,122,0.12); color: var(--rose); border: 1px solid var(--rose); } @media (max-width: 1100px) { .form-layout { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 700px) { .ks-form { padding: 24px; } .fld-row { grid-template-columns: 1fr; } } /* ========================================================= BOTTOM MARQUEE + FOOTER ========================================================= */ .bottom-marquee { background: var(--lavender); color: var(--navy); padding: 32px 0; overflow: hidden; border-bottom: 2px solid var(--navy); margin-top: 64px; } .bottom-marquee-track { display: inline-flex; gap: 60px; white-space: nowrap; animation: scroll 60s linear infinite; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 48px; text-transform: uppercase; } .bottom-marquee-track span { display: inline-flex; gap: 60px; } .bottom-marquee-track .star { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--cream); text-transform: lowercase; } /* Desktop footer (kolone) — originalni izgled */ .site-footer { padding: 60px var(--pad) 32px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } .footer-logo { width: 40px; height: 40px; display: block; object-fit: contain; margin-bottom: 16px; } /* Puni logotip u podnožju — zamijenio je znak + natpis "Kamo sutra?" */ .footer-wordmark-img { height: 48px; width: auto; display: block; margin-bottom: 16px; transition: opacity 0.2s; } .footer-wordmark-img:hover { opacity: 0.85; } .site-footer-m .footer-wordmark-img { height: 38px; margin-bottom: 0; } .footer-brand h4 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 36px; line-height: 0.9; text-transform: uppercase; margin-bottom: 16px; } .footer-brand h4 .italic { font-family: 'Instrument Serif', serif; font-style: italic; color: var(--lavender); text-transform: lowercase; font-weight: 400; } .footer-brand p { font-size: 14px; line-height: 1.5; color: var(--lavender); max-width: 360px; } .site-footer h5 { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--acid); margin-bottom: 16px; } .site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 8px; } .site-footer a { color: var(--cream); text-decoration: none; font-size: 14px; transition: color 0.2s; } .site-footer a:hover { color: var(--acid); } .site-footer .footer-bottom { grid-column: 1 / -1; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.1em; flex-wrap: wrap; gap: 16px; } /* Mobilni footer (centriran) — sakriven na desktopu */ .site-footer-m { display: none; } .site-footer-m .footer-logo-link { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } .site-footer-m .footer-logo { width: 40px; height: 40px; margin-bottom: 0; } .site-footer-m .footer-wordmark { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 28px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--cream); } .site-footer-m .footer-wordmark em { font-family: 'Instrument Serif', serif; font-style: italic; text-transform: lowercase; color: var(--lavender); font-weight: 400; } .site-footer-m .footer-nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } .site-footer-m .footer-nav a { color: var(--cream); text-decoration: none; font-size: 15px; font-family: 'Archivo', sans-serif; transition: color 0.2s; } .site-footer-m .footer-nav a:hover { color: var(--acid); } .site-footer-m .footer-bottom { width: 100%; padding-top: 20px; border-top: 1px solid var(--line); font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--lavender); text-transform: uppercase; letter-spacing: 0.06em; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1100px) { .hero { grid-template-columns: 1fr; gap: 40px; } .feature-essay { grid-template-columns: 1fr; gap: 32px; } .mag-hero { grid-template-columns: 1fr; gap: 40px; } /* `>` je bitan: pogađa kartice koje su direktno u gridu (velika na naslovnici, "Još iz magazina" u single.php), a ne stavke .focus-list. */ .focus-grid > .article { grid-column: span 6; } .focus-grid > .article:nth-child(odd) { border-right: 1px solid var(--line); } .focus-grid > .article:nth-child(even) { border-right: none; } /* Poslije nth-child pravila — ista specifičnost, pa odlučuje redoslijed. */ .focus-grid > .article.lg { grid-column: span 12; border-right: none; } /* Neparan broj kartica u redu: zadnja je sama, pa bi joj rub visio nasred stranice. Mora i ovdje jer nth-child(odd) gore ima istu specifičnost. */ .focus-grid > .article:last-child { border-right: none; } /* Velika kartica i lista jedna ispod druge, svaka punom širinom. */ .focus-list { grid-column: span 12; } .tonight { grid-template-columns: 1fr 1fr; } .rec-track { grid-auto-columns: calc((100% - 16px) / 2); } .cities { grid-template-columns: repeat(2, 1fr); } .by-cat { grid-template-columns: repeat(2, 1fr); } .newsletter { grid-template-columns: 1fr; gap: 24px; } .events-grid, .events-grid.compact { grid-template-columns: repeat(2, 1fr); } .cal-hero { grid-template-columns: 1fr; gap: 24px; } .cal-hero .stats { text-align: left; } .ew-grid { grid-template-columns: repeat(2, 1fr); } .mag-grid .article, .mag-grid .article.lg, .mag-grid .article.md { grid-column: span 6; } .se-top { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 700px) { .main-nav { display: none; } .main-nav.open { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--navy-deep); border-bottom: 1px solid var(--line); padding: 20px var(--pad-m); z-index: 55; } .main-nav.open ul { flex-direction: column; gap: 18px; } /* Gradovi: spisak je zatvoren dok se ne klikne strelica. Desktop pravila hover/focus-within moraju biti ugašena — dodir na strelicu ostavlja fokus u stavci, pa bi :focus-within iznova otvarao podmeni, i to u desktop obliku (apsolutno pozicionirana ploča preko sadržaja). */ .main-nav .has-submenu:hover .submenu, .main-nav .has-submenu:focus-within .submenu { display: none; } .main-nav .has-submenu:hover::after { display: none; } .main-nav.open .has-submenu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* Gola strelica, bez okvira. Visina je namjerno svedena na visinu reda teksta (13px/normal ≈ 14px) — dugme od 28px je stavku "Gradovi" činilo višom od ostalih, pa je oko nje izgledalo više prostora. Dodirna zona se širi nevidljivim ::before, ne visinom dugmeta. */ .submenu-toggle { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 18px; height: 14px; padding: 0; background: transparent; border: 0; color: var(--cream); cursor: pointer; transition: transform 0.2s, color 0.2s; } .submenu-toggle::before { content: ''; position: absolute; top: -14px; right: -14px; bottom: -14px; left: -8px; } .submenu-toggle svg { width: 14px; height: 14px; } .submenu-toggle:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; } .has-submenu.open .submenu-toggle { transform: rotate(180deg); color: var(--acid); } .main-nav.open .submenu { display: none; } .main-nav.open .has-submenu.open .submenu { display: flex; flex-direction: column; flex-basis: 100%; position: static; border: 0; box-shadow: none; padding: 4px 0 0 16px; gap: 12px; min-width: 0; margin-top: 0; } .main-nav.open .submenu a { padding: 0; font-size: 13px; } .nav-toggle { display: inline-flex; } /* Sticky ostaje na omotaču i na mobitelu. Ranije je ovdje bio `.site-top:static` + sticky na headeru — to NE radi: sticky element se drži vrha samo dok mu je roditelj u vidnom polju, a omotač je visok svega ~110px, pa header odmah odleti. Header je `relative` da mobilni meni (.main-nav.open, top:100%) padne ispod njega. */ .site-header { position: relative; padding: 16px var(--pad-m); } /* Bez strelice tekst dugmeta staje u jedan red */ .cta-arrow { display: none; } .cta-btn { white-space: nowrap; } /* Pretraga: samo lupa; polje izlazi na dodir (klasu dodaje initSearchToggle) */ .hdr-search { margin-left: auto; margin-right: 4px; border-color: transparent; background: transparent; } .hdr-search input { width: 0; padding: 0; opacity: 0; pointer-events: none; font-size: 10px; letter-spacing: 0.05em; transition: width 0.2s ease, opacity 0.2s ease, padding 0.2s ease; } /* Lupa i prekidač teme su gole ikone iste veličine — bez okvira, isti kvadrat dodirne zone (32×32) i isti crtež (18px). Okvir na mobitelu ostaje samo hamburgeru, da se vidi šta otvara meni. */ .hdr-search button, .tema-toggle { width: 32px; height: 32px; padding: 0; border: 0; justify-content: center; } .hdr-search svg, .tema-toggle svg { width: 18px; height: 18px; } .tema-toggle { margin-left: 0; margin-right: 4px; } .hdr-search.open { border-color: var(--line); background: rgba(140, 160, 240, 0.06); } .hdr-search.open input { width: 118px; padding: 8px 10px 8px 2px; opacity: 1; pointer-events: auto; } .logo-mark { width: 24px; height: 24px; } .logo-text { font-size: 18px; } /* Uži logotip da ostane mjesta za pretragu i hamburger */ .logo-wordmark { height: 26px; } /* ---- MOBILNI RITAM ---------------------------------------------------- Vertikalni razmaci su na telefonu osjetno manji nego na desktopu: tamo prazan prostor razdvaja sekcije, na 390px ekranu samo tjera skrolanje. Sve vrijednosti ispod su namjerno zbijene (~1/3 manje) — ako se štimaju, štimaju se ovdje, na jednom mjestu. ---------------------------------------------------------------------- */ .hero { padding: 28px var(--pad-m) 32px; } .hero-text h1 { font-size: 62px; } /* Naslovni blok: desktop margine (24/32/32) prave veliku prazninu na telefonu */ .hero-text .eyebrow { margin-bottom: 14px; } .hero-text h1 { margin-bottom: 20px; } .hero-text .lede { margin-bottom: 20px; } /* Izdvojeni članak ide ispod naslova i dugmadi (DOM redoslijed) — bez order:-1 */ .hero-poster { aspect-ratio: 5/6; } .hero-ctas { flex-direction: column; align-items: stretch; } .hero-cta { justify-content: center; } .sec-h { padding: 32px var(--pad-m) 14px; flex-direction: column; align-items: start; } .sec-header { padding: 36px var(--pad-m) 16px; flex-direction: column; align-items: start; } .tonight { grid-template-columns: 1fr; padding: 20px var(--pad-m) 32px; gap: 10px; } /* "Gdje idemo": vodoravne kartice (slika lijevo, tekst desno) da ih više stane u ekran. Ograničeno na .tonight — u .recommended ostaje uspravna kartica, tamo je traka koja se skroluje vodoravno. */ .tonight .event-mini { flex-direction: row; align-items: stretch; } .tonight .event-mini .em-img { flex: 0 0 108px; width: 108px; aspect-ratio: 1; } .tonight .event-mini .em-img::after { background: none; } .tonight .event-mini .em-time { top: 6px; left: 6px; padding: 3px 6px; font-size: 12px; } /* Kategorija se ne vidi dobro na maloj sličici — ide uz naziv mjesta ispod. */ .tonight .event-mini .em-cat { display: none; } .tonight .event-mini .em-body { flex: 1; min-width: 0; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; } .tonight .event-mini h3 { font-size: 15px; margin-bottom: 5px; } .tonight .event-mini .em-venue { font-size: 10px; letter-spacing: 0.06em; } .by-cat { grid-template-columns: 1fr; padding: 0 var(--pad-m) 32px; } .recommended { padding: 0 var(--pad-m) 32px; } .city-outro { padding: 8px var(--pad-m) 32px; } .rec-track { grid-auto-columns: 85%; } .feature-essay { padding: 32px var(--pad-m); } /* Puna širina ekrana, pa ide još niža nego na desktopu */ .feature-essay .fe-img { aspect-ratio: 4/3; } .focus-grid { padding: 0 var(--pad-m) 32px; } .focus-grid .article, .focus-grid .article.lg { grid-column: span 12; padding: 18px 0; border-right: none !important; } /* Stavke liste prate isti bočni ritam kao ostale kartice na telefonu. */ .focus-grid .focus-list .article { padding: 16px 0; } /* margin-inline mora ostati auto — padding za bočni razmak dolazi iz pravila gore */ .ad-slot { margin: 12px auto; } .ad-banner { padding: 32px var(--pad-m); min-height: 160px; } /* Vrh stranice na telefonu — isti ritam na svim stranicama. Selektori moraju ponoviti one iz AD SLOTOVI sekcije: `.site-top + .ad-slot` i `:has(+ .hero)` su specifičniji od golog `.ad-slot`, pa bi inače nadjačali mobilnu vrijednost bez obzira na to što je ovdje niže u fajlu. Ispod 10px baner vizuelno sraste s headerom i čita se kao dio sadržaja, a ne kao reklama — zato ne manje od ovoga. */ .site-top + .ad-slot, .ad-slot:has(+ .hero) { margin-top: 10px; margin-bottom: 8px; } .ad-slot + .hero, .ad-slot + .cal-hero, .ad-slot + .archive-hero, .ad-slot + .mag-hero, .ad-slot + .single-wrap, .ad-slot + .back-mag, .ad-slot + .sec-header, .ad-slot + .editor-note { padding-top: 14px; } .site-top + .hero, .site-top + .cal-hero, .site-top + .archive-hero, .site-top + .mag-hero, .site-top + .single-wrap, .site-top + .back-mag, .site-top + .sec-header, .site-top + .editor-note { padding-top: 16px; } .weekend-preview { grid-template-columns: 1fr; padding: 16px var(--pad-m) 32px; } .weekend-day { padding: 18px 14px; gap: 14px; } .weekend-day .wd-date { font-size: 48px; } /* Tri kolone (vrijeme / naslov / grad) ostavljaju naslovu ~120px na telefonu, pa duge riječi probiju karticu. Grad ide u novi red ispod naslova. */ .weekend-day .wd-event { grid-template-columns: 50px 1fr; column-gap: 18px; row-gap: 4px; } .weekend-day .wd-event .we-time { font-size: 16px; } .weekend-day .wd-event .we-city { grid-column: 2; } .weekend-day .wd-header { gap: 12px; } .weekend-day .wd-name { font-size: 20px; } .cities { grid-template-columns: 1fr 1fr; padding: 32px var(--pad-m); } /* Na telefonu je grid 2 kolone — bez Prijedora ostaje 8 gradova, dakle puna četiri reda umjesto jedne usamljene kartice na dnu. */ .cities .city[data-city="prijedor"] { display: none; } .city { padding: 20px 16px; min-height: 124px; gap: 8px; } .city-name { font-size: 26px; } .city-next { padding-top: 12px; } .newsletter { padding: 36px var(--pad-m); margin-top: 36px; } .newsletter .nl-stats { margin-top: 14px; } /* Naslov ide bliže reklami iznad njega (reklama već ima 12px margine ispod). */ .cal-hero { padding: 10px var(--pad-m) 14px; } /* Naslov mora stati u jedan red (h1 ima nowrap), a Archivo je osjetno širi od nekadašnjeg Antona — zato manji raspon nego prije (bio: 44–72px). */ .cal-hero h1 { font-size: clamp(30px, 9.2vw, 60px); } /* Mjesec + broj događaja/gradova: na mobitelu se ne prikazuje, ta informacija se ionako ponavlja u kontrolnoj traci ispod. */ .cal-hero .stats { display: none; } .controls-bar { padding: 12px var(--pad-m); gap: 10px; } .controls-bar .left, .controls-bar .right { flex: 1; } .day-block { padding: 24px var(--pad-m) 18px; } .day-block.today::before { right: var(--pad-m); } .day-header { flex-direction: column; align-items: flex-start; gap: 12px; } .day-meta { display: none; } .events-grid, .events-grid.compact { grid-template-columns: 1fr; } /* 3 dana i vikend: red sa sličicom lijevo, samo uže nego na desktopu. (Ranije su ovdje slike bile potpuno ugašene, a vrijeme/kategorija čipovi.) */ .event-card.event-card--row .ev-img { flex: 0 0 88px; width: 88px; margin: 10px 0 10px 10px; } .event-card.event-card--row .ev-body { padding: 10px 12px; } .event-card.event-card--row h3 { font-size: 16px; } .timeline-row { grid-template-columns: 88px 1fr; gap: 12px; } .timeline-row .t-img { width: 88px; } /* Vrijeme je sitna oznaka uz kategoriju (ranije je ovdje ostalo 26px iz starog rasporeda). */ .timeline-row .t-time { font-size: 11px; } .timeline-row h3 { font-size: 20px; } .timeline-row .t-meta { display: none; } /* Mjesečni: 7 kolona s karticama ne stane na telefon → klizanje prstom. Vodoravni scroll je na `.month-scroll`, a NE na `.month-wrap` — sticky traka s danima stoji u wrapu izvan scroll kontejnera, jer bi se unutar njega lijepila za taj kontejner umjesto za vrh stranice. */ .month-wrap { padding: 12px var(--pad-m); } .month-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .month-grid { min-width: 900px; } .month-cell { padding: 8px 6px; min-height: 130px; } .month-cell .m-num { font-size: 16px; } .me-n { font-size: 11px; -webkit-line-clamp: 2; } /* Nazivi dana unutar grida se gase — preuzima ih sticky traka iznad, da se ne vide dva reda. Traku JS pomjera vodoravno u korak s gridom. `--ks26-top-h` (visina sticky vrha stranice) postavlja JS; 115px je rezerva. */ .month-grid > .month-day-name { display: none; } .month-days-sticky { display: block; overflow: hidden; position: sticky; top: var(--ks26-top-h, 115px); z-index: 40; background: var(--navy); } .mds-track { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; min-width: 900px; background: var(--line); border: 1px solid var(--line); border-bottom: 0; will-change: transform; } .mds-track .month-day-name { padding: 9px 4px; } .range-nav .range-label { font-size: 11px; padding: 0 6px; min-width: auto; letter-spacing: 0; } .range-nav .nav-btn { width: 36px; height: 36px; font-size: 16px; } .icon-btn { width: 40px; height: 40px; } .icon-btn svg { width: 16px; height: 16px; } /* Traka s 5 tabova se na mobitelu skriva — svaki tab bi bio ~65px širok, pretijesno za prst i za čitanje. Zamjenjuje je dropdown "Prikaz" u kontrolnoj traci. */ .view-tabs-wrap { display: none; } /* Kontrolna traka je mreža 2×2: grad | kategorija / datum | prikaz. Svako polje ima mikro-labelu iznad, da se zna šta se njime mijenja. */ .ctl-label { display: block; margin-bottom: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lavender); } .ctl-view { display: block; } /* Filteri: dva dugmeta jedno pored drugog, pune širine */ .controls-bar .left { flex-wrap: nowrap; width: 100%; gap: 8px; align-items: flex-end; } .controls-bar .left .icon-wrap { flex: 1 1 0; min-width: 0; } .filter-btn { width: 100%; height: 42px; padding: 0 10px; font-size: 10px; letter-spacing: 0.04em; gap: 6px; } .filter-btn span:not(.caret) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Drugi red mreže: datum lijevo (ispod grada), prikaz desno (ispod kategorije). */ .controls-bar .right { width: 100%; gap: 8px; align-items: flex-end; } .controls-bar .right > .icon-wrap { flex: 1 1 0; min-width: 0; } /* Datum je polje kao i Prikaz: cijeli red visok 42px, s okvirom i oko same labele — inače je bio 32px i vizuelno "propadao" ispod susjednog dugmeta. Strelice ostaju uže od 42px: u pola širine sve šire ostavlja premalo mjesta datumu, koji se onda lomi u dva reda. */ .controls-bar .right .range-nav { width: 100%; justify-content: space-between; gap: 2px; align-items: stretch; } .range-nav .nav-btn { flex: 0 0 auto; width: 30px; height: 42px; font-size: 15px; } .range-nav .range-label { flex: 1 1 auto; min-width: 0; height: 42px; /* NE inline-flex: razmak između mjesec i godine je čisti whitespace, a flex ga ne renderuje — mjesečni prikaz bi pisao "decembar2026". Vertikalno centriranje ide preko line-height (42px - 2×1.5px okvira). */ display: block; text-align: center; line-height: 39px; border: 1.5px solid var(--line); padding: 0 2px; font-size: 11px; letter-spacing: 0; white-space: nowrap; } /* Donja navigacija: grupa se steže oko datuma i stoji na sredini — ovdje se ne prepisuje raspored iz kontrolne trake (polje pune širine). */ .cal-bottom-nav { padding: 22px var(--pad-m) 0; margin-bottom: 40px; } .cal-bottom-nav .range-nav { width: auto; justify-content: center; gap: 6px; } .cal-bottom-nav .range-label { /* border se mora ponoviti: mobilno pravilo .range-nav .range-label ima istu specifičnost, a stoji poslije desktop verzije ovog selektora */ flex: 0 0 auto; width: auto; border: 0; height: auto; line-height: 1.2; font-size: 12px; padding: 0 6px; } /* Razmaci oko crtice se stežu — "27.07.—02.08." staje tamo gdje razmaknuta verzija ne bi. Ne ići mnogo niže: na -4px crtica naliježe na tačku prethodnog datuma. */ .range-label .rl-dash { margin: 0 -3px; } /* Sufiks "· sedmica" / "· vikend" otpada — tip prikaza sad piše u susjednom dugmetu, a u pola širine label bi se lomio. */ .range-label .rl-suffix { display: none; } /* Panel je tačno širine svog dugmeta — poravnat s njim lijevo i desno. (Ranije: width:max-content, pa je panel bio širi od polja i virio van ekrana.) */ .controls-bar .dropdown { min-width: 0; width: 100%; left: 0; right: 0; max-width: none; } /* U uskom panelu duži nazivi gradova/kategorija se prelamaju umjesto da ga rastegnu. */ .controls-bar .dropdown-item { white-space: normal; overflow-wrap: anywhere; } .back-mag { grid-template-columns: 1fr; padding: 28px var(--pad-m); } .mag-hero { padding: 20px var(--pad-m) 32px; } .mag-hero .hero-img-wrap { order: -1; } /* Niža slika (bila 4/5 uspravno) — da naslov i uvod dođu u vidno polje */ .mag-hero .hero-img { aspect-ratio: 4/3; } .mag-hero h1 { font-size: 28px; } .editor-note { grid-template-columns: 1fr; gap: 14px; padding: 26px var(--pad-m); } .editor-note .label { writing-mode: horizontal-tb; transform: none; } .editor-note p { font-size: 20px; } .mag-grid .article, .mag-grid .article.lg, .mag-grid .article.md { grid-column: span 12; min-height: auto; } .mag-grid .article.lg .a-title { font-size: 26px; } .issues-strip { padding: 26px var(--pad-m); gap: 20px; } .arh-head { padding: 24px var(--pad-m) 14px; } .arh-head h4 { font-size: 26px; } .arh-close { margin-left: 0; } .arh-loading { padding: 26px var(--pad-m); } .events-widget { padding: 32px var(--pad-m); } .ew-grid { grid-template-columns: 1fr; } .ew-header { flex-direction: column; align-items: start; } /* Blok se spustio ispod naslova, pa i tekst ide lijevo (na desktopu je desno) */ .ew-header .stats { text-align: left; } /* "večeras?" je na desktopu uvučen (left: 2.6em ≈ 145px) da se uklopi uz naslov iznad. Na telefonu ta uvlaka gura riječ preko ruba sekcije, a .events-widget ima overflow:hidden — pa se tekst odsiječe. */ .ew-header h2 { font-size: clamp(40px, 11vw, 60px); } .ew-header h2 .italic { left: 0; top: -0.12em; padding: 0 8px; max-width: 100%; } .ew-header .stats b { font-size: 48px; } .single-wrap { padding: 24px var(--pad-m) 32px; max-width: 100%; overflow-x: hidden; } .single-article h1 { font-size: 36px; } .single-event h1 { font-size: 40px; } /* Ništa u tekstu ne smije prekoračiti širinu ekrana */ .se-content, .sa-content { overflow-wrap: anywhere; } .se-content img, .sa-content img { max-width: 100%; height: auto; } /* Tabele i blokovi koda se skroluju u sebi, ne vuku cijelu stranicu */ .se-content pre, .sa-content pre, .se-content table, .sa-content table { display: block; max-width: 100%; overflow-x: auto; } /* Duge lokacije/linkovi u bočnim detaljima događaja */ .se-side, .se-row { overflow-wrap: anywhere; } /* Uvodna galerija: uspravniji kadar i sitnije strelice. Prst ionako prevlači, pa strelice ovdje služe samo kao znak da ima još slika. */ .sa-gallery { margin-bottom: 24px; } .sag-slide img { aspect-ratio: 4/3; } .sag-nav { width: 34px; height: 34px; font-size: 16px; } .sag-nav.prev { left: 8px; } .sag-nav.next { right: 8px; } .sag-opis { font-size: 11px; padding: 24px 14px 12px; } .archive-hero { padding: 24px var(--pad-m) 16px; } .archive-wrap { padding: 0 var(--pad-m) 32px; } /* Desktop margin-top je 64px — previše iznad podnožja na telefonu */ .bottom-marquee { padding: 20px 0; margin-top: 40px; } .bottom-marquee-track { font-size: 28px; } /* Footer: desktop kolone skloni, prikaži centrirani mobilni */ .site-footer { display: none; } .site-footer-m { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: 28px var(--pad-m) 20px; } .site-footer-m .footer-logo { width: 34px; height: 34px; } .site-footer-m .footer-wordmark { font-size: 24px; } .site-footer-m .footer-wordmark-img { height: 30px; } .site-footer-m .footer-nav ul { gap: 20px; } .site-footer-m .footer-nav a { font-size: 14px; } } /* Uski telefoni (iPhone SE / mini): u pola širine ni 11px datuma ne stane, pa label pada nazad na 10px. Prag je 380px — na 390px (najčešći iPhone) ostaje veći font. */ @media (max-width: 380px) { .range-nav .range-label { font-size: 10px; } .range-label .rl-dash { margin: 0 -4px; } } /* ========================================================= Slike na listinzima: originalna boja + blagi teget overlay. Overlay ide preko ::before, jer ::after na nekim od ovih elemenata već nosi gradijent pri dnu (npr. .ev-img, .hero-poster, .em-img). Single/modal ostaju bez overlaya — ovaj blok ih namjerno ne dira. ========================================================= */ .event-card .ev-img, .hero-poster, .fe-img, .em-img, .a-img, .mag-hero .hero-img { position: relative; } .event-card .ev-img::before, .hero-poster::before, .fe-img::before, .em-img::before, .a-img::before, .mag-hero .hero-img::before { content: ''; position: absolute; inset: 0; background: rgba(13, 13, 43, 0.45); /* --navy */ pointer-events: none; } /* ========================================================= MODAL DOGAĐAJA ========================================================= */ /* Zaključavanje pozadine dok je modal otvoren. `position: fixed` (a ne samo overflow:hidden) je jedino što pouzdano radi na iOS Safariju — inače prst skrola stranicu iza modala umjesto sadržaja u njemu. JS postavlja `top: -Ypx` i vraća skrol pri zatvaranju. */ body.ks-modal-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } .ks-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; } .ks-modal[hidden] { display: none; } .ks-modal-backdrop { position: absolute; inset: 0; background: rgba(7, 7, 26, 0.8); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.2s; } .ks-modal.is-open .ks-modal-backdrop { opacity: 1; } .ks-modal-dialog { position: relative; z-index: 1; width: 100%; max-width: 600px; max-height: 90vh; display: flex; flex-direction: column; background: var(--navy); border: 1.5px solid var(--acid); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); transform: translateY(16px) scale(0.98); opacity: 0; transition: transform 0.2s ease, opacity 0.2s ease; } .ks-modal.is-open .ks-modal-dialog { transform: none; opacity: 1; } .ks-modal-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px; cursor: pointer; background: var(--navy-deep); border: 1.5px solid var(--line); color: var(--cream); font-size: 24px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; } .ks-modal-close:hover { border-color: var(--acid); color: var(--acid); } .ks-modal-body { display: flex; flex-direction: column; min-height: 0; flex: 1; } .ks-modal-loading { padding: 60px 24px; text-align: center; color: var(--lavender); font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; } /* Sadržaj (dolazi iz AJAX-a) */ .modal-scrollable-content { overflow-y: auto; flex: 1; min-height: 0; /* Kad se dođe do kraja liste, skrol se ne prenosi na stranicu iza modala. */ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .modal-event-hero { height: 150px; background-size: cover; background-position: center; background-color: var(--navy-deep); border-bottom: 1.5px solid var(--acid); } .modal-event-card { padding: 28px 28px 8px; } .modal-event-card .category-tag { display: inline-block; margin-bottom: 14px; background: var(--acid); color: var(--navy); padding: 5px 12px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .modal-event-title { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(28px, 5vw, 40px); line-height: 1.05; text-transform: none; letter-spacing: -0.02em; color: var(--cream); margin-bottom: 20px; /* Dugi naslov se prelama umjesto da gura modal ušir */ overflow-wrap: anywhere; word-break: break-word; hyphens: auto; } .modal-event-meta { font-family: 'Archivo', sans-serif; font-size: 15px; line-height: 2; color: var(--cream); padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .modal-event-meta strong { color: var(--lavender); font-weight: 700; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; margin-right: 6px; } .modal-event-content { font-family: 'Archivo', sans-serif; font-size: 15px; line-height: 1.7; color: var(--cream); padding: 20px 0; } .modal-event-content p { margin-bottom: 14px; } .modal-event-content a { color: var(--acid); } .event-disclaimer { font-family: 'Archivo', sans-serif; font-size: 12px; color: var(--lavender); opacity: 0.8; padding-bottom: 20px; } /* Ista napomena na stranici događaja — poravnata sa širinom opisa */ .single-event .event-disclaimer { max-width: 820px; margin-top: 24px; padding-bottom: 0; } /* Fiksne akcije na dnu */ .modal-fixed-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 16px 28px; border-top: 1.5px solid var(--line); background: var(--navy-deep); } .modal-action-buttons { display: flex; gap: 8px; position: relative; } .modal-action-button { position: relative; width: 46px; height: 46px; cursor: pointer; background: transparent; border: 1.5px solid var(--line); color: var(--cream); display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; } .modal-action-button:hover { border-color: var(--acid); color: var(--acid); } .modal-action-button svg { width: 20px; height: 20px; display: block; } /* Tekst dugmadi skriven vizuelno, ostaje za screen-readere (ikonice su dovoljne) */ .modal-action-button span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .modal-share-button.is-copied::after { content: 'Kopirano'; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--acid); color: var(--navy); padding: 3px 8px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; } .ks-action-menu { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 5; background: var(--navy); border: 1.5px solid var(--acid); min-width: 190px; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); } .ks-action-menu a { padding: 11px 16px; color: var(--cream); text-decoration: none; font-family: 'Archivo', sans-serif; font-size: 14px; border-bottom: 1px solid var(--line); transition: all 0.15s; } .ks-action-menu a:last-child { border-bottom: 0; } .ks-action-menu a:hover { background: var(--acid); color: var(--navy); } /* Na single stranici događaja dropdown ide ISPOD dugmeta */ .se-actions .ks-action-menu { top: calc(100% + 8px); bottom: auto; } .modal-btn { margin-left: auto; background: var(--acid); color: var(--navy); padding: 14px 24px; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 15px; text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none; white-space: nowrap; transition: all 0.2s; } .modal-btn:hover { background: var(--rose); color: var(--cream); } /* Sekundarno dugme "Izvor" — stoji lijevo od "Otkrij više". Obrub umjesto ispune, da primarna akcija ostane primarna. Ono nosi margin-left:auto i gura oba udesno, pa ga primarno gubi (ista dva auto marginalca bi razmakla dugmad na suprotne krajeve). */ /* "Izvor" — ikonica bez natpisa, uz "Otkrij više". Sav izgled dolazi iz .modal-action-button (46×46, obrub, hover), pa ovdje ostaje samo pozicija: auto margina gura je udesno, a primarno dugme svoju mora izgubiti — dvije auto margine bi dugmad razmakle na suprotne krajeve. Razmak daje `gap`. */ .modal-src-btn { margin-left: auto; } .modal-fixed-actions .modal-src-btn + .modal-btn { margin-left: 0; } @media (max-width: 700px) { .ks-modal { padding: 0; align-items: stretch; } /* Ništa ne smije prekoračiti širinu ekrana — bez vodoravnog skrola */ .ks-modal-dialog { max-width: 100vw; border: 0; overflow-x: hidden; /* 100vh na telefonu ne računa adresnu traku, pa dno modala (dugmad) završi ispod vidljivog ekrana i djeluje kao da se sadržaj ne skrola do kraja. dvh prati stvarnu visinu; vh ostaje kao fallback za starije browsere. */ max-height: 100vh; max-height: 100dvh; } .ks-modal-body, .modal-scrollable-content { max-width: 100%; overflow-x: hidden; } /* "Dodaj u kalendar": dropdown se rasteže preko cijele širine dugmeta. .se-actions je relativni okvir, a .se-btn je već width:100% — dovoljno je zakačiti meni i za desnu ivicu. min-width se mora poništiti da ga na uskim ekranima onih 190px ne izgura van. */ .se-actions .ks-action-menu { left: 0; right: 0; width: auto; min-width: 0; } .modal-event-hero { height: 130px; } .modal-event-card { padding: 24px var(--pad-m) 8px; max-width: 100%; } /* Duge lokacije i linkovi u opisu se prelamaju umjesto da šire modal */ .modal-event-meta, .modal-event-content { overflow-wrap: anywhere; } .modal-fixed-actions { padding: 14px var(--pad-m); } .modal-btn { padding: 13px 18px; font-size: 14px; } /* Uz tri ikonice u redu, na 390px treba stegnuti razmake */ .modal-fixed-actions { gap: 8px; } } /* ============================================================ IMPRESSUM ============================================================ */ .impressum-card { max-width: 780px; border: 1.5px solid var(--line); background: var(--navy-deep); } .imp-row { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 20px 28px; border-bottom: 1px solid var(--line); align-items: baseline; } .imp-row:last-child { border-bottom: 0; } .imp-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lavender); } .imp-value { font-size: 16px; color: var(--cream); } .imp-value a { color: var(--acid); text-decoration: none; } .imp-value a:hover { color: var(--rose); } @media (max-width: 700px) { .imp-row { grid-template-columns: 1fr; gap: 6px; padding: 16px var(--pad-m); } } /* ========================================================= SFF KALENDAR (page-kalendar-sff.php) Kalendar zaključan na kategoriju SFF, s filterom po kinu. Sve strukture (hero, tabovi, kontrolna traka, tijelo) dijele stil s /kalendar/ — ovdje se mijenja SAMO akcent, da se festival prepozna a stranica i dalje izgleda kao ostatak sajta. Boja: brend SFF crvena je #DF0911, ali na navy podlozi jedva prolazi kontrast. Zato token nosi posvijetljenu varijantu iz istog tona — bliža je --rose iz palete i čitljiva je i u tamnoj i u svijetloj temi. ========================================================= */ :root { --sff: #FF3B4E; } /* Hero: umjesto acid pravougaonika ide SFF crveni */ .cal-hero-sff h1 .accent-sff { background: var(--sff); color: var(--cream); } .cal-hero-sff .stats .sub { color: var(--sff); } /* Uvodni tekst iz wp-admina (sadržaj stranice) */ .sff-intro { max-width: var(--wrap); margin: 0 auto; padding: 24px var(--pad) 0; } .sff-intro p { font-family: 'Instrument Serif', serif; font-size: 22px; line-height: 1.45; color: var(--lavender); max-width: 820px; } .sff-intro p + p { margin-top: 12px; } .sff-intro p:last-child { margin-bottom: 0; } /* Aktivan filter po kinu — crveni okvir umjesto acid, da se vidi da je suženo na jedno kino. Otvoreno stanje ostaje acid kao svugdje: to je boja interakcije, ne stanja. */ .controls-bar-sff .filter-btn.has-active { border-color: var(--sff); background: rgba(255, 59, 78, 0.12); color: var(--cream); } .controls-bar-sff .filter-btn.has-active:hover { border-color: var(--sff); color: var(--sff); } .controls-bar-sff .filter-btn.has-active.open { background: var(--acid); color: var(--navy); border-color: var(--acid); } /* Broj projekcija uz kino u dropdownu */ .dropdown-item .di-count { float: right; margin-left: 12px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; opacity: 0.55; } .dropdown-item.is-empty { display: block; padding: 10px 18px; opacity: 0.6; font-style: italic; } /* SFF kao kategorija — isti ključ kao ostale kategorije drugdje u temi, da projekcije nose crveni akcent i van SFF stranice. */ .cat-block.cat-sff { border-top-color: var(--sff); } .event-card .ev-cat.cat-sff { color: var(--sff); } .event-card.event-card--row .ev-c.cat-sff { color: var(--sff); } .week-ev.cat-sff { border-left-color: var(--sff); } .m-ev.cat-sff { border-left-color: var(--sff); } .sae-cat.cat-sff { color: var(--sff); } @media (max-width: 700px) { .sff-intro { padding: 18px var(--pad-m) 0; } .sff-intro p { font-size: 18px; } } /* SFF u glavnom meniju — jedina crvena stavka, da se festival izdvoji iz stalnih rubrika. Podvlaka aktivne stavke ostaje ista mehanika kao drugdje. */ .main-nav a.nav-sff { color: var(--sff); font-weight: 700; } .main-nav a.nav-sff:hover { color: var(--acid); } .main-nav a.nav-sff.active::after { background: var(--sff); }