/* * TPR Kronika - arkusz przeniesiony ze stałej CSS generatora makiety * (archiwum-scrape/build_mockup.py). Wartości są nietknięte: te same kolory, * odstępy i breakpointy, co w zaakceptowanej makiecie. * * Trzy różnice wobec generatora, wszystkie świadome: * - godło jest plikiem (../img/godlo-tpr-kolor-300.png), nie data URI; * - @font-face jest w theme.json, żeby front i edytor brały kroje z jednego miejsca; * - stan przycisków paska dostępności zależy od atrybutu na , nie od * aria-pressed - inaczej strona z cache mrugałaby przy każdym wejściu * (sekcja 04a niżej). * * Kolejność sekcji odpowiada kolejności w generatorze. */ /* --------------------------------------------- 01 tokeny (specyfikacja 3.1) */ :root{ --paper:#E9E2D2; --card:#F7F3E9; --ink:#221E19; --ink-2:#574C3F; --rule:#C3B69C; --rule-2:#DDD3BE; --seal:#9A3527; --seal-2:#7C2A20; --gold:#7A5A1C; --disp:"Playfair Display",Georgia,"Times New Roman",serif; --body:"Crimson Pro",Georgia,"Times New Roman",serif; --mono:"JetBrains Mono","Consolas","Courier New",monospace; --wrap:1180px; --scale:1; --shadow:0 3px 14px rgba(60,45,25,.09); --shadow-lift:0 12px 28px rgba(60,45,25,.18); --ease:cubic-bezier(.16,1,.3,1); --sticky:110px; --footer-bg:#221E19; --footer-ink:#F7F3E9; --footer-text:#D6CCBA; --footer-muted:#B5AA96; --footer-rule:#3E372E; --nav-bg:#8E3324; --nav-ink:#F6EFE1; --nav-hover:#7A2A1D; --nav-mark:#E8C273; } html{font-size:calc(100% * var(--scale));scroll-behavior:smooth;scrollbar-color:var(--rule) var(--paper)} html[data-contrast="high"]{ --paper:#FFFFFF; --card:#FFFFFF; --ink:#000000; --ink-2:#000000; --rule:#000000; --rule-2:#000000; --seal:#7A0000; --seal-2:#000000; --gold:#000000; --shadow:none; --shadow-lift:none; --nav-bg:#000000; --nav-ink:#FFFFFF; --nav-hover:#000000; --nav-mark:#FFFFFF; --footer-bg:#000000; --footer-ink:#FFFFFF; --footer-text:#FFFFFF; --footer-muted:#FFFFFF; --footer-rule:#FFFFFF; } *{box-sizing:border-box} /* -------------------------------------------------- 02 reset i typografia */ /* Czwarta świadoma różnica wobec generatora: sterowanie, które ma sens dopiero z JavaScriptem, wychodzi z serwera z atrybutem hidden, a skrypt je odsłania. Bez tej reguły display:flex sekcji wygrywa z hidden i czytelnik bez skryptów widzi martwe przyciski. */ [hidden]{display:none !important} body{margin:0;color:var(--ink);font-family:var(--body);font-size:1.25rem;line-height:1.6; background:var(--paper);-webkit-font-smoothing:antialiased;overflow-wrap:break-word;caret-color:var(--seal);accent-color:var(--seal)} body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5; background-image:radial-gradient(circle at 20% 30%,rgba(150,130,95,.12) 0 1px,transparent 1px), radial-gradient(circle at 70% 70%,rgba(150,130,95,.1) 0 1px,transparent 1px), radial-gradient(circle at 45% 12%,rgba(120,100,70,.08) 0 1.4px,transparent 1.4px); background-size:37px 41px,53px 59px,71px 67px} html[data-contrast="high"] body::before{display:none} ::selection{background:var(--seal);color:#fff} img{max-width:100%;height:auto;display:block} a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:.06em} h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:1.15;margin:0;letter-spacing:-.015em;text-wrap:balance} p{margin:0} ul,ol{margin:0;padding:0} /* ---------------------------------------------- 03 układ i pomocnicze */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 30px;position:relative;z-index:2} .meta{font-family:var(--mono);font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;color:var(--seal)} .meta .tag{color:var(--ink-2);margin-right:10px} .center{text-align:center;margin-top:40px} .small{font-size:1rem;color:var(--ink-2)} a,button,input,summary,textarea{touch-action:manipulation;-webkit-tap-highlight-color:transparent} :focus-visible{outline:3px solid var(--seal);outline-offset:3px} :focus:not(:focus-visible){outline:none} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} [id],a,button,input,textarea,summary,[tabindex]{scroll-margin-top:var(--sticky)} .skip-link{position:absolute;left:12px;top:12px;z-index:999;background:var(--ink);color:var(--card); padding:14px 24px;font-size:1rem;font-weight:600;text-decoration:none;line-height:1;transform:translateY(-220%)} .skip-link:focus{transform:none} /* pasek dostępności */ /* ------------------------------------------- 04 pasek dostępności */ .a11y{background:var(--card);border-bottom:1px solid var(--rule);position:relative;z-index:4} .a11y .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;padding:8px 30px;flex-wrap:nowrap} .a11y .today{font-family:var(--mono);font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);flex:none;white-space:nowrap} .a11y form.search{margin-left:auto;flex:0 1 284px;min-width:170px} /* przy większym tekście dzień tygodnia znika z daty, żeby pasek został w jednym wierszu bez ucinania */ html[data-scale="1.15"] .today .wd,html[data-scale="1.32"] .today .wd{display:none} html[data-scale="1.32"] .tools .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .tools{display:flex;align-items:center;gap:10px;flex:none} .tools .lbl{font-size:1rem;color:var(--ink-2);margin-right:4px} .tools button{font-family:var(--body);font-size:1rem;font-weight:600;background:var(--paper);border:1px solid var(--ink-2); color:var(--ink);padding:8px 12px;cursor:pointer;min-height:44px;min-width:44px;line-height:1;white-space:nowrap;flex:none; display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background-color .15s,border-color .15s,color .15s} .tools button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2} .tools .contrast .short{display:none} .tools button:hover{border-color:var(--seal);color:var(--seal)} .tools button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--card)} html[data-contrast="high"] .tools button[aria-pressed="true"]{background:#000;color:#fff} .tools .sizer{display:flex;gap:6px;align-items:center} .tools .sizer button:nth-child(3){font-size:1.1rem} .tools .sizer button:nth-child(4){font-size:1.2rem} /* winieta */ /* --------------------------------- 04a stan paska renderowany serwerowo */ /* aria-pressed ustawia JS, a strona idzie pod cache. Bez tych reguł przy każdym wejściu na chwilę widać stan domyślny i dopiero potem właściwy. */ html[data-scale="1"] .tools .sizer button[data-scale="1"], html[data-scale="1.15"] .tools .sizer button[data-scale="1.15"], html[data-scale="1.32"] .tools .sizer button[data-scale="1.32"], html[data-contrast="high"] .tools .contrast{background:var(--ink);border-color:var(--ink);color:var(--card)} html[data-contrast="high"][data-scale="1"] .tools .sizer button[data-scale="1"], html[data-contrast="high"][data-scale="1.15"] .tools .sizer button[data-scale="1.15"], html[data-contrast="high"][data-scale="1.32"] .tools .sizer button[data-scale="1.32"], html[data-contrast="high"] .tools .contrast{background:#000;color:#fff} /* ---------------------------------------------------------- 05 winieta */ .masthead{border-bottom:0;padding:30px 0 22px;text-align:center;position:relative;z-index:2} .masthead .wrap{display:flex;flex-direction:column;align-items:center;gap:14px} .masthead .herb{width:132px;height:auto} html[data-contrast="high"] .masthead .herb{filter:grayscale(1) contrast(1.6)} .masthead h1{font-weight:900;font-size:3.4rem;letter-spacing:-.02em;line-height:1;margin:0} .masthead h1 a{text-decoration:none;color:var(--nav-bg)} .masthead .sub{font-family:var(--mono);font-size:.9rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)} .top-social{position:absolute;top:0;right:30px;margin:0} /* menu */ /* ------------------------------------------------------------- 06 menu */ .nav{border-top:3px solid rgba(246,239,225,.45);border-bottom:3px solid rgba(246,239,225,.45);position:sticky;top:0;z-index:5;background:var(--nav-bg);color:var(--nav-ink)} html[data-contrast="high"] .nav{border-bottom:3px solid #000} .nav .wrap{display:flex;align-items:center;justify-content:center;gap:16px} .nav nav{flex:1 1 auto;min-width:0} .nav ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center} .nav ul li+li{border-left:1px solid rgba(246,239,225,.45)} .nav ul a{display:block;font-family:var(--mono);font-size:.9rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap; text-decoration:none;padding:17px 8px;color:var(--nav-ink);border-bottom:3px solid transparent;transition:color .15s,background-color .15s,border-color .15s} .nav ul a:hover{color:#fff;background:var(--nav-hover)} .nav ul a[aria-current]{color:#fff;border-bottom-color:var(--nav-mark);font-weight:700} .menu-btn{display:none} /* na szerokich ekranach pasek menu ma wlasna, szersza siatke, zeby pelne nazwy zakladek zmiescily sie w jednym rzedzie */ @media(min-width:1240px){.nav .wrap{max-width:1360px}} /* ---------------------------------------------------- 07 wyszukiwarka */ /* form.search, nie .search: WordPress dokłada klasę "search" do na stronie wyników, a wtedy cała strona stałaby się kontenerem flex */ form.search{display:flex;flex:none;position:relative} form.search input{font-family:var(--body);font-size:1rem;padding:9px 14px;border:1px solid var(--ink-2);border-right:0;background:var(--card);color:var(--ink);flex:1 1 0;width:0;min-width:0;min-height:44px} form.search .search-msg{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:6;background:var(--card);border:1px solid var(--ink-2);box-shadow:var(--shadow); padding:10px 14px;font-size:1rem;line-height:1.45;color:var(--ink)} form.search .search-msg:empty{padding:0;border:0;box-shadow:none} form.search input::placeholder{color:var(--ink-2);opacity:1} form.search button{background:var(--card);color:var(--ink);border:1px solid var(--ink-2);padding:0;cursor:pointer;min-height:44px;min-width:44px;display:grid;place-items:center; transition:background-color .15s,color .15s} form.search button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round} form.search button:hover{background:var(--ink);color:var(--card)} /* ---------------------------------------------------- 08 karty i przyciski */ /* karty: link tylko w nagłówku (krótka nazwa dla czytnika), cała karta klikalna przez pseudoelement */ .card-link{position:relative} .card-link h3 a{text-decoration:none;color:inherit} .card-link h3 a::after{content:"";position:absolute;inset:0} .card-link h3 a:hover{color:var(--seal)} .card-link .gal,.card-link .more{position:relative;z-index:1} @supports selector(:has(a)){ .card-link:has(h3 a:focus-visible){outline:3px solid var(--seal);outline-offset:3px} .card-link h3 a:focus-visible{outline:none} } /* przyciski i linki */ .btn{display:inline-block;font-family:var(--mono);font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none; border:1px solid var(--ink);color:var(--ink);padding:14px 26px;min-height:48px;background:transparent;cursor:pointer; transition:background-color .15s,color .15s,border-color .15s} .btn:hover{background:var(--ink);color:var(--card)} .btn.primary{background:var(--seal);border-color:var(--seal);color:#fff} .btn.primary:hover{background:var(--seal-2);border-color:var(--seal-2)} .more{font-weight:600;font-size:1.05rem;color:var(--seal);text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px; display:inline-flex;align-items:center;min-height:44px} .more:hover{color:var(--seal-2);text-decoration-thickness:2px} .gal{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:1.05rem;line-height:1.2;color:var(--seal);text-decoration:none; border:1px solid var(--seal);padding:8px 16px;min-height:44px;transition:background-color .15s,color .15s} .gal svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linejoin:round;flex:none} .gal:hover{background:var(--seal);color:#fff} /* ------------------------------------------------------------ 09 czoło */ /* czoło */ .clip h3 a,.notice h3 a{text-decoration:none;color:inherit} .clip h3 a:hover,.notice h3 a:hover{color:var(--seal);text-decoration:underline;text-underline-offset:.12em;text-decoration-thickness:.05em} .clip-img{display:block} /* większy cel dotyku dla linków w nagłówkach kart bez zmiany układu */ .clip h3 a,.notice h3 a{display:inline-block;padding:8px 0;margin:-8px 0} html[data-contrast="high"] .entry:nth-child(odd) .clip,html[data-contrast="high"] .entry:nth-child(even) .clip{transform:none} html[data-contrast="high"] img:not(.herb):not(.herb-big){filter:none !important} /* ------------------------------------------------------- 10 aktualności */ /* aktualności */ .news{padding:44px 0 52px;border-bottom:1px solid var(--rule);background:rgba(247,243,233,.6)} html[data-contrast="high"] .news{background:#fff} .news-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:26px} .news-head h2{font-size:2rem} .news-head .sec-note{flex-basis:100%;margin:0;text-align:left} .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0} .notice{padding:6px 30px 6px 0;border-right:1px solid var(--rule)} .notice + .notice{padding-left:30px} .notice:last-child{border-right:0;padding-right:0} .notice time{font-family:var(--mono);font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--seal);display:block;margin-bottom:8px} .notice h3{font-size:1.4rem;margin-bottom:10px} .notice p{font-size:1.1rem;color:var(--ink-2);margin-bottom:14px} /* ------------------------------------------------------ 11 tytuły sekcji */ /* tytuły sekcji */ .sec-title{text-align:center;margin-bottom:44px} .sec-title h2{font-size:2.5rem} .sec-title .orn{width:150px;height:1px;background:var(--rule);margin:20px auto 0;position:relative} .sec-title .orn::after{content:"❧";position:absolute;left:50%;top:-15px;transform:translateX(-50%);line-height:1; background:var(--paper);padding:0 12px;color:var(--seal);font-size:24px;font-family:Georgia,serif} .sec-note{font-size:1.15rem;color:var(--ink-2);font-style:italic;margin-top:18px;max-width:60ch;margin-left:auto;margin-right:auto} /* ---------------------------------------------- 12 oś czasu i kafle lat */ /* oś czasu */ .chronicle{padding:66px 0 74px;border-bottom:1px solid var(--rule);overflow-x:clip} /* zygzak z siatki: każdy wpis zajmuje dwa wiersze i zaczyna się wiersz niżej niż poprzedni, więc kolumny przeplatają się, ale karty nigdy na siebie nie wjeżdżają */ .timeline{position:relative;display:grid;grid-template-columns:1fr 96px 1fr;grid-auto-rows:auto} .timeline::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;background:var(--rule);transform:translateX(-50%)} .entry{position:relative;grid-row:var(--row) / span 2;padding-bottom:28px} .entry:nth-child(odd){grid-column:1} .entry:nth-child(even){grid-column:3} /* kropka w linii z datą, która otwiera kartę (padding karty + pół wysokości linii daty) */ .entry .dot{position:absolute;top:calc(22px + .76rem - 4px);width:19px;height:19px} .entry:nth-child(odd) .dot{right:-57px} .entry:nth-child(even) .dot{left:-57px} .entry .dot i{width:13px;height:13px;border-radius:50%;background:var(--seal);border:3px solid var(--paper); box-shadow:0 0 0 2px var(--seal);display:block} .clip{background:var(--card);border:1px solid var(--rule);padding:22px 28px 26px;box-shadow:var(--shadow);position:relative} .entry:nth-child(odd) .clip{transform:rotate(-.5deg)} .entry:nth-child(even) .clip{transform:rotate(.55deg)} .clip img,.clip .noimg{width:100%;margin:12px 0 18px;aspect-ratio:16/10;object-fit:cover} .clip img{filter:sepia(.28) contrast(1.03) saturate(.85)} .clip .noimg{background:var(--paper) url(../img/godlo-tpr-kolor-300.png) center/120px no-repeat;border:1px solid var(--rule-2);opacity:.55} .clip img.contain{object-fit:contain;background:var(--paper);padding:10px;box-sizing:border-box;border:1px solid var(--rule-2)} .clip h3{font-size:1.55rem;margin:10px 0 10px} .clip p{font-size:1.1rem;color:var(--ink-2)} .clip .clip-foot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:16px} .clip .by{font-style:italic;font-size:1rem} html.js .entry{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} html.js .entry.in{opacity:1;transform:none} .years-h{text-align:center;font-size:1.6rem;margin:0 0 20px} .decades + .years-h,.center + .years-h{margin-top:60px;margin-bottom:30px} .decades{display:flex;flex-direction:column;gap:26px} .decade h4{text-align:center;font-family:var(--mono);font-weight:500;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px} .years{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px} .year{display:block;background:var(--card);border:1px solid var(--rule);padding:14px 20px;text-align:center;text-decoration:none;min-width:118px; transition:border-color .15s,background-color .15s,box-shadow .15s} .year:hover{border-color:var(--seal);box-shadow:var(--shadow)} .year b{font-family:var(--disp);font-size:1.5rem;display:block;line-height:1} .year span{font-family:var(--mono);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);display:block;margin-top:8px} /* --------------------------------------------------------- 13 wycieczki */ /* wycieczki */ .trips{padding:66px 0 74px;border-bottom:1px solid var(--rule);background:rgba(247,243,233,.45)} html[data-contrast="high"] .trips{background:#fff} .trip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px} .trip{background:var(--card);border:1px solid var(--rule);box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .trip:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)} .trip img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:sepia(.28) contrast(1.03) saturate(.85)} .trip img.contain,.fold img.contain,.snap img.contain{object-fit:contain;background:var(--paper);padding:12px;box-sizing:border-box} .trip .in{padding:20px 24px 24px;display:flex;flex-direction:column;flex:1} .trip h3{font-size:1.4rem;margin:8px 0 10px} .trip p{font-size:1.05rem;color:var(--ink-2)} .trip p{margin-bottom:16px} .trip .gal{margin-top:auto;align-self:flex-start} .trip-foot{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start;margin-top:44px} .trip-foot > .btn{flex:0 1 auto;min-width:0} .plans{background:var(--card);border:1px solid var(--rule);padding:22px 28px;max-width:640px;flex:1 1 380px} .plans-act{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;margin-top:16px;font-size:1.05rem;color:var(--ink-2)} .plans-act a:not(.btn){display:inline-block;padding:10px 0;color:var(--ink)} .plans h3{font-size:1.25rem;margin-bottom:10px} .plans .plain li{padding:10px 0} .plans .plain b{display:block;font-family:var(--disp);font-size:1.2rem} .plans .plain span{font-size:1.05rem;color:var(--ink-2)} .plans .small{margin-top:12px} /* -------------------------------------------- 14 publikacje (karuzela) */ /* publikacje */ .pubs{padding:66px 0 74px;border-bottom:1px solid var(--rule)} .skip-rail{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip-rail:focus{position:static;width:auto;height:auto;clip:auto;display:inline-block;margin-bottom:14px;padding:12px 18px; background:var(--ink);color:var(--card);font-weight:600;text-decoration:none} .rail-wrap{display:grid;grid-template-columns:52px 1fr 52px;gap:14px;align-items:center} .rail{list-style:none;display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 4px 22px;scroll-padding:4px; scrollbar-width:thin;scrollbar-color:var(--rule) transparent} .rail::-webkit-scrollbar{height:8px} .rail::-webkit-scrollbar-thumb{background:var(--rule);border-radius:4px} .book{flex:0 0 212px;scroll-snap-align:start} .book article{height:100%} .book img{width:100%;aspect-ratio:5/7;object-fit:cover;border:1px solid var(--rule);box-shadow:3px 5px 16px rgba(60,45,25,.22);background:var(--card); transition:transform .25s var(--ease),box-shadow .25s var(--ease)} .book img.contain{object-fit:contain;background:var(--paper);padding:8px;box-sizing:border-box} .book:hover img{transform:translateY(-4px) rotate(-.6deg);box-shadow:var(--shadow-lift)} .book h3{font-size:1.15rem;margin:16px 0 4px;line-height:1.25} .book .by{font-style:italic;color:var(--ink-2);font-size:1rem} .book .desc{font-size:1rem;color:var(--ink-2);margin-top:6px;line-height:1.45} .rail-btn{width:52px;height:52px;border-radius:50%;border:1px solid var(--ink);background:var(--card);color:var(--ink);cursor:pointer;display:grid;place-items:center; transition:background-color .15s,color .15s} .rail-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .rail-btn:hover{background:var(--ink);color:var(--card)} .rail-btn[disabled]{opacity:.35;cursor:default} .rail-btn[disabled]:hover{background:var(--card);color:var(--ink)} .rail-pos{text-align:center;font-family:var(--mono);font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-top:6px} /* ------------------------------------------ 15 artykuły (teczki) */ /* teczki */ .folders{padding:66px 0 74px;border-bottom:1px solid var(--rule);background:rgba(247,243,233,.45)} html[data-contrast="high"] .folders{background:#fff} .fold-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .fold{background:var(--card);border:1px solid var(--rule);padding:0 0 26px;display:block; transition:box-shadow .2s var(--ease),transform .2s var(--ease)} .fold:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px)} .fold .tab{background:var(--seal);color:#fff;font-family:var(--mono);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;padding:8px 16px; position:absolute;left:0;top:0;z-index:1} .fold img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:sepia(.35) contrast(1.02) saturate(.7)} .fold .in{padding:22px 26px 0} .fold h3{font-size:1.45rem;margin-bottom:10px} .fold p{font-size:1.05rem;color:var(--ink-2)} .fold .sig{font-family:var(--mono);font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-top:16px;display:block} /* ---------------------------------------------- 16 migawki z historii */ /* historia */ .history{padding:66px 0 74px;border-bottom:1px solid var(--rule)} .snap-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:30px 28px} .snap{display:block;height:100%} .snap img{width:100%;aspect-ratio:3/2;object-fit:cover;border:8px solid var(--card);box-shadow:0 2px 0 var(--rule),0 8px 20px rgba(60,45,25,.16); filter:sepia(.4) contrast(1.02) saturate(.7);transition:transform .25s var(--ease)} .snap:hover img{transform:scale(1.015)} .snap h3{font-size:1.4rem;margin:18px 0 4px} .snap .sub{font-style:italic;color:var(--ink-2);font-size:1.05rem;margin-bottom:6px} .snap p{font-size:1.05rem;color:var(--ink-2)} /* -------------------------------------------------------- 17 zasłużeni */ /* zasłużeni */ .honoured{padding:66px 0 74px;border-bottom:1px solid var(--rule);background:rgba(247,243,233,.45)} html[data-contrast="high"] .honoured{background:#fff} .people{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 18px} .person{display:block;text-align:center} .person img{width:104px;height:128px;object-fit:cover;margin:0 auto;border:5px solid var(--card);box-shadow:0 1px 0 var(--rule),0 6px 14px rgba(60,45,25,.18); filter:sepia(.35) contrast(1.05) saturate(.6);transition:transform .25s var(--ease)} .person:hover img{transform:translateY(-3px)} .person h3{font-size:1.05rem;line-height:1.25;margin-top:12px;overflow-wrap:anywhere;hyphens:auto;letter-spacing:0} .person span{display:block;font-size:1rem;color:var(--ink-2);margin-top:4px;line-height:1.35} .note{max-width:66ch;margin:44px auto 0;text-align:center;font-style:italic;color:var(--ink-2);font-size:1.05rem} /* ------------------------------------ 18 O TPR, listy, details, symbole */ /* o TPR */ .about{padding:66px 0 74px;border-bottom:1px solid var(--rule)} .about-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start} .about-text{max-width:66ch} .about-text p{margin-bottom:18px;font-size:1.15rem} .about-text .big{font-size:1.35rem;line-height:1.5} .about-text .join{background:var(--card);border:1px solid var(--rule);box-shadow:var(--shadow);padding:24px 28px 28px;margin:10px 0 14px} .about-text .join h3{margin:0 0 10px} .about-text .join p{margin-bottom:12px} .about-text .draft{font-size:1rem;font-style:italic;color:var(--ink-2)} .about-text .join .draft{margin-bottom:18px} .about-text h3{font-size:1.5rem;margin:30px 0 14px} .officers{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 26px;margin-bottom:14px} .officers li{border-top:1px solid var(--rule);padding-top:8px} .officers b{display:block;font-family:var(--disp);font-size:1.15rem} .officers span{font-size:1rem;color:var(--ink-2)} details{border-top:1px solid var(--rule);padding:4px 0} details:last-of-type{border-bottom:1px solid var(--rule)} summary{cursor:pointer;font-family:var(--disp);font-weight:700;font-size:1.2rem;padding:14px 0;list-style:none;display:flex;align-items:center;gap:14px;min-height:48px} summary::-webkit-details-marker{display:none} summary::before{content:"";width:10px;height:10px;border-right:2px solid var(--seal);border-bottom:2px solid var(--seal);transform:rotate(-45deg);flex:none;transition:transform .2s var(--ease)} details[open] summary::before{transform:rotate(45deg)} summary:hover{color:var(--seal)} details > :not(summary){margin-bottom:18px} .cols{columns:2;column-gap:32px;padding-left:1.4em;font-size:1.05rem} .cols li{break-inside:avoid;padding:2px 0} .plain{list-style:none;font-size:1.05rem} .plain li{padding:6px 0;border-top:1px solid var(--rule-2)} .plain.cols li{border:0;padding:3px 0} .symbols{background:var(--card);border:1px solid var(--rule);padding:30px 32px 36px;box-shadow:var(--shadow);position:sticky;top:96px} .symbols .herb-big{width:220px;margin:0 auto 10px} html[data-contrast="high"] .symbols .herb-big{filter:grayscale(1) contrast(1.6)} .symbols h3{font-size:1.3rem;margin:22px 0 8px;text-align:center} .symbols p{font-size:1.05rem;color:var(--ink-2)} /* ----------------------------------------------------------- 19 kontakt */ /* kontakt */ .contact{padding:66px 0 74px;border-bottom:1px solid var(--rule);background:rgba(247,243,233,.45)} html[data-contrast="high"] .contact{background:#fff} .contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start} /* ------------------------------------------------------------ 20 pokaz */ /* z zycia Towarzystwa: pokaz zdjec */ .slides{padding:44px 0 52px;border-bottom:1px solid var(--rule)} .show{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .show-item:nth-child(n+4){display:none} .show-link{display:block;text-decoration:none;color:inherit} .show-frame{display:block;background:var(--card);border:8px solid var(--card);box-shadow:0 2px 0 var(--rule),0 10px 26px rgba(60,45,25,.18);aspect-ratio:4/3;overflow:hidden} .show-frame img{width:100%;height:100%;object-fit:cover;object-position:center 32%;filter:sepia(.28) contrast(1.03) saturate(.85);transition:opacity .4s var(--ease)} .show-frame img.contain{object-fit:contain;object-position:center;background:var(--paper);padding:10px;box-sizing:border-box} .show-item.fade .show-frame img,.show-item.fade .cap{opacity:0} .show-item .cap{display:block;font-family:var(--mono);font-size:.95rem;letter-spacing:.03em;line-height:1.5;color:var(--ink-2);margin-top:14px;transition:opacity .4s var(--ease)} .show-link:hover .cap{color:var(--seal);text-decoration:underline;text-underline-offset:.2em} .show-tools{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:22px} .show-btn{font-family:var(--mono);font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;background:var(--paper);border:1px solid var(--ink); color:var(--ink);min-height:48px;min-width:48px;padding:0 14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px; transition:background-color .15s,color .15s} .show-btn:hover{background:var(--ink);color:var(--card)} .show-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none} .show-btn[data-playing="true"] .i-play,.show-btn[data-playing="false"] .i-pause{display:none} .show-pos{flex:1 1 100%;text-align:center;font-family:var(--mono);font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-top:4px} html[data-contrast="high"] .show-frame img{filter:none} @media(max-width:1000px){.show{grid-template-columns:repeat(2,1fr);gap:22px}.show-item:nth-child(n+3){display:none}} @media(max-width:640px){.show{grid-template-columns:1fr}.show-item:nth-child(n+2){display:none}} /* --------------------------- 21 dane rejestrowe, Facebook, formularz */ /* dane rejestrowe i Facebook */ .card-addr p{margin-bottom:12px;font-size:1.15rem} .card-addr .reg{font-size:1.05rem;line-height:1.6} .card-addr .acct{font-family:var(--mono);font-size:.95rem;letter-spacing:.04em} .card-addr .draft{font-style:italic} .social{margin-top:8px} .fb{display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;color:var(--seal);border:1px solid var(--seal); padding:8px 16px;min-height:44px;font-size:1.05rem;transition:background-color .15s,color .15s} .fb svg{width:22px;height:22px;fill:currentColor;stroke:none;flex:none} .fb:hover{background:var(--seal);color:#fff} footer .fb{color:var(--footer-ink);border-color:var(--footer-muted)} footer .fb:hover{background:var(--footer-ink);color:var(--footer-bg)} html[data-contrast="high"] .fb{color:#000;border-color:#000} html[data-contrast="high"] footer .fb{color:#fff;border-color:#fff} .card-addr .addr{font-family:var(--disp);font-size:1.4rem;line-height:1.35;margin-bottom:22px} .card-addr p a{display:inline-block;padding:8px 0} .form{background:var(--card);border:1px solid var(--rule);padding:30px 32px 34px;box-shadow:var(--shadow)} .form-intro{font-size:1rem;color:var(--ink-2);margin-bottom:16px} .field{margin-bottom:18px} .field label{display:block;font-weight:600;margin-bottom:6px;font-size:1.05rem} .field input[type=text],.field input[type=email],.field textarea{width:100%;font-family:var(--body);font-size:1.1rem;padding:11px 14px;border:1px solid var(--ink-2);background:var(--paper);color:var(--ink);min-height:48px} html[data-contrast="high"] .field input,html[data-contrast="high"] .field textarea{background:#fff} .field textarea{resize:vertical} .field input:focus,.field textarea:focus{border-color:var(--seal);outline:3px solid var(--seal);outline-offset:2px} .field.check{display:flex;gap:12px;align-items:flex-start} .field.check input{width:24px;height:24px;margin-top:4px;flex:none} .field.check label{font-weight:400;font-size:1rem;color:var(--ink-2);margin:0} .field.invalid input,.field.invalid textarea{border:2px solid var(--seal-2)} .field-err{color:var(--seal-2);font-size:1rem;font-weight:600;margin-top:6px} .field.check + .field-err{margin:-8px 0 18px} .form-err{color:var(--seal-2);font-weight:600;font-size:1.1rem;margin-bottom:14px} .form-err:empty,.form-ok:empty{margin:0;padding:0;border:0} .form-ok{color:var(--ink);font-weight:600;margin-bottom:14px;background:var(--paper);border:1px solid var(--rule);padding:12px 16px} /* ------------------------------------------------------------ 22 stopka */ /* stopka */ footer{padding:56px 0 30px;background:var(--footer-bg);color:var(--footer-text);position:relative;z-index:2} footer :focus-visible{outline-color:var(--footer-ink)} footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px} footer h2{color:var(--footer-ink);font-size:1.3rem;margin:0 0 14px} footer p{margin:0 0 10px;font-size:1.05rem} footer p a{display:inline-block;padding:8px 0} footer .more{color:var(--footer-ink)} .totop{margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--footer-ink);text-decoration:none;letter-spacing:.04em} .totop svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .totop:hover{text-decoration:underline} .sitemap{list-style:none;columns:2;column-gap:24px} .sitemap a{display:inline-block;padding:10px 0;text-decoration:none;font-size:1.05rem} .sitemap a:hover{text-decoration:underline} .sitemap .soon{display:inline-block;padding:10px 0;font-size:1.05rem;color:var(--footer-muted)} .sitemap .soon small{font-size:.85em} .copy{border-top:1px solid var(--footer-rule);margin-top:40px;padding-top:20px;font-family:var(--mono);font-size:.85rem;letter-spacing:.04em;color:var(--footer-muted); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} /* ------------------------------------------- 23 preferencje systemowe */ @media (forced-colors:active){ .tools button[aria-pressed="true"]{border-width:3px;text-decoration:underline} .nav ul a{border-bottom-style:none} .nav ul a[aria-current]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.3em} .rail-btn[disabled]{opacity:1;color:GrayText;border-color:GrayText} .field.invalid input,.field.invalid textarea{border-width:3px} .entry .dot i{border:3px solid CanvasText} .card-link:has(h3 a:focus-visible){outline-color:Highlight} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} html.js .entry{opacity:1;transform:none} } /* -------------------------------------------------------- 24 breakpointy */ @media(max-width:1060px){ .about-grid,.contact-grid{grid-template-columns:1fr;gap:40px} .symbols{position:static} .trip-grid,.fold-grid,.snap-grid,.news-grid{grid-template-columns:1fr 1fr} .notice{border-right:0;padding:0 0 26px;border-bottom:1px solid var(--rule);margin-bottom:26px} .notice + .notice{padding-left:0} .notice:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0} .trip-foot{grid-template-columns:1fr} .plans{justify-self:stretch;max-width:none} footer .wrap{grid-template-columns:1fr 1fr} } @media(max-width:1180px){ /* laptopy i tablety: pełne menu w dwóch rzędach, bez chowania za przyciskiem; winieta w jednej linii */ .nav ul a{padding:13px 8px;font-size:.86rem;letter-spacing:.02em} .a11y .today{display:none} .masthead{padding:14px 0 12px} .masthead .wrap{flex-direction:row;justify-content:center;align-items:center;gap:18px;text-align:left} .masthead .herb{width:72px} .masthead h1{font-size:2.2rem} .masthead .sub{display:none} .masthead .wrap{flex-wrap:wrap} .masthead .herb{flex:none} .masthead h1{flex:1 1 0;min-width:0} .top-social{position:static;order:3;flex:1 1 100%;margin-top:2px} :root{--sticky:120px} } @media(max-width:1100px){ .timeline{display:block;padding-left:34px} .timeline::before{left:9px} .entry{grid-row:auto;padding-bottom:22px} .entry:nth-child(odd) .dot,.entry:nth-child(even) .dot{left:-34.5px;right:auto} .entry:nth-child(odd) .clip,.entry:nth-child(even) .clip{transform:none} /* jedna kolumna, ale karta pozioma: zdjęcie z lewej, tekst z prawej */ .clip{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);column-gap:26px;align-items:start} .clip .meta{grid-column:1/-1} .clip .clip-img{grid-column:1;grid-row:2/span 3} .clip .clip-img img,.clip .noimg{aspect-ratio:4/3;margin:10px 0 0} .clip h3{grid-column:2;margin-top:10px} .clip > p:not(.meta){grid-column:2} } @media(max-width:820px){ .nav .wrap{flex-wrap:wrap;padding:6px 20px;gap:8px 10px;justify-content:flex-start} .menu-btn{display:inline-flex;order:1;align-items:center;gap:10px;font-family:var(--mono);font-size:.9rem;letter-spacing:.08em;text-transform:uppercase; background:transparent;border:1px solid var(--nav-ink);color:var(--nav-ink);padding:0 14px;min-height:44px;cursor:pointer;flex:none} .menu-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round} .menu-btn[aria-expanded="true"] .i-open,.menu-btn:not([aria-expanded="true"]) .i-close{display:none} .a11y form.search{flex:1 1 100%;margin-left:0;order:3} .nav form.search{order:2;flex:1 1 0;min-width:0;margin:0} .nav form.search input,.nav form.search button{border-color:var(--nav-ink)} .nav nav{order:3;flex:1 1 100%;display:none} .nav nav.open{display:block} .nav ul li+li{border-left:0;border-top:1px solid rgba(246,239,225,.28)} .nav ul{flex-direction:column;border-top:1px solid rgba(255,255,255,.35);padding:6px 0;max-height:calc(100vh - 130px);overflow:auto} .nav ul a{padding:13px 10px;font-size:1rem;letter-spacing:.06em;border-bottom:0;white-space:normal} .nav ul a[aria-current]{border-bottom:0;background:var(--nav-hover)} :root{--sticky:80px} .clip{display:block} .clip .clip-img img,.clip .noimg{aspect-ratio:16/10;margin:12px 0 18px} .clip h3{margin-top:0} .sec-title h2{font-size:1.9rem} .trip-grid,.fold-grid,.snap-grid,.news-grid{grid-template-columns:1fr} .rail-wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .rail{flex:1 1 100%;order:1} .rail-btn{order:2;width:48px;height:48px} .book{flex-basis:170px} .cols{columns:1} .officers{grid-template-columns:1fr} footer .wrap{grid-template-columns:1fr} .sitemap{columns:2} } @media(max-width:480px){ body{font-size:1.15rem} .wrap{padding:0 20px} .a11y .wrap{padding:6px 20px} .a11y .today{display:none} .a11y .tools{width:100%;justify-content:space-between;flex-wrap:nowrap;gap:8px} .tools .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .tools button{padding:8px 10px} .tools .contrast .long{display:none} .tools .contrast .short{display:inline} .masthead .wrap{gap:14px} .masthead h1{font-size:1.5rem} .masthead .herb{width:60px} .clip{padding:18px 18px 22px} .entry .dot{top:calc(18px + .76rem - 4px)} .clip h3{font-size:1.35rem} .people{grid-template-columns:repeat(2,1fr)} .form{padding:22px 18px 26px} }