/* ========================================================================== Bruecke zwischen Blocksy und dem Designsystem -------------------------------------------------------------------------- Hello Elementor war ein nahezu leeres Eltern-Theme. Blocksy bringt ein vollstaendiges Grundgeruest mit: eigene Schriftgroessen, Farben, Abstaende und Knopf-Stile, gesteuert ueber CSS-Variablen mit dem Praefix --theme-. Diese Datei stellt die Werte des Designsystems wieder her - jede Regel mit dem Grund, warum sie noetig ist. Sie laedt nach style.css und vor der Elementor-Bruecke. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Grundwerte Blocksy setzt Schrift, Textfarbe und Zeilenhoehe ueber eigene Variablen auf . Ohne diese Zuweisung erscheint die Seite in Blocksys Standard- Typografie statt in Archivo/Inter. -------------------------------------------------------------------------- */ body { --theme-font-family: var(--font-body); --theme-font-weight: 400; --theme-text-color: var(--text); --theme-link-initial-color: var(--text); --theme-link-hover-color: var(--cyan-deep); --theme-headings-color: var(--text); --theme-border-color: var(--line); --theme-content-spacing: 0; font-family: var(--font-body); color: var(--text); background: var(--bg); } /* Blocksy vergibt eigene Abstaende zwischen Fliesstextbloecken. Die Abstaende des Designsystems sind feiner abgestimmt. */ .entry-content > * + * { margin-top: 0; } /* -------------------------------------------------------------------------- 2. Ueberschriften Blocksy setzt Groesse und Gewicht ueber --theme-font-size je Ebene. Das Designsystem arbeitet mit einer fluiden Skala (--step-*). -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .entry-content h1, .entry-content h2, .entry-content h3 { font-family: var(--font-display); color: inherit; letter-spacing: -.03em; } /* -------------------------------------------------------------------------- 3. Breiten Die Seiten nutzen Elementors Vorlage "elementor_header_footer", die den Inhaltsbereich des Themes umgeht. Blocksy legt trotzdem eine Maximalbreite und Innenabstaende auf seine Container - sichtbar als schmaler Streifen mit weissen Raendern. -------------------------------------------------------------------------- */ .elementor-page #main-container, .elementor-page .ct-container, .elementor-page .ct-container-full, .elementor-page article.post { max-width: none; width: 100%; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } /* Blocksy haengt an den Inhaltsbereich einen Abstand nach unten, der unter dem Fussbereich als heller Streifen auftaucht. */ .elementor-page #main-container > .ct-container, .elementor-page .site-main { padding-block: 0; } /* -------------------------------------------------------------------------- 4. Kopf- und Fussbereich Beide kommen vom Header-Footer-Builder. Blocksys eigene Leisten muessen verschwinden, sonst erscheinen sie zusaetzlich. -------------------------------------------------------------------------- */ header.ct-header:not(.ehf-header), footer.ct-footer:not(.ehf-footer) { display: none; } /* -------------------------------------------------------------------------- 5. Knoepfe und Verweise Blocksy faerbt Knoepfe ueber --theme-button-*. Innerhalb der eigenen Komponenten soll ausschliesslich das Designsystem gelten. -------------------------------------------------------------------------- */ .btn, .btn:hover, .btn:focus-visible { --theme-button-background-initial-color: transparent; --theme-button-background-hover-color: transparent; --theme-button-text-initial-color: inherit; --theme-button-text-hover-color: inherit; --theme-button-padding: 0; --theme-button-border-radius: 0; text-decoration: none; } a { text-decoration: none; } /* -------------------------------------------------------------------------- 6. Nach oben Blocksy bringt einen eigenen Zurueck-nach-oben-Knopf mit. Das Designsystem hat bereits einen (.to-top), sonst stehen zwei uebereinander. -------------------------------------------------------------------------- */ .ct-back-to-top { display: none !important; }