/* ============================================================================= site.css — warstwa charakteru BeDriver Wrocław Motyw: JASNY · ŚWIEŻA ZIELEŃ #12B76A · stacked-media hero Fonty: Sora (heading) + Inter (body) via tokens.css Archetyp: stacked-media — warstwowe bloki (zdjęcie + karty nałożone/przylegające) Ton: młodzieżowy, energiczny, konkretny — NIE korpo, NIE rodzinny ANTI-TWIN: NIE baby-blue offset-card (Kurpińscy), NIE pomarańcz centered-bold (Fabisiak), NIE ciemny navy diagonal-split (Pawłat). Paleta: primary #12B76A (CTA/akcenty/liczby), accent #0B3B2E, tło białe, tekst ciemny (#14231C/#2B3630/#566159). Zieleń TYLKO na akcentach — nie akapity. ============================================================================= */ :root { --shell-max: 1140px; } /* ---- Globalne poprawki kontrastu i overflow (L-027/028/030) --------------- */ h1, h2, h3 { overflow-wrap: break-word; } p { overflow-wrap: break-word; } html, body { overflow-x: hidden; } .container { max-width: min(1140px, 100%); overflow-wrap: break-word; } .btn { max-width: 100%; overflow-wrap: break-word; white-space: normal; text-align: center; } @media (max-width: 480px) { .btn-lg { padding-inline: var(--space-5, 24px); font-size: var(--fs-base, 16px); min-height: 52px; } } /* ---- Fonty Google --------------------------------------------------------- */ /* Sora + Inter — ładowane w przez link preconnect */ /* ---- Eyebrow — zielony akcent -------------------------------------------- */ .eyebrow { color: var(--color-primary); font-weight: 600; } /* ---- Przyciski (nadpisanie bazy na zieloną paletę) ----------------------- */ .btn-primary { background: var(--color-primary); color: var(--text-onPrimary); border-color: var(--color-primary); } .btn-primary:hover { background: var(--color-primary600); border-color: var(--color-primary600); } .btn-lg { min-height: 56px; padding-inline: var(--space-7, 48px); font-size: var(--fs-lg, 20px); } .btn-ghost { border-color: var(--color-primary); color: var(--color-primary); } .btn-ghost:hover { background: var(--color-primary100); } .btn-ghost--light { border-color: rgba(255,255,255,.72); color: #FFFFFF; } .btn-ghost--light:hover { background: rgba(255,255,255,.14); } /* ---- Brand lockup w nagłówku --------------------------------------------- */ .brand { display: inline-flex; align-items: center; gap: var(--space-3, 12px); text-decoration: none; } .brand-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm, 6px); background: var(--color-primary); color: var(--text-onPrimary); font-family: var(--font-heading); font-weight: 800; font-size: 18px; line-height: 1; } .brand-text { display: inline-flex; flex-direction: column; font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-lg, 20px); line-height: 1; color: var(--text-strong); } .brand-tagline { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-sm, 13px); color: var(--text-muted); margin-top: 3px; text-transform: none; letter-spacing: .01em; } .header-cta { min-height: 40px; } /* ============================================================================= HERO — stacked-media Układ: lewa kolumna = stack kart treści (eyebrow + H1 + lead + CTA + trust); prawa = zdjęcie auta + badge „4,9★" nałożony w narożniku. Na mobile: kolumny → wiersze (zdjęcie pod kartami). ============================================================================= */ .hero-stacked { background: radial-gradient(ellipse 80% 60% at 95% 0%, color-mix(in srgb, var(--color-primary) 14%, transparent) 0%, transparent 70%), linear-gradient(170deg, #FFFFFF 0%, var(--color-surface) 100%); padding-block: clamp(32px, 6vw, 72px); overflow: hidden; } .hero-stacked__grid { display: grid; gap: var(--space-6, 32px); align-items: center; } @media (min-width: 860px) { .hero-stacked__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8, 64px); } } /* Lewa kolumna — treść */ .hero-stacked__content { display: grid; gap: var(--space-4, 16px); align-content: start; } .hero-stacked__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2, 8px); font-size: var(--fs-sm, 13px); font-weight: 700; color: var(--color-primary); letter-spacing: .08em; text-transform: uppercase; } .hero-stacked__eyebrow::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); } .hero-stacked h1 { font-size: clamp(30px, 7vw, 56px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: var(--text-strong); } /* Słowo „Wrocław" jako zielony akcent */ .hero-stacked h1 .accent-word { color: var(--color-primary); } .hero-stacked .lead { font-size: clamp(16px, 2.2vw, 19px); color: var(--text-body); max-width: 48ch; overflow-wrap: break-word; word-break: break-word; } .hero-stacked .lead strong { color: var(--color-primary); } .hero-stacked__cta { margin-top: var(--space-2, 8px); } /* Trust row — gwiazdki + ocena */ .hero-stacked__trust { display: flex; align-items: center; gap: var(--space-3, 12px); flex-wrap: wrap; margin-top: var(--space-2, 8px); } .hero-stacked__stars { color: #F7A600; font-size: 20px; letter-spacing: 1px; } .hero-stacked__rating { font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-lg, 20px); color: var(--text-strong); } .hero-stacked__rating-sub { font-size: var(--fs-sm, 13px); color: var(--text-muted); } /* Prawa kolumna — media stack */ .hero-stacked__media { position: relative; margin: 0; display: grid; gap: var(--space-3, 12px); } /* Główny kadr — zdjęcie auta */ .hero-stacked__photo { border-radius: var(--radius-lg, 18px); overflow: hidden; box-shadow: 0 20px 60px rgba(11,59,46,.18); position: relative; } .hero-stacked__photo img { width: 100%; height: auto; display: block; object-fit: cover; } /* Badge „4,9★" nałożony w górnym-prawym narożniku */ .hero-stacked__badge { position: absolute; top: var(--space-4, 16px); right: var(--space-4, 16px); background: #FFFFFF; border-radius: var(--radius-pill, 999px); padding: var(--space-2, 8px) var(--space-4, 16px); box-shadow: 0 4px 18px rgba(0,0,0,.14); display: flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-sm, 13px); color: var(--text-strong); white-space: nowrap; } .hero-stacked__badge-star { color: #F7A600; font-size: 16px; } /* Mini-karta benefit — stacked pod zdjęciem (app-like) */ .hero-stacked__mini-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3, 12px); } .hero-stacked__mini-card { background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-md, 10px); padding: var(--space-3, 12px) var(--space-4, 16px); display: grid; gap: 4px; box-shadow: var(--shadow-sm); } .hero-stacked__mini-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); } .hero-stacked__mini-val { font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-base, 16px); color: var(--color-primary); line-height: 1.2; } /* ============================================================================= PASEK LICZB (count-up) — ciemne tło (accent), cyfry = primary zielony ============================================================================= */ .stats-band { background: var(--color-accent); padding-block: var(--space-7, 48px); } .stats-band__grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5, 24px); grid-template-columns: repeat(2, 1fr); text-align: center; } @media (min-width: 768px) { .stats-band__grid { grid-template-columns: repeat(4, 1fr); } } .stat { display: grid; gap: var(--space-2, 8px); } .stat__num { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2rem, 5.5vw, 3.2rem); line-height: 1; color: var(--color-primary); } .stat__num-of { font-size: .52em; opacity: .7; color: #FFFFFF; } .stat__label { color: rgba(255,255,255,.78); font-size: var(--fs-sm, 13px); line-height: 1.4; max-width: 24ch; margin-inline: auto; } /* ============================================================================= DLACZEGO BEDRIVER — kafle korzyści (card-flow) ============================================================================= */ .feat-card { background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-lg, 18px); padding: var(--space-6, 32px); display: grid; gap: var(--space-3, 12px); align-content: start; border-top: 3px solid var(--color-primary); transition: transform var(--motion-dur) var(--motion-ease), box-shadow var(--motion-dur) var(--motion-ease); } .feat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .feat-card__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-md, 10px); background: var(--color-primary100); color: var(--color-primary); font-size: 24px; } .feat-card h3 { color: var(--text-strong); font-size: var(--fs-lg, 20px); } .feat-card p { color: var(--text-body); max-width: 42ch; } /* ============================================================================= KATEGORIE — karty kursów (card-flow z accent-top) ============================================================================= */ .categories { background: var(--color-surface); } .cat-card { background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-lg, 18px); padding: var(--space-6, 32px); display: grid; gap: var(--space-3, 12px); align-content: start; border-left: 4px solid var(--color-primary); transition: transform var(--motion-dur) var(--motion-ease), box-shadow var(--motion-dur) var(--motion-ease); } .cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .cat-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); flex-wrap: wrap; } .cat-card__tag { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-sm, 13px); padding: 4px 12px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--text-onPrimary); } .cat-card__price { font-size: var(--fs-sm, 13px); color: var(--text-muted); font-weight: 600; } .cat-card h3 { color: var(--text-strong); font-size: var(--fs-xl, 25px); } .cat-card p { color: var(--text-body); } .cat-card__link { margin-top: auto; font-weight: 700; color: var(--color-primary); font-size: var(--fs-sm, 13px); text-transform: uppercase; letter-spacing: .03em; } .cat-card__link:hover { text-decoration: underline; } .categories__note { margin-top: var(--space-6, 32px); color: var(--text-muted); font-size: var(--fs-sm, 13px); } .categories__note strong { color: var(--color-primary); } /* ============================================================================= JAK WYGLĄDA KURS — numerowane kroki ============================================================================= */ .howto { background: #FFFFFF; } .step-card { background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-lg, 18px); padding: var(--space-6, 32px); display: grid; gap: var(--space-3, 12px); align-content: start; position: relative; } .step-card__num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--text-onPrimary); font-family: var(--font-heading); font-weight: 800; font-size: 20px; } .step-card h3 { color: var(--text-strong); font-size: var(--fs-lg, 20px); } .step-card p { color: var(--text-body); } /* ============================================================================= AUTO BEDRIVER — sekcja z realnym zdjęciem ============================================================================= */ .car-feature { background: var(--color-surface); } .car-feature__grid { display: grid; gap: var(--space-7, 48px); align-items: center; } @media (min-width: 768px) { .car-feature__grid { grid-template-columns: 1fr 1fr; } } .car-feature__img { border-radius: var(--radius-lg, 18px); overflow: hidden; box-shadow: 0 12px 40px rgba(11,59,46,.12); } .car-feature__img img { width: 100%; height: auto; display: block; } .car-feature__text { display: grid; gap: var(--space-4, 16px); } .car-feature__text h2 { color: var(--text-strong); } .car-feature__text p { color: var(--text-body); } .car-feature__badge { display: inline-flex; align-items: center; gap: var(--space-2, 8px); background: var(--color-primary100); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 6px 16px; font-size: var(--fs-sm, 13px); font-weight: 700; color: var(--color-primary); } /* ============================================================================= NASZA ZDAWALNOŚĆ — zielone tło, jasny tekst ============================================================================= */ .results { background: var(--color-accent); background-image: linear-gradient(145deg, var(--color-accent) 0%, #0A3428 100%); color: #FFFFFF; } .results .eyebrow { color: var(--color-primary); } .results h2 { color: #FFFFFF; } .results__inner p { color: color-mix(in srgb, #FFFFFF 88%, var(--color-accent)); max-width: 58ch; } .results__inner p strong { color: #FFFFFF; } .results__facts { list-style: none; padding: 0; margin: var(--space-6, 32px) 0 0; display: grid; gap: var(--space-3, 12px); } .results__facts li { display: flex; align-items: center; gap: var(--space-3, 12px); color: #FFFFFF; font-weight: 500; } .results__mark { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: var(--radius-sm, 6px); background: rgba(255,255,255,.15); color: #FFFFFF; font-size: 16px; font-weight: 800; font-family: var(--font-heading); } /* ============================================================================= OPINIE — cytaty z gwiazdkami ============================================================================= */ .reviews { background: #FFFFFF; } .rev-card { background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-lg, 18px); padding: var(--space-6, 32px); display: grid; gap: var(--space-3, 12px); margin: 0; } .rev-card__stars { color: #F7A600; letter-spacing: 2px; font-size: var(--fs-lg, 20px); } .rev-card blockquote { margin: 0; color: var(--text-strong); font-size: var(--fs-base, 16px); line-height: 1.6; font-style: italic; } .rev-card figcaption { font-weight: 700; color: var(--color-primary); font-size: var(--fs-sm, 13px); text-transform: uppercase; letter-spacing: .03em; } .rev-card__placeholder { font-size: var(--fs-xs, 10px); color: var(--text-muted); background: var(--color-primary100); border-radius: 4px; padding: 2px 8px; display: inline-block; margin-top: 4px; } .reviews__more { margin-top: var(--space-6, 32px); } .reviews__more a { color: var(--color-primary); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: var(--fs-sm, 13px); } .reviews__more a:hover { text-decoration: underline; } /* ============================================================================= ZAPISZ SIĘ — zielony pas CTA ============================================================================= */ .signup { background: var(--color-accent); color: #FFFFFF; text-align: center; } .signup__inner { max-width: 680px; margin-inline: auto; display: grid; gap: var(--space-4, 16px); justify-items: center; } .signup h2 { color: #FFFFFF; } .signup__inner > p { color: rgba(255,255,255,.82); max-width: 52ch; } .signup__cta { justify-content: center; margin-top: var(--space-2, 8px); } .signup__nap { font-size: var(--fs-sm, 13px); color: rgba(255,255,255,.6); } /* ============================================================================= Sekcje wewnętrzne podstron (page-hero, prose, tabele) ============================================================================= */ .page-hero { background: linear-gradient(160deg, #FFFFFF 0%, var(--color-surface) 100%); padding-block: clamp(40px, 7vw, 88px); } .page-hero h1 { color: var(--text-strong); font-size: clamp(28px, 7vw, 49px); } .page-hero .eyebrow { color: var(--color-primary); } .page-hero .lead { color: var(--text-body); max-width: 58ch; overflow-wrap: break-word; word-break: break-word; } .prose p { color: var(--text-body); margin-bottom: var(--space-4, 16px); } .prose p strong { color: var(--color-primary); } .prose h2 { color: var(--text-strong); margin-bottom: var(--space-4, 16px); } .prose h3 { color: var(--text-strong); margin-bottom: var(--space-3, 12px); } .prose ul { color: var(--text-body); padding-left: var(--space-5, 24px); margin-bottom: var(--space-4, 16px); } .prose li { margin-bottom: var(--space-2, 8px); } /* Tabela cennika */ .price-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: var(--space-5, 24px); background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-lg, 18px); overflow: hidden; } .price-table th, .price-table td { text-align: left; padding: var(--space-4, 16px); border-bottom: 1px solid var(--color-border); overflow-wrap: break-word; } .price-table thead th { background: var(--color-primary); color: var(--text-onPrimary); text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-sm, 13px); } .price-table td:last-child, .price-table th:last-child { width: 44%; } .price-table td:last-child { font-weight: 700; color: var(--color-primary); } .price-table tbody tr:last-child td { border-bottom: 0; } .price-note { margin-top: var(--space-4, 16px); font-size: var(--fs-sm, 13px); color: var(--text-muted); } .price-note strong { color: var(--color-primary); } /* Co wpływa na cenę */ .price-factors { display: grid; gap: var(--space-3, 12px); margin-top: var(--space-5, 24px); } .price-factor-item { display: flex; gap: var(--space-3, 12px); align-items: flex-start; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-md, 10px); padding: var(--space-4, 16px); } .price-factor-item__icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-sm, 6px); background: var(--color-primary100); color: var(--color-primary); font-size: 16px; font-weight: 800; font-family: var(--font-heading); } .price-factor-item h3 { font-size: var(--fs-base, 16px); color: var(--text-strong); margin-bottom: 4px; } .price-factor-item p { font-size: var(--fs-sm, 13px); color: var(--text-muted); } /* Kontakt / NAP */ .contact-card { background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-lg, 18px); padding: var(--space-6, 32px); display: grid; gap: var(--space-2, 8px); overflow: hidden; max-width: 100%; min-width: 0; } .contact-card dt { font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: .03em; font-size: var(--fs-sm, 13px); margin-top: var(--space-3, 12px); overflow-wrap: break-word; } .contact-card dt:first-of-type { margin-top: 0; } .contact-card dd { margin: 0; color: var(--text-body); overflow-wrap: break-word; word-break: break-word; } .contact-card a { color: var(--color-primary); font-weight: 600; overflow-wrap: break-word; } .map-embed { border: 0; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg, 18px); margin-top: var(--space-5, 24px); display: block; } /* Formularz kontaktowy */ .contact-form { display: grid; gap: var(--space-4, 16px); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg, 18px); padding: var(--space-6, 32px); } .contact-form .rodo { font-size: var(--fs-sm, 13px); color: var(--text-muted); } .contact-form .rodo a { color: var(--color-primary); text-decoration: underline; } /* FAQ */ .faq__list { display: grid; gap: var(--space-4, 16px); } .faq-item { background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-lg, 18px); padding: var(--space-5, 24px) var(--space-6, 32px); } .faq-item__q { font-size: var(--fs-lg, 20px); color: var(--text-strong); margin-bottom: var(--space-3, 12px); } .faq-item p { color: var(--text-body); } .faq-item p a { color: var(--color-primary); font-weight: 600; text-decoration: underline; } /* Kontakt — układ dwukolumnowy */ .contact-grid { align-items: start; } .contact-grid h2 { color: var(--text-strong); margin-bottom: var(--space-4, 16px); } /* Opinie — full page grid */ .opinie-grid { display: grid; gap: var(--space-5, 24px); } @media (min-width: 768px) { .opinie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .opinie-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Realizacje / galeria */ .plate-grid { display: grid; gap: var(--space-4, 16px); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-5, 24px); } @media (min-width: 768px) { .plate-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .plate-card { display: grid; gap: var(--space-2, 8px); place-items: center; text-align: center; aspect-ratio: 4 / 3; border-radius: var(--radius-lg, 18px); padding: var(--space-5, 24px); background: var(--color-accent); background-image: linear-gradient(145deg, var(--color-accent) 0%, #0A3428 100%); color: #FFFFFF; } .plate-card__icon { font-size: 36px; font-weight: 800; color: var(--color-primary); } .plate-card p { color: #FFFFFF; font-size: var(--fs-sm, 13px); font-weight: 600; } /* O nas — Adam karta */ .team-adam { background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-lg, 18px); padding: var(--space-7, 48px); display: grid; gap: var(--space-5, 24px); } @media (min-width: 768px) { .team-adam { grid-template-columns: 260px 1fr; align-items: start; } } .team-adam__media { border-radius: var(--radius-lg, 18px); overflow: hidden; } .team-adam__media .media-frame { --media-ratio: 3/4; } .team-adam__text h2 { color: var(--text-strong); margin-bottom: var(--space-3, 12px); } .team-adam__text p { color: var(--text-body); } /* Stopka */ .site-footer .footer-nap p { color: var(--text-body); } .site-footer .footer-nap strong { color: var(--text-strong); } .site-footer .footer-nap a { color: var(--color-accent); font-weight: 600; } .footer-nav a { color: var(--text-muted); } .footer-nav a:hover { color: var(--color-primary); } /* Oferta hub — typograficzny indeks */ .oferta-hub__list { display: grid; gap: var(--space-5, 24px); margin-top: var(--space-6, 32px); } .oferta-hub__item { background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-lg, 18px); padding: var(--space-6, 32px); display: grid; gap: var(--space-3, 12px); border-left: 4px solid var(--color-primary); transition: transform var(--motion-dur) var(--motion-ease), box-shadow var(--motion-dur) var(--motion-ease); } .oferta-hub__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .oferta-hub__item h2 { color: var(--text-strong); font-size: var(--fs-xl, 25px); } .oferta-hub__item p { color: var(--text-body); } .oferta-hub__item a.btn { justify-self: start; } /* Podstrony usług — detale */ .service-detail__grid { display: grid; gap: var(--space-6, 32px); margin-top: var(--space-6, 32px); } @media (min-width: 768px) { .service-detail__grid { grid-template-columns: 3fr 2fr; align-items: start; } } .service-sidebar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg, 18px); padding: var(--space-6, 32px); display: grid; gap: var(--space-3, 12px); position: sticky; top: 80px; } .service-sidebar h3 { color: var(--text-strong); } .service-sidebar p { color: var(--text-body); font-size: var(--fs-sm, 13px); } /* Aggreate rating badge */ .rating-badge { display: inline-flex; align-items: center; gap: var(--space-2, 8px); background: var(--color-primary100); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 6px 16px; font-size: var(--fs-sm, 13px); font-weight: 700; color: var(--text-strong); } .rating-badge__stars { color: #F7A600; } .rating-badge__num { color: var(--color-primary); font-size: var(--fs-lg, 20px); }