/* ========================================================================= DiBiSKreativ — Redesign-Styles (copy-paste-fertig) --------------------------------------------------------------------------- Reihenfolge der Umsetzung: 1. Farben + Typo-FONTS werden GLOBAL im Kadence-Customizer gesetzt (siehe KADENCE-EINSTELLWERTE.md). Diese Datei setzt NUR, was CSS-seitig gehört: lokale Font-Files, Feintuning, wiederkehrende Bausteine. 2. Keine Hex-Werte in einzelne Blöcke mehr — immer die Palette-Slots (var(--global-palette1) … palette10) nutzen. ========================================================================= */ /* ------------------------------------------------------------------------- 1 · FONTS — DSGVO-konform lokal (kein Google-CDN) woff2-Dateien nach dibiskreativ-child/assets/fonts/ legen. Marcellus: 400 · Mulish: 400/500/600/700 ------------------------------------------------------------------------- */ @font-face{ font-family:"Marcellus"; src:url("fonts/marcellus-v400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"Mulish"; src:url("fonts/mulish-v400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"Mulish"; src:url("fonts/mulish-v600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; } @font-face{ font-family:"Mulish"; src:url("fonts/mulish-v700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } /* ------------------------------------------------------------------------- 1b · GLOBALE KADENCE-PALETTE per CSS gesetzt Ersetzt das manuelle Customizer-Setzen: definiert die 10 Palette-Slots, die das Kadence-Theme + die .has-theme-palette-*-Klassen nutzen. !important, damit es Kadence-Defaults sicher überschreibt (Front-End 1:1 zum Design). ------------------------------------------------------------------------- */ :root{ --global-palette1:#C8912F !important; /* Gold / Ocker – Highlight · CTA */ --global-palette2:#E4B75A !important; /* Gold hell – Hover · Highlight */ --global-palette3:#211B14 !important; /* Tinte / Ink – Text · tiefste BG */ --global-palette4:#3A2A1C !important; /* Espresso – dram. Bänder */ --global-palette5:#6B4E2E !important; /* Walnuss */ --global-palette6:#8B6A3E !important; /* Bronze */ --global-palette7:#F3E9D7 !important; /* Pergament */ --global-palette8:#F7F3EA !important; /* Creme – Seiten-BG */ --global-palette9:#FFFFFF !important; /* Weiß */ --global-palette10:#7C2D2A !important; /* Siegelrot */ } /* ------------------------------------------------------------------------- 2 · TOKENS (Spiegel der globalen Kadence-Palette — zur CSS-Nutzung) Die eigentliche Definition passiert im Customizer; hier nur Alias-Namen für lesbare Regeln unten. NICHT zusätzlich in Blöcke schreiben. ------------------------------------------------------------------------- */ :root{ --dbk-gold: var(--global-palette1); /* #C8912F Signatur · CTA */ --dbk-gold-hell: var(--global-palette2); /* #E4B75A Hover · Highlight */ --dbk-ink: var(--global-palette3); /* #211B14 Text · tiefste Fläche */ --dbk-espresso: var(--global-palette4); /* #3A2A1C dramatische Bänder */ --dbk-walnuss: var(--global-palette5); /* #6B4E2E */ --dbk-bronze: var(--global-palette6); /* #8B6A3E */ --dbk-pergament: var(--global-palette7); /* #F3E9D7 */ --dbk-creme: var(--global-palette8); /* #F7F3EA Seiten-BG */ --dbk-weiss: var(--global-palette9); /* #FFFFFF */ --dbk-oxblood: var(--global-palette10); /* #7C2D2A Zweitakzent, selten */ } /* ------------------------------------------------------------------------- 3 · TYPOGRAFIE Font-Familien werden global gesetzt; diese Regeln sichern die Zuordnung und die Display-Skala der Startseite ab, falls im Customizer nicht 1:1 abbildbar (Kadence Free kennt keine clamp()-Größen). ------------------------------------------------------------------------- */ :root{ --global-body-font-family:"Mulish","Helvetica Neue",Arial,sans-serif; --global-heading-font-family:"Marcellus",Georgia,"Times New Roman",serif; } body,input,select,textarea{ font-family:var(--global-body-font-family); font-size:17px; line-height:1.65; color:var(--dbk-ink); } h1,h2,h3,h4,h5,h6{ font-family:var(--global-heading-font-family); font-weight:400; /* Marcellus hat nur einen Schnitt */ line-height:1.08; color:var(--dbk-ink); } /* Fließende Display-Größen (Startseiten-Hero & Sektions-Titel) */ .entry-content h1, .wp-block-kadence-advancedheading h1{ font-size:clamp(42px,6.6vw,86px); } h2,.wp-block-kadence-advancedheading h2{ font-size:clamp(30px,4vw,50px); } h3,.wp-block-kadence-advancedheading h3{ font-size:clamp(22px,2.4vw,26px); } /* Kicker / Eyebrow — Gold, gesperrt, versal. Klasse an ein AdvHeading geben. */ .dbk-kicker{ font-family:var(--global-body-font-family); font-weight:700; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--dbk-bronze); } /* Auf dunklen Bändern heller: */ .has-theme-palette-4-background-color .dbk-kicker, .has-theme-palette-3-background-color .dbk-kicker{ color:var(--dbk-gold-hell); } /* ------------------------------------------------------------------------- 4 · BUTTONS / CTA-SYSTEM (Kadence Advanced Button) Primär = Gold gefüllt · Sekundär = Outline · Radius 6px statt Pille. Die Farben kommen global (Button-Styles im Customizer); hier Radius, Padding, Hover und die Outline-Variante. ------------------------------------------------------------------------- */ .wp-block-kadence-advancedbtn .kb-button, .wp-block-kadence-advancedbtn .kt-button{ border-radius:6px !important; font-family:var(--global-body-font-family); font-weight:700; letter-spacing:.01em; padding:14px 26px; transition:background-color .18s ease, color .18s ease, border-color .18s ease; } /* Primär */ .wp-block-kadence-advancedbtn .kb-button.kb-btn-global-fill{ background:var(--dbk-gold); color:var(--dbk-ink); border:1.5px solid var(--dbk-gold); } .wp-block-kadence-advancedbtn .kb-button.kb-btn-global-fill:hover{ background:var(--dbk-gold-hell); border-color:var(--dbk-gold-hell); color:var(--dbk-ink); } /* Sekundär (Outline) — Klasse is-style-outline am Button */ .wp-block-kadence-advancedbtn .kb-button.is-style-outline{ background:transparent; color:var(--dbk-ink); border:1.5px solid var(--dbk-walnuss); } .wp-block-kadence-advancedbtn .kb-button.is-style-outline:hover{ background:var(--dbk-ink); color:var(--dbk-creme); border-color:var(--dbk-ink); } /* Outline auf dunklem Grund */ .has-theme-palette-3-background-color .kb-button.is-style-outline, .has-theme-palette-4-background-color .kb-button.is-style-outline{ color:var(--dbk-creme); border-color:var(--dbk-gold); } .has-theme-palette-3-background-color .kb-button.is-style-outline:hover, .has-theme-palette-4-background-color .kb-button.is-style-outline:hover{ background:rgba(200,145,47,.16); color:var(--dbk-creme); } /* ------------------------------------------------------------------------- 5 · SEKTIONS-KOPF-SYSTEM (Gold-Kicker + feine Linie, einheitlich) Optionale Deko-Linie: Klasse .dbk-rule an einen leeren Divider/Heading. ------------------------------------------------------------------------- */ .dbk-rule::before{ content:""; display:inline-block; width:34px; height:2px; background:var(--dbk-gold); vertical-align:middle; margin-right:12px; } /* ------------------------------------------------------------------------- 6 · MÄRKTE — Terminkarten (Ausgabe des Shortcodes [dibis_next_markets]) Datum-Kopf dunkel, Karte hell. Klassen ggf. an die Shortcode-Ausgabe anpassen (hier: .dbk-market-card / .dbk-market-date). ------------------------------------------------------------------------- */ .dbk-market-card{ background:#FFFCF6; border:1px solid #E4D6BB; border-radius:12px; overflow:hidden; } .dbk-market-date{ background:var(--dbk-ink); color:var(--dbk-gold-hell); font-family:var(--global-heading-font-family); padding:16px 22px; display:flex; justify-content:space-between; align-items:center; } .dbk-market-card h3{ margin:0 0 8px; font-size:22px; } /* ------------------------------------------------------------------------- 7 · KONTAKT — Formularfelder (Kadence Advanced Form) auf Tokens ------------------------------------------------------------------------- */ .wp-block-kadence-advanced-form input[type=text], .wp-block-kadence-advanced-form input[type=email], .wp-block-kadence-advanced-form textarea{ background:#fff; border:1.5px solid #E4D6BB; border-radius:8px; padding:12px 14px; font-size:15px; color:var(--dbk-ink); } .wp-block-kadence-advanced-form input:focus, .wp-block-kadence-advanced-form textarea:focus{ border-color:var(--dbk-gold); outline:none; box-shadow:0 0 0 3px rgba(200,145,47,.16); } /* ------------------------------------------------------------------------- 8 · GALERIE — Mosaik (Kadence Advanced Gallery, Masonry/Grid) Ruhige Radien, auf dunklem Band. Deko bleibt Plugin-seitig. ------------------------------------------------------------------------- */ .wp-block-kadence-advancedgallery figure img{ border-radius:12px; } /* ------------------------------------------------------------------------- 9 · HEADER — Logo (grauer Fledermaus-Logo) auf transparentem Hero sichtbar Sanfter heller Halo hinter dem Logo; verschwindet auf weißem Sticky-Header. ------------------------------------------------------------------------- */ .transparent-header .site-branding a.brand, .mobile-transparent-header .site-branding a.brand{ border-radius:60px; background:radial-gradient(ellipse 60% 70% at 50% 46%, rgba(247,243,234,.20) 0%, rgba(247,243,234,.06) 46%, rgba(247,243,234,0) 74%); } /* Sticky-Header (nach Scroll) bleibt weiß → kein Halo nötig */ .site-header-row-container.item-is-fixed .site-branding a.brand{ background:none; } /* ------------------------------------------------------------------------- 10 · MOBILER STICKY-CTA (dauerhaft sichtbar, nur < 860px) In WP als kleines HTML-Snippet in den Footer (oder via Hook) ausgeben:
Unikat anfragen Märkte
------------------------------------------------------------------------- */ .dbk-sticky-cta{ display:none; } @media (max-width:860px){ .dbk-sticky-cta{ display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:50; padding:9px 14px; background:rgba(23,16,9,.97); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-top:1px solid #3a2c1a; } .dbk-sticky-cta a{ flex:1; text-align:center; padding:12px 0; border-radius:6px; font-family:var(--global-body-font-family); font-weight:700; font-size:14px; text-decoration:none; } .dbk-cta-primary{ background:var(--dbk-gold); color:var(--dbk-ink); } .dbk-cta-secondary{ background:transparent; color:var(--dbk-creme); border:1.5px solid var(--dbk-gold); } body{ padding-bottom:70px; } /* Platz für die Leiste */ } /* ------------------------------------------------------------------------- 11 · FOOTER — Tinte/Espresso mit Gold-Links (Farbe global über Palette4) ------------------------------------------------------------------------- */ #colophon .footer-navigation a:hover{ color:var(--dbk-gold-hell); }