/* ============================================================ OBSZAR ENERGII — Global Stylesheet v5 Design System: Spokój i spójność — wzorowany na sellwise.pl Paleta: Biel × Granat (#1a2d5c) × Niebieski (#275ce7) × Czerwony CTA v5: USUNIĘTY @import czcionek (przyczyna FOUC/przesuwania tekstu przy ładowaniu). Czcionka jest teraz ładowana przez w KAŻDEJ strony (patrz _szablon-podstrony.html) — to ładuje się równolegle z CSS, nie sekwencyjnie po nim, więc tekst nie "skacze" już po wyrenderowaniu strony. v4: topbar niebieski/biały, mniejsze czcionki, jasny wariant kart ============================================================ */ :root { --paper: #ffffff; --paper-deep: #f3f6fa; --white: #ffffff; --ink: #233047; --deep: #1a2d5c; --blue: #275ce7; --blue-light2:#5b86f5; /* jaśniejszy niebieski — topbar */ --blue-dark: #1a3fa0; --blue-light: #eef2fb; --muted: #5b6678; --line: #dbe2ea; --red: #FF4757; --copper: #275ce7; --solar: #1a2d5c; --serif: 'Playfair Display', Georgia, "Times New Roman", serif; --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --outer: clamp(20px, 5vw, 72px); --shadow: 0 2px 16px rgba(26, 45, 92, 0.07); --shadow-md: 0 8px 32px rgba(26, 45, 92, 0.10); --shadow-lg: 0 16px 60px rgba(26, 45, 92, 0.12); --radius: 8px; --radius-lg: 12px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.7; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } p { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.75; } strong { color: var(--ink); font-weight: 600; } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; } .skip-link { position: fixed; left: 16px; top: 16px; z-index: 200; transform: translateY(-200%); background: var(--deep); color: var(--white); padding: 8px 14px; font-size: 0.78rem; font-weight: 600; } .skip-link:focus { transform: translateY(0); } /* ============================================================ TYPOGRAFIA ============================================================ */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.2; margin: 0; color: var(--deep); } h1 { font-size: clamp(1.6rem, 3.1vw, 2.6rem); letter-spacing: -0.01em; } h2 { font-size: clamp(1.25rem, 1.85vw, 1.75rem); letter-spacing: -0.005em; } h3 { font-size: clamp(0.96rem, 1.15vw, 1.12rem); } h4 { font-size: clamp(0.84rem, 0.95vw, 0.94rem); } .kicker { display: block; font-family: var(--sans); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--blue); margin: 0 0 10px; } .text-link { display: inline-block; color: var(--blue); font-family: var(--sans); font-weight: 600; font-size: 0.78rem; border-bottom: 1px solid var(--blue-light); transition: border-color 0.2s, color 0.2s; } .text-link:hover { color: var(--blue-dark); border-color: var(--blue-dark); } /* ============================================================ TOPBAR ============================================================ */ .topbar { background: var(--blue-light2); color: var(--white); font-family: var(--sans); font-size: 0.72rem; font-weight: 600; padding: 9px var(--outer); text-align: center; letter-spacing: 0.01em; } /* ============================================================ HEADER / NAV ============================================================ */ .site-header { position: absolute; top: 0; left: 0; z-index: 100; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px var(--outer); color: var(--white); } .site-header.solid { position: sticky; top: 0; background: rgba(255, 255, 255, 0.97); color: var(--ink); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); box-shadow: 0 1px 12px rgba(26, 45, 92, 0.05); } .brand { display: inline-flex; align-items: center; flex-shrink: 0; } .site-nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); font-family: var(--sans); font-size: 0.76rem; font-weight: 500; } .site-nav a { color: inherit; border-bottom: 2px solid transparent; padding-bottom: 3px; transition: border-color 0.15s, color 0.15s; white-space: nowrap; } .site-header.solid .site-nav a:hover { color: var(--blue); } .site-header.solid .site-nav a.active { color: var(--blue); border-color: var(--blue); } .site-header:not(.solid) .site-nav a:hover, .site-header:not(.solid) .site-nav a.active { border-color: rgba(255,255,255,0.7); } .nav-btn { background: var(--red) !important; color: var(--white) !important; padding: 9px 18px !important; border-radius: var(--radius) !important; font-family: var(--sans) !important; font-weight: 700 !important; font-size: 0.74rem !important; border: none !important; border-bottom: none !important; transition: background 0.2s !important; cursor: pointer; white-space: nowrap; } .nav-btn:hover { background: #e03e4d !important; } /* ============================================================ PRZYCISKI ============================================================ */ .btn-primary { display: inline-flex; align-items: center; gap: 6px; background: var(--red); color: var(--white); padding: 13px 26px; font-family: var(--sans); font-weight: 700; font-size: 0.84rem; border-radius: var(--radius); border: none; cursor: pointer; transition: background 0.2s, transform 0.15s; white-space: nowrap; line-height: 1; } .btn-primary:hover { background: #e03e4d; transform: translateY(-1px); } .btn-secondary { display: inline-flex; align-items: center; gap: 6px; background: var(--blue); color: var(--white); padding: 13px 26px; font-family: var(--sans); font-weight: 700; font-size: 0.84rem; border-radius: var(--radius); border: none; cursor: pointer; transition: background 0.2s, transform 0.15s; white-space: nowrap; line-height: 1; } .btn-secondary:hover { background: var(--blue-dark); transform: translateY(-1px); } .btn-outline { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--blue); padding: 12px 24px; font-family: var(--sans); font-weight: 600; font-size: 0.82rem; border-radius: var(--radius); border: 2px solid var(--blue); cursor: pointer; transition: background 0.2s, color 0.2s; white-space: nowrap; line-height: 1; } .btn-outline:hover { background: var(--blue); color: var(--white); } .btn-ghost-white { display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,0.5); color: var(--white); padding: 13px 24px; font-family: var(--sans); font-weight: 600; font-size: 0.82rem; border-radius: var(--radius); transition: border-color 0.2s; line-height: 1; } .btn-ghost-white:hover { border-color: var(--white); } .button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; border: 1px solid currentColor; padding: 11px 20px; font-family: var(--sans); font-weight: 700; font-size: 0.8rem; border-radius: var(--radius); cursor: pointer; transition: background 0.2s; line-height: 1; } .button.ghost { color: var(--white); background: transparent; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: 78vh; max-height: 820px; overflow: hidden; display: grid; align-items: end; padding: clamp(90px, 11vw, 120px) var(--outer) clamp(56px, 6vw, 80px); } .hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .hero-home img { object-position: 60% 15%; } .hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,45,92,0.82) 0%, rgba(26,45,92,0.12) 58%), linear-gradient(0deg, rgba(26,45,92,0.40) 0%, transparent 50%); } .hero-content { position: relative; max-width: 620px; color: var(--white); } .hero h1, .hero-content h1 { font-size: clamp(1.8rem, 3.7vw, 3.0rem); line-height: 1.12; margin-top: 0; color: var(--white); } .hero-lead { max-width: 500px; margin-top: 16px; font-family: var(--sans); font-size: clamp(0.84rem, 0.98vw, 0.95rem); line-height: 1.75; color: rgba(255,255,255,0.86); } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .hero-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(39, 92, 231, 0.22); border: 1px solid rgba(39, 92, 231, 0.45); padding: 5px 13px; font-family: var(--sans); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #93c5fd; border-radius: 20px; margin-bottom: 16px; } .hero-badge span { width: 5px; height: 5px; background: #93c5fd; border-radius: 50%; display: inline-block; } /* ── PAGE HERO (podstrony) ── */ .page-hero { background: var(--deep); color: var(--white); padding: clamp(72px, 11vw, 110px) var(--outer) clamp(48px, 6vw, 64px); } .page-hero .kicker { color: #93c5fd; } .page-hero h1 { color: var(--white); font-size: clamp(1.6rem, 2.7vw, 2.3rem); } .page-hero p { color: rgba(255,255,255,0.74); font-size: 0.94rem; margin-top: 18px; max-width: 680px; line-height: 1.75; } /* ============================================================ TRUST BAR ============================================================ */ .trust-bar { background: var(--deep); padding: 14px var(--outer); } .trust-bar-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; max-width: 1100px; margin: 0 auto; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; color: #a8b9d4; } .trust-bar-inner div { display: flex; align-items: center; gap: 7px; } .trust-bar-inner .check { color: #60a5fa; } .trust-bar-konsult { background: var(--blue-light); border-top: 1px solid #dbe6fb; border-bottom: 1px solid #dbe6fb; padding: 14px var(--outer); } .trust-bar-konsult-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; max-width: 860px; margin: 0 auto; font-family: var(--sans); font-size: 0.74rem; font-weight: 600; color: var(--deep); text-align: center; } .trust-bar-konsult-inner div { display: flex; align-items: center; gap: 7px; } .tck { color: var(--blue); } /* ============================================================ SEKCJE ============================================================ */ .section { padding: clamp(56px, 7vw, 96px) var(--outer); } /* ============================================================ PROBLEMS ============================================================ */ .problems-section { background: var(--paper); padding: clamp(56px, 7vw, 96px) var(--outer); } .problems-label { font-family: var(--sans); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; } .problems-heading { font-family: var(--serif); font-size: clamp(1.2rem, 1.75vw, 1.7rem); color: var(--deep); line-height: 1.26; max-width: 680px; margin-bottom: 36px; font-weight: 500; } .problems-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .problem-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 2.4vw, 30px); transition: border-color 0.18s, box-shadow 0.18s; } .problem-card:hover { border-color: var(--blue); box-shadow: var(--shadow); } .problem-icon { font-size: 1.25rem; margin-bottom: 12px; display: block; } .problem-card h3 { font-size: clamp(0.86rem, 1.0vw, 1.0rem); color: var(--deep); line-height: 1.35; margin-bottom: 8px; } .problem-card p { color: var(--muted); font-size: 0.78rem; line-height: 1.72; } .problem-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font-family: var(--sans); font-size: 0.74rem; font-weight: 600; color: var(--blue); border-bottom: 1px solid transparent; transition: border-color 0.18s; } .problem-more:hover { border-color: var(--blue); } /* ============================================================ SOLUTION — DWA WARIANTY (ciemny / jasny tło) ============================================================ */ .solution-section { background: var(--deep); color: var(--white); padding: clamp(56px, 7vw, 96px) var(--outer); } .solution-label { color: #93c5fd !important; } .solution-heading { font-family: var(--serif); font-size: clamp(1.2rem, 1.75vw, 1.7rem); line-height: 1.26; max-width: 720px; margin: 10px 0 36px; color: var(--white); font-weight: 500; } .solution-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .solution-card { background: rgba(39, 92, 231, 0.07); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: clamp(18px, 2vw, 26px); border-top: 2px solid rgba(39, 92, 231, 0.4); transition: background 0.18s; } .solution-card:hover { background: rgba(39, 92, 231, 0.13); } .solution-num { font-family: var(--serif); font-size: 1.3rem; color: #93c5fd; line-height: 1; margin-bottom: 10px; } .solution-card h3 { font-size: clamp(0.86rem, 1.0vw, 1.0rem); color: var(--white); line-height: 1.35; margin-bottom: 8px; } .solution-card p { color: #a8b9d4; font-size: 0.78rem; line-height: 1.72; } .solution-section.light { background: var(--paper-deep); color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .solution-section.light .solution-label { color: var(--blue) !important; } .solution-section.light .solution-heading { color: var(--deep); } .solution-section.light .solution-grid { background: transparent; } .solution-section.light .solution-card { background: var(--white); border: 1px solid var(--line); border-top: 2px solid var(--blue); } .solution-section.light .solution-card:hover { border-color: var(--blue); box-shadow: var(--shadow); } .solution-section.light .solution-num { color: var(--blue); } .solution-section.light .solution-card h3 { color: var(--deep); } .solution-section.light .solution-card p { color: var(--muted); } /* ============================================================ JAK DZIAŁAMY ============================================================ */ .how-section { padding: clamp(56px, 7vw, 96px) var(--outer); background: var(--paper-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 20px; margin-top: 36px; position: relative; } .steps-grid::before { content: ''; position: absolute; top: 24px; left: calc(12.5% + 12px); right: calc(12.5% + 12px); height: 1px; background: #dbe6fb; z-index: 0; } .step-item { padding: 0 clamp(8px, 1.2vw, 16px); text-align: center; position: relative; z-index: 1; } .step-circle { width: 46px; height: 46px; border-radius: 50%; background: var(--white); border: 2px solid var(--blue); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-family: var(--serif); font-size: 0.96rem; color: var(--blue); box-shadow: var(--shadow); } .step-item h3 { font-size: clamp(0.82rem, 0.92vw, 0.94rem); color: var(--deep); margin-bottom: 8px; line-height: 1.35; } .step-item p { color: var(--muted); font-size: 0.76rem; line-height: 1.72; } /* ============================================================ CASE STUDIES ============================================================ */ .cases-section { padding: clamp(56px, 7vw, 96px) var(--outer); background: var(--paper); } .cases-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; } .cases-heading { font-family: var(--serif); font-size: clamp(1.2rem, 1.75vw, 1.7rem); color: var(--deep); line-height: 1.26; max-width: 480px; font-weight: 500; margin: 0; } .cases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .case-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 9px; transition: border-color 0.18s, box-shadow 0.18s; } .case-card:hover { border-color: var(--blue); box-shadow: var(--shadow); } .case-tag { font-family: var(--sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); } .case-result-num { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.4rem); color: var(--deep); line-height: 1; } .case-card h3 { font-size: clamp(0.86rem, 1.0vw, 1.0rem); color: var(--deep); line-height: 1.35; } .case-desc { color: var(--muted); font-size: 0.78rem; line-height: 1.72; } .case-divider { height: 1px; background: var(--line); margin: 3px 0; } .case-meta { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; color: var(--blue); display: flex; align-items: center; gap: 5px; } .case-meta::before { content: '→'; color: var(--blue); } /* ============================================================ DLACZEGO MY ============================================================ */ .why-section { background: var(--paper-deep); border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 96px) var(--outer); } .why-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; } .why-heading { font-size: clamp(1.2rem, 1.75vw, 1.7rem); color: var(--deep); line-height: 1.28; margin: 10px 0 14px; } .why-intro { color: var(--muted); font-size: 0.84rem; line-height: 1.78; } .partner-badge { margin-top: 20px; padding: 16px 20px; background: var(--deep); color: var(--white); border-radius: var(--radius); display: flex; align-items: center; gap: 14px; } .partner-badge-icon { font-size: 1.25rem; flex-shrink: 0; } .partner-badge p { font-family: var(--sans); font-size: 0.76rem; color: #a8b9d4; line-height: 1.6; margin: 0; } .partner-badge strong { color: var(--white); } .why-list { display: flex; flex-direction: column; gap: 12px; } .why-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(14px, 1.6vw, 20px) clamp(16px, 2vw, 24px); display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; transition: border-color 0.18s; } .why-item:hover { border-color: var(--blue); } .why-check { color: var(--blue); font-family: var(--sans); font-size: 0.84rem; font-weight: 800; margin-top: 1px; } .why-item h4 { font-size: clamp(0.8rem, 0.9vw, 0.9rem); color: var(--deep); margin-bottom: 4px; line-height: 1.35; } .why-item p { color: var(--muted); font-size: 0.74rem; line-height: 1.68; } /* ============================================================ FAQ ============================================================ */ .faq-section { padding: clamp(56px, 7vw, 96px) var(--outer); background: var(--paper); } .faq-layout { display: grid; grid-template-columns: 1fr 1.8fr; gap: clamp(32px, 5vw, 72px); align-items: start; } .faq-sticky { position: sticky; top: 90px; } .faq-sticky h2 { font-size: clamp(1.1rem, 1.6vw, 1.55rem); color: var(--deep); line-height: 1.3; margin: 10px 0 12px; } .faq-sticky p { color: var(--muted); font-size: 0.82rem; line-height: 1.75; } .faq-cta-link { display: inline-block; margin-top: 18px; background: var(--red); color: var(--white); padding: 11px 22px; font-family: var(--sans); font-weight: 700; font-size: 0.78rem; border-radius: var(--radius); transition: background 0.2s; line-height: 1; } .faq-cta-link:hover { background: #e03e4d; color: var(--white); } .faq-list { border-top: 1px solid var(--line); } .faq-list details { border-bottom: 1px solid var(--line); } .faq-list summary { cursor: pointer; padding: 18px 0; font-family: var(--serif); font-size: clamp(0.84rem, 0.95vw, 0.98rem); color: var(--deep); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; user-select: none; font-weight: 500; line-height: 1.45; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { content: '+'; font-size: 1.1rem; font-weight: 300; color: var(--blue); flex-shrink: 0; transition: transform 0.2s; font-family: var(--sans); } .faq-list details[open] summary::after { transform: rotate(45deg); } .faq-list details p { padding: 2px 0 18px; color: var(--muted); font-size: 0.8rem; line-height: 1.75; max-width: none; } /* ============================================================ CYTAT ============================================================ */ .quote-band { padding: clamp(48px, 7vw, 80px) var(--outer); background: var(--blue-light); } .quote-band blockquote { max-width: 800px; border-left: 3px solid var(--blue); padding-left: clamp(18px, 3vw, 40px); color: var(--deep); font-family: var(--serif); font-size: clamp(0.96rem, 1.5vw, 1.4rem); font-weight: 400; line-height: 1.55; margin: 0; } .quote-band blockquote p { color: inherit; font-size: inherit; font-family: inherit; line-height: inherit; } /* ============================================================ CTA SECTION ============================================================ */ .cta-section { position: relative; min-height: 400px; overflow: hidden; display: grid; align-items: center; padding: clamp(56px, 7vw, 96px) var(--outer); color: var(--white); } .cta-section img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .cta-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,45,92,0.90) 52%, rgba(26,45,92,0.30)); } .cta-content { position: relative; max-width: 540px; } .cta-content .kicker { color: #93c5fd; } .cta-content h2 { font-family: var(--serif); font-size: clamp(1.25rem, 1.85vw, 1.75rem); line-height: 1.28; margin: 10px 0 12px; color: var(--white); font-weight: 500; } .cta-content > p { color: #a8b9d4; font-size: 0.82rem; line-height: 1.75; max-width: 440px; } .cta-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } /* ============================================================ KWALIFIKATOR (DSR i inne podstrony) ============================================================ */ .kwalif-section { background: var(--blue-light); border: 1px solid #dbe6fb; border-radius: var(--radius-lg); padding: clamp(26px, 3.5vw, 44px); margin: 0; } .kwalif-section h3 { font-family: var(--serif); font-size: clamp(1.0rem, 1.4vw, 1.3rem); color: var(--deep); margin-bottom: 18px; } .kwalif-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #dbe6fb; } .kwalif-item:last-child { border-bottom: none; } .kwalif-icon { font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; } .kwalif-item h4 { font-size: 0.84rem; color: var(--deep); margin-bottom: 4px; } .kwalif-item p { font-size: 0.76rem; color: var(--muted); margin: 0; line-height: 1.68; } .kwalif-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.8rem; margin-top: 18px; } .kwalif-table th { background: var(--deep); color: var(--white); padding: 11px 16px; text-align: left; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; } .kwalif-table td { padding: 11px 16px; border-bottom: 1px solid var(--line); } .kwalif-table tr:hover td { background: var(--blue-light); } .tag-yes { display: inline-block; background: #dcfce7; color: #166534; padding: 3px 9px; border-radius: 4px; font-size: 0.68rem; font-weight: 600; } .tag-no { display: inline-block; background: #fee2e2; color: #991b1b; padding: 3px 9px; border-radius: 4px; font-size: 0.68rem; font-weight: 600; } .vsteps { display: flex; flex-direction: column; gap: 12px; } .vstep { display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start; background: var(--white); padding: 22px 26px; border: 1px solid var(--line); border-radius: var(--radius); transition: box-shadow 0.18s; } .vstep:hover { box-shadow: var(--shadow-md); } .vstep-num { width: 42px; height: 42px; border-radius: 50%; background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 1.0rem; font-weight: 400; flex-shrink: 0; } .vstep h4 { font-size: 0.92rem; color: var(--deep); margin-bottom: 6px; } .vstep p { font-size: 0.8rem; color: var(--muted); line-height: 1.72; } .benefit-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 0; } .benefit-num-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 28px); text-align: center; } .benefit-num-card .big-num { font-family: var(--serif); font-size: clamp(1.6rem, 2.9vw, 2.6rem); color: var(--blue); line-height: 1; display: block; margin-bottom: 8px; } .benefit-num-card p { font-size: 0.76rem; color: var(--muted); text-align: center; line-height: 1.65; } /* ============================================================ FOOTER MAIN ============================================================ */ .footer-main { background: var(--deep); color: var(--white); padding: clamp(44px, 6vw, 68px) var(--outer) 32px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(24px, 4vw, 48px); padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-logo { margin-bottom: 16px; } .footer-brand-desc { font-family: var(--sans); color: #6b83a6; font-size: 0.76rem; line-height: 1.75; margin-bottom: 14px; } .footer-oc { font-family: var(--sans); font-size: 0.68rem; color: #4a5f7a; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 12px; } .footer-col h4 { font-family: var(--sans); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #4a5f7a; margin-bottom: 12px; } .footer-col nav { display: flex; flex-direction: column; gap: 9px; } .footer-col nav a { font-family: var(--sans); color: #7b96b8; font-size: 0.76rem; transition: color 0.18s; } .footer-col nav a:hover { color: var(--white); } .footer-bottom { padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--sans); font-size: 0.68rem; color: #4a5f7a; } .footer-bottom nav { display: flex; flex-wrap: wrap; gap: 14px; } .footer-bottom nav a { color: #4a5f7a; transition: color 0.18s; } .footer-bottom nav a:hover { color: #7b96b8; } /* ============================================================ KOMPONENTY PODSTRON USŁUG ============================================================ */ .uslugi-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; padding: clamp(56px, 7vw, 96px) var(--outer); } .uslugi-intro-text h2 { margin-bottom: 16px; } .uslugi-intro-text p { font-size: 0.86rem; line-height: 1.78; color: var(--muted); } .uslugi-intro-text p + p { margin-top: 12px; } .info-box { background: var(--blue-light); border-left: 3px solid var(--blue); border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 22px; } .info-box p { font-size: 0.8rem; color: var(--deep); line-height: 1.7; } .info-box strong { color: var(--deep); } .warning-box { background: #fff7ed; border-left: 3px solid #f97316; border-radius: 0 var(--radius) var(--radius) 0; padding: 16px 20px; margin-top: 14px; } .warning-box p { font-size: 0.78rem; color: #7c2d12; line-height: 1.7; } .konsult-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .konsult-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 2.4vw, 32px); } .konsult-card h3 { font-family: var(--serif); font-size: clamp(0.92rem, 1.15vw, 1.15rem); color: var(--deep); margin-bottom: 10px; line-height: 1.32; font-weight: 500; } .konsult-card > p { color: var(--muted); font-size: 0.78rem; line-height: 1.72; } .konsult-card ul { padding-left: 18px; margin: 10px 0 0; } .konsult-card li { margin-bottom: 7px; font-family: var(--sans); font-size: 0.78rem; line-height: 1.65; color: var(--muted); } .konsult-card li strong { color: var(--ink); } .calendar-wrapper { max-width: 860px; width: 100%; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(20px, 3.5vw, 36px); border: 1px solid var(--line); } .calendar-label { font-family: var(--sans); text-align: center; font-size: 0.66rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 18px; } .cs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .cs-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 9px; transition: border-color 0.18s, box-shadow 0.18s; } .cs-card:hover { border-color: var(--blue); box-shadow: var(--shadow); } .cs-tag { font-family: var(--sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); } .cs-result { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.6rem); color: var(--deep); line-height: 1; } .cs-card h3 { font-size: clamp(0.88rem, 1.05vw, 1.05rem); color: var(--deep); line-height: 1.32; } .cs-card > p { color: var(--muted); font-size: 0.78rem; line-height: 1.72; } .cs-divider { height: 1px; background: var(--line); margin: 5px 0; } .back-to-top { position: fixed; bottom: 24px; right: 24px; width: 40px; height: 40px; background: var(--deep); color: var(--white); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.0rem; box-shadow: var(--shadow-md); z-index: 99; transition: all 0.22s ease; } .back-to-top:hover { background: var(--blue); transform: translateY(-3px); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .solution-grid { grid-template-columns: repeat(2, 1fr); } .benefit-nums { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .problems-grid { grid-template-columns: repeat(2, 1fr); } .konsult-grid { grid-template-columns: 1fr; } .cs-grid { grid-template-columns: 1fr; } .steps-grid { grid-template-columns: repeat(2, 1fr); } .steps-grid::before { display: none; } .cases-grid { grid-template-columns: 1fr; } .why-layout { grid-template-columns: 1fr; } .faq-layout { grid-template-columns: 1fr; } .faq-sticky { position: static; } .footer-grid { grid-template-columns: 1fr 1fr; } .uslugi-intro { grid-template-columns: 1fr; } } @media (max-width: 600px) { .site-header { flex-direction: column; align-items: flex-start; padding-top: 14px; padding-bottom: 14px; } .site-nav { width: 100%; flex-wrap: wrap; gap: 6px 12px; font-size: 0.74rem; } .hero { min-height: 72vh; max-height: none; } .hero h1, .hero-content h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); } .problems-grid { grid-template-columns: 1fr; } .solution-grid { grid-template-columns: 1fr; } .steps-grid { grid-template-columns: 1fr; gap: 20px; } .footer-grid { grid-template-columns: 1fr; } .cta-btns { flex-direction: column; align-items: stretch; } .hero-actions { flex-direction: column; align-items: flex-start; } .cases-header { flex-direction: column; align-items: flex-start; } .trust-bar-inner { gap: 6px 18px; } .trust-bar-konsult-inner { flex-direction: column; align-items: center; } .benefit-nums { grid-template-columns: 1fr; } }