/* ============================================================================= DENTART 2026 — nowa identyfikacja wizualna ----------------------------------------------------------------------------- PALETA JEST GLOBALNA. Źródło prawdy: Edytor witryny → Style → Kolory (wp_global_styles ID 437) oraz theme.json motywu potomnego. Ten plik NIE nadpisuje już żadnych kolorów palety — tylko z niej korzysta. Sloty semantyczne (używa ich motyw, wtyczki i starsza treść): accent-1 #5a6047 zielen — przyciski, ikony, akcenty accent-2 #454b36 zielen ciemna — hover accent-3 #111d24 grafit — nagłówki, ciemne sekcje accent-4 #f3eee8 krem cieply Pełna skala marki (nowe projekty): brand-green, brand-green-dark, brand-ink, brand-muted, brand-cream, brand-cream-2, brand-line. ZASADA: layout i wygląd robimy w builderze (tła, ramki, paddingi, typografia, obrazy tła i gradienty = atrybuty bloków + presety). Ten plik zawiera WYŁĄCZNIE to, czego w builderze zrobić się nie da: • @font-face kroju nagłówkowego, • pseudoelementy (::after — strzałka w linku, stretched link w kafelku), • wyrównywanie wysokości kart i zdjęć do kolumny (height:100%), • wnętrze bloku base-block/post-carousel i pola Contact Form 7, • wyjątki RWD poza breakpointami rdzenia. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. KRÓJ NAGŁÓWKOWY — Playfair Display (zmienna oś wagi 400–700) Rodzina jest zarejestrowana w Global Styles (slug: playfair), więc wybierasz ją normalnie w builderze. Tu tylko pliki. UWAGA RODO: serwowane z fonts.gstatic.com. Przed produkcją: Edytor witryny → Style → Typografia → Biblioteka krojów → zainstaluj "Playfair Display" (WP pobierze woff2 do /wp-content/uploads/fonts/), a poniższe @font-face usuń. -------------------------------------------------------------------------- */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(https://fonts.gstatic.com/s/playfairdisplay/v40/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(https://fonts.gstatic.com/s/playfairdisplay/v40/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ----------------------------------------------------------------------------- 2. SKRÓTY DO PRESETÓW — czytelniejsze reguły poniżej. Nic nie nadpisują. -------------------------------------------------------------------------- */ :root { --dnt-green: var(--wp--preset--color--brand-green); --dnt-green-dark: var(--wp--preset--color--brand-green-dark); --dnt-ink: var(--wp--preset--color--brand-ink); --dnt-muted: var(--wp--preset--color--brand-muted); --dnt-line: var(--wp--preset--color--brand-line); } /* ----------------------------------------------------------------------------- 3. LINK ZE STRZAŁKĄ (pseudoelement — brak w builderze) -------------------------------------------------------------------------- */ .dnt-arrow-link a { text-decoration: none; display: inline-flex; align-items: center; gap: 0.65rem; } .dnt-arrow-link a::after { content: "\2192"; font-size: 1.15em; transition: transform 0.2s ease; } .dnt-arrow-link a:hover::after { transform: translateX(5px); } /* ----------------------------------------------------------------------------- 4. KAFELKI USŁUG — równa wysokość, hover, klikalny cały kafelek. Tło, ramka, radius i padding ustawiasz na bloku grupy w builderze. -------------------------------------------------------------------------- */ .dnt-card { position: relative; height: 100%; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .dnt-card:hover { border-color: var(--dnt-green) !important; box-shadow: 0 10px 24px rgba(17, 29, 36, 0.06); transform: translateY(-2px); } .dnt-card__title a { text-decoration: none; } .dnt-card__title a::after { content: ""; position: absolute; inset: 0; } /* ikony SVG wstawiane blokiem wp:html — centrowanie i kolor marki */ .dnt-ico { color: var(--dnt-green); display: flex; justify-content: center; line-height: 0; } /* ----------------------------------------------------------------------------- 5. HERO — blok Cover: obraz, gradient i wysokość ustawione w builderze. Rdzeń WP daje kontenerowi treści `width:auto` przy własnej pozycji treści (.has-custom-content-position.is-position-*), przez co tekst ucieka na lewą krawędź ekranu zamiast trzymać siatkę 1300 px. Selektor musi mieć wyższą specyficzność niż reguła rdzenia (stąd podwójna klasa + [class*=]). Alternatywa bez CSS: ustawić w bloku Cover pozycję treści na środek. -------------------------------------------------------------------------- */ .dnt-hero.has-custom-content-position.has-custom-content-position[class*="is-position-"] > .wp-block-cover__inner-container { width: 100%; } @media (max-width: 781px) { .dnt-hero { min-height: 520px !important; padding-top: 100px !important; } } /* Kadrowanie zdjęcia hero — działa na wszystkich szerokościach (reguła świadomie poza @media; wcześniej po tym bloku był nadmiarowy `}`). */ .dnt-hero img { object-position: 47% 27% !important; } /* ----------------------------------------------------------------------------- 6. OFERTA — zdjęcie w 3. kolumnie rozciągnięte na wysokość kolumny -------------------------------------------------------------------------- */ .dnt-offer__media { align-self: stretch; } .dnt-offer__media figure { height: 100%; margin: 0; } .dnt-offer__media img { height: 100%; width: 100%; object-fit: cover; } /* ----------------------------------------------------------------------------- 7. ZESPÓŁ — wnętrze bloku base-block/post-carousel. Wariant "opacity" celowo wypuszcza sąsiednie slajdy poza kontener, więc przycinamy je do kolumny i podnosimy strzałki nad dolną krawędź. -------------------------------------------------------------------------- */ .dnt-team__slider { overflow: hidden; } .dnt-team__slider .swiper-button-prev, .dnt-team__slider .swiper-button-next { top: auto; bottom: 0; margin-top: 0; } .dnt-team__slider .base-block-post-carousel__body { background-color: #fff; border: 1px solid var(--dnt-line); border-top: 0; border-radius: 0 0 6px 6px; text-align: left; } .dnt-team__slider .base-block-post-carousel__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 1.15rem; text-align: left; color: var(--dnt-ink); } .dnt-team__slider .base-block-post-carousel__subtitle { text-align: left; } /* ----------------------------------------------------------------------------- 8. OPINIE — równa wysokość kart w rzędzie -------------------------------------------------------------------------- */ .dnt-review-card { height: 100%; } /* ----------------------------------------------------------------------------- 9. CTA — formularz Contact Form 7 na ciemnym tle Covera. Etykiety są już białe z globalnego style.css; tu poprawiamy pola i submit (globalnie submit jest biały — na tym tle ma być zielony). -------------------------------------------------------------------------- */ .dnt-cta .wpcf7-form-control-wrap input, .dnt-cta .wpcf7-form-control-wrap textarea, .dnt-cta .wpcf7-form-control-wrap select { border: 1px solid #ffffff2e; border-radius: 6px; background: #ffffff; color: var(--dnt-ink); } .dnt-cta .wpcf7-form textarea { min-height: 110px; } .dnt-cta .wpcf7-list-item-label { font-size: 0.8rem; line-height: 1.5; opacity: 0.85; } .dnt-cta .wpcf7-submit { background: var(--dnt-green); color: #fff; border: 0; border-radius: 6px; padding: 1.05rem 2.2rem; font-size: 14px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease; } .dnt-cta .wpcf7-submit:hover { background: var(--dnt-green-dark); } /* ----------------------------------------------------------------------------- 10. STOPKA — ikony kontaktu (SVG w blokach wp:html) i linki -------------------------------------------------------------------------- */ .dnt-footer__ico { color: #a9b192; } .dnt-footer a { text-decoration: none; } .dnt-footer a:hover { text-decoration: underline; } /* ----------------------------------------------------------------------------- 11. RWD — wyjątki poza breakpointami rdzenia i motywu. Motyw zawija kolumny w 600–991.98 px, rdzeń WP poniżej 782 px. -------------------------------------------------------------------------- */ @media (max-width: 1080px) { .dnt-trust__cols { flex-wrap: wrap !important; } .dnt-trust__item { flex-basis: 50% !important; flex-grow: 0 !important; } .dnt-trust__item:nth-child(3) { border-left: 0; } } @media (max-width: 991.98px) { .dnt-offer__cols > .wp-block-column, .dnt-team__cols > .wp-block-column, .dnt-reviews__cols > .wp-block-column, .dnt-cta__inner > .wp-block-column { flex-basis: 100% !important; } .dnt-offer__media img { height: auto; aspect-ratio: 3 / 2; } } @media (max-width: 781px) { .dnt-trust__item { border-left: 0 !important; } .dnt-footer .wp-block-columns > .wp-block-column { flex-basis: 100% !important; } }