/* MediaMC OS — prodejní web: hlavička a patička (bloky 01 a 27) * * Odděleno od marketing.css schválně — shell má jinou životnost než * komponenty a je na každé stránce stejný. * * PRAVIDLO: jedna vlastnost se nastavuje právě jednou. Pravidlo pro * je v marketing.css a nesmí se odsud přebíjet. */ /* ===================================================================== Hlavička ===================================================================== */ /* Fixed, ne sticky: při zmenšení z 82 na 70 px by sticky posunul celý obsah pod hlavičkou. Fixed + padding-top na body znamená, že se stránka při scrollu nehne ani o pixel. */ .mw-header { position: fixed; inset: 0 0 auto; z-index: var(--mw-z-header); height: var(--mw-header-h); background: var(--mw-overlay); border-bottom: var(--mw-border-w) solid var(--mw-border); transition: height var(--mw-motion) var(--mw-ease), box-shadow var(--mw-motion) var(--mw-ease); } @supports (backdrop-filter: blur(1px)) { .mw-header { backdrop-filter: blur(14px); } } .mw-header.is-scrolled { height: var(--mw-header-h-scrolled); box-shadow: var(--mw-shadow-header); } .mw-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; } .mw-logo { display: inline-flex; align-items: center; flex: none; font-size: 1.25rem; font-weight: var(--mw-fw-h1); letter-spacing: var(--mw-ls-tight); color: var(--mw-text); } .mw-logo__accent { color: var(--mw-cta); } /* ---- Desktop navigace ---------------------------------------------- */ /* Na mobilu se navigace neskrývá skriptem, ale rovnou v CSS — kdyby to dělal JS, na okamžik by problikla přes celou šířku. */ .mw-nav { display: none; } .mw-nav__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .mw-nav__item { position: relative; } .mw-nav__link { position: relative; display: flex; align-items: center; height: 40px; padding: 0 14px; border-radius: var(--mw-radius-sm); font-size: var(--mw-fs-small); font-weight: var(--mw-fw-med); color: var(--mw-text-muted); white-space: nowrap; transition: color var(--mw-motion-fast) var(--mw-ease); } .mw-nav__link:hover { color: var(--mw-text); } /* Aktivní položka magenta. Podtržení dělá pseudoprvek, ne inset box-shadow: shadow kopíruje border-radius položky, takže se u krajů ohýbal nahoru a celé to vypadalo jako rámeček kolem textu, ne jako podtržení. Pseudoprvek je absolutní, takže nemění výšku a menu neposkočí. */ .mw-nav__link.is-active { color: var(--mw-cta); } .mw-nav__link.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: var(--mw-cta); } /* ---- Mega-menu ------------------------------------------------------ */ /* Otevírá se hoverem i fokusem, takže funguje bez JS. JS jen zavírá Escapem a klikem mimo — přidá .is-closed. */ .mw-mega { position: absolute; top: calc(100% + 10px); left: 50%; z-index: var(--mw-z-megamenu); width: min(620px, 84vw); padding: 26px; background: var(--mw-surface-1); border: var(--mw-border-w) solid var(--mw-border); border-radius: var(--mw-radius-card); box-shadow: var(--mw-shadow-hover); opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity var(--mw-motion-fast) var(--mw-ease), transform var(--mw-motion-fast) var(--mw-ease), visibility var(--mw-motion-fast); } .mw-nav__item--mega:hover > .mw-mega, .mw-nav__item--mega:focus-within > .mw-mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); } /* Zavřeno Escapem: přebije hover, dokud se ukazatel neodsune. */ .mw-nav__item--mega > .mw-mega.is-closed { opacity: 0; visibility: hidden; } .mw-mega__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } .mw-mega__title { margin: 0 0 12px; font-size: var(--mw-fs-eyebrow); font-weight: var(--mw-fw-med); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mw-text-muted); } .mw-mega__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .mw-mega__list a { display: block; padding: 9px 10px; margin-inline: -10px; border-radius: var(--mw-radius-sm); font-size: var(--mw-fs-small); color: var(--mw-text); transition: background-color var(--mw-motion-fast) var(--mw-ease); } .mw-mega__list a:hover { background: var(--mw-surface-2); } .mw-mega__foot { margin-top: 18px; padding-top: 16px; border-top: var(--mw-border-w) solid var(--mw-border); } /* ---- Pravá strana hlavičky ------------------------------------------ */ .mw-header__actions { display: flex; align-items: center; gap: 12px; flex: none; } .mw-header__login { display: none; font-size: var(--mw-fs-small); color: var(--mw-text-muted); transition: color var(--mw-motion-fast) var(--mw-ease); } .mw-header__login:hover { color: var(--mw-text); } /* ---- Hamburger ------------------------------------------------------ */ .mw-burger { display: inline-flex; align-items: center; justify-content: center; width: var(--mw-tap); height: var(--mw-tap); padding: 0; background: transparent; border: var(--mw-border-w) solid var(--mw-border); border-radius: var(--mw-radius-sm); cursor: pointer; } /* Tři čárky z jednoho prvku: prostřední je samotný bar, krajní jsou pseudoprvky. Kříž vzniká rotací, nemění se výška. */ .mw-burger__bar, .mw-burger__bar::before, .mw-burger__bar::after { display: block; width: 18px; height: 2px; background: var(--mw-text); border-radius: 2px; transition: transform var(--mw-motion-fast) var(--mw-ease), background-color var(--mw-motion-fast) var(--mw-ease); } .mw-burger__bar::before, .mw-burger__bar::after { content: ""; position: relative; } .mw-burger__bar::before { top: -6px; } .mw-burger__bar::after { top: 4px; } .mw-burger[aria-expanded="true"] .mw-burger__bar { background: transparent; } .mw-burger[aria-expanded="true"] .mw-burger__bar::before { transform: translateY(6px) rotate(45deg); } .mw-burger[aria-expanded="true"] .mw-burger__bar::after { transform: translateY(-6px) rotate(-45deg); } /* ---- Mobilní panel --------------------------------------------------- */ .mw-mobile { position: fixed; inset: var(--mw-header-h) 0 0; z-index: var(--mw-z-header); overflow-y: auto; background: var(--mw-bg); border-top: var(--mw-border-w) solid var(--mw-border); } .mw-mobile[hidden] { display: none; } .mw-mobile__inner { padding: 20px var(--mw-gutter) 40px; } .mw-mobile__list, .mw-mobile__sub { margin: 0; padding: 0; list-style: none; } .mw-mobile__link, .mw-mobile__summary { display: flex; align-items: center; min-height: 56px; border-bottom: var(--mw-border-w) solid var(--mw-border); font-size: var(--mw-fs-lead); font-weight: var(--mw-fw-med); color: var(--mw-text); cursor: pointer; } /* Vlastní znaménko místo výchozího trojúhelníku u

. */ .mw-mobile__summary { justify-content: space-between; list-style: none; } .mw-mobile__summary::-webkit-details-marker { display: none; } .mw-mobile__summary::after { content: "+"; font-size: 1.5rem; font-weight: var(--mw-fw-normal); color: var(--mw-text-muted); } .mw-mobile__group[open] .mw-mobile__summary::after { content: "\2212"; } .mw-mobile__sub { padding: 6px 0 14px; } .mw-mobile__sub a { display: flex; align-items: center; min-height: var(--mw-tap); padding-left: 14px; color: var(--mw-text-muted); } .mw-mobile__actions { display: grid; gap: 12px; margin-top: 28px; } /* ---- Desktop breakpoint --------------------------------------------- */ @media (min-width: 1100px) { .mw-nav, .mw-header__login { display: flex; } .mw-burger, .mw-mobile { display: none; } } /* ===================================================================== Patička ===================================================================== */ .mw-footer { padding-block: var(--mw-section-md) 32px; background-color: var(--mw-surface-1); /* Velmi jemná mřížka jako v administraci — náznak, ne vzor. */ background-image: radial-gradient( circle at 1px 1px, var(--mw-border) 1px, transparent 0 ); background-size: 32px 32px; border-top: var(--mw-border-w) solid var(--mw-border); } .mw-footer__top { display: grid; gap: clamp(32px, 4vw, 56px); padding-bottom: 40px; } @media (min-width: 1100px) { .mw-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } } .mw-footer__brand { display: grid; gap: 18px; align-content: start; } .mw-footer__claim { max-width: 30ch; } .mw-footer__cols { display: grid; gap: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .mw-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .mw-footer__title { margin: 0 0 14px; font-size: var(--mw-fs-small); font-weight: var(--mw-fw-med); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mw-text); } .mw-footer__list, .mw-footer__legal { margin: 0; padding: 0; list-style: none; } .mw-footer__list a, .mw-footer__legal a { display: inline-flex; align-items: center; min-height: 34px; font-size: var(--mw-fs-small); color: var(--mw-text-muted); transition: color var(--mw-motion-fast) var(--mw-ease); } .mw-footer__list a:hover, .mw-footer__legal a:hover { color: var(--mw-text); } .mw-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: var(--mw-border-w) solid var(--mw-border); } .mw-footer__bottom p { margin: 0; } .mw-footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }