/* * theme-overrides.css * --------------------------------------------------------------------------- * Reconciles conflicts between VI-core's own compiled Tailwind (layout.css) and * the imported WordPress design system (theme.css). VI-core scans the ported * theme components and re-emits some utilities (e.g. the * `[&:not(.link-initial)]:underline` link utility) that the original WP build * leaves inert, so a few rules win differently than they do on the live site. * Each rule below is scoped to the droneworks theme via [data-theme-slug] and * is intentionally high-specificity so it beats the stray VI-core utility * WITHOUT altering colour or other intended styling. Keep this list tight and * documented — it exists only to restore live-WP parity. */ /* Links — WP only underlines `.wysiwyg` content links. VI-core re-adds the `[&:not(.link-initial)]:underline` utility (specificity 0,2,0) which underlines header/footer/menu/CTA links that WP renders clean. Remove the decoration everywhere except .wysiwyg; link colour (text-highlight) is left untouched. */ [data-theme-slug='droneworks'] a:not(.link-initial) { text-decoration-line: none; } [data-theme-slug='droneworks'] .wysiwyg a:not(.link-initial) { text-decoration-line: underline; } /* WPForms phone fields embed intl-tel-input, whose 240-item country dropdown is normally hidden until opened by the library JS. The contact form is imported as static HTML (no JS init), so the list renders fully expanded and inflates the field to ~8800px, creating a huge empty void on /kontakt (and any form page). Collapse it exactly as the initialised widget would — the flag selector and the input itself stay visible, matching the live WP form. */ [data-theme-slug='droneworks'] .iti__country-list { display: none !important; } /* Page background — WP renders with the light "surface" tint (--bg-surface = rgba(170,207,223,0.2), the theme-light palette), NOT white. VI-core's `body{background:hsl(var(--background))}` (white) wins the cascade over the imported `body{background:var(--bg-surface)}`, so the semi-transparent theme-light sections composited over WHITE look washed-out/pale instead of the correct sky tone. Restore WP's body surface so every light section composites to the same colour as the live site. */ [data-theme-slug='droneworks'] body { background-color: rgba(170, 207, 223, 0.2); } /* Header menu links — WP renders them in the primary-200 navy (#0b2639). theme.css's `.text-primary-200` utility loses VI-core's layer cascade to the inherited body foreground (#0e2538), so the nav text was the wrong navy. Re-assert it; :not(:hover) keeps the hover:text-accent state intact. */ [data-theme-slug='droneworks'] .header-navigation a:not(:hover) { color: var(--color-primary-200); } /* Footer "Termin vereinbaren" button — navy text (#0b2639) on its sky background. In the dark footer the default light link colour (secondary-200 sky) was beating `.text-primary-200`, rendering the label sky-on-sky (invisible). */ [data-theme-slug='droneworks'] a.footer-button:not(:hover) { color: var(--color-primary-200); } /* Sticky right-edge "Jetzt Service anfragen" button (`.sticky-button`) — WP renders the label in primary-200 navy (#0b2639). The anchor's `text-primary-200` utility (layered in theme.css) loses to VI-core layout.css's UNLAYERED preflight `a{color:inherit}`, so the button inherited the base foreground navy (#0e2538) instead — same layer conflict as the header nav. Re-assert primary-200; the inner text divs inherit it. `:not(:hover)` keeps the `hover:text-secondary-200` state. */ [data-theme-slug='droneworks'] a.sticky-button:not(:hover) { color: var(--color-primary-200); } /* `.text-heading` colour utility was DROPPED by the Tailwind-v4 theme.css compile (same family as the missing `3xl:` breakpoint + border widths — a custom token the v4 CLI didn't emit). Elements relying on it fell back to the inherited body colour — e.g. the key-facts-scroll card "arrow" links rendered grey (#6b747b, the card body text) instead of the heading navy WP shows. Restore it. `--color-heading` resolves to `--text-heading` (→ primary-100 #0f2e5d in light, secondary-200 in dark/scroll contexts), so this stays theme-correct everywhere. The anchor rule uses `:not(:hover)` so the variant's `hover:text-secondary-200` still wins on hover; the non-anchor rule covers headings/divs without a hover caveat. */ [data-theme-slug='droneworks'] :not(a).text-heading { color: var(--color-heading); } [data-theme-slug='droneworks'] a.text-heading:not(:hover) { color: var(--color-heading); } /* key-facts-scroll card "arrow" links (NOT the .btn pill buttons) — WP underlines them (decoration-accent/30). The site-wide link-underline reset stripped it; restore it for this block's non-button links to match WP. (Font-size note: WP shows these ~18.5px vs VI's 14px because VI's recompiled theme.css emitted `--text-sm:.875rem` fixed instead of WP's fluid text-sm — a theme-wide type-scale discrepancy, not fixed here.) */ [data-theme-slug='droneworks'] .wp-block-key-facts-scroll a:not(.link-initial):not(.btn) { text-decoration-line: underline; } /* `3xl` breakpoint utilities (min-width 95.625rem = 1530px). The theme.css was compiled with the Tailwind v4 CLI, which reads breakpoints from CSS @theme and therefore dropped the `3xl` screen defined in the old v3 tailwind.config.js — so EVERY `3xl:` class (teaser-grid → 2 cols, image cards → portrait, card content reveal) was dead and the grid never matched WP on wide screens. Restore the 6 used `3xl:` utilities here. Attribute selectors avoid escaping the `3xl:` / `[3/4]` class tokens. */ @media (min-width: 95.625rem) { [data-theme-slug='droneworks'] [class~='3xl:grid-cols-2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-theme-slug='droneworks'] [class~='3xl:aspect-[3/4]'] { aspect-ratio: 3 / 4; } [data-theme-slug='droneworks'] [class~='3xl:block'] { display: block; } [data-theme-slug='droneworks'] [class~='3xl:max-h-40'] { max-height: 15rem; } [data-theme-slug='droneworks'] .peer:checked ~ [class~='3xl:peer-checked:max-h-none'] { max-height: none; } } /* Border widths — VI-core's layout.css ships an UNLAYERED Tailwind v3 preflight (`*,::before,::after{border-width:0;border-style:solid;border-color:#e5e7eb}`). Unlayered declarations outrank theme.css's `@layer utilities` border utilities, so every border-WIDTH the WP design sets collapsed to 0 SITE-WIDE and the borders simply vanished — process-steps card dividers, FAQ/accordion rules, stats column dividers, blog separators, avatar rings, timeline connectors. theme-overrides.css is unlayered AND loads last, so re-declaring the used widths here beats the preflight and restores them. Attribute selectors ([class~='…']) avoid escaping the ':' / '[3px]' tokens; widths and breakpoints mirror theme.css exactly (md=768px, lg=1024px). Only WIDTH is restored — border COLOUR utilities (border-white, border-white/30, border-primary, …) already win the cascade. Order matters: the zeroing/state variants are kept BELOW the positive widths and at higher specificity so `last:`, `lg:` and `open:` still win. */ [data-theme-slug='droneworks'] [class~='border-2'] { border-width: 2px; } [data-theme-slug='droneworks'] [class~='border-l-2'] { border-left-width: 2px; } [data-theme-slug='droneworks'] [class~='border-b-2'] { border-bottom-width: 2px; } [data-theme-slug='droneworks'] [class~='border-t-3'] { border-top-width: 3px; } [data-theme-slug='droneworks'] [class~='border-b-3'] { border-bottom-width: 3px; } [data-theme-slug='droneworks'] [class~='border-b-[3px]'] { border-bottom-width: 3px; } @media (min-width: 768px) { [data-theme-slug='droneworks'] [class~='md:border-r-2'] { border-right-width: 2px; } } @media (min-width: 1024px) { [data-theme-slug='droneworks'] [class~='lg:border-l-3'] { border-left-width: 3px; } [data-theme-slug='droneworks'] [class~='lg:border-b-0'] { border-bottom-width: 0; } [data-theme-slug='droneworks'] [class~='last:lg:border-r-3']:last-child { border-right-width: 3px; } } [data-theme-slug='droneworks'] [class~='last:border-0']:last-child { border-width: 0; } [data-theme-slug='droneworks'] [class~='last:border-b-0']:last-child { border-bottom-width: 0; } [data-theme-slug='droneworks'] [class~='open:border-0']:is([open], :popover-open, :open) { border-width: 0; } /* Header (menubar) logo size — the base `.logo` height clamp tops out at 2.25rem (36px), which reads small in the navbar. Enlarge the HEADER logo only (the `footer .logo` rules keep their own clamp) so the Nexron wordmark is more prominent. object-fit:contain on `.logo img` keeps the wordmark's aspect ratio while the box grows. */ [data-theme-slug='droneworks'] header .logo { height: clamp(1.75rem, 1.4rem + 1.6vw, 3.25rem); } /* Footer logo size — base `footer .logo` height clamps to 2.25rem (36px) and max-width to 14rem, which reads small. Enlarge it (and lift the width cap) so the wordmark is more prominent in the footer. `.logo img` keeps height:100% + object-fit:contain, so the image follows the taller box while preserving its aspect ratio. */ [data-theme-slug='droneworks'] footer .logo { height: clamp(2.75rem, 2rem + 3vw, 5rem); max-width: 22rem; } /* Footer "Termin vereinbaren" CTA — it stays `position:absolute` but must sit flush at the WINDOW's right edge. The button's wrapper `relative` and the copyright-row grid's `lg:relative` were removed in Footer.tsx so the button now resolves its offsets against the full-width `