/* Theme Name: Savez slijepih Herceg-Bosne Theme URI: https://savezshb.org Author: Savez slijepih Herceg-Bosne Description: Pristupačna (WCAG 2.1 AA) custom tema za Savez slijepih Herceg-Bosne. Uključuje čitač članaka (text-to-speech), traku pristupačnosti (uvećanje fonta, visoki kontrast), audio arhivu zvučnog časopisa "Kameni vrhunci" i formular za članstvo/kontakt/donacije. Version: 1.0.0 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: savezshb */ /* ========================================================= 0. CSS VARIJABLE — BOJE, TIPOGRAFIJA, RAZMACI ========================================================= */ :root{ /* Osnovna paleta — plava (povjerenje, mir) + toplo zlatna (svjetlo, orijentacija) */ --boja-primarna: #1B3A6B; /* tamno plava */ --boja-primarna-tamnija: #122747; --boja-primarna-svjetlija: #2C568F; --boja-akcent: #C98A1E; /* topla zlatna */ --boja-akcent-tamnija: #9E6B12; --boja-pozadina: #FFFFFF; --boja-pozadina-alt: #F4F6F9; --boja-tekst: #16191F; --boja-tekst-suptilan: #454B57; --boja-granica: #D7DCE3; --boja-uspjeh: #1F7A3D; --boja-greska: #B3261E; /* Tipografija */ --font-glavni: "Atkinson Hyperlegible", "Segoe UI", Verdana, Arial, sans-serif; --font-naslovi: "Atkinson Hyperlegible", "Segoe UI", Verdana, Arial, sans-serif; --font-baza: 18px; --line-height-baza: 1.7; /* Razmaci */ --razmak-xs: 0.5rem; --razmak-sm: 1rem; --razmak-md: 1.75rem; --razmak-lg: 3rem; --razmak-xl: 5rem; --radius: 10px; --sirina-sadrzaja: 1180px; --focus-boja: #C98A1E; --focus-sirina: 3px; } /* Visoki kontrast — uključuje se JS-om dodavanjem klase na */ html.vk{ --boja-primarna: #000000; --boja-primarna-tamnija: #000000; --boja-akcent: #FFD400; --boja-akcent-tamnija: #E0B800; --boja-pozadina: #000000; --boja-pozadina-alt: #0A0A0A; --boja-tekst: #FFFFFF; --boja-tekst-suptilan: #F2F2F2; --boja-granica: #FFFFFF; --focus-boja: #FFD400; } /* ========================================================= 1. RESET ========================================================= */ *, *::before, *::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; font-size:112.5%; } /* 112.5% od 16px = ~18px bazni font */ body{ margin:0; font-family:var(--font-glavni); font-size:1rem; line-height:var(--line-height-baza); color:var(--boja-tekst); background:var(--boja-pozadina); -webkit-font-smoothing:antialiased; } img{ max-width:100%; height:auto; display:block; } a{ color:var(--boja-primarna); text-decoration-thickness:2px; text-underline-offset:3px; } html.vk a{ color:var(--boja-akcent); } a:hover{ color:var(--boja-akcent); } ul,ol{ padding-left:1.4em; } button{ font-family:inherit; } /* Skalabilnost fonta preko trake pristupačnosti — mijenja korijenski font-size, pa se sve što je u rem jedinicama (naslovi, dugmad, tekst) uvećava zajedno i dosljedno */ html[data-font-scale="1"]{ font-size:129.4%; } html[data-font-scale="2"]{ font-size:146.25%; } html[data-font-scale="3"]{ font-size:168.75%; } /* ========================================================= 2. FOKUS I PRISTUPAČNOST — KLJUČNO ZA OVU TEMU ========================================================= */ :focus{ outline:none; } :focus-visible{ outline: var(--focus-sirina) solid var(--focus-boja); outline-offset: 3px; border-radius: 4px; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{ outline: var(--focus-sirina) solid var(--focus-boja); outline-offset: 3px; } .skip-link{ position:absolute; left:-9999px; top:0; z-index:100000; background:var(--boja-primarna); color:#fff; padding:1rem 1.5rem; font-weight:700; font-size:1rem; border-radius:0 0 8px 0; } .skip-link:focus{ left:0; } .screen-reader-text{ border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; width:1px; margin:-1px; overflow:hidden; padding:0; position:absolute !important; word-wrap:normal !important; } /* Poštuj postavku smanjenog animiranja */ @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } } /* ========================================================= 3. LAYOUT HELPERI ========================================================= */ .container{ width:100%; max-width:var(--sirina-sadrzaja); margin-inline:auto; padding-inline:var(--razmak-sm); } .grid-2col{ display:grid; grid-template-columns: 2.1fr 1fr; gap:var(--razmak-lg); } @media (max-width: 900px){ .grid-2col{ grid-template-columns:1fr; } } /* ========================================================= 4. NASLOVI ========================================================= */ h1,h2,h3,h4,h5,h6{ font-family:var(--font-naslovi); color:var(--boja-primarna); line-height:1.25; margin-top:0; } html.vk h1, html.vk h2, html.vk h3, html.vk h4{ color:var(--boja-tekst); } h1{ font-size:clamp(1.8rem, 3.2vw, 2.6rem); } h2{ font-size:clamp(1.4rem, 2.4vw, 1.9rem); } h3{ font-size:1.3rem; } .section-naslov{ display:flex; align-items:center; justify-content:space-between; gap:var(--razmak-sm); margin-bottom:var(--razmak-md); border-bottom:3px solid var(--boja-akcent); padding-bottom:0.6rem; } .section-naslov h2{ margin:0; } .section-naslov .svi-link{ white-space:nowrap; font-weight:700; } /* ========================================================= 5. GUMBI ========================================================= */ .gumb{ display:inline-flex; align-items:center; gap:0.5rem; background:var(--boja-primarna); color:#fff; border:2px solid var(--boja-primarna); padding:0.75rem 1.4rem; border-radius:8px; font-weight:700; font-size:1rem; cursor:pointer; text-decoration:none; transition: background .15s ease, color .15s ease, transform .1s ease; } .gumb:hover{ background:var(--boja-primarna-tamnija); color:#fff; transform:translateY(-1px); } .gumb--akcent{ background:var(--boja-akcent); border-color:var(--boja-akcent); color:#16191F; } .gumb--akcent:hover{ background:var(--boja-akcent-tamnija); color:#16191F; } .gumb--outline{ background:transparent; color:var(--boja-primarna); } html.vk .gumb--outline{ color:var(--boja-tekst); border-color:var(--boja-tekst); } .gumb--outline:hover{ background:var(--boja-primarna); color:#fff; } .gumb--sm{ padding:0.45rem 0.9rem; font-size:0.9rem; } /* ========================================================= 6. KARTICE (vijesti, arhiva) ========================================================= */ .kartica{ background:var(--boja-pozadina); border:1px solid var(--boja-granica); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; height:100%; } html.vk .kartica{ border-width:2px; } .kartica__slika{ aspect-ratio:16/9; overflow:hidden; background:var(--boja-pozadina-alt); } .kartica__slika img{ width:100%; height:100%; object-fit:cover; } .kartica__sadrzaj{ padding:var(--razmak-sm); display:flex; flex-direction:column; gap:0.6rem; flex:1; } .kartica__sadrzaj .gumb{ margin-top:auto; align-self:flex-start; } .kartica__datum{ font-size:0.9rem; color:var(--boja-tekst-suptilan); font-weight:600; } .kartica__naslov{ font-size:1.15rem; margin:0; } .kartica__naslov a{ color:var(--boja-primarna); text-decoration:none; } html.vk .kartica__naslov a{ color:var(--boja-tekst); } .kartica__naslov a:hover{ text-decoration:underline; } .kartica__izvod{ color:var(--boja-tekst-suptilan); font-size:0.98rem; margin:0; } .vijesti-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--razmak-md); } @media (max-width:900px){ .vijesti-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:600px){ .vijesti-grid{ grid-template-columns:1fr; } }