/* -------------- POCZĄTEK: Twój obecny style.css (bez zmian w środku) -------------- */ /* Theme Name: Termo Nowoczesny Theme URI: https://termonowoczesny.pl Author: Termo Nowoczesny Description: Finalny, dopracowany motyw z efektem morphinglass, sekcjami ofertowymi, realizacjami (CPT), edytorem blokowym i lekkimi animacjami. Bez zbędnych wtyczek. Version: 1.1.1 Requires at least: 6.5 Requires PHP: 8.2 Text Domain: termonowoczesny */ /* ========= Accessibility Styles ========= */ .screen-reader-text, .skip-link { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .skip-link:focus { position: absolute !important; left: 6px !important; top: 7px !important; width: auto !important; height: auto !important; padding: 8px 16px !important; margin: 0 !important; clip: auto !important; background: #000 !important; color: #fff !important; text-decoration: none !important; font-weight: 600 !important; border-radius: 4px !important; z-index: 100000 !important; } /* Focus styles for better keyboard navigation */ :focus { outline: 2px solid var(--blue, #238DFF) !important; outline-offset: 2px !important; } /* Remove outline only when mouse is used */ .no-keyboard-nav :focus { outline: none !important; } /* High contrast focus for buttons and links */ button:focus, a:focus, input:focus, textarea:focus, select:focus { outline: 2px solid var(--blue, #238DFF) !important; outline-offset: 2px !important; box-shadow: 0 0 0 4px rgba(35, 141, 255, 0.2) !important; } /* Ensure minimum touch target size */ button, .btn, a.btn, input[type="submit"], input[type="button"] { min-height: 44px !important; min-width: 44px !important; } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========= Core tokens ========= */ :root{ --fg:#12151F; --muted:#606677; --magenta:#E61478; --blue:#238DFF; --green:#24C684; --card: rgba(255, 255, 255, 0.7); --radius:22px; --radius-lg:28px; --shadow:0 10px 40px rgba(20,20,43,.14); --shadow-lg:0 18px 60px rgba(12,12,26,.18); /* Akcenty na slider/parallax (fallback dla wcześniejszych --tw-*) */ --accent-1: 230, 20, 120; /* magenta */ --accent-2: 35, 141, 255; /* blue */ --accent-3: 36, 198, 132; /* green */ /* ======= Gałki z Customizera (mają być nadpisane w przez tn-layout-vars) ======= */ --tn-header-gap:16px; --tn-header-justify:space-between; --tn-menu-gap:8px; --tn-menu-wrap:nowrap; --tn-menu-radius:12px; --tn-menu-pad-y:10px; --tn-menu-hover-bg:#eef2ff; --tn-menu-active-bg:#dbeafe; --tn-icon-size:42px; --tn-logo-h:60px; --tn-footer-cols-dk:4; --tn-footer-cols-md:2; --tn-footer-cols-sm:1; --tn-footer-gap:24px; --tn-footer-icon:18px; --tn-footer-hover:#111827; } /* ========= Reset / base ========= */ *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:var(--fg); background-color: transparent; line-height:1.65; overflow-x:hidden; transition: background-color .2s ease, color .2s ease; } a{color:var(--magenta);text-decoration:none} a:hover{opacity:.92} /* do 4K */ .container{width:min(3840px,94vw);margin:0 auto} .site-main { background-color: transparent; } /* ========= Layout helpers ========= */ .section{padding:clamp(56px,6vw,120px) 0} .grid{display:grid;gap:clamp(16px,2.5vw,28px)} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:940px){.grid-2,.grid-3{grid-template-columns:1fr}} /* ========= Header / navbar ========= */ .site-header{ position:sticky;top:0;z-index:1000; background:linear-gradient(180deg,#ffffffcc,#ffffff90); backdrop-filter:blur(10px) saturate(140%); border-bottom:1px solid #0001 } .navbar{ display:flex;align-items:center; justify-content:var(--tn-header-justify); gap:var(--tn-header-gap); padding:12px 0; } .brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.3px} .brand img{max-height:var(--tn-logo-h);height:auto;width:auto;border-radius:12px;box-shadow:0 6px 24px #0002} .brand .brand-title{display:block} /* ukryty napis obok logo (zostawiam, gdyby był potrzebny) */ .header-actions{display:flex;align-items:center;gap:12px} .nav .menu{ display:flex; flex-wrap:var(--tn-menu-wrap); gap:var(--tn-menu-gap); list-style:none;margin:0;padding:0 } .nav .menu>li>a{ display:inline-flex;align-items:center; padding:var(--tn-menu-pad-y) 12px; border-radius:var(--tn-menu-radius); transition:background-color .2s ease, color .2s ease; } .nav .menu>li>a:hover{background:var(--tn-menu-hover-bg)} .nav .menu>li.current-menu-item>a, .nav .menu>li.current_page_item>a{background:var(--tn-menu-active-bg)} /* Mobile menu */ @media(max-width:860px){ .nav .menu{ flex-direction:column; width:100%; gap:12px; } .header-actions{ width:100%; justify-content:flex-start; } } /* ========= Hero / morph ========= */ .hero{position:relative;isolation:isolate;padding:clamp(80px,10vw,160px) 0 60px} .hero .morph-card{ position:relative;border-radius:var(--radius-lg);padding:28px; background:linear-gradient(135deg,#ffffff80,#ffffff66); backdrop-filter:blur(14px) saturate(140%); border:1px solid #fff6;box-shadow:var(--shadow) } .morph-float{ position:absolute;inset:-35%; background: radial-gradient(60% 60% at 60% 40%, #e614783f, transparent 60%), radial-gradient(40% 40% at 30% 70%, #238dff40, transparent 60%), radial-gradient(30% 30% at 70% 80%, #24c68440, transparent 60%); filter: blur(50px); animation:drift 18s ease-in-out infinite alternate; pointer-events:none } @keyframes drift{0%{transform:translate(-6%,-4%) scale(1)}50%{transform:translate(4%,3%) scale(1.05)}100%{transform:translate(-2%,2%) scale(1.02)}} /* ========= Cards & buttons ========= */ .card{position:relative;background:var(--card);border:1px solid #0001;border-radius:20px;padding:24px;box-shadow:var(--shadow);overflow:hidden} .btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:0;border-radius:14px;font-weight:700;color:#fff; background:linear-gradient(135deg,var(--magenta),var(--blue));box-shadow:var(--shadow);cursor:pointer} .btn.ghost{background:transparent;color:var(--fg);border:1px solid #0002} /* ========= Badges / pricing ========= */ .badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#24c68422;border:1px solid #24c68444;color:#087152;font-weight:600} .pricing{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))} .pricing .plan{padding:26px;border-radius:20px;background:#fff;border:1px solid #0001;box-shadow:var(--shadow)} .pricing .price{font-size:34px;font-weight:800;margin:6px 0} @media(max-width:940px){.pricing{grid-template-columns:1fr}} /* ========= Reveal ========= */ .reveal{opacity:0;transform:translateY(16px);transition:all .7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:translateY(0)} /* ========= Footer ========= */ .site-footer{padding:40px 0 80px;color:var(--muted)} .site-footer .footer-grid{display:grid;gap:var(--tn-footer-gap)} @media (min-width:1025px){ .site-footer .footer-grid{grid-template-columns:repeat(var(--tn-footer-cols-dk),minmax(0,1fr));} } @media (min-width:641px) and (max-width:1024px){ .site-footer .footer-grid{grid-template-columns:repeat(var(--tn-footer-cols-md),minmax(0,1fr));} } @media (max-width:640px){ .site-footer .footer-grid{grid-template-columns:repeat(var(--tn-footer-cols-sm),minmax(0,1fr));} } .site-footer .footer-grid a:hover{color:var(--tn-footer-hover)} .site-footer .footer-grid svg, .site-footer .footer-grid i{font-size:var(--tn-footer-icon);width:auto;height:auto} /* ========= Add-ons ========= */ /* Dark mode root tokens (opcjonalnie używane przez Ciebie) */ :root[data-theme="dark"]{ --tw-bg: 11 15 26; --tw-fg: 238 242 255; --tw-muted: 154 163 178; } /* Slider */ .slider{position:relative;overflow:hidden} .slider-track{display:flex;gap:16px;scroll-snap-type:x mandatory;overflow-x:auto;padding-bottom:10px} .slider-item{flex:0 0 80%;scroll-snap-align:center} @media(min-width:900px){.slider-item{flex-basis:31%}} .slider button.prev,.slider button.next{ position:absolute;top:50%;transform:translateY(-50%);border:0;border-radius:50%;width:40px;height:40px;cursor:pointer; background:linear-gradient(135deg, rgb(var(--accent-1)), rgb(var(--accent-2)));color:#fff;box-shadow:var(--shadow-lg) } .slider button.prev{left:10px}.slider button.next{right:10px} /* FAQ */ .faq .q{cursor:pointer;font-weight:700;margin:6px 0;padding:12px;border-radius:12px;background:rgba(255,255,255,.7);border:1px solid #0001} .faq .a{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 12px} .faq .item.open .a{max-height:400px;padding:12px} /* Cookie bar */ .cookiebar{ position:fixed;bottom:16px;left:50%;transform:translateX(-50%); z-index:2000;display:none;max-width:100%;width:min(720px,94vw); background:rgba(255,255,255,.9);border:1px solid #0001;border-radius:14px; padding:12px 16px;box-shadow:var(--shadow-lg) } .cookiebar.show{display:block} /* Parallax helpers */ .parallax{position:relative;overflow:hidden} .parallax .layer{position:absolute;inset:0;pointer-events:none;transform:translateZ(0)} .parallax .layer.one{background:radial-gradient(300px 200px at 20% 10%, rgba(var(--accent-2), .25), transparent 60%)} .parallax .layer.two{background:radial-gradient(360px 240px at 80% 70%, rgba(var(--accent-3), .22), transparent 60%)} /* ========= Forms ========= */ /* YouTube proposal form */ #termo-yt{ display:grid; gap:14px; } #termo-yt h3{ margin:0 0 6px; grid-column:1/-1; } #termo-yt input, #termo-yt textarea{ width:100%; padding:12px 14px; border:1px solid #0001; border-radius:12px; background:var(--card,#fff); color:var(--fg,#111); box-shadow:0 6px 18px rgba(0,0,0,.06); } #termo-yt textarea{ min-height:120px; resize:vertical; } #termo-yt .btn{ align-self:start; height:44px; padding:0 18px; } #termo-yt .form-msg{ grid-column:1/-1; margin:4px 0 0; font-weight:600; } #termo-yt .form-msg:empty{ display:none; } @media (min-width:860px){ #termo-yt{ grid-template-columns: 1.1fr 2fr auto; align-items:start; } } /* Kontakt – spójny wygląd */ #termo-contact{ display:grid; gap:14px; } #termo-contact h3{ margin:0 0 6px; grid-column:1/-1; } #termo-contact input, #termo-contact textarea{ width:100%; padding:12px 14px; border:1px solid #0001; border-radius:12px; background:var(--card,#fff); color:var(--fg,#111); box-shadow:0 6px 18px rgba(0,0,0,.06); } #termo-contact textarea{ min-height:120px; resize:vertical; } @media (min-width:860px){ #termo-contact{ grid-template-columns: 1fr 1fr 1fr auto; align-items:start; } #termo-contact textarea{ grid-column: 1 / span 3; } #termo-contact .btn{ grid-column: 4; } } #termo-contact .btn{ align-self:start; height:44px; padding:0 18px; } #termo-contact .form-msg{ grid-column:1/-1; margin:4px 0 0; font-weight:600; } #termo-contact .form-msg:empty{ display:none; } /* Dark mode dopasowanie formularzy */ :root[data-theme="dark"] #termo-yt input, :root[data-theme="dark"] #termo-yt textarea, :root[data-theme="dark"] #termo-contact input, :root[data-theme="dark"] #termo-contact textarea{ background:rgba(16,22,40,.9); border-color:#fff1; color:#eef2ff; } /* -------------- KONIEC: Twój obecny style.css -------------- */ /* === OVERRIDES TYLKO DLA STRONY ID=73 (Kalkulator) === */ .page-id-73{ /* Gutenberg (jeśli użyty) – wymuszamy pełną szerokość tylko tutaj */ --wp--style--global--content-size: 100vw; --wp--style--global--wide-size: 100vw; } /* wyzerowanie wszystkich „wąskich” wrapperów tylko na 73 */ .page-id-73 .container, .page-id-73 .wrap, .page-id-73 .site-main, .page-id-73 .entry-content, .page-id-73 .content{ width:100vw !important; max-width:100vw !important; padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; } /* FSE wrapper (jeśli jest) */ .page-id-73 .wp-site-blocks{ padding-left:0 !important; padding-right:0 !important; max-width:100vw !important; } /* pewność, że nic się nie przycina po drodze */ .page-id-73 main, .page-id-73 #primary, .page-id-73 #content{ overflow:visible !important; } /* sekcje na 73 bez bocznych paddingów */ .page-id-73 .section{ padding-left:0 !important; padding-right:0 !important; }