/* ══════════════════════════════════════════════════════════════════════════ #8s NAVODILA ZA UPORABO — javna stran -------------------------------------------------------------------------- Mobile-first: osnova je en stolpec in polna širina, širši zaslon je nadgradnja. Kupec je pogosto na telefonu, z izdelkom v drugi roki. ══════════════════════════════════════════════════════════════════════════ */ .pb-man { max-width: 1280px; margin: 0 auto; padding: 1rem 1rem 3rem; } /* ┌ #8x DVA STOLPCA: LEVO ISKANJE, DESNO POJASNILA ────────────────────────┐ │ Mobile-first: osnova je en stolpec in pojasnila padejo POD zadetke — │ │ na telefonu je zaporedje edino, kar šteje, in kdor je prišel po │ │ navodila, mora najprej dobiti navodila. │ │ │ │ Od 1000 px naprej sta stolpca dva. Prag je 1000 in ne 900: pri 900 px bi │ │ desni stolpec dobil 320 px, v katerih dolgo pravno besedilo lomi na tri │ │ besede na vrstico. │ └──────────────────────────────────────────────────────────────────────────┘ */ .pb-man__grid { display: grid; gap: 1.4rem; align-items: start; } .pb-man__left { min-width: 0; } .pb-man__right { min-width: 0; } @media (min-width: 1000px) { .pb-man__grid { grid-template-columns: minmax(0, 1fr) 380px; } /* ┌ #9g DESNI STOLPEC NI VEČ LEPLJIV ─────────────────────────────────────┐ │ V 8x je bil `position: sticky` smiseln: v stolpcu je stalo kratko │ │ pojasnilo, ki naj bi ostalo ob zadetkih. Odkar so v njem VARNOSTNI │ │ NAPOTKI, je stolpec visok 1613 px — višji od zaslona — in lepljivost │ │ začne delati proti bralcu. │ │ │ │ Izmerjeno pri oknu 950 px na strani, visoki 3716 px (levi stolpec poln │ │ zadetkov). Kdaj se pokaže dno zadnjega napotka │ │ (»Razstavljanje naprave je prepovedano«): │ │ │ │ lepljiv šele pri odmiku 2766 px — torej na DNU strani │ │ navaden pri odmiku ~800 px — v običajnem zaporedju branja │ │ │ │ Lepljiv stolpec se pripne in se pomika počasneje od strani, zato zadnji │ │ napotek pride na vrsto zadnji — bralec, ki se ustavi pri zadetkih, ga │ │ ne vidi. Nedosegljiv ni, je pa na napačnem koncu. │ │ │ │ (Prva meritev tega je bila napačna: stran ima mehko drsenje in vrednosti│ │ sem odčital sredi animacije, zato se ni premaknila. Zgornje številke so │ │ izmerjene s takojšnjim drsenjem.) │ └──────────────────────────────────────────────────────────────────────────┘ */ .pb-man__right { min-width: 0; } } .pb-man__head { margin-bottom: 1.1rem; } .pb-man__t { margin: 0 0 .4rem; font-size: 1.6rem; line-height: 1.15; } .pb-man__lead { margin: 0; color: #4B5563; line-height: 1.55; } .pb-man__lead code { padding: .1em .35em; border-radius: 4px; background: #F1F4F8; font-size: .92em; } /* ── Iskalnik ──────────────────────────────────────────────────────────── Velik in sam: je edina stvar, zaradi katere je kupec tu. */ .pb-man__search { margin: 0 0 1.4rem; padding: 1rem; background: #F7FAFC; border: 1px solid #E2E8F0; border-radius: 14px; } .pb-man__lbl { display: block; margin-bottom: .4rem; font-size: .85rem; font-weight: 700; color: #374151; } .pb-man__row { display: grid; gap: .5rem; } /* ┌ #9d OBROBA IN ZARIS STA IZMERJENA, NE IZBRANA ─────────────────────────┐ │ Naročnik: »Popravi kontraste gumbov (pisava - ozadje).« Vseh trinajst │ │ parov pisava–ozadje na tej strani sem izmeril in vsi so nad 4,5 (tabela │ │ niže). Pod mejo je bilo nekaj drugega: ZARIS OB ŽARIŠČU in OBROBA POLJA. │ │ │ │ svetlozeleni zaris #9FD9B6 na belem 1,61 (meja 3,0) │ │ modri zaris polja #BFD7FF na #F7FAFC 1,39 │ │ obroba polja #CBD5E1 na #F7FAFC 1,42 │ │ │ │ Kdor se po strani pomika s tipkovnico, torej ni videl, kje je. To ni │ │ okras: WCAG 1.4.11 zahteva 3,0 tudi za netekstovne dele gumba. │ │ │ │ temnozeleni zaris #0B5C34 na belem 8,09 │ │ modri zaris polja #1D4ED8 na #F7FAFC 6,39 │ │ obroba polja #7E8B9B na #F7FAFC 3,31 │ │ │ │ Zaris na ZELENEM gumbu je temnozelen in bi na njem izginil — zato ima │ │ `outline-offset`, ki pusti med gumbom in zarisom belo režo: zaris se │ │ meri proti strani (8,09) in ne proti gumbu. │ └──────────────────────────────────────────────────────────────────────────┘ */ .pb-man__q { width: 100%; min-width: 0; padding: .8rem .9rem; border: 2px solid #7E8B9B; border-radius: 10px; font: inherit; font-size: 1.05rem; background: #fff; } .pb-man__q:focus { outline: 3px solid #1D4ED8; outline-offset: 1px; border-color: #1D4ED8; } .pb-man__go { appearance: none; cursor: pointer; padding: .8rem 1.1rem; border: 0; border-radius: 10px; background: #0F6B3C; color: #fff; font: inherit; font-weight: 800; /* Na dotik mora biti tarča vsaj 44 px visoka — pravilo velja povsod. */ min-height: 44px; } .pb-man__go:hover { background: #0B5C34; } .pb-man__go:focus-visible { outline: 3px solid #0B5C34; outline-offset: 3px; } .pb-man__hint { margin: .55rem 0 0; font-size: .8rem; color: #5B6470; } /* Nad 560 px gresta polje in gumb v isto vrstico: tam je prostora dovolj in dve vrstici bi bili razmetani. */ @media (min-width: 560px) { .pb-man__row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } } /* ── Sporočilo po pošiljanju ─────────────────────────────────────────────── */ .pb-man__msg { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 10px; font-size: .9rem; font-weight: 600; } .pb-man__msg--ok { background: #E4F7EA; color: #0B5C34; } .pb-man__msg--bad { background: #FDECEC; color: #B42318; } /* ── Prazen odgovor pove, kaj naprej ─────────────────────────────────────── */ .pb-man__none { padding: 1rem; border: 1px dashed #CBD5E1; border-radius: 12px; color: #4B5563; font-size: .92rem; line-height: 1.6; } .pb-man__none ul { margin: .5rem 0 0; padding-left: 1.1rem; } .pb-man__count { margin: 0 0 .7rem; font-size: .88rem; color: #4B5563; } /* ┌ #9d ZADETEK JE ENA VRSTA — PRI VSAKI ŠIRINI ───────────────────────────┐ │ Naročnik: »Kartica pb-man__card mora biti ena v vrsti (sedaj sta dve │ │ vrsti).« │ │ │ │ Dva stolpca sta se vračala nad 1500 px (pravilo iz 8x). Izmerjeno pri │ │ 1876 px: kartica je bila široka 366 px, ker je mreža razdelila že tako │ │ ozek levi stolpec (746 px) še na pol — in ker je bil zadetek EN sam, je │ │ drugi stolpec ostal prazen. Kartica je bila videti pol strani široka in │ │ pol prazna. │ │ │ │ Zdaj je stolpec en sam, zapisan izrecno in ne le podedovan: `minmax(0, │ │ 1fr)` pove, da je stolpec natanko eden, in prepreči, da bi ga dolgo ime │ │ izdelka razširilo čez stolpec. Preizkus širino MERI (t9d) — pravilo, ki │ │ ga nihče ne prešteje, se čez tri pakete tiho vrne. │ └──────────────────────────────────────────────────────────────────────────┘ */ .pb-man__cards { display: grid; gap: .9rem; align-items: start; grid-template-columns: minmax(0, 1fr); } .pb-man__card { margin: 0; padding: 0; overflow: hidden; background: #fff; border: 1px solid #DDE5EC; border-radius: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); display: flex; flex-direction: column; } /* Glava kartice ima svoj ton: ime izdelka je naslov in ne prva vrstica seznama. Brez tega se kartica bere kot kup vrstic. */ .pb-man__cardh { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding: .7rem .85rem; background: #F7FAFC; border-bottom: 1px solid #E7EDF3; } .pb-man__cardb { padding: .7rem .85rem; display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; } .pb-man__name { margin: 0; font-size: 1.05rem; line-height: 1.3; } /* ┌ #9f BARVA NASLOVA NE SME BITI ODVISNA OD VRSTNEGA REDA DATOTEK ────────┐ │ `.pb-man__name a` in `.pb-theme-pingootheme a` imata enako specifičnost │ │ (0-1-1). Zmaga tista, ki je prebrana pozneje — in to je zdaj ta datoteka│ │ samo zato, ker se nalaga iz telesa strani. Kdor bi jo jutri prestavil v │ │ glavo ali združil datoteke CSS, bi naslove izdelkov nehote pobarval po │ │ temi. │ │ │ │ Z `.pb-man` pred sabo je 0-2-1 in vrstni red ni več pomemben. │ └──────────────────────────────────────────────────────────────────────────┘ */ .pb-man .pb-man__name a { color: inherit; text-decoration: none; } .pb-man .pb-man__name a:hover { text-decoration: underline; } .pb-man__sku { font-size: .76rem; font-weight: 700; color: #4B5563; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #fff; border: 1px solid #E2E8F0; border-radius: 6px; padding: .1rem .4rem; } .pb-man__nodoc { margin: 0; font-size: .88rem; color: #5B6470; } .pb-man__docs { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; } /* Vrstica dokumenta: ikona, besedilo, dejanji. Na ozkem zaslonu padeta dejanji v svojo vrsto — gumba pod prstom sta pomembnejša od ene vrstice. */ .pb-man__doc { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: .1rem .6rem; align-items: center; padding: .55rem .6rem; border: 1px solid #EDF1F5; border-radius: 10px; background: #FCFDFE; } .pb-man__dico { color: #B42318; } .pb-man__dico svg { width: 22px; height: 22px; display: block; } .pb-man__dtxt { min-width: 0; font-size: .9rem; overflow-wrap: anywhere; } .pb-man__dmeta { display: block; margin-top: .1rem; font-size: .76rem; color: #5B6470; } /* ┌ KONTRAST JE IZMERJEN IN NE OCENJEN ─────────────────────────────────────┐ │ Prejšnja zelena `#12864A` na `#E4F7EA` je imela razmerje 4,14 — pod │ │ mejo 4,5 za navadno besedilo. Izmerjeno in popravljeno: │ │ │ │ │ │ #9d Naročnik je zahteval popravek kontrastov gumbov. Izmeril sem VSE │ │ pare pisava–ozadje na tej strani, ne le tistih, ki so me skrbeli: │ │ │ │ gumb »Poišči« belo na #0F6B3C 6,59 │ │ gumb »Poišči« miška belo na #0B5C34 8,09 │ │ gumb »Odpri« belo na #0F6B3C 6,59 │ │ gumb »Prenesi« #0F6B3C na belem 6,59 │ │ gumb »Prenesi« miška #0B5C34 na #E4F7EA 7,24 │ │ znak »prevod« #0B5C34 na #E4F7EA 7,24 │ │ znak »izvirnik« #374151 na #EEF2F6 9,16 │ │ »Pošlji na e-pošto« #1A44BE na belem 8,03 │ │ naslov pojasnil #14335C na #F7FAFC 12,09 │ │ telo pojasnil #33414F na belem 10,45 │ │ opomba #6B4E00 na #FFF8E6 7,30 │ │ namig pod poljem #5B6470 na #F7FAFC 5,72 │ │ uvod #4B5563 na belem 7,56 │ │ │ │ Vseh trinajst je nad 4,5 — pisave na ozadju torej ni bilo treba │ │ popravljati in tega tudi nisem delal na slepo. Pod mejo je bil ZARIS OB │ │ ŽARIŠČU (1,61 in 1,39); popravljen je zgoraj, pri iskalniku. │ │ │ │ Barve niso izbrane na oko: razmerja so izračunana po WCAG in zapisana │ │ tu, da jih naslednji popravek ne pokvari neopazno. │ └────────────────────────────────────────────────────────────────────────────┘ */ .pb-man__tag { display: inline-block; padding: .05rem .4rem; border-radius: 999px; background: #EEF2F6; color: #374151; font-weight: 800; font-size: .72rem; } .pb-man__tag--sl { background: #E4F7EA; color: #0B5C34; } .pb-man__dact { grid-column: 2; display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .35rem; } @media (min-width: 620px) { .pb-man__doc { grid-template-columns: 26px minmax(0, 1fr) auto; } .pb-man__dact { grid-column: 3; margin-top: 0; } } /* ┌ #9f ZAKAJ IMAJO GUMBI `.pb-man` PRED SEBOJ ────────────────────────────┐ │ Naročnik: »barve ozadja in teksta pb-man__btn — ni kontrasta in ni │ │ berljivo«. Ima prav, in vzrok ni barva v tej datoteki. │ │ │ │ »Odpri« in »Prenesi« sta povezavi (``), tema pa ima pravilo │ │ │ │ .pb-theme-pingootheme a { color: var(--pt-cyan-dark); } 0-1-1 │ │ │ │ `.pb-man__btn { color: #fff }` ima 0-1-0 in IZGUBI. Na zelenem gumbu je │ │ bila zato modra pisava: │ │ │ │ »Odpri« #008CBF na #0F6B3C 1,73 │ │ »Prenesi« #008CBF na belem 3,82 │ │ │ │ To je ista napaka kot pri gumbih na strani naročila (9e) — in v 9d je │ │ NISEM ujel, ker sem stran meril brez razreda `pb-theme-pingootheme` na │ │ ``. Merilnik brez teme je meril namero in ne strani. │ │ │ │ Izmerjeno po popravku: │ │ »Odpri« belo na #0F6B3C 6,59 │ │ »Odpri« miška belo na #0B5C34 8,09 │ │ »Prenesi« #0F6B3C na belem 6,59 │ │ »Prenesi« miška #0B5C34 na #E4F7EA 7,24 │ └──────────────────────────────────────────────────────────────────────────┘ */ .pb-man .pb-man__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 .85rem; border: 1px solid #0F6B3C; border-radius: 9px; background: #0F6B3C; color: #fff; font-size: .85rem; font-weight: 700; text-decoration: none; cursor: pointer; } .pb-man .pb-man__btn:hover { background: #0B5C34; border-color: #0B5C34; color: #fff; } .pb-man .pb-man__btn:focus-visible { outline: 3px solid #0B5C34; outline-offset: 3px; } .pb-man .pb-man__btn--ghost { background: #fff; color: #0F6B3C; } .pb-man .pb-man__btn--ghost:hover { background: #E4F7EA; color: #0B5C34; } .pb-man .pb-man__btn--send { min-height: 44px; margin-top: .2rem; } /* ── Pošiljanje po e-pošti ───────────────────────────────────────────────── */ .pb-man__mail { margin-top: .7rem; } .pb-man__mail > summary { cursor: pointer; padding: .5rem .1rem; font-size: .88rem; font-weight: 700; color: #1A44BE; } /* ┌ #9k ŠIRINA JE ŠIRINA STOLPCA IN NE 26 rem ─────────────────────────────┐ │ Naročnik: »polje pb-man__mail mora biti enako široko kot stolpec │ │ (pb-man__cardb)«. │ │ │ │ `max-width: 26 rem` je bila številka, ki je nastala ob pisanju obrazca │ │ zase in ne v stolpcu, v katerem stoji. Ko je stolpec širši od 26 rem, │ │ obrazec ostane ozek in ob desni ostane prazen pas — kar je videti kot │ │ napaka v postavitvi, in to tudi je. │ │ │ │ Širino odslej določa stolpec. `min-width: 0` je tu nujen: v mreži se │ │ element privzeto ne skrči pod velikost svoje vsebine, zato bi dolg │ │ e-naslov v polju raztegnil kartico namesto sebe. │ └──────────────────────────────────────────────────────────────────────────┘ */ .pb-man__mailf { display: grid; gap: .6rem; min-width: 0; margin-top: .5rem; padding: .8rem; background: #F7FAFC; border: 1px solid #E2E8F0; border-radius: 12px; } .pb-man__f { display: grid; gap: .25rem; font-size: .85rem; font-weight: 600; color: #374151; } .pb-man__f input[type="email"], .pb-man__f input[type="text"] { padding: .6rem .7rem; border: 1px solid #7E8B9B; border-radius: 9px; font: inherit; background: #fff; min-height: 42px; } /* Isti zaris kot v iskalniku: eno pravilo za vsa polja te strani. */ .pb-man__f input:focus { outline: 3px solid #1D4ED8; outline-offset: 1px; border-color: #1D4ED8; } .pb-man__mail > summary:focus-visible, .pb-man__legal > summary:focus-visible { outline: 3px solid #1D4ED8; outline-offset: 2px; } /* ┌ #9l SLOGI PREVERBE SO SE PRESELILI V main.css ─────────────────────────┐ │ `.pb-cap*` in past za robote sta stala tu, ker je bila preverba samo na │ │ tej strani. Odkar je na dvanajstih straneh, bi razred brez svoje │ │ datoteke pomenil neurejeno sliko povsod razen tu — natanko tista napaka,│ │ zaradi katere je bila v 8z napisana preverba o razredih brez datoteke. │ │ │ │ Pravila so zdaj v `main.css`, ki se naloži na vsaki strani. Tu jih ni │ │ podvojenih: dve pravili za isto stvar se razideta ob prvem popravku. │ └──────────────────────────────────────────────────────────────────────────┘ */ .pb-man__small { margin: 0; font-size: .76rem; line-height: 1.5; color: #5B6470; } /* ══════════════════════════════════════════════════════════════════════════ #8u ZAKONSKA POJASNILA -------------------------------------------------------------------------- Stojijo POD iskalnikom in zadetki, ne nad njimi: kdor pride po navodila, pride po navodila. Pojasnila potrebuje tisti, ki jih ni našel — in ta se pomakne navzdol. ══════════════════════════════════════════════════════════════════════════ */ /* #8x V svojem stolpcu ne rabi odmika od zadetkov nad njim — nad njim ni ničesar. Na telefonu (en stolpec) ga rabi, zato ostane tam. */ .pb-man__legal { margin-top: 1.4rem; } @media (min-width: 1000px) { .pb-man__legal { margin-top: 0; } } .pb-man__legal > summary { cursor: pointer; padding: .7rem .9rem; background: #F7FAFC; border: 1px solid #E2E8F0; border-radius: 12px; font-size: .9rem; font-weight: 800; color: #14335C; } .pb-man__legal[open] > summary { border-radius: 12px 12px 0 0; } .pb-man__legalb { padding: .9rem; border: 1px solid #E2E8F0; border-top: 0; border-radius: 0 0 12px 12px; font-size: .85rem; line-height: 1.6; color: #33414F; } .pb-man__legalb h3 { margin: 1rem 0 .3rem; font-size: .9rem; color: #14335C; } .pb-man__legalb h3:first-child { margin-top: 0; } .pb-man__legalb ul { margin: .3rem 0 .6rem; padding-left: 1.1rem; } .pb-man__legalb li { margin-bottom: .25rem; } .pb-man__note { margin: .9rem 0 0; padding: .6rem .75rem; border-radius: 9px; background: #FFF8E6; color: #6B4E00; font-size: .8rem; line-height: 1.5; } /* ══════════════════════════════════════════════════════════════════════════ #9f PRAVNA RAZLAGA POD ZADETKI -------------------------------------------------------------------------- ┌ ZAKAJ ZLOŽENA IN NE ODPRTA ────────────────────────────────────────────┐ │ Ker je to razlaga za tistega, ki jo išče. Odprta bi pod vsakim iskanjem │ │ stala kot stena besedila in kupca, ki je navodila pravkar našel, │ │ odrinila navzdol — stran bi bila spet dolga, kar je bilo naročilo, naj │ │ odpravim. │ │ │ │ Naslov mora zato povedati, kaj je notri, tudi kadar je zaprt: puščica │ │ sama ni napis. │ └──────────────────────────────────────────────────────────────────────────┘ */ .pb-man__legal--left { margin-top: 1.4rem; } /* Na širokem zaslonu ostane odmik — tu je nad njo zadetek in ne nič. */ @media (min-width: 1000px) { .pb-man__legal--left { margin-top: 1.4rem; } } /* ┌ #9h BESEDILO JE ŠIROKO KOT POLJE ──────────────────────────────────────┐ │ Naročnik: »tekst v pb-man__legalb naj bo širok enako kot polje, enako │ │ pb-man__lead«. │ │ │ │ Tu je stala omejitev 78 znakov — dodal sem jo v 9f zaradi berljivosti │ │ dolge vrstice. Učinek na strani je bil, da se je besedilo končalo sredi │ │ kartice in desna tretjina je bila prazna; videti je kot napaka in ne │ │ kot namera. Omejitev je odpadla tudi pri uvodu strani (`pb-man__lead`, │ │ prej 62 znakov) — isti razlog, isti popravek. │ │ │ │ Kdor bo kdaj hotel mejo branja nazaj, naj jo doda kartici in ne │ │ besedilu: ožja kartica je videti namerna, ožje besedilo v široki │ │ kartici pa ne. │ └──────────────────────────────────────────────────────────────────────────┘ */ /* ── Naslov vedno odprtega sklopa ───────────────────────────────────────── Prej je bil ``; zdaj je naslov in mora biti videti kot naslov, ne kot gumb. Kontrast #14335C na #F7FAFC = 12,09. */ .pb-man__legalh { margin: 0; padding: .7rem .9rem; background: #F7FAFC; border: 1px solid #E2E8F0; border-radius: 12px 12px 0 0; font-size: .9rem; font-weight: 800; color: #14335C; line-height: 1.3; } /* Na dotik mora biti naslov dovolj visoka tarča. */ @media (pointer: coarse) { .pb-man__legal > summary { min-height: 44px; display: flex; align-items: center; } } /* ══════════════════════════════════════════════════════════════════════════ #9g VARNOSTNI NAPOTKI (desni stolpec) -------------------------------------------------------------------------- ┌ ZAKAJ TON NI EDINI NOSILEC POMENA ─────────────────────────────────────┐ │ Rdeč okvir pove »nevarnost« samo tistemu, ki rdečo vidi. Vsak napotek │ │ ima zato tudi NASLOV in ZNAK (⚡ ⚠ ℹ); barva je tretja označba in ne │ │ edina. Isto pravilo kot pri karticah nadzorne plošče (#6e). │ └──────────────────────────────────────────────────────────────────────────┘ Kontrasti so izračunani po WCAG in ne izbrani na oko (meja 4,5 za besedilo, 3,0 za obrobo): naslov sklopa #14335C na belem 12,67 uvod #4B5563 na belem 7,56 ℹ naslov #17456B na #EFF6FC 9,17 obroba #4E7FA8 4,26 ℹ telo #33414F na #EFF6FC 9,58 ⚠ naslov #6B4E00 na #FFF8E6 7,30 obroba #B08400 3,42 ⚠ telo #4A3A0A na #FFF8E6 10,43 ⚡ naslov #8C1D18 na #FDECEC 7,98 obroba #C0342C 5,57 ⚡ telo #4A2320 na #FDECEC 11,84 ══════════════════════════════════════════════════════════════════════════ */ .pb-man__safe { display: grid; gap: .6rem; } .pb-man__safeh { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: 1rem; line-height: 1.25; color: #14335C; } .pb-man__safeico { display: inline-flex; flex: 0 0 auto; color: #B08400; } .pb-man__safeico svg { width: 20px; height: 20px; display: block; } .pb-man__safelead { margin: 0 0 .2rem; font-size: .8rem; line-height: 1.5; color: #4B5563; } .pb-man__safelead p { margin: 0; } .pb-man__note2 { margin: 0; padding: .7rem .8rem; border: 1px solid #DDE5EC; border-radius: 12px; background: #fff; } .pb-man__note2h { display: flex; align-items: baseline; gap: .4rem; margin: 0 0 .35rem; font-size: .86rem; line-height: 1.3; font-weight: 800; } .pb-man__note2ico { flex: 0 0 auto; font-size: .95em; } .pb-man__note2b { font-size: .8rem; line-height: 1.55; } .pb-man__note2b p { margin: 0 0 .45rem; } .pb-man__note2b p:last-child { margin-bottom: 0; } /* `list-style` zapišemo izrecno: ponastavitev v main.css oznake pobere in naštevanje se bere kot zaporedje odstavkov — pri varnostnih napotkih je ravno seznam tisto, kar pove, da gre za več ločenih zahtev. */ .pb-man__note2b ul { margin: .3rem 0 .45rem; padding-left: 1.15rem; list-style: disc; } .pb-man__note2b ul li { list-style: disc; } .pb-man__note2b li { margin-bottom: .28rem; } .pb-man__note2b li:last-child { margin-bottom: 0; } /* ── Trije toni ─────────────────────────────────────────────────────────── */ .pb-man__note2--info { background: #EFF6FC; border-color: #4E7FA8; } .pb-man__note2--info .pb-man__note2h { color: #17456B; } .pb-man__note2--info .pb-man__note2b { color: #33414F; } .pb-man__note2--warn { background: #FFF8E6; border-color: #B08400; } .pb-man__note2--warn .pb-man__note2h { color: #6B4E00; } .pb-man__note2--warn .pb-man__note2b { color: #4A3A0A; } /* ┌ NAJRESNEJŠI NAPOTEK IMA DEBELEJŠO OBROBO ──────────────────────────────┐ │ Razlika ni v barvi, ampak v debelini — vidna je tudi na tisku in v │ │ načinu visokega kontrasta, kjer barve odpadejo. │ └──────────────────────────────────────────────────────────────────────────┘ */ .pb-man__note2--danger { background: #FDECEC; border: 2px solid #C0342C; } .pb-man__note2--danger .pb-man__note2h { color: #8C1D18; } .pb-man__note2--danger .pb-man__note2b { color: #4A2320; } /* Krepko v napotku mora ostati krepko tudi, kadar je barva enaka. */ .pb-man__note2b strong { font-weight: 800; } /* ┌ #9g BREZ DESNEGA STOLPCA NI PRAZNE KOLONE ─────────────────────────────┐ │ Naročnik: »desni stolpec je prazen«. Mreža je stolpec držala tudi │ │ takrat, ko v njem ni bilo ničesar — 380 px praznine ob zadetkih. │ │ Razred pove, da stolpca ni, in vsebina dobi vso širino. │ └──────────────────────────────────────────────────────────────────────────┘ */ @media (min-width: 1000px) { .pb-man__grid--solo { grid-template-columns: minmax(0, 1fr); } }