/* Tokeny muszą pozostać zgodne z blokiem :root w en/index.html i pl/index.html. Zmiana wartości tutaj bez zmiany tam rozjeżdża wygląd strony głównej i podstron. */ :root { --navy-deep: #081729; --navy: #0B2545; --navy-soft: #16345E; --gold: #B8912F; --gold-dark: #7A5D1C; --gold-light: #E3C878; --gold-pale: #F3E4B8; --cream: #FCF0E4; --cream-warm: #F4E7D4; --white: #FFFFFF; --crimson: #9C2B3A; --green-ok: #3F7A5B; --ink-muted: #52607A; /* Libre Baskerville ma WYŁĄCZNIE wagi 400, 400 italic i 700 — nie ma 500 ani 600. Nie ustawiać na tym kroju font-weight:500/600, bo przeglądarka podstawi 700. Wartości identyczne jak w home.css — oba arkusze muszą pozostać zgodne. */ --font-display: 'Libre Baskerville', Georgia, 'Times New Roman', serif; --font-body: 'Source Sans 3', Arial, Helvetica, sans-serif; /* Wyłącznie dla podstron usług — strona główna używa wartości rgba wprost. */ --line: rgba(11, 37, 69, 0.14); } * { box-sizing: border-box; } /* Odstep pod przyklejony naglowek - patrz komentarz w home.css. --header-h ustawia skrypt komponentu naglowka na zmierzona wysokosc (61 px u gory strony, 55 px po zwinieciu, 65/59 px ponizej 1120 px). */ /* Wartosc zapasowa 73 px = wysokosc paska na desktopie, gdzie wyznacza ja menu (12 + 48 + 12 + 1). Dziala, gdy JavaScript jest wylaczony. */ html { scroll-behavior: smooth; scroll-padding-top: var(--header-h, 73px); } [id] { scroll-margin-top: var(--header-h, 73px); } body { margin: 0; background: var(--cream); color: var(--navy); font-family: var(--font-body); line-height: 1.65; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button, input, textarea { font: inherit; } /* Widoczny pierscien fokusu - podstrony korzystaly do tej pory z domyslnego obramowania przegladarki, ktore na zlotym przycisku ledwo widac. Wartosci takie same jak w home.css. */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; } /* Ciemne złoto, bo bazowo .eyebrow leży na jasnym tle (--gold daje tam 2,6:1). Sekcje na granatowym tle nadpisują to poniżej na --gold-light. */ /* 0,82 rem zamiast 0,72 rem (+13,9%) - ten sam krok co w home.css (.eyebrow 0,74 -> 0,84 rem), zeby nadtytuly na podstronach mialy ten sam rozmiar co na stronie glownej. */ /* Nadtytul - wartosci IDENTYCZNE z home.css: 0,94 rem, odstep 0,16 em, waga 600, kreski po obu stronach. Bylo 0,82 rem / 0,19 em / 700, czyli inaczej niz na stronie glownej, mimo ze to ta sama etykieta w tej samej roli. Kreski biora kolor z currentColor, wiec ida za kolorem etykiety i nie trzeba ich nadpisywac osobno w kazdej ciemnej sekcji. flex:0 1 42px sprawia, ze to kreski kurcza sie pierwsze, gdy etykieta nie miesci sie w kolumnie - pelne uzasadnienie w home.css. */ .eyebrow { /* white-space:nowrap - nadtytul zawsze w jednym wierszu, uzasadnienie i granica dlugosci (ok. 29 znakow) w home.css. */ display: inline-flex; align-items: center; gap: 14px; max-width: 100%; white-space: nowrap; margin: 0 0 14px; color: var(--gold-dark); font-size: .94rem; font-weight: 600; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; } .eyebrow::before, .eyebrow::after { content: ""; flex: 0 1 42px; height: 1px; background: currentColor; opacity: .45; } .service-hero .eyebrow, .light-heading .eyebrow, .hub-hero .eyebrow { color: var(--gold-light); } /* Waga 400 („główne nagłówki i hasła”), interlinia poluzowana z 1.06 — Libre Baskerville ma wysoką literę x i długie wydłużenia dolne, przy 1.06 wiersze zachodziłyby na siebie. Skala h1/h2 zeszła o stopień, bo ten krój jest wyraźnie szerszy od poprzedniego i przy 6.35rem łamał nagłówki. */ h1, h2, h3 { margin: 0; color: var(--navy); font-family: var(--font-display); font-weight: 400; line-height: 1.16; } h1 { font-size: clamp(2.5rem, 5.4vw, 5.1rem); letter-spacing: -.005em; } h2 { font-size: clamp(2rem, 3.6vw, 3.5rem); letter-spacing: 0; } h3 { font-size: 1.36rem; line-height: 1.3; } p { margin: 0; } /* ============================================================ NAGLOWEK - wspolny ze strona glowna. Zrodlo znacznikow: _zrodlo/naglowek.html, rozsylane przez _zrodlo/wstrzyknij.py. Wartosci musza pozostac IDENTYCZNE z home.css (lacznie z punktami zalamania 1120 i 680 px), inaczej ten sam naglowek zachowuje sie inaczej na stronie glownej i na podstronach. Poprzedni, osobny naglowek podstron (.topbar) zostal usuniety. ============================================================ */ header { position: sticky; top: 0; z-index: 50; background: linear-gradient(110deg,rgba(255,253,250,.97) 0%,rgba(250,243,234,.95) 52%,rgba(255,253,250,.97) 100%); backdrop-filter: saturate(130%) blur(14px); border-bottom: 1px solid rgba(11,37,69,.055); box-shadow: 0 4px 20px rgba(8,23,41,.035); isolation: isolate; transition: background .45s ease, box-shadow .45s ease, border-color .45s ease; } header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg,transparent 4%,rgba(184,145,47,.42) 27%,rgba(227,200,120,.66) 50%,rgba(184,145,47,.42) 73%,transparent 96%); opacity: .46; transition: opacity .35s ease; } header.is-scrolled { background: linear-gradient(110deg,rgba(255,253,250,.985) 0%,rgba(250,243,234,.975) 52%,rgba(255,253,250,.985) 100%); box-shadow: 0 12px 34px rgba(8,23,41,.095); border-color: rgba(184,145,47,.13); } header.is-scrolled::after { opacity: .78; } header.is-scrolled .nav { padding-top: 7px; padding-bottom: 7px; } .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 28px; gap: 24px; transition: padding .35s ease; } /* Marka na poziomym srodku paska. Tor srodkowy siatki 1fr auto 1fr jest wysrodkowany z definicji, bo oba tory 1fr dostaja rowna szerokosc. Zapas sprawdzony: przy 1180 px kontenera kazdy tor 1fr ma 424 px, a najszersza kolumna (nawigacja EN, ok. 326 px) miesci sie z zapasem. Kolejnosc znacznikow w _zrodlo/naglowek.html zostala przestawiona tak, zeby zgadzala sie z ukladem - grid-column sluzy tu tylko do jawnego przypisania torow, nie do zmiany kolejnosci. */ /* Marka po LEWEJ, nawigacja na srodku, akcje po prawej - uklad klasyczny. Byla przez chwile wysrodkowana; wrocila na lewo, bo badanie NN/g (14 serwisow, 50 uczestnikow) wykazalo szesciokrotnie czestsza porazke przy powrocie na strone glowna, gdy logo stoi na srodku, a lewy gorny rog daje tez o 89% lepsza zapamietywalnosc znaku. Kolejnosc znacznikow w _zrodlo/naglowek.html zgadza sie z ukladem. */ /* Odstep 8 px, nie 12 px - uzasadnienie w home.css. */ .brand { display: flex; align-items: center; grid-column: 1; justify-self: start; gap: 8px; flex-shrink: 0; } /* Rozmiar przez WYSOKOSC: 31 px = 2,47 x wersalik napisu obok (bylo 51 px przy 1,38 rem, czyli 3,00 x). Pelne uzasadnienie w home.css. */ .brand img { display: block; height: 31px; width: auto; flex-shrink: 0; opacity: 0; animation: brandIn .7s ease .1s forwards; } @keyframes brandIn { from { opacity: 0; transform: scale(.7) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(0); } } .brand-word { display: flex; align-items: center; color: var(--navy); font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; line-height: 1; letter-spacing: .04em; white-space: nowrap; } .brand-word span { color: var(--gold); } nav.links { display: flex; align-items: center; grid-column: 2; justify-self: center; gap: 22px; } /* WERSALIKI. Menu ma byc rozpoznawalne jako menu, a nie jako zdanie obok logotypu - stad wielkie litery, mniejszy stopien pisma i wieksze swiatlo miedzy literami. 0,84 rem zamiast 0,92, bo wersalik jest optycznie wiekszy od tekstu mieszanego przy tym samym stopniu; tracking 0,13 em to wartosc juz obecna w serwisie (nadtytul na telefonie), wiec nie dokladamy kolejnej do listy z Priorytetu 6. Szerokosc sprawdzona: menu EN strony glownej ok. 431 px, PL ok. 412 px, menu podstrony (trzy pozycje) ok. 200-250 px - w pasie 1124 px zostaje ponad 270 px zapasu. WLASNY PAS 48 px. Pozycje dostaja jawna wysokosc wieksza niz przycisk po prawej (44 px) i godlo po lewej (31 px), zeby menu czytalo sie jako osobny element paska, a nie jako trzecia rzecz na tej samej linii. To ONO wyznacza teraz wysokosc naglowka: 12 + 48 + 12 + 1 = 73 px. line-height 1.2 jest wpisane wprost, bo bez tego wysokosc pola zalezalaby od line-height , ktory rozni sie miedzy arkuszami (1,6 i 1,65). */ nav.links a { display: flex; align-items: center; min-height: 48px; font-size: .84rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; line-height: 1.2; color: var(--navy); position: relative; white-space: nowrap; transition: color .25s ease; opacity: 0; transform: translateY(-6px); animation: navLinkIn .45s ease forwards; } nav.links a:nth-child(1) { animation-delay: .12s; } nav.links a:nth-child(2) { animation-delay: .17s; } nav.links a:nth-child(3) { animation-delay: .22s; } nav.links a:nth-child(4) { animation-delay: .27s; } nav.links a:nth-child(5) { animation-delay: .32s; } @keyframes navLinkIn { to { opacity: 1; transform: translateY(0); } } /* Podkreslenie 2 px w --gold-dark - identycznie jak w home.css. */ nav.links a::after { content: ""; position: absolute; left: 0; bottom: 11px; width: 0; height: 2px; background: var(--gold-dark); transition: width .25s ease; } nav.links a:hover::after { width: 100%; } nav.links a:hover, nav.links a:focus-visible { color: var(--gold-dark); } .nav-cta { display: flex; align-items: center; grid-column: 3; justify-self: end; gap: 11px; flex-shrink: 0; opacity: 0; animation: navToolsIn .5s ease .34s forwards; } @keyframes navToolsIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } } /* 44 px = minimalny cel dotykowy. Wartosci identyczne z home.css. */ .nav-cta > .btn { min-height: 44px; padding: 12px 20px; font-size: .86rem; } #langToggle { gap: 5px; } #langToggle a { border-width: 1px; border-radius: 5px; padding: 3px; opacity: .58; transform: none; } #langToggle a svg { width: 22px; height: 15px; } #langToggle a:hover { opacity: 1; transform: translateY(-1px); } #langToggle a.active { opacity: 1; transform: none; background: rgba(184,145,47,.07); } /* Jawne 44x44 px - minimalny cel dotykowy, a zarazem element wyznaczajacy wysokosc naglowka ponizej 1120 px. Musi byc identyczne z home.css. */ .menu-btn { display: none; flex-direction: column; align-items: center; justify-content: center; padding: 0; width: 44px; height: 44px; border: none; background: none; } .menu-btn span { display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--navy); transition: .25s; } @media (max-width: 1120px) { .nav { grid-template-columns: 1fr auto; gap: 14px; } /* Ponizej 1120 px marka wraca na lewa strone. */ .brand { grid-column: 1; justify-self: start; } .nav-cta { grid-column: 2; } /* 12+44+12+1 = 69 px. Menu jest tu zwiniete i wypada z siatki, wiec wysokosc wyznacza hamburger; na desktopie robi to menu i pasek ma 73 px. */ nav.links { position: fixed; top: 69px; left: 0; right: 0; z-index: 40; display: flex; flex-direction: column; gap: 0; padding: 8px 0 20px; border-bottom: 1px solid rgba(11,37,69,.1); background: rgba(255,250,244,.98); backdrop-filter: blur(14px); transform: translateY(-130%); transition: transform .3s ease; } nav.links.open { transform: translateY(0); } nav.links a { width: 100%; padding: 14px 28px; border-top: 1px solid rgba(11,37,69,.06); } /* W rozwinietym menu podkreslenie wraca na sam dol pozycji - 11 px nad krawedzia wisialoby w powietrzu obok kreski rozdzielajacej. */ nav.links a::after { bottom: 0; } .nav-cta > .btn { min-height: 38px; padding: 9px 14px; font-size: .78rem; } .menu-btn { display: flex; } /* Godlo 25 px przy napisie 0,88 rem = 2,31 x. Godlo jest nizsze od hamburgera (44 px), wiec wysokosc paska zostaje przy 65 px. */ .brand img { height: 25px; } .brand-word { font-size: 0.88rem; } /* 7+44+7+1 = 59 px. */ header.is-scrolled nav.links { top: 59px; } } /* Ponizej 680 px przycisk z naglowka ustepuje miejsca przyklejonemu CTA na dole ekranu (.mobile-cta). TEN SAM punkt zalamania jest w home.css. */ @media (max-width: 680px) { /* 0,78 rem, tracking 0,13 em, kreski 24 px, odstep 10 px - wartosci identyczne z home.css. */ .eyebrow, .team-core-label { font-size: .78rem; letter-spacing: .13em; gap: 10px; } .eyebrow::before, .eyebrow::after, .team-core-label::before, .team-core-label::after { flex-basis: 24px; } .nav-cta > .btn { display: none; } } /* WERSALIKI na przyciskach - decyzja uzytkownika: napis ma byc bardziej widoczny. Tracking podniesiony z 0,01 na 0,07 em, bo wielkie litery bez zwiekszonego swiatla zlewaja sie w jeden blok - to jedyny powod, dla ktorego wersaliki bywaja MNIEJ czytelne, nie bardziej. Rozmiar zostaje bez zmian (0,89 rem), zeby nie odbierac tego, po co ta zmiana powstala. Wartosc 0,07 em jest wspolna dla home.css i service-pages.css. */ /* Przyciski podstron - ten sam jezyk co .btn nizej: 42 px, promien 6 px, zwykla wielkosc liter (wersaliki z rozstrzelonymi literami czytaly sie jako maniera sprzed dekady i wymuszaly szerokie przyciski). Zloto idzie za tlem: WARTOSC BAZOWA .button-gold jest dla jasnego tla (karta boczna artykulu, przyklejone CTA nad trescia), a sekcje granatowe nadpisuja ja na --gold-light. Ten sam wzorzec co przy .eyebrow. */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; line-height: 1.2; padding: 11px 22px; border: 1px solid var(--navy); border-radius: 6px; background: var(--navy); color: white; font-size: .89rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; transition: background-color .18s ease, border-color .18s ease, color .18s ease; } .button:hover { border-color: var(--navy-soft); background: var(--navy-soft); } .button:active { transform: translateY(1px); } .button-gold { border-color: var(--gold); background: var(--gold); color: var(--navy-deep); } .button-gold:hover { border-color: var(--gold-dark); background: var(--gold-dark); color: var(--white); } .service-hero .button-gold, .article-cta .button-gold, .hub-hero .button-gold { border-color: var(--gold-light); background: var(--gold-light); color: var(--navy-deep); } /* Na granatowym tle hover idzie W GORE jasnosci (--gold-light -> --gold-pale, 11,0:1 -> 14,25:1), a nie w dol jak wczesniej. Obramowanie w --gold utrzymuje sylwetke. Warianty dla JASNEGO tla wyzej celowo ciemnieja - tam pojasnienie zmniejszyloby kontrast wobec tla, zamiast go zwiekszyc. */ .service-hero .button-gold:hover, .article-cta .button-gold:hover, .hub-hero .button-gold:hover { border-color: var(--gold); background: var(--gold-pale); color: var(--navy-deep); } /* Glowne CTA w hero podstrony i pod artykulem: 56 px, padding 18/34, 1 rem - te same wartosci co .hero-ctas .btn-primary w home.css. Przycisk w kolumnie bocznej ZOSTAJE przy 48 px: .aside-card ma 300 px szerokosci, wiec padding 34 px lamalby w nim napis. */ .hero-actions .button, .article-cta .button { min-height: 56px; padding: 18px 34px; font-size: 1rem; } .aside-card .button { min-height: 48px; padding: 14px 26px; font-size: .92rem; } /* Przyciski NIE MAJA znaku strzalki obok napisu - byla, zostala usunieta na zyczenie. Nie dodawac jej ponownie. Uwage na przycisk kieruja wylacznie wielkosc i hover rozjasniajacy - tak samo jak w home.css. */ .text-link { display: inline-flex; align-items: center; gap: 12px; color: white; font-size: .79rem; font-weight: 700; letter-spacing: .04em; border-bottom: 1px solid rgba(255,255,255,.34); padding-bottom: 6px; } .service-hero { position: relative; overflow: hidden; min-height: 720px; padding: 76px 0 72px; background: var(--navy-deep); color: white; } .hero-lines { position: absolute; inset: 0; opacity: .4; background: radial-gradient(circle at 85% 18%, rgba(227,200,120,.16), transparent 25%), linear-gradient(115deg, transparent 0 68%, rgba(255,255,255,.035) 68% 68.15%, transparent 68.15% 100%); } .hero-lines::before, .hero-lines::after { content: ""; position: absolute; width: 420px; height: 420px; border: 1px solid rgba(227,200,120,.16); border-radius: 50%; right: -125px; top: -130px; } .hero-lines::after { width: 560px; height: 560px; right: -195px; top: -200px; } .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr); gap: 76px; align-items: center; } .hero-copy { max-width: 800px; } .back-link { display: inline-block; margin-bottom: 70px; color: rgba(255,255,255,.6); font-size: .74rem; font-weight: 600; } .service-hero h1 { max-width: 850px; color: white; } .hero-summary { max-width: 770px; margin-top: 30px; color: rgba(255,255,255,.82); font-size: clamp(1.12rem, 2vw, 1.42rem); line-height: 1.65; } .hero-intro { max-width: 700px; margin-top: 16px; color: rgba(255,255,255,.55); font-size: .98rem; } .hero-actions { display: flex; align-items: center; gap: 32px; margin-top: 38px; } .hero-aside { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(255,255,255,.14); padding: 10px 0 10px 38px; } .service-photo { position: relative; isolation: isolate; aspect-ratio: 4 / 3; margin: 0 0 28px; overflow: hidden; border: 1px solid rgba(227,200,120,.44); background: #102b49; box-shadow: 0 28px 70px rgba(0,0,0,.26); } .service-photo::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(6,24,45,.04) 36%, rgba(6,24,45,.88) 100%); pointer-events: none; } .service-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) contrast(1.03); transition: transform .9s cubic-bezier(.22,1,.36,1), filter .5s ease; } .service-photo:hover img { transform: scale(1.035); filter: saturate(.9) contrast(1.03); } .service-photo figcaption { position: absolute; z-index: 2; right: 22px; bottom: 20px; left: 22px; display: flex; align-items: baseline; justify-content: space-between; gap: 18px; color: rgba(255,255,255,.8); font-size: .65rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .service-photo figcaption span { color: var(--gold-light); font-family: var(--font-display); font-size: 2.4rem; font-weight: 400; letter-spacing: 0; line-height: .8; } .hero-aside > p { margin-bottom: 15px; color: var(--gold-light); font-size: .69rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; } .hero-aside nav { display: grid; } .hero-aside nav a { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.76); font-family: var(--font-body); font-size: .92rem; font-weight: 600; } .hero-aside nav a span { color: var(--gold-light); } .section { padding-block: 112px; } .section-heading { max-width: 720px; margin-bottom: 54px; } .section-heading > p:last-child { margin-top: 20px; color: var(--ink-muted); } .split-heading { max-width: none; display: grid; grid-template-columns: 1.05fr .75fr; gap: 100px; align-items: end; } .split-heading > p:last-child { margin: 0 0 8px; } .scope-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .scope-card { position: relative; min-height: 190px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.26); transition: background .25s ease, transform .25s ease; } .scope-card:hover { z-index: 1; background: var(--white); transform: translateY(-3px); } .scope-card > span { display: block; margin-bottom: 44px; color: var(--gold-dark); font-size: .68rem; font-weight: 700; letter-spacing: .12em; } /* Nagłówki serif poniżej ~1,5rem dostają wagę 700 — Libre Baskerville w wadze 400 przy rozmiarze zbliżonym do tekstu przestaje czytać się jak nagłówek. */ .scope-card h3 { max-width: 250px; font-size: 1.28rem; font-weight: 700; text-transform: none; } .scope-card b { position: absolute; right: 25px; bottom: 24px; color: var(--gold-dark); font-weight: 400; } .process-section { padding-block: 110px; background: var(--navy); color: white; } .light-heading h2 { color: white; max-width: 720px; } .process-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.16); } .process-grid article { min-height: 280px; padding: 34px 42px 16px 0; border-right: 1px solid rgba(255,255,255,.16); } .process-grid article + article { padding-left: 42px; } .process-grid article:last-child { border-right: 0; } .process-grid article > span { color: var(--gold-light); font-family: var(--font-display); font-size: 2.5rem; } .process-grid h3 { margin-top: 56px; color: white; font-size: 1.75rem; } .process-grid p { max-width: 300px; margin-top: 14px; color: rgba(255,255,255,.58); font-size: .94rem; } .tips-section { display: grid; grid-template-columns: .78fr 1.22fr; gap: 90px; } .tips-grid { display: grid; } .tips-grid article { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); } .tips-grid article:last-child { border-bottom: 1px solid var(--line); } .tips-grid span { color: var(--gold-dark); font-family: var(--font-body); font-size: .95rem; font-weight: 700; letter-spacing: .06em; } .tips-grid p { color: var(--navy); } .knowledge-section { padding-block: 110px; background: #eee4d4; } .article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .article-card { background: var(--white); border: 1px solid transparent; transition: transform .25s ease, border .25s ease; } .article-card:hover { transform: translateY(-4px); border-color: rgba(184,145,47,.45); } .article-card summary { min-height: 285px; padding: 28px; display: flex; flex-direction: column; list-style: none; cursor: pointer; } .article-card summary::-webkit-details-marker { display: none; } .article-card summary > span { color: var(--gold-dark); font-size: .67rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .article-card h3 { margin-top: 46px; font-size: 1.65rem; } .article-card summary b { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 24px; border-top: 1px solid var(--line); color: var(--navy); font-size: .7rem; letter-spacing: .04em; } .article-card summary i { font-size: 1.2rem; font-style: normal; font-weight: 400; } .article-card[open] summary i { transform: rotate(45deg); } .article-card > p { padding: 0 28px 28px; color: var(--ink-muted); font-size: .9rem; } /* Karta jako link do pełnego artykułu. Wariant DODANY OBOK reguł
powyżej, które nadal obsługują podstrony bez gotowych artykułów — nie usuwać ich. */ .article-card-link { display: flex; flex-direction: column; min-height: 285px; padding: 28px; } .article-card-link > span { color: var(--gold-dark); font-size: .67rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .article-card-link h3 { margin-top: 28px; font-size: 1.6rem; } .article-card-link > p { padding: 0; margin-top: 14px; color: var(--ink-muted); font-size: .9rem; line-height: 1.7; } .article-card-link b { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 24px; border-top: 1px solid var(--line); color: var(--navy); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .article-card-link i { color: var(--gold-dark); font-size: 1.05rem; font-style: normal; transition: transform .25s ease; } .article-card-link:hover i { transform: translateX(4px); } .pricing-section { padding-bottom: 88px; } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; } .pricing-grid article { position: relative; display: flex; flex-direction: column; min-height: 390px; padding: 34px; border: 1px solid var(--line); background: rgba(255,255,255,.28); } .pricing-grid article.featured { border-color: var(--gold); background: var(--white); box-shadow: 0 20px 55px rgba(11,37,69,.08); } .recommended { position: absolute; top: 0; right: 0; left: 0; padding: 7px 12px; background: var(--gold); color: var(--navy-deep); text-align: center; font-size: .63rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .featured .price-number { margin-top: 16px; } .price-number { color: var(--gold-dark); font-size: .72rem; font-weight: 700; } .pricing-grid h3 { margin-top: 54px; font-size: 1.65rem; } .pricing-grid strong { margin-top: 16px; color: var(--navy); font-size: .94rem; } .pricing-grid p { margin-top: 16px; color: var(--ink-muted); font-size: .9rem; } .pricing-grid a { display: flex; justify-content: space-between; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); color: var(--navy); font-size: .72rem; font-weight: 700; text-transform: uppercase; } .included-row { display: flex; align-items: center; gap: 22px 34px; flex-wrap: wrap; padding: 30px 0; border-bottom: 1px solid var(--line); } .included-row h3 { margin-right: auto; font-size: 1.2rem; font-weight: 700; } .included-row span { color: var(--ink-muted); font-size: .83rem; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; } .contact { position: relative; overflow: hidden; padding: 100px 0 110px; background: var(--navy-deep); color: var(--cream); } .contact::before { content: ""; position: absolute; width: 620px; height: 620px; right: -250px; top: -260px; border-radius: 50%; background: radial-gradient(circle,rgba(227,200,120,.12),transparent 67%); animation: contactGlow 9s ease-in-out infinite alternate; pointer-events: none; } .contact-inner { position: relative; display: grid; grid-template-columns: .85fr 1fr; gap: 64px; } .contact .section-head { max-width: 100%; margin: 0 0 36px; text-align: left; } .contact .section-head h2 { color: var(--gold-light); font-size: clamp(1.9rem,3.4vw,2.6rem); line-height: 1.15; } .contact-info { display: flex; flex-direction: column; gap: 22px; margin-bottom: 36px; } .contact-row { display: flex; align-items: center; gap: 16px; font-size: .98rem; } .contact-row svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--gold-light); } .contact-row a:hover { color: var(--gold-light); } /* Kopiowanie adresu e-mail - dla osob, ktore nie korzystaja z klienta poczty na tym urzadzeniu i chca wkleic adres gdzie indziej. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .copy-btn { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: -6px; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; background: rgba(255,255,255,.06); color: rgba(251,246,236,.72); cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease; } /* powiekszenie pola dotyku do 46x46 px bez powiekszania samego przycisku */ .copy-btn::before { content: ""; position: absolute; inset: -5px; } .copy-btn:hover { color: var(--gold-light); border-color: rgba(227,200,120,.5); background: rgba(255,255,255,.1); } .copy-btn svg { width: 16px; height: 16px; color: inherit; } .copy-btn .copy-check { display: none; } .copy-btn.is-copied { color: var(--gold-light); border-color: rgba(227,200,120,.55); } .copy-btn.is-copied .copy-icon { display: none; } .copy-btn.is-copied .copy-check { display: block; } .copy-btn::after { content: attr(data-label-copied); position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px); padding: 5px 10px; border-radius: 2px; background: var(--gold-light); color: var(--navy-deep); font-size: .7rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .copy-btn.is-copied::after { opacity: 1; transform: translateX(-50%) translateY(0); } .qr-block { display: flex; align-items: center; gap: 18px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); } .qr-block .qr { width: 120px; height: 120px; flex-shrink: 0; padding: 6px; background: white; } .qr-block .qr img { display: block; width: 100%; height: 100%; object-fit: contain; } .qr-block p { max-width: 220px; color: rgba(251,246,236,.6); font-size: .84rem; } /* Tlo karty jest NIEPRZEZROCZYSTE (#132133 = rgba(255,255,255,.045) zlozone z --navy-deep), zeby pole