/* ================================================================ SPKD Prosvjeta Nemačka — Globalni dizajn Boje: Plava #023969 | Crvena #c62f32 | Bijela #ffffff Fontovi: Cormorant Garamond (naslovi) | Montserrat (tekst) ================================================================ */ /* Lokalni fontovi — bez Google Fonts zahtjeva, GDPR konforman */ /* fonts.css se učitava direktno iz HTML */ /* ── VARIJABLE — zajednički token sistem ─────────────────────── */ :root { /* Prosvjeta brand */ --blue: #023969; --blue-deep: #011f3d; --blue-mid: #034a87; --blue-light: #e8eef6; --red: #c62f32; --red-dark: #9e2325; --white: #ffffff; --bg: #f6f8fb; --bg-dark: #edf1f7; --text: #1a1a2e; --text-mid: #3d4a5c; --text-light: #6b7a8d; --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Montserrat', system-ui, sans-serif; --radius: 4px; --shadow: 0 4px 20px rgba(2, 57, 105, 0.12); --shadow-lg: 0 12px 48px rgba(2, 57, 105, 0.22); --trans: 0.32s cubic-bezier(0.4, 0, 0.2, 1); /* Legacy aliases za stare WP stranice */ --p-blue: #023969; --p-blue-deep: #011f3d; --p-blue-mid: #034a87; --p-blue-light: #e8eef6; --p-red: #c62f32; --p-red-dark: #9e2325; --p-white: #ffffff; --p-bg: #f6f8fb; --p-bg-dark: #edf1f7; --p-text: #1a1a2e; --p-text-mid: #3d4a5c; --p-text-light: #6b7a8d; --p-serif: 'Cormorant Garamond', Georgia, serif; --p-sans: 'Montserrat', system-ui, sans-serif; --p-radius: 4px; --p-shadow: 0 4px 20px rgba(2, 57, 105, 0.12); --p-shadow-lg: 0 12px 48px rgba(2, 57, 105, 0.2); --p-trans: 0.32s cubic-bezier(0.4, 0, 0.2, 1); } /* ── RESET & BASE ────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--p-sans) !important; background: var(--p-bg) !important; color: var(--p-text) !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden; } /* Padding-top za fiksni header */ body.p-layout-loaded { padding-top: 80px !important; } img { max-width: 100%; height: auto; } a { text-decoration: none; } /* ── SAKRIJ WORDPRESS HEADER I FOOTER ───────────────────────── */ #masthead, .site-header, #colophon, .site-footer, .ast-above-header-wrap, .ast-below-header-wrap, .ast-breadcrumbs-wrapper, .breadcrumb-trail, .ast-comment-area, .ast-author-info, .post-navigation, .comments-area, /* Cookie Consent "powered by" link */ a[href*="devowl.io"], [id$="-powered-by"] { display: none !important; } /* ── CUSTOM HEADER (.p-hdr) ─────────────────────────────────── */ .p-hdr { position: fixed !important; top: 0; left: 0; right: 0; height: 90px; background: var(--p-blue-deep); border-bottom: 3px solid var(--p-red); z-index: 9999; display: flex; align-items: center; padding: 0 clamp(1rem, 4vw, 3rem); transition: box-shadow var(--p-trans); } .p-hdr.scrolled { box-shadow: 0 4px 24px rgba(1, 31, 61, 0.45); } .p-hdr-inner { width: 100%; max-width: 1300px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .p-hdr-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; } .p-hdr-logo img { height: 50px; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); } .p-hdr-logo-name { display: flex; flex-direction: column; gap: 11px; line-height: 1; } .p-hdr-logo-name strong { font-family: var(--p-serif); font-size: 1.3rem; font-weight: 700; color: var(--p-white); letter-spacing: 0.02em; line-height: 1; } .p-hdr-logo-name span { font-family: var(--p-sans); font-size: 0.58rem; font-weight: 600; color: rgba(255,255,255,0.55); letter-spacing: 0.18em; text-transform: uppercase; line-height: 1; margin-top: 2px; } /* Navigacija */ .p-hdr-nav { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .p-hdr-nav a { display: block; font-family: var(--p-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,0.78); padding: 0.45rem 0.8rem; border-radius: var(--p-radius); transition: color var(--p-trans), background var(--p-trans); white-space: nowrap; text-decoration: none; } .p-hdr-nav a:hover, .p-hdr-nav a.p-active { color: var(--p-white); background: rgba(255,255,255,0.1); } .p-hdr-nav .p-nav-cta a { background: var(--p-red) !important; color: var(--p-white) !important; padding: 0.45rem 1.1rem; border-radius: var(--p-radius); font-weight: 700; } .p-hdr-nav .p-nav-cta a:hover { background: var(--p-red-dark) !important; } /* ── Desktop dropdown ─────────────────────────────────────── */ .p-nav-dropdown { position: relative; } .p-nav-dropdown-toggle { display: flex !important; align-items: center; gap: 4px; cursor: default; user-select: none; } .p-nav-arrow { font-size: 0.55em; line-height: 1; display: inline-block; transition: transform 0.22s ease; } .p-nav-dropdown:hover .p-nav-arrow { transform: rotate(180deg); } .p-dropdown-menu { position: absolute; top: calc(100% + 4px); left: 0; background: var(--p-blue-deep); border-top: 2px solid var(--p-red); min-width: 200px; list-style: none; padding: 0.4rem 0; margin: 0; box-shadow: 0 10px 28px rgba(0,0,0,0.4); border-radius: 0 0 6px 6px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 10000; } .p-nav-dropdown:hover .p-dropdown-menu, .p-nav-dropdown:focus-within .p-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .p-dropdown-menu li { list-style: none; } .p-dropdown-menu a { display: block !important; padding: 0.55rem 1.3rem !important; font-family: var(--p-sans) !important; font-size: 0.71rem !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.7) !important; background: transparent !important; border-radius: 0 !important; white-space: nowrap; transition: color 0.15s, background 0.15s, padding-left 0.15s; } .p-dropdown-menu a:hover, .p-dropdown-menu a.p-active { color: var(--p-white) !important; background: rgba(255,255,255,0.08) !important; padding-left: 1.6rem !important; } /* ── Mobile dropdown ─────────────────────────────────────── */ .p-mob-dropdown { list-style: none; } .p-mob-dropdown-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0.8rem 1.5rem; background: none; border: none; font-family: var(--p-sans); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.75); cursor: pointer; text-align: left; } .p-mob-dropdown-toggle:hover { color: var(--p-white); } .p-mob-dropdown.open .p-nav-arrow { transform: rotate(180deg); } .p-mob-subnav { list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; background: rgba(0,0,0,0.2); transition: max-height 0.3s ease; } .p-mob-dropdown.open .p-mob-subnav { max-height: 200px; } .p-mob-sub-link { display: block; padding: 0.65rem 1.5rem 0.65rem 2.4rem !important; font-size: 0.82rem !important; color: rgba(255,255,255,0.6) !important; border-left: 2px solid var(--p-red); margin-left: 1.5rem; text-decoration: none; } .p-mob-sub-link:hover, .p-mob-sub-link.p-active { color: var(--p-white) !important; } /* Hamburger */ .p-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; flex-shrink: 0; } .p-hamburger span { display: block; width: 24px; height: 2px; background: var(--p-white); border-radius: 2px; transition: all 0.3s ease; transform-origin: center; } .p-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .p-hamburger.open span:nth-child(2) { opacity: 0; } .p-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobilni meni */ .p-mobile-nav { position: fixed; top: 0; right: -100%; width: min(300px, 88vw); height: 100vh; background: var(--p-blue-deep); border-left: 3px solid var(--p-red); z-index: 10000; padding: 90px 1.5rem 2rem; display: flex; flex-direction: column; gap: 0; list-style: none; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; } .p-mobile-nav.open { right: 0; } .p-mobile-nav a { display: block; font-family: var(--p-sans); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.75); padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); transition: color var(--p-trans), padding var(--p-trans); text-decoration: none; } .p-mobile-nav a:hover { color: var(--p-white); padding-left: 6px; } .p-mobile-nav .p-nav-cta a { color: var(--p-red) !important; font-weight: 700; } .p-nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(3px); z-index: 9998; display: none; } .p-nav-overlay.open { display: block; } /* ── ORNAMENT TRAKA ──────────────────────────────────────────── */ .p-ornament-strip { width: 100%; height: 68px; background: url('wp-content/uploads/2024/10/Deo-ornamenta1.png') repeat-x center center; background-size: auto 56px; background-color: var(--p-white); display: block; border-top: 1px solid rgba(2,57,105,0.08); border-bottom: 1px solid rgba(2,57,105,0.08); } /* Uvijek bijela pozadina - ornament mora biti vidljiv */ .p-ornament-strip--dark { background-color: var(--p-white); border-top: 3px solid var(--p-red); border-bottom: 3px solid var(--p-blue); } /* ── BIJELI GAP FIX — nuliranje Astra padding/margin koji stvaraju prazninu ── */ /* Astra inline CSS postavlja padding-top: 118px na .ast-article-single (za transparentni header). Naš layout već rješava ovo sa body padding-top: 80px, pa Astrin 118px treba nulirati. */ body.p-layout-loaded .ast-article-single { padding-top: 0 !important; } body.p-layout-loaded .entry-content, body.p-layout-loaded .entry-content > *:first-child { margin-top: 0 !important; margin-block-start: 0 !important; } /* alignfull blokovi zauzimaju punu širinu */ body.p-layout-loaded .entry-content > .alignfull, body.p-layout-loaded .entry-content > [class*="uagb-block-"].alignfull, body.p-layout-loaded .entry-content > [class*="uagb-container"].alignfull { width: 100vw !important; max-width: 100vw !important; position: relative; left: 50%; right: 50%; margin-left: -50vw !important; margin-right: -50vw !important; margin-top: 0 !important; } /* Tekst unutar cover blokova — uvijek bijeli */ .wp-block-cover h1, .wp-block-cover h2, .wp-block-cover h3, .wp-block-cover p, .wp-block-cover .wp-block-cover__inner-container * { color: var(--p-white) !important; text-shadow: 0 2px 8px rgba(0,0,0,0.4) !important; } .wp-block-cover h1::after, .wp-block-cover h2::after { display: none !important; } /* Tekst na TAMNIM pozadinama — bijeli tekst samo za tamne boje */ .has-vivid-red-background-color *, .has-vivid-red-background-color h1, .has-vivid-red-background-color h2, .has-vivid-red-background-color h3, .has-vivid-red-background-color p, .has-very-dark-gray-background-color *, .has-primary-background-color *, .has-contrast-background-color *, [style*="background-color: #0"] h1, [style*="background-color: #0"] h2, [style*="background-color: #0"] h3, [style*="background-color: #0"] h4, [style*="background-color: #0"] p, [style*="background-color: #0"] span, [style*="background-color: #1"] h1, [style*="background-color: #1"] h2, [style*="background-color: #1"] h3, [style*="background-color: #1"] p, [style*="background-color: #2"] h1, [style*="background-color: #2"] h2, [style*="background-color: #2"] h3, [style*="background-color: #2"] p, [style*="background-color: #c62"] *, [style*="background-color: #c63"] *, [style*="background-color: rgb(2,"] h1, [style*="background-color: rgb(2,"] h2, [style*="background-color: rgb(2,"] p { color: var(--p-white) !important; } /* Eksplicitno resetuj tekst na SVIJETLIM pozadinama */ .has-white-background-color, .has-white-background-color h1, .has-white-background-color h2, .has-white-background-color h3, .has-white-background-color h4, .has-white-background-color p, .has-white-background-color span, .has-white-background-color a, .has-light-gray-background-color, .has-light-gray-background-color h1, .has-light-gray-background-color h2, .has-light-gray-background-color h3, .has-light-gray-background-color p, .has-pale-pink-background-color h1, .has-pale-pink-background-color h2, .has-pale-pink-background-color p, [style*="background-color: #f"] h1, [style*="background-color: #f"] h2, [style*="background-color: #f"] h3, [style*="background-color: #f"] h4, [style*="background-color: #f"] p, [style*="background-color: #f"] span, [style*="background-color: #e"] h1, [style*="background-color: #e"] h2, [style*="background-color: #e"] h3, [style*="background-color: #e"] p, [style*="background-color: #e"] span { color: var(--p-text) !important; } /* Separator na tamnim pozadinama */ .has-vivid-red-background-color .wp-block-separator, .has-very-dark-gray-background-color .wp-block-separator, [style*="background-color: #0"] .wp-block-separator, [style*="background-color: #1"] .wp-block-separator { border-color: rgba(255,255,255,0.4) !important; background: rgba(255,255,255,0.4) !important; } /* ── NASLOV STRANICE ─────────────────────────────────────────── */ .p-page-banner { background: linear-gradient(135deg, var(--p-blue-deep) 0%, var(--p-blue) 100%); padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem) 0; position: relative; overflow: hidden; } .p-page-banner::before { content: ''; position: absolute; inset: 0; background-image: url('wp-content/uploads/2024/10/Deo-ornamenta2-edited.png'); background-repeat: no-repeat; background-size: 500px auto; background-position: right -50px center; opacity: 0.05; pointer-events: none; } .p-page-banner-inner { max-width: 1200px; margin: 0 auto; } .p-page-banner h1 { font-family: var(--p-serif) !important; font-size: clamp(1.8rem, 4vw, 3rem) !important; font-weight: 700 !important; color: var(--p-white) !important; line-height: 1.2 !important; margin: 0 0 0.5rem !important; } .p-page-banner-crumb { font-family: var(--p-sans); font-size: 0.7rem; color: rgba(255,255,255,0.45); letter-spacing: 0.08em; padding: 0.5rem 0 1.5rem; } .p-page-banner-crumb a { color: rgba(255,255,255,0.45); transition: color var(--p-trans); text-decoration: none; } .p-page-banner-crumb a:hover { color: var(--p-white); } /* ── WRAPPER ZA SADRŽAJ ─────────────────────────────────────── */ #page.hfeed, .hfeed.site { padding-top: 0 !important; } #content.site-content, .site-content { background: transparent !important; padding: 0 !important; } /* Ukloni Astra ast-container ograničenje širine — bijeli prostor s desne strane */ #content > .ast-container, .site-content > .ast-container { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } #primary.content-area { max-width: 100% !important; padding: 0 !important; float: none !important; width: 100% !important; } /* #main bez paddinga — content blokovi sami upravljaju rastojanjem */ #main.site-main { max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Sadržaj koji NIJE full-width dobija padding i max-width */ body.p-layout-loaded .entry-content > *:not(.alignfull):not([class*="uagb-block-"]):not([class*="uagb-container"]):not(.wp-block-cover):not(.wp-block-group):not(.wp-block-media-text) { max-width: 1200px; margin-left: auto !important; margin-right: auto !important; padding-left: clamp(1rem, 4vw, 3rem) !important; padding-right: clamp(1rem, 4vw, 3rem) !important; } /* ── Video elementi — spriječi prazan bijeli prostor ─────────── */ .wp-block-video video, .entry-content video { max-width: 100%; background: #111; display: block; } .wp-block-video figure, .entry-content figure:has(video) { margin: 0 auto; max-width: 848px; } /* ── Tekst paragraf u uagb-ifb-desc — ograniči širinu i dodaj padding ─ */ /* Sprečava da tekst ide od ruba do ruba ekrana na blog postovima. NEMA color ovdje — boja ostaje onakva kakvu UAGB blok definira (bijela na tamnoj pozadini, tamna na svjetloj). */ .uagb-ifb-desc { max-width: 820px; margin-left: auto !important; margin-right: auto !important; padding: clamp(1rem,4vw,2.5rem) clamp(1.5rem,5vw,4rem) !important; line-height: 1.85; } /* ── uagb naslovi — bijeli na tamnoj pozadini ────────────────── */ /* Ovi naslovi su uvijek unutar tamno-plavih UAGB kontejnera */ .uagb-ifb-title, .uagb-ifb-title strong, .uagb-ifb-title-prefix, .uagb-ifb-title-prefix strong, .uagb-heading-text, .uagb-heading-text strong { color: #ffffff !important; } /* ── ENTRY HEADER sakrivena — naslov je u hero bloku ─────────── */ .entry-header { display: none !important; } /* ── UAGB hero blok — naslov stranice na vrhu ───────────────── */ /* H1 u UAGB info-box (hero naslov stranice) */ .uagb-ifb-title { font-family: var(--p-serif) !important; font-size: clamp(2.2rem, 5vw, 3.8rem) !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -0.01em !important; } /* H1/H2 u cover blokovima — veliki hero naslovi */ .wp-block-cover h1, .wp-block-cover .wp-block-cover__inner-container h1 { font-family: var(--p-serif) !important; font-size: clamp(2.5rem, 6vw, 4.2rem) !important; font-weight: 700 !important; line-height: 1.1 !important; } /* H1/H2 u UAGB heading blokovima */ .uagb-heading-text { font-family: var(--p-serif) !important; font-size: clamp(1.6rem, 3vw, 2.5rem) !important; font-weight: 700 !important; } /* UAGB advanced heading unutar flex grupe — heading mora biti puna širina da bi text-align: center koji UAG CSS postavlja zaista centrirao tekst. Bez width:100% flexbox shrinkuje div na content-width i centar ne funkcioniše. */ .wp-block-group-is-layout-flex .wp-block-uagb-advanced-heading { width: 100% !important; text-align: center !important; } .wp-block-group-is-layout-flex .wp-block-uagb-advanced-heading .uagb-heading-text { text-align: center !important; } /* ── ENTRY TITLE (ako je vidljiva) ──────────────────────────── */ .entry-title, .page-title { font-family: var(--p-serif) !important; font-size: clamp(2.5rem, 5vw, 3.8rem) !important; font-weight: 700 !important; color: var(--p-blue) !important; line-height: 1.2 !important; margin: 0 0 1rem !important; } .entry-title::after, .page-title::after { content: ''; display: block; width: 60px; height: 4px; background: var(--p-red); border-radius: 2px; margin-top: 0.7rem; } /* ── ENTRY CONTENT ───────────────────────────────────────────── */ .entry-content, .page-content, .entry-summary { font-family: var(--p-sans) !important; font-size: 1.15rem !important; line-height: 1.8 !important; color: var(--p-text-mid) !important; } .entry-content p, .entry-content li { font-size: 1.15rem !important; line-height: 1.8 !important; } /* H2 standard: 1.75-2.5rem, H3: 1.35-1.75rem */ .entry-content h1 { font-family: var(--p-serif) !important; font-size: clamp(1.9rem, 3.5vw, 2.8rem) !important; font-weight: 700 !important; color: var(--p-blue) !important; line-height: 1.2 !important; margin: 2rem 0 0.8rem !important; } .entry-content h2 { font-family: var(--p-serif) !important; font-size: clamp(1.6rem, 2.8vw, 2.1rem) !important; font-weight: 700 !important; color: var(--p-blue) !important; line-height: 1.25 !important; margin: 2rem 0 0.8rem !important; } .entry-content h3 { font-family: var(--p-serif) !important; font-size: clamp(1.35rem, 2vw, 1.75rem) !important; font-weight: 600 !important; color: var(--p-blue) !important; line-height: 1.3 !important; margin: 1.5rem 0 0.6rem !important; } .entry-content h4, .entry-content h5, .entry-content h6 { font-family: var(--p-sans) !important; font-size: 1.15rem !important; font-weight: 700 !important; color: var(--p-blue) !important; line-height: 1.4 !important; margin: 1.2rem 0 0.5rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } .entry-content p { margin-bottom: 1.2rem !important; } .entry-content a { color: var(--p-blue) !important; border-bottom: 1px solid rgba(2,57,105,0.3); transition: color var(--p-trans), border-color var(--p-trans); text-decoration: none; } .entry-content a:hover { color: var(--p-red) !important; border-color: var(--p-red); } .entry-content ul, .entry-content ol { padding-left: 1.5rem !important; margin-bottom: 1.2rem !important; } .entry-content li { margin-bottom: 0.4rem !important; } .entry-content blockquote { border-left: 4px solid var(--p-red) !important; background: var(--p-blue-light) !important; padding: 1.2rem 1.5rem !important; margin: 1.5rem 0 !important; border-radius: 0 var(--p-radius) var(--p-radius) 0; } .entry-content blockquote p { font-family: var(--p-serif) !important; font-size: 1.15rem !important; font-style: italic !important; color: var(--p-blue) !important; } .entry-content img { border-radius: var(--p-radius); box-shadow: var(--p-shadow); } .entry-content figure { margin: 1.5rem 0 !important; } .entry-content figcaption { font-size: 0.8rem !important; color: var(--p-text-light) !important; text-align: center !important; margin-top: 0.5rem !important; font-style: italic; } /* ── GUTENBERG BLOKOVI ──────────────────────────────────────── */ .wp-block-image img { border-radius: var(--p-radius) !important; } .wp-block-quote { border-left: 4px solid var(--p-red) !important; background: var(--p-blue-light) !important; padding: 1rem 1.5rem !important; border-right: none !important; } .wp-block-quote p { font-family: var(--p-serif) !important; font-size: 1.2rem !important; color: var(--p-blue) !important; font-style: italic !important; } .wp-block-separator { border: none !important; height: 52px !important; background: url('wp-content/uploads/2024/10/Deo-ornamenta1.png') repeat-x center !important; background-size: auto 44px !important; margin: 2rem 0 !important; opacity: 1 !important; } .wp-block-buttons .wp-block-button__link, .wp-element-button { background: var(--p-red) !important; color: var(--p-white) !important; border-radius: var(--p-radius) !important; font-family: var(--p-sans) !important; font-size: 0.78rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; padding: 0.8rem 2rem !important; border: none !important; transition: background var(--p-trans), transform var(--p-trans) !important; } .wp-block-buttons .wp-block-button__link:hover { background: var(--p-red-dark) !important; transform: translateY(-1px) !important; } /* ── SPECIJALNI SLUČAJEVI TEKSTA ─────────────────────────────── */ /* UAGB Info Box naslovi — neutral, boja ovisi o kontekstu */ .entry-content .uagb-ifb-title { font-family: var(--p-serif) !important; font-size: clamp(1.5rem, 2.5vw, 2.2rem) !important; font-weight: 700 !important; line-height: 1.25 !important; } .entry-content .uagb-ifb-title::after { display: none !important; } .entry-content .uagb-ifb-desc { font-size: 1.05rem !important; line-height: 1.65 !important; } /* ── HERO INFO-BOX ───────────────────────────────────────────── */ /* PRVI kontejner u entry-content je uvijek hero banner sa tamnom/foto pozadinom. UAGB postavlja pozadine u vanjskim CSS fajlovima (ne inline), pa koristimo :first-child pozicijski selektor umjesto detekcije boje pozadine. Fallback dark background osigurava vidljivost bijelog teksta i kad UAG CSS nedostaje. */ /* Hero container — puna širina */ .entry-content > .uagb-is-root-container:first-child { background-color: var(--p-blue-deep) !important; position: relative; } /* Neutrališi UAG ::before overlay koji koristi var(--ast-global-color-8) (može biti bijela/nedefinisana boja → bijeli overlay prekriva sliku) */ .entry-content > .uagb-is-root-container:first-child::before { background: transparent !important; opacity: 0 !important; } /* Taman overlay — osigurava čitljivost bijelog teksta na svim hero slikama */ .entry-content > .uagb-is-root-container:first-child::after { content: ''; position: absolute; inset: 0; background: rgba(1, 31, 61, 0.32); z-index: 1; pointer-events: none; } /* Svi elementi unutar hero kontejnera dobijaju position:relative + z-index:10 da bi bili IZNAD ::after overlay sloja (z-index:1). Bez position:relative, z-index se ne primjenjuje. */ .entry-content > .uagb-is-root-container:first-child > .uagb-container-inner-blocks-wrap, .entry-content > .uagb-is-root-container:first-child .uagb-ifb-content, .entry-content > .uagb-is-root-container:first-child .uagb-infobox__content-wrap, .entry-content > .uagb-is-root-container:first-child .uagb-infobox-margin-wrapper, .entry-content > .uagb-is-root-container:first-child .uagb-ifb-title-wrap, .entry-content > .uagb-is-root-container:first-child .wp-block-uagb-info-box, .entry-content > .uagb-is-root-container:first-child .wp-block-uagb-advanced-heading, .entry-content > .uagb-is-root-container:first-child .wp-block-uagb-image, .entry-content > .uagb-is-root-container:first-child .wp-block-uagb-container { position: relative !important; z-index: 10 !important; } .entry-content > .uagb-is-root-container:first-child .uagb-ifb-title { color: #ffffff !important; text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 4px 20px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,1) !important; font-size: clamp(2.4rem, 6vw, 4.5rem) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; text-align: center !important; width: 100% !important; position: relative !important; z-index: 10 !important; } .entry-content > .uagb-is-root-container:first-child .uagb-ifb-content, .entry-content > .uagb-is-root-container:first-child .uagb-infobox__content-wrap, .entry-content > .uagb-is-root-container:first-child .uagb-ifb-title-wrap, .entry-content > .uagb-is-root-container:first-child .uagb-infobox-margin-wrapper { text-align: center !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } .entry-content > .uagb-is-root-container:first-child .uagb-ifb-desc { color: rgba(255,255,255,0.92) !important; text-shadow: 0 1px 6px rgba(0,0,0,0.6) !important; font-size: clamp(1rem, 1.8vw, 1.25rem) !important; position: relative !important; z-index: 10 !important; } /* Heading blokovi u hero kontejneru — bijeli tekst iznad overlaya */ .entry-content > .uagb-is-root-container:first-child .uagb-heading-text { color: #ffffff !important; text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 4px 20px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,1) !important; position: relative !important; z-index: 10 !important; } .entry-content > .uagb-is-root-container:first-child .uagb-sub-heading, .entry-content > .uagb-is-root-container:first-child .uagb-heading-desc { color: rgba(255,255,255,0.88) !important; position: relative !important; z-index: 10 !important; } /* Naslovi u ostalim kontejnerima (content sekcije) — tamni tekst */ .entry-content > .uagb-is-root-container:not(:first-child) .uagb-ifb-title { text-shadow: none !important; } .entry-content > .uagb-is-root-container:not(:first-child) .uagb-ifb-desc { text-shadow: none !important; } /* wp-block-cover hero naslovi */ .wp-block-cover .uagb-ifb-title { color: var(--p-white) !important; text-shadow: 0 3px 14px rgba(0,0,0,0.75) !important; } /* Separator unutar UAGB info-box na tamnoj pozadini */ [style*="background-color: #0"] .wp-block-separator, [style*="background-color: #1"] .wp-block-separator, [style*="background-color: #3"] .wp-block-separator, .has-vivid-red-background-color .wp-block-separator { border-color: rgba(255,255,255,0.35) !important; background: rgba(255,255,255,0.35) !important; height: 2px !important; } /* ── SVECANA AKADEMIJA — centriranje teksta ──────────────────── */ /* "Прва председница" infobox unutrašnji kontejner — UAG CSS ima max-width: 50% */ .uagb-block-8icn2sva { max-width: 100% !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } .uagb-block-1iod3vn4 .uagb-ifb-title, .uagb-block-1iod3vn4 .uagb-ifb-desc, .uagb-block-1iod3vn4 .uagb-ifb-content, .uagb-block-1iod3vn4 .uagb-infobox__content-wrap { text-align: center !important; width: 100% !important; } /* "Чланови Српских центра" heading */ .uagb-block-9b40cd95.wp-block-uagb-advanced-heading, .uagb-block-9b40cd95 .uagb-heading-text, .uagb-block-9b40cd95 .uagb-sub-heading { text-align: center !important; width: 100% !important; } /* UAGB / Spectra blokovi */ .uagb-post-grid-inner { border-radius: var(--p-radius) !important; overflow: hidden !important; box-shadow: var(--p-shadow) !important; background: var(--p-white) !important; transition: transform var(--p-trans), box-shadow var(--p-trans) !important; } .uagb-post-grid-inner:hover { transform: translateY(-5px) !important; box-shadow: var(--p-shadow-lg) !important; } .uagb-post__title a { font-family: var(--p-serif) !important; color: var(--p-blue) !important; font-size: 1.15rem !important; font-weight: 600 !important; } .uagb-post__title a:hover { color: var(--p-red) !important; } .uagb-cta-text, .uagb-post-cta { color: var(--p-red) !important; font-weight: 600 !important; } /* ── KARTICE POSTOVA ─────────────────────────────────────────── */ article.type-post, .ast-article-post { background: var(--p-white); border-radius: var(--p-radius); overflow: hidden; box-shadow: var(--p-shadow); margin-bottom: 2rem; transition: transform var(--p-trans), box-shadow var(--p-trans); border-top: 3px solid transparent; } article.type-post:hover { transform: translateY(-4px); box-shadow: var(--p-shadow-lg); border-top-color: var(--p-red); } .single article.type-post { transform: none !important; border-top: none !important; box-shadow: none !important; background: transparent !important; } /* Meta (datum, autor) */ .entry-meta, .posted-on, .byline { font-family: var(--p-sans) !important; font-size: 0.85rem !important; color: var(--p-text-light) !important; letter-spacing: 0.05em !important; } .entry-meta a, .posted-on a { color: var(--p-red) !important; border-bottom: none !important; } /* Kategorije/tagovi */ .ast-terms-badges .ast-badge, .cat-links a, .tag-links a { background: var(--p-blue) !important; color: var(--p-white) !important; padding: 2px 10px !important; border-radius: 2px !important; font-size: 0.62rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } /* Čitaj više */ .ast-read-more, .more-link, a.more-link { background: transparent !important; color: var(--p-blue) !important; border: 2px solid var(--p-blue) !important; padding: 0.5rem 1.3rem !important; border-radius: var(--p-radius) !important; font-family: var(--p-sans) !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; transition: background var(--p-trans), color var(--p-trans) !important; display: inline-block !important; } .ast-read-more:hover, .more-link:hover { background: var(--p-blue) !important; color: var(--p-white) !important; border-bottom: 2px solid var(--p-blue) !important; } /* Thumbnail */ .post-thumbnail, .featured-image-wrap { border-radius: var(--p-radius) !important; overflow: hidden !important; margin-bottom: 2rem !important; } .post-thumbnail img { width: 100% !important; object-fit: cover !important; } /* ── GALERIJA ────────────────────────────────────────────────── */ .wp-block-gallery, .gallery { gap: 8px !important; } .wp-block-gallery .wp-block-image img, .gallery-item img { border-radius: var(--p-radius) !important; box-shadow: var(--p-shadow) !important; transition: transform 0.4s ease, box-shadow 0.4s ease !important; } .wp-block-gallery .wp-block-image:hover img, .gallery-item:hover img { transform: scale(1.03) !important; box-shadow: var(--p-shadow-lg) !important; } /* ── CUSTOM IMAGE GRID (zamjena za wp-block-gallery) ─────────── */ .p-img-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 1.5rem 0; } .p-img-grid img { width: 100%; height: 240px; object-fit: cover; border-radius: var(--p-radius); box-shadow: var(--p-shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; display: block; } .p-img-grid img:hover { transform: scale(1.02); box-shadow: var(--p-shadow-lg); } @media (max-width: 640px) { .p-img-grid { grid-template-columns: repeat(2, 1fr); } .p-img-grid img { height: 160px; } } /* ── JOŠ OBJAVA — related posts (masonry tiles) ──────────────── */ .p-related-posts { background: #0e1e30 !important; padding: 4rem 1.5rem 4.5rem; } .p-rp-inner { max-width: 1240px; margin: 0 auto; } .p-rp-heading { font-family: var(--p-serif); font-size: 2rem; font-weight: 700; color: var(--p-white); text-align: center; margin: 0; letter-spacing: 0.08em; text-transform: uppercase; } .p-rp-heading::after { content: ''; display: block; width: 40px; height: 2px; background: var(--p-red); margin: 0.6rem auto 2.2rem; } /* Masonry grid: 1 large left + 2 small stacked right */ .p-rp-tiles { display: grid; grid-template-columns: 1fr 0.5fr; grid-template-rows: repeat(2, 260px); gap: 12px; } @media (max-width: 860px) { .p-rp-tiles { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, 220px); } } @media (max-width: 560px) { .p-rp-tiles { grid-template-columns: 1fr; grid-template-rows: 280px 200px 200px; } } /* Tile base */ .p-rp-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 16px; overflow: hidden; background-size: cover; background-position: center; background-color: var(--p-blue-deep); text-decoration: none; cursor: pointer; transition: transform 0.3s ease; } .p-rp-tile:hover { transform: scale(0.98) rotate(0.3deg); } /* Primary tile spans both rows */ .p-rp-tile--primary { grid-column: 1; grid-row: 1 / 3; } @media (max-width: 560px) { .p-rp-tile--primary { grid-column: 1; grid-row: 1; } } /* Gradient overlay — animates up on hover */ .p-rp-tile::before { content: ''; position: absolute; inset: 0; height: 130%; background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.3) 50%, transparent 100%); transition: height 0.5s ease; pointer-events: none; } .p-rp-tile:hover::before { height: 100%; } /* Tile content */ .p-rp-tile-body { position: relative; z-index: 2; padding: 1.4rem 1.6rem; display: flex; align-items: flex-end; gap: 1rem; } .p-rp-tile--primary .p-rp-tile-body { padding: 2rem 2.2rem; } .p-rp-tile-text { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; } .p-rp-tile-cat { font-family: var(--p-sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,0.25); backdrop-filter: blur(8px); padding: 0.22rem 0.6rem; border-radius: 4px; width: fit-content; } .p-rp-tile-title { font-family: var(--p-serif); font-weight: 700; color: #fff; margin: 0; line-height: 1.25; font-size: 1.1rem; } .p-rp-tile--primary .p-rp-tile-title { font-size: clamp(1.3rem, 2.5vw, 1.9rem); } .p-rp-tile-arrow { color: #fff; font-size: 1.8rem; line-height: 1; flex-shrink: 0; transition: transform 0.3s ease; opacity: 0.85; } .p-rp-tile:hover .p-rp-tile-arrow { transform: translateX(6px); opacity: 1; } /* CTA */ .p-rp-cta { text-align: center; margin-top: 2.2rem; } .p-rp-all { font-family: var(--p-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); text-decoration: none; border: 1.5px solid rgba(255,255,255,0.3); padding: 0.65rem 2.2rem; border-radius: var(--p-radius); transition: background 0.2s, color 0.2s, border-color 0.2s; display: inline-block; } .p-rp-all:hover { background: var(--p-red); color: #fff; border-color: var(--p-red); } /* ── PROSVETNI DOGAĐAJI — sekcija sa 3 kartice programa ──────── */ .p-programs { background: var(--p-bg); padding: clamp(3.5rem, 7vw, 6rem) clamp(1rem, 4vw, 3rem); } .p-programs-inner { max-width: 1200px; margin: 0 auto; } .p-programs-head { text-align: center; margin-bottom: 3rem; } .p-programs-head .p-label { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--p-red); margin-bottom: 0.6rem; } .p-programs-head .p-h2 { font-family: 'Cormorant Garamond', 'Cormorant', serif; font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; color: var(--p-blue); margin: 0 0 0.5rem; line-height: 1.15; } .p-programs-head .p-h2 strong { color: var(--p-red); } .p-programs-head .p-subtitle { color: var(--p-text-mid); font-size: 1rem; } .p-prog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .p-prog-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(2,57,105,0.10); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; } .p-prog-card:hover { transform: translateY(-4px); box-shadow: 0 10px 40px rgba(2,57,105,0.18); } .p-prog-card-img { width: 100%; height: 240px; object-fit: cover; object-position: center top; display: block; } .p-prog-card-body { padding: 1.5rem 1.6rem 2rem; display: flex; flex-direction: column; flex: 1; } .p-prog-card-title { font-family: 'Cormorant Garamond', 'Cormorant', serif; font-size: 1.5rem; font-weight: 700; color: var(--p-blue); margin: 0 0 0.9rem; line-height: 1.2; } .p-prog-card-text { font-size: 0.9rem; color: var(--p-text-mid); line-height: 1.7; flex: 1; margin: 0 0 1.5rem; } .p-prog-btn { display: inline-block; padding: 0.7rem 1.4rem; background: var(--p-blue); color: #fff !important; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border-radius: 4px; transition: background 0.2s ease; align-self: flex-start; } .p-prog-btn:hover { background: var(--p-red); color: #fff !important; } /* Ornament iznad sekcije */ .p-programs .p-ornament-top { display: flex; justify-content: center; margin-bottom: 2rem; } .p-programs .p-ornament-top img { max-width: 600px; width: 90%; opacity: 0.5; } @media (max-width: 900px) { .p-prog-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .p-prog-grid { grid-template-columns: 1fr; } .p-prog-card-img { height: 200px; } } /* ── PROSVETINA HIMNA ────────────────────────────────────────── */ .p-himna { background: #1a1008; background-image: linear-gradient(rgba(10,6,2,0.72), rgba(10,6,2,0.72)), url('wp-content/uploads/2024/10/Aleksa-Santic.jpg'); background-size: cover; background-position: center; background-attachment: fixed; padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 5vw, 4rem); position: relative; overflow: hidden; } /* Sepia tinted overlay za stari papir efekat */ .p-himna::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(101,76,40,0.18) 0%, rgba(30,15,5,0.35) 100%); pointer-events: none; } .p-himna-inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 5rem; align-items: center; } .p-himna-rule { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(198,173,120,0.7) 30%, rgba(198,173,120,0.7) 70%, transparent); margin-bottom: 1.8rem; } .p-himna-author { font-size: 0.85rem; color: rgba(220,200,160,0.75); font-style: italic; margin: 0 0 0.7rem; letter-spacing: 0.03em; } .p-himna-title { font-family: 'Cormorant Garamond', 'Cormorant', serif; font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 700; color: #e8d8a8; margin: 0 0 2rem; letter-spacing: 0.04em; } .p-himna-stanzas { color: rgba(235,220,185,0.92); font-family: 'Cormorant Garamond', 'Cormorant', serif; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.9; margin-bottom: 2.5rem; } .p-himna-stanzas p { margin: 0 0 1.4em; } .p-himna-stanzas p:last-child { margin-bottom: 0; } .p-himna-img { width: 340px; flex-shrink: 0; position: relative; } .p-himna-img img { width: 100%; height: auto; display: block; border-radius: 4px; filter: sepia(0.6) contrast(1.1) brightness(0.85); box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(198,173,120,0.2); } .p-himna-caption { text-align: center; font-size: 0.78rem; color: rgba(198,173,120,0.65); font-style: italic; margin: 0.7rem 0 0; letter-spacing: 0.05em; } @media (max-width: 860px) { .p-himna-inner { grid-template-columns: 1fr; gap: 3rem; } .p-himna-img { width: 260px; margin: 0 auto; } .p-himna { background-attachment: scroll; } } /* ── CUSTOM FOOTER (.p-ftr) ──────────────────────────────────── */ .p-ftr { background: var(--p-blue-deep); color: rgba(255,255,255,0.65); margin-top: 4rem; } .p-ftr-ornament { width: 100%; height: 80px; background: url('wp-content/uploads/2024/10/Ornament-Prosvjeta-separator-beli-e1728743313795.png') no-repeat center; background-size: 560px auto; background-color: var(--p-blue-deep); border-top: 2px solid rgba(198,47,50,0.4); } .p-ftr-main { padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem) 0; } .p-ftr-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 2.5rem; max-width: 1300px; margin: 0 auto 3rem; } .p-ftr-brand-name { font-family: var(--p-serif); font-size: 1.5rem; font-weight: 700; color: var(--p-white); letter-spacing: 0.02em; display: block; margin-bottom: 3px; } .p-ftr-brand-sub { font-family: var(--p-sans); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.4); display: block; margin-bottom: 1rem; } .p-ftr-tagline { font-family: var(--p-serif); font-style: italic; font-size: 1.05rem; color: rgba(255,255,255,0.45); line-height: 1.6; margin-bottom: 1.3rem; padding-left: 0.8rem; border-left: 2px solid rgba(198,47,50,0.4); } .p-ftr-social { display: flex; gap: 10px; } .p-ftr-social a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.15); border-radius: var(--p-radius); color: rgba(255,255,255,0.5); font-size: 0.8rem; font-weight: 700; font-family: var(--p-sans); text-decoration: none; transition: all var(--p-trans); } .p-ftr-social a:hover { background: var(--p-red); border-color: var(--p-red); color: var(--p-white); transform: translateY(-2px); } .p-ftr-col-title { font-family: var(--p-sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--p-red); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(198,47,50,0.25); display: block; } .p-ftr-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; } .p-ftr-links a { font-family: var(--p-sans); font-size: 0.9rem; color: rgba(255,255,255,0.5); display: flex; align-items: center; gap: 6px; transition: color var(--p-trans), padding var(--p-trans); text-decoration: none; } .p-ftr-links a::before { content: '›'; color: var(--p-red); opacity: 0; transition: opacity var(--p-trans); } .p-ftr-links a:hover { color: rgba(255,255,255,0.9); padding-left: 4px; } .p-ftr-links a:hover::before { opacity: 1; } .p-ftr-contact { font-family: var(--p-sans); font-size: 0.85rem; color: rgba(255,255,255,0.5); line-height: 1.7; margin-top: 1rem; } .p-ftr-contact a { color: rgba(198,47,50,0.75); transition: color var(--p-trans); text-decoration: none; } .p-ftr-contact a:hover { color: var(--p-red); } .p-ftr-bottom { border-top: 1px solid rgba(255,255,255,0.07); max-width: 1300px; margin: 0 auto; padding: 1.2rem 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; } .p-ftr-copy { font-family: var(--p-sans); font-size: 0.8rem; color: rgba(255,255,255,0.35); letter-spacing: 0.04em; } .p-ftr-legal { display: flex; gap: 1.2rem; } .p-ftr-legal a { font-family: var(--p-sans); font-size: 0.8rem; color: rgba(255,255,255,0.4); transition: color var(--p-trans); text-decoration: none; } .p-ftr-legal a:hover { color: var(--p-red); } /* ── ASTRA RELATED POSTS — "JOŠ OBJAVA" sekcija ───────────────────────── WordPress statički izvoz ne prenosi dinamiku, pa slike ostaju slomljene. Ovaj blok resetuje Astra stilove i daje naš dizajn karticama. ──────────────────────────────────────────────────────────────────────── */ .ast-single-related-posts-container { background: var(--p-bg-dark); padding: 3rem clamp(1rem, 4vw, 3rem) 4rem; margin-top: 3rem; } .ast-related-posts-title-section { text-align: center; margin-bottom: 2rem; } .ast-related-posts-title { font-family: var(--p-serif) !important; font-size: clamp(1.4rem, 3vw, 2rem) !important; font-weight: 700 !important; color: var(--p-blue) !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; position: relative; display: inline-block; padding-bottom: 0.6rem; } .ast-related-posts-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: var(--p-red); border-radius: 2px; } .ast-related-posts-wrapper { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1.5rem !important; max-width: 1200px; margin: 0 auto; } @media (max-width: 768px) { .ast-related-posts-wrapper { grid-template-columns: 1fr !important; } } @media (min-width: 769px) and (max-width: 1024px) { .ast-related-posts-wrapper { grid-template-columns: repeat(2, 1fr) !important; } } .ast-related-post { background: var(--p-white) !important; border-radius: var(--p-radius) !important; overflow: hidden !important; box-shadow: var(--p-shadow) !important; transition: transform var(--p-trans), box-shadow var(--p-trans) !important; display: flex !important; flex-direction: column !important; } .ast-related-post:hover { transform: translateY(-4px) !important; box-shadow: var(--p-shadow-lg) !important; } .ast-related-posts-inner-section { display: flex !important; flex-direction: column !important; height: 100% !important; } .ast-related-post-content { display: flex !important; flex-direction: column !important; height: 100% !important; } /* Slika — fiksna visina, cover pozicioniranje */ .ast-related-post-featured-section { flex-shrink: 0 !important; height: 220px !important; overflow: hidden !important; } .post-thumb-img-content, .post-thumb-img-content.post-thumb { height: 100% !important; padding-bottom: 0 !important; /* poništi Astra aspect-ratio hack */ } .post-thumb-img-content a { display: block !important; height: 100% !important; } .ast-related-post-featured-section img, .post-thumb-img-content img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Tekst dio */ .ast-related-post-content .entry-header { padding: 1rem 1.2rem 0.5rem !important; } .ast-related-post-title.entry-title { font-family: var(--p-serif) !important; font-size: 1.15rem !important; font-weight: 700 !important; line-height: 1.35 !important; margin: 0 !important; } .ast-related-post-title a { color: var(--p-blue) !important; text-decoration: none !important; transition: color var(--p-trans) !important; } .ast-related-post-title a:hover { color: var(--p-red) !important; } /* ── SCROLL REVEAL ───────────────────────────────────────────── */ .p-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.65s ease, transform 0.65s ease; } .p-reveal.p-visible { opacity: 1; transform: translateY(0); } /* ── RESPONSIVNOST ───────────────────────────────────────────── */ @media (max-width: 1024px) { .p-ftr-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } .p-hdr-logo-name { display: none; } } @media (max-width: 768px) { .p-hdr-nav { display: none !important; } .p-hamburger { display: flex !important; } .p-ftr-grid { grid-template-columns: 1fr; gap: 1.5rem; } #main.site-main { padding: 1.5rem 1rem; } .entry-content { font-size: 0.95rem !important; } } @media (min-width: 768px) { .p-hdr-logo-name { display: flex; } } /* ── DARK UAGB CONTAINERS — bijeli tekst (background-image blokovi) ──────── Identificirani skriptom koji je skenirao sve uag-css-*.css fajlove. Ovi blokovi imaju background-image i zahtijevaju bijeli tekst. ──────────────────────────────────────────────────────────────────────── */ :is( .uagb-block-19b2a460, .uagb-block-1ecd7bfd, .uagb-block-3080212d, .uagb-block-326f5ce2, .uagb-block-51e59497, .uagb-block-53ffded2, .uagb-block-540eb58f, .uagb-block-5d9b1fc5, .uagb-block-744aa5ce, .uagb-block-8081a270, .uagb-block-8d678c7b, .uagb-block-8e2de56f, .uagb-block-a2747c4b, .uagb-block-abdee2e6, .uagb-block-adyl4jln, .uagb-block-aqtkd7tm, .uagb-block-b040d82e, .uagb-block-c35e965e, .uagb-block-c80eab18, .uagb-block-de14425c, .uagb-block-dq3eoira, .uagb-block-e5d39e65, .uagb-block-egcuxckz, .uagb-block-euduywcj, .uagb-block-f632ae23, .uagb-block-fpkyowwh, .uagb-block-fq3jryuf, .uagb-block-incutxks, .uagb-block-iwyb6rqz, .uagb-block-l0tdrgeu, .uagb-block-nkzcbgyf, .uagb-block-qmogu4lx, .uagb-block-u6okr1t7, .uagb-block-vezl4pza, .uagb-block-wd99bmtj ) :is(h1, h2, h3, h4, h5, h6, p, li, span, .uagb-ifb-title, .uagb-ifb-desc, .uagb-ifb-content, .wp-block-heading) { color: var(--p-white) !important; text-shadow: 0 1px 6px rgba(0,0,0,0.55) !important; } :is( .uagb-block-19b2a460, .uagb-block-1ecd7bfd, .uagb-block-3080212d, .uagb-block-326f5ce2, .uagb-block-51e59497, .uagb-block-53ffded2, .uagb-block-540eb58f, .uagb-block-5d9b1fc5, .uagb-block-744aa5ce, .uagb-block-8081a270, .uagb-block-8d678c7b, .uagb-block-8e2de56f, .uagb-block-a2747c4b, .uagb-block-abdee2e6, .uagb-block-adyl4jln, .uagb-block-aqtkd7tm, .uagb-block-b040d82e, .uagb-block-c35e965e, .uagb-block-c80eab18, .uagb-block-de14425c, .uagb-block-dq3eoira, .uagb-block-e5d39e65, .uagb-block-egcuxckz, .uagb-block-euduywcj, .uagb-block-f632ae23, .uagb-block-fpkyowwh, .uagb-block-fq3jryuf, .uagb-block-incutxks, .uagb-block-iwyb6rqz, .uagb-block-l0tdrgeu, .uagb-block-nkzcbgyf, .uagb-block-qmogu4lx, .uagb-block-u6okr1t7, .uagb-block-vezl4pza, .uagb-block-wd99bmtj ) :is(h1, h2, h3, h4, h5, h6) { font-size: clamp(1.6rem, 4vw, 3rem) !important; font-weight: 700 !important; line-height: 1.25 !important; } /* ================================================================ UAGB-BLOCK-E8BC0B4A — sadržajni blok (cuvaru-zejtinlik, pet-godina) Background: linear-gradient(#FFFFFF, #FFFFFF) = bijela pozadina Tekst mora biti taman (bio je u listi dark-containers → bijeli tekst) ================================================================ */ .uagb-block-e8bc0b4a { background: var(--p-bg) !important; } .uagb-block-e8bc0b4a :is(h1, h2, h3, h4, h5, h6, p, li, span, .uagb-ifb-title, .uagb-ifb-desc, .uagb-heading-text) { color: var(--p-text) !important; text-shadow: none !important; } /* Naslov H1 u hero sekciji (uagb-block-a25895f6) na cuvaru-zejtinlik koristi var(--ast-global-color-5) = #fff → naš hero overlay sve pokriva */ .uagb-block-a25895f6 .uagb-heading-text { color: #ffffff !important; text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 4px 20px rgba(0,0,0,0.7) !important; } /* ================================================================ SRPSKI PISCI I PJESNICI — hero z-index fix Ovaj hero block nema .uagb-container-inner-blocks-wrap, sadržaj je direktno unutar containera → treba vlastiti z-index ================================================================ */ .uagb-block-egcuxckz > * { position: relative; z-index: 2; } /* ================================================================ PRIDRUŽI SE PROSVJETI — page-specific fixes ================================================================ */ /* "Ко смо МИ?" h2 — bijela boja (tamno plava pozadina) */ .uagb-block-e6f6047c .uagb-heading-text { color: #ffffff !important; } /* "УЛОЖИТЕ" h6 naslovi — smanji veličinu, tamno plava boja */ .uagb-block-030cb5e2 .uagb-heading-text, .uagb-block-08c33048 .uagb-heading-text, .uagb-block-4099fdb5 .uagb-heading-text { color: var(--p-blue) !important; font-size: clamp(1rem, 2vw, 1.35rem) !important; text-shadow: none !important; } /* Opisi ispod "УЛОЖИТЕ" naslova — povećaj font, tamna boja */ .uagb-block-7dd74371 .uagb-heading-text, .uagb-block-9312f7f0 .uagb-heading-text, .uagb-block-0fdf399c .uagb-heading-text { font-size: 1rem !important; color: var(--p-text-mid) !important; } /* Dugme "Прочитај Више" — bijeli tekst */ .uagb-block-65mtm61n .uagb-button__link, .uagb-block-65mtm61n .wp-block-button__link, .uagb-block-65mtm61n a { color: #ffffff !important; } .uagb-block-65mtm61n .uagb-button__icon svg path { fill: #ffffff !important; } /* "Управа СПКД" sekcija — centriraj tekst i dugme */ .uagb-block-cykfsdpp { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .uagb-block-fkp5u1w0 .uagb-ifb-desc { text-align: center !important; } .uagb-block-gkqf5a2i { text-align: center !important; } .uagb-block-gkqf5a2i .uagb-buttons__wrap { justify-content: center !important; }