/* ============================================================ i18n-r01.css — CC-LANG-01 · SR / EN / FR R404_MULTILINGUAL_R01 (2026-08-25) Dodatni sloj. NIJEDNO postojeće pravilo iz `site.css` se ne menja i ne prepisuje — ovde žive samo stvari kojih na jednojezičnom sajtu nije ni bilo (birač jezika) i sitne korekcije koje traži DUŽI tekst na engleskom i francuskom. Zašto poseban fajl a ne dopuna `site.css`: `site.css` nosi otisak sadržaja u imenu (`site..css`) i keširan je godinu dana kao `immutable`. Menjati ga znači menjati otisak na svim srpskim stranama. R03 je to jednom uradio SVESNO — ispravka mete za prst je pripadala `site.css` jer se tiče srpskog izgleda, pa je fajl preimenovan i sve reference prepisane (dokaz: `01_INVENTORY/SR_SOURCE_DIFF_R03.md`). Lokalizacioni slojevi i dalje idu ovde, ne tamo. Boje su isključivo postojeći SIGNAL tokeni: --ink, --muted, --gold, --line, --line-strong, --panel, --bg-2. Nova paleta se ne uvodi. ============================================================ */ /* ============================================================ 1 · BIRAČ JEZIKA U TRACI (desktop, ≥1024 px) Traka se skuplja na 1023 px (`site.css`: .nav-links,.nav-cta → display:none). Iznad tog praga birač stoji u traci, ispod njega pripada fioci — jedan birač po širini, nikad dva. ============================================================ */ .lang-switch { display: inline-flex; align-items: stretch; gap: 2px; flex: 0 0 auto; padding: 3px; border: 1px solid var(--line-strong, rgba(244, 240, 230, 0.16)); border-radius: 999px; background: rgba(244, 240, 230, 0.02); font-family: var(--font-m, 'IBM Plex Mono', Consolas, monospace); } .lang-opt { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 30px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; line-height: 1; color: var(--dim, #8b877b); text-decoration: none; transition: color 160ms ease, background 160ms ease; } .lang-opt:hover { color: var(--ink, #f4f0e6); background: rgba(244, 240, 230, 0.05); } /* Trenutni jezik nosi PUNU pločicu, ne samo drugu boju teksta: oblik je signal koji se vidi i bez razlikovanja boja. `aria-current` nosi istu informaciju za čitače ekrana. */ .lang-opt[aria-current="true"] { background: var(--gold, #e9b850); color: #131208; font-weight: 700; } .lang-opt[aria-current="true"]:hover { background: var(--gold-hi, #ffe2a0); color: #131208; } .lang-opt:focus-visible { outline: 2px solid var(--gold-hi, #ffe2a0); outline-offset: 2px; } @media (max-width: 1023px) { .nav-in .lang-switch { display: none; } } /* ============================================================ 2 · BIRAČ JEZIKA U FIOCI (mobilni, ≤1023 px) Zaseban red na dnu fioke, iznad telefona. Segmenti su 44×44 px — iznad praga za prst i na 320 px širine. ============================================================ */ /* `site.css` drži podnožje fioke kao JEDAN red: `display:flex; justify-content:space-between` — CTA levo, telefon desno. Birač jezika je treći element i na 390 px ih sve tri sabije: francuski CTA („Envoyer une demande") se prelomi u tri reda, a telefon i birač iscure iz vidljivog dela. Curenje se NE vidi u proveri vodoravnog preloma dokumenta, jer je `.menu` fiksiran i sam odseca sadržaj — otkriveno je tek gledanjem snimka na 390 px. Zato `qa.js` sada meri i to. Rešenje je najmanje moguće: podnožje sme da prelomi, a birač uzima svoj red preko cele širine. Na uskim ekranima i CTA ide u svoj red, jer „Envoyer une demande" i broj telefona ne staju jedno pored drugog. Pravila važe samo tamo gde se ovaj fajl učitava — a to su isključivo strane koje birač i imaju. */ .menu-foot { flex-wrap: wrap; } .menu-lang { flex: 1 0 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line, rgba(244, 240, 230, 0.09)); } /* CTA preko cele širine SAMO na engleskom i francuskom. Srpski „Pošaljite upit" i broj telefona staju jedno pored drugog i tako su i izgledali pre ove runde — §25 traži 0 regresija na srpskom, a promena rasporeda koju niko nije tražio jeste regresija, i kad izgleda bolje. */ @media (max-width: 460px) { html[lang="en"] .menu-foot .btn, html[lang="fr"] .menu-foot .btn { flex: 1 0 100%; justify-content: center; } html[lang="en"] .menu-foot .menu-tel, html[lang="fr"] .menu-foot .menu-tel { margin-top: 4px; } } .menu-lang-h { font-family: var(--font-m, 'IBM Plex Mono', Consolas, monospace); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim, #8b877b); flex: 0 1 auto; min-width: 0; } /* Fioka daje svakom svoju tipografiju (`.mnav a`), pa se ovde mora nadjačati na nivou segmenta — inače se SR/EN/FR sudare u pločici. Visina je 44 px, ne 38: QA na 768 px je izmerio 44×38 i prijavio metu nižu od praga. 38 px je bilo dovoljno da izgleda uredno, ali meta za prst se ne meri okom. */ .menu-lang .lang-switch { padding: 2px; } .menu-lang .lang-switch .lang-opt { min-width: 44px; min-height: 44px; padding: 0 10px; font-family: var(--font-m, 'IBM Plex Mono', Consolas, monospace); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 0; } @media (max-width: 360px) { .menu-lang { gap: 8px; } .menu-lang .lang-switch .lang-opt { min-width: 40px; padding: 0 6px; } } /* ============================================================ 3 · DUŽI TEKST — korekcije, ne redizajn Engleski i francuski su na istim mestima duži od srpskog: francuski po pravilu 15–25 %, engleski oko 5–10 % na naslovima, ali znatno više na dugmadima („Send an enquiry" vs „Pošaljite upit" je granični slučaj, „Demande de devis gratuit" prelazi). Ova pravila NE menjaju ni jedan raspored — samo dozvoljavaju da tekst prelomi umesto da iscuri iz elementa. ============================================================ */ /* Dugmad: srpski nikad ne prelama CTA. Francuski ume. Umesto sužavanja fonta (što bi razbilo ritam trake) dozvoljava se prelom u dva reda, sa `text-wrap: balance` da drugi red ne ostane sa jednom rečju. */ html[lang="en"] .btn, html[lang="fr"] .btn { white-space: normal; text-wrap: balance; } /* Traka: francuske stavke su duže, pa im treba tešnji razmak pre nego što se traka slomi na burger. Prag 1023 ostaje nepromenjen. */ html[lang="fr"] .nav-links { gap: clamp(13px, 1.5vw, 26px); } /* Naslovi: `Archivo` na 800 sa vrlo tesnim `letter-spacing` ume da preseče duže francuske reči na uskim ekranima. Prelom reči je dozvoljen samo tamo gde je alternativa vodoravno curenje. */ html[lang="fr"] h1, html[lang="fr"] h2, html[lang="en"] h1, html[lang="en"] h2 { overflow-wrap: break-word; } /* Tabele poređenja: francuski „Ce qui vous arrive" / „Ce qui règle le problème" su duži od srpskih zaglavlja, pa se ćelije na tabletu sabijaju. Malo manji korak fonta rešava bez promene rastera. */ @media (max-width: 860px) { html[lang="fr"] .cmp th, html[lang="fr"] .cmp td { font-size: 14px; } } /* Kartice cena: naziv paketa ostaje engleski/originalan, ali potpis ispod njega je duži. Bez ovoga potpis gura CTA iz linije. */ html[lang="fr"] .price-card h3, html[lang="en"] .price-card h3 { text-wrap: balance; } /* ============================================================ 4 · STRINGOVI KOJE PRAVI CSS — trenutno ih NEMA Provereno 2026-08-25: u `site..css` nijedno `content:` ne nosi tekst (samo `\00B7` i `↗`), pa nema srpskog stringa koji bi zaobišao prevodioca. Stari `i18n.css` je imao takav slučaj („Preporuka" na istaknutoj kartici cena) — SIGNAL ga je prebacio u HTML, gde mu je i mesto. Ovo se ne sme pretpostaviti nego proveriti: `lint.js` ima proveru CSS_CONTENT koja pada čim se u CSS-u pojavi `content:` sa slovima. ============================================================ */ /* ============================================================ 5 · BIRAČ NA STRANAMA BEZ LJUSKE (.lang-standalone) ⚠ `demo.css` NE definise SIGNAL tokene (--gold, --ink, --dim…) — definiše ih `site.css`, koji demo ljuske ne učitavaju. Bez rezervnih vrednosti u `var(...)` tekuci jezik je dobijao providnu podlogu i skoro crn tekst: segment je bio TU, ali se nije video. Zato svaki `var()` u ovom fajlu nosi rezervnu vrednost, i to TAČNU vrednost iz `site.css`, ne približnu. `/vizitka/` i četiri `/demo/` ljuske nemaju ni traku ni podnožje — birač nema u šta da stane. Bez njega posetilac koji na njih uđe iz engleskog ili francuskog iz njih ne može da izađe u isti jezik: jedini put nazad je „nazad" u pregledaču. Pločica je fiksirana u gornji desni ugao, jer je to jedini ugao koji je slobodan na OBE vrste strana: demo ljuska drži naziv aplikacije levo, a vizitka je centrirana kartica. Sopstvena podloga je obavezna — pločica lebdi iznad sadržaja koji se pomera ispod nje. ============================================================ */ .lang-standalone { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); z-index: 9998; background: var(--panel, #101011); border-color: var(--line-strong, rgba(244, 240, 230, 0.16)); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45); } /* Visina segmenta je 44 px i na demo ljuskama i na vizitki. Prva verzija je bila niža (32×28, pa 38×34) jer je pločica „samo pomoćna" — QA je to prijavio na 51 mestu, na sve tri širine ispod 1024 px. Meta za prst se ne meri važnošću elementa nego prstom, i to je isti prag koji već važi za birač u fioci. Sužava se ŠIRINA, nikad visina. */ .lang-standalone .lang-opt { min-width: 40px; min-height: 44px; } /* Demo ljuska ima svoju traku gore desno („Reset…", „Opis aplikacije", „Razgovor") — pločica u gornjem uglu je prekrivala ta dugmad. Zato na demo stranama ide DOLE desno, i ispod z-indeksa modala (60) i vodiča kroz aplikaciju (80), da nikad ne pokrije dijalog. */ .demo-body .lang-standalone { padding: 2px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 50; } .demo-body .lang-standalone .lang-opt { min-width: 38px; min-height: 44px; font-size: 11px; } @media (max-width: 560px) { .lang-standalone .lang-opt { min-width: 36px; padding: 0 7px; } .demo-body .lang-standalone .lang-opt { min-width: 34px; } } /* Štampa: pločica je alat za kretanje, ne sadržaj. Vizitka se štampa. */ @media print { .lang-standalone { display: none; } }