/* * Szkoła Matematyki — header.css * Przyklejony nagłówek, menu główne z rozwijaną listą kursów * oraz dolna nawigacja na telefonach. * * Generowane z podziału jednego arkusza. Edytuj ten plik, nie łącz z powrotem. */ /* Nagłówek ----------------------------------------------------------------- */ .smf-header { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--smf-line); transition: box-shadow .2s ease, background-color .2s ease; } .smf-header.is-stuck { background: rgba(255, 255, 255, .97); box-shadow: var(--smf-shadow-sm); } .smf-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--smf-header-h); } .smf-header__logo img { height: 3rem; width: auto; object-fit: contain; transition: opacity .15s ease; } /* Logo jest klikalne (wraca na stronę główną), więc daje o tym znać. */ .smf-header__logo:hover img { opacity: .75; } .smf-nav { display: none; align-items: center; gap: 1.75rem; } /* * Tylko bezpośrednie, nieoklasowane odnośniki menu. * * Wcześniej było `.smf-nav a:hover` — (0,2,1) — co biło `.smf-nav .smf-btn` * (0,2,0) i przycisk „Kup pakiet" dostawał na hover niebieski tekst na * granatowym tle, czyli kontrast około 1,6:1. Zawężenie do `> a:not([class])` * wyklucza przyciski (mają klasę) i pozycje listy kursów (nie są bezpośrednimi * dziećmi nawigacji). */ .smf-nav > a:not([class]) { font-weight: 500; color: #475569; transition: color .15s ease; } .smf-nav > a:not([class]):hover { color: var(--smf-blue); } .smf-nav .smf-btn { color: #fff; } /* Rozwijana lista kursów w menu ------------------------------------------- */ .smf-drop { position: relative; } /* * Selektor z `button`, bo reset `.smf button { color: inherit }` ma (0,1,1) * i samo `.smf-drop__btn` (0,1,0) by przegrało — przycisk „Kursy" wychodził * ciemniejszy od sąsiednich pozycji menu. Do tego reset działa tylko tam, * gdzie ma klasę `.smf`, więc na stronach sklepu kolor byłby inny niż * na landingu. Ten zapis daje ten sam wygląd wszędzie. */ button.smf-drop__btn { display: inline-flex; align-items: center; gap: .375rem; padding: .5rem 0; background: none; border: 0; font-family: inherit; font-size: 1rem; font-weight: 500; color: #475569; cursor: pointer; transition: color .15s ease; } .smf-drop__btn:hover, .smf-drop__btn[aria-expanded="true"] { color: var(--smf-blue); } .smf-drop__arrow { width: .875rem; height: .875rem; transform: rotate(90deg); transition: transform .18s var(--smf-ease); } .smf-drop__btn[aria-expanded="true"] .smf-drop__arrow { transform: rotate(-90deg); } .smf-drop__list { position: absolute; top: calc(100% + .75rem); left: 50%; transform: translateX(-50%); z-index: 10; width: 21rem; padding: .5rem; border-radius: var(--smf-radius); background: #fff; border: 1px solid var(--smf-line); box-shadow: var(--smf-shadow-lg); display: grid; gap: .125rem; } /* [hidden] przegrywa z display:grid z arkusza autora — stąd !important */ .smf-drop__list[hidden] { display: none !important; } .smf-drop__list a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .125rem .75rem; padding: .75rem; border-radius: .75rem; color: var(--smf-navy); /* odnośnik ma klasę, więc nie dziedziczy koloru */ transition: background-color .15s ease; } .smf-drop__list a:hover { background: var(--smf-blue-50); } .smf-drop__name { font-weight: 700; color: var(--smf-navy); font-size: .9375rem; } .smf-drop__meta { grid-column: 1; font-size: .8125rem; color: var(--smf-muted); } .smf-drop__price { grid-row: 1 / span 2; grid-column: 2; font-family: Montserrat, sans-serif; font-weight: 800; color: var(--smf-blue); font-variant-numeric: tabular-nums; white-space: nowrap; } .smf-drop__all { border-top: 1px solid var(--smf-line); margin-top: .25rem; padding-top: .25rem; } .smf-drop__all a { display: flex; justify-content: space-between; font-size: .875rem; font-weight: 600; color: var(--smf-blue); } .smf-drop__all a:hover { background: var(--smf-blue-50); } .smf-drop__all .smf-icon { width: .875rem; height: .875rem; } .smf-header__call { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .5rem 1rem; border-radius: 999px; background: var(--smf-blue-50); color: var(--smf-blue-dark); font-weight: 700; transition: background-color .15s ease, color .15s ease; } /* Wygląda jak przycisk, więc musi reagować jak przycisk. */ .smf-header__call:hover { background: var(--smf-blue); color: #fff; } /* Dolna nawigacja mobilna -------------------------------------------------- */ .smf-tabbar { position: fixed; left: 0; bottom: 0; z-index: 70; width: 100%; display: flex; align-items: flex-end; background: rgba(255, 255, 255, .92); backdrop-filter: blur(16px); border-top: 1px solid var(--smf-line); box-shadow: 0 -8px 28px rgba(15, 23, 42, .07); padding-bottom: env(safe-area-inset-bottom, 0); } .smf-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-height: 3.5rem; padding: .5rem .25rem; color: #64748b; font-size: .625rem; font-weight: 600; transition: color .15s ease; } .smf-tabbar a:hover, .smf-tabbar a:focus-visible { color: var(--smf-blue); } .smf-tabbar__fab { flex: 1; display: flex; justify-content: center; } .smf-tabbar__fab a { margin-top: -1.5rem; color: var(--smf-gold-deep); gap: .375rem; } .smf-tabbar__fab span.smf-fab { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--smf-gold); color: var(--smf-navy); border: 4px solid #fff; box-shadow: 0 10px 24px -8px rgba(245, 158, 11, .95); transition: transform .18s var(--smf-ease); } .smf-tabbar__fab a:hover span.smf-fab { transform: scale(1.06); } @media (min-width: 1024px) { .smf-header__logo img { height: 3.5rem; } .smf-nav { display: flex; } .smf-header__call { display: none; } .smf-tabbar { display: none; } } /* Podstrony nie mają dolnej nawigacji */ .smf--sub .smf-tabbar { display: none; } @media print { .smf-header, .smf-tabbar, .smf-map, .smf-blob { display: none !important; } } /* Konto i koszyk ----------------------------------------------------------- */ /* Prawa strona nagłówka: koszyk, konto, telefon */ .smf-header__actions { display: flex; align-items: center; gap: .5rem; } /* * Ikona koszyka bez podpisu — cel dotykowy 44 px, bo sama ikona ma 20 px. * Pokazuje się na każdej szerokości, ale tylko wtedy, gdy koszyk nie jest pusty. */ .smf-header__icon { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--smf-bg); color: var(--smf-navy); transition: background-color .15s ease, color .15s ease; } .smf-header__icon:hover { background: var(--smf-blue-50); color: var(--smf-blue-dark); } .smf-header__icon .smf-icon { width: 1.25rem; height: 1.25rem; } .smf-header__badge { position: absolute; top: -.125rem; right: -.125rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .25rem; border-radius: 999px; background: var(--smf-blue); color: #fff; border: 2px solid #fff; font-size: .6875rem; font-weight: 800; line-height: 1.05rem; text-align: center; font-variant-numeric: tabular-nums; }