/* WOKO — homepage-only styles. Loaded after styles.css and only on index.html — overrides the shared :root tokens (so the cookie-consent banner from consent.js/styles.css automatically picks up this light/orange theme here) without touching styles.css itself, which /privacy-policy, /delete-account and /reset-password still depend on as-is. */ :root { --bg: #fffaf5; --card: #ffffff; --card-alt: #fff6ec; --accent: #ff6b00; --accent-dark: #e35f00; --text: #201a14; --text-sec: #665c53; --text-muted: #9b8f84; --border: #ece0d2; } * { box-sizing: border-box; } body { background: var(--bg); color: var(--text); } /* Audience toggle — shows/hides .driver-only / .serwis-only content. Set on (not ) by the inline script in , so it's already correct before first paint — no flash of the wrong audience when arriving via ?dla=serwisu from an ad. */ html[data-audience="driver"] .serwis-only { display: none; } html[data-audience="serwis"] .driver-only { display: none; } h1, h2, h3 { text-wrap: balance; } /* ---- Hero: full-bleed photo, header + copy overlaid on top ---- */ .hero { position: relative; min-height: 92vh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; color: #fff8f0; } .hero-bg { position: absolute; inset: 0; background-size: cover; } /* Two separate free-license placeholders (Unsplash/Pexels, free commercial use, no attribution required), one per audience, swapped by the same html[data-audience] attribute the copy already uses — plain CSS, no JS and no crossfade: it's the same instant swap the text/CTA already do. Driver: a highway truck at dusk, chosen for the empty sky/road space the overlay text sits on. Serwis: a close-up of hands working under the hood — no logos/plates/faces, verified visually (not just by the platform's general license) since several other candidates on the same themes turned out to carry a real business's branding or another product's logo in-frame. Swap either for real branded photo/video once Vova's rebrand lands; nothing else here needs to change. */ html[data-audience="driver"] .hero-bg { background-image: url('/assets/hero-photo.jpg'); background-position: center 45%; } html[data-audience="serwis"] .hero-bg { background-image: url('/assets/hero-photo-serwis.jpg'); background-position: center center; } /* Dark at the very top (keeps the header legible over the sky) and dark at the bottom (keeps the headline/CTA legible over the road) — the middle stays clear so the photo still reads as a photo, not a solid tint. Swap hero-bg's background-image for a real photo/video later; this overlay stays exactly as-is regardless of what's underneath it. */ .hero-scrim { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(10, 6, 4, 0.6) 0%, rgba(10, 6, 4, 0.15) 24%, rgba(10, 6, 4, 0.1) 48%, rgba(10, 6, 4, 0.82) 100% ); } header.site-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; max-width: 1160px; margin: 0 auto; width: 100%; padding: 28px 24px 0; } .brand { font-size: 19px; font-weight: 800; color: #fff; text-decoration: none; letter-spacing: 0.5px; } .brand span { color: var(--accent); } .audience-toggle { display: flex; gap: 2px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(6px); border-radius: 999px; padding: 4px; } .audience-tab { border: none; background: transparent; color: rgba(255, 255, 255, 0.82); font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 999px; cursor: pointer; font-family: inherit; transition: background-color 0.15s ease, color 0.15s ease; } .audience-tab:not([aria-selected="true"]):hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .audience-tab[aria-selected="true"] { background: #fff; color: var(--text); } .audience-tab:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .hero-content { position: relative; z-index: 2; max-width: 1160px; margin: 0 auto; width: 100%; padding: 0 24px 88px; } .hero-content-inner { max-width: 620px; } .hero h1 { font-size: clamp(34px, 5vw, 58px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.08; margin: 0 0 18px; } .hero .lead { font-size: 18px; color: rgba(255, 248, 240, 0.86); line-height: 1.6; margin: 0 0 32px; max-width: 46ch; } /* One orchestrated entrance for the hero copy on load — headline, subhead, then CTA, each a beat apart. Selected by element/class rather than nth-child so it isn't thrown off by the hidden driver/serwis twin sharing the same parent (a display:none sibling still counts toward nth-child, a class doesn't). */ @media (prefers-reduced-motion: no-preference) { .hero h1, .hero .lead, .hero-content-inner > div { animation: heroFadeUp 0.7s ease both; } .hero h1 { animation-delay: 0.05s; } .hero .lead { animation-delay: 0.18s; } .hero-content-inner > div { animation-delay: 0.3s; } } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .btn { display: inline-block; background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 15px 28px; font-size: 15px; font-weight: 700; letter-spacing: 0.1px; text-align: center; cursor: pointer; text-decoration: none; } .btn:hover { background: var(--accent-dark); } .btn-badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff8f0; border-radius: 10px; padding: 14px 22px; font-size: 14px; font-weight: 600; } /* ---- Below-the-fold sections: plain content, generous whitespace, no imagery ---- */ .section-wrap { max-width: 1160px; margin: 0 auto; padding: 104px 24px; } .section-wrap h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 10px; color: var(--text); } .section-sub { color: var(--text-sec); font-size: 16px; margin: 0 0 56px; max-width: 46ch; } /* Plain page background, not a colored card — the tinted --bg-soft fill used here before read as an odd beige panel dropped into an otherwise all-white page. A hairline top border is enough of a section boundary on its own, consistent with the border-only rhythm steps/tiles already use (no other section on the page uses a background fill either). */ .section-divider { border-top: 1px solid var(--border); } /* Steps — quiet numerals + a thin divider instead of boxed cards; reads closer to an editorial layout than a grid of app-icon-style tiles. A large, near-invisible ghost numeral behind each card (::before, from data-num) gives the row some graphic weight without adding icons or color — texture from typography alone. */ .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; } .step-card { position: relative; border-top: 1px solid var(--border); padding-top: 22px; transition: transform 0.2s ease; } .step-card:hover { transform: translateY(-3px); } .step-card::before { content: attr(data-num); position: absolute; z-index: -1; top: 14px; right: 0; font-size: 88px; font-weight: 800; line-height: 1; color: var(--text); opacity: 0.05; pointer-events: none; } .step-num { display: block; font-size: 15px; font-weight: 700; color: var(--accent); letter-spacing: 0.08em; margin-bottom: 14px; } .step-card h3 { font-size: 19px; font-weight: 700; margin: 0 0 8px; color: var(--text); } .step-card p { font-size: 15px; color: var(--text-sec); margin: 0; line-height: 1.65; max-width: 32ch; } /* Category / benefit list — same quiet, border-based rhythm as the steps above. */ .tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); } .tile-card { background: var(--bg); padding: 26px 22px; display: flex; align-items: center; gap: 14px; transition: background-color 0.2s ease; } .tile-card:hover { background: var(--card-alt); } /* Single line-icon set (hand-drawn, Lucide-style stroke grammar) replaces the old system emoji here — emoji render inconsistently across OS/browsers and looked out of place next to the monochrome + point-accent treatment everywhere else on the page (hero, "Jak to działa"'s numerals). Same accent-orange touch as those numerals, no background badge — flat icon only. */ .tile-icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent); } .tile-card span.tile-label { font-size: 15px; font-weight: 600; color: var(--text); } .tile-card p { font-size: 14.5px; color: var(--text-sec); margin: 0; line-height: 1.55; } /* Scroll-reveal — .reveal starts hidden/offset, home.js's IntersectionObserver adds .is-visible once each element scrolls into view (each fires once, then stops observing). Staggered per column via nth-child so a row settles in left-to-right rather than all at once. No-JS and reduced-motion fallback: .reveal has no *initial* transform/opacity of its own here — home.js is what applies the starting hidden state via .reveal-armed, so a page with JS disabled (or the prefers-reduced-motion branch in home.js) simply never hides the content at all. */ .reveal-armed { opacity: 0; transform: translateY(18px); } .reveal-armed.is-visible { opacity: 1; transform: translateY(0); transition: opacity 0.5s ease, transform 0.5s ease; } .steps-grid .step-card:nth-child(2).reveal-armed { transition-delay: 0.08s; } .steps-grid .step-card:nth-child(3).reveal-armed { transition-delay: 0.16s; } .tile-grid .tile-card:nth-child(2).reveal-armed { transition-delay: 0.06s; } .tile-grid .tile-card:nth-child(3).reveal-armed { transition-delay: 0.12s; } .tile-grid .tile-card:nth-child(4).reveal-armed { transition-delay: 0.06s; } .tile-grid .tile-card:nth-child(5).reveal-armed { transition-delay: 0.12s; } .tile-grid .tile-card:nth-child(6).reveal-armed { transition-delay: 0.18s; } /* ---- Footer ---- */ footer.site-footer { max-width: 1160px; margin: 0 auto; padding: 32px 24px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); text-align: center; } footer.site-footer a { color: var(--text-muted); } @media (max-width: 780px) { .hero { min-height: 82vh; } .steps-grid { grid-template-columns: 1fr; gap: 32px; } .tile-grid { grid-template-columns: 1fr; } .section-wrap { padding: 72px 20px; } header.site-header { padding: 20px 16px 0; } .hero-content { padding: 0 20px 56px; } .step-card::before { font-size: 64px; } } @media (prefers-reduced-motion: reduce) { .step-card:hover { transform: none; } }