/* ========================================================================== Søborg Autoophug — temaets CSS (soeborg-theme/assets/css/theme.css) ÉN fil: fonte, designtokens, grundtypografi, layout, blog og arkiver (5b), sidehoved (topbjælke, logo, desktop-menu, sticky, burger, flyout), knapper/formularfelter og blok-grundlag. Alle tal er MÅLT på det gamle Avada-site (getComputedStyle, 4.–5. september 2026) eller læst i Avadas indstillinger — målet er en 1:1 kopi for det blotte øje. Afvigelser er begrundet i kommentarer. Ejerskab: temaet styler KUN sin egen chrome (.st-*) og de rene element- stile (h1-h6, p, a, formularfelter). Pluginet soeborg-core styler sine egne komponenter (.soeborg-*, .sb-*, .soeborg-footer) og skal altid vinde — derfor pakkes temaets element-regler for felter, knapper og lister i :where() (nul specificitet). Footeren er pluginets; intet om den her. Brudpunkt: desktop ≥ 1052px, mobil ≤ 1051px (Avadas content_break_point; samme værdi står i functions.php og gives til header.js). CSS-variabler kan ikke bruges i media queries, så tallet står skrevet direkte. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Fonte — self-hostede (ingen Google Fonts). Mulish er én variabel fil pr. tegnsæt (vægt 200–1000), opdelt som Google Fonts gør det, så latin-ext kun hentes for tegn uden for dansk/latin. Antic Slab (h5/h6) findes kun i vægt 400. -------------------------------------------------------------------------- */ @font-face { font-family: "Mulish"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("../fonts/mulish-latin.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; } @font-face { font-family: "Mulish"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("../fonts/mulish-latin-ext.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: "Antic Slab"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/antic-slab-latin.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. Designtokens (kilde i parentes = Avada-indstilling eller "målt") -------------------------------------------------------------------------- */ :root { /* Farver */ --st-primary: #7abc64; /* primary_color, link_color */ --st-primary-hover: #69aa53; /* button_gradient_*_hover — reserveret til ensfarvede knapper (fase 4); pillen bruger løft+skygge */ --st-link: #7abc64; /* link_color */ --st-link-hover: #7abc64; /* Avadas eneste globale a:hover-regel brugte primary_color; link_hover_color (#a0ce4e) blev aldrig anvendt på live */ --st-text: #929aa3; /* body_typography */ --st-heading: #494c4e; /* h2/post_title_typography */ --st-h3-color: #7abc64; /* h3_typography */ --st-h4-color: #7799ad; /* h4_typography */ --st-h5-color: #333; /* h5/h6_typography */ --st-sep: #e0dede; /* sep_color */ --st-body-bg: #fff; /* content_bg_color (bg_color #d7d6d6 ses aldrig i "wide"-layout) */ --st-white: #fff; /* Skrift */ --st-font-body: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --st-font-slab: "Antic Slab", Georgia, "Times New Roman", serif; /* Layout */ --st-site-width: 1140px; /* site_width */ --st-site-padding: 30px; /* #main padding-left/right */ --st-content-offset: 210px; /* målt: indholdets top-afstand, desktop */ --st-content-offset-mobile: 195px; /* målt: samme ≤ 1051px */ /* Topbjælke */ --st-topbar-bg: #353637; /* header_top_bg_color */ --st-topbar-color: #7bbb65; /* snav_color */ --st-topbar-font-size: 12px; /* snav_font_size */ --st-topbar-line-height: 44px; /* sec_menu_lh → højde 44px */ /* Header-bjælke */ --st-header-bg: rgba(53, 54, 55, .45); /* målt (biler.css satte .45 oven på Avadas .5) */ --st-header-sticky-bg: rgba(53, 54, 55, .5); /* målt: sticky beholder .5 */ --st-header-shadow: 0 1px 3px rgba(0, 0, 0, .12); --st-menu-height: 97px; /* målt: menu-link-højde = bjælkens højde */ --st-menu-height-sticky: 65px; /* header_sticky_nav_* */ --st-menu-font-size: 14px; /* nav_typography */ --st-menu-font-size-sticky: 12px; /* header_sticky_nav_font_size */ --st-menu-padding-x: 15px; /* nav_padding 30px / 2 */ --st-menu-padding-x-sticky: 17.5px; /* header_sticky_nav_padding 35px / 2 */ --st-menu-active-bg: #7bbb65; /* menu_highlight_background */ --st-menu-hover-bg: rgba(255, 255, 255, .14); /* vores egen regel (biler.css) */ --st-menu-text-shadow: 0 1px 4px rgba(0, 0, 0, .55); --st-submenu-width: 180px; /* dropdown_menu_width */ --st-submenu-bg: rgba(10, 9, 9, .7); /* menu_sub_bg_color */ --st-submenu-hover-bg: rgba(139, 195, 74, .66); /* menu_bg_hover_color */ --st-logo-height: 30px; /* målt (biler.css: max-height 30px) */ --st-logo-height-sticky: 23px; --st-logo-margin: 31px; /* fusion-logo data-margin-top/bottom */ --st-header-height-mobile: 145px; /* fallback: topbjælke på to linjer + bjælke 93px. header.js sætter den målte højde på .st-flyout ved åbning (126px ved én linje, 145px ved to). */ /* Kontakt-CTA i menuen (orange pille) */ --st-cta-gradient: linear-gradient(135deg, #f4a94a 0%, #eb9022 55%, #d47e14 100%); --st-cta-shadow: 0 6px 16px rgba(235, 144, 34, .55); /* Knapper (grøn pille) */ --st-button-gradient: linear-gradient(135deg, #8ede63 0%, #5aad3f 55%, #4b9a34 100%); --st-button-shadow: 0 4px 14px rgba(90, 173, 63, .35); --st-button-shadow-hover: 0 10px 24px rgba(90, 173, 63, .5); /* Formularfelter (form_*) */ --st-form-bg: #f7f7f7; --st-form-border: #d8d8d8; --st-form-radius: 4px; --st-form-height: 50px; --st-form-text: #aaa9a9; --st-form-font-size: 13px; /* Burger + flyout */ --st-burger-line: #23272a; --st-flyout-bg: rgba(35, 39, 42, .98); --st-flyout-submenu-bg: rgba(255, 255, 255, .05); /* Bevægelse */ --st-ease: .2s ease; } /* -------------------------------------------------------------------------- 3. Reset / base -------------------------------------------------------------------------- */ *, *::before, *::after { /* Avada gør det samme — pluginets CSS forudsætter det. */ box-sizing: border-box; } html { /* Som Avada: ingen vandret scroll (nødvendigt for .alignfull med 100vw), altid lodret scrollbar så bredden ikke hopper mellem sider. */ overflow-x: hidden; overflow-y: scroll; -webkit-text-size-adjust: 100%; } body { margin: 0; min-width: 320px; background: var(--st-body-bg); color: var(--st-text); font-family: var(--st-font-body); font-size: 16px; font-weight: 600; line-height: 2; } main { display: block; } img { max-width: 100%; height: auto; } /* Siden må ikke scrolle bag den åbne flyout-menu (JS gør intet ekstra). Body's overflow propagerer KUN til viewporten, når html's overflow er "visible" — og html har overflow-y: scroll ovenfor. Derfor låses html selv via :has() (Chrome 105+, Safari 15.4+, Firefox 121+); body-reglen står som reserve for ældre browsere. */ body.st-flyout-open { overflow: hidden; } html:has(body.st-flyout-open) { overflow: hidden; } /* -------------------------------------------------------------------------- 4. Typografi (h*_typography, body_typography, Avadas afsnits-margin 20px) Overskrifts- og afsnitsreglerne gælder KUN inde i .st-main — ligesom Avada, der satte sin typografi på "#main h2, .post-content h2 …", ikke globalt. Uden for main (pluginets footer, cookiebanneret) arves body-typografien og pluginets egne regler, præcis som på live (målt: footerens h3 har linjehøjde 32px = body's 2, ikke overskriftens 1.5). :where() holder specificiteten på element-niveau, så pluginets klasser stadig vinder. -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--st-font-body); letter-spacing: 0; } /* NOTE om h1: Avadas globale h1 er HVID (60px/1.4/700), fordi h1 på det gamle site kun forekom i hero-sektioner med baggrundsbillede. Et globalt hvidt h1 ville gøre fx bloggens titel usynlig på hvid bund. Derfor er temaets standard-h1 = indlægstitel-typografien (post_title_typography: Mulish 800 40px, #494c4e) — men med h1_typography's linjehøjde 1.4, som pluginets overskrifter (.sb-h1 m.fl.) arvede på live. Indlægstitlen (.st-post-title, afsnit 5b) får 1.5. Fase 4's hero-mønster sætter selv hvid/60px. */ :where(.st-main) h1 { font-size: clamp(27px, 6.81px + 3.155vw, 40px); /* 40px ≥ 1052px, 27px ≤ 640px */ font-weight: 800; line-height: 1.4; color: var(--st-heading); margin: 0 0 .67em; /* h1_typography-margin-bottom; top 0 fordi h1 står øverst i indholdet */ } :where(.st-main) h2 { font-size: clamp(31.5px, 18.3px + 2.0631vw, 40px); /* 40px ≥ 1052px, 31.5px ≤ 640px (Avadas kurve, målt ved 375px) */ font-weight: 800; line-height: 1.5; color: var(--st-heading); margin: 0 0 1.1em; } :where(.st-main) h3 { font-size: clamp(27px, 22.34px + .7282vw, 30px); /* 30px ≥ 1052px, 27px ≤ 640px (Avadas kurve, målt ved 375px) */ font-weight: 700; line-height: 1.5; color: var(--st-h3-color); margin: 1em 0; } :where(.st-main) h4 { font-size: 21px; font-weight: 800; line-height: 1.5; color: var(--st-h4-color); margin: 1.33em 0; } :where(.st-main) h5 { font-family: var(--st-font-slab); font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--st-h5-color); margin: 1.67em 0; } :where(.st-main) h6 { font-family: var(--st-font-slab); font-size: 11px; font-weight: 400; line-height: 1.5; color: var(--st-h5-color); margin: 2.33em 0; } :where(.st-main) p { margin: 0 0 20px; } a { color: var(--st-link); text-decoration: none; transition: color .2s linear, background-color .2s linear, border-color .2s linear; } a:hover { color: var(--st-link-hover); } hr { border: 0; border-top: 1px solid var(--st-sep); margin: 20px 0; } /* Lister i indholdet: kun afstanden ensrettes med afsnit; indrykning og punkttegn er browserens standard (pluginets lister har egne regler og vinder pga. :where()). */ :where(.st-main) :where(ul, ol) { margin: 0 0 20px; } /* -------------------------------------------------------------------------- 5. Layout -------------------------------------------------------------------------- */ .st-container { max-width: var(--st-site-width); margin: 0 auto; } /* Sidehovedet ligger som et gennemsigtigt lag OVEN PÅ indholdet (som på Avada-sitet), så indholdet får hele sin top-afstand her: 210px desktop / 195px mobil (målt = Avadas #main 55px + pluginets egen kompensation). Bund-padding 40px = Avadas main_padding-bottom på almindelige sider (målt); "Fuld bredde"-sider har 0 hele vejen rundt, se nedenfor. */ .st-main { padding: var(--st-content-offset) var(--st-site-padding) 40px; } /* Skabelonen "Fuld bredde" (100-width.php): indholdet — fx en hero med baggrundsbillede — starter helt oppe bag sidehovedet og styrer selv sin bredde og afstand. */ body.st-fullwidth .st-main { padding: 0; } .st-content--full { width: 100%; } /* -------------------------------------------------------------------------- 5b. Blog og arkiver (home.php, archive.php, single.php samt reserverne search.php, 404.php og index.php). Alle tal er MÅLT på live den 5. september 2026 (getComputedStyle ved 1394px og 375px). Klasserne er fase 3-kontraktens DOM: .st-blog (liste-wrapper), .st-page-title / .st-page-intro (overskrift + intro), .st-entry (ét indlæg i listen), .st-post (enkelt indlæg) og .st-entry-meta (dato — fælles for liste og enkelt indlæg). Pagineringen står nederst i afsnittet (uændret fra fase 2). -------------------------------------------------------------------------- */ /* Top-afstand på blogoversigt og arkiver: 155px desktop / 140px ≤ 1051px — 55px mindre end temaets almindelige sider (210/195px, afsnit 5). Bund- padding 0: det sidste indlægs 65px margin (eller pagineringens 40px) giver luften til footeren. Enkelt indlæg (body.single, se nedenfor) og søgesiden (body.search — i praksis altid pluginets skabelon) beholder temaets normale 210/195px. */ body.blog .st-main, body.archive .st-main { padding: 155px var(--st-site-padding) 0; } @media (max-width: 1051px) { body.blog .st-main, body.archive .st-main { padding-top: 140px; } } /* Sideoverskrift ("Blog", arkivnavnet, 'Søgeresultater for "…"'): 28px/800 med linjehøjde 2. Farven er GRÅ = brødtekstfarven (#929aa3), ikke overskriftsfarven — sådan ser live ud, fordi pluginets H1 (.sb-h1) dér arvede body-farven. Kopieret bevidst (1:1). Oplagt input til redesignet: overskriften bør nok blive mørk som sitets øvrige overskrifter. */ .st-page-title { font-size: 28px; font-weight: 800; line-height: 2; color: var(--st-text); margin: 0 0 8px; } /* Introtekst under overskriften (bloggen: teksten fra siden "Blog"; arkiver: kategoribeskrivelsen). Vægt 600 arves fra body. */ .st-page-intro { font-size: 15px; line-height: 2; color: var(--st-text); margin: 0 0 20px; } /* Ét indlæg i listen: kun afstand imellem — ingen skillelinje og ingen indre luft (den midlertidige fase 2-blok havde begge dele; live har ingen). flow-root: titlens topmargin (26,4px) skal blive INDE i artiklen som på live (Avadas article var en egen formateringskontekst) — ellers kollapser den ud og hele listen rykker 6px op. */ .st-entry { display: flow-root; margin: 0 0 65px; } /* Indlæggets titel i listen (h2 > a): 22px/800/1.5. Farven #222 er målt på live — mørkere end temaets overskriftsfarve #494c4e. Grøn kun ved hover. Margin 1.2em/.6em = 26,4px/13,2px ved 22px. */ .st-entry-title { font-size: 22px; font-weight: 800; line-height: 1.5; color: #222; margin: 1.2em 0 .6em; } .st-entry-title a { color: #222; text-decoration: none; } .st-entry-title a:hover { color: #6cb33f; /* målt på live — ikke temaets primærfarve #7abc64 */ } /* Uddrag (30 ord + "Læs mere →" inline i samme afsnit). Brødteksten arves fra body (16px/2, #929aa3, 600). position: relative bærer faden nedenfor. */ .st-entry-excerpt { position: relative; } .st-entry-excerpt p { margin: 0 0 20px; } /* Fade i bunden af uddraget (26px, gennemsigtig → sidens baggrund), så det er tydeligt at teksten fortsætter. Afsnittets bundmargin kollapser igennem wrapperen, så faden ligger over uddragets sidste linje — ikke under den. */ .st-entry-excerpt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--st-body-bg) 85%); pointer-events: none; } /* "Læs mere →": inline i uddraget, hævet over faden (z-index 2) og med massiv baggrund i sidens farve, så linket skærer igennem i stedet for at blive udvisket. Grøn (linkfarven) både i ro og ved hover; vægt 600 arves. nowrap, så "Læs" og "mere →" ikke knækker over to linjer (polering ud over live, hvor det kunne ske). */ .st-readmore { display: inline; position: relative; z-index: 2; background: var(--st-body-bg); padding-left: 2px; color: var(--st-link); text-decoration: none; white-space: nowrap; } .st-readmore:hover { color: var(--st-link); } /* Meta-linje (dato) — samme del i listen og under enkelt indlæg: 12px/2 mellem to 1px-linjer. Under et enkelt indlæg kollapser margin-top 20px med sidste afsnits bundmargin til ét 20px-trin (målt på live). */ .st-entry-meta { margin: 20px 0 0; padding: 5px 0; border-top: 1px solid var(--st-sep); border-bottom: 1px solid var(--st-sep); font-size: 12px; font-weight: 600; line-height: 2; color: var(--st-text); } /* I listen var der på live 40px mellem uddrag og meta-linje (Avada havde en clearfix-div imellem, så de to 20px-marginer ikke kollapsede). 40px her kollapser med uddragets 20px til netop 40. */ .st-entry .st-entry-meta { margin-top: 40px; } /* Enkelt indlæg (single.php). BEVIDST AFVIGELSE fra live: dér sad en usynlig, hvid Avada-titelbjælke (160px desktop / 189px mobil) over indlægget, så titlen først begyndte ved 215px på desktop og hele 384px på mobil. Den tomme bjælke kopieres IKKE — indlæg får temaets normale top-afstand som alle andre sider (210/195px): 5px højere på desktop, 189px mindre tom plads på mobil. Derfor ingen body.single-regel her. */ /* Indlæggets titel: temaets h1-størrelse (40px, clamp ned til 27px — arves fra afsnit 4) og overskriftsfarve, men linjehøjde 1.5 (post_title_- typography) i stedet for h1's 1.4, og fast 28px luft under. */ .st-post-title { font-weight: 800; line-height: 1.5; color: var(--st-heading); margin: 0 0 28px; } /* Mellemoverskrifter i indlægget: 22px (målt), ikke temaets 40px h2. Klasse-specificitet er fint her — kun indlæggets egen brødtekst har h2'er inde i .st-post-content. */ .st-post-content h2 { font-size: 22px; font-weight: 800; line-height: 1.5; color: var(--st-heading); margin: 1.2em 0 .6em; } /* Afsnit og links i indlægget = temaets standard (16px/2 #929aa3, margin 0 0 20px; grønne links uden underline). :where() holder specificiteten på element-niveau, fordi pluginet indsætter brødkrummen (nav.sb-breadcrumbs) forrest i .st-post-content — dens links skal beholde pluginets styling. */ :where(.st-post-content) p { font-size: 16px; line-height: 2; color: var(--st-text); margin: 0 0 20px; } :where(.st-post-content) a { color: var(--st-link); text-decoration: none; } /* Tom liste ("Der er ikke noget indhold at vise." / 'Vi fandt ikke noget for "…".'): brødtekst med lidt mere luft under end et almindeligt afsnit. */ .st-empty { margin: 0 0 40px; } .st-content > .navigation.pagination { margin: 0 0 40px; } :where(.st-content .navigation.pagination) .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } :where(.st-content .navigation.pagination) .page-numbers { display: inline-block; padding: 8px 13px; border: 1px solid var(--st-sep); border-radius: 6px; color: var(--st-heading); line-height: 1.5; } :where(.st-content .navigation.pagination) .page-numbers.current { background: var(--st-primary); border-color: var(--st-primary); color: var(--st-white); } /* -------------------------------------------------------------------------- 5c. Sektioner (blokke) — fase 4: de gamle Fusion Builder-sider som låste gruppe-blokke med temaets klasser (kontraktens afsnit 3–4). Alle tal er MÅLT på live den 6. september 2026 (getComputedStyle ved 1394px og 375px); de fire bevidste afvigelser fra live er markeret "AFVIGELSE" og begrundet på stedet. Markup: temaet er klassisk (ingen theme.json), så WordPress lægger selv en
mellem en gruppe og dens indhold. .st-container er derfor IKKE direkte barn af .st-sektion — reglerne bruger descendant-selektorer, aldrig ">" mellem grupper. Specificitet: kernens blok-CSS (columns, image, buttons) printes inline i footeren, dvs. EFTER denne fil, og bruger flere !important. Alle overstyringer af kernens regler har derfor strengt højere specificitet end kernens — fx (0,4,0) for kolonnebredderne mod kernens (0,3,0). Ingen !important. -------------------------------------------------------------------------- */ /* Sektion = yderste gruppe (align full). Generisk afstand 40px; varianterne nedenfor overskriver. position: relative bærer heroernes slør (::before). flow-root: sektionen indeholder sine børns marginer, som Fusions flex-rækker gjorde — uden det kollapser fx heroens h1-bundmargin (70px) ud gennem gruppernes wrappere og bliver til hvid luft UNDER baggrundsbilledet (målt: heroen blev 314px i stedet for ≈ 391px). */ .st-sektion { display: flow-root; position: relative; padding: 40px 0; } /* Baggrundsbillede: WP skriver background-image/-position/-size inline og sætter has-background. cover + no-repeat gentages her som sikkerhedsnet. */ .st-sektion.has-background { background-size: cover; background-repeat: no-repeat; } /* Indholdsrækken: 1140px + Avadas 30px sidepadding UDEN FOR de 1140px (.fusion-fullwidth havde padding 30px og .fusion-builder-row max-width 1140px indeni) → indholdet er 1140px ved 1394px og 315px ved 375px, som målt på live. Med paddingen inden i max-width var det blevet 1080px. */ .st-sektion .st-container { max-width: calc(var(--st-site-width) + 2 * var(--st-site-padding)); margin: 0 auto; padding: 0 var(--st-site-padding); } /* Billeder i sektioner: ingen ydre margin — som Fusions imageframes (inline-block uden margin). Uden dette får et ikke-justeret billede browserens figure-margin (1em 40px); kernen nulstiller kun figure INDE i sin egen wrapper. Rammer både
og kernens
om justerede billeder. Bevidst KUN margin — ikke display: block på img (kun hvor tabellerne siger det). */ .st-sektion .wp-block-image { margin: 0; } /* Kolonner (.wp-block-columns.st-kolonner): kernens 1.75em bundmargin væk — Fusions rækker havde ingen, og sektionernes padding er målt uden den. */ .st-sektion .st-kolonner { margin-bottom: 0; } /* Desktop ≥ 1052px: Avadas col_spacing 4 % mellem kolonnerne og bredderne som klasser (Fusion 1_2 → 48, 2_3 → 64, 1_3 → 32, 2_5 → 35,2, 1_5 → 17,6): 48+4+48, 64+4+32 og 35,2+3×17,6+3×4 giver alle 100. Specificiteten (0,4,0) slår kernens (0,3,0)-regel, der giver alle kolonner flex-basis 0 / grow 1. */ @media (min-width: 1052px) { .st-sektion .st-kolonner { gap: 4%; } .st-sektion .st-kolonner > .wp-block-column.st-kol-48, .st-sektion .st-kolonner > .wp-block-column.st-kol-64, .st-sektion .st-kolonner > .wp-block-column.st-kol-32, .st-sektion .st-kolonner > .wp-block-column.st-kol-35, .st-sektion .st-kolonner > .wp-block-column.st-kol-18 { flex-grow: 0; } .st-sektion .st-kolonner > .wp-block-column.st-kol-48 { flex-basis: 48%; } .st-sektion .st-kolonner > .wp-block-column.st-kol-64 { flex-basis: 64%; } .st-sektion .st-kolonner > .wp-block-column.st-kol-32 { flex-basis: 32%; } .st-sektion .st-kolonner > .wp-block-column.st-kol-35 { flex-basis: 35.2%; } .st-sektion .st-kolonner > .wp-block-column.st-kol-18 { flex-basis: 17.6%; } } /* ---- Sidetop (hero) ---------------------------------------------------- */ /* Sidetop med baggrundsbillede (alle sider undtagen forsiden). Sløret er en gradient fra sort 55 % i toppen til gennemsigtigt ved 78 %, så den hvide overskrift kan læses på lyse fotos. Indholdet løftes over sløret med z-index 1; isolation holder den z-index inde i heroen, så den næste sektions kort (margin-top −120px) stadig ligger oven på heroen. AFVIGELSE 4 (anden halvdel): kontakt-os' hero var på live 40px lavere end de andre siders — her får alle heroer samme højde. */ .st-sektion--hero { isolation: isolate; padding: 190px 0 0; } .st-sektion--hero::before, .st-sektion--hero-forside::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .28) 45%, rgba(0, 0, 0, 0) 78%); pointer-events: none; } .st-sektion--hero .st-container, .st-sektion--hero-forside .st-container { position: relative; z-index: 1; } /* Heroens h1: Avadas h1_typography (Mulish 700, 60px/1.4, hvid) — temaets standard-h1 er mørk og 40px (afsnit 4), fordi h1 også står på hvid bund. Rampen 60 → 41px følger afsnit 4's kurve (fuld størrelse ≥ 1052px, minimum ≤ 640px; målt 41px ved 375px). Heroen bliver ≈ 391px høj som på live. */ .st-sektion--hero h1 { font-size: clamp(41px, 11.49px + 4.6117vw, 60px); font-weight: 700; line-height: 1.4; color: var(--st-white); text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 2px 16px rgba(0, 0, 0, .55); /* Marginen kommer fra .st-titel (0 over, 31px under): heroen er 190px + overskriftens højde + 31px (fx 389px ved to linjer på /ophug/, 305px ved én linje på /om-os/). */ } /* En h1 skrevet som almindelig tekst i heroen (kontakt-os:

i en fusion_text, ikke en Fusion-titel) havde Avadas h1-margin .67em over OG under — heroen er dér 354px (190 + 40 + 84 + 40). */ .st-sektion--hero h1:not(.st-titel) { margin: .67em 0; } /* Overskrifter, der på live var Fusion-titler (fusion_title): titlen selv havde margin 0, og Fusions wrapper gav 31px under. Konverteringsscriptet og mønstrene sætter klassen; temaets egne h2/h3-marginer (44px / 30px) gælder for overskrifter skrevet inde i tekst. */ .st-titel { margin: 0 0 31px; } /* Afsnit med større skrift (live: forsidens introtekst under "Velkommen …", inline 21px). 21px × linjehøjde 2 = 42px linjer som på live. */ .st-lead { font-size: 21px; } /* Brødtekst i en hero (en underlinje under h1, hvis en side får en): hvid med let skygge som h1, så den kan læses på fotoet. */ .st-sektion--hero p { color: var(--st-white); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); } /* Forsidens sidetop: foto i 34vw højde med tilbudsboksen til højre. margin-top 44px = under topbjælken, som på live (sidehovedets bjælke ligger gennemsigtig oven på fotoet). Sektionen er flex for at centrere indholdet lodret; det eneste flex-barn er kernens inner-container, som får hele bredden, så .st-container kan centreres inde i det. */ .st-sektion--hero-forside { display: flex; align-items: center; isolation: isolate; min-height: 34vw; margin-top: 44px; padding: 20px 0; } .st-sektion--hero-forside > * { flex: 0 0 100%; min-width: 0; } /* Tilbudsboksen: 460px, højrestillet med luft, der følger skærmen (16–56px), mørk halvgennemsigtig glasboks. */ .st-hero-boks { width: 100%; max-width: 460px; margin: 0 clamp(16px, 4vw, 56px) 0 auto; padding: 26px 30px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; background: rgba(18, 24, 20, .34); -webkit-backdrop-filter: blur(7px) saturate(1.1); backdrop-filter: blur(7px) saturate(1.1); box-shadow: 0 8px 32px rgba(0, 0, 0, .28); } .st-hero-boks h1 { font-size: 30px; font-weight: 800; line-height: 1.15; color: var(--st-white); text-shadow: 0 2px 12px rgba(0, 0, 0, .55); margin: 0 0 16px; } /* De gule ord er : inline-farven beholdes, browserens gule mark-baggrund fjernes. */ .st-hero-boks mark { background-color: transparent; } /* ---- Knapper ----------------------------------------------------------- */ /* Alle tre varianter bygger på temaets grønne pille (afsnit 12) og rammer knap-blokkens link via wrapperens className (kernen lægger className på .wp-block-button, ikke på ). */ /* Hero-knappen ("Kontakt os her"): pulserende glød + pil, som pluginets .soeborg-hero-cta på live. Ved hover står pulsen stille. */ .wp-block-button.st-knap--hero .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; padding: 15px 32px; letter-spacing: .03em; animation: stHeroGlow 2.6s ease-in-out infinite; } .wp-block-button.st-knap--hero .wp-block-button__link::after { content: "\2192"; /* pil → */ font-size: 18px; line-height: 1; transition: transform .2s ease; } .wp-block-button.st-knap--hero .wp-block-button__link:hover { animation-play-state: paused; transform: translateY(-2px) scale(1.02); } .wp-block-button.st-knap--hero .wp-block-button__link:hover::after { transform: translateX(4px); } /* Den store knap ("Find reservedele her"): pluginets .soeborg-cta på live — 19px/800 uden versaler, samme glød og pil (20px). */ .wp-block-button.st-knap--stor .wp-block-button__link { display: inline-flex; align-items: center; gap: 12px; padding: 18px 40px; font-size: 19px; font-weight: 800; line-height: 2; /* arves fra body på live (38px) — kernens knap sætter ellers sin egen */ letter-spacing: .02em; text-transform: none; animation: stHeroGlow 2.6s ease-in-out infinite; } .wp-block-button.st-knap--stor .wp-block-button__link::after { content: "\2192"; font-size: 20px; /* pilen arver linjehøjde 2 (40px) og giver knappen dens 76px, som på live */ transition: transform .2s ease; } .wp-block-button.st-knap--stor .wp-block-button__link:hover { animation-play-state: paused; transform: translateY(-2px) scale(1.02); } .wp-block-button.st-knap--stor .wp-block-button__link:hover::after { transform: translateX(5px); } /* Den store knaps wrapper: 44px luft over og under (pluginets .soeborg-cta-wrap). Wrapperen har ingen className i den kanoniske markup, så afstanden sættes via :has() — samme browserkrav som afsnit 3's :has(). */ .wp-block-buttons:has(> .st-knap--stor) { margin: 44px 0; } /* "Læs mere"-knapperne under de tre kort: mindre pille (Avada size=small); versaler og vægt 700 arves fra pillen. */ .wp-block-button.st-knap--lille .wp-block-button__link { padding: 12px 28px; font-size: 12px; line-height: 14px; } /* Gløden = pluginets sbHeroGlow (biler.css), så knapperne pulserer ens uanset hvilken fil de kommer fra. */ @keyframes stHeroGlow { 0%, 100% { transform: scale(1); box-shadow: 0 6px 18px rgba(90, 173, 63, .5), 0 0 0 0 rgba(124, 207, 91, .6); } 50% { transform: scale(1.04); box-shadow: 0 12px 28px rgba(90, 173, 63, .6), 0 0 0 16px rgba(124, 207, 91, 0); } } /* ---- Intro og kort ----------------------------------------------------- */ /* Intro: tekst til venstre, hvidt kort (formular) til højre, der lægger sig 120px op over heroen. AFVIGELSE 4: 30px top på ALLE sider — live havde 80px på Reservedele alene (og kontakt-os' hero var 40px lavere end de andre); ensartethed frem for kopi af tilfældigheder. */ .st-sektion--intro { padding: 30px 0 80px; } /* Kort: hvid boks med skygge — som kolonne (intro, tre kort) eller gruppe (kontakt-os, "Det seneste"). h3 i kortet er temaets h3 (30px/1.5, grøn), centreret via blokkens textAlign. */ .st-kort { background: var(--st-white); padding: 40px; border-radius: 10px; box-shadow: 0 25px 20px rgba(61, 61, 61, .1); margin-top: -120px; } /* Kort/billedkolonne som KOLONNE: løftet (og tilbudskortets bundmargin) skal gentages med (0,4,0), fordi kernens ".is-layout-flex > :is(*, div) { margin: 0 }" (0,1,1) ellers nulstiller marginen på alle kolonner. Som GRUPPE (kontakt-os, "Det seneste") rækker .st-kort ovenfor. */ .st-sektion .st-kolonner > .wp-block-column.st-kort { margin-top: -120px; /* Kortet må ikke strækkes til tekstkolonnens højde (kernens kolonner er flex med stretch): på live slutter kortet, hvor dets eget indhold slutter. */ align-self: flex-start; } .st-sektion .st-kolonner > .wp-block-column.st-kort--tilbud { margin-top: -110px; margin-bottom: 40px; } .st-sektion .st-kolonner > .wp-block-column.st-billedkort { margin-top: -170px; } .st-kort--stor { padding: 60px; box-shadow: 0 45px 40px rgba(0, 44, 91, .3); } /* Fusion-kolonnernes blå topkant på "Det seneste" og kontaktkortet: 6px / #7799ad på live. De øvrige formularkort har ingen kant. */ .st-kort--seneste, .st-sektion--kontakt .st-kort--stor { border-top: 6px solid #7799ad; } /* "Det seneste fra rodekassen": kortet står på sektionens bund (kun runde hjørner øverst), overskrift + grøn underoverskrift centreret. */ .st-kort--seneste { border-radius: 10px 10px 0 0; padding: 60px 60px 20px; } .st-kort--seneste h2 { text-align: center; margin: 0 0 20px; } /* Underoverskriften følger h2's størrelse (40 → 31,5px, samme rampe som afsnit 4). #99cc00 er Fusions inline-farve på live; ingen token, bruges kun her. */ .st-underoverskrift { font-size: clamp(31.5px, 18.3px + 2.0631vw, 40px); font-weight: 800; line-height: 1.5; color: #99cc00; text-align: center; margin: 0 0 50px; } /* Tilbudskortet "Skrotte eller fikse?" (2/5-kolonnen): ingen indre padding, hjørnebilledet (80×80) ligger absolut i øverste venstre hjørne (kortets overflow er synligt), teksten er centreret med 30px sidepadding. h2's 50px = billedets 80px minus Fusions −30px margin på live. Spaceren (20px) i bunden er en blok. */ .st-kort--tilbud { position: relative; padding: 0 0 60px; box-shadow: 0 25px 20px rgba(61, 61, 61, .27); margin-top: -110px; margin-bottom: 40px; } .st-kort--tilbud > .wp-block-image:first-child { position: absolute; top: 0; left: 0; width: 80px; /* corner.png er 80×80; uden bredden ville et stort billede dække kortet */ margin: 0; } .st-kort--tilbud h2 { text-align: center; margin: 50px 0 0; } .st-kort--tilbud p { padding: 0 30px; text-align: center; } /* ---- Tre kort (forsiden) ------------------------------------------------ */ /* Baggrund forankret i bunden (50% 100%); tilbudskortet + tre smalle kolonner med billede i fuld kolonnebredde, blå h4 (temaets h4: 21px, #7799ad) og en lille knap (centreret via blokken). Kernen gør et centreret billede til display: table, der krymper til billedets egen bredde — her skal det fylde kolonnen (315px på mobil, som live). */ .st-sektion--kort { padding: 80px 0; } .st-sektion--kort .st-kolonner > .wp-block-column { margin-bottom: 40px; } /* Live: den sidste af de tre smalle kolonner havde 70px bundmargin (Fusion- indstilling), så sektionen er 30px højere end kolonnerne alene tilsiger. */ .st-sektion--kort .st-kolonner > .wp-block-column.st-kol-18:last-child { margin-bottom: 70px; } .st-sektion--kort .st-kol-18 .wp-block-image .aligncenter, .st-sektion--kort .st-kol-18 figure.wp-block-image { display: block; margin: 0 auto; } .st-sektion--kort .st-kol-18 .wp-block-image img { display: block; width: 100%; } .st-sektion--kort h4 { text-align: center; margin: 20px 0 10px; } /* ---- Telefonbånd (forsiden) --------------------------------------------- */ /* 64/32 lodret centreret. Kernen sætter align-items: normal !important på kolonneblokken, så centreringen ligger på kolonnerne (align-self) — samme resultat. Venstre: hvid h2 (temaets 40px) og hvid h3 21px uden margin. */ .st-sektion--baand { padding: 60px 0; } .st-sektion--baand .st-kolonner > .wp-block-column { align-self: center; } .st-sektion--baand .st-kol-64 { padding-bottom: 30px; } .st-sektion--baand h2 { color: var(--st-white); margin: 0; } .st-sektion--baand h3:not(.st-telefon) { font-size: 21px; font-weight: 700; line-height: 1.5; color: var(--st-white); margin: 0; } /* Telefonnummeret: h3 med hvidt håndsæt-ikon foran (51×51 boks, ikon 30px, ingen cirkel — live's Font Awesome-ikon havde ingen baggrund). Ikonet er en inline SVG som data-URI (Material Design-ikonet "call", Apache 2.0), så ingen ikonfont skal indlæses. Vægt 700 arves fra temaets h3. */ .st-telefon { display: flex; align-items: center; gap: 21px; font-size: 30px; line-height: 51px; color: var(--st-white); margin: 30px 0; } .st-telefon::before { content: ""; flex: none; width: 51px; height: 51px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / 30px 30px no-repeat; } .st-telefon a { color: var(--st-white); text-decoration: none; } .st-telefon a:hover { color: var(--st-primary); } /* ---- Seneste, fuldbredde-billede, kontakt, FAQ, Om os ------------------- */ /* "Det seneste"-sektionen: baggrund forankret nederst til højre (100% 100%); kortet (.st-kort.st-kort--stor.st-kort--seneste) står som gruppe i containeren. */ .st-sektion--seneste { padding: 80px 0; } /* Billede i fuld bredde (bunden af Ophug, Reservedele, Værksted): ingen luft, billedet fylder containeren (1140px). */ .st-sektion--billede { padding: 0; } .st-sektion--billede .wp-block-image img { display: block; width: 100%; } /* Kontakt-os: ét stort kort (gruppe .st-kort.st-kort--stor, løftet 120px op over heroen som de andre kort) med indre kolonner 32/64 og Google Maps-kortet nederst. */ .st-sektion--kontakt { padding: 80px 0 160px; } /* Adresse og telefon: store grønne linjer, links uden underline. */ .st-kontakt-stor { font-size: 40px; font-weight: 800; line-height: 2; /* live: inline 40px-spans arvede body's linjehøjde 2 → 80px linjer */ color: var(--st-primary); margin: 0; } .st-kontakt-stor a, .st-kontakt-mail a { color: inherit; text-decoration: none; } /* Åbningstider: små grå linjer med 2px spatiering. */ .st-kontakt-lille { font-size: 15px; font-weight: 800; line-height: 15px; letter-spacing: 2px; color: var(--st-text); margin: 0 0 20px; } .st-kontakt-mail { font-size: 22px; font-weight: 800; color: var(--st-primary); } /* "Eller brug formularen": h3 i overskriftsfarven i stedet for temaets grønne. */ .st-overskrift-moerk { color: var(--st-heading); } /* Google Maps-kortet: 600px bredt, centreret, direkte under kolonnerne (på live begyndte kort-rækken, hvor formularkolonnen sluttede — 0px luft; den synlige afstand er formularens egen: 20px + Turnstile-boksen på 75px). AFVIGELSE 3: iframen får 100 % bredde (maks. 600px) og centreres — på live var den fast 600px, sad i en 313px bred kolonne og løb ud af den på mobil. */ .st-kort__kort { max-width: 600px; margin: 0 auto; } .st-kort__kort iframe { display: block; width: 100%; max-width: 100%; height: 450px; border: 0; } /* FAQ-kompakt (kontakt-os' bund): ingen egen luft — pluginets FAQ-markup styrer selv. h2 er temaets (40px, venstre). */ .st-sektion--faq { padding: 0; } /* Om os: billedkolonnen uden hvid baggrund, men med kortets luft og løft. */ .st-billedkort { padding: 40px; margin-top: -170px; } /* Tjekliste: den klasse konverteringsscriptet skriver for en fusion_checklist uden telefonnummer (ingen af siderne har en i dag). Punkttegnet erstattes af et grønt flueben. */ .st-tjekliste { list-style: none; padding: 0; } .st-tjekliste li::before { content: "\2713"; color: var(--st-primary); margin-right: .5em; } /* ---- Mobil/tablet ≤ 1051px (temaets brudpunkt, afsnit 15) --------------- */ @media (max-width: 1051px) { /* Kolonnerne stables med 30px imellem. Som GRID, ikke flex-wrap: kernen sætter flex-wrap: nowrap !important fra 782px og flex-basis 100% !important under, og et grid gør alle dens flex-regler virkningsløse uden selv at bruge !important. Samme synlige resultat som stabling med flex-basis 100 %. */ .st-sektion .st-kolonner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px 0; } /* Kun-desktop-indhold (Fusions hide_on_mobile="large-visibility", fx Om os' billede). */ .st-kun-desktop { display: none; } /* Sidetop: samme 190px top som live; h1 er 41px via rampen ovenfor. De 30px over svarer til live's mobil-spacer (Fusion-separator, kun mobil). */ .st-sektion--hero h1.st-titel { margin: 30px 0 20px; } /* Avada: ".fusion-title { margin-bottom: 20px !important }" ved ≤ 1051px — alle Fusion-titler har 20px under på mobil/tablet (31px på desktop). */ .st-titel { margin-bottom: 20px; } /* AFVIGELSE 1 — forsidens hero: på live er heroen 195px høj, og tilbudsboksen ligger delvist BAG sidehovedet, så teksten ikke kan læses. Her lægges boksen under sidehovedet (padding-top 165px) nederst til højre; sektionen vokser med indholdet (min-height 52vw = 195px ved 375px). */ .st-sektion--hero-forside { align-items: flex-end; justify-content: flex-end; min-height: 52vw; margin-top: 0; padding: 165px 16px 16px; } .st-sektion--hero-forside .st-container { padding: 0; } /* Boksen: halv bredde (maks. 360px) til højre. Højrestillingen ligger på boksens margin-left: auto, fordi det er kernens inner-container og ikke boksen, der er sektionens flex-barn. */ .st-hero-boks { width: 50%; max-width: 360px; margin: 0 0 0 auto; padding: 18px 20px; } .st-hero-boks h1 { font-size: 22px; line-height: 1.25; } .wp-block-button.st-knap--hero .wp-block-button__link { padding: 10px 18px; font-size: 14px; } /* AFVIGELSE 2 — kortenes løft (margin-top −120/−110/−170px) nulstilles, når kolonnerne stables: på live beholdt formularkortet sine −120px og dækkede de sidste 120px af teksten ovenover (kun Værksted var lappet). */ .st-kort, .st-kort--tilbud, .st-billedkort, .st-sektion .st-kolonner > .wp-block-column.st-kort, .st-sektion .st-kolonner > .wp-block-column.st-kort--tilbud, .st-sektion .st-kolonner > .wp-block-column.st-billedkort { margin-top: 0; } .st-billedkort { padding: 0; } /* De store kort beholder deres 60px indre luft på mobil, som på live (målt ved 375px: kontakt-kortet 60px, "det seneste" 60/60/20). Indholdet får 195px at gøre godt med — det er sådan live ser ud; redesign-input. */ /* "Det seneste" dækker ingen tekst — kun bundluften i sektionen over — og beholder derfor sit løft på mobil, som på live (kortet begynder 40px over sektionens kant). Undtagelse fra AFVIGELSE 2 ovenfor. */ .st-kort--seneste { margin-top: -120px; } .st-telefon { font-size: 26.8px; } } @media (max-width: 640px) { .st-hero-boks { width: 64%; max-width: 260px; padding: 12px 14px; } .st-hero-boks h1 { font-size: 16px; } .wp-block-button.st-knap--hero .wp-block-button__link { padding: 8px 14px; font-size: 12px; } } /* Reduceret bevægelse: ingen puls og ingen løft på de to animerede knapper (afsnit 16 dækker temaets øvrige transitions og hover-løft). */ @media (prefers-reduced-motion: reduce) { .wp-block-button.st-knap--hero .wp-block-button__link, .wp-block-button.st-knap--stor .wp-block-button__link { animation: none; } .wp-block-button.st-knap--hero .wp-block-button__link::after, .wp-block-button.st-knap--stor .wp-block-button__link::after { transition: none; } .wp-block-button.st-knap--hero .wp-block-button__link:hover, .wp-block-button.st-knap--stor .wp-block-button__link:hover, .wp-block-button.st-knap--hero .wp-block-button__link:hover::after, .wp-block-button.st-knap--stor .wp-block-button__link:hover::after { transform: none; } } /* -------------------------------------------------------------------------- 6. Topbjælke (fusion-secondary-header) -------------------------------------------------------------------------- */ .st-topbar { background: var(--st-topbar-bg); color: var(--st-topbar-color); font-size: var(--st-topbar-font-size); font-weight: 600; line-height: var(--st-topbar-line-height); padding: 0 var(--st-site-padding); /* Avada: 1px gennemsigtig bundkant — tæller med i headerens højde (45 + 98 = 143px). */ border-bottom: 1px solid transparent; } /* Telefon, streg og mail står som almindelig inline-tekst (ikke flex), så linjen ombrydes naturligt til to linjer på smalle skærme — præcis som Avadas kontaktinfo-blok i topbjælken. */ .st-topbar a { color: inherit; text-decoration: none; } .st-topbar a:hover { color: inherit; /* snav_color: samme farve ved hover som på live */ } .st-topbar-sep { display: inline-block; padding: 0 6px; /* fusion-header-separator */ } /* -------------------------------------------------------------------------- 7. Sidehoved-bjælke + logo -------------------------------------------------------------------------- */ .st-header { /* Overlay: Avadas header-wrapper var absolut med z-index 10000, når header-farven var gennemsigtig. Pluginets cookiebanner (z 999998) ligger over — som på live. */ position: absolute; top: 0; left: 0; right: 0; z-index: 10000; } /* WordPress' admin-bjælke (32px; 46px ≤ 782px) skubber ikke absolut positionerede elementer, så vi flytter selv sidehovedet ned under den. */ body.admin-bar .st-header { top: 32px; } .st-bar { background: var(--st-header-bg); padding: 0 var(--st-site-padding); border-bottom: 1px solid transparent; transition: background-color var(--st-ease); } .st-bar-inner { position: relative; display: flex; align-items: center; justify-content: space-between; } .st-logo { display: block; flex: none; margin: var(--st-logo-margin) 0; transition: opacity .3s ease-in-out; } /* Bevidst klasse-selectors (ikke ".st-logo img"): så har display-reglerne herunder samme specificitet, og den senere regel vinder — ellers ville ".st-logo img {display:block}" slå ".st-logo-sticky {display:none}". */ .st-logo-std, .st-logo-sticky { display: block; width: auto; height: auto; } .st-logo-std { max-height: var(--st-logo-height); } /* Det lille sticky-logo findes altid i DOM'en, men vises kun når bjælken klistrer (JS sætter .st-sticky). */ .st-logo-sticky { display: none; max-height: var(--st-logo-height-sticky); } /* -------------------------------------------------------------------------- 8. Desktop-menu, undermenu, Kontakt-CTA og caret -------------------------------------------------------------------------- */ .st-nav { display: none; /* vises ≥ 1052px, se media query nederst i afsnittet */ } .st-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; /* Avada floater punkterne, så de ombrydes hvis pladsen er knap */ justify-content: flex-end; align-items: center; line-height: 1; } .st-menu li { position: relative; margin: 0; padding: 0; } .st-menu > li > a { display: flex; align-items: center; height: var(--st-menu-height); padding: 0 var(--st-menu-padding-x); font-family: var(--st-font-body); font-size: var(--st-menu-font-size); font-weight: 800; line-height: 1; letter-spacing: 0; color: var(--st-white); text-decoration: none; white-space: nowrap; -webkit-font-smoothing: subpixel-antialiased; transition: background-color .2s linear, color .2s linear, height .25s ease, font-size .25s ease, padding .25s ease; } /* Hover på almindelige punkter: let, lys tone — så det IKKE ligner den grønne "aktiv"-boks. Gælder også når undermenuen er åbnet med klik/tastatur. */ .st-menu > li:not(.sb-menu-cta):not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor) > a:hover, .st-menu > li:not(.sb-menu-cta):not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor).st-open > a, .st-menu > li:not(.sb-menu-cta):not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):focus-within > a { background-color: var(--st-menu-hover-bg); } /* Aktivt punkt: grøn baggrund (menu_highlight_background). Forældre-punkter uden eget link ("Info", "Biler …") får den, når en underside er aktiv. */ .st-menu > li.current-menu-item > a, .st-menu > li.current_page_item > a, .st-menu > li.current-menu-ancestor > a { background-color: var(--st-menu-active-bg); } /* Læsbarhed: menuen ligger over hero-billeder. Kun i selve hovedmenuen — ikke i undermenuen (live's undermenu-spans havde ikke .menu-text) og ikke i flyout'en. */ .st-menu > li > a .menu-text { text-shadow: var(--st-menu-text-shadow); } /* Undermenu */ .st-menu .sub-menu { position: absolute; top: 100%; left: 0; z-index: 1; width: var(--st-submenu-width); margin: 0; padding: 0; list-style: none; background: var(--st-submenu-bg); visibility: hidden; opacity: 0; transition: opacity .2s ease-in, visibility 0s linear .2s; } .st-menu li:hover > .sub-menu, .st-menu li:focus-within > .sub-menu, .st-menu li.st-open > .sub-menu { visibility: visible; opacity: 1; transition-delay: 0s; } .st-menu .sub-menu li { display: block; } .st-menu .sub-menu a { display: block; padding: 7px 20px; /* mainmenu_dropdown_vertical_padding 7px */ font-family: var(--st-font-body); font-size: 14px; /* nav_dropdown_font_size */ font-weight: 600; /* body_typography-font-weight */ line-height: 2; /* arvet body-linjehøjde, som på live */ color: var(--st-white); text-align: left; text-decoration: none; white-space: normal; transition: background-color .2s ease-in-out, color .2s ease-in-out; } .st-menu .sub-menu a:hover, .st-menu .sub-menu .current-menu-item > a, .st-menu .sub-menu .current_page_item > a { background-color: var(--st-submenu-hover-bg); } /* Caret (lille trekant) på punkter med undermenu; vender når menuen er åben. */ .st-menu .menu-item-has-children > a .menu-text::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 8px; vertical-align: middle; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; transition: transform .2s ease; } .st-menu .menu-item-has-children:hover > a .menu-text::after, .st-menu .menu-item-has-children:focus-within > a .menu-text::after, .st-menu .menu-item-has-children.st-open > a .menu-text::after { transform: rotate(180deg); } /* Escape for tastaturbrugere: fokus står stadig på forældre-linket, så :focus-within ville holde undermenuen åben. header.js sætter .st-escaped, indtil fokus/mus forlader punktet igen. Samme specificitet som reglerne ovenfor — vinder på rækkefølge. */ .st-menu li.st-escaped > .sub-menu { visibility: hidden; opacity: 0; } .st-menu .menu-item-has-children.st-escaped > a .menu-text::after { transform: none; } /* "Kontakt os" som orange pille. Selve linket har ingen baggrund (heller ikke ved hover/aktiv) — pillen sidder på .menu-text. */ .st-menu > li.sb-menu-cta > a, .st-menu > li.sb-menu-cta > a:hover, .st-menu > li.sb-menu-cta.current-menu-item > a, .st-menu > li.sb-menu-cta.current_page_item > a { background: none; } .st-menu > li.sb-menu-cta > a .menu-text { background: var(--st-cta-gradient); color: var(--st-white); padding: 9px 20px; border-radius: 999px; font-weight: 700; transition: filter .15s ease, box-shadow .15s ease, transform .15s ease; } .st-menu > li.sb-menu-cta > a:hover .menu-text { filter: brightness(.94); box-shadow: var(--st-cta-shadow); transform: translateY(-1px); } /* Tastaturfokus på mørk baggrund: hvid ring (browserens egen kan forsvinde). */ .st-menu a:focus-visible { outline: 2px solid var(--st-white); outline-offset: -3px; } /* -------------------------------------------------------------------------- 9. Sticky sidehoved (kun desktop — JS sætter .st-sticky når topbjælken er scrollet ud). Bjælken fastgøres til toppen, bliver 65px høj og skifter til det lille logo. Topbjælken scroller væk som på live. -------------------------------------------------------------------------- */ .st-header.st-sticky .st-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 210; /* Avadas sticky header havde z-index 210 */ background: var(--st-header-sticky-bg); border-bottom: 0; box-shadow: var(--st-header-shadow); } body.admin-bar .st-sticky .st-bar { top: 32px; } .st-sticky .st-logo { margin: 0; } .st-sticky .st-logo-std { display: none; } .st-sticky .st-logo-sticky { display: block; } .st-sticky .st-menu > li > a { height: var(--st-menu-height-sticky); font-size: var(--st-menu-font-size-sticky); padding: 0 var(--st-menu-padding-x-sticky); } /* -------------------------------------------------------------------------- 10. Burger-knap (mobil): hvid, rundet boks med tre mørke streger og "MENU" under — på bjælkens mørke baggrund. Design godkendt af Andreas. -------------------------------------------------------------------------- */ .st-burger { /* z-index: burgeren skal ligge OVER flyout-laget (z 1000 i samme stacking context = .st-header), mens logoet ligger under det. */ position: relative; z-index: 1001; display: inline-flex; flex: none; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; background: none; color: var(--st-white); font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; } .st-burger-box { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; background: var(--st-white); border-radius: 10px; } .st-burger-line { display: block; width: 27px; height: 2px; background: var(--st-burger-line); transition: transform .25s ease, width .25s ease, opacity .25s ease; } .st-burger-label { font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .05em; color: var(--st-white); text-decoration: underline; text-underline-offset: 3px; } /* Åben tilstand (JS sætter aria-expanded): linje 1 og 3 mødes som et X, linje 2 forsvinder. translateY(±6px) = én linjehøjde + mellemrum, så X'et er centreret der hvor midterlinjen var (Avada roterede på stedet, hvilket gav et lidt skævt X — det er den eneste bevidste forskel). */ .st-burger[aria-expanded="true"] .st-burger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); } .st-burger[aria-expanded="true"] .st-burger-line:nth-child(2) { width: 0; opacity: 0; } .st-burger[aria-expanded="true"] .st-burger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .st-burger:focus-visible { outline: 2px solid var(--st-white); outline-offset: 4px; border-radius: 12px; } /* -------------------------------------------------------------------------- 11. Flyout-menu (mobil): fast, mørkt lag over hele skærmen med menuen centreret. JS fjerner [hidden], tvinger reflow og sætter body.st-flyout-open → laget fader ind (.3s). Ved luk sættes [hidden] igen efter transitionen. -------------------------------------------------------------------------- */ .st-flyout { position: fixed; inset: 0; z-index: 1000; /* i .st-header's stacking context: over logo, under burger */ display: flex; flex-direction: column; /* padding-top = sidehovedets højde på mobil, så menuen starter under logo/burger; i øvrigt Avadas 0 25px 25px. */ padding: var(--st-header-height-mobile) 25px 25px; background: var(--st-flyout-bg); overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; transition: opacity .3s ease-in-out; } /* [hidden] må vinde over display:flex ovenfor (UA-stilen taber til forfatter-CSS). */ .st-flyout[hidden] { display: none; } body.st-flyout-open .st-flyout { opacity: 1; } /* AFVIGELSE fra live: mens flyout'en er åben, fastgøres hele sidehovedet til viewporten. Ved scroll 0 ser det identisk ud (absolut top 0 = fast top 0), men er man scrollet ned, når man åbner menuen, forbliver X-knappen nu synlig i toppen i stedet for at ligge oppe ved sidens top. */ body.st-flyout-open .st-header { position: fixed; } /* På live ligger header-bjælken UNDER det mørke lag og kun burgeren over, så logoet ses svagt igennem. */ body.st-flyout-open .st-logo { opacity: .2; } /* Auto-margin i stedet for align-items:center: centrerer lodret, men falder tilbage til top-justering + scroll når menuen er højere end skærmen. */ .st-flyout-nav { width: 100%; margin: auto 0; } .st-flyout-menu { list-style: none; margin: 0; padding: 25px 0; text-align: center; } .st-flyout-menu > li { display: block; padding: 0 0 20px; line-height: normal; } .st-flyout-menu > li:last-child { padding-bottom: 0; } .st-flyout-menu a { display: inline-block; padding: 0 12px; font-family: var(--st-font-body); font-size: 16px; /* mobile_menu_typography */ font-weight: 800; line-height: 35px; color: var(--st-white); text-decoration: none; transition: color .2s linear, opacity .2s linear; } .st-flyout-menu a:hover, .st-flyout-menu .current-menu-item > a, .st-flyout-menu .current_page_item > a, .st-flyout-menu .current-menu-ancestor > a { color: var(--st-primary); /* mobile_menu_font_hover_color */ } /* Caret på gruppepunkter (samme trekant som i desktop-menuen, 9px luft som i den gamle flyout-regel); vender når harmonikaen er åben. */ .st-flyout-menu .menu-item-has-children > a .menu-text::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 9px; vertical-align: middle; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; transition: transform .2s ease; } .st-flyout-menu .menu-item-has-children.st-open > a .menu-text::after { transform: rotate(180deg); } /* Undermenu som harmonika: skjult til JS sætter .st-open på
  • . */ .st-flyout-menu .sub-menu { display: none; list-style: none; margin: 4px 0 10px; padding: 6px 0; background: var(--st-flyout-submenu-bg); border-radius: 10px; } .st-flyout-menu li.st-open > .sub-menu { display: block; } .st-flyout-menu .sub-menu li { display: block; padding: 0; } /* Underpunkter er 20px — ja, større end niveau 1 (16px). Det er sådan live ser ud, og det gør de egentlige destinationer (undersiderne) tydeligst. */ .st-flyout-menu .sub-menu a { display: block; padding: 12px 10px; font-size: 20px; font-weight: 800; color: var(--st-white); opacity: .92; } .st-flyout-menu .sub-menu a:hover { opacity: 1; } .st-flyout-menu .sub-menu .current-menu-item > a, .st-flyout-menu .sub-menu .current_page_item > a { color: var(--st-primary); opacity: 1; } .st-flyout-menu a:focus-visible { outline: 2px solid var(--st-white); outline-offset: 2px; border-radius: 4px; } /* -------------------------------------------------------------------------- 12. Knapper, formularfelter og søgeformular :where() = nul specificitet, så pluginets komponent-CSS (.sb-*, .soeborg-*) altid vinder. Scope er .st-main (ikke kun .st-content), fordi pluginets egne skabeloner (404/søgning, enkelt bil) renderer direkte i
    uden page.php's .st-content-wrapper. -------------------------------------------------------------------------- */ /* Felter: form_* (bg #f7f7f7, kant #d8d8d8, radius 4px, højde 50px, 13px, tekst #aaa9a9). Avadas liste dækkede input.s + type=text/email/number/ password/date/time/tel, select og textarea — samme her. type="search" er med vilje IKKE med: Avada ramte det heller ikke, så pluginets søgefelt på bil-oversigten (.sb-fsearch input) beholder sin egen højde og tekstfarve som på live. */ :where(.st-main) :where(input.s, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="date"], input[type="time"], select, textarea) { width: 100%; height: var(--st-form-height); padding: 0 15px; background-color: var(--st-form-bg); border: 1px solid var(--st-form-border); border-radius: var(--st-form-radius); box-shadow: none; font-family: inherit; font-size: var(--st-form-font-size); color: var(--st-form-text); } :where(.st-main) :where(textarea) { height: 150px; /* Avadas faste textarea-højde (målt på live: 150px, padding 8/15) */ padding: 8px 15px; line-height: normal; vertical-align: middle; /* som live — ellers lægger baseline-justeringen ~10px luft under feltet */ resize: vertical; } :where(.st-main) :where(input, textarea)::placeholder { color: var(--st-form-text); opacity: 1; } /* Fokus: Avadas form_focus_border_color er samme grå som kanten, dvs. ingen synlig ændring på live. Vi lader browserens egen fokus-ring stå (a11y). */ /* Grøn pille-knap (biler.css' pille-look på Avada-knapperne + button_typography: Mulish 800 14px/17px uppercase). Rammer temaets egne knapper, blok-editorens knap-blok og (CF7 — som Avada også gjorde; biler.css' .wpcf7-submit-regel lægger sin egen størrelse ovenpå). Bevidst IKKE bare