/* * Szkoła Matematyki — base.css * Fundament: zmienne, reset, typografia, przyciski, siatka, animacje wejścia. * * Ładowany na każdej stronie, która korzysta z naszych stylów. * * Generowane z podziału jednego arkusza. Edytuj ten plik, nie łącz z powrotem. */ /* * Szkoła Matematyki – landing * ----------------------------------------------------------------------------- * Wszystko jest zamknięte w .smf, żeby style nie wyciekały na resztę * WordPressa (kasa WooCommerce, kokpit, inne podstrony). Żadnego globalnego * resetu — dlatego ta wtyczka nie psuje motywu. * * Trzy klasy-korzenie: * .smf – trafia na naszych szablonów, niesie też reguły * układu całej strony (margines, przewijanie, dolne paski). * .smf-scope – zmienne, typografia i reset, do wstawiania naszych * komponentów w cudzy szablon (np. blok „co dalej" na stronie * podziękowania WooCommerce). Bez reguł układu strony, * bo tam żadnego przyklejonego paska nie ma. * .smf-tokens – wyłącznie zmienne. Dokładana do koszyka, kasy * i konta, żeby skórka WooCommerce mogła korzystać z palety, * nie dostając przy tym naszego resetu, który rozjechałby * tabele i listy WooCommerce. */ .smf, .smf-scope, .smf-tokens { /* Kolory marki */ --smf-navy: #0f172a; --smf-navy-2: #1e293b; --smf-blue: #2563eb; --smf-blue-dark: #1d4ed8; --smf-blue-50: #eff6ff; --smf-blue-100: #dbeafe; --smf-gold: #f59e0b; --smf-gold-deep: #b45309; --smf-gold-50: #fffbeb; --smf-green: #16a34a; --smf-green-50: #f0fdf4; /* Powierzchnie i tekst */ --smf-bg: #f8fafc; --smf-surface: #ffffff; --smf-line: #e2e8f0; --smf-text: #1e293b; --smf-muted: #64748b; /* 4.76:1 na białym */ --smf-on-navy: #cbd5e1; /* 9.6:1 na navy */ /* Rytm pionowy */ --smf-s1: 0.5rem; --smf-s2: 1rem; --smf-s3: 1.5rem; --smf-s4: 2rem; --smf-s5: 3rem; --smf-s6: 5rem; --smf-radius: 1rem; --smf-radius-lg: 1.75rem; --smf-header-h: 4.5rem; --smf-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .04); --smf-shadow: 0 8px 24px -8px rgba(15, 23, 42, .12); --smf-shadow-lg: 0 24px 48px -20px rgba(15, 23, 42, .28); --smf-ease: cubic-bezier(.16, 1, .3, 1); } /* * Typografia — bez .smf-tokens, żeby nie narzucać rozmiaru pisma stronom * WooCommerce, gdzie o typografii decyduje Elementor. */ .smf, .smf-scope { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; color: var(--smf-text); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } /* * Reguły dotyczące całej strony — tylko dla .smf, bo .smf-scope siedzi * wewnątrz cudzego szablonu i nie ma prawa nim sterować. * Margines kasujemy tutaj, bo .smf trafia na , a reset niżej celuje * w `.smf *`, co samego body nie obejmuje. */ .smf { margin: 0; overflow-x: clip; /* rozmyte plamy w hero nie mogą rozpychać strony */ background: var(--smf-bg); } /* Reset ograniczony do wnętrza naszych komponentów ------------------------- */ .smf *, .smf *::before, .smf *::after, .smf-scope *, .smf-scope *::before, .smf-scope *::after { box-sizing: border-box; } .smf h1, .smf h2, .smf h3, .smf h4, .smf p, .smf ul, .smf ol, .smf figure, .smf blockquote, .smf-scope h1, .smf-scope h2, .smf-scope h3, .smf-scope h4, .smf-scope p, .smf-scope ul, .smf-scope ol { margin: 0; } .smf ul, .smf ol, .smf-scope ul, .smf-scope ol { padding: 0; list-style: none; } .smf img, .smf svg, .smf iframe, .smf-scope img, .smf-scope svg { display: block; max-width: 100%; } .smf img, .smf-scope img { height: auto; } .smf a, .smf-scope a { text-decoration: none; } /* * `color: inherit` tylko dla odnośników BEZ klasy. * * Wcześniej reguła brzmiała `.smf a { color: inherit }` — specyficzność (0,1,1), * czyli wyższa niż każdy modyfikator `.smf-btn--*` (0,1,0). Efekt: kolory * tekstu przycisków nigdy się nie stosowały i główne CTA miało ciemny tekst * na niebieskim tle (kontrast 2,83:1 przy wymaganych 4,5:1). Zawężenie do * `:not([class])` usuwa całą tę klasę błędów, zamiast łatać każdy przycisk. */ .smf a:not([class]), .smf-scope a:not([class]) { color: inherit; } .smf button, .smf input, .smf select, .smf textarea { font: inherit; color: inherit; margin: 0; } .smf h1, .smf h2, .smf h3, .smf h4, .smf-scope h1, .smf-scope h2, .smf-scope h3, .smf-scope h4 { font-family: Montserrat, Inter, system-ui, sans-serif; line-height: 1.15; color: var(--smf-navy); text-wrap: balance; } /* Widoczny focus — nigdy nie usuwamy obrysu, tylko go poprawiamy */ .smf :focus-visible, .smf-scope :focus-visible { outline: 3px solid var(--smf-blue); outline-offset: 3px; border-radius: 6px; } .smf-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .smf-icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; } .smf-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* * Odnośnik „przejdź do treści". Ukryty, dopóki nie dostanie fokusu z klawiatury — * wtedy MUSI się pokazać, inaczej nie spełnia swojej roli (WCAG 2.4.1). */ .smf-skip { position: absolute; left: -9999px; top: 0; z-index: 200; } .smf-skip:focus { left: 1rem; top: 1rem; padding: .75rem 1.25rem; border-radius: .75rem; background: var(--smf-navy); color: #fff; font-weight: 700; box-shadow: var(--smf-shadow-lg); } /* Układ -------------------------------------------------------------------- */ .smf-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; } .smf-container--narrow { max-width: 900px; } .smf-section { padding-block: var(--smf-s6); /* Przyklejony nagłówek nie może zasłaniać celu kotwicy */ scroll-margin-top: calc(var(--smf-header-h) + 1rem); } .smf-section--white { background: var(--smf-surface); } .smf-section--light { background: var(--smf-bg); } .smf-section--navy { background: var(--smf-navy); } .smf-section--edge { border-top: 1px solid var(--smf-line); } .smf-head { max-width: 46rem; margin-inline: auto; text-align: center; margin-bottom: var(--smf-s5); } .smf-head--left { margin-inline: 0; text-align: left; } .smf-eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--smf-blue); margin-bottom: .75rem; } .smf-h2 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); font-weight: 800; } .smf-h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 700; } .smf-lead { font-size: 1.0625rem; color: var(--smf-muted); margin-top: var(--smf-s2); max-width: 60ch; } .smf-head .smf-lead { margin-inline: auto; } .smf-head--left .smf-lead { margin-inline: 0; } /* Przyciski ---------------------------------------------------------------- */ .smf-btn { display: inline-flex; align-items: center; justify-content: center; gap: .625rem; min-height: 3rem; /* >= 44px, wymóg dotykowy */ padding: .875rem 1.75rem; border: 2px solid transparent; border-radius: 999px; font-weight: 700; font-size: 1rem; text-align: center; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s var(--smf-ease), box-shadow .18s ease; } .smf-btn:hover { transform: translateY(-2px); } .smf-btn:active { transform: translateY(0); } .smf-btn--primary { background: var(--smf-blue); color: #fff; box-shadow: 0 10px 24px -10px rgba(37, 99, 235, .8); } .smf-btn--primary:hover { background: var(--smf-blue-dark); } /* * Złoty przycisk ma granatowy tekst, nie biały. * Biel na #f59e0b daje kontrast 2.1:1 (poniżej progu WCAG), * granat na złocie daje 9.4:1. */ .smf-btn--gold { background: var(--smf-gold); color: var(--smf-navy); box-shadow: 0 10px 24px -10px rgba(245, 158, 11, .9); } .smf-btn--gold:hover { background: #fbbf24; } .smf-btn--dark { background: var(--smf-navy); color: #fff; } .smf-btn--dark:hover { background: var(--smf-navy-2); } .smf-btn--ghost { background: var(--smf-surface); color: var(--smf-navy); border-color: var(--smf-line); } .smf-btn--ghost:hover { border-color: #cbd5e1; background: #f1f5f9; } .smf-btn--outline { background: transparent; color: var(--smf-blue); border-color: var(--smf-blue); } .smf-btn--outline:hover { background: var(--smf-blue-50); } /* Przycisk drugorzędny na granatowym tle wyróżnionej karty */ .smf-btn--onnavy { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); } .smf-btn--onnavy:hover { background: rgba(255, 255, 255, .12); border-color: #fff; } .smf-btn--block { display: flex; width: 100%; } .smf-btn--sm { min-height: 2.75rem; padding: .625rem 1.25rem; font-size: .9375rem; } .smf-quote-mark { position: absolute; top: 1.25rem; right: 1.25rem; width: 2.25rem; height: 2.25rem; color: var(--smf-blue); opacity: .12; } .smf-pay-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.5rem; margin-top: var(--smf-s4); font-size: .875rem; color: var(--smf-muted); } .smf-pay-note span { display: inline-flex; align-items: center; gap: .5rem; } .smf-pay-note .smf-icon { width: 1.125rem; height: 1.125rem; color: var(--smf-green); } /* ========================================================================== PODSTRONY — strona pakietu i strony prawne ========================================================================== */ /* * Selektor musi być mocniejszy niż reset `.smf a { color: inherit }` (0,1,1), * inaczej odnośnik dziedziczy kolor akapitu — w notce o stawkach i w ramce * pomocy na stronie prawnej wychodził szary zamiast niebieskiego. */ .smf a.smf-link, .smf-scope a.smf-link { color: var(--smf-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: .375rem; } .smf a.smf-link:hover, .smf-scope a.smf-link:hover { color: var(--smf-blue-dark); } .smf-link .smf-icon { width: 1rem; height: 1rem; } /* Strony prawne ------------------------------------------------------------ */ /* * 41rem, nie szerzej. Przy 52rem akapit regulaminu miał 85 znaków w wierszu * (zmierzone), a długi tekst prawny czyta się dobrze przy 65–75. */ .smf-container--legal { max-width: 41rem; } /* * Animacje wejścia. * * Ukrywamy elementy TYLKO wtedy, gdy skrypt zdążył dodać .smf-js do . * Gdyby JavaScript był zablokowany albo wywalił się z błędem, treść po prostu * jest widoczna — zamiast pustej, białej strony. */ /* * Animujemy osobną właściwością `translate`, a nie `transform`. Gdyby użyć * transform, ta reguła nadpisywałaby uniesienie wyróżnionego pakietu * i podnoszenie kart pod kursorem — tamte selektory mają niższą specyficzność. */ .smf-reveal { transition: opacity .6s var(--smf-ease), translate .6s var(--smf-ease); } .smf-js .smf-reveal { opacity: 0; translate: 0 18px; } .smf-js .smf-reveal.is-visible { opacity: 1; translate: none; } .smf-reveal[data-delay="1"] { transition-delay: 80ms; } .smf-reveal[data-delay="2"] { transition-delay: 160ms; } .smf-reveal[data-delay="3"] { transition-delay: 240ms; } @media (min-width: 768px) { .smf-container { padding-inline: 2rem; } } @media (min-width: 1024px) { .smf { --smf-header-h: 5rem; } } @media (max-width: 1023px) { .smf { padding-bottom: 4.5rem; } } @media (prefers-reduced-motion: reduce) { .smf *, .smf *::before, .smf *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .smf-js .smf-reveal { opacity: 1; translate: none; } }