/* ========================================================================== deutsch.ba — Edukativni i ispitni centar, Tešanj Jedan CSS fajl za cijeli sajt. Bez build koraka, bez frameworka. Sadržaj: 1. Tokeni 2. Osnovno / reset 3. Tipografija 4. Layout 5. Dugmad i oznake 6. Header i navigacija 7. Hero 8. Ljestvica nivoa (A1–C1) 9. Termini 10. Kartice i mreže 11. Tabele (cijene) 12. Sadržajni tekst (ispitni red, pravilnik) 13. Galerija i lightbox 14. Forma 15. Footer 16. Pomoćne klase 17. Print i reduced-motion ========================================================================== */ /* fonts.css se učitava zasebno u , prije ovog fajla — @import bi napravio dodatni round-trip i usporio prvo iscrtavanje teksta. */ /* ============================ 1. Tokeni ================================= */ :root { /* Boje su izvedene iz logotipa (crna + trake njemačke zastave). Crvena je namjerno austrijska #C8102E — ÖSD je austrijski ispit, a ton djeluje službenije od zastavne njemačke crvene. */ --ink: #14110F; --ink-soft: #2A2621; --red: #C8102E; --red-dark: #A20C24; --gold: #E8B417; --gold-soft: #F6E7B4; --paper: #FBF9F5; --white: #FFFFFF; --line: #E4DFD6; --line-dark: #3A342D; --muted: #6B635A; --muted-dark: #A79E92; --ok: #1F7A44; /* Razmaci */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; /* Ostalo */ --wrap: 1140px; --r-sm: 8px; --r: 14px; --r-lg: 20px; --pill: 999px; --shadow: 0 1px 2px rgba(20,17,15,.04), 0 8px 24px rgba(20,17,15,.06); --shadow-lg: 0 2px 4px rgba(20,17,15,.05), 0 18px 44px rgba(20,17,15,.12); --ease: cubic-bezier(.4, 0, .2, 1); } /* ========================= 2. Osnovno / reset =========================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; /* sticky header */ /* Sprječava horizontalni scroll ako neki element ikad iscuri iz okvira. Namjerno `clip`, a ne `hidden` — `hidden` bi napravio scroll kontejner i pokvario position: sticky na headeru. */ overflow-x: clip; } body { margin: 0; background: var(--white); color: var(--ink); font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 17px; font-weight: 400; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; display: block; } /* Mora nadjačati display: grid/flex na .grid, .termin, .field itd. JS se oslanja na atribut hidden (termini, poruke o statusu). */ [hidden] { display: none !important; } a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--red-dark); } :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--gold-soft); color: var(--ink); } hr { border: 0; border-top: 1px solid var(--line); margin: var(--s7) 0; } /* Preskoči na sadržaj — za tastaturu i čitače ekrana */ .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--white); padding: var(--s3) var(--s4); z-index: 200; border-radius: 0 0 var(--r-sm) 0; } .skip:focus { left: 0; } /* =========================== 3. Tipografija ============================= */ h1, h2, h3, h4 { font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; margin: 0 0 var(--s4); text-wrap: balance; } h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); } h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); } h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -0.02em; } h4 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; } p { margin: 0 0 var(--s4); } p:last-child { margin-bottom: 0; } strong, b { font-weight: 700; } /* Nadnaslov — sitna verzalna oznaka, kao metapodatak na službenom dokumentu */ .eyebrow { display: inline-flex; align-items: center; gap: var(--s2); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s3); } .eyebrow::before { content: ""; width: 18px; height: 3px; background: var(--gold); border-radius: 2px; } .eyebrow--light { color: var(--muted-dark); } .lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.65; color: var(--muted); max-width: 62ch; } .lead--light { color: var(--muted-dark); } /* Naglašena riječ u naslovu */ .mark { color: var(--red); } .mark-gold { background: linear-gradient(transparent 62%, var(--gold-soft) 62%); padding: 0 .06em; } /* ============================= 4. Layout ================================ */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s5); } .wrap--narrow { max-width: 780px; } .section { padding-block: clamp(var(--s7), 8vw, var(--s9)); } .section--tight { padding-block: clamp(var(--s6), 5vw, var(--s7)); } .section--paper { background: var(--paper); } .section--ink { background: var(--ink); color: var(--white); } .section--ink h2, .section--ink h3 { color: var(--white); } .section--ink a:not(.btn) { color: var(--gold); } .section__head { max-width: 62ch; margin-bottom: var(--s7); } .section__head--center { margin-inline: auto; text-align: center; } .section__head--center .eyebrow { justify-content: center; } /* ======================== 5. Dugmad i oznake ============================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); font-family: inherit; font-size: .95rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1; padding: 15px 26px; border: 1.5px solid transparent; border-radius: var(--pill); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); } .btn:active { transform: translateY(1px); } .btn--red { background: var(--red); color: var(--white); } .btn--red:hover { background: var(--red-dark); color: var(--white); } .btn--ink { background: var(--ink); color: var(--white); } .btn--ink:hover { background: var(--ink-soft); color: var(--white); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover { background: var(--ink); color: var(--white); border-color: var(--ink); } .btn--light { background: var(--white); color: var(--ink); } .btn--light:hover { background: var(--gold); color: var(--ink); } .btn--outline-light { background: transparent; color: var(--white); border-color: var(--line-dark); } .btn--outline-light:hover { background: rgba(255,255,255,.08); color: var(--white); border-color: var(--muted-dark); } .btn--sm { padding: 10px 18px; font-size: .85rem; } .btn--full { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); } /* Sitna oznaka — nivo, status, kategorija */ .chip { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800; letter-spacing: .04em; padding: 5px 11px; border-radius: var(--pill); background: var(--paper); border: 1px solid var(--line); color: var(--ink); white-space: nowrap; } .chip--gold { background: var(--gold-soft); border-color: transparent; } .chip--red { background: var(--red); border-color: transparent; color: var(--white); } .chip--ok { background: rgba(31,122,68,.1); border-color: transparent; color: var(--ok); } .chip--dark { background: rgba(255,255,255,.08); border-color: var(--line-dark); color: var(--white); } .chip--muted { background: transparent; border-color: var(--line); color: var(--muted); } .chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); } /* ÖSD oznaka — koristi se u heroju i footeru */ .badge-osd { display: inline-flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--white); border: 1px solid var(--line); border-radius: var(--r); font-size: .84rem; line-height: 1.4; color: var(--muted); } .badge-osd strong { display: block; color: var(--ink); font-size: .92rem; } .badge-osd__seal { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--red); display: grid; place-items: center; font-size: .7rem; font-weight: 800; letter-spacing: .02em; color: var(--red); } /* ====================== 6. Header i navigacija ========================== */ .site-header { position: sticky; top: 0; z-index: 100; /* Namjerno BEZ backdrop-filter: on (kao i transform) pravi containing block za position:fixed potomke, pa bi se mobilna ladica (.nav__menu) zaključala unutar headera od 82px umjesto preko cijelog ekrana. */ background: var(--white); border-bottom: 1px solid var(--line); } /* Traka iz logotipa — crno / crveno / zlatno. Namjerno samo ovdje, kao zaglavlje službenog dokumenta. Nigdje drugdje na sajtu. */ .site-header::before { content: ""; display: block; height: 4px; background: linear-gradient(to right, var(--ink) 0 33.33%, var(--red) 33.33% 66.66%, var(--gold) 66.66% 100%); } .nav { display: flex; align-items: center; gap: var(--s5); min-height: 78px; } .nav__logo { flex: 0 0 auto; margin-right: auto; display: block; } .nav__logo img { width: 168px; height: auto; } .nav__list { display: flex; align-items: center; gap: var(--s2); list-style: none; margin: 0; padding: 0; } .nav__link { display: inline-flex; align-items: center; gap: 5px; padding: 9px 12px; border-radius: var(--r-sm); font-size: .92rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; white-space: nowrap; transition: background-color .15s var(--ease), color .15s var(--ease); } .nav__link:hover { background: var(--paper); color: var(--ink); } .nav__link::after { content: none; } .has-sub > .nav__link::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); opacity: .5; } /* Podmeni */ .has-sub { position: relative; } .sub { position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; list-style: none; margin: 0; padding: var(--s2); background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s; } .has-sub:hover > .sub, .has-sub:focus-within > .sub { opacity: 1; visibility: visible; transform: translateY(0); } .sub a { display: block; padding: 9px 12px; border-radius: var(--r-sm); font-size: .9rem; font-weight: 600; color: var(--ink); text-decoration: none; } .sub a:hover { background: var(--paper); color: var(--red); } /* Aktivna stranica. Namjerno preko [data-page] na , a NE preko class="active" u