/* Theme Name: GeKo Labs Theme URI: https://geko-labs.de Author: GeKo Labs GmbH Description: Eigenes Block-Theme (FSE) für die GeKo Labs Homepage – Josefin Sans/Instrument Serif, lokal gehostete Fonts, keine Page-Builder. Version: 1.0.0 Requires at least: 6.6 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: geko-labs */ /* Base resets not covered by theme.json */ * { box-sizing: border-box; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { height: auto; max-width: 100%; display: block; } html { scroll-behavior: smooth; } h1, h2, h3, h4 { text-wrap: balance; } p { text-wrap: pretty; } :where(h1, h2, h3)[id], :where(section)[id] { scroll-margin-top: 24px; } /* Visible focus ring everywhere (WCAG 2.2 AA) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; } a { transition: color 150ms ease; } /* Serif-accent inline highlight format */ em.serif-accent, .serif-accent { font-family: var(--wp--preset--font-family--instrument-serif); font-style: italic; font-weight: 400; color: var(--wp--preset--color--accent); letter-spacing: -0.01em; } .has-on-dark-background-color em.serif-accent, .geko-section-dark em.serif-accent { color: var(--wp--preset--color--mint-strong); } /* Wordmark weights */ .geko-wordmark strong { font-weight: 600; } .geko-wordmark { font-weight: 300; } /* Header navigation */ .wp-block-navigation a { font-size: inherit; } .wp-block-navigation-item__content { padding: 4px 0; } /* Dark section helper */ .geko-section-dark { background: var(--wp--preset--color--forest); color: var(--wp--preset--color--on-dark); } .geko-section-dark a { color: var(--wp--preset--color--on-dark); } .geko-section-dark a:hover { color: var(--wp--preset--color--mint-strong); } /* theme.json's global heading color rule has zero specificity (:where()) but still beats plain CSS inheritance, so headings on dark/ink backgrounds need an explicit override or they render ink-on-ink / ink-on-forest (invisible). */ .geko-section-dark h1, .geko-section-dark h2, .geko-section-dark h3, .geko-section-dark h4, .geko-section-dark h5, .geko-section-dark h6 { color: var(--wp--preset--color--on-dark); } .geko-package-card.is-highlighted h1, .geko-package-card.is-highlighted h2, .geko-package-card.is-highlighted h3, .geko-package-card.is-highlighted h4 { color: var(--wp--preset--color--on-dark); } /* Tools strip */ .geko-tools-strip { border-top: 1px solid rgba(18, 48, 43, .14); border-bottom: 1px solid rgba(18, 48, 43, .14); padding: 22px 0; } /* Leistung rows */ .geko-leistung-row { border-top: 1px solid rgba(18, 48, 43, .14); } .geko-leistung-row .geko-tag { border-bottom: 1px solid var(--wp--preset--color--mint); padding-bottom: 1px; } @media (max-width: 719px) { .geko-leistung-row { grid-template-columns: 1fr !important; gap: 10px !important; } } /* Package cards */ .geko-package-card { border: 1px solid rgba(18, 48, 43, .14); border-radius: 6px; } .geko-package-card .geko-package-items { border-top: 1px solid rgba(18, 48, 43, .12); } .geko-package-card.is-highlighted .geko-package-items { border-top-color: rgba(233, 241, 236, .16); } .geko-package-item { display: flex; gap: 10px; font-size: 14px; line-height: 1.45; } .geko-package-item::before { content: "—"; color: var(--wp--preset--color--accent); } .geko-package-card.is-highlighted .geko-package-item::before { color: var(--wp--preset--color--mint-strong); } /* FAQ accordion (core/details) */ .geko-faq details { border-bottom: 1px solid rgba(18, 48, 43, .14); } .geko-faq summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; gap: 24px; font-size: 18px; min-height: 44px; align-items: center; } .geko-faq summary::-webkit-details-marker { display: none; } .geko-faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--wp--preset--color--accent); flex-shrink: 0; } .geko-faq details[open] summary::after { content: "−"; } .geko-faq .geko-faq-answer { font-size: 15px; line-height: 1.65; color: var(--wp--preset--color--muted); margin: 0 0 24px; max-width: 40em; } /* Contact form (Contact Form 7 – default CSS disabled in functions.php) */ .geko-contact-form .wpcf7-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 18px; } .geko-contact-form .hidden-fields-container { display: none; } .geko-contact-form .wpcf7-form p { margin: 0; grid-column: span 1; } .geko-contact-form .wpcf7-form p.full { grid-column: 1 / -1; } .geko-contact-form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--wp--preset--color--muted); width: 100%; } .geko-contact-form .wpcf7-form-control-wrap { display: block; width: 100%; } .geko-contact-form input[type="text"], .geko-contact-form input[type="email"] { font: inherit; font-size: 16px; color: var(--wp--preset--color--ink); background: transparent; border: 0; border-bottom: 1px solid rgba(18, 48, 43, .3); padding: 8px 0; outline: none; min-height: 44px; width: 100%; max-width: 100%; box-sizing: border-box; display: block; } .geko-contact-form input[type="text"]:focus, .geko-contact-form input[type="email"]:focus { border-bottom-color: var(--wp--preset--color--accent); } .geko-contact-form textarea { font: inherit; font-size: 16px; color: var(--wp--preset--color--ink); background: transparent; border: 1px solid rgba(18, 48, 43, .2); border-radius: 4px; padding: 12px; outline: none; resize: vertical; width: 100%; max-width: 100%; box-sizing: border-box; display: block; } .geko-contact-form textarea:focus { border-color: var(--wp--preset--color--accent); } .geko-contact-form .wpcf7-list-item { margin: 0; } .geko-contact-form .consent-row { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--wp--preset--color--muted); } /* CF7 nests the checkbox in several wrapper spans + its own inner