/* ============================================================================= Strony WWW Pomorze - system wizualny Zrodlo prawdy: brandbook-strony-www-pomorze.html (Ksiega identyfikacji, v1.0) Kolejnosc sekcji: 01 Tokeny 02 Reset 03 Typografia 04 Uklad 05 Przyciski 06 Tagi 07 Karty 08 Formularze 09 Dekoracje 10 Naglowek 11 Hero 12 Sekcje tresci 13 Realizacje 14 Mockupy 15 Proces 16 Opinie 17 FAQ 18 CTA 19 Stopka 20 Utility ========================================================================== */ /* ----------------------------------------------------------------------------- 01 TOKENY Paleta zamknieta. Kolor spoza tej listy nie ma prawa pojawic sie na stronie. -------------------------------------------------------------------------- */ :root{ /* Paleta podstawowa */ --indygo:#5D5FAC; --indygo-deep:#51539E; --grafit:#111111; --biel:#FFFFFF; /* Paleta uzupelniajaca */ --fiolet:#6A408D; --indygo-light:#9B9CDB; --mgla:#C3C4EA; --lawenda:#EFF0FA; --szary:#818183; --separator:#E6E6E6; /* Tekst - grafit niesie cala tresc, odcienie tylko dla hierarchii */ --tekst:#111111; --tekst-2:#3d3d45; --tekst-3:#4a4a52; /* Stany semantyczne (z brandbooka, sekcja "tak/nie") */ --ok:#1F9D63; --ok-bg:#E4F3EB; --ok-ink:#12703F; /* Jasne odcienie zieleni marki - pod pływający przycisk telefonu na mobile. Ma się wyróżniać na tle indygo, a nie wtapiać w nie. Napis jest grafitowy, nie biały: biel na tak jasnej zieleni daje kontrast poniżej 2:1 i przy 15 px robi się nieczytelna w słońcu. Grafit daje ok. 8:1. */ --zielen-jasna:#34C77F; --zielen-jasna-hover:#2BB673; --err:#D0433C; --err-bg:#FBE6E5; --err-ink:#9B2C26; /* Typografia */ --sans:'Ubuntu', system-ui, -apple-system, 'Segoe UI', sans-serif; --text:'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Skala typograficzna - zamknieta, desktop */ --h1:56px; --h1-lh:1.1; --h1-ls:-0.02em; --h2:40px; --h2-lh:1.15; --h2-ls:-0.01em; --h3:28px; --h3-lh:1.25; --h4:20px; --h4-lh:1.3; --nad:13px; --nad-ls:0.18em; --lead:20px; --lead-lh:1.65; --body:17px; --body-lh:1.7; --small:14px;--small-lh:1.6; --btn:16px; /* Geometria - oszczedna: 4 px pola i przyciski, 8 px karty */ --r-pole:4px; --r-karta:8px; --r-pigulka:999px; /* Rytm pionowy */ --sekcja:96px; --sekcja-sm:64px; --gap:32px; /* Szerokosci */ --kontener:1200px; --kontener-waski:820px; --miara:70ch; /* dlugosc wiersza 60-75 znakow */ /* Cien tylko na hoverze */ --cien-hover:0 8px 24px rgba(93,95,172,.18); --cien-modal:0 24px 80px rgba(17,17,17,.35); /* Naglowek */ --naglowek-h:84px; --przejscie:.2s ease; } @media (max-width:900px){ :root{ /* Brandbook: na mobile H1-H3 w dol o ok. 25% */ --h1:38px; --h2:30px; --h3:22px; --h4:18px; --lead:18px; --body:16px; --sekcja:64px; --sekcja-sm:48px; --gap:24px; --naglowek-h:68px; } } /* ----------------------------------------------------------------------------- 02 RESET -------------------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--naglowek-h) + 16px)} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important} } body{ margin:0; background:var(--biel); color:var(--tekst); font-family:var(--text); font-size:var(--body); line-height:var(--body-lh); font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img,svg,video{max-width:100%; height:auto; display:block} /* Domyślny rozmiar ikony. Bez tego SVG bez jawnej szerokości rozdymał się do rozmiaru zastępczego przeglądarki - w przycisku "Zadzwoń" dawało to ogromną słuchawkę obok normalnego tekstu. Skala w em, więc ikona zawsze pasuje do stopnia pisma elementu, w którym siedzi. */ .swp-svg{width:1.15em; height:1.15em; flex:none} button,input,select,textarea{font:inherit; color:inherit} a{color:var(--indygo); text-decoration-thickness:1px; text-underline-offset:.18em} a:hover{color:var(--indygo-deep)} h1,h2,h3,h4,h5,h6,p,figure,ul,ol,dl{margin:0} ul,ol{padding:0; list-style:none} table{border-collapse:collapse; width:100%} hr{border:0; border-top:1px solid var(--separator); margin:var(--gap) 0} /* Focus - brandbook: obrys indygo 3 px, nie sam kolor ramki */ :focus-visible{outline:3px solid var(--indygo); outline-offset:2px; border-radius:2px} .swp-skip{ position:absolute; left:-9999px; top:0; z-index:100000; background:var(--grafit); color:#fff; padding:12px 20px; font-weight:700; } .swp-skip:focus{left:8px; top:8px; color:#fff} ::selection{background:var(--indygo); color:#fff} /* ----------------------------------------------------------------------------- 03 TYPOGRAFIA Ubuntu buduje strukture, Roboto niesie tresc. Trzeciego kroju nie ma. -------------------------------------------------------------------------- */ h1,h2,h3,h4,h5,h6,.swp-h1,.swp-h2,.swp-h3,.swp-h4{ font-family:var(--sans); color:var(--grafit); text-wrap:balance; } h1,.swp-h1{font-size:var(--h1); line-height:var(--h1-lh); letter-spacing:var(--h1-ls); font-weight:700} h2,.swp-h2{font-size:var(--h2); line-height:var(--h2-lh); letter-spacing:var(--h2-ls); font-weight:700} h3,.swp-h3{font-size:var(--h3); line-height:var(--h3-lh); font-weight:500} h4,.swp-h4{font-size:var(--h4); line-height:var(--h4-lh); font-weight:500} h5,h6{font-size:var(--body); font-weight:500} /* Nadtytul - wersaliki z rozstrzeleniem, zawsze indygo */ .swp-nad{ display:block; font-family:var(--text); font-weight:700; font-size:var(--nad); letter-spacing:var(--nad-ls); text-transform:uppercase; color:var(--indygo); margin-bottom:14px; } .swp-nad--jasny{color:var(--mgla)} .swp-lead{font-size:var(--lead); line-height:var(--lead-lh); color:var(--tekst-2); max-width:var(--miara)} .swp-tekst{max-width:var(--miara)} .swp-tekst p + p{margin-top:1.1em} .swp-maly{font-size:var(--small); line-height:var(--small-lh); color:var(--tekst-3)} /* Blok akcentowy - sygnatura marki. Maks. jeden na naglowek. Blok ma własne światło pionowe (.1em góra i dół), więc w wielowierszowym nagłówku nachodził na sąsiednie wiersze - przy interlinii 1,1 nie było go gdzie zmieścić. Nagłówek zawierający blok dostaje więc luźniejszą interlinię; nagłówki bez bloku zostają na skali z brandbooka. */ .swp-blok{ background:var(--indygo); color:var(--biel); padding:.10em .24em; border-radius:0; box-decoration-break:clone; -webkit-box-decoration-break:clone; } h1:has(.swp-blok), h2:has(.swp-blok), .swp-h1:has(.swp-blok), .swp-h2:has(.swp-blok){line-height:1.34} /* Zapas dla przeglądarek bez :has() - klasę można dopisać ręcznie w szablonie. */ .swp-ma-blok{line-height:1.34} /* Linia akcentowa - 56 px / 3 px, zastepuje wszystkie separatory ozdobne */ .swp-linia{width:56px; height:3px; background:var(--indygo); margin:20px 0; border:0} .swp-linia--srodek{margin-left:auto; margin-right:auto} .swp-linia--jasna{background:var(--mgla)} /* Tresc redakcyjna (polityka prywatnosci, RODO, raporty) */ .swp-proza{max-width:var(--miara)} .swp-proza > * + *{margin-top:1.1em} .swp-proza h2{margin-top:1.8em; font-size:var(--h3); font-weight:500} .swp-proza h3{margin-top:1.5em; font-size:var(--h4)} .swp-proza ul,.swp-proza ol{padding-left:0} .swp-proza li{position:relative; padding-left:26px; margin-bottom:.5em} .swp-proza ul > li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; background:var(--indygo); } .swp-proza ol{counter-reset:swp-ol} .swp-proza ol > li{counter-increment:swp-ol} .swp-proza ol > li::before{ content:counter(swp-ol) "."; position:absolute; left:0; top:0; font-family:var(--sans); font-weight:700; color:var(--indygo); } .swp-proza a{font-weight:500} .swp-proza strong{font-weight:700} .swp-proza table{margin:1.4em 0; font-size:var(--small)} .swp-proza th{ text-align:left; background:var(--lawenda); color:var(--indygo-deep); font-weight:700; padding:12px 16px; border-bottom:1px solid var(--separator); } .swp-proza td{padding:12px 16px; border-bottom:1px solid var(--separator); vertical-align:top} .swp-proza blockquote{ border-left:3px solid var(--indygo); padding:4px 0 4px 24px; color:var(--tekst-2); font-size:var(--lead); line-height:1.6; } /* ----------------------------------------------------------------------------- 04 UKLAD -------------------------------------------------------------------------- */ .swp-kontener{width:100%; max-width:var(--kontener); margin-inline:auto; padding-inline:24px} .swp-kontener--waski{max-width:var(--kontener-waski)} @media (max-width:600px){ .swp-kontener{padding-inline:18px} } .swp-sekcja{padding-block:var(--sekcja)} .swp-sekcja--sm{padding-block:var(--sekcja-sm)} .swp-sekcja--lawenda{background:var(--lawenda)} .swp-sekcja--grafit{background:var(--grafit); color:rgba(255,255,255,.86)} .swp-sekcja--grafit h1,.swp-sekcja--grafit h2,.swp-sekcja--grafit h3,.swp-sekcja--grafit h4{color:#fff} .swp-sekcja--grafit .swp-lead{color:rgba(255,255,255,.82)} .swp-sekcja--grafit .swp-nad{color:var(--mgla)} .swp-siatka{display:grid; gap:var(--gap)} .swp-siatka--2{grid-template-columns:repeat(2,1fr)} .swp-siatka--3{grid-template-columns:repeat(3,1fr)} .swp-siatka--4{grid-template-columns:repeat(4,1fr)} .swp-siatka--auto{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} @media (max-width:1000px){ .swp-siatka--4{grid-template-columns:repeat(2,1fr)} .swp-siatka--3{grid-template-columns:repeat(2,1fr)} } @media (max-width:680px){ .swp-siatka--2,.swp-siatka--3,.swp-siatka--4{grid-template-columns:1fr} } /* Naglowek sekcji */ .swp-glowa{max-width:var(--miara); margin-bottom:48px} .swp-glowa--srodek{margin-inline:auto; text-align:center} .swp-glowa--srodek .swp-lead{margin-inline:auto} .swp-glowa p{margin-top:18px} /* Dwie kolumny: tresc + bok */ .swp-duo{display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:center} .swp-duo--odwrot > :first-child{order:2} @media (max-width:940px){ .swp-duo{grid-template-columns:1fr; gap:40px} .swp-duo--odwrot > :first-child{order:0} } /* ----------------------------------------------------------------------------- 05 PRZYCISKI Jeden przycisk glowny na sekcje. Etykieta z zamknietej listy CTA. -------------------------------------------------------------------------- */ .swp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--text); font-weight:700; font-size:var(--btn); letter-spacing:.02em; line-height:1.2; padding:16px 32px; border-radius:var(--r-pole); border:1.5px solid transparent; cursor:pointer; text-decoration:none; transition:background var(--przejscie), color var(--przejscie), border-color var(--przejscie), transform var(--przejscie); min-height:54px; } .swp-btn:active{transform:translateY(1px)} .swp-btn--glowny{background:var(--indygo); color:var(--biel); border-color:var(--indygo)} .swp-btn--glowny:hover{background:var(--indygo-deep); border-color:var(--indygo-deep); color:var(--biel)} .swp-btn--drugi{background:transparent; color:var(--indygo); border-color:var(--indygo)} .swp-btn--drugi:hover{background:var(--indygo); color:var(--biel)} .swp-btn--ciemny{background:var(--grafit); color:var(--biel); border-color:var(--grafit)} .swp-btn--ciemny:hover{background:#000; color:var(--biel)} .swp-btn--bialy{background:var(--biel); color:var(--indygo); border-color:var(--biel)} .swp-btn--bialy:hover{background:var(--lawenda); color:var(--indygo-deep)} .swp-btn--obrys-bialy{background:transparent; color:var(--biel); border-color:rgba(255,255,255,.55)} .swp-btn--obrys-bialy:hover{background:var(--biel); color:var(--indygo); border-color:var(--biel)} .swp-btn--duch{ background:none; color:var(--indygo); border:0; padding:8px 0; text-decoration:underline; text-underline-offset:.25em; min-height:0; } .swp-btn--duch:hover{color:var(--indygo-deep)} .swp-btn--duch::after{content:"\2192"; transition:transform var(--przejscie)} .swp-btn--duch:hover::after{transform:translateX(3px)} .swp-btn--pelny{width:100%} .swp-btn[disabled],.swp-btn[aria-disabled="true"]{opacity:.5; pointer-events:none} .swp-btny{display:flex; flex-wrap:wrap; gap:16px; align-items:center} .swp-btny--srodek{justify-content:center} /* ----------------------------------------------------------------------------- 06 TAGI - jedyne miejsce z pelnym zaokragleniem -------------------------------------------------------------------------- */ .swp-tag{ display:inline-flex; align-items:center; gap:6px; font-size:var(--small); font-weight:500; line-height:1; padding:8px 16px; border-radius:var(--r-pigulka); background:var(--lawenda); color:var(--indygo-deep); text-decoration:none; border:1px solid transparent; transition:background var(--przejscie), color var(--przejscie); } .swp-tag--pelny{background:var(--indygo); color:var(--biel)} a.swp-tag:hover{background:var(--mgla); color:var(--indygo-deep)} a.swp-tag--pelny:hover{background:var(--indygo-deep); color:var(--biel)} .swp-tagi{display:flex; flex-wrap:wrap; gap:10px} /* ----------------------------------------------------------------------------- 07 KARTY -------------------------------------------------------------------------- */ /* Uwaga na wysokosc. Wczesniej bylo tu height:100%, zeby karty w siatce mialy rowna wysokosc. To zbedne - element siatki i tak rozciaga sie do wysokosci wiersza (align-items:stretch jest domyslne) - a poza siatka robilo szkode: pojedyncza karta wstawiona wprost do kontenera rozciagala sie na cala wysokosc sekcji i zostawiala pod trescia wielka biala plame. */ .swp-karta{ background:var(--biel); border:1px solid var(--separator); border-radius:var(--r-karta); padding:32px; transition:box-shadow var(--przejscie), transform var(--przejscie); display:flex; flex-direction:column; } /* Karta wyróżniona. Wcześniej był to pasek koloru na całej górnej krawędzi - gest tak ograny, że czyta się jak szablon, a nie jak nasza identyfikacja. Wyróżnienie robimy tym, czym marka wyróżnia od zawsze: pełnym blokiem koloru. Karta siada na lawendzie, a jej ikona dostaje pełny blok indygo. Zero kresek. */ .swp-karta--akcent{ background:var(--lawenda); border-color:transparent; } .swp-karta--akcent .swp-ikona{background:var(--indygo); color:var(--biel)} .swp-karta--akcent .swp-nad{color:var(--indygo-deep)} /* Na lawendowej sekcji karta akcentowa musi się odciąć od tła - wtedy odwracamy: biała karta, blok indygo zostaje. */ .swp-sekcja--lawenda .swp-karta--akcent{background:var(--biel)} .swp-karta--klik:hover{box-shadow:var(--cien-hover); transform:translateY(-2px)} .swp-karta h3,.swp-karta h4{margin-bottom:12px} .swp-karta p{color:var(--tekst-3); font-size:var(--small); line-height:1.65} .swp-karta .swp-btn--duch{margin-top:auto; padding-top:20px; align-self:flex-start} /* Ikona karty - blok, nie kolko */ .swp-ikona{ width:52px; height:52px; border-radius:6px; margin-bottom:22px; background:var(--lawenda); color:var(--indygo); display:flex; align-items:center; justify-content:center; flex:none; } .swp-ikona svg{width:26px; height:26px; stroke-width:1.6} .swp-karta--akcent .swp-ikona{background:var(--indygo); color:var(--biel)} /* Karta na lawendzie */ .swp-sekcja--lawenda .swp-karta{border-color:transparent} /* Statystyka */ .swp-stat{text-align:center} .swp-stat__num{font-family:var(--sans); font-weight:700; font-size:48px; line-height:1; letter-spacing:-.02em; color:var(--indygo)} .swp-stat__opis{margin-top:10px; font-size:var(--small); color:var(--tekst-3)} .swp-sekcja--grafit .swp-stat__num{color:var(--mgla)} .swp-sekcja--grafit .swp-stat__opis{color:rgba(255,255,255,.7)} /* ----------------------------------------------------------------------------- 08 FORMULARZE -------------------------------------------------------------------------- */ .swp-form{display:flex; flex-direction:column; gap:20px} .swp-pole{display:flex; flex-direction:column; gap:8px} .swp-pole__etykieta{font-size:var(--small); font-weight:700; color:var(--grafit)} .swp-pole__etykieta span{color:var(--indygo)} .swp-pole__podpowiedz{font-size:13px; color:var(--szary); line-height:1.5} .swp-input,.swp-textarea,.swp-select{ width:100%; background:var(--biel); color:var(--grafit); border:1px solid var(--mgla); border-radius:var(--r-pole); padding:14px 16px; font-size:var(--body); line-height:1.4; transition:border-color var(--przejscie), box-shadow var(--przejscie); } .swp-textarea{min-height:150px; resize:vertical} .swp-select{ appearance:none; padding-right:44px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235D5FAC' stroke-width='2'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; } .swp-input::placeholder,.swp-textarea::placeholder{color:var(--szary)} .swp-input:focus,.swp-textarea:focus,.swp-select:focus{ outline:0; border-color:var(--indygo); box-shadow:0 0 0 3px rgba(93,95,172,.18); } .swp-input[aria-invalid="true"],.swp-textarea[aria-invalid="true"]{border-color:var(--err)} /* Zgoda RODO */ .swp-zgoda{display:flex; gap:12px; align-items:flex-start; font-size:13px; line-height:1.55; color:var(--tekst-3)} .swp-zgoda input[type="checkbox"]{ appearance:none; flex:none; width:22px; height:22px; margin-top:1px; border:1px solid var(--mgla); border-radius:3px; background:var(--biel); cursor:pointer; transition:background var(--przejscie), border-color var(--przejscie); } .swp-zgoda input[type="checkbox"]:checked{ background:var(--indygo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10'%3E%3Cpath d='M1 5l4 4 7-8' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E") center/13px 10px no-repeat; border-color:var(--indygo); } .swp-zgoda a{font-weight:500} /* Honeypot - poza ekranem, nie display:none (czesciej rozpoznawany wzorzec) */ .swp-hp{position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden} /* Komunikaty */ .swp-flash{ border-radius:var(--r-pole); padding:18px 22px; font-size:var(--small); line-height:1.6; display:flex; gap:12px; align-items:flex-start; } .swp-flash--ok{background:var(--ok-bg); color:var(--ok-ink); border-left:3px solid var(--ok)} .swp-flash--err{background:var(--err-bg); color:var(--err-ink); border-left:3px solid var(--err)} .swp-flash strong{display:block; margin-bottom:3px; font-weight:700} .swp-flash svg{width:20px; height:20px; flex:none; margin-top:1px} /* Formularz w ramce (sekcja kontaktowa) */ .swp-form-box{ background:var(--biel); border:1px solid var(--separator); border-radius:var(--r-karta); padding:40px; } @media (max-width:600px){ .swp-form-box{padding:26px 20px} } /* ----------------------------------------------------------------------------- 09 DEKORACJE Cztery gesty z brandbooka: blok akcentowy, siatka punktow, gradient, -------------------------------------------------------------------------- */ .swp-punkty{ background-image:radial-gradient(circle, var(--mgla) 1.2px, transparent 1.2px); background-size:20px 20px; } .swp-gradient{background:linear-gradient(135deg,#5D5FAC 0%,#6A408D 100%); color:var(--biel)} .swp-gradient h1,.swp-gradient h2,.swp-gradient h3,.swp-gradient h4{color:#fff} .swp-kod{ font-family:var(--sans); font-weight:700; color:var(--mgla); font-size:64px; line-height:1; user-select:none; } /* ----------------------------------------------------------------------------- 10 NAGLOWEK -------------------------------------------------------------------------- */ .swp-naglowek{ position:sticky; top:0; z-index:900; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--separator); } .swp-naglowek__in{ height:var(--naglowek-h); display:flex; align-items:center; gap:32px; } .swp-logo{flex:none; display:block; line-height:0} .swp-logo img{height:44px; width:auto} @media (max-width:900px){ .swp-logo img{height:36px} } /* Wrapper