/* ========================================================================== Motyw Nestero — zwykły CSS (bez Tailwinda/SCSS). Wszystko scope'owane pod `.nestero` (klasa na ), by style NIE wyciekały do panelu/edytora. Fonty self-host (Sora) leżą obok tego pliku w fonts/. System: jedna skala typografii (--fs-*) i jedna skala odstępów (--space-*) — używane wszędzie, dla spójności rozmiarów i rytmu. WCAG AA: tekst ≥16px, interlinia ≥1.5, cele dotykowe ≥24px, widoczny :focus-visible, kontrast. ========================================================================== */ /* --- Self-host Sora (nagłówki). ZERO requestu do Google Fonts. ---------- */ @font-face { font-family: "Sora"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Sora-Regular.woff2") format("woff2"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Sora-SemiBold.woff2") format("woff2"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Sora-Bold.woff2") format("woff2"); } /* --- Tokeny motywu ------------------------------------------------------- */ .nestero { /* Paleta */ --deep-twilight: #03045e; --bright-teal: #0077b6; --turquoise-surf: #00b4d8; --frosted-blue: #90e0ef; --light-cyan: #caf0f8; /* Semantyka tekstu/teł (domyślnie sekcja jasna -> ciemny tekst) */ --bg: #ffffff; --ink: var(--deep-twilight); --ink-soft: #3a3d80; --border: rgba(3, 4, 94, 0.12); /* linie/obwódki na jasnym tle */ --border-on-dark: rgba(144, 224, 239, 0.18); --accent: #c1121f; /* czerwień akcentu (jasne tła; AA) */ /* Fonty: nagłówki = Sora (self-host), tekst = stack systemowy */ --font-heading: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; /* Skala typografii — KAŻDY rozmiar płynny (clamp: min, preferowany vw, max). Tekst ≥16px (WCAG), etykiety/meta z subtelnym wzrostem, nagłówki z większym. */ --fs-eyebrow: clamp( 0.75rem, 0.15vw + 0.72rem, 0.8rem ); /* etykiety UPPERCASE */ --fs-xs: clamp(0.78rem, 0.15vw + 0.74rem, 0.8125rem); /* plakietki */ --fs-sm: clamp(0.85rem, 0.2vw + 0.8rem, 0.9rem); /* meta / podpisy */ --fs-base: clamp(1rem, 0.3vw + 0.95rem, 1.125rem); /* tekst (≥16px) */ --fs-lead: clamp(1.125rem, 0.6vw + 1rem, 1.3rem); /* lead / cytat */ --fs-h4: clamp(1.15rem, 0.5vw + 1rem, 1.35rem); /* logo, marka, autor */ --fs-h3: clamp(1.2rem, 0.6vw + 0.9rem, 1.5rem); /* podnagłówki */ --fs-h2: clamp(1.75rem, 2.5vw + 0.6rem, 2.6rem); /* nagłówki sekcji */ --fs-h1: clamp(2rem, 3.5vw + 0.5rem, 3.1rem); /* tytuły stron/wpisów */ --fs-display: clamp(2.4rem, 4.5vw + 1rem, 4.25rem); /* hero */ --fs-stat: clamp(2.5rem, 4vw + 1rem, 3.5rem); /* liczby statystyk */ /* Interlinia */ --lh-tight: 1.15; /* duże nagłówki */ --lh-snug: 1.3; /* etykiety / krótkie */ --lh-base: 1.6; /* tekst (WCAG ≥1.5) */ /* Skala odstępów (rytm) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-section: clamp(3.5rem, 9vh, 6rem); /* pion sekcji pełnoekranowej */ --space-block: clamp(2rem, 4vw, 3rem); /* nagłówek -> treść/siatka */ --gap: clamp(1rem, 2vw, 2rem); /* odstęp w siatkach */ --pad-card: clamp(1.25rem, 2vw, 1.75rem); /* wnętrze kart */ /* Kształty */ --container: 1180px; --radius: 14px; --radius-sm: 8px; --radius-pill: 999px; --shadow: 0 18px 40px rgba(3, 4, 94, 0.12); --shadow-card: 0 8px 24px rgba(3, 4, 94, 0.08); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--ink); background: var(--bg); margin: 0; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .nestero *, .nestero *::before, .nestero *::after { box-sizing: border-box; } .nestero img { max-width: 100%; height: auto; display: block; } .nestero h1, .nestero h2, .nestero h3 { font-family: var(--font-heading); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 0; } .nestero p { margin: 0; } /* Baseline koloru linków — :where() zeruje specyficzność, by reguły komponentów (.nestero-btn, nawigacja, stopka itp.) zawsze wygrywały kolorem tekstu. Bez tego .nestero a (0,1,1) nadpisywało .nestero-btn (0,1,0) -> zły kontrast. */ .nestero :where(a) { color: inherit; } /* Akcent (np. fragment nagłówka na czerwono): …. Kolor dobiera się do tła sekcji (--accent: ciemny czerwony na jasnym, koral na ciemnym). */ .nestero-accent { color: var(--accent); } .nestero-accent-dark { color: var(--accent); } /* Płynne przewijanie (kotwice CTA: #uslugi, #kontakt, #main). Ustawione na korzeniu przewijania i ograniczone do stron motywu. Wyłączane przy prefers-reduced-motion (sekcja na końcu pliku). */ html:has(body.nestero) { scroll-behavior: smooth; } .nestero-section[id], .nestero-main { scroll-margin-top: var(--space-5); } /* Wspólny styl etykiet UPPERCASE (spójny rozmiar/krój/odstęp liter) */ .nestero-eyebrow, .nestero-footer__coltitle, .nestero-widget__title, .nestero-contact__label, .nestero-single__sources-title, .nestero-authorbox__eyebrow { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-eyebrow); line-height: var(--lh-snug); letter-spacing: 0.12em; text-transform: uppercase; } /* --- Dostępność: skip-link + widoczny focus ----------------------------- */ .nestero-skiplink { position: absolute; left: -9999px; top: 0; z-index: 100; padding: var(--space-3) var(--space-5); background: var(--turquoise-surf); color: var(--deep-twilight); font-weight: 600; border-radius: 0 0 var(--radius-sm) 0; } .nestero-skiplink:focus { left: 0; } /* Ring oparty na currentColor -> zawsze kontrastuje z tłem swojej sekcji. */ .nestero :focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 4px; } /* --- Kontener wyśrodkowany ---------------------------------------------- */ .nestero-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); } /* --- Sekcja pełnej szerokości. Wysokość = tyle, ile potrzebuje treść. Pełną wysokość ekranu (70svh) ma TYLKO hero (niżej). ------------------ */ .nestero-section { width: 100%; padding-block: var(--space-section); background: var(--bg); color: var(--ink); } .nestero-section__heading { font-size: var(--fs-h2); font-weight: 700; max-width: 22ch; } .nestero-section__intro { font-size: var(--fs-lead); line-height: var(--lh-base); max-width: 60ch; margin-top: var(--space-4); color: var(--ink-soft); } /* Warianty tła sekcji — dobór tekstu pod WCAG AA. */ .nestero-hero, .nestero-stats, .nestero-contact { --bg: var(--deep-twilight); --ink: var(--light-cyan); --ink-soft: #bfe7f5; --accent: #ff6b6b; /* czerwień na ciemnym tle (koralowa; AA) */ background: var(--bg); color: var(--ink); } .nestero-services, .nestero-faq { --bg: var(--light-cyan); --ink: var(--deep-twilight); --ink-soft: #3a3d80; background: var(--bg); color: var(--ink); } .nestero-process { --bg: #ffffff; --ink: var(--deep-twilight); --ink-soft: #3a3d80; background: var(--bg); color: var(--ink); } .nestero-testimonials { --bg: var(--frosted-blue); --ink: var(--deep-twilight); --ink-soft: #2a2d6b; background: var(--bg); color: var(--ink); } /* --- Przyciski / CTA ----------------------------------------------------- */ .nestero-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 2.75rem; /* ≥44px cel dotykowy */ padding: var(--space-3) var(--space-6); font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-base); line-height: var(--lh-snug); text-decoration: none; border-radius: var(--radius-pill); border: 2px solid transparent; background: var(--turquoise-surf); color: var(--deep-twilight); /* 7.2:1 na turkusie */ transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease; } .nestero-btn:hover { background: var(--frosted-blue); transform: translateY(-2px); box-shadow: var(--shadow); } .nestero-btn--ghost { background: transparent; border-color: currentColor; color: inherit; } .nestero-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); box-shadow: none; } .nestero-eyebrow { margin: 0 0 var(--space-3); letter-spacing: 0.16em; color: var(--turquoise-surf); } /* --- Header / nawigacja -------------------------------------------------- */ .nestero-header { position: relative; background: var(--deep-twilight); color: var(--light-cyan); --accent: #ff6b6b; border-bottom: 1px solid var(--border-on-dark); } /* Przycisk hamburgera — ukryty na desktopie, widoczny w RWD (niżej). */ .nestero-navtoggle { display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; /* 44px cel dotykowy */ border: 1px solid var(--border-on-dark); border-radius: var(--radius-sm); background: transparent; color: var(--light-cyan); cursor: pointer; } .nestero-navtoggle__bars, .nestero-navtoggle__bars::before, .nestero-navtoggle__bars::after { content: ""; display: block; width: 1.25rem; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.18s ease, top 0.18s ease, background-color 0.18s ease; } .nestero-navtoggle__bars { position: relative; } .nestero-navtoggle__bars::before, .nestero-navtoggle__bars::after { position: absolute; left: 0; } .nestero-navtoggle__bars::before { top: -6px; } .nestero-navtoggle__bars::after { top: 6px; } .nestero-navtoggle[aria-expanded="true"] .nestero-navtoggle__bars { background: transparent; } .nestero-navtoggle[aria-expanded="true"] .nestero-navtoggle__bars::before { top: 0; transform: rotate(45deg); } .nestero-navtoggle[aria-expanded="true"] .nestero-navtoggle__bars::after { top: 0; transform: rotate(-45deg); } .nestero-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-4); flex-wrap: wrap; } .nestero-logo { text-decoration: none; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h4); color: var(--light-cyan); } .nestero-logo__img { height: 40px; width: auto; } .nestero-nav { display: flex; align-items: center; gap: clamp(var(--space-3), 2vw, var(--space-5)); flex-wrap: wrap; } .nestero-nav__link { text-decoration: none; color: var(--light-cyan); font-weight: 500; padding: var(--space-2) 0; /* cel dotykowy w pionie */ border-bottom: 2px solid transparent; transition: border-color 0.18s ease, color 0.18s ease; } .nestero-nav__link:hover { border-color: var(--turquoise-surf); } /* Menu rozwijane bez JS (details/summary) */ .nestero-menu, .nestero-submenu { position: relative; } .nestero-menu__summary, .nestero-submenu__summary { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; cursor: pointer; list-style: none; color: inherit; font-weight: 500; } .nestero-menu__summary::-webkit-details-marker, .nestero-submenu__summary::-webkit-details-marker { display: none; } /* Klikalna etykieta pozycji nadrzędnej (gdy ma URL). Karetka obok przełącza panel. */ .nestero-menu__summary > a, .nestero-submenu__summary > a { color: inherit; font-weight: inherit; text-decoration: none; } .nestero-menu__summary > a:hover, .nestero-submenu__summary > a:hover { text-decoration: underline; } .nestero-caret { width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.18s ease; } .nestero-menu[open] > .nestero-menu__summary .nestero-caret, .nestero-submenu[open] > .nestero-submenu__summary .nestero-caret { transform: rotate(-135deg) translateY(2px); } .nestero-menu__panel, .nestero-submenu__panel { position: absolute; top: 100%; left: 0; min-width: 14rem; margin-top: var(--space-2); padding: var(--space-2); background: #ffffff; color: var(--deep-twilight); border-radius: var(--radius-sm); box-shadow: var(--shadow); z-index: 30; } /* Flyout najwyższego poziomu: ukryty domyślnie; pokazywany na [open] (tap/klik, też mobile) ORAZ na hover/focus na desktopie (reguły w @media min-width niżej). margin-top:0 = ciągły obszar hover bez „martwej szczeliny" między summary a panelem. */ .nestero-menu > .nestero-menu__panel { display: none; margin-top: 0; } .nestero-menu[open] > .nestero-menu__panel { display: block; } .nestero-submenu__panel { position: static; box-shadow: none; margin: 0; padding: 0 0 0 var(--space-3); } .nestero-submenu__link, .nestero-submenu__summary { display: block; padding: var(--space-2) var(--space-3); text-decoration: none; border-radius: 6px; color: var(--deep-twilight); } .nestero-submenu__link:hover { background: var(--light-cyan); } /* Desktop: dropdown na HOVER/focus z animacją (fade + slide-down). Animacja display:none<->block przez @starting-style + transition allow-discrete (entry i exit). Starsze przeglądarki: pokaz natychmiastowy (graceful). */ @media (min-width: 821px) { /* stan ukryty (punkt startowy/końcowy animacji) */ .nestero-menu > .nestero-menu__panel { opacity: 0; transform: translateY(-8px); transition: opacity 0.18s ease, transform 0.18s ease, display 0.18s allow-discrete; } /* widoczny: [open] (JS ustawia na hover / klik / Enter) + fallback hover/focus */ .nestero-menu[open] > .nestero-menu__panel, .nestero-menu:hover > .nestero-menu__panel, .nestero-menu:focus-within > .nestero-menu__panel { display: block; opacity: 1; transform: translateY(0); } /* punkt startowy animacji wejścia (gdy panel pojawia się w drzewie) */ @starting-style { .nestero-menu[open] > .nestero-menu__panel { opacity: 0; transform: translateY(-8px); } } /* obrót karetu */ .nestero-menu[open] > .nestero-menu__summary .nestero-caret, .nestero-menu:hover > .nestero-menu__summary .nestero-caret, .nestero-menu:focus-within > .nestero-menu__summary .nestero-caret { transform: rotate(-135deg) translateY(2px); } } /* --- Hero (jedyna sekcja o pełnej wysokości ekranu) ---------------------- */ .nestero-hero { position: relative; overflow: hidden; text-align: left; min-height: 60svh; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(160deg, #03045e 0%, #023e8a 100%); } .nestero-hero__bg { position: absolute; inset: 0; } .nestero-hero__img, .nestero-hero__bg picture { width: 100%; height: 100%; object-fit: cover; } .nestero-hero__overlay { position: absolute; inset: 0; background: linear-gradient( 160deg, rgba(3, 4, 94, 0.82), rgba(3, 4, 94, 0.55) ); } .nestero-hero__inner { position: relative; max-width: 60ch; } /* Układ split: tekst z lewej, grafika z prawej (desktop); na mobile stack. max-width = szerokość kontenera (nie „none"), żeby hero trzymał się kontenera. */ .nestero-hero--split .nestero-hero__inner { max-width: var(--container); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .nestero-hero__content { max-width: 60ch; } .nestero-hero__media { justify-self: end; width: 100%; } .nestero-hero__media :is(img, picture) { display: block; width: 100%; height: auto; border-radius: var(--radius); } @media (max-width: 820px) { /* Grafika hero ukryta na małych ekranach (<820px); zostaje sam tekst. */ .nestero-hero__media { display: none; } .nestero-hero--split .nestero-hero__inner { grid-template-columns: 1fr; } } .nestero-hero__heading { font-size: var(--fs-display); font-weight: 700; } .nestero-hero__sub { font-size: var(--fs-lead); line-height: var(--lh-base); margin-top: var(--space-5); color: var(--light-cyan); max-width: 52ch; } .nestero-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); } /* --- Usługi (siatka kart) ------------------------------------------------ */ .nestero-services__grid { list-style: none; margin: var(--space-block) 0 0; padding: 0; display: grid; gap: var(--gap); /* 5 usług w 2 wierszach: 2 karty u góry, 3 u dołu. Siatka 6-kolumnowa — pierwsze 2 karty zajmują po 3 kolumny (2-up, szersze), kolejne po 2 (3-up). Kolejność pozycji decyduje o wierszu: 1–2 = górny, 3–5 = dolny. */ grid-template-columns: repeat(6, minmax(0, 1fr)); } .nestero-services__grid > li { grid-column: span 3; } /* Gdy usług jest dokładnie 6 (np. z Hostingiem): równa siatka 2×3 na desktopie. */ @media (min-width: 881px) { .nestero-services__grid:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nestero-services__grid:has(> li:nth-child(6):last-child) > li:nth-child(-n + 2), .nestero-services__grid:has(> li:nth-child(6):last-child) > li:nth-child(n + 3) { grid-column: auto; } } /* Tablet: 2 równe kolumny (karty nie ściskają się w 3-up). */ @media (max-width: 880px) { .nestero-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nestero-services__grid > li:nth-child(-n + 2), .nestero-services__grid > li:nth-child(n + 3) { grid-column: auto; } } @media (max-width: 560px) { .nestero-services__grid { grid-template-columns: 1fr; } } .nestero-card { background: #ffffff; border-radius: var(--radius); box-shadow: var(--shadow-card); transition: transform 0.18s ease, box-shadow 0.18s ease; } .nestero-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .nestero-card__inner { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; padding: var(--pad-card); text-decoration: none; color: var(--deep-twilight); } .nestero-card__header { display: flex; align-items: center; gap: var(--space-3); } .nestero-card__icon { width: 56px; height: 56px; flex: 0 0 auto; display: inline-flex; } .nestero-card__icon-img { width: 56px; height: 56px; object-fit: contain; } .nestero-card__title { font-size: var(--fs-h3); font-weight: 600; } .nestero-card__desc { color: var(--ink-soft); } .nestero-card__cta { margin-top: auto; padding-top: var(--space-2); font-weight: 600; color: var(--bright-teal); } /* --- Proces (oś czasu: centralna oś, treść naprzemiennie L/P) ------------- */ .nestero-process__list { --step-size: 2.75rem; list-style: none; margin: var(--space-block) auto 0; padding: 0; max-width: 920px; } .nestero-process__step { position: relative; display: grid; grid-template-columns: 1fr var(--step-size) 1fr; /* [treść] [oś] [treść] */ column-gap: var(--space-5); align-items: start; } .nestero-process__step:not(:last-child) { padding-bottom: var(--space-6); } /* Pionowa kreskowana linia na środkowej osi (od dołu kółka do następnego). */ .nestero-process__step:not(:last-child)::before { content: ""; position: absolute; top: var(--step-size); bottom: 0; left: 50%; transform: translateX(-50%); border-left: 2px dashed var(--turquoise-surf); } .nestero-process__num { grid-column: 2; grid-row: 1; position: relative; z-index: 1; width: var(--step-size); height: var(--step-size); border-radius: var(--radius-pill); display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700; background: var(--bright-teal); color: #ffffff; } .nestero-process__body { grid-row: 1; padding-top: var(--space-2); } /* Naprzemiennie: nieparzyste po lewej (tekst do osi), parzyste po prawej. */ .nestero-process__step:nth-child(odd) .nestero-process__body { grid-column: 1; text-align: right; } .nestero-process__step:nth-child(even) .nestero-process__body { grid-column: 3; text-align: left; } .nestero-process__title { font-size: var(--fs-h3); font-weight: 600; margin-bottom: var(--space-1); } .nestero-process__desc { color: var(--ink-soft); } /* Mobile: zwiń oś do lewej krawędzi, cała treść po prawej (czytelne na wąskim). */ @media (max-width: 720px) { .nestero-process__list { max-width: 760px; } .nestero-process__step { grid-template-columns: var(--step-size) 1fr; column-gap: var(--space-4); } .nestero-process__num { grid-column: 1; } .nestero-process__step:nth-child(odd) .nestero-process__body, .nestero-process__step:nth-child(even) .nestero-process__body { grid-column: 2; text-align: left; } .nestero-process__step:not(:last-child)::before { left: calc(var(--step-size) / 2); } } /* --- Statystyki ---------------------------------------------------------- */ .nestero-stats__grid { margin: var(--space-block) 0 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); } .nestero-stats__item { text-align: center; } .nestero-stats__value { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-stat); color: var(--turquoise-surf); line-height: 1; } .nestero-stats__label { margin: 0; margin-top: var(--space-2); color: var(--light-cyan); } /* Wariant kompaktowy: wąski jasny pasek liczb (np. zaraz pod ciemnym hero). */ .nestero-stats--compact { --bg: #ffffff; --ink: var(--deep-twilight); --ink-soft: #3a3d80; padding-block: var(--space-6); border-bottom: 1px solid var(--border); } .nestero-stats--compact .nestero-stats__value { color: var(--bright-teal); font-size: var(--fs-h2); } .nestero-stats--compact .nestero-stats__label { color: var(--ink-soft); font-size: var(--fs-sm); text-wrap: balance; /* przy łamaniu: dwie równe linie zamiast sieroty */ } .nestero-stats--compact .nestero-stats__grid:first-child { margin-top: 0; } /* --- Wybór technologii (karty; wyróżniona = polecana) --------------------- */ .nestero-tech { --bg: var(--light-cyan); --ink: var(--deep-twilight); --ink-soft: #3a3d80; background: var(--bg); color: var(--ink); } .nestero-tech__grid { list-style: none; margin: var(--space-block) 0 0; padding: var(--space-3) 0 0; /* miejsce na uniesioną kartę + badge */ display: grid; gap: var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } .nestero-tech__card { position: relative; display: flex; } /* Wyróżniona karta = czytelny sygnał „to polecamy": lekkie tło, mocniejszy cień, na desktopie uniesienie nad sąsiadami (wzorzec tabel cenowych). */ .nestero-tech__card--featured { border: 2px solid var(--bright-teal); background: linear-gradient( 180deg, rgba(0, 180, 216, 0.1), rgba(255, 255, 255, 0) 180px ), #ffffff; box-shadow: 0 22px 48px rgba(0, 119, 182, 0.22); } @media (min-width: 981px) { .nestero-tech__card--featured { transform: translateY(-12px); } .nestero-tech__card--featured:hover { transform: translateY(-18px); } } /* Wypełniona ikona tylko na karcie wyróżnionej — od razu przyciąga wzrok. */ .nestero-tech__card--featured .nestero-card__icon, .nestero-tech__card--featured:hover .nestero-card__icon { background: var(--bright-teal); color: #ffffff; } .nestero-tech__badge { position: absolute; top: calc(-1 * var(--space-3)); left: 50%; transform: translateX(-50%); background: var(--bright-teal); color: #ffffff; /* 4.6:1 na bright-teal (AA dla 600) */ box-shadow: var(--shadow-card); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; } .nestero-tech__badge:hover { background: var(--bright-teal); } .nestero-tech__audience { color: var(--ink-soft); } .nestero-tech__audience-label { display: block; margin-bottom: var(--space-1); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bright-teal); } /* Separator: oddziela „dla kogo" od listy zalet — czytelniejsza struktura. */ .nestero-tech .nestero-card__features { padding-top: var(--space-4); border-top: 1px solid var(--border); } /* „Realizacja od…" jako chip kotwiczony do dołu — wspólna linia CTA we wszystkich kartach niezależnie od liczby zalet. */ .nestero-tech__time { margin-top: auto; width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); background: rgba(0, 119, 182, 0.09); color: #00618f; /* ciemniejszy turkus — kontrast AA (≥4.5) na jasnym chipie */ font-weight: 600; font-size: var(--fs-sm); } .nestero-tech__time-icon { width: 18px; height: 18px; flex: 0 0 auto; } .nestero-tech__cta { margin-top: 0; } @media (max-width: 980px) { .nestero-tech__grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } } /* --- Portfolio (realizacje) ----------------------------------------------- */ .nestero-portfolio { --bg: var(--frosted-blue); --ink: var(--deep-twilight); --ink-soft: #2a2d6b; background: var(--bg); color: var(--ink); } .nestero-portfolio__grid { list-style: none; margin: var(--space-block) 0 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); } .nestero-portfolio__inner { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--deep-twilight); } .nestero-portfolio__media { aspect-ratio: 16 / 10; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--deep-twilight), var(--bright-teal)); } .nestero-portfolio__img { width: 100%; height: 100%; object-fit: cover; } .nestero-portfolio__placeholder-icon { width: 64px; height: 64px; color: var(--light-cyan); opacity: 0.8; } .nestero-portfolio__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--pad-card); } .nestero-portfolio__result { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; color: var(--bright-teal); } .nestero-portfolio__result-icon { width: 20px; height: 20px; flex: 0 0 auto; } @media (max-width: 720px) { .nestero-portfolio__grid { grid-template-columns: 1fr; } } /* Zdjęcie jako przycisk otwierający lightbox (reset stylów