/* ============================================================================= sprzetfirmowy.pl — landing page styles ============================================================================= Bazujemy na strukturze DomainAlert (Moje Domeny), ale paletą kolorystyczną trzymamy spójność z aplikacją: - Light mode default — tło białe, tekst gray-900, akcent blue-600 - Dark mode opcjonalny — przełączany przez `.dark` na (zapamiętuje wybór w localStorage, patrz script.js) Typografia: Inter (Google Fonts) + system fallback. Layout: sticky header, sections, pricing grid 5-kol, FAQ details, footer 3-col. Sekcje legal (regulamin / polityka prywatności) — kontener wąski 820px, typografia czytelnie sformatowana z TOC + warningi. ============================================================================= */ /* === Light mode (default) === */ :root { --bg: #ffffff; --bg-alt: #f9fafb; /* sekcja-alt — bardzo lekkie tło */ --panel: #ffffff; /* karty (feature, plan, footer-col) */ --panel-strong: #f3f4f6; /* hover / mocniejsze tło */ --text: #111827; /* gray-900 — główny tekst */ --muted: #4b5563; /* gray-600 — opisy, lead */ --muted2: #6b7280; /* gray-500 — meta, subtitles */ --border: #e5e7eb; /* gray-200 — granice kart */ --border-strong: #d1d5db; /* gray-300 — separator */ --shadow: 0 4px 24px rgba(15, 23, 42, 0.06); --shadow-strong: 0 14px 40px rgba(15, 23, 42, 0.10); --primary: #2563eb; /* blue-600 — ten sam co w aplikacji */ --primary-hover: #1d4ed8; /* blue-700 */ --primary-soft: #eff6ff; /* blue-50 */ --primary-text: #ffffff; --accent: #0ea5e9; /* sky-500 dla gradientów featured */ --success: #16a34a; --danger: #dc2626; --warning-bg: #fef3c7; /* amber-100 */ --warning-border: #fbbf24; /* amber-400 */ --warning-text: #92400e; /* amber-800 */ --radius: 14px; --radius-lg: 18px; } /* === Dark mode (opt-in via `.dark` class on ) === */ .dark { --bg: #0a0a0a; --bg-alt: #111827; /* gray-900 */ --panel: #111827; --panel-strong: #1f2937; /* gray-800 */ --text: #f3f4f6; /* gray-100 */ --muted: #9ca3af; /* gray-400 */ --muted2: #6b7280; /* gray-500 */ --border: #1f2937; /* gray-800 */ --border-strong: #374151; /* gray-700 */ --shadow: 0 4px 24px rgba(0, 0, 0, 0.5); --shadow-strong: 0 14px 40px rgba(0, 0, 0, 0.6); --primary: #3b82f6; /* blue-500 — czytelniejszy na ciemnym */ --primary-hover: #60a5fa; --primary-soft: #1e3a8a; /* blue-900 */ --primary-text: #ffffff; --accent: #38bdf8; --success: #22c55e; --danger: #ef4444; --warning-bg: rgba(251, 191, 36, 0.15); --warning-border: #d97706; --warning-text: #fcd34d; } * { box-sizing: border-box; } html, body { min-height: 100%; } body { margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; } .container { width: min(1100px, calc(100% - 48px)); margin: 0 auto; } .skip-link { position: absolute; left: -999px; top: 8px; background: var(--text); color: var(--bg); padding: 10px 12px; border-radius: 10px; } .skip-link:focus { left: 12px; z-index: 50; } /* ============================================================================= Header — sticky, biały (z lekkim cieniem przy scroll) ============================================================================= */ .site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .dark .site-header { background: rgba(10, 10, 10, 0.85); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 18px; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .brand-logo { height: 36px; width: auto; display: block; flex: 0 0 auto; } .brand-text { display: flex; flex-direction: column; } .brand-title { font-weight: 700; font-size: 16px; line-height: 1.1; color: var(--text); } .brand-subtitle { font-size: 11px; color: var(--muted2); } .nav { display: flex; align-items: center; gap: 6px; } .nav a { text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: 10px; transition: background 0.15s, color 0.15s; } .nav a:hover { background: var(--panel-strong); color: var(--text); } .nav-login { display: none; /* tylko mobile w menu */ } .nav-toggle { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; } .nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text); margin: 4px auto; border-radius: 10px; transition: transform 0.2s; } /* Theme toggle button */ .theme-toggle { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); font-size: 16px; transition: background 0.15s; } .theme-toggle:hover { background: var(--panel-strong); } /* ============================================================================= Buttons ============================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 10px; border: 1px solid transparent; text-decoration: none; font-weight: 600; font-size: 14px; cursor: pointer; user-select: none; transition: all 0.15s; font-family: inherit; } .btn-primary { background: var(--primary); color: var(--primary-text); border-color: var(--primary); } .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37, 99, 235, 0.25); } .btn-secondary { background: var(--panel); border-color: var(--border-strong); color: var(--text); } .btn-secondary:hover { background: var(--panel-strong); } .btn-ghost { background: transparent; border-color: var(--border); color: var(--text); } .btn-ghost:hover { background: var(--panel-strong); } /* ============================================================================= Hero ============================================================================= */ .hero { padding: 64px 0 32px; background: linear-gradient(180deg, var(--primary-soft), transparent 60%); } .hero-inner { display: block; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--primary); background: var(--primary-soft); padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(37, 99, 235, 0.15); } .dark .eyebrow { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.3); } .hero h1 { margin: 0 0 24px; font-size: clamp(28px, 4.5vw, 48px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); } .lead { margin: 0 0 16px; color: var(--muted); font-size: 16px; line-height: 1.65; } .lead strong { color: var(--text); font-weight: 600; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 8px; } /* ============================================================================= Sections ============================================================================= */ .section { padding: 64px 0; } .section-alt { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .section-head { max-width: 100%; margin-bottom: 32px; text-align: center; } .section-head h2 { margin: 0 0 12px; font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -0.01em; color: var(--text); } .section-head p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 16px; max-width: 720px; margin: 0 auto; } .grid { display: grid; gap: 16px; } /* ============================================================================= Features ============================================================================= */ .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } .feature { border: 1px solid var(--border); background: var(--panel); border-radius: var(--radius); padding: 20px; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .feature:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-2px); } .feature-icon { font-size: 28px; margin-bottom: 12px; display: block; } .feature h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--text); } .feature p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 14px; } /* ============================================================================= Trial info box (above pricing) — accent amber ============================================================================= */ .trial-info { margin: 0 auto 32px; max-width: 880px; border: 2px solid var(--warning-border); background: var(--warning-bg); border-radius: var(--radius-lg); padding: 24px 28px; box-shadow: 0 8px 24px rgba(217, 119, 6, 0.10); } .trial-info-title { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--warning-text); text-align: center; letter-spacing: -0.01em; } .dark .trial-info-title { color: #fcd34d; } .trial-info-body { margin: 0 0 12px; font-size: 14px; line-height: 1.7; color: var(--text); } .trial-info-body strong { color: var(--text); font-weight: 600; } .trial-info-tip { margin: 12px 0 0; padding-top: 14px; border-top: 1px solid rgba(217, 119, 6, 0.25); font-size: 13px; font-style: italic; color: var(--muted); line-height: 1.6; } /* ============================================================================= Pricing — 5 planów (Free / Basic / Pro / Max / Vip) ============================================================================= */ .pricing { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; } .plan { border: 1px solid var(--border); background: var(--panel); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 14px; transition: transform 0.15s, box-shadow 0.15s; position: relative; } .plan:hover { transform: translateY(-2px); box-shadow: var(--shadow-strong); } .plan-featured { border-color: var(--primary); border-width: 2px; box-shadow: 0 8px 30px rgba(37, 99, 235, 0.18); } .plan-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--primary); color: var(--primary-text); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.02em; } .plan-top { display: flex; flex-direction: column; gap: 4px; } .plan-name { font-weight: 800; font-size: 16px; letter-spacing: -0.01em; color: var(--text); } .plan-price { font-weight: 800; font-size: 22px; letter-spacing: -0.01em; color: var(--text); } .plan-period { font-weight: 500; font-size: 12px; color: var(--muted2); } .plan-tagline { font-size: 12px; color: var(--muted2); margin-top: 2px; } .plan-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; flex: 1; } .plan-list li { display: flex; gap: 8px; align-items: flex-start; } /* Pozycja z dłuższym opisem — bold feature name w 1. linii, opis w 2. linii. USER 11.05.2026: bez tego dłuższe „(opis 1, opis 2, opis 3)" przy strong zawija się w bok jak kolumna i wygląda niechlujnie. */ .plan-list li .plan-feat { display: flex; flex-direction: column; gap: 2px; flex: 1; } .plan-list li .plan-feat-desc { font-size: 12px; color: var(--muted2); font-weight: 400; line-height: 1.4; } .plan-list li::before { content: "✓"; color: var(--success); font-weight: 700; flex: 0 0 auto; font-size: 14px; line-height: 1.4; } .plan-list li.muted { color: var(--muted2); } .plan-list li.muted::before { content: "✕"; color: var(--muted2); } .plan-cta { margin-top: auto; } /* ============================================================================= How it works (steps) ============================================================================= */ .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } .step { border: 1px solid var(--border); background: var(--panel); border-radius: var(--radius); padding: 20px; display: flex; gap: 14px; } .step-num { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: var(--primary-text); background: var(--primary); flex: 0 0 auto; } .step h3 { margin: 0 0 6px; font-size: 16px; color: var(--text); } .step p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 14px; } /* ============================================================================= CTA box (between sections) ============================================================================= */ .cta { margin-top: 32px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: linear-gradient(135deg, var(--primary-soft), var(--bg)); padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .dark .cta { background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), var(--panel)); } .cta h3 { margin: 0 0 6px; color: var(--text); } .cta p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 14px; } .cta-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* ============================================================================= FAQ ============================================================================= */ .faq { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; } details { border: 1px solid var(--border); background: var(--panel); border-radius: var(--radius); padding: 16px 18px; transition: border-color 0.15s; } details[open] { border-color: var(--primary); } summary { cursor: pointer; font-weight: 600; color: var(--text); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; font-size: 22px; color: var(--primary); transition: transform 0.2s; flex: 0 0 auto; } details[open] summary::after { transform: rotate(45deg); } details p { color: var(--muted); margin: 12px 0 0; line-height: 1.65; font-size: 14px; } /* ============================================================================= Footer ============================================================================= */ .footer { padding: 40px 0 32px; border-top: 1px solid var(--border); background: var(--bg-alt); } .footer-inner { display: grid; gap: 20px; } .footer-brand { display: flex; gap: 12px; align-items: center; } .footer-logo { width: 64px; height: auto; border-radius: 10px; background: #f0f2f7; padding: 8px; box-sizing: content-box; } .footer-brand-title { font-weight: 800; font-size: 14px; color: var(--text); } .footer-brand-subtitle { font-size: 12px; color: var(--muted2); } .footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .footer-col { border: 1px solid var(--border); background: var(--panel); border-radius: var(--radius); padding: 16px; } .footer-h { font-weight: 700; margin-bottom: 10px; font-size: 14px; color: var(--text); } .footer-p { color: var(--muted); font-size: 13px; line-height: 1.7; } .footer-p a { color: var(--text); text-decoration: none; } .footer-p a:hover { color: var(--primary); text-decoration: underline; } .footer-bottom { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted2); font-size: 12px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border); } .footer-source a { color: var(--text); text-decoration: none; } .footer-source a:hover { color: var(--primary); text-decoration: underline; } /* ============================================================================= Responsive — breakpoints ============================================================================= */ @media (max-width: 1024px) { .pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); } .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .nav { display: none; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; } .nav-login { display: inline-flex; } .nav.is-open { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 64px; right: 16px; left: 16px; padding: 12px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow-strong); gap: 4px; } .nav.is-open a { padding: 12px 14px; } .features { grid-template-columns: 1fr; } .pricing { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .cta { flex-direction: column; align-items: flex-start; } .header-inner { gap: 8px; } .brand-subtitle { display: none; /* na małych telefonach kompresja */ } } /* ============================================================================= Legal pages (regulamin, polityka prywatności) ============================================================================= */ .legal-hero { padding: 48px 0 24px; border-bottom: 1px solid var(--border); background: var(--bg-alt); } .legal-hero h1 { margin: 0 0 10px; font-size: clamp(26px, 4vw, 36px); font-weight: 800; letter-spacing: -0.02em; color: var(--text); } .legal-hero .meta { color: var(--muted); font-size: 14px; } .legal-hero .meta strong { color: var(--text); } .legal-content { padding: 32px 0 64px; } .legal-content .container { width: min(820px, calc(100% - 48px)); } .legal-toc { border: 1px solid var(--border); background: var(--panel); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 28px; } .legal-toc h2 { margin: 0 0 10px; font-size: 14px; color: var(--muted2); text-transform: uppercase; letter-spacing: 0.05em; } .legal-toc ol { margin: 0; padding-left: 20px; font-size: 14px; color: var(--muted); line-height: 1.8; } .legal-toc a { color: var(--muted); text-decoration: none; } .legal-toc a:hover { color: var(--primary); text-decoration: underline; } .legal-section { margin-bottom: 28px; } .legal-section h2 { margin: 0 0 14px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); } .legal-section h3 { margin: 16px 0 8px; font-size: 16px; color: var(--text); } .legal-section p { margin: 0 0 12px; color: var(--muted); line-height: 1.75; font-size: 15px; } .legal-section ul, .legal-section ol { margin: 0 0 12px; padding-left: 22px; color: var(--muted); line-height: 1.75; font-size: 15px; } .legal-section li { margin-bottom: 6px; } .legal-section li strong { color: var(--text); } .legal-note { border: 1px solid rgba(37, 99, 235, 0.3); background: var(--primary-soft); border-radius: var(--radius); padding: 14px 16px; margin: 14px 0; font-size: 14px; line-height: 1.65; color: var(--muted); } .dark .legal-note { background: rgba(37, 99, 235, 0.08); border-color: rgba(59, 130, 246, 0.3); } .legal-note strong { color: var(--text); } .legal-warning { border: 1px solid var(--warning-border); background: var(--warning-bg); border-radius: var(--radius); padding: 14px 16px; margin: 14px 0; font-size: 14px; line-height: 1.65; color: var(--text); } .legal-warning strong { color: var(--warning-text); } .dark .legal-warning strong { color: #fcd34d; } .legal-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; } .legal-content a:hover { color: var(--primary-hover); }