/* Theme Name: Andermo Theme URI: https://www.liquidweb.com/software/kadence/ Template: kadence Version: 1.2.0 Author: Kadence WP Author URI: https://www.liquidweb.com/ Description: Kadence Theme is a lightweight yet full featured WordPress theme for creating beautiful fast loading and accessible websites, easier than ever. It features an easy to use drag and drop header and footer builder to build any type of header in minutes. It features a full library of gorgeous starter templates that are easy to modify with our intelligent global font and color controls. With extensive integration with the most popular 3rd party plugins, you can quickly build impressive ecommerce websites, course websites, business websites, and more. Tags: translation-ready,accessibility-ready,two-columns,right-sidebar,left-sidebar,footer-widgets,blog,custom-logo,custom-background,custom-menu,rtl-language-support,editor-style,threaded-comments,custom-colors,featured-images,wide-blocks,full-width-template,theme-options,e-commerce Version: 1.5.2.1788085761 Updated: 2026-08-30 12:29:21 */ /* ------------------------------------------------------------------ Andermo – egen CSS Designsystem v1. Skriv aldrig hexvärden här; använd --global-paletteN så att paletten har en enda sanning. ------------------------------------------------------------------ */ /* Slotordningen följer Kadence konventioner: palette3 är temats standardfärg för rubriker och sajtnamn. Regeln nedan är en säkerhetslina om temat ändrar default. */ .site-title, .site-branding .site-title a, .site-branding .site-title a:visited { color: var(--global-palette3); } .site-branding .site-title a:hover, .site-branding .site-title a:focus { color: var(--global-palette6); } /* --------------------------------------------------------------- Hero – core/cover med klassen .hero-andermo. Gradienten ligger HÄR, inte i blockattributen. En gradient i blockets style-attribut kan inte justeras utan att sidan redigeras om, och den slår dessutom ut varje CSS-regel. Selektorerna tar med blockklassen (.wp-block-cover.hero-andermo) eftersom Kadence skriver sin layout-CSS inline EFTER child-temats stilmall. Lika specificitet förlorar. Samma princip som B27: följ kaskaden i stället för !important. --------------------------------------------------------------- */ .wp-block-cover.hero-andermo .wp-block-cover__background { opacity: 1; background: linear-gradient(to top, rgba(9, 22, 33, 0.75) 0%, rgba(9, 22, 33, 0) 38%), linear-gradient(90deg, rgba(9, 22, 33, 0.92) 0%, rgba(9, 22, 33, 0.82) 30%, rgba(9, 22, 33, 0.42) 52%, rgba(9, 22, 33, 0.10) 72%, rgba(9, 22, 33, 0.00) 100%); } /* Bakgrundsbilden ska fylla sektionen. Utan detta renderas i sin egen bredd och lämnar en vit remsa till höger. */ .wp-block-cover.hero-andermo img.wp-block-cover__image-background { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; } .wp-block-cover.hero-andermo .wp-block-cover__inner-container { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } .wp-block-cover.hero-andermo .wp-block-cover__inner-container > * { max-width: 620px; } .wp-block-cover.hero-andermo h1 { margin-bottom: 8px; } /* Ordet "framtidssäkrat" får en dämpad amber understrykning (B26), inte en markeringsruta. */ .hero-andermo mark { background: transparent; color: inherit; box-shadow: inset 0 -0.22em 0 rgba(242, 169, 107, 0.45); } /* Under 1024 px beskärs samma bild hårdare och gradienten vänds till underifrån. Ett tidigare försök bytte till den stående filen med content:url() – men webbläsaren hämtade då BÅDA bilderna, 268 kB i stället för 140 kB på mobil. */ @media (max-width: 1023px) { .wp-block-cover.hero-andermo img.wp-block-cover__image-background { object-position: 63% center; } .wp-block-cover.hero-andermo .wp-block-cover__background { background: linear-gradient(to top, rgba(9, 22, 33, 0.92) 22%, rgba(9, 22, 33, 0.55) 58%, rgba(9, 22, 33, 0.22) 100%); } .wp-block-cover.hero-andermo .wp-block-cover__inner-container > * { max-width: 100%; } } /* HubSpot-formuläret ska inte bli bredare än textkolumnen. */ .hs-form-frame { max-width: 620px; } /* --------------------------------------------------------------- Sektioner i full bredd Bakgrunden går kant till kant, innehållet håller containerbredden 1200 px från designsystemet. Kadences contentSize är 1290 och gäller inte inuti alignfull-grupper, därför sätts den här. --------------------------------------------------------------- */ .entry-content > .wp-block-group.alignfull > .wp-block-group__inner-container { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } /* Brödtext hålls på läsbar radlängd, rubriker och kolumner får använda hela containern. */ .entry-content > .wp-block-group.alignfull > .wp-block-group__inner-container > p, .entry-content > .wp-block-group.alignfull > .wp-block-group__inner-container > ul { max-width: 720px; } /* Ingen luft mellan sektionerna – varje sektion bär sin egen bakgrund och sitt eget spacing. */ .entry-content > .wp-block-group.alignfull { margin-top: 0; margin-bottom: 0; } /* Bokningskortet. HubSpot-formuläret renderas i en iframe, så dess inre stilar går inte att nå med CSS härifrån – därför ligger det på en vit yta i stället för direkt mot den mörka sektionen. */ .bokningskort { max-width: 700px; margin-left: 0; } /* Sidor som inleds med en hero i full bredd ska inte ha Kadences vanliga sidmarginal ovanför – annars ligger en vit remsa mellan sidhuvudet och heron. Scopat med :has() så vanliga sidor behåller sitt normala luftutrymme. */ .content-area:has(.entry-content > .wp-block-group.alignfull:first-child), .content-area:has(.hero-andermo) { margin-top: 0; } .entry-content-wrap:has(.entry-content > .wp-block-group.alignfull:first-child), .entry-content-wrap:has(.hero-andermo) { padding-top: 0; } .wp-block-cover.hero-andermo { margin-top: 0; margin-bottom: 0; } /* Knappar ska vara minst 46 px höga så att de blir en säker träffyta på mobil. Den fyllda knappen låg på 43 px. */ .wp-block-button__link { min-height: 46px; display: inline-flex; align-items: center; } /* --------------------------------------------------------------- Sidhuvudets bokningsknapp Menyn innehåller medvetet EN post: bokningen. Fler poster läggs till först när sidorna faktiskt finns – lärdomen från Chikara, där två menyposter gav 404 i månader. --------------------------------------------------------------- */ .header-navigation li.header-cta > a, .mobile-navigation li.header-cta > a, .header-menu-container li.header-cta > a { background: var(--global-palette1); color: var(--global-palette9); border-radius: 2px; padding-left: 20px; padding-right: 20px; min-height: 46px; display: inline-flex; align-items: center; } .header-navigation li.header-cta > a:hover, .header-navigation li.header-cta > a:focus, .mobile-navigation li.header-cta > a:hover, .header-menu-container li.header-cta > a:hover { background: var(--global-palette2); color: var(--global-palette9); } /* Kadences egen länkfärg för menyn vinner över reglerna ovan – den skrivs inline efter child-temats stilmall. Texten blev då mörk mot den amber knappen. Selektorn nedan matchar Kadences djup plus klassen, i stället för !important. */ .site-header .header-navigation .header-menu-container ul li.header-cta > a, .site-header .header-navigation .header-menu-container ul li.header-cta > a:hover, .site-header .mobile-navigation ul li.header-cta > a { color: var(--global-palette9); } /* --- Bokningsformulär: egen form mot HubSpots API (B33) --- */ /* Kortet ligger i en mörk sektion och ärver vit text. Måste nollställas. */ .bokningskort { color: var(--global-palette3); } .bokningskort a { color: var(--global-palette1); } .bokform { display: flex; flex-direction: column; gap: 20px; } .bokform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 599px) { .bokform__grid { grid-template-columns: 1fr; } } .bokform__falt { display: flex; flex-direction: column; gap: 6px; } .bokform label { font-size: 15px; font-weight: 600; color: var(--global-palette3); line-height: 1.4; } .bokform__krav { font-weight: 400; font-size: 13px; color: #5a6a78; } .bokform input[type="text"], .bokform input[type="email"], .bokform input[type="tel"], .bokform textarea { width: 100%; font: inherit; font-size: 16px; color: var(--global-palette3); background: #fff; border: 1px solid #c2ccd6; border-radius: 2px; padding: 11px 12px; min-height: 46px; } .bokform textarea { min-height: 128px; resize: vertical; } .bokform input:focus-visible, .bokform textarea:focus-visible, .bokform button:focus-visible { outline: 2px solid var(--global-palette1); outline-offset: 2px; } .bokform__hjalp { font-size: 14px; color: #5a6a78; margin: 0; } .bokform__fel { font-size: 14px; font-weight: 600; color: #a3251b; margin: 0; } .bokform__samtycke { display: flex; align-items: flex-start; gap: 10px; } .bokform__samtycke input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; } .bokform__samtycke label { font-weight: 400; font-size: 15px; line-height: 1.5; } .bokform__integritet { font-size: 14px; color: #5a6a78; margin: 0; } .bokform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .bokform__knapp { align-self: flex-start; font: inherit; font-size: 16px; font-weight: 600; background: var(--global-palette1); color: var(--global-palette9); border: 0; border-radius: 2px; padding: 0 28px; min-height: 46px; cursor: pointer; } .bokform__knapp:hover { background: #97490f; } .bokform__knapp[disabled] { opacity: .6; cursor: default; } .bokform__status { font-size: 15px; margin: 0; } .bokform__kvitto p { margin: 0 0 8px; } .bokform__kvitto p:last-child { margin-bottom: 0; } .bokform__kvitto:focus { outline: none; }