/* ========================================================================== Mądre Dzieciaki — arkusz witryny codedriven.pl Jeden plik dla huba, strony kontaktowej i stron dokumentów. Typografia: Newsreader (serif) + Roboto. Paleta wzięta z aplikacji: zieleń tytułu #2E5B2A, terakota #C2622E, brąz tekstu #6B4A2A, pergamin #FBF7EE. ========================================================================== */ :root{ --ink:#241C12; --muted:#6E6555; --line:#E6E0D2; --rule:#CFC4A8; --green:#2E5B2A; --green-2:#4E7A32; --terra:#C2622E; --brown:#6B4A2A; --cream:#FBF7EE; --paper:#fff; --measure:68ch; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink); font-family:Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased} .wrap{max-width:1120px;margin:0 auto;padding:0 1.5rem} img{max-width:100%} /* Dwujęzyczność — obie wersje w HTML, widoczna ta z data-lang na . Bez JS zostaje polska, więc strona działa przy zablokowanych skryptach. */ [data-lang="pl"] .lang-en, [data-lang="en"] .lang-pl{display:none} a{color:var(--green);text-decoration-thickness:1px;text-underline-offset:2px} a:hover{color:var(--terra)} :focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:3px} /* ══ NAGŁÓWEK Z LASEM ═══════════════════════════════════════════════════ */ .band{position:relative;display:flex;align-items:center; min-height:clamp(420px,54vw,580px); background:url('forest-bg.webp') center 38%/cover} .band::after{content:'';position:absolute;inset:0; background:linear-gradient(rgba(24,32,18,.58),rgba(24,32,18,.4) 45%,rgba(24,32,18,.68))} .band-in{position:relative;z-index:2;width:100%} .band-copy{padding:clamp(2.25rem,5vw,3.5rem) 0;max-width:52rem} /* Znak marki: sówka i nazwa. Ten sam krój, waga i światło co tytuł strony, tylko w mniejszej skali — jedna typografia w dwóch stopniach. */ .brand{display:inline-flex;align-items:center;gap:1rem;text-decoration:none; margin-bottom:clamp(1.5rem,4vw,2.25rem);padding-bottom:.9rem; border-bottom:1px solid rgba(253,250,242,.26)} .brand img{width:clamp(52px,7vw,74px);flex:none;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))} .brand span{display:block;font-family:Newsreader,serif;font-weight:300;color:#FDFAF2; font-size:clamp(1.5rem,3.6vw,2.25rem);line-height:1.02;letter-spacing:-.015em; text-shadow:0 3px 18px rgba(10,16,8,.58)} .kicker{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:#E9C77E;margin:0 0 .7rem} .band h1{font-family:Newsreader,serif;font-weight:300;color:#FDFAF2; font-size:clamp(2.1rem,5.4vw,3.5rem);line-height:1.12;letter-spacing:-.015em;margin:0; text-shadow:0 3px 22px rgba(10,16,8,.55)} .band h1 em{font-style:italic;color:#BFE08F} .band-copy > p{color:rgba(253,250,242,.92);margin:1.1rem 0 0;font-size:1.06rem;max-width:60ch; text-shadow:0 2px 14px rgba(10,16,8,.65)} /* ══ KAFELKI APLIKACJI (hub) ════════════════════════════════════════════ */ .apps{display:grid;grid-template-columns:1fr 1fr;padding:clamp(1.5rem,4vw,2.75rem) 0} @media(max-width:820px){.apps{grid-template-columns:1fr}} .app{display:flex;align-items:center;justify-content:center; gap:clamp(.9rem,2.5vw,1.5rem);padding:clamp(1.75rem,4vw,2.75rem) 1.5rem; text-decoration:none;color:inherit;border-radius:14px;transition:background .2s} .app:first-child{border-right:1px solid var(--line)} @media(max-width:820px){.app:first-child{border-right:0;border-bottom:1px solid var(--line)}} .app:hover{background:var(--cream)} .app img{width:clamp(58px,8vw,84px);flex:none} .app h2{font-family:Newsreader,serif;font-weight:400;margin:0;letter-spacing:-.01em; font-size:clamp(1.16rem,2.6vw,1.62rem);color:var(--ink)} .app::after{content:'→';font-size:1.2rem;color:var(--terra);opacity:0; transform:translateX(-6px);transition:opacity .2s,transform .2s} .app:hover::after,.app:focus-visible::after{opacity:1;transform:translateX(0)} @media(max-width:560px){.app{flex-direction:column;text-align:center}} /* ══ PAS ZASAD ══════════════════════════════════════════════════════════ */ .rules{background:var(--cream);border-block:1px solid var(--line)} .rules-in{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;padding:2.75rem 0} @media(max-width:820px){.rules-in{grid-template-columns:1fr;gap:1.5rem}} .rule h3{font-family:Newsreader,serif;font-weight:500;font-size:1.1rem;margin:0 0 .35rem; color:var(--green)} .rule p{margin:0;font-size:.92rem;color:var(--muted)} /* ══ ODNOŚNIK DO KONTAKTU ═══════════════════════════════════════════════ */ .contact-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem; padding:clamp(2rem,5vw,2.75rem) 0} .contact-cta p{margin:0;color:var(--muted);max-width:46ch} .contact-cta a{margin-left:auto;display:inline-flex;align-items:center;gap:.6rem; font-family:Newsreader,serif;font-size:1.16rem;text-decoration:none; border-bottom:1px solid var(--rule);padding-bottom:.2rem} .contact-cta a::after{content:'→';color:var(--terra)} .contact-cta a:hover{border-bottom-color:var(--terra)} @media(max-width:700px){.contact-cta a{margin-left:0}} footer{border-top:1px solid var(--line);padding:1.75rem 0;font-size:.82rem;color:var(--muted); display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem} /* ══ STRONY DOKUMENTÓW ══════════════════════════════════════════════════ */ /* Zakładki dokumentów — drewniane w tonie, ale bez skeuomorfizmu */ .doc-nav{display:flex;flex-wrap:wrap;gap:.4rem;padding:1.25rem 0 0; border-bottom:1px solid var(--line)} .doc-nav button{font-family:Roboto,sans-serif;font-size:.9rem;font-weight:500; color:var(--muted);background:none;border:0;border-bottom:2px solid transparent; padding:.7rem 1rem;cursor:pointer;transition:color .2s,border-color .2s} .doc-nav button:hover{color:var(--ink)} .doc-nav button[aria-selected="true"]{color:var(--green);border-bottom-color:var(--green); font-weight:600} .lang-toggle{margin-left:auto;align-self:center;font-family:Roboto,sans-serif;font-size:.74rem; font-weight:700;letter-spacing:.08em;color:var(--green);background:var(--cream); border:1px solid var(--line);padding:.35rem .85rem;border-radius:999px;cursor:pointer} .lang-toggle:hover{background:var(--paper);border-color:var(--green)} .page{display:none} .page.active{display:block} article, .page{max-width:74ch;padding:clamp(1.75rem,4vw,2.75rem) 0} article > * + *, .page > * + *{margin-top:1.05em} article p,article li, .page p,.page li{max-width:var(--measure)} article h2, .page h2{font-family:Newsreader,serif;font-weight:500;font-size:clamp(1.24rem,3vw,1.5rem); margin-top:2.4em;padding-bottom:.4em;border-bottom:1px solid var(--line);color:var(--green)} article h2:first-of-type, .page h2:first-of-type{margin-top:.4em} article h3, .page h3{font-family:Newsreader,serif;font-weight:500;font-size:1.1rem;margin-top:1.7em; color:var(--brown)} article ul,article ol, .page ul,.page ol{padding-left:1.3rem} article li+li, .page li+li{margin-top:.35em} article li::marker, .page li::marker{color:var(--green-2)} .dates{font-size:.9rem;color:var(--muted);padding-bottom:1.1rem;border-bottom:1px solid var(--line)} .dates b{color:var(--ink);font-weight:500} .lede{font-size:1.1rem;color:var(--muted)} .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} table{width:100%;border-collapse:collapse;font-size:.94rem;background:var(--paper)} th,td{text-align:left;padding:.65rem .8rem;border:1px solid var(--line);vertical-align:top} th{background:#F3F6EE;font-family:Newsreader,serif;font-weight:600;color:var(--green)} /* Wyróżnienie — to, czego NIE zbieramy, jest najważniejszą informacją dla rodzica i dla recenzenta, więc dostaje własny blok, nie akapit. */ .box{background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--green-2); padding:1.1rem 1.3rem;border-radius:0 8px 8px 0} .box b{color:var(--green)} .box--warn{border-left-color:var(--terra)} .box--warn b{color:var(--terra)} .pill-row{display:flex;flex-wrap:wrap;gap:.45rem} .pill{font-size:.8rem;font-weight:600;padding:.32rem .85rem;border-radius:999px; background:var(--cream);border:1px solid var(--line);color:var(--green)} /* Karty kontaktowe */ .people{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,3vw,2rem)} @media(max-width:700px){.people{grid-template-columns:1fr}} .person{background:var(--cream);border:1px solid var(--line);border-radius:12px; padding:1.5rem 1.7rem} .person b{display:block;font-family:Newsreader,serif;font-size:1.32rem;font-weight:500; margin-bottom:.15rem} .person .role{display:block;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase; color:var(--muted);margin-bottom:.9rem} .person a{font-size:1rem;text-decoration:none;border-bottom:1px solid var(--rule); word-break:break-all} .person a:hover{border-bottom-color:var(--terra)} .back{display:inline-flex;align-items:center;gap:.5rem;font-family:Newsreader,serif; font-size:1.06rem;text-decoration:none} .back::before{content:'←';color:var(--terra)} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto} .app,.app::after,.doc-nav button{transition:none}} @media print{ .band,.doc-nav,.lang-toggle,.back,.contact-cta{display:none} body{background:#fff} article{max-width:none} } /* ══ KLASY Z PRZENIESIONEJ TREŚCI (Nauka czytania sylabami) ═════════════ */ /* Stara strona dzieliła dokument na karty; zachowujemy ten podział, ale dopasowany do reszty witryny — pergamin, hairline, bez cieni. */ /* Stara strona trzymała każdą sekcję w pudełku z ramką. Zdejmujemy je, żeby dokument czytał się tak samo jak na stronie Literek — pracuje sama typografia, a nie kaskada obramowań. Struktura HTML zostaje nietknięta. */ .card{background:none;border:0;padding:0;margin-top:2.4em} .card > *:first-child{margin-top:0} .card > h2:first-child{margin-top:0} .badge{display:inline-block;font-size:.78rem;font-weight:600;padding:.24rem .7rem; border-radius:999px;background:var(--cream);border:1px solid var(--line);color:var(--green)} .highlight{background:var(--cream);border:1px solid var(--line); border-left:3px solid var(--terra);border-radius:0 8px 8px 0; padding:1.05rem 1.25rem;margin-top:1.25rem} .highlight strong{color:var(--terra)}