/* Theme Name: Zoom Connect — makieta Theme URI: https://zoom.pl/ Author: Zoom Design Description: Motyw przenoszący makietę sklepu Zoom Connect do WordPressa. Cała warstwa wizualna pochodzi z assets/css/styles.css — tego samego pliku, na którym stoi statyczna wersja projektu. Ten arkusz trzyma wyłącznie nagłówek motywu i korekty potrzebne w środowisku WordPressa. Version: 0.9.8 Requires at least: 6.0 Tested up to: 7.1 Requires PHP: 7.4 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: zoom-connect-makieta Tags: woocommerce, custom-menu, translation-ready */ /* -------------------------------------------------------------------------- Korekty pod WordPressa. Makieta nie zna paska administratora ani klas, które WordPress dokleja do , więc prostujemy to tutaj — bez ruszania styles.css, żeby wersja statyczna i motyw nie rozjechały się w przyszłości. -------------------------------------------------------------------------- */ .admin-bar .site-header { top: 32px; } /* Poniżej 782 px WordPress przestaje trzymać swój pasek na stałe — pasek przewija się razem ze stroną i wyjeżdża w górę. Gdyby nagłówek nadal odsuwał się o jego wysokość, przyklejałby się kawałek poniżej krawędzi ekranu, a przez szparę nad nim widać byłoby przewijaną treść (menu sprawiałoby wrażenie latającego). Dlatego na wąskich ekranach nagłówek przykleja się wprost do góry. */ @media screen and (max-width: 782px) { .admin-bar .site-header { top: 0; } } /* WordPress wstawia własne obrazki w treści — niech nie wychodzą poza kolumnę. */ .wp-caption, .wp-caption img, img.wp-post-image, .entry-content img { max-width: 100%; height: auto; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* Strony treściowe (regulamin, polityka, kontakt) — czytelna kolumna w typografii makiety, dopóki nie dostaną własnych szablonów. */ .zcm-strona { max-width: 760px; margin: 0 auto; padding: 64px 20px 96px; } .zcm-strona h1 { font-family: Outfit, system-ui, sans-serif; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; margin: 0 0 24px; } .zcm-strona p, .zcm-strona li { font-family: "Public Sans", system-ui, sans-serif; line-height: 1.65; } /* -------------------------------------------------------------------------- Sekcje karty produktu, których makieta nie miała w gotowym CSS (bo tam były wpisane na sztywno w HTML-u konkretnej strony). -------------------------------------------------------------------------- */ .zcm-filmy { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; } .zcm-film { margin: 0; } .zcm-film video { width: 100%; height: auto; display: block; border-radius: 4px; background: #0d1117; } .zcm-film figcaption { font-family: "Public Sans", system-ui, sans-serif; font-size: 14px; opacity: .8; margin-top: 10px; } .pdp-opis { max-width: 860px; } .pdp-opis h3 { font-family: Outfit, system-ui, sans-serif; margin: 28px 0 10px; } .pdp-opis ul { line-height: 1.7; } /* Upsell — jedna kolumna kafelków, jak w makiecie */ .zcm-upsell-lista { display: grid; gap: 14px; max-width: 860px; } .zcm-upsell-kafel { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 18px; padding: 14px 16px; background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: 4px; } .zcm-upsell-miniatura img { width: 84px; height: 84px; object-fit: cover; border-radius: 3px; display: block; } .zcm-upsell-nazwa { font-family: Outfit, system-ui, sans-serif; font-size: 17px; text-decoration: none; color: inherit; display: block; } .zcm-upsell-nazwa:hover { text-decoration: underline; } .zcm-upsell-cena { font-family: "Public Sans", system-ui, sans-serif; font-size: 15px; opacity: .75; margin-top: 4px; } @media (max-width: 640px) { .zcm-upsell-kafel { grid-template-columns: 64px 1fr; } .zcm-upsell-miniatura img { width: 64px; height: 64px; } .zcm-upsell-akcja { grid-column: 1 / -1; } } /* Formularz WooCommerce w panelu zakupu — dopasowanie do rytmu makiety */ .pdp-info form.cart { margin: 22px 0 18px; } .pdp-info form.cart .quantity input { padding: 10px; width: 72px; text-align: center; } .pdp-info .woocommerce-variation-add-to-cart { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } /* Listing kategorii / sklepu — siatka kafli w rytmie makiety */ .zcm-listing { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px; margin-top: 34px; } .zcm-listing-karta h3 a { color: inherit; text-decoration: none; } .zcm-listing-karta h3 a:hover { text-decoration: underline; } .zcm-listing-foto { display: block; margin-bottom: 14px; } .zcm-listing-foto img { width: 100%; height: auto; border-radius: 4px; display: block; } .zcm-kategoria-opis { max-width: 640px; opacity: .85; } .woocommerce-pagination { margin-top: 36px; font-family: "Public Sans", system-ui, sans-serif; } .woocommerce-pagination ul { display: flex; gap: 8px; list-style: none; padding: 0; } /* Haslo techniczne pod nazwa produktu */ .pdp-haslo { font-family: "Public Sans", system-ui, sans-serif; font-size: 15px; line-height: 1.55; opacity: .85; margin: 6px 0 10px; } .pdp-haslo .info-tip { margin-left: 5px; } /* Cena opakowania przy wybranym wariancie - mniejszym drukiem */ .zcm-opak-suma { font-size: .62em; font-weight: 400; opacity: .7; } /* Linia producenta na kaflach frezow (strona Frezy i szablony) */ .frez-prod { font-family: "Public Sans", system-ui, sans-serif; font-size: 12.5px; letter-spacing: .02em; color: var(--rust); margin: 2px 0 6px; } /* Plynaca woda w hero osprzetu (efekt ze starej strony) */ .hero-woda { position: relative; overflow: hidden; /* korekta Kornelii pkt 5: oddech miedzy okruszkami a grafika */ margin-top: 18px; } #zcm-woda { position: absolute; inset: 0; z-index: 1; } #zcm-woda canvas { width: 100%; height: 100%; display: block; } /* Wizytówka projektu B+R w dolnym pasku stopki (między © a językami). Dziedziczy mechanikę hover z .info-tip (assets/css/styles.css). */ .footer-projekt { display: inline-flex; align-items: center; gap: 13px; margin: 0; text-decoration: none; color: rgba(255, 255, 255, .55); vertical-align: 0; } .footer-projekt img { width: 46px; height: auto; opacity: .85; } .footer-projekt .fp-tekst { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; text-align: left; } .footer-projekt .fp-tekst b { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .9); } .footer-projekt .fp-tekst small { font-size: 12px; } .footer-projekt:hover .fp-tekst b, .footer-projekt:focus .fp-tekst b { color: #fff; } .footer-projekt .tip-box { width: 330px; border: 1px solid rgba(255, 255, 255, .18); } .hero-woda-tresc { position: relative; z-index: 2; pointer-events: none; /* fale maja dostawac ruch wskaznika */ } .hero-woda-tresc a, .hero-woda-tresc button { pointer-events: auto; } /* Kafel produktu wariantowego: lista wyboru + koszyk (stopy frezarskie) */ .zcm-kafel-war { display: flex; gap: 8px; align-items: center; flex: 1; flex-wrap: wrap; } .zcm-kafel-war select { font-family: "Public Sans", system-ui, sans-serif; font-size: 13.5px; padding: 9px 10px; border: 1px solid rgba(0, 0, 0, .18); border-radius: 3px; background: #fff; flex: 1 1 120px; min-width: 0; } .zcm-kafel-war .btn { flex: 1 1 auto; justify-content: center; } /* -------------------------------------------------------------------------- Listing kategorii — wyrównanie optyczne kafli. Karty mają różnej długości tytuły i różny blok akcji (wariantowe mają listę wyboru, proste nie), przez co czerwone przyciski lądowały na różnych wysokościach. Karta jest kolumną flex, blok akcji dosunięty do dołu, a w listingu zawierającym warianty karty bez listy dostają pustą rezerwę tej samej wysokości — wtedy przyciski stoją w jednej linii. -------------------------------------------------------------------------- */ .zcm-listing { align-items: stretch; } .zcm-listing-karta { display: flex; flex-direction: column; height: 100%; } .zcm-listing-karta .p-actions { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 10px; } .zcm-listing-karta .zcm-kafel-war { flex-direction: column; align-items: stretch; gap: 10px; flex: 0 0 auto; } .zcm-listing-karta .zcm-kafel-war select { flex: 0 0 auto; width: 100%; } .zcm-listing-karta .p-actions .btn { width: 100%; justify-content: center; white-space: nowrap; } .zcm-listing-karta .details { text-align: center; } /* rezerwa na listę wyboru — tylko gdy w tym listingu w ogóle jakaś jest */ .zcm-listing:has(select) .zcm-listing-karta .p-actions:not(:has(select))::before { content: ""; display: block; height: 41px; } /* Baner złączy: na telefonie poziomy lineup robi się nieczytelnym paskiem — podmieniamy go na trzy pełne animacje jedna pod drugą. */ .lineup-mobile { display: none; } @media (max-width: 760px) { .lineup-film { display: none; } .lineup-mobile { display: block; } .lineup-mobile-poz { display: block; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); } .lineup-mobile-poz video { width: 100%; height: auto; display: block; background: #fff; } .lineup-mobile-opis { display: flex; flex-direction: column; gap: 2px; padding: 12px 20px 16px; font-family: Outfit, system-ui, sans-serif; } .lineup-mobile-opis b { font-size: 17px; } .lineup-mobile-opis small { font-family: "Public Sans", system-ui, sans-serif; font-size: 13px; opacity: .72; } } /* Nagłówek podgrupy frezów wg średnicy chwytu (6 / 8 mm) */ .frez-chwyt { font-family: Outfit, system-ui, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rust); margin: 30px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .frez-chwyt:first-of-type { margin-top: 6px; } /* Lista wewnątrz ramki "Dla wszystkich złączy" na stronie obróbki płyt */ .callout-lista { margin: 10px 0 0; padding-left: 20px; line-height: 1.65; } .callout-lista li + li { margin-top: 8px; } /* -------------------------------------------------------------------------- Strona kontaktu. Numery i e-mail odsłaniane po kliknięciu — patrz main.js. -------------------------------------------------------------------------- */ .zcm-kontakt { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; margin: 32px 0 8px; } .zcm-kontakt h2 { font-family: Outfit, system-ui, sans-serif; font-size: 19px; letter-spacing: .01em; margin: 0 0 14px; } .zcm-kontakt dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; align-items: baseline; font-family: "Public Sans", system-ui, sans-serif; line-height: 1.6; } .zcm-kontakt dt { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; opacity: .6; white-space: nowrap; } .zcm-kontakt dd { margin: 0; } .kontakt-odsloniecie { font: inherit; font-family: "Public Sans", system-ui, sans-serif; background: transparent; border: 1px dashed var(--line); border-radius: 3px; padding: 4px 12px; cursor: pointer; color: var(--rust); letter-spacing: .02em; } .kontakt-odsloniecie:hover, .kontakt-odsloniecie:focus-visible { background: var(--surface); border-style: solid; } .kontakt-wartosc { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rust); font-variant-numeric: tabular-nums; } .kontakt-wartosc:hover { color: var(--rust); } .zcm-kontakt-nota { font-family: "Public Sans", system-ui, sans-serif; font-size: 13px; opacity: .62; margin-top: 6px; line-height: 1.55; } .zcm-rejestr { font-family: "Public Sans", system-ui, sans-serif; font-size: 14px; line-height: 1.75; margin-top: 6px; } .zcm-rejestr b { font-weight: 600; } /* Zakladka „Wspolpraca / wsparcie dla producentow" — rozwijana sekcja.

daje mechanike bez JavaScriptu; same dane kontaktowe i tak odslaniaja sie osobno, patrz main.js. */ .zcm-wspolpraca { margin: 40px 0 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); } .zcm-wspolpraca > summary { cursor: pointer; list-style: none; padding: 16px 20px; font-family: Outfit, system-ui, sans-serif; font-size: 17px; display: flex; align-items: center; gap: 12px; } .zcm-wspolpraca > summary::-webkit-details-marker { display: none; } .zcm-wspolpraca > summary::before { content: "+"; font-size: 20px; line-height: 1; color: var(--rust); width: 16px; text-align: center; } .zcm-wspolpraca[open] > summary::before { content: "–"; } .zcm-wspolpraca > summary:hover { color: var(--rust); } .zcm-wspolpraca-tresc { padding: 0 20px 20px; border-top: 1px solid var(--line); margin-top: -1px; padding-top: 18px; } .zcm-wspolpraca-tresc p { font-family: "Public Sans", system-ui, sans-serif; line-height: 1.65; max-width: 62ch; margin: 0 0 16px; } .zcm-osoba { font-family: Outfit, system-ui, sans-serif; font-size: 16px; margin: 0 0 10px; } .zcm-osoba small { display: block; font-family: "Public Sans", system-ui, sans-serif; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; opacity: .6; margin-top: 3px; } /* -------------------------------------------------------------------------- Dokumenty formalne: regulamin, polityka prywatnosci. Dluga tresc do czytania — waski lamacz, wyrazna hierarchia paragrafow, tabele w ramkach. -------------------------------------------------------------------------- */ .zcm-strona h2 { font-family: Outfit, system-ui, sans-serif; font-size: 20px; line-height: 1.3; margin: 40px 0 14px; padding-top: 22px; border-top: 1px solid var(--line); } .zcm-strona h2:first-of-type { border-top: 0; padding-top: 0; } .zcm-strona h3 { font-family: Outfit, system-ui, sans-serif; font-size: 17px; margin: 26px 0 10px; } .zcm-doc-meta { font-family: "Public Sans", system-ui, sans-serif; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; opacity: .55; margin: 0 0 26px; } .zcm-strona table { border-collapse: collapse; width: 100%; margin: 18px 0 22px; font-family: "Public Sans", system-ui, sans-serif; font-size: 15px; } .zcm-strona th, .zcm-strona td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); } .zcm-strona th { font-size: 13px; letter-spacing: .05em; text-transform: uppercase; opacity: .65; font-weight: 500; } .zcm-strona td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; } .zcm-strona hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0 34px; } .zcm-formularz { border: 1px solid var(--line); border-radius: 4px; padding: 22px 24px; background: var(--surface); font-family: "Public Sans", system-ui, sans-serif; line-height: 1.9; } .zcm-formularz p { margin: 0 0 12px; } /* Spis paragrafow na gorze dlugiego dokumentu */ .zcm-spis { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 18px 24px; margin: 0 0 34px; } .zcm-spis ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 34px; font-family: "Public Sans", system-ui, sans-serif; font-size: 14.5px; line-height: 1.85; } .zcm-spis a { color: inherit; text-decoration: none; } .zcm-spis a:hover { color: var(--rust); text-decoration: underline; } @media (max-width: 640px) { .zcm-spis ol { columns: 1; } } /* -------------------------------------------------------------------------- Baner zgody na cookies. Siedzi przy dolnej krawedzi, nie zaslania tresci na cale okno — ma poinformowac, a nie zablokowac korzystanie ze sklepu. -------------------------------------------------------------------------- */ .zcm-cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; background: var(--bg); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 12px 40px rgba(0, 0, 0, .16); max-width: 560px; margin: 0 auto; } .zcm-cookies[hidden] { display: none; } .zcm-cookies-tresc { padding: 22px 24px; } .zcm-cookies h2 { font-family: Outfit, system-ui, sans-serif; font-size: 17px; margin: 0 0 8px; } .zcm-cookies p { font-family: "Public Sans", system-ui, sans-serif; font-size: 14px; line-height: 1.6; margin: 0 0 16px; } .zcm-cookies a { color: var(--rust); } .zcm-cookies-opcje { display: grid; gap: 10px; margin: 0 0 18px; padding: 14px 16px; background: var(--surface); border-radius: 4px; } .zcm-cookies-opcje[hidden] { display: none; } .zcm-cookies-opcje label { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-family: "Public Sans", system-ui, sans-serif; font-size: 13.5px; line-height: 1.5; cursor: pointer; } .zcm-cookies-opcje input[disabled] + span { opacity: .62; } .zcm-cookies-przyciski { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .zcm-cookies-przyciski .btn { font-size: 14px; padding: 9px 18px; } .zcm-cookies-link { background: none; border: 0; padding: 9px 4px; font-family: "Public Sans", system-ui, sans-serif; font-size: 14px; color: inherit; opacity: .7; cursor: pointer; text-decoration: underline; } .zcm-cookies-link:hover { opacity: 1; color: var(--rust); } .zcm-cookies-przyciski [hidden] { display: none; } @media (max-width: 520px) { .zcm-cookies { left: 10px; right: 10px; bottom: 10px; } .zcm-cookies-tresc { padding: 18px; } .zcm-cookies-przyciski .btn { flex: 1 1 auto; } } /* Produkt czasowo niedostepny (frezy przed uzgodnieniem z dystrybutorem). Komunikat zajmuje miejsce przycisku, wiec musi miec podobna wage wizualna — inaczej kafel wyglada na uszkodzony. */ .zcm-wkrotce { display: inline-block; font-family: "Public Sans", system-ui, sans-serif; font-size: 14px; letter-spacing: .01em; color: var(--ink-muted, #6b6660); background: var(--surface); border: 1px dashed var(--line); border-radius: 3px; padding: 9px 16px; } .zcm-wkrotce-karta { font-size: 15px; padding: 12px 20px; margin: 22px 0 10px; } .zcm-wkrotce-nota { font-family: "Public Sans", system-ui, sans-serif; font-size: 13.5px; line-height: 1.6; opacity: .72; max-width: 52ch; margin: 0 0 18px; }