/* ================================================================== POROWNANIE NARZEDZI AI -- narzedzia-ai-dla-nauczycieli.php ================================================================== Kazdy selektor jest prefiksowany .por-, bo ten plik laduje sie obok style.css i header.css. Luzny selektor (np. samo "table") przemalowalby tabele na innych stronach platformy. Palety NIE deklarujemy na :root. :root nie jest scope'owany i wycieka do header.php, footer.php oraz kazdego wspoldzielonego modala -- dokladnie tak my_subscriptions.php i payment.php zepsuly przycisk w modalu subskrypcji (bialy tekst na kremowym tle, 1.3:1). Aliasujemy na tokeny motywu wewnatrz kontenera strony. */ .por-strona { /* Aliasy lokalne -- jedno miejsce do zmiany, zero wycieku poza .por-strona. */ --por-tekst: var(--text-dark, #1f2937); --por-tekst-slaby: var(--text-muted, #6b7280); --por-tlo-karty: var(--card-bg-default, #ffffff); --por-ramka: var(--tile-border, rgba(15, 23, 42, .12)); --por-akcent: var(--brand-fixed, #2E7D5B); /* .main-header jest position:fixed o wysokosci 95px -- ta sama wartosc na kazdym breakpoincie (header.css celowo jej nie skaluje, bo "many pages depend on that fixed value for their own top-clearance math"). Strona bez tego odstepu wsuwa sie POD pasek i pierwszy naglowek jest przyciety -- tak wlasnie wygladala ta strona po pierwszym wdrozeniu. Kazda nowa strona publiczna musi to uwzglednic. */ --wys-naglowka: 95px; max-width: 62rem; margin: 0 auto; padding: calc(var(--wys-naglowka) + 2rem) 1.25rem 4rem; color: var(--por-tekst); line-height: 1.7; } .por-naglowek h1 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); line-height: 1.25; margin: 0 0 .75rem; } .por-lead { font-size: 1.1rem; color: var(--por-tekst-slaby); margin: 0 0 .5rem; } /* Data weryfikacji jest sygnalem wiarygodnosci, nie metadanymi -- ma byc widoczna. */ .por-data { font-size: .9rem; color: var(--por-tekst-slaby); margin: 0 0 2rem; } .por-tresc h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin: 2.5rem 0 .75rem; } .por-tresc h3 { font-size: 1.15rem; margin: 0 0 .5rem; } /* --- TABELA ------------------------------------------------------------ Otoczka przewija sie w poziomie SAMA. Bez tego cztery kolumny z konkretna trescia (a konkret jest tu celem, nie ozdoba) rozpychaja na telefonie i cala strona jezdzi na boki. */ .por-tabela-otoczka { overflow-x: auto; margin: 1.5rem 0 2rem; border: 1.5px solid var(--por-ramka); border-radius: 1.15rem; background: var(--por-tlo-karty); } .por-tabela { width: 100%; min-width: 44rem; /* ponizej tego komorki lamia sie na sylaby */ border-collapse: collapse; font-size: .95rem; } .por-tabela-podpis { caption-side: top; text-align: left; padding: 1rem 1rem .5rem; font-size: .875rem; color: var(--por-tekst-slaby); } .por-tabela th, .por-tabela td { padding: .85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--por-ramka); } .por-tabela thead th { font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--por-akcent) 8%, var(--por-tlo-karty)); } .por-tabela tbody th[scope="row"] { font-weight: 700; white-space: nowrap; color: var(--por-akcent); } .por-tabela tbody tr:last-child th, .por-tabela tbody tr:last-child td { border-bottom: 0; } /* --- SEKCJE NARZEDZI --------------------------------------------------- Jezyk wizualny "candy-card" z reszty platformy, zeby strona nie wygladala na doklejona z zewnatrz. */ .por-pozycja { background: linear-gradient(155deg, color-mix(in srgb, var(--por-akcent) 10%, var(--por-tlo-karty)) 0%, var(--por-tlo-karty) 55%); border: 1.5px solid color-mix(in srgb, var(--por-akcent) 20%, var(--por-ramka)); border-radius: 1.15rem; padding: 1.35rem 1.5rem; margin: 0 0 1.25rem; } .por-pozycja p { margin: 0 0 .75rem; } .por-pozycja p:last-child { margin-bottom: 0; } .por-kryteria, .por-slabosci, .por-decyzja { margin: 0 0 1rem; padding-left: 1.25rem; } .por-kryteria li, .por-slabosci li, .por-decyzja li { margin-bottom: .5rem; } /* Zastrzezenie o tym, ze to nasza strona. Wyroznione, bo ukryte czytaloby sie jak proba przemycenia -- a to wlasnie ono kupuje wiarygodnosc reszty tekstu. */ .por-zastrzezenie { border-left: 3px solid var(--por-akcent); padding: .5rem 0 .5rem 1rem; color: var(--por-tekst-slaby); font-size: .95rem; } .por-cta { margin-top: 2.5rem; padding: 1.5rem; text-align: center; background: var(--por-tlo-karty); border: 1.5px solid var(--por-ramka); border-radius: 1.15rem; } .por-cta p { margin: 0 0 1rem; } /* Para kolorow przypieta na sztywno, NIE var(--primary-color)/var(--on-primary). --on-primary jest zdefiniowane tylko w motywie "midnight"; na pozostalych dwunastu bialy tekst na --primary-color schodzi do 1.86:1 (arctic). Ten przycisk jest jedynym CTA na stronie, wiec jego czytelnosc nie moze zalezec od tego, ktory motyw ma wlaczony odwiedzajacy. */ .por-cta-przycisk { display: inline-block; padding: .8rem 1.75rem; background: #1B5E43; color: #ffffff; /* 8.2:1 -- bezpieczne na kazdym motywie */ font-weight: 700; text-decoration: none; border-radius: .75rem; transition: transform .15s ease, background-color .15s ease; } .por-cta-przycisk:hover, .por-cta-przycisk:focus-visible { background: #16503A; transform: translateY(-2px); color: #ffffff; } /* Tylko "midnight" i "cyberpunk" sa ciemne -- pozostale jedenascie motywow zostaje na wartosciach powyzej i jest dowodowo nietkniete. */ body.theme-midnight .por-strona, body.theme-cyberpunk .por-strona { --por-tekst: #e5e7eb; --por-tekst-slaby: #9ca3af; --por-tlo-karty: rgba(255, 255, 255, .04); --por-ramka: rgba(255, 255, 255, .14); } @media (max-width: 640px) { /* Odstep na naglowek zostaje -- pasek goscia (.main-header.guest-nav-active) dalej jest fixed, ale ponizej 769px ma juz 64px, nie 95px (header.css). */ .por-strona { --wys-naglowka: 64px; padding: calc(var(--wys-naglowka) + 1rem) 1rem 3rem; } .por-pozycja { padding: 1.15rem 1.15rem; } }