/* mobile-fixes.css
Dopĺňa assets/case-study-web.css. Načítať AŽ ZA ním:
Nič neprepisuje natvrdo, iba dorovnáva. Každý blok sa dá zmazať samostatne. */
:root{ --top-h:70px }
/* 1 · Kotvy a skip-link končili pod lepivou hlavičkou.
Bez toho "Preskočiť na hlavný obsah" skočí tak, že nadpis je schovaný. */
[id]{ scroll-margin-top:calc(var(--top-h) + 14px) }
/* 2 · Hero nadpis mal na 390 px päť riadkov a zabral celú prvú obrazovku.
Menšia veľkosť plus balance ho zrazí na tri až štyri. */
@media(max-width:580px){
.hero h1{
max-width:none;
font-size:clamp(34px,10.5vw,46px);
text-wrap:balance;
margin-bottom:20px;
}
}
/* 3 · Maskot na mobile zaberal celú ďalšiu obrazovku, kým sa čitateľ dostal k obsahu. */
@media(max-width:820px){
.hero-visual{ min-height:0; max-width:320px; padding-block:8px }
.hero-visual img{ height:auto; max-height:340px }
}
/* 4 · Dotykové ciele pod 44 px: DG_, späť na projekty, pätička, položky menu. */
@media(max-width:820px){
.brand{ display:inline-flex; align-items:center; min-height:44px }
.back{ min-height:44px; margin-bottom:22px }
.nav a{ display:flex; align-items:center; min-height:44px }
footer a{ display:inline-flex; align-items:center; min-height:44px }
}
/* 5 · Najmenšie mono popisky mali 11 px. Na telefóne je to pod hranicou čitateľnosti. */
@media(max-width:580px){
.tag{ font-size:12.5px }
.impact-card small{ font-size:12.5px; line-height:1.55 }
.shot-head{ font-size:12px }
.status-note{ font-size:13.5px }
}
/* 6 · Tri rozmazané bubliny cez celú plochu sú na mobile drahé na vykreslenie
a pri stĺpcovom layoute ich aj tak takmer nevidno. */
@media(max-width:580px){
.bubbles{ filter:blur(46px) saturate(1.06) }
.bubble{ opacity:.34 }
}
/* 7 · Voliteľné: zruší tučné zvýraznenie v druhej polovici hero odseku.
Čistejšie je odstrániť priamo v HTML, toto je rýchla náplasť. */
/* .hero .lead strong{ color:inherit; font-weight:inherit } */
/* 8 · Dotykové ciele na homepage, kontakte a v právnej stránke.
Rovnaké minimum 44 px, len iné triedy ako na case study stránkach. */
@media(max-width:820px){
.cta-links a,
.g-brand,
.g-choice,
.g-back{
display:inline-flex; align-items:center; min-height:44px;
}
.g-choice, .g-back{ justify-content:center }
/* Odkazy vnútri bežnej vety nechávam tak. Zväčšenie by rozhodilo riadkovanie
odseku a na inline odkazy v texte sa pravidlo minimálneho cieľa nevzťahuje. */
}
/* 9 · Desktop: hero nadpis mal max-width:11ch, čo ho lámalo na päť riadkov
s jednoslovnými koncami. Širšia miera plus balance to zrovná na tri. */
@media(min-width:821px){
.hero{ grid-template-columns:minmax(0,1.32fr) minmax(300px,.68fr) }
.hero h1{ max-width:none; text-wrap:balance }
}
/* 10 · Hero na desktope začínal príliš nižšie. Hero bolo vysoké na celú obrazovku
a obsah v ňom vertikálne vycentrovaný, takže nad spätným odkazom vznikla diera. */
@media(min-width:821px){
.hero{ min-height:auto; padding-block:clamp(26px,3.5vh,52px) clamp(48px,7vh,96px) }
.hero-visual{ min-height:clamp(420px,46vw,600px) }
}
/* 11 · Marquee značiek sa pri zapnutom Reduce Motion úplne zastavil a vyzeral pokazene.
Namiesto zastavenia z neho spravíme pás, ktorý sa dá potiahnuť prstom. */
@media (prefers-reduced-motion: reduce){
.marquee{ overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch }
.marquee::-webkit-scrollbar{ display:none }
.mq-a,.mq-b{ animation:none }
}
/* 12 · View Transitions medzi projektmi.
Prehliadače bez podpory pravidlo ticho ignorujú. */
@view-transition{ navigation:auto }
/* 13 · Lepivý index sekcií a ukazovateľ postupu (pozri nav-rail.js). */
.rail-progress{
position:fixed; left:0; top:0; z-index:60;
height:2px; width:100%; background:var(--accent,#2242FF);
transform:scaleX(0); transform-origin:0 50%;
will-change:transform; pointer-events:none;
}
.rail{
position:fixed; left:18px; top:50%; transform:translateY(-50%);
z-index:55; display:none;
}
.rail ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px }
.rail a{
display:flex; align-items:center; gap:10px;
padding:7px 8px; border-radius:8px; text-decoration:none;
color:var(--ink-soft,#5A6472);
font:11px/1 var(--mono,ui-monospace,monospace);
letter-spacing:.08em; text-transform:uppercase;
}
.rail a i{
width:7px; height:7px; border-radius:50%;
border:1px solid currentColor; flex:0 0 auto;
transition:background .18s ease, transform .18s ease;
}
.rail a span{
max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
transition:max-width .22s ease, opacity .18s ease;
}
.rail a:hover span, .rail a:focus-visible span, .rail a[aria-current] span{
max-width:200px; opacity:1;
}
.rail a[aria-current]{ color:var(--accent,#2242FF) }
.rail a[aria-current] i{ background:currentColor; transform:scale(1.25) }
.rail a:focus-visible{ outline:2px solid var(--accent,#2242FF); outline-offset:2px }
@media(min-width:1240px){ .rail{ display:block } }
@media print{ .rail,.rail-progress{ display:none } }
@media (prefers-reduced-motion: reduce){
.rail a i,.rail a span{ transition:none }
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none !important }
}
/* 13b · Lišta nad tmavou sekciou. */
.rail.on-dark a{ color:var(--dark-soft,#AAB3BE) }
.rail.on-dark a[aria-current]{ color:#7C8CFF }
/* 14 · Vizuálny predel s maskotom. Rozbíja súvislý sled kariet
a využíva asset, ktorý bol v deployi nahratý a nepoužitý. */
.break-band{
display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
align-items:center; gap:clamp(20px,4vw,56px);
max-width:var(--content,1180px); margin-inline:auto;
padding:clamp(28px,5vh,64px) var(--pad,24px);
}
.break-band img{ width:100%; max-width:330px; height:auto; justify-self:center }
.break-band p{
margin:0; font-family:var(--display,sans-serif); font-weight:700;
font-size:clamp(21px,2.5vw,32px); line-height:1.18; letter-spacing:-.015em;
color:var(--ink,#14181C); max-width:20ch;
}
@media(max-width:820px){
.break-band{ grid-template-columns:1fr; text-align:center; gap:14px }
.break-band img{ max-width:210px }
.break-band p{ max-width:none; margin-inline:auto }
}