:root{ --blue-900:#0b2a4a; --blue-700:#0e4a86; --blue-600:#1568b8; --blue-500:#2f8fe0; --blue-100:#e8f3fc; --blue-50:#f4faff; --ink:#0f2438; --muted:#5b7186; --white:#ffffff; --surface:#ffffff; --line:#dbe9f6; --success:#1a9e6b; --danger:#d0453c; --radius:14px; --shadow:0 8px 24px rgba(11,42,74,0.08); --shadow-lg:0 20px 48px rgba(11,42,74,0.16); /* Stałe kolory marki — NIE odwracają się w motywie nocnym. Używane wszędzie tam, gdzie na tle leży biały tekst: gdyby tło rozjaśniło się razem z motywem, biały napis zniknąłby (biel na jasnym błękicie to kontrast ok. 2:1). Dotyczy stopki, banera kontaktowego, przycisków głównych, kafelków mocy i plakietek. */ --navy-900:#0b2a4a; --navy-700:#0e4a86; --brand-from:#2f8fe0; --brand-to:#0e4a86; /* Tła komunikatów — zdefiniowane dla każdego motywu osobno, żeby czerwony/zielony tekst miał pod sobą tło o właściwej jasności. */ --danger-bg:#fdf1ef; --ok-bg:#e6f7ed; } /* --- Motyw nocny (tylko strony publiczne — klasa .themeable na , patrz assets/theme.js i header każdej publicznej strony). Działa automatycznie wg preferencji systemowej oraz przez ręczny przełącznik (🌙/☀️ w nagłówku), który zapamiętuje wybór w localStorage i nadpisuje ustawienie systemowe atrybutem data-theme. Panel admina/instalatora celowo NIE ma tej klasy — zostaje jasny. --- */ @media (prefers-color-scheme: dark){ html.themeable:not([data-theme="light"]){ --blue-900:#eef4fb; --blue-700:#5aa8ea; --blue-600:#4a9eea; --blue-500:#4aa3f0; --blue-100:#1d3a5c; --blue-50:#17293f; --ink:#e7eef7; --muted:#93a8c2; --surface:#101f34; --line:#26405f; --danger-bg:#331613; --ok-bg:#0f2820; background:#0a1626; /* Informuje przeglądarkę, że to motyw ciemny — natywne kontrolki (pola, listy rozwijane, paski przewijania, kalendarz w input[type=date]) dostosowują wtedy swoje domyślne kolory zamiast zostawać przy jasnych. */ color-scheme:dark; } } html.themeable[data-theme="dark"]{ --blue-900:#eef4fb; --blue-700:#5aa8ea; --blue-600:#4a9eea; --blue-500:#4aa3f0; --blue-100:#1d3a5c; --blue-50:#17293f; --ink:#e7eef7; --muted:#93a8c2; --surface:#101f34; --line:#26405f; --danger-bg:#331613; --ok-bg:#0f2820; background:#0a1626; color-scheme:dark; } html.themeable[data-theme="dark"] body{background:transparent;} @media (prefers-color-scheme: dark){ html.themeable:not([data-theme="light"]) body{background:transparent;} html.themeable:not([data-theme="light"]) header{background:rgba(10,22,38,0.88);} html.themeable:not([data-theme="light"]) .hero{ background:radial-gradient(1200px 500px at 80% -10%, #142a44 0%, transparent 60%), linear-gradient(180deg,#0a1626 0%, #0d1d30 100%); } html.themeable:not([data-theme="light"]) .card-img{background:linear-gradient(135deg,var(--blue-100),var(--blue-50));} } html.themeable[data-theme="dark"] header{background:rgba(10,22,38,0.88);} html.themeable[data-theme="dark"] .hero{ background:radial-gradient(1200px 500px at 80% -10%, #142a44 0%, transparent 60%), linear-gradient(180deg,#0a1626 0%, #0d1d30 100%); } html.themeable[data-theme="dark"] .card-img{background:linear-gradient(135deg,var(--blue-100),var(--blue-50));} .theme-toggle{ width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line); background:var(--surface);color:var(--blue-900);font-size:15px; display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0; transition:.15s; } .theme-toggle:hover{border-color:var(--blue-500);} *{box-sizing:border-box;} /* Ukryte wizualnie, ale obecne dla czytników ekranu i wyszukiwarek (poprawna hierarchia nagłówków bez zmiany wyglądu strony) — patrz np. sekcja "Dlaczego warto" w index.php. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} html,body{margin:0;padding:0;} body{ font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--blue-50); color:var(--ink); line-height:1.5; } a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} button{font-family:inherit;cursor:pointer;} /* Header */ header{ position:sticky;top:0;z-index:50; background:rgba(255,255,255,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .nav{ max-width:1180px;margin:0 auto;padding:14px 24px; display:flex;align-items:center;justify-content:space-between;gap:16px; } .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--blue-900);white-space:nowrap;flex-shrink:0;} .brand .flake{ width:36px;height:36px;border-radius:10px; background:linear-gradient(135deg,var(--brand-from),var(--brand-to)); display:flex;align-items:center;justify-content:center;color:white;font-size:18px; } .navlinks{display:flex;gap:26px;font-weight:600;font-size:14.5px;color:var(--blue-900);} .navlinks a{opacity:.85;transition:opacity .15s;} .navlinks a:hover{opacity:1;} .nav-right{display:flex;align-items:center;gap:14px;flex-shrink:0;} .tel{font-weight:700;color:var(--blue-700);font-size:14.5px;text-decoration:none;white-space:nowrap;} /* Hero */ .hero{ background:radial-gradient(1200px 500px at 80% -10%, #dff0fd 0%, transparent 60%), linear-gradient(180deg,var(--blue-50) 0%, #eef7fe 100%); padding:64px 24px 56px; } .hero-inner{max-width:760px;margin:0 auto;text-align:center;} .hero-inner p{margin-left:auto;margin-right:auto;} .badge{ display:inline-flex;align-items:center;gap:8px;background:var(--blue-100); color:var(--blue-700);font-weight:700;font-size:12.5px;padding:6px 14px;border-radius:999px; letter-spacing:.3px;text-transform:uppercase; } .hero h1{font-size:44px;line-height:1.12;margin:18px 0 16px;color:var(--blue-900);letter-spacing:-0.5px;} .hero p{font-size:17px;color:var(--muted);max-width:520px;margin:0 auto 28px;} .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;} .btn-primary{ background:linear-gradient(135deg,var(--brand-from),var(--brand-to));color:white; border:none;padding:14px 26px;border-radius:10px;font-weight:700;font-size:15px; box-shadow:0 10px 24px rgba(21,104,184,0.28); } .btn-secondary{ background:var(--surface);color:var(--blue-700);border:1.5px solid var(--line); padding:14px 26px;border-radius:10px;font-weight:700;font-size:15px; } /* Sections */ section{max-width:1180px;margin:0 auto;padding:64px 24px;} .section-head{text-align:center;max-width:640px;margin:0 auto 42px;} .section-head .eyebrow{color:var(--blue-600);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.6px;} .section-head h2{font-size:32px;color:var(--blue-900);margin:10px 0 10px;letter-spacing:-0.3px;} .section-head p{color:var(--muted);font-size:15.5px;} /* Features */ .features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .feature{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px;text-align:center;} .feature .icon{ width:48px;height:48px;border-radius:12px;background:var(--blue-100);color:var(--blue-700); display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:22px; } .feature h3{font-size:15.5px;margin:0 0 6px;color:var(--blue-900);} .feature p{font-size:13.5px;color:var(--muted);margin:0;} /* Products */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;display:flex;flex-direction:column;transition:transform .18s, box-shadow .18s; } .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);} .card.card-highlight{box-shadow:0 0 0 3px var(--blue-500),var(--shadow-lg);} .card-img{ height:190px;background:linear-gradient(135deg,var(--blue-100),#dcecfb); display:flex;align-items:center;justify-content:center;position:relative; padding:14px; } .card-img .unit-icon{font-size:44px;} .card-img .unit-photo{ width:100%;height:100%;object-fit:contain;position:relative;z-index:1; filter:drop-shadow(0 10px 16px rgba(15,45,90,.18)); } .tag{ position:absolute;top:12px;left:12px;background:var(--navy-900);color:white; font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;z-index:5; } .split-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 2px;} .split-toggle .opt{ min-width:0;border:1.5px solid var(--line);border-radius:9px;padding:8px 4px;text-align:center; font-size:11.5px;font-weight:700;color:var(--muted);cursor:pointer;line-height:1.3; } .split-toggle .opt.active{border-color:var(--blue-500);background:var(--blue-50);color:var(--blue-700);} .unit-pickers{display:flex;flex-direction:column;gap:8px;margin:10px 0 2px;} .unit-picker{display:flex;align-items:center;gap:8px;} .unit-picker .up-label{font-size:10.5px;font-weight:800;color:var(--blue-900);width:110px;flex-shrink:0;} .unit-picker select{ flex:1;min-width:0;font-size:11.5px;padding:6px 7px;border:1.5px solid var(--line);border-radius:7px; color:var(--blue-900);background:var(--surface); } .ms-note{font-size:10.5px;color:var(--muted);margin:6px 0 0;} .card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1;} .card-body h3{font-size:16.5px;margin:0;color:var(--blue-900);} .card-body .brand-label{font-size:11.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--blue-600);} .card-body p.desc{font-size:13px;color:var(--muted);margin:0;min-height:36px;} .variant-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px dashed var(--line);} .variant-row:first-of-type{border-top:1px solid var(--line);margin-top:6px;} .variant-size{font-size:13px;font-weight:600;color:var(--blue-900);} .variant-price{font-size:12.5px;color:var(--muted);} .order-btn{ background:var(--blue-700);color:white;border:none;padding:8px 14px;border-radius:8px; font-weight:700;font-size:12.5px; } .order-btn:hover{background:var(--navy-900);} .order-btn-sm{padding:4px 9px;font-size:10.5px;} .catalog-link{ margin-top:10px;font-size:12.5px;font-weight:700;color:var(--blue-600); display:inline-flex;align-items:center;gap:6px; } .catalog-link:hover{color:var(--blue-900);} /* Kafelek produktu — nagłówek, ikony funkcji, ramka zamówienia */ .title-line{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin:0;} .title-line .brand-label{font-size:16.5px;letter-spacing:.2px;} .fn-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:2px; background:var(--blue-50);border:1px solid var(--line);border-radius:10px; padding:6px 4px;margin:2px 0; } .fn-grid .fn{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:5px 2px;} .fn-icon{ width:32px;height:32px;border-radius:9px;flex-shrink:0; background:transparent; display:flex;align-items:center;justify-content:center; } .fn-icon svg{width:30px;height:30px;stroke:var(--blue-600) !important;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--blue-600) !important;} .fn-grid .fn span{font-size:8.5px;line-height:1.15;color:var(--muted);font-weight:600;} .buy-frame{border:1.5px solid var(--line);border-radius:10px;overflow:hidden;margin:2px 0;} .buy-bar{ background:var(--blue-50); color:var(--blue-900);padding:5px 10px; display:flex;align-items:center;justify-content:center;gap:6px; font-weight:800;font-size:11.5px;letter-spacing:.2px; border-bottom:1px solid var(--line); } .power-row{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--surface);padding:2px;} .power-tile{ padding:6px 4px;text-align:center;cursor:pointer;transition:.15s; background:linear-gradient(120deg,var(--navy-700),var(--navy-900)); border-radius:8px; } .power-tile:hover{background:linear-gradient(120deg,var(--brand-from),var(--brand-to));} .power-tile .p-size{font-size:12.5px;font-weight:800;color:white;} .power-tile .p-price{font-size:10.5px;color:#cfe4fa;margin-top:1px;} .offer-details{margin:2px 0 4px;font-size:11.5px;} .offer-details summary{ cursor:pointer;color:var(--blue-600);font-weight:700;list-style:none; display:inline-flex;align-items:center;gap:4px; } .offer-details summary::-webkit-details-marker{display:none;} .offer-details summary::before{content:"▸";font-size:10px;transition:.15s;} .offer-details[open] summary::before{content:"▾";} .offer-details summary:hover{color:var(--blue-900);} .offer-details p{ margin:6px 0 0;color:var(--muted);font-size:11px;line-height:1.5; background:var(--blue-50);border:1px solid var(--line);border-radius:8px;padding:8px 10px; } /* FAQ */ .faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px;} .faq-item{ background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px; } .faq-item summary{cursor:pointer;font-weight:700;color:var(--blue-900);font-size:15px;list-style:none;} .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary::before{content:"+ ";color:var(--blue-600);} .faq-item[open] summary::before{content:"– ";} .faq-item p{margin:10px 0 0;color:var(--muted);font-size:14px;line-height:1.6;} .faq-item p a{color:var(--blue-600);text-decoration:underline;} /* Legal pages (Regulamin, Polityka prywatności) */ .legal-page{max-width:820px;margin:0 auto;padding:56px 24px 80px;} .legal-page h1{font-size:30px;color:var(--blue-900);margin:0 0 4px;} .legal-page .legal-updated{color:var(--muted);font-size:13px;margin:0 0 32px;} .legal-page h2{font-size:18px;color:var(--blue-900);margin:28px 0 8px;} .legal-page p{color:var(--ink);font-size:14.5px;line-height:1.7;margin:0 0 4px;} .legal-page a{color:var(--blue-600);text-decoration:underline;} /* CTA banner */ .cta-banner{ background:linear-gradient(120deg,var(--navy-700),var(--navy-900)); border-radius:20px;padding:48px;color:white;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; } .cta-banner h2{font-size:26px;margin:0 0 8px;} .cta-banner p{margin:0;opacity:.85;font-size:14.5px;max-width:420px;} /* Wersja połączona: "Potrzebujesz doradztwa?" + "Zostaw swój numer" w jednej karcie działu kontaktu — ten sam gradient co .cta-banner, oddzielone cienką linią. */ .cta-banner-combined{flex-direction:column;align-items:stretch;gap:0;} .cta-top-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;} .cta-divider{height:1px;background:rgba(255,255,255,0.18);margin:28px 0;} .cta-callback-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;} .cta-callback-row h3{font-size:26px;margin:0 0 8px;} .cta-callback-row > div > p{margin:0;opacity:.85;font-size:14.5px;max-width:360px;} .cta-callback-row form{flex:1;min-width:280px;max-width:420px;} .callback-row{display:flex;gap:10px;flex-wrap:wrap;} .callback-row input[type="tel"]{ flex:1;min-width:180px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);color:white; padding:14px 18px;border-radius:12px;font-size:14.5px;font-family:inherit; } .callback-row input[type="tel"]::placeholder{color:rgba(255,255,255,0.65);} .callback-row input[type="tel"]:focus{outline:none;border-color:white;} .callback-submit{ background:white;color:var(--navy-700);border:none;font-weight:700;font-size:14.5px; padding:14px 22px;border-radius:12px;white-space:nowrap;transition:.15s; } .callback-submit:hover{background:var(--blue-50);} .callback-submit:disabled{opacity:.6;cursor:default;} .callback-consent{margin:20px 0 0;font-size:12px;opacity:.7;} .callback-error{color:#ffc7c1;font-size:13px;margin:12px 0 0;} .callback-success{font-size:15px;font-weight:700;color:#bdf5d8;margin:20px 0 0;} footer{background:var(--navy-900);color:rgba(255,255,255,0.85);padding:48px 24px 24px;} .footer-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;} .footer-inner h4{color:white;font-size:14.5px;margin:0 0 14px;} .footer-inner p, .footer-inner a{font-size:13.5px;color:rgba(255,255,255,0.7);display:block;margin-bottom:8px;} .footer-bottom{ max-width:1180px;margin:32px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,0.12); font-size:12.5px;color:rgba(255,255,255,0.55);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px; } /* Order modal */ .modal-overlay{ position:fixed;inset:0;background:rgba(11,42,74,0.5);z-index:200;display:none; align-items:center;justify-content:center;padding:20px; } .modal-overlay.open{display:flex;} .modal{ position:relative; background:var(--surface);border-radius:16px;max-width:520px;width:100%;max-height:90vh;overflow-y:auto; padding:28px;box-shadow:var(--shadow-lg); } .modal-close-btn{ position:absolute;top:14px;right:14px; width:32px;height:32px;border-radius:50%; background:var(--blue-50);border:1px solid var(--line); display:flex;align-items:center;justify-content:center; cursor:pointer;color:var(--blue-900);font-size:16px;line-height:1; transition:.15s;z-index:1; } .modal-close-btn:hover{background:var(--blue-100);border-color:var(--blue-500);} .modal h3{margin:0 0 4px;color:var(--blue-900);font-size:20px;} .modal .sub-t{color:var(--muted);font-size:13px;margin:0 0 18px;} .selected-unit{ background:var(--blue-50);border:1px solid var(--line);border-radius:12px; padding:14px 16px;margin-bottom:20px;display:flex;flex-direction:column;gap:10px; } .selected-unit .su-top{display:flex;justify-content:space-between;gap:10px;align-items:center;} .selected-unit .u-name{font-weight:800;color:var(--blue-900);font-size:15px;} .selected-unit .u-meta{font-size:12.5px;color:var(--muted);margin-top:2px;} .selected-unit .u-price{font-weight:800;color:var(--blue-900);font-size:16px;white-space:nowrap;text-align:right;} .selected-unit .u-price .vat-note{ display:block;font-size:9.5px;color:var(--muted);font-weight:500;text-align:right;margin-top:1px; white-space:normal; } .basic-offer{font-size:11px;border-top:1px solid var(--line);padding-top:8px;} .basic-offer-label{color:var(--blue-700);font-weight:700;} .basic-offer p{margin:6px 0 0;color:var(--muted);font-size:10.5px;line-height:1.5;} .configure-link{ display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700; color:var(--blue-600);cursor:pointer;background:none;border:none;padding:0;font-family:inherit; } .configure-link:hover{color:var(--blue-900);} .custom-config{ background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px 4px;margin-top:2px; } .custom-config .cc-title{font-size:11.5px;font-weight:700;color:var(--blue-900);margin-bottom:8px;} .custom-config .cc-label{font-size:11.5px;font-weight:700;color:var(--blue-900);margin-bottom:6px;display:block;} .custom-config .cc-note{font-size:10.5px;color:var(--muted);margin:5px 0 12px;} .custom-config select{ width:100%;padding:9px 11px;border:1.5px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit; } .cc-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;} .cc-toggle .opt{ border:1.5px solid var(--line);border-radius:9px;padding:9px 10px;text-align:center;cursor:pointer; } .cc-toggle .opt.active{border-color:var(--blue-500);background:var(--blue-50);} .cc-toggle .opt .t{font-size:12.5px;font-weight:700;color:var(--blue-900);} .cc-toggle .opt .p{font-size:11px;color:var(--muted);margin-top:1px;} .buyer-type-row{margin-bottom:16px;} .buyer-type-row .group-label{display:block;font-size:12.5px;font-weight:700;color:var(--blue-900);margin-bottom:6px;} .buyer-type-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px;} .buyer-type-toggle .opt{ border:1.5px solid var(--line);border-radius:9px;padding:10px 12px;text-align:center; font-size:13.5px;font-weight:700;color:var(--muted);cursor:pointer; } .buyer-type-toggle .opt.active{border-color:var(--blue-500);background:var(--blue-50);color:var(--blue-700);} .check-row{ display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:13.5px;font-weight:700;color:var(--blue-900); } .check-row input{width:16px;height:16px;accent-color:var(--blue-600);} .install-address-block{ background:var(--blue-50);border:1px solid var(--line);border-radius:10px;padding:14px 14px 2px;margin:0 0 14px; } .form-row{margin-bottom:14px;} .consent-row{ background:var(--blue-50);border:1.5px solid var(--line);border-radius:10px;padding:12px 14px; } .consent-row .check-row{ align-items:flex-start;font-weight:400;font-size:12.5px;line-height:1.55;color:var(--blue-900);margin-bottom:0; } .consent-row .check-row input{margin-top:2px;flex-shrink:0;} .consent-row.error{border-color:var(--danger);background:var(--danger-bg);} .consent-row.error .form-error{margin-top:8px;} /* Honeypot — pole widoczne dla botów, ukryte poza ekranem dla prawdziwych użytkowników. */ .hp-field{position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden;} .form-row label{display:block;font-size:12.5px;font-weight:700;color:var(--blue-900);margin-bottom:6px;} .form-row input, .form-row textarea, .form-row select{ width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:9px;font-size:14px; font-family:inherit;background:var(--surface);color:var(--ink); } .form-row input:focus, .form-row textarea:focus, .form-row select:focus{outline:none;border-color:var(--blue-500);} .form-row.error input{border-color:var(--danger);} .form-error{color:var(--danger);font-size:12px;margin-top:5px;} .form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .form-grid-3{display:grid;grid-template-columns:2fr 1fr;gap:12px;} .submit-btn{ width:100%;background:linear-gradient(135deg,var(--brand-from),var(--brand-to));color:white;border:none; padding:14px;border-radius:10px;font-weight:700;font-size:15px; } .submit-btn:disabled{opacity:.6;} .api-error{ background:var(--danger-bg);border:1px solid var(--danger);color:var(--danger); padding:10px 12px;border-radius:9px;font-size:13px;margin-bottom:14px; } .success-box{text-align:center;padding:12px 0 4px;} .success-box .check{ width:60px;height:60px;border-radius:50%;background:var(--success);color:white;font-size:28px; display:flex;align-items:center;justify-content:center;margin:0 auto 16px; } @media (max-width:900px){ .navlinks{display:none;} .features{grid-template-columns:repeat(2,1fr);} .grid{grid-template-columns:repeat(2,1fr);} .footer-inner{grid-template-columns:1fr 1fr;} } @media (max-width:560px){ .grid{grid-template-columns:1fr;} .features{grid-template-columns:1fr;} .hero h1{font-size:32px;} .footer-inner{grid-template-columns:1fr;} .form-grid-2, .form-grid-3{grid-template-columns:1fr;} .nav{padding:12px 16px;gap:8px;} .brand{font-size:15px;gap:6px;} .brand .flake{width:26px;height:26px;font-size:13px;border-radius:8px;} .tel{font-size:12.5px;} } @media (max-width:360px){ .brand{font-size:13px;} .tel-num{display:none;} .tel{font-size:19px;} } /* Admin */ .admin-wrap{max-width:none;width:100%;box-sizing:border-box;margin:0 auto;padding:32px 24px;} .admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:12px;} .admin-header h1{color:var(--blue-900);font-size:24px;margin:0;} .admin-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;} .admin-tab{ display:inline-flex;align-items:center;gap:4px;padding:8px 16px;border-radius:999px; font-size:13px;font-weight:700;text-decoration:none;color:var(--blue-900); background:var(--blue-50);border:1.5px solid var(--line); } .admin-tab:hover{background:var(--blue-100);} .admin-tab.active{background:var(--navy-900);border-color:var(--navy-900);color:#fff;} .admin-tab .count{opacity:.7;font-weight:600;} .admin-tab.active .count{opacity:.85;} .admin-table-wrap{overflow-x:auto;background:white;border:1px solid var(--line);border-radius:var(--radius);} table.admin-table{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:auto;} table.admin-table th{ background:var(--blue-50);color:var(--blue-900);text-align:left;padding:8px 9px; border-bottom:1px solid var(--line);white-space:nowrap; } .sort-link{color:inherit;text-decoration:none;} .sort-link:hover{text-decoration:underline;} table.admin-table td{padding:8px 9px;border-bottom:1px solid var(--line);vertical-align:top;word-break:break-word;} table.admin-table tr:last-child td{border-bottom:none;} table.admin-table td:nth-child(11){max-width:130px;} table.admin-table td:nth-child(10){white-space:nowrap;} table.admin-table td:nth-child(1), table.admin-table td:nth-child(4), table.admin-table td:nth-child(5), table.admin-table td:nth-child(6){white-space:nowrap;} .status-select{ padding:6px 10px;border-radius:8px;border:1.5px solid var(--line);font-size:12.5px;font-weight:600; background:white;color:var(--blue-900); } .status-current{ font-size:11px;font-weight:500;color:var(--blue-900);background:var(--blue-100); display:inline-block;padding:3px 9px;border-radius:999px; } .copy-btn{ appearance:none;border:1px solid var(--line);background:var(--blue-50); color:var(--blue-700);border-radius:6px;width:18px;height:18px; display:inline-flex;align-items:center;justify-content:center; cursor:pointer;flex-shrink:0;padding:0;vertical-align:middle;margin-left:4px; transition:background .12s ease,border-color .12s ease,transform .08s ease; } .copy-btn svg{width:11px;height:11px;} .copy-btn:hover{background:var(--blue-100);border-color:var(--blue-500);} .copy-btn:active{transform:scale(0.9);} .copy-btn.copy-btn-copied{background:var(--ok-bg,#e6f7ed);border-color:var(--ok-line,#b9e6c9);color:var(--ok-text,#1a7f3c);} .login-wrap{ min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px; background:linear-gradient(180deg,var(--blue-50) 0%, #eef7fe 100%); } .login-card{ background:white;border-radius:16px;padding:32px;max-width:380px;width:100%;box-shadow:var(--shadow-lg); } .login-card h2{color:var(--blue-900);margin:0 0 20px;text-align:center;} /* Panel instalatora */ .installer-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;} .installer-card{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;} .installer-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;} .installer-card-title{font-weight:800;color:var(--blue-900);font-size:14.5px;} .installer-card-sub{font-size:12.5px;color:var(--muted);margin-top:2px;} .status-badge{ background:var(--blue-100);color:var(--blue-700);font-size:11px;font-weight:700; padding:4px 10px;border-radius:999px;white-space:nowrap; } .installer-card-body p{font-size:13px;color:var(--ink);margin:0 0 8px;line-height:1.5;} .installer-card-body a{color:var(--blue-600);} .installer-address-box{ background:var(--blue-50);border:1px solid var(--line);border-radius:8px;padding:9px 11px;margin:0 0 8px; } .installer-address-label{ font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:800;color:var(--blue-700);margin-bottom:3px; } .installer-address-box p{font-size:13px;color:var(--ink);margin:0;line-height:1.5;} .installer-address-same{font-size:12px;color:var(--muted);} .installer-date-set{ background:var(--blue-50);border:1px solid var(--line);border-radius:8px;padding:8px 10px; font-size:12.5px;color:var(--blue-900);margin-bottom:10px; } .installer-card-actions{display:flex;flex-direction:column;gap:8px;border-top:1px dashed var(--line);padding-top:12px;margin-top:4px;} .installer-date-row{display:flex;gap:8px;flex-wrap:wrap;} .installer-date-row input{ flex:1;min-width:160px;font-size:12.5px;padding:7px 8px;border:1.5px solid var(--line);border-radius:7px; } .installer-card-msg{font-size:12px;margin-top:6px;color:var(--muted);} .installer-card-msg.err{color:var(--danger);} .dt-picker{flex:1;min-width:160px;} .dt-picker-input{ width:100%;font-size:12.5px;padding:7px 8px;border:1.5px solid var(--line);border-radius:7px; background:white;cursor:pointer;color:var(--blue-900); } .dt-picker-input::placeholder{color:var(--muted);} .dtp-overlay{ display:none;position:fixed;inset:0;background:rgba(11,42,74,0.5);z-index:300; align-items:center;justify-content:center;padding:20px; } .dtp-overlay.open{display:flex;} .dtp-popup{background:white;border-radius:14px;max-width:320px;width:100%;padding:18px;} .dtp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;} .dtp-month{font-weight:700;color:var(--blue-900);font-size:14.5px;text-transform:capitalize;} .dtp-nav{ border:1.5px solid var(--line);background:white;border-radius:7px;width:28px;height:28px; cursor:pointer;color:var(--blue-900);font-size:13px; } .dtp-nav:hover{border-color:var(--blue-500);} .dtp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;} .dtp-daylabel{text-align:center;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;padding-bottom:4px;} .dtp-cell{ position:relative;text-align:center;font-size:12px;padding:6px 0 10px;border-radius:7px;cursor:pointer; color:var(--blue-900); } .dtp-cell:hover{background:var(--blue-50);} .dtp-cell.empty{cursor:default;} .dtp-cell.empty:hover{background:none;} .dtp-cell.today{font-weight:700;box-shadow:0 0 0 1.5px var(--blue-500) inset;} .dtp-cell.selected{background:var(--blue-500);color:white;} .dtp-cell.selected .dtp-cell-time{color:white;} .dtp-cell.busy{cursor:not-allowed;color:var(--muted);} .dtp-cell.busy:hover{background:none;} .dtp-cell-time{font-size:8.5px;font-weight:700;color:#a97600;line-height:1.3;margin-top:1px;} .dtp-cell.busy .dtp-cell-time{color:var(--danger);} .dtp-dot{ position:absolute;bottom:2px;left:50%;transform:translateX(-50%); width:5px;height:5px;border-radius:50%;background:var(--danger); } .dtp-dot-one{background:#e0a300;} .dtp-dot-two{background:var(--danger);} .dtp-time-row{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;color:var(--blue-900);} .dtp-time-row input{font-size:12.5px;padding:6px 8px;border:1.5px solid var(--line);border-radius:7px;} .dtp-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;} .dtp-legend{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:11px;color:var(--muted);} .dtp-legend .dtp-dot{position:static;transform:none;}