@charset "UTF-8"; /* reset.scss EN: Small, safe CSS reset for consistent defaults across browsers. PL: Mały, bezpieczny reset CSS dla spójnych domyślnych styli przeglądarek. */ /* Box sizing EN: Include pseudo-elements so layout is predictable. PL: Obejmuje też pseudo-elementy dla przewidywalnego layoutu. */ *, *::before, *::after { box-sizing: border-box; } /* Remove default body margin EN: Many browsers add margin to . PL: Wiele przeglądarek dodaje domyślny margines do . */ body { margin: 0; font-family: "Helvetica Neue", sans-serif; line-height: 1.6; background-color: #fff; color: #333; /* NOTE/INFO: Ustawienia w styles.scss mogą to nadpisać. */ } /* Typography defaults EN: Let headings and paragraphs start clean without extra spacing from user agents. PL: Nagłówki/akapit bez dodatkowych marginesów narzuconych przez przeglądarki. */ h1, h2, h3, h4, h5, h6, p { margin: 0; } /* Media elements EN: Media should scale with their container and be block-level to avoid inline gaps. PL: Media skalują się do kontenera i są blokowe, by uniknąć przerw inline. */ img, video, canvas, svg, picture { display: block; max-width: 100%; height: auto; } /* Forms inherit fonts/colors EN: Inputs and buttons use the same typography as the document. PL: Pola formularzy i przyciski dziedziczą typografię z dokumentu. */ button, input, select, textarea { font: inherit; color: inherit; } /* Buttons: remove default background in some UAs while keeping accessibility PL: Usuwa domyślne tło w części przeglądarek, zachowując dostępność. */ button { background: none; border: none; padding: 0; } /* Links EN: Keep default underline but make it nicer; don’t force colors here. PL: Zostaw podkreślenie (czytelność), ale popraw jego wygląd; bez wymuszania kolorów. */ a { -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } /* Inputs: images don’t overflow in buttons or inputs with images/icons. PL: Zapobiega „wyciekaniu” obrazków w przyciskach/polach. */ button > img, input[type=image] { display: inline-block; max-width: 100%; } /* Accessibility: Respect user font scaling on iOS/Android. PL: Szanuj skalowanie czcionek w iOS/Android. */ html { -webkit-text-size-adjust: 100%; } /* ========================================================= TOKENS / VARIABLES — Tokeny / Zmienne ========================================================= */ /* Header heights */ /* Logo heights */ /* Breakpoints */ /* --------------------------------------------------------- UTIL FUNCTION — Pomocnik do płynnych rozmiarów --------------------------------------------------------- */ /* ========================================================= BASE / GLOBAL — Baza / Global ========================================================= */ html { scroll-behavior: smooth; scroll-padding-top: 116px; } @media (max-width: 768px) { html { scroll-padding-top: 92px; } } body { font-family: "Helvetica Neue", sans-serif; background: #fff; color: #222; -webkit-text-size-adjust: 100%; } *, *::before, *::after { box-sizing: border-box; } img, video, canvas, svg { max-width: 100%; height: auto; display: block; } /* Focus styles (a11y) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(0, 112, 243, 0.35); outline-offset: 2px; } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: 0; background: #000; color: #fff; padding: 0.5rem 0.75rem; border-radius: 6px; } .skip-link:focus { left: 0.75rem; top: 0.75rem; z-index: 10000; } /* Container */ .container { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); min-width: 0; } section { padding: 4rem 1rem; } .section-title { font-size: clamp(1.8rem, 1.8vw, 2.5rem); text-align: center; margin: 0 0 3rem; color: #222; } /* Anchor offsets for sticky header */ #o-mnie, #oferta, #cennik, #kontakt, .oferta-card, .pricing-card, #course, #policy-hero, #shop { scroll-margin-top: 98px; } /* Subtle highlight */ @keyframes targetFlash { 0% { background-color: rgba(0, 112, 243, 0.06); } 100% { background-color: transparent; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================= HEADER / NAV — Nagłówek / Nawigacja ========================================================= */ #main-header { position: fixed; inset: 0 0 auto 0; width: 100%; z-index: 999; /* Zmienne kolorów paska + dziedziczenie */ --hdr-bg: transparent; --hdr-fg: #fff; background-color: var(--hdr-bg); color: var(--hdr-fg); transition: background-color 0.4s ease, color 0.2s ease, box-shadow 0.4s ease, -webkit-backdrop-filter 0.4s ease; transition: background-color 0.4s ease, color 0.2s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease; transition: background-color 0.4s ease, color 0.2s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease; /* Burger — korzysta z currentColor, więc przebarwia się z paskiem */ /* Mobile panel */ } #main-header .container { height: 116px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } #main-header .logo-link { height: 100%; display: flex; align-items: center; } #main-header .logo-link .logo { height: 100%; -o-object-fit: contain; object-fit: contain; max-height: calc(96px - 16px); } #main-header nav ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; align-items: center; } #main-header nav ul li a { color: inherit; /* było: #fff */ text-decoration: none; font-weight: 500; transition: color 0.25s ease; } #main-header nav ul li a:hover { color: #0070f3; } #main-header nav ul li a[aria-current=page] { text-decoration: underline; text-underline-offset: 4px; } #main-header nav a.nav-cta { display: inline-block; padding: 0.55rem 0.95rem; border-radius: 999px; background: #0070f3; color: #fff; font-weight: 700; line-height: 1; text-decoration: none; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08); transition: background 0.2s ease, transform 0.08s ease, box-shadow 0.2s ease; } #main-header nav a.nav-cta:hover { background: rgb(0, 97.8962962963, 212.4); } #main-header nav a.nav-cta:active { transform: translateY(1px); } #main-header.scrolled { --hdr-bg: #E4E0E1; --hdr-fg: #333; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } @supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) { #main-header.scrolled { -webkit-backdrop-filter: saturate(160%) blur(8px); backdrop-filter: saturate(160%) blur(8px); } } #main-header.scrolled nav a.nav-cta { color: #fff; } #main-header .burger { width: 44px; height: 44px; padding: 8px; border: 0; background: transparent; cursor: pointer; display: none; flex-direction: column; gap: 5px; color: inherit; } #main-header .burger span { width: 100%; height: 3px; background: currentColor; transition: all 0.3s ease; display: block; } #main-header .burger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } #main-header .burger.active span:nth-child(2) { opacity: 0; } #main-header .burger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } @media (max-width: 768px) { #main-header .container { height: 112px; } #main-header .burger { display: flex; } #main-header .logo-link .logo { height: auto; max-height: calc(72px - 12px); } #main-header nav { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-top: 1px solid #ddd; box-shadow: 0 12px 20px rgba(0, 0, 0, 0.08); box-sizing: border-box; padding-inline: 16px; overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none; transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.35s; } #main-header nav ul { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 8px 0; list-style: none; } #main-header nav ul li + li { border-top: 1px solid #f5f5f5; } #main-header nav ul li a, #main-header nav.active ul li a { display: block; padding: 12px 16px; color: #333 !important; text-decoration: none; border-radius: 8px; transition: background 0.2s ease; } #main-header nav ul li a:hover { background: #f6f6f7; } #main-header nav a.nav-cta { background: transparent; color: #333 !important; box-shadow: none; border-radius: 8px; padding: 12px 16px; font-weight: 600; } #main-header nav.active { max-height: 60vh; opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease, visibility 0s; } } @media (max-width: 768px) and (max-width: 360px) { #main-header .container { height: 60px; } #main-header .logo-link .logo { height: 48px; max-height: 48px; } } /* >>> DODANA POPRAWKA – podniesiona specyficzność koloru linków, gdy pasek ma klasę .scrolled */ #main-header.scrolled nav ul li a { color: #333; } /* --- AUTO-SCROLLED NA PODSTRONACH (bez #hero) — CSS :has() --- */ html:not(:has(#hero)) #main-header { --hdr-bg: #E4E0E1; --hdr-fg: #333; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } @supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) { html:not(:has(#hero)) #main-header { -webkit-backdrop-filter: saturate(160%) blur(8px); backdrop-filter: saturate(160%) blur(8px); } } html:not(:has(#hero)) #main-header .cart-btn { background: #fff; } /* --- Alternatywny toggle, jeśli w JS dodasz na klasę .header-scrolled --- */ html.header-scrolled #main-header { --hdr-bg: #E4E0E1; --hdr-fg: #333; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } @supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) { html.header-scrolled #main-header { -webkit-backdrop-filter: saturate(160%) blur(8px); backdrop-filter: saturate(160%) blur(8px); } } html.header-scrolled #main-header .cart-btn { background: #fff; } /* ========================================================= HERO — Sekcja powitalna ========================================================= */ #hero { min-height: 100vh; min-height: 100svh; background: url("../images/hero.png") center/cover no-repeat; position: relative; color: #fff; display: flex; align-items: center; justify-content: center; } #hero::before { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 1; } #hero .hero-inner { position: relative; z-index: 2; text-align: center; max-width: 800px; } #hero .hero-inner h1 { font-size: clamp(2.2rem, 3vw, 3rem); margin: 0 0 1rem; } #hero .hero-inner p { font-size: 1.125rem; margin: 0 0 2rem; } #hero .hero-inner .cta-button { background: #0070f3; color: #fff; padding: 0.8rem 1.5rem; border-radius: 10px; font-weight: 700; display: inline-block; text-decoration: none; transition: background-color 0.3s ease; } #hero .hero-inner .cta-button:hover { background-color: rgb(0, 88.4938271605, 192); } /* ========================================================= ABOUT — O mnie ========================================================= */ .about-section { background: #f9f9f9; } .about-section .container { display: block; text-align: left; } .about-section .about-wrapper { display: flex; align-items: center; gap: 4rem; max-width: 1200px; margin: 0 auto; } @media (max-width: 768px) { .about-section .about-wrapper { flex-direction: column; text-align: left; } } .about-section .about-image { flex: 1; } .about-section .about-image img { width: 100%; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } .about-section .about-text { flex: 1; } .about-section .about-text p { font-size: 1.125rem; line-height: 1.6; margin-bottom: 1.2rem; color: #444; } .about-section .about-text .cta-button { background: #0070f3; color: #fff; padding: 0.8rem 1.5rem; border-radius: 10px; text-decoration: none; font-weight: 700; display: inline-block; transition: background-color 0.3s ease; } .about-section .about-text .cta-button:hover { background: rgb(0, 88.4938271605, 192); } /* ========================================================= OFFER — Oferta ========================================================= */ .oferta-section { background: #fff; } .oferta-section .container { display: block; text-align: center; } .oferta-section .oferta-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } @media (max-width: 768px) { .oferta-section .oferta-grid { grid-template-columns: 1fr; } } .oferta-section .oferta-card { position: relative; background: #f9f9f9; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; } .oferta-section .oferta-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); } .oferta-section .oferta-card::before, .oferta-section .oferta-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; } .oferta-section .oferta-card::before { background: rgba(0, 112, 243, 0.08); transition: opacity 0.45s ease; will-change: opacity; } .oferta-section .oferta-card::after { inset: -2px; box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.25); transition: opacity 0.6s ease; will-change: opacity; } .oferta-section .oferta-card.flash::before, .oferta-section .oferta-card.flash::after { opacity: 1; } .oferta-section .oferta-card .card-image { position: relative; } .oferta-section .oferta-card .card-image img { width: 100%; height: auto; } .oferta-section .oferta-card .card-image .card-action { position: absolute; right: 14px; bottom: 14px; width: 56px; height: 56px; border-radius: 999px; background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #0070f3; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); display: grid; place-items: center; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease; } .oferta-section .oferta-card .card-image .card-action svg { width: 28px; height: 28px; display: block; } .oferta-section .oferta-card .card-image .card-action:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14); } .oferta-section .oferta-card .card-content { padding: 1.5rem; text-align: left; } .oferta-section .oferta-card .card-content h3 { font-size: 1.5rem; margin: 0 0 0.5rem; color: #0070f3; } .oferta-section .oferta-card .card-content .lead { font-weight: 600; margin: 0 0 1rem; color: #444; } .oferta-section .oferta-card .card-content p { font-size: 1rem; line-height: 1.6; color: #333; } /* ========================================================= PRICING — Cennik ========================================================= */ .pricing-section { background: #f9f9f9; } .pricing-section .container { display: block; text-align: center; } .pricing-section .pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 1200px; margin: 0 auto; } @media (max-width: 768px) { .pricing-section .pricing-grid { grid-template-columns: 1fr; } } .pricing-section .pricing-card { display: block; text-decoration: none; color: inherit; background: #fff; border-radius: 10px; padding: 2rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; text-align: left; } .pricing-section .pricing-card:hover { transform: translateY(-5px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); } .pricing-section .pricing-card h3 { font-size: 1.25rem; margin: 0 0 1rem; color: #333; } .pricing-section .pricing-card .pricing-info { display: flex; justify-content: space-between; align-items: center; margin: 0 0 0.5rem; } .pricing-section .pricing-card .pricing-info .time { font-weight: 500; color: #666; } .pricing-section .pricing-card .pricing-info .price { font-size: 1.25rem; font-weight: 700; color: #0070f3; } .pricing-section .pricing-card .pricing-instalments { font-size: 0.9rem; color: #777; margin-top: 0.5rem; } /* ========================================================= CONTACT — Kontakt ========================================================= */ .contact-section { background: #fff; } .contact-section .container { display: block; text-align: center; } .contact-section .card { background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); max-width: 100%; padding: clamp(1.25rem, 4vw, 2rem); text-align: left; } .contact-section .contact-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .contact-section .contact-grid > * { min-width: 0; } @media (max-width: 900px) { .contact-section .contact-grid { grid-template-columns: 1fr; } } .contact-section .contact-info h3 { font-size: 1.6rem; margin: 0 0 0.6rem; } .contact-section .contact-info .lead { color: #555; margin: 0 0 1.2rem; } .contact-section .contact-info .contact-list { list-style: none; padding: 0; margin: 0 0 1.2rem; } .contact-section .contact-info .contact-list li { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.6rem; } .contact-section .contact-info .contact-list .icon { display: inline-flex; width: 22px; height: 22px; color: #0070f3; flex: 0 0 22px; } .contact-section .contact-info .contact-list .icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2; } .contact-section .contact-info .contact-list .label { color: #666; min-width: 95px; } .contact-section .contact-info .contact-list a { color: #0070f3; text-decoration: none; overflow-wrap: anywhere; word-break: break-word; white-space: normal; } .contact-section .contact-info .contact-list a:hover { text-decoration: underline; } @media (max-width: 600px) { .contact-section .contact-info .label { min-width: 84px; } } .contact-section .contact-info .socials { display: flex; gap: 1rem; flex-wrap: wrap; } .contact-section .contact-info .socials a { display: inline-block; padding: 0.5rem 0.9rem; border-radius: 999px; background: #f4f4f4; text-decoration: none; color: #333; font-weight: 500; transition: background 0.2s ease; } .contact-section .contact-info .socials a:hover { background: #eaeaea; } .contact-section .contact-form form { width: 100%; max-width: 100%; } .contact-section .contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 600px) { .contact-section .contact-form .form-row { grid-template-columns: 1fr; } } .contact-section .contact-form .form-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; } .contact-section .contact-form .form-field label { font-weight: 600; color: #333; } .contact-section .contact-form .form-field input, .contact-section .contact-form .form-field textarea { width: 100%; border: 1px solid #ddd; border-radius: 8px; padding: 0.9rem 1rem; font-size: 1rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .contact-section .contact-form .form-field input:focus, .contact-section .contact-form .form-field textarea:focus { outline: none; border-color: #0070f3; box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.15); } .contact-section .contact-form .form-field input[aria-invalid=true], .contact-section .contact-form .form-field textarea[aria-invalid=true] { border-color: #d93025; box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.15); } .contact-section .contact-form .form-field .input-error { min-height: 1.1em; font-size: 0.9rem; color: #d93025; } .contact-section .contact-form .consent { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.95rem; color: #444; margin: 0.5rem 0 1rem; } .contact-section .contact-form .consent a { color: #0070f3; text-decoration: none; } .contact-section .contact-form .consent a:hover { text-decoration: underline; } .contact-section .contact-form .consent input { margin-top: 0.2rem; } .contact-section .contact-form .btn { display: inline-block; background: #0070f3; color: #fff; font-weight: 700; border: 0; border-radius: 10px; padding: 0.9rem 1.4rem; cursor: pointer; transition: transform 0.08s ease, box-shadow 0.2s ease, background 0.2s ease; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08); } .contact-section .contact-form .btn:hover { background: rgb(0, 100.2469135802, 217.5); } .contact-section .contact-form .btn:active { transform: translateY(1px); } .contact-section .contact-form .btn:disabled { opacity: 0.6; cursor: not-allowed; } .contact-section .contact-form .form-status { margin-top: 0.8rem; font-size: 0.95rem; color: #2c7a3f; } .contact-section .contact-form .form-status.error { color: #d93025; } /* ========================================================= FOOTER — Stopka ========================================================= */ .site-footer { background: #f5f5f5; border-top: 1px solid #e6e6e6; color: #333; } .site-footer .container { display: block; padding: 2rem 1rem; } .site-footer .footer-top { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem; align-items: start; max-width: 1200px; margin: 0 auto; } @media (max-width: 900px) { .site-footer .footer-top { grid-template-columns: 1fr; text-align: center; } } .site-footer .footer-brand .footer-logo { height: 36px; display: block; } .site-footer .footer-brand .tagline { margin-top: 0.75rem; color: #555; line-height: 1.5; } @media (max-width: 900px) { .site-footer .footer-brand .footer-logo-wrap { display: inline-block; } } .site-footer .footer-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; } .site-footer .footer-nav a { text-decoration: none; color: #333; transition: color 0.2s ease; } .site-footer .footer-nav a:hover { color: #0070f3; } .site-footer .footer-nav a[aria-current=page] { text-decoration: underline; text-underline-offset: 4px; } .site-footer .footer-contact p { margin: 0 0 0.4rem; } .site-footer .footer-contact a { color: #0070f3; text-decoration: none; overflow-wrap: anywhere; word-break: break-word; white-space: normal; } .site-footer .footer-contact a:hover { text-decoration: underline; } .site-footer .footer-bottom { border-top: 1px solid #e6e6e6; margin-top: 2rem; padding-top: 1rem; text-align: center; font-size: 0.9rem; color: #555; } /* ========================================================= MOBILE OVERFLOW FIXES — Naprawy overflow na mobile ========================================================= */ html, body { width: 100%; max-width: 100%; overflow-x: hidden; } @media (max-width: 360px) { #main-header .container { padding-left: 1rem; padding-right: 1rem; } } /* ========================================================= GLOBAL BUTTONS & CARDS — Globalne komponenty ========================================================= */ .btn { display: inline-block; background: #0070f3; color: #fff; font-weight: 700; border: 0; border-radius: 10px; padding: 0.9rem 1.4rem; cursor: pointer; text-decoration: none; transition: transform 0.08s ease, box-shadow 0.2s ease, background 0.2s ease; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08); } .btn:hover { background: rgb(0, 100.2469135802, 217.5); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn.btn-secondary { background: #fff; color: #0070f3; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06); } .btn.btn-secondary:hover { background: #f7f9ff; } .card { background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); padding: clamp(1.25rem, 4vw, 2rem); } /* ========================================================= COURSE SUBPAGES — Podstrony ofert ========================================================= */ .course-hero { position: relative; min-height: 56vh; display: grid; place-items: center; background: #e9eef9 center/cover no-repeat; color: #fff; text-align: center; } .course-hero .course-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.35)); } .course-hero .course-hero__inner { position: relative; z-index: 1; max-width: 900px; } .course-hero .course-hero__inner h1 { font-size: clamp(2rem, 3.2vw, 3rem); margin: 0 0 0.75rem; } .course-hero .course-hero__inner .lead { font-size: 1.125rem; opacity: 0.98; } .course-hero .course-hero__inner .hero-cta { margin-top: 1.25rem; display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } .course-content { background: #fff; } .course-content .container { display: block; } .course-content .course-grid { display: grid; grid-template-columns: 1.5fr 0.9fr; gap: 2rem; max-width: 1200px; margin: 0 auto; } @media (max-width: 900px) { .course-content .course-grid { grid-template-columns: 1fr; } } .course-content .course-grid > * { min-width: 0; } .course-content .course-main h2, .course-content .course-main h3 { color: #222; margin-top: 0.25rem; } .course-content .course-main h2 { font-size: 1.6rem; margin-bottom: 0.75rem; } .course-content .course-main h3 { font-size: 1.25rem; margin: 1.25rem 0 0.5rem; } .course-content .course-main p, .course-content .course-main li { color: #444; line-height: 1.65; } .course-content .course-main ol { padding-left: 1.25rem; } .course-content .course-main .checklist { list-style: none; padding: 0; margin: 0.5rem 0 0; } .course-content .course-main .checklist li { position: relative; padding-left: 1.75rem; margin: 0.4rem 0; } .course-content .course-main .checklist li::before { content: "✓"; position: absolute; left: 0; top: 0.1rem; font-weight: 800; color: #0070f3; } .course-content .course-side { position: relative; } @media (min-width: 900px) { .course-content .course-side { position: sticky; top: calc(96px + 16px); align-self: start; } } .course-content .course-side h3 { margin-top: 0; } .course-content .course-side .meta { list-style: none; padding: 0; margin: 0.5rem 0 1rem; } .course-content .course-side .meta li { margin: 0.4rem 0; color: #444; } .course-content .course-side .meta strong { color: #222; } .course-content .course-side .side-cta { display: grid; gap: 0.5rem; } .course-content .back-link { margin-top: 2rem; text-align: center; } .course-content .back-link a { color: #0070f3; text-decoration: none; } .course-content .back-link a:hover { text-decoration: underline; } /* ========================================================= SHOP — Sklep ========================================================= */ .cart-btn { margin-left: 0.5rem; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.2); cursor: pointer; color: inherit; /* dziedziczy z nagłówka */ transition: background 0.2s ease, transform 0.06s ease; } .cart-btn svg { width: 22px; height: 22px; fill: currentColor; color: currentColor; } .cart-btn .cart-count { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #0070f3; color: #fff; font-size: 0.72rem; line-height: 18px; text-align: center; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } #main-header.scrolled .cart-btn { background: #fff; } html:not(:has(#hero)) #main-header .cart-btn { background: #fff; } html.header-scrolled #main-header .cart-btn { background: #fff; } .shop-hero { min-height: 44vh; display: grid; place-items: center; text-align: center; background: linear-gradient(180deg, rgba(0, 112, 243, 0.08), transparent); } .shop-hero .lead { max-width: 60ch; margin: 0.75rem auto 1.25rem; color: #444; } .shop-section { background: #fff; padding-top: 2rem; } .shop-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .shop-grid { grid-template-columns: 1fr; } } .product-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; } .product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1); } .product-card .p-img { aspect-ratio: 4/3; background: #f6f7f9; display: block; overflow: hidden; } .product-card .p-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .product-card .p-body { padding: 1rem 1rem 1.25rem; display: grid; gap: 0.5rem; } .product-card .p-title { font-size: 1.1rem; margin: 0; color: #222; } .product-card .p-desc { color: #555; font-size: 0.95rem; } .product-card .p-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 0.25rem; } .product-card .p-price { font-weight: 700; color: #0070f3; } .product-card .p-actions { display: flex; gap: 0.5rem; } .product-card .btn--small { padding: 0.6rem 0.9rem; border-radius: 10px; } /* Cart overlay / drawer */ .cart-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); opacity: 0; visibility: hidden; transition: opacity 0.25s ease; z-index: 998; } .cart-overlay.active { opacity: 1; visibility: visible; } .cart-drawer { position: fixed; right: 0; top: 0; bottom: 0; width: min(420px, 100%); background: #fff; box-shadow: -12px 0 24px rgba(0, 0, 0, 0.16); transform: translateX(100%); transition: transform 0.28s ease; z-index: 999; display: grid; grid-template-rows: auto 1fr auto; } .cart-drawer.active { transform: translateX(0); } .cart-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem; border-bottom: 1px solid #eee; } .cart-header h2 { margin: 0; font-size: 1.25rem; } .cart-close { font-size: 1.6rem; background: transparent; border: 0; cursor: pointer; line-height: 1; padding: 0.25rem 0.4rem; } .cart-items { padding: 1rem; overflow: auto; display: grid; gap: 0.75rem; } .cart-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 0.75rem; align-items: center; border: 1px solid #eee; border-radius: 10px; padding: 0.5rem; } .cart-item img { width: 64px; height: 64px; -o-object-fit: cover; object-fit: cover; border-radius: 8px; } .cart-item h4 { margin: 0 0 0.25rem; font-size: 1rem; } .cart-item .price { color: #0070f3; font-weight: 700; } .qty { display: inline-flex; align-items: center; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; } .qty button { width: 32px; height: 32px; border: 0; background: #f5f5f5; cursor: pointer; } .qty input { width: 40px; text-align: center; border: 0; outline: none; } .cart-footer { border-top: 1px solid #eee; padding: 1rem; } .cart-summary { display: flex; align-items: center; justify-content: space-between; font-size: 1.05rem; margin-bottom: 0.75rem; } .cart-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .cart-note { margin-top: 0.5rem; font-size: 0.85rem; color: #666; } /* ========================================================= PRIVACY POLICY — Polityka prywatności ========================================================= */ .legal-hero { background: url("../images/hero.png") center/cover no-repeat; position: relative; color: #fff; min-height: 42vh; display: flex; align-items: center; } .legal-hero .legal-hero__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); } .legal-hero .legal-hero__inner { position: relative; z-index: 1; text-align: left; padding: 4rem 1rem; } .legal-hero .legal-hero__inner h1 { font-size: clamp(2rem, 3vw, 3rem); margin: 0 0 0.75rem; } .legal-hero .legal-hero__inner .lead { font-size: 1.125rem; margin: 0 0 0.75rem; max-width: 60ch; } .legal-hero .legal-hero__inner .legal-hero__meta { opacity: 0.9; font-size: 0.95rem; } .legal-content { background: #fff; padding: 3rem 1rem; } .legal-content .legal-article { background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); max-width: min(880px, 100%); margin: 0 auto; padding: clamp(1rem, 2vw, 2rem); } .legal-content .legal-article h2 { margin-top: 1.25rem; margin-bottom: 0.5rem; font-size: clamp(1.25rem, 1.8vw, 1.5rem); color: #222; } .legal-content .legal-article p, .legal-content .legal-article li { color: #333; line-height: 1.7; } .legal-content .legal-article ul, .legal-content .legal-article ol { padding-left: 1.1rem; } .legal-content .legal-article a { color: #0070f3; } .legal-content .legal-article .back-link { margin-top: 2rem; }/*# sourceMappingURL=styles.css.map */