/* ========================================================================== m3.css — widok lekcji M3 „Zgoda, zakres, kontrola" Rejestr utility + dyscyplina edytorialna (brief v2, PIVOT 2026-07-14). ZERO mechanizmu-metafory (szlaban/bramka/klucz/zamek) — charakter wyłącznie przez typografię, marginalia, materiał (siatka milimetrowa), rytm. Dołącz PO foundation.css — dopisuje się do już zadeklarowanych warstw. ========================================================================== */ /* -------------------------------------------------------------------------- LAYOUT — ramka strony + marginalia (DESIGN.md §3a). Mobile-first: baza = jedna kolumna (margines POD treścią), wzbogacenie do 2 kolumn od --breakpoint-margin-stack (1100px). Margines NIGDY nie znika (brief §12.5). -------------------------------------------------------------------------- */ @layer layout { .lesson__frame { max-width: var(--frame-max); margin-inline: auto; padding-block: var(--space-12) var(--space-24); display: grid; grid-template-columns: 1fr; grid-template-areas: "header" "reading" "margin" "footer"; row-gap: var(--space-16); } .lesson__header { grid-area: header; } .lesson__reading { grid-area: reading; min-width: 0; } .lesson__margin { grid-area: margin; min-width: 0; } .lesson__footer { grid-area: footer; } @media (min-width: 1101px) { .lesson__frame { grid-template-columns: minmax(0, 1fr) var(--margin-col); grid-template-areas: "header header" "reading margin" "footer footer"; column-gap: var(--frame-gap); row-gap: var(--space-24); } } .lesson__reading > .lesson__block { max-width: var(--reading-col); } } @layer components { /* Ankiety pod sticky masthead — cel kotwicy odsłonięty spod nav. */ .lesson__block, .lesson__header { scroll-margin-block-start: 5.5rem; } /* ---- MATERIAŁ: siatka milimetrowa (brief §3 „Scena") — WYŁĄCZNIE za nagłówkiem i w marginesie numeracji, opacity 4-8%, czysty CSS. ---- */ .lesson__header, .lesson__margin { background-image: repeating-linear-gradient(0deg, color-mix(in oklch, var(--aluminium), transparent 93%) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, color-mix(in oklch, var(--aluminium), transparent 93%) 0 1px, transparent 1px 24px); } /* ---- NAGŁÓWEK LEKCJI — próg (brief §2 „wejście") ---- */ .lesson__header { padding: var(--space-12) var(--space-6) var(--space-8); } .lesson__kicker-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); } .lesson__title { font-size: var(--text-h1); line-height: var(--leading-h1); max-width: 26ch; opacity: 1; } /* Font-ready gate (notatka briefu): html.is-fonts-loading dodawana INLINE w , więc działa PRZED pierwszym malowaniem — zero błysku fallbacku. */ html.is-fonts-loading .lesson__title { opacity: 0; } html.is-fonts-ready .lesson__title { opacity: 1; transition: opacity var(--duration-panel) var(--ease-out); } .lesson__goal { margin-top: var(--space-4); color: var(--text-muted); font-size: var(--text-body); font-weight: 450; max-width: var(--reading-col); } .lesson__goal strong { color: var(--text-primary); font-weight: 600; } /* ---- BLOKI TREŚCI — 3 filary (brief §2 „napięcie") ---- */ .lesson__block { padding-block: var(--space-8); border-top: 1px solid var(--border-subtle); } .lesson__reading > .lesson__block:first-child { border-top: none; padding-top: 0; } .lesson__block h2 { font-size: var(--text-h2); line-height: var(--leading-h2); margin-bottom: var(--space-2); } .lesson__block-lead { font-family: var(--font-body); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-3); } .lesson__block p { max-width: var(--reading-col); } .lesson__block p + p { margin-top: var(--space-3); } .lesson__example { margin-top: var(--space-4); display: block; max-width: var(--reading-col); padding: var(--space-4) var(--space-5); border-left: 3px solid var(--green-600); background: var(--surface-canvas); font-size: var(--text-small); color: var(--text-primary); } .lesson__example strong { font-family: var(--font-display); font-weight: 600; } .lesson__example-label { display: block; font-family: var(--font-display); font-size: 0.7rem; font-weight: 600; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--green-700); margin-bottom: var(--space-2); } /* ---- DEMO „PRZEPŁYW ZGODY" — memorable ruch, jedyny interaktywny (brief §9a) ---- */ .lesson__block--demo { border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface-canvas); background-image: none; padding: var(--space-8); margin-block: var(--space-4); max-width: none; } .lesson__block--demo h2 { max-width: var(--reading-col); } .lesson__block--demo > p { max-width: var(--reading-col); color: var(--text-muted); margin-bottom: var(--space-6); } .consent-demo { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr); gap: var(--space-8); align-items: start; } @media (max-width: 640px) { .consent-demo { grid-template-columns: 1fr; } } .consent-demo__stage { min-block-size: 168px; display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); } .consent-demo__idle { color: var(--text-muted); font-size: var(--text-small); margin-bottom: var(--space-2); } .consent-demo__idle-group { display: none; flex-direction: column; gap: var(--space-3); align-items: flex-start; } .consent-demo[data-consent-state="czeka"] .consent-demo__idle-group { display: flex; } .consent-panel { display: none; background: var(--surface-page); border: 1px solid var(--border-subtle); border-radius: 8px; padding: var(--space-5); box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 8%, transparent); } .consent-demo:not([data-consent-state="czeka"]) .consent-panel { display: block; animation: consent-panel-in var(--duration-panel) var(--ease-out); } @keyframes consent-panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .consent-panel__head { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); } .consent-panel__icon { inline-size: 32px; block-size: 32px; flex: none; border-radius: 6px; background: var(--status-neutral-bg); display: flex; align-items: center; justify-content: center; font-size: 1rem; } .consent-panel__eyebrow { font-size: var(--text-small); color: var(--text-muted); } .consent-panel__scope { font-size: var(--text-body); color: var(--text-primary); margin-top: 0.15em; } .consent-panel__scope strong { font-weight: 600; } .consent-panel__result { display: none; font-size: var(--text-small); font-weight: 600; padding: var(--space-3) var(--space-4); border-radius: var(--radius-xs); margin-bottom: var(--space-4); } .consent-demo[data-consent-state="zezwolono"] .consent-panel__result[data-result="zezwolono"] { display: block; background: var(--status-success-bg); color: var(--status-success-text); } .consent-demo[data-consent-state="odmowiono"] .consent-panel__result[data-result="odmowiono"] { display: block; background: var(--status-danger-bg); color: var(--status-danger-text); } .consent-panel__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; } .consent-panel__actions[data-consent-actions="request"] { display: none; } .consent-demo[data-consent-state="prosi"] .consent-panel__actions[data-consent-actions="request"] { display: flex; } .consent-panel__actions[data-consent-actions="result"] { display: none; } .consent-demo[data-consent-state="zezwolono"] .consent-panel__actions[data-consent-actions="result"], .consent-demo[data-consent-state="odmowiono"] .consent-panel__actions[data-consent-actions="result"] { display: flex; } .consent-demo__log { border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); } @media (min-width: 641px) { .consent-demo__log { grid-column: 1 / -1; } } .consent-demo__log-label { font-family: var(--font-display); font-size: 0.7rem; font-weight: 600; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-3); } .consent-demo__log-list { display: flex; flex-direction: column; gap: var(--space-1); min-block-size: 4.5em; max-block-size: 9em; overflow-y: auto; } .consent-demo__log-entry { display: flex; gap: var(--space-3); font-size: var(--text-small); color: var(--text-muted); padding-block: 0.2em; animation: log-in var(--duration-micro) var(--ease-out); } .consent-demo__log-entry:first-child { color: var(--text-primary); } .consent-demo__log-time { color: var(--text-muted); flex: none; } @keyframes log-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ---- SPRÓBUJ SAM — pole promptu, zero metafory (brief §12.3) ---- */ .prompt-field { max-width: var(--reading-col); border: 1px dashed var(--border-material); border-radius: var(--radius-xs); padding: var(--space-5); background: var(--surface-canvas); } .prompt-field__text { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); color: var(--text-primary); white-space: pre-wrap; margin-bottom: var(--space-4); } .prompt-field__footer { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .prompt-field__status { font-size: var(--text-small); color: var(--green-800); font-weight: 600; opacity: 0; transition: opacity var(--duration-micro) var(--ease-out); } .prompt-field__status.is-visible { opacity: 1; } /* ---- MIKRO-QUIZ — bez oceniania, cichy feedback ---- */ .quiz { border: none; padding: 0; max-width: var(--reading-col); } .quiz legend { font-family: var(--font-body); font-weight: 600; font-size: var(--text-body); color: var(--text-primary); padding: 0; margin-bottom: var(--space-4); max-width: none; } .quiz__options { display: flex; flex-direction: column; gap: var(--space-2); } .quiz__option { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-tile); background: var(--surface-page); cursor: pointer; transition: border-color var(--duration-micro) var(--ease-out); } .quiz__option:hover { border-color: var(--green-500); } .quiz__option input { margin-top: 0.2em; flex: none; } .quiz__option span { font-size: var(--text-small); color: var(--text-primary); } .quiz[data-quiz-state="dobrze"] .quiz__option:has(input:checked) { border-color: var(--green-600); background: var(--status-success-bg); } .quiz[data-quiz-state="prawie"] .quiz__option:has(input:checked) { border-color: var(--danger); background: var(--status-danger-bg); } .quiz__feedback { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-xs); font-size: var(--text-small); display: none; max-width: var(--reading-col); } .quiz[data-quiz-state="dobrze"] .quiz__feedback { display: block; background: var(--status-success-bg); color: var(--status-success-text); } .quiz[data-quiz-state="prawie"] .quiz__feedback { display: block; background: var(--status-danger-bg); color: var(--status-danger-text); } /* ---- STOPKA LEKCJI — puenta + nawigacja + oznacz ukończone ---- */ .lesson__footer { border-top: 1px solid var(--border-subtle); padding-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); } .lesson__summary { max-width: var(--reading-col); color: var(--text-muted); } .lesson__summary strong { color: var(--text-primary); font-weight: 600; } .lesson__nav-buttons { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .lesson__nav-link { display: flex; flex-direction: column; gap: 0.2em; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-tile); color: var(--text-primary); text-decoration: none; max-width: 240px; } .lesson__nav-link-label { font-family: var(--font-display); font-size: 0.7rem; text-transform: uppercase; letter-spacing: var(--tracking-kicker); color: var(--text-muted); } .lesson__nav-link--next { text-align: right; align-items: flex-end; } /* ---- MARGINALIA — memorable element (brief §9, DESIGN.md §3a) ---- */ .lesson__margin { padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; gap: var(--space-6); border-top: 1px solid var(--border-subtle); } .lesson__margin-number { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 0.9; color: var(--ink); opacity: 0.07; font-size: 3.5rem; user-select: none; } .lesson__margin-label { font-family: var(--font-display); font-size: 0.7rem; font-weight: 600; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-3); } .lesson__margin-toc ol { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); } .lesson__margin-toc a { font-size: var(--text-small); color: var(--text-muted); text-decoration: none; } .lesson__margin-toc a:hover { color: var(--green-700); } .lesson__margin-progress { font-family: var(--font-display); font-size: var(--text-small); color: var(--text-muted); } @media (min-width: 1101px) { .lesson__margin { border-top: none; position: sticky; top: calc(var(--space-16)); align-self: start; padding: var(--space-2) 0 0; } .lesson__margin-number { font-size: var(--text-margin-watermark); margin-bottom: var(--space-2); } .lesson__margin-toc ol { flex-direction: column; gap: var(--space-2); } } } @layer utilities { .u-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }