/** * ======================================================================== * CCTRL365 – PUBLIC.CSS * ======================================================================== * * NÄR LADDAS DENNA FIL? * Denna fil laddas ENDAST för sidor med Page layout "Public" (template: page-public.php). * Det är PAGE LAYOUT PUBLIC som avgör att en sida räknas som public – inte inloggning, * inte slug, inte något annat. Se inc/enqueue.php get_page_context(). * (Detta har varit källan till omfattande felsökning – dokumentera alltid denna regel.) * * På public-sidor har klassen .is-public (satt i header-public.php). * * STRUKTUR: * 1. Elementor Override * 2. Public-specifika variabler (kompletterar global.css) * 3. Bas-typografi * 4. Header & Mega-meny * 5. Hero-sektion * 6. Hero-knappar & chips * 7. Media & bildtexter * 8. Utilities * 9. Packages-sektion * * FÄRGER & TYPSNITT: Hämtas från global.css + cctrl-core (laddas efter public). * Merga INTE cctrl-* in i denna fil – redundant :root och konflikt med global.css. * ======================================================================== */ /* ======================================================================== 1. Elementor Override (Public) ------------------------------------------------------------------------ Syfte: Vinna över elementor-kit-3088 i både visning & preview. Scope: body.is-public Not: Vi använder !important här medvetet som shim. ======================================================================== */ body.is-public .elementor-kit-3088 .elementor-heading-title[class*="elementor-size-"] { font-size: inherit !important; line-height: inherit !important; } /* Grundstil för rubriker via kit (använder Publics tokens) */ body.is-public .elementor-kit-3088 h1, body.is-public .elementor-kit-3088 h1.elementor-heading-title { font-size: var(--h1-size) !important; line-height: var(--h1-line) !important; font-weight: 600 !important; color: var(--brand-twilight) !important; } body.is-public .elementor-kit-3088 h2, body.is-public .elementor-kit-3088 h2.elementor-heading-title { font-size: var(--h2-size) !important; line-height: var(--h2-line) !important; font-weight: 600 !important; color: var(--brand-twilight) !important; } body.is-public .elementor-kit-3088 h3, body.is-public .elementor-kit-3088 h3.elementor-heading-title { font-size: var(--h3-size) !important; line-height: var(--h3-line) !important; font-weight: 500 !important; color: var(--brand-twilight) !important; } body.is-public .elementor-kit-3088 h4, body.is-public .elementor-kit-3088 h4.elementor-heading-title { font-size: var(--h4-size) !important; line-height: var(--h4-line) !important; font-weight: 600 !important; color: var(--brand-twilight) !important; } body.is-public .elementor-kit-3088 h5, body.is-public .elementor-kit-3088 h5.elementor-heading-title { font-size: var(--h5-size) !important; line-height: var(--h5-line) !important; font-weight: 600 !important; color: var(--brand-twilight) !important; /* enligt din visning */ } body.is-public .elementor-kit-3088 h6, body.is-public .elementor-kit-3088 h6.elementor-heading-title { font-size: var(--h6-size) !important; line-height: var(--h6-line) !important; font-weight: 600 !important; color: var(--brand-twilight) !important; /* enligt din visning */ text-transform: none !important; } /* Brödtext i kit/Heading-texteditor */ body.is-public .elementor-kit-3088 p, body.is-public .elementor-kit-3088 .elementor-text-editor { font-size: 1rem !important; /* 16 */ line-height: 1.5rem !important; /* 24 */ color: var(--brand-ink) !important; } /* Fix för Elementor Kit line-height bug */ body.is-public .elementor-kit-16274 * { line-height: inherit; } body.is-public .elementor-kit-16274 p, body.is-public .elementor-kit-16274 .elementor-text-editor, body.is-public .elementor-kit-16274 li, body.is-public .elementor-kit-16274 a { line-height: 1.5rem; } /* ======================================================================== 2. PUBLIC-SPECIFIKA VARIABLER Kompletterar global.css med layout och header-inställningar ======================================================================== */ :is(html, body).is-public, .is-public { /* Layout-mått: cctrl-section full width, cctrl-container max 800px */ --container-max: 800px; --gutter: 24px; /* Header-variabler */ --hdr-bg: var(--brand-twilight); --hdr-ink: var(--brand-lilac); --hdr-height: 72px; /* Mega-meny panel-padding */ --panel-left: 280px; --panel-right: 300px; /* Standard färger */ color: var(--brand-ink); background: var(--brand-lilac); font-family: var(--font-body); } /* Force light background on public pages even if other styles override body */ html.is-public, body.is-public, .is-public #page, .is-public .site { background: var(--brand-lilac) !important; color: var(--brand-ink); } /* ======================================================================== LAYOUT: Full-width support för public-sidor ======================================================================== */ /* Se till att main kan vara fullbredd utan begränsningar */ body.is-public #primary, body.is-public .site-main { width: 100%; max-width: 100%; padding: 0; margin: 0; } /* ========== BUDDYBOSS STYLING KOMMENTERAD BORT (test: se vad som förstör widgets) ========== */ /* Ta bort BuddyBoss padding från content-area och bb-grid-cell */ /* body.is-public #primary.content-area, body.is-public #primary.content-area.bb-grid-cell, body.is-public .content-area, body.is-public .content-area.bb-grid-cell { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; } */ /* Nollställ alla övriga wrappers – bb-grid/bb-grid-cell bortkommenterat */ /* body.is-public #page, body.is-public #content, body.is-public .site-content, body.is-public .site-content-grid, body.is-public .bb-grid, body.is-public .bb-grid > .bb-grid-cell, body.is-public #primary, body.is-public .site-main, body.is-public .entry-content, body.is-public .elementor, body.is-public .elementor > .elementor-section-wrap { padding-bottom: 0 !important; margin-bottom: 0 !important; } */ body.is-public #page, body.is-public #content, body.is-public .site-content, body.is-public .site-content-grid, body.is-public #primary, body.is-public .site-main, body.is-public .entry-content, body.is-public .elementor, body.is-public .elementor > .elementor-section-wrap { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* Säkerställ att sista sektionen på sidan aldrig lämnar luft före footer */ body.is-public :is(.elementor-section, .elementor-container, .elementor, .entry-content, .site-main):last-child { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* Ta bort sista modulens extra bottenluft (för cctrl-sektioner/snippets) */ body.is-public :is(.cctrl-section, .cctrl-section--bg-lilac, .cctrl-section--bg-soft):last-of-type { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Ta också bort padding från bb-grid-cell (BuddyBoss – kommenterad bort för test) */ /* body.is-public .bb-grid-cell { padding-left: 0 !important; padding-right: 0 !important; } */ /* Sektion: full width; container: max 800px */ body.is-public .cctrl-section { width: 100%; max-width: 100%; margin: 0; padding: clamp(72px, 10vw, 120px) 0; } body.is-public .cctrl-container { max-width: var(--content-max-tight); /* 800px – innehåll under header */ margin-inline: auto; padding-inline: var(--section-pad-x, clamp(16px, 4vw, 40px)); } body.is-public .cctrl-section--text-only { background: color-mix(in srgb, var(--brand-lilac, #f3f4fb), #ffffff 12%); } body.is-public .cctrl-section--text-only .cctrl-container { display: flex; justify-content: center; } body.is-public .cctrl-section--text-only .cctrl-content { max-width: 820px; width: 100%; display: grid; gap: var(--space-3); text-align: left; } body.is-public .cctrl-section--text-only h2 { margin: 0 0 var(--space-2); color: var(--brand-twilight); font-size: clamp(1.8rem, 2.4vw, 2.2rem); line-height: 1.25; letter-spacing: -0.01em; } body.is-public .cctrl-section--text-only p { margin: 0; font-size: 1.05rem; line-height: 1.7; color: var(--brand-ink); } /* Elementor full-width sections ska bryta ut från main */ body.is-public .elementor-section.elementor-section-full_width { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: 0; padding-right: 0; } /* Container-bredd styrs av cctrl-layout.css och cctrl-elementor.css (var(--content-max-tight)). Public.css överstyr INTE container max-width – undvik ping-pong; en källa per beslut. */ /* Widgets inuti full-width sections (inkl. spacers) ska vara fullbredd */ body.is-public .elementor-section.elementor-section-full_width .elementor-widget, body.is-public .elementor-section.elementor-section-full_width .elementor-widget-container { padding-left: 0; padding-right: 0; } /* ======================================================================== 3. BAS-TYPOGRAFI Stora storlekar för publika sidor ======================================================================== */ /* 3.1 Sektioner och containers ------------------------------------ */ .is-public .public-section { position: relative; width: 100%; background: transparent; padding-block: clamp(48px, 7vw, 96px); margin-block: clamp(12px, 3vw, 24px); isolation: isolate; } .is-public .public-section .public-content { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } .is-public .public-section .public-content.narrow { max-width: 680px; } .is-public .public-section .public-content.wide { max-width: 1000px; } .is-public .public-section .public-content.full { max-width: var(--container-max); } /* 3.2 Rubriker ------------------------------------ */ /* ========================================================================== 3.2 Headings (Public) -------------------------------------------------------------------------- Scope: body.is-public Fonts: definieras i global.css (ingen font-family här). ========================================================================== */ /* Public-specifika tokens för rubrikskalan */ body.is-public { --h1-size: 2rem; /* 32px */ --h1-line: 2.5rem; /* 40px */ --h2-size: 1.5rem; /* 24px */ --h2-line: 2rem; /* 32px */ --h3-size: 1.25rem; /* 20px */ --h3-line: 1.75rem; /* 28px */ --h4-size: 1.125rem; /* 18px */ --h4-line: 1.625rem; /* 26px */ --h5-size: 1rem; /* 16px */ --h5-line: 1.5rem; /* 24px */ --h6-size: .875rem; /* 14px */ --h6-line: 1.25rem; /* 20px */ } /* Basstil (semantik + rytm) */ body.is-public h1, body.is-public h2, body.is-public h3, body.is-public h4, body.is-public h5, body.is-public h6 { margin: 0 0 .5rem; letter-spacing: 0; color: var(--brand-twilight); } body.is-public h1 { font-size: var(--h1-size); line-height: var(--h1-line); font-weight: 600; } body.is-public h2 { font-size: var(--h2-size); line-height: var(--h2-line); font-weight: 600; } body.is-public h3 { font-size: var(--h3-size); line-height: var(--h3-line); font-weight: 600; } body.is-public h4 { font-size: var(--h4-size); line-height: var(--h4-line); font-weight: 600; } body.is-public h5 { font-size: var(--h5-size); line-height: var(--h5-line); font-weight: 600; } body.is-public h6 { font-size: var(--h6-size); line-height: var(--h6-line); font-weight: 600; text-transform: none; } /* Länk i rubrik */ body.is-public .elementor .elementor-widget-heading .elementor-heading-title a { color: inherit; text-decoration: none; } body.is-public .elementor .elementor-widget-heading .elementor-heading-title a:hover { text-decoration: underline; } /* Public: luftigare kort */ body.is-public { --card-padding: var(--space-4); --card-gap: var(--space-2); --card-title-lines: 2; --card-excerpt-lines: 3; } /* 3.3 Brödtext ------------------------------------ */ .is-public p, .is-public .elementor-text-editor p { font-size: 22px !important; line-height: 1.7 !important; margin: 0 0 1.5em !important; } /* 3.4 Länkar ------------------------------------ */ .is-public .public-content a:not(.btn) { color: var(--brand-terracotta); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .is-public .public-content a:not(.btn):hover { background: color-mix(in srgb, var(--brand-terracotta) 12%, transparent); border-radius: 6px; } /* 3.5 Responsiv typografi ------------------------------------ */ @media (max-width: 768px) { .is-public h1, .is-public .h1, .is-public .elementor-heading-title.elementor-size-default { font-size: 48px !important; } .is-public h2, .is-public .h2 { font-size: 36px !important; } .is-public h3, .is-public .h3 { font-size: 24px !important; } .is-public p, .is-public .elementor-text-editor p { font-size: 20px !important; } } /* ======================================================================== 4. HEADER & MEGA-MENY ======================================================================== */ /* 4.1 Header wrapper ------------------------------------ */ .is-public .public-header { --hdr-bg: var(--brand-twilight); --hdr-ink: var(--brand-lilac); position: sticky; top: 0; z-index: 1000; background: var(--hdr-bg); color: var(--hdr-ink); } /* FORCE menu links to be visible - override header color inheritance */ .is-public .public-header .mega-menu > li > a.mega-menu-link, .is-public .public-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link, .is-public .public-header #mega-menu-wrap-public_header #mega-menu-public_header > li.mega-menu-item > a.mega-menu-link { color: #3d3e66 !important; opacity: 1 !important; visibility: visible !important; } /* Also target without body class for maximum specificity */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link, html[data-theme="dark"] #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link, html[data-theme="dark"] body.is-public .public-header #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { color: #3d3e66 !important; background: transparent !important; background-color: transparent !important; opacity: 1 !important; visibility: visible !important; } /* Force colors in dark mode too */ html[data-theme="dark"] #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link, html[data-theme="dark"] #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:focus > a.mega-menu-link, html[data-theme="dark"] #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link, html[data-theme="dark"] #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link { color: #3d3e66 !important; background: transparent !important; background-color: transparent !important; opacity: 1 !important; visibility: visible !important; } .is-public .public-header:hover { --hdr-bg: var(--brand-lilac); --hdr-ink: var(--brand-twilight); } .is-public .public-header .mega-menu > li.mega-menu-megamenu:hover { --hdr-bg: var(--brand-lilac); --hdr-ink: var(--brand-twilight); } /* 4.2 Header layout (flex) */ .is-public .public-header .header-inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); min-height: var(--hdr-height); display: flex; align-items: center; flex-wrap: nowrap; /* förhindra radbrytning */ gap: calc(var(--gutter) * 2); /* luft mellan logga | meny | actions */ } /* Kolumner */ .is-public .public-header .hdr-col { display: flex; align-items: center; } .is-public .public-header .hdr-brand { flex: 0 0 auto; } .is-public .public-header .hdr-nav { flex: 1 1 auto; justify-content: center; min-width: 0; } .is-public .public-header .hdr-actions { flex: 0 0 auto; } /* 4.2a Primärmeny layout */ .is-public .public-header .hdr-nav .mega-menu { display: flex; align-items: center; flex-wrap: nowrap; /* ingen brytning i topplänkarna */ gap: 2rem; margin: 0; padding: 0; list-style: none; } .is-public .public-header .hdr-nav .mega-menu > li { display: flex; align-items: center; } .is-public .public-header .hdr-nav .mega-menu > li > a.mega-menu-link { display: inline-flex; align-items: center; line-height: 1.1; padding: 10px 12px; font-weight: 600; position: relative; color: var(--brand-twilight) !important; text-decoration: none; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; transition: color 160ms ease; } /* 4.3 Logga ------------------------------------ */ .is-public .public-header .brandmark { text-decoration: none; } .is-public .public-header .brand-text { font-family: var(--font-heading); font-weight: 900; letter-spacing: 0.4px; color: var(--hdr-ink); font-size: clamp(28px, 4.2vw, 42px); display: inline-block; line-height: 1; -webkit-font-smoothing: antialiased; transform: translateZ(0); } /* 4.4 Topplänkar ------------------------------------ */ /* 4.4 Topplänkar – centrera varje topp-länk vertikalt */ .is-public .public-header .mega-menu > li > a.mega-menu-link { display: inline-flex; align-items: center; line-height: 1.1; padding: 10px 12px; font-weight: 600; position: relative; color: var(--brand-twilight) !important; text-decoration: none; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; transition: color 160ms ease; } .is-public .public-header .mega-menu > li > a.mega-menu-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 999px; background: transparent; transform: scaleX(0); transform-origin: left; transition: transform 180ms ease, background 180ms ease; } .is-public .public-header .mega-menu > li:hover > a.mega-menu-link, .is-public .public-header .mega-menu > li:focus-within > a.mega-menu-link, .is-public .public-header .mega-menu > li.mega-toggle-on > a.mega-menu-link, .is-public .public-header .mega-menu > li.mega-current-menu-item > a.mega-menu-link, .is-public .public-header .mega-menu > li.mega-current-menu-ancestor > a.mega-menu-link { color: var(--brand-twilight) !important; } .is-public .public-header .mega-menu > li:hover > a.mega-menu-link::after, .is-public .public-header .mega-menu > li:focus-within > a.mega-menu-link::after, .is-public .public-header .mega-menu > li.mega-toggle-on > a.mega-menu-link::after, .is-public .public-header .mega-menu > li.mega-current-menu-item > a.mega-menu-link::after, .is-public .public-header .mega-menu > li.mega-current-menu-ancestor > a.mega-menu-link::after { background: var(--lav-400, #aeb3da); transform: scaleX(1); } /* Force Max Mega Menu skin to match text-only styling */ .is-public .public-header #mega-menu-wrap-cctrl_primary #mega-menu-cctrl_primary > li.mega-menu-item > a.mega-menu-link { background: transparent !important; border-radius: 0 !important; padding: 10px 12px !important; color: var(--brand-twilight) !important; box-shadow: none !important; } .is-public .public-header #mega-menu-wrap-public_header #mega-menu-public_header > li.mega-menu-item > a.mega-menu-link { background: transparent !important; border-radius: 0 !important; padding: 10px 12px !important; color: var(--brand-twilight) !important; box-shadow: none !important; } .is-public .public-header #mega-menu-wrap-cctrl_primary #mega-menu-cctrl_primary > li.mega-menu-item:hover > a.mega-menu-link, .is-public .public-header #mega-menu-wrap-cctrl_primary #mega-menu-cctrl_primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, .is-public .public-header #mega-menu-wrap-cctrl_primary #mega-menu-cctrl_primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link { color: var(--brand-twilight) !important; background: transparent !important; box-shadow: none !important; } .is-public .public-header #mega-menu-wrap-public_header #mega-menu-public_header > li.mega-menu-item:hover > a.mega-menu-link, .is-public .public-header #mega-menu-wrap-public_header #mega-menu-public_header > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, .is-public .public-header #mega-menu-wrap-public_header #mega-menu-public_header > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, .is-public .public-header #mega-menu-wrap-public_header #mega-menu-public_header > li.mega-menu-item:focus > a.mega-menu-link, .is-public .public-header #mega-menu-wrap-public_header #mega-menu-public_header > li.mega-menu-item.mega-toggle-on > a.mega-menu-link { color: #3d3e66 !important; background: transparent !important; box-shadow: none !important; border-color: transparent !important; } /* Nuclear option - target every possible state */ body.is-public .public-header #mega-menu-wrap-public_header #mega-menu-public_header > li.mega-menu-item > a.mega-menu-link, body.is-public .public-header #mega-menu-wrap-public_header #mega-menu-public_header > li.mega-menu-item:hover > a.mega-menu-link, body.is-public .public-header #mega-menu-wrap-public_header #mega-menu-public_header > li.mega-menu-item:focus > a.mega-menu-link, body.is-public .public-header #mega-menu-wrap-public_header #mega-menu-public_header > li.mega-menu-item.mega-toggle-on > a.mega-menu-link, body.is-public .public-header #mega-menu-wrap-public_header #mega-menu-public_header > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, body.is-public .public-header #mega-menu-wrap-public_header #mega-menu-public_header > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link { color: #3d3e66 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; } /* 4.6 Mega-panel ------------------------------------ */ .is-public .public-header .mega-sub-menu { position: absolute; left: 0; right: 0; top: 100%; margin: 0 auto; padding: 32px max(40px, var(--panel-right)) 38px max(56px, var(--panel-left)); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); background: var(--hdr-bg); color: var(--hdr-ink); } .is-public .public-header .mega-sub-menu .mega-menu-row { gap: 18px 48px; } /* 4.7 Kolumnrubriker ------------------------------------ */ .is-public .public-header .mega-sub-menu .widgettitle, .is-public .public-header .mega-sub-menu .widget-title, .is-public .public-header .mega-sub-menu h4, .is-public .public-header .mega-sub-menu .eyebrow, .is-public .public-header .mega-sub-menu .mega-title { margin: 0 0 0.5rem; text-transform: uppercase; letter-spacing: 0.2em; font: 700 12px/1 var(--font-heading); color: var(--brand-twilight); opacity: 0.9; text-align: center; } /* 4.8 Beskrivningar ------------------------------------ */ .is-public .public-header .mega-sub-menu .textwidget p, .is-public .public-header .mega-sub-menu .widget_text p, .is-public .public-header .mega-sub-menu .mega-desc { margin: 0.15rem 0 1rem; font: italic 1rem/1.55 var(--font-body); color: #4b4a73; } /* 4.9 Länkar i panel ------------------------------------ */ .is-public .public-header .mega-sub-menu a.mega-menu-link { display: block; padding: 0.15rem 0; color: var(--brand-twilight); font-weight: 800; text-decoration: none; } .is-public .public-header .mega-sub-menu a.mega-menu-link:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 2px; } /* 4.10 Dölj widgetrubriker ------------------------------------ */ .is-public .public-header .mega-sub-menu .widget .widget-title, .is-public .public-header .mega-sub-menu .mega-block-title { display: none !important; } /* 4.11 Mega-panel responsiv ------------------------------------ */ @media (max-width: 1100px) { .is-public .public-header .mega-sub-menu { padding: 28px 24px 30px 24px; } } /* 4.12 Header actions ------------------------------------ */ .is-public .public-header .hdr-actions { display: flex; align-items: center; gap: 16px; z-index: 1002; } .is-public .public-header .hdr-actions .cctrl-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--lav-500), transparent 30%) !important; background: color-mix(in srgb, var(--lav-300), #ffffff 20%) !important; color: var(--lav-500) !important; box-shadow: 0 3px 10px rgba(98, 100, 167, 0.2) !important; transition: box-shadow 150ms ease, background 150ms ease, border-color 150ms ease, color 150ms ease; } .is-public .public-header .hdr-actions .cctrl-theme-toggle:hover, .is-public .public-header .hdr-actions .cctrl-theme-toggle:focus-visible { background: var(--lav-500) !important; border-color: var(--lav-500) !important; color: #ffffff !important; box-shadow: 0 5px 14px rgba(98, 100, 167, 0.3) !important; } .is-public .public-header .user-link { display: inline-flex; align-items: center; gap: 0.55rem; height: 40px; padding: 0 14px; border-radius: 12px; border: 0; cursor: pointer; background: color-mix(in srgb, var(--lav-300), #ffffff 20%) !important; color: var(--lav-500) !important; box-shadow: 0 4px 12px rgba(98, 100, 167, 0.2) !important; transition: box-shadow 150ms ease, background 150ms ease, color 150ms ease; } .is-public .public-header .user-link:hover, .is-public .public-header .user-wrap.is-open > .user-link, .is-public .public-header .user-wrap:focus-within > .user-link { background: var(--lav-500) !important; color: #ffffff !important; box-shadow: 0 6px 18px rgba(98, 100, 167, 0.3) !important; } /* 4.13 Profil-dropdown ------------------------------------ */ .is-public .public-header .profile-dropdown .user-wrap { position: relative; } .is-public .public-header .profile-dropdown .sub-menu.bb-like { position: absolute; right: 0; top: calc(100% + 10px); min-width: 260px; margin: 0; padding: 12px; list-style: none; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s 0.15s; z-index: 10050; } .is-public .public-header .profile-dropdown .sub-menu.bb-like::before, .is-public .public-header .profile-dropdown .sub-menu.bb-like::after { content: none !important; } .is-public .public-header .user-wrap.is-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s; } .is-public .public-header .profile-dropdown .sub-menu a { display: flex; align-items: center; gap: 0.6rem; padding: 10px 12px; border-radius: 10px; color: var(--brand-twilight); text-decoration: none; } .is-public .public-header .profile-dropdown .sub-menu a:hover { background: #eef0f8; } /* 4.13b Personlig användarmeny (mega-nav) – snygg och läsbar på public Samma innehåll som i app; mörk text på ljus bakgrund, ingen terracotta som brödtext. */ .is-public .cctrl-mega-nav .cctrl-user-dropdown, .is-public .cctrl-mega-nav .cctrl-user-dropdown--personal { background: linear-gradient(180deg, #ffffff 0%, rgba(248, 249, 255, 0.98) 100%) !important; border-radius: 16px; box-shadow: 0 8px 32px rgba(61, 62, 102, 0.12), 0 2px 8px rgba(61, 62, 102, 0.06); } .is-public .cctrl-mega-nav .cctrl-user-dropdown a, .is-public .cctrl-mega-nav .cctrl-user-dropdown .cctrl-user-menu__list a, .is-public .cctrl-mega-nav .cctrl-user-menu__list a { color: var(--brand-twilight, #3d3e66) !important; font-weight: 500; padding: 12px 16px; border-radius: 10px; transition: background 0.15s ease, color 0.15s ease; } .is-public .cctrl-mega-nav .cctrl-user-dropdown a:hover, .is-public .cctrl-mega-nav .cctrl-user-dropdown .cctrl-user-menu__list a:hover, .is-public .cctrl-mega-nav .cctrl-user-menu__list a:hover { background: color-mix(in srgb, var(--brand-terracotta) 8%, transparent) !important; color: var(--terracotta-900, #a94c2d) !important; } /* 4.14 CTA-knapp ------------------------------------ */ .is-public .public-header .btn-cta { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 12px; text-decoration: none; background: var(--lav-500); color: #fff; font-weight: 600; transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease; } .is-public .public-header .btn-cta:hover, .is-public .public-header .btn-cta:focus-visible { background: color-mix(in srgb, var(--lav-500), #ffffff 10%); box-shadow: 0 12px 28px rgba(98, 100, 167, 0.25); } .is-public .public-header .btn-cta:focus-visible { outline: 2px solid color-mix(in srgb, var(--lav-300, #a4a8e3), transparent 35%); outline-offset: 3px; } /* 4.15 Gömd header ------------------------------------ */ .is-public .public-header.header--hidden { transform: translateY(-100%); transition: transform 0.22s ease; } /* 4.16 Z-index ------------------------------------ */ .is-public .public-header .brandmark, .is-public .public-header .hdr-actions { position: relative; z-index: 1003; } .is-public .public-header .mega-sub-menu { z-index: 1001; } .is-public .public-header { overflow: visible; } /* 4.17 Visually hidden ------------------------------------ */ .is-public .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* ======================================================================== 4.18 MOBILE NAVIGATION (≤1024px) ======================================================================== Breakpoint: ≤1024px switches to hamburger menu - Desktop nav (.hdr-nav) is hidden - Hamburger button appears in .hdr-actions - Slide-in panel from right with accordion sections - Reuses existing colors, fonts, spacing, shadows from desktop nav ======================================================================== */ /* 4.18.1 Hide desktop nav on mobile/tablet ------------------------------------ */ @media screen and (max-width: 1024px) { .is-public .public-header .hdr-nav, body.is-public .public-header .hdr-nav { display: none !important; } } /* 4.18.2 Mobile Navigation Toggle (Hamburger Button) ------------------------------------ */ .is-public .public-header .mobile-nav-toggle, body.is-public .public-header .mobile-nav-toggle, body.is-public .public-header .hdr-actions .mobile-nav-toggle { display: none; /* Hidden on desktop */ flex-direction: column; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin-left: 12px; border: 0; background: color-mix(in srgb, var(--lav-300), #ffffff 20%) !important; border-radius: 12px; cursor: pointer; box-shadow: 0 4px 12px rgba(98, 100, 167, 0.2) !important; transition: box-shadow 150ms ease, background 150ms ease; z-index: 1004; position: relative; } .is-public .public-header .mobile-nav-toggle:hover, .is-public .public-header .mobile-nav-toggle:focus-visible { background: var(--lav-500) !important; box-shadow: 0 6px 18px rgba(98, 100, 167, 0.3) !important; outline: none; } .is-public .public-header .mobile-nav-toggle:focus-visible { outline: 2px solid color-mix(in srgb, var(--lav-300), transparent 35%); outline-offset: 3px; } /* Hamburger icon (3 lines) */ .is-public .public-header .mobile-nav-toggle-icon { display: flex; flex-direction: column; justify-content: space-between; width: 20px; height: 14px; position: relative; } .is-public .public-header .mobile-nav-toggle-icon span { display: block; width: 100%; height: 2px; background: var(--lav-500); border-radius: 2px; transition: transform 200ms ease, opacity 200ms ease, background 150ms ease; } .is-public .public-header .mobile-nav-toggle:hover .mobile-nav-toggle-icon span, .is-public .public-header .mobile-nav-toggle:focus-visible .mobile-nav-toggle-icon span { background: #ffffff; } .is-public .public-header .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .is-public .public-header .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle-icon span:nth-child(2) { opacity: 0; } .is-public .public-header .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Show hamburger on mobile/tablet */ @media screen and (max-width: 1024px) { .is-public .public-header .mobile-nav-toggle, body.is-public .public-header .mobile-nav-toggle, body.is-public .public-header .hdr-actions .mobile-nav-toggle, .public-header .hdr-actions .mobile-nav-toggle, .public-header .mobile-nav-toggle, button.mobile-nav-toggle { display: flex !important; visibility: visible !important; opacity: 1 !important; } } /* 4.18.3 Mobile Navigation Overlay (backdrop) ------------------------------------ */ .is-public .public-header .mobile-nav-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1002; opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 200ms ease; backdrop-filter: blur(2px); } .is-public .public-header .mobile-nav-overlay[aria-hidden="false"] { opacity: 1; visibility: visible; } /* 4.18.4 Mobile Navigation Panel (slide-in from right) ------------------------------------ */ .is-public .public-header .mobile-nav-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(85vw, 400px); max-width: 400px; background: var(--brand-lilac); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18); z-index: 1003; transform: translateX(100%); transition: transform 300ms ease; overflow-y: auto; overflow-x: hidden; } .is-public .public-header .mobile-nav-panel[aria-hidden="false"] { transform: translateX(0); } .is-public .public-header .mobile-nav-panel-inner { padding: var(--hdr-height) var(--space-4) var(--space-5); min-height: 100%; } /* 4.18.5 Mobile Navigation Section (accordion) ------------------------------------ */ .is-public .public-header .mobile-nav-section { border-bottom: 1px solid color-mix(in srgb, var(--brand-ink), transparent 85%); margin-bottom: 0; } .is-public .public-header .mobile-nav-section:last-child { border-bottom: 0; } /* Section toggle button */ .is-public .public-header .mobile-nav-section-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; border: 0; background: transparent; cursor: pointer; text-align: left; font-family: var(--font-heading); font-size: var(--text-h3); font-weight: 600; color: var(--brand-twilight); transition: color 160ms ease; } .is-public .public-header .mobile-nav-section-toggle:hover, .is-public .public-header .mobile-nav-section-toggle:focus-visible { color: var(--lav-500); outline: none; } .is-public .public-header .mobile-nav-section-toggle:focus-visible { outline: 2px solid color-mix(in srgb, var(--lav-300), transparent 35%); outline-offset: 2px; border-radius: 4px; } .is-public .public-header .mobile-nav-section-title { flex: 1; } /* Accordion icon (chevron) */ .is-public .public-header .mobile-nav-section-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: var(--space-2); color: var(--lav-500); transition: transform 200ms ease, color 160ms ease; flex-shrink: 0; } .is-public .public-header .mobile-nav-section-toggle[aria-expanded="true"] .mobile-nav-section-icon { transform: rotate(180deg); } /* Section content (accordion panel) */ .is-public .public-header .mobile-nav-section-content { max-height: 0; overflow: hidden; transition: max-height 300ms ease, padding 300ms ease; padding: 0; } .is-public .public-header .mobile-nav-section-content[aria-hidden="false"] { max-height: 2000px; /* Large enough for content */ padding-bottom: var(--space-2); } /* Section list (links) */ .is-public .public-header .mobile-nav-section-list { list-style: none; margin: 0; padding: 0; padding-left: var(--space-3); } .is-public .public-header .mobile-nav-section-item { margin: 0; padding: 0; } /* Section links */ .is-public .public-header .mobile-nav-section-link { display: block; padding: var(--space-2) 0; font-family: var(--font-body); font-size: var(--text-body); font-weight: 600; color: var(--brand-twilight); text-decoration: none; transition: color 160ms ease; position: relative; padding-left: var(--space-3); } .is-public .public-header .mobile-nav-section-link::before { content: "—"; position: absolute; left: 0; color: var(--lav-400); opacity: 0.6; } .is-public .public-header .mobile-nav-section-link:hover, .is-public .public-header .mobile-nav-section-link:focus-visible { color: var(--lav-500); outline: none; } .is-public .public-header .mobile-nav-section-link:focus-visible { outline: 2px solid color-mix(in srgb, var(--lav-300), transparent 35%); outline-offset: 2px; border-radius: 4px; } /* Direct link (parent without children) */ .is-public .public-header .mobile-nav-section-link-direct { padding: var(--space-3) 0; padding-left: 0; } .is-public .public-header .mobile-nav-section-link-direct::before { display: none; } /* 4.18.6 Prevent body scroll when mobile nav is open ------------------------------------ */ body.mobile-nav-open { overflow: hidden; } /* 4.18.7 Adjust header actions spacing on mobile ------------------------------------ */ @media (max-width: 1024px) { .is-public .public-header .hdr-actions { gap: 12px; } /* Hide CTA button text on very small screens, show icon only if needed */ @media (max-width: 480px) { .is-public .public-header .btn-cta { padding: 0 12px; font-size: 0.875rem; } } } /* ======================================================================== 5. HERO-SEKTION ======================================================================== */ /* 5.1 Hero-variabler ------------------------------------ */ :root { --hero-bg-top: #1f2345; --hero-bg-mid: #252b51; --txt-muted: rgba(255, 255, 255, 0.92); --accent-600: #e67d49; } /* 5.2 Hero layout ------------------------------------ */ .is-public.hero-start { position: relative; min-height: 80vh; display: flex; align-items: center; justify-content: center; } .is-public.hero-start .hero-inner { max-width: 1200px; margin: 0 auto; padding: 2rem 1.25rem; display: grid; grid-template-columns: 1fr 0.9fr; gap: min(5vw, 56px); align-items: center; } /* 5.3 Hero responsiv ------------------------------------ */ @media (max-width: 980px) { .is-public.hero-start .hero-inner { grid-template-columns: 1fr; text-align: center; } } /* 5.4 Hero bakgrund ------------------------------------ */ .is-public.hero-start.hero-dark { background: linear-gradient( 180deg, var(--hero-bg-top) 0%, var(--hero-bg-mid) 68%, var(--brand-lilac) 100% ) !important; } .is-public.hero-start.hero-dark::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(10, 12, 26, 0.36) 0%, rgba(10, 12, 26, 0.16) 60%, rgba(10, 12, 26, 0) 95% ); } /* 5.5 Hero innehåll ------------------------------------ */ /* Hero-sektion padding (höjd) */ .is-public .hero, .is-public .hero-a { padding: clamp(28px, 5vw, 56px) 0; } .is-public .hero-content { position: relative; z-index: 2; max-width: 700px; margin-inline: auto; text-align: center; } /* Tvinga centrering på alla barn-element */ .is-public .hero-content * { text-align: center !important; } /* SUPER-specifik regel för hero h1 */ body.is-public .hero-content h1.elementor-heading-title, body.is-public.hero .hero-content h1, body.is-public.hero-a .hero-content h1, .is-public .hero-content h1 { color: #e9eaf6 !important; font-family: var(--font-heading) !important; font-weight: 900 !important; font-size: 72px !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; margin: 0.2rem 0 0.35rem !important; } /* Lead-text under rubrik */ .is-public .hero-content .lead, .is-public .hero-content p { margin: 0 auto; max-width: 70ch; opacity: 0.95; color: #ffffff !important; font-family: var(--font-body); font-size: clamp(15px, 0.5vw + 14px, 18px); line-height: 1.6; font-weight: 400; } /* ======================================================================== HERO STYLING FÖR ELEMENTOR-SEKTIONER PÅ PUBLIKA SIDOR ======================================================================== */ /* VIKTIGT: Main-wrapper får padding-top så att ALLT innehåll (inkl. hero) hamnar UNDER den sticky headern. Detta vinner över både cctrl-layout och eventuella Elementor inline-stilar på första sektionen. */ body.is-public main.cctrl-main.public-page { padding-top: calc(var(--hdr-height) + 56px) !important; /* 72px + 56px = 128px min */ } body.admin-bar.is-public main.cctrl-main.public-page { padding-top: calc(var(--hdr-height) + 56px + 32px) !important; /* + admin bar */ } @media screen and (max-width: 782px) { body.admin-bar.is-public main.cctrl-main.public-page { padding-top: calc(var(--hdr-height) + 56px + 46px) !important; } } /* Hero-sektioner på publika sidor - första sektionen (design-padding, inte nav-offset) */ body.is-public .elementor-section:first-of-type:not(.cctrl-hero), body.is-public .elementor-section.cctrl-hero:first-of-type { padding-top: clamp(32px, 4vw, 56px) !important; /* Mindre eftersom main redan ger nav-offset */ padding-bottom: clamp(40px, 6vw, 80px) !important; } body.admin-bar.is-public .elementor-section:first-of-type:not(.cctrl-hero), body.admin-bar.is-public .elementor-section.cctrl-hero:first-of-type { padding-top: clamp(32px, 4vw, 56px) !important; } /* Hero-container - centrera innehåll, max-width 700px */ /* Gäller både med och utan cctrl-hero klass */ body.is-public .elementor-section:first-of-type:not(.cctrl-hero) > .elementor-container, body.is-public .elementor-section:first-of-type:not(.cctrl-hero) > .e-con, body.is-public .elementor-section:first-of-type:not(.cctrl-hero) .elementor-container, body.is-public .elementor-section:first-of-type:not(.cctrl-hero) .e-con { text-align: center !important; max-width: 700px !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; } /* Hero-rubrik (H1) - centrerad, under navigeringen */ body.is-public .elementor-section:first-of-type .elementor-widget-heading, body.is-public .elementor-section:first-of-type .elementor-widget-heading .elementor-widget-container, body.is-public .elementor-section:first-of-type .elementor-widget-heading .elementor-heading-title, body.is-public .elementor-section:first-of-type .elementor-heading-title, body.is-public .elementor-section:first-of-type h1 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; margin-top: 0 !important; margin-bottom: var(--space-4) !important; width: 100% !important; max-width: 100% !important; } /* Hero-text (P) - centrerad, inboxad, max 700px */ body.is-public .elementor-section:first-of-type .elementor-widget-text-editor, body.is-public .elementor-section:first-of-type .elementor-widget-text-editor .elementor-widget-container, body.is-public .elementor-section:first-of-type .elementor-widget-text-editor p, body.is-public .elementor-section:first-of-type p:not(.elementor-widget-container) { text-align: center !important; max-width: 700px !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; } /* Säkerställ att alla widgets i första sektionen är centrerade */ body.is-public .elementor-section:first-of-type .elementor-widget { text-align: center !important; width: 100% !important; max-width: 700px !important; margin-left: auto !important; margin-right: auto !important; } body.is-public .elementor-section:first-of-type .elementor-widget-container { text-align: center !important; width: 100% !important; max-width: 700px !important; margin-left: auto !important; margin-right: auto !important; } /* 5.6 Hero mobil ------------------------------------ */ @media (max-width: 768px) { .is-public.hero-start.hero-dark .hero-content h1 { font-size: 48px; } .is-public.hero-start.hero-dark .hero-content .lead { font-size: 20px; } body.is-public .elementor-section:first-of-type .elementor-widget-heading .elementor-heading-title, body.is-public .elementor-section:first-of-type .elementor-heading-title, body.is-public .elementor-section:first-of-type h1 { font-size: clamp(2rem, 2rem + 1.5vw, 3rem) !important; } body.is-public .elementor-section:first-of-type > .elementor-container, body.is-public .elementor-section:first-of-type > .e-con { max-width: 100% !important; padding-left: var(--section-pad-x) !important; padding-right: var(--section-pad-x) !important; } } /* 5.7 Hero illustration ------------------------------------ */ .is-public.hero-start .hand { position: relative; z-index: 2; display: block; width: min(46vw, 640px); max-width: 100%; height: auto; margin-inline: auto; filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.18)); } /* ======================================================================== 6. HERO-KNAPPAR & CHIPS ======================================================================== */ /* 6.1 Elementor-reset ------------------------------------ */ .is-public.hero-start .elementor-button, .is-public.hero-start .elementor-button:before, .is-public.hero-start .elementor-button:after, .is-public.hero-start .elementor-button .elementor-button-content-wrapper { background: transparent !important; box-shadow: none !important; filter: none !important; backdrop-filter: none !important; } .is-public.hero-start .btn-cta, .is-public.hero-start .btn-cta *, .is-public.hero-start .btn-cta:visited { text-decoration: none !important; -webkit-tap-highlight-color: transparent; } /* 6.2 Bas CTA ------------------------------------ */ .is-public.hero-start .btn-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 1rem 1.4rem; border-radius: 14px; font-weight: 800; letter-spacing: -0.01em; border: 0; cursor: pointer; will-change: transform, box-shadow, background; transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } /* 6.3 Fokusring ------------------------------------ */ .is-public.hero-start .btn-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(229, 122, 85, 0.55); } /* 6.4 Primär knapp ------------------------------------ */ .is-public.hero-start.hero-dark .btn-primary { background: linear-gradient(135deg, var(--accent-600) 0%, var(--brand-terracotta) 100%) !important; color: #fff !important; border: 0 !important; box-shadow: 0 12px 28px rgba(229, 122, 85, 0.38); } .is-public.hero-start.hero-dark .btn-primary:hover { transform: translateY(-3px); background: linear-gradient(135deg, #d56f3d 0%, #d96f48 100%) !important; box-shadow: 0 18px 36px rgba(229, 122, 85, 0.5); } .is-public.hero-start.hero-dark .btn-primary:active { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(229, 122, 85, 0.4); } /* 6.5 Sekundär knapp ------------------------------------ */ .is-public.hero-start.hero-dark .btn-secondary { background: rgba(255, 255, 255, 0.06) !important; color: #fff !important; border: 1.5px solid #fff !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); } .is-public.hero-start.hero-dark .btn-secondary:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.16) !important; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35); } .is-public.hero-start.hero-dark .btn-secondary:active { transform: translateY(-1px); } /* 6.6 Chips ------------------------------------ */ .is-public.hero-start .chips { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin-top: 14px !important; } .is-public.hero-start .chip, .is-public.hero-start .chips > span, .is-public.hero-start .chips > a, .is-public.hero-start .chips > li { display: inline-flex; align-items: center; background: #fff; color: #2d2858; border: 1px solid rgba(45, 40, 88, 0.12); border-radius: 999px; padding: 8px 12px; font: 700 14px/1 "Source Sans Pro", system-ui; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } /* 6.7 Ta bort underline ------------------------------------ */ .is-public.hero-start a, .is-public.hero-start a:hover, .is-public.hero-start a:focus { text-decoration: none !important; } .elementor-widget-creative-button a, .elementor-widget-creative-button a:hover, .elementor-widget-creative-button a:focus { text-decoration: none !important; } [class*="creative-button"] a, [class*="creative-button"] .elementor-button-text { text-decoration: none !important; border-bottom: 0 !important; box-shadow: none !important; } /* 6.8 Reduced motion ------------------------------------ */ @media (prefers-reduced-motion: reduce) { .is-public.hero-start .btn-cta { transition: none; } } /* ======================================================================== 7. MEDIA & BILDTEXTER ======================================================================== */ /* 7.1 Media ------------------------------------ */ .is-public .public-section img, .is-public .public-section svg, .is-public .public-section video { max-width: 100%; height: auto; display: block; } /* 7.2 Figures ------------------------------------ */ .is-public .public-section figure, .is-public .public-section .wp-caption, .is-public .public-section .elementor-widget-image figure { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 1rem !important; } /* 7.3 Bildtexter ------------------------------------ */ .is-public .public-section figure > figcaption, .is-public .public-section .wp-caption .wp-caption-text, .is-public .public-section .elementor-image-caption { font-size: 0.9em; line-height: 1.5; font-style: italic; color: rgba(0, 0, 0, 0.6); text-align: center; margin-top: 0.5rem; background: transparent !important; padding: 0 !important; border: 0 !important; } /* 7.4 Align ------------------------------------ */ .is-public .public-section .alignleft { float: none; margin-right: 1rem; } .is-public .public-section .alignright { float: none; margin-left: 1rem; } /* 7.5 Caption-bredd ------------------------------------ */ .is-public .public-section .public-content .wp-caption { width: auto !important; } .is-public .public-section .public-content .wp-caption img { width: 100% !important; height: auto !important; } /* ======================================================================== 8. UTILITIES ======================================================================== */ .is-public .public-section .stack > * + * { margin-top: 0.75rem; } :is(html, body).is-public { background: transparent !important; } /* ======================================================================== FULLBREDDSFIX: Säkerställ att fullbreddssektioner är verkligen fullbredd ======================================================================== */ /* Ta bort alla wrapper-paddings som skapar vita kanter */ body.is-public #page { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; } body.is-public #content { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; } body.is-public .site-content > .container { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; } /* BuddyBoss .bb-grid – kommenterad bort för test */ /* body.is-public .site-content > .bb-grid { ... } */ /* Ta bort padding från alla möjliga wrapper-element (bb-grid borttagen för test) */ /* body.is-public .bb-grid, */ body.is-public .container, body.is-public .site-content-grid { padding-left: 0 !important; padding-right: 0 !important; } /* Elementor full-width sections ska vara fullbredd */ body.is-public .elementor-section.elementor-section-full_width { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: 0 !important; padding-right: 0 !important; } /* Elementor Container: Full Width Containers (e-con-full) */ body.is-public .e-con.e-con-full, body.is-public .elementor-container.e-con-full { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: 0 !important; padding-right: 0 !important; } /* Elementor Container Boxed - tillåt fullbredd om bredden är satt till 100% eller större än viewport */ body.is-public .e-con.e-con-boxed, body.is-public .elementor-container.e-con-boxed { /* Om bredden är satt till 100% eller större, gör fullbredd */ } /* Tvinga fullbredd för containers i full-width sektioner – UNDANTAG: .cctrl-container (bredd styrs av cctrl-layout) */ body.is-public .elementor-section-full_width .e-con:not(.cctrl-container), body.is-public .elementor-section-stretched .e-con:not(.cctrl-container), body.is-public .elementor-section-full_width .elementor-container:not(.cctrl-container), body.is-public .elementor-section-stretched .elementor-container:not(.cctrl-container) { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: 0 !important; padding-right: 0 !important; } /* Container som har CSS-variabel --content-width 100% – fullbredd, UNDANTAG: .cctrl-container (cctrl-layout) */ body.is-public .e-con:not(.cctrl-container)[style*="--content-width: 100%"], body.is-public .e-con:not(.cctrl-container)[style*="--content-width:100%"] { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: 0 !important; padding-right: 0 !important; } /* För alla Elementor-containers på public-sidor - tillåt fullbredd */ body.is-public .e-con, body.is-public .elementor-container { /* Ta bort max-width begränsningar för containers */ } /* Säkerställ att parent wrappers inte begränsar bredden */ body.is-public .elementor-section.elementor-section-full_width, body.is-public .elementor-section.elementor-section-stretched { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: 0 !important; padding-right: 0 !important; } /* Viktigt: Elementor Container Full Width - Tvinga fullbredd */ body.is-public .e-con-full { --content-width: 100% !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: 0 !important; padding-right: 0 !important; position: relative; } /* Om en container är inuti en full-width section, gör den också fullbredd – UNDANTAG: .cctrl-container (cctrl-layout) */ body.is-public .elementor-section-full_width .e-con:not(.cctrl-container), body.is-public .elementor-section-full_width .e-con-boxed:not(.cctrl-container) { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } /* Boxed containers som är större än viewport - gör fullbredd */ body.is-public .e-con-boxed { position: relative; } /* Ta bort alla max-width begränsningar från Elementor-containers när de är i full-width läge */ body.is-public .elementor-section-full_width .e-con *, body.is-public .elementor-section-full_width .elementor-container * { /* Tillåt barn-element att också vara fullbredd */ } /* Elementor boxed sections behåller container (för innehåll som ska centreras) */ body.is-public .elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } /* ======================================================================== 9. PACKAGES-SEKTION -> Flyttat till en snippet av Rebecca ======================================================================== */ /* ======================================================================== 9. PACKAGES – Pricing/Packages cards (Public) Konsoliderad & scopad modul (ersätter snippeter) ======================================================================== */ .is-public .packages { padding: var(--space-7) var(--space-4); background: var(--brand-lilac); } .is-public .packages .container { max-width: var(--container-max); margin: 0 auto; } .is-public .packages h2 { text-align: center; margin-bottom: var(--space-6); font-family: var(--font-heading); /* Använder public.css heading-tokens */ font-size: var(--h1-size); line-height: var(--h1-line); color: var(--brand-twilight); } /* === GRID =============================================================== */ .is-public .packages .pkg-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: stretch; grid-auto-rows: 1fr; /* jämnhöjda kort radvis */ } .is-public .packages .pkg-grid > * { min-width: 0; } @media (min-width: 768px) { .is-public .packages .pkg-grid { grid-template-columns: repeat(3, 1fr); } } /* === CARD =============================================================== */ .is-public .packages .pkg-card { background: #fff; border-radius: var(--radius-card); padding: var(--space-6); box-shadow: 0 4px 12px rgba(0,0,0,0.08); position: relative; display: flex; flex-direction: column; height: 100%; transition: transform var(--transition-normal), box-shadow var(--transition-normal); } .is-public .packages .pkg-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.12); } /* Ta bort “första spacer/divider” som ibland hamnar överst i kortet */ .is-public .packages .pkg-card > .elementor-widget-spacer:first-child, .is-public .packages .pkg-card > .elementor-widget-divider:first-child { display: none; } /* Rubriker & text i kort */ .is-public .packages .pkg-card h3 { font-family: var(--font-heading); font-size: var(--text-h2); color: var(--brand-twilight); margin: 0 0 var(--space-3); } .is-public .packages .pkg-card p { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--line-body); color: var(--brand-ink); margin: 0; /* rytm styrs av gap & mellanled nedan */ } /* === HEAD WRAPPER (jämn höjd på tag + h2) ============================== */ .is-public .packages .pkg-head { display: flex; flex-direction: column; gap: var(--space-2); min-block-size: clamp(72px, 6vw, 96px) !important; /* lås rubrikhöjd */ } /* === TAG =============================================================== */ .is-public .packages .pkg-tag { display: inline-block; background: var(--brand-terracotta); color: #fff; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); font-size: var(--text-small); font-weight: 800; margin-bottom: var(--space-3); } /* Göm tom tag */ .is-public .packages .pkg-tag:empty { display: none; } /* === PRISBLOCK ========================================================= */ .is-public .packages .pkg-price { color: var(--brand-twilight); font-family: var(--font-heading); margin: 0; } .is-public .packages .pkg-price .kr { font-weight: var(--weight-h2); opacity: .85; margin-right: .2ch; } .is-public .packages .pkg-price .amount { font-weight: 900; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -0.01em; } .is-public .packages .pkg-price small { display: block; font-family: var(--font-body); font-size: var(--text-small); line-height: var(--line-small); color: var(--brand-ink); opacity: .9; margin-top: 2px; } /* === INGRESS/FOOTER – normalisera mot features ======================== */ .is-public .packages .pkg-ingress, .is-public .packages .pkg-footer p, .is-public .packages .pkg-card .elementor-widget-text-editor p { font-size: var(--text-body) !important; line-height: var(--line-body) !important; margin: 0 !important; color: var(--brand-ink); } /* === LISTOR ============================================================ */ .is-public .packages .pkg-card ul { list-style: none; margin: 0 !important; padding: 0 !important; } .is-public .packages .pkg-card ul:not(.elementor-icon-list-items) li { position: relative; padding-left: var(--space-4); color: var(--brand-ink); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--line-body); } .is-public .packages .pkg-card ul:not(.elementor-icon-list-items) li + li { border-top: 1px solid color-mix(in srgb, var(--brand-ink) 12%, transparent); margin-top: var(--space-2); padding-top: var(--space-2); } .is-public .packages .pkg-card ul:not(.elementor-icon-list-items) li::before { content: "✓"; position: absolute; left: 0; top: .28em; /* bättre baseline */ color: var(--brand-terracotta); font-weight: 800; font-size: 1.05em; } /* Elementor Icon List-varianten (kräver ofta !important för att vinna över widget/kit) */ .is-public .packages .pkg-card ul.elementor-icon-list-items li { padding-left: 0 !important; margin: 0 !important; } .is-public .packages .pkg-card ul.elementor-icon-list-items li + li { border-top: 1px solid color-mix(in srgb, var(--brand-ink) 12%, transparent) !important; padding-top: var(--space-2) !important; } .is-public .packages .pkg-card ul.elementor-icon-list-items li:first-child { border-top: 0 !important; padding-top: 0 !important; } .is-public .packages .pkg-card .elementor-icon-list-icon { margin-right: var(--space-2); line-height: 1.4; transform: translateY(1px); } .is-public .packages .pkg-card .elementor-icon-list-icon i, .is-public .packages .pkg-card .elementor-icon-list-icon svg { color: var(--brand-terracotta); } /* === FEATURED CARD ===================================================== */ .is-public .packages .pkg-member { border: 2px solid var(--brand-lavender); } /* === FLEX-LAYOUT: knappen i botten ==================================== */ .is-public .packages .pkg-card > .elementor-widget-wrap, .is-public .packages .pkg-card > .elementor-element-populated { display: flex; flex-direction: column; min-height: 100%; row-gap: var(--space-4); } .is-public .packages .pkg-footer { order: 999; margin-top: auto; display: flex; flex-direction: column; gap: var(--space-2); } .is-public .packages .pkg-footer p { margin: 0; color: color-mix(in srgb, var(--brand-ink) 90%, white 10%); font-size: var(--text-body); line-height: var(--line-body); } /* === KNAPP ============================================================= */ .is-public .packages .pkg-card .elementor-button { align-self: flex-start; border-radius: var(--radius-pill); background: var(--brand-terracotta); color: #fff; border: none; padding: var(--space-2) var(--space-5); font-weight: 800; line-height: 1; box-shadow: 0 6px 16px rgba(0,0,0,0.10); transition: background .2s, transform .12s, box-shadow .2s; } /* säkerställ vit text även om kit/tema försöker överstyra */ .is-public .packages .pkg-card .elementor-button .elementor-button-text, .is-public .packages .pkg-card .elementor-button .elementor-button-content-wrapper { color: #fff !important; } .is-public .packages .pkg-card .elementor-button:hover { background: var(--brand-twilight); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.14); } .is-public .packages .pkg-card .elementor-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-terracotta) 40%, transparent); outline-offset: 2px; } /* === BADGE (aktivera på kortet: class="has-badge" + data-badge="…") ==== */ .is-public .packages .pkg-card.has-badge { position: relative; } .is-public .packages .pkg-card.has-badge::after { content: attr(data-badge); position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; min-width: 92px; background: #000; color: var(--brand-terracotta); font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; border-radius: 999px; box-shadow: 0 3px 8px rgba(0,0,0,.18); z-index: 5; pointer-events: none; text-align: center; } /* === MOBIL ============================================================= */ @media (max-width: 767px) { .is-public .packages .pkg-grid { grid-template-columns: 1fr; } .is-public .packages .pkg-card { padding: var(--space-5); } .is-public .packages .pkg-head { min-block-size: clamp(64px, 10vw, 84px); } .is-public .packages .pkg-card.has-badge::after { top: 8px; right: 8px; font-size: 10px; padding: 6px 12px; min-width: 84px; } } /* ======================================================================== 10. CARD GRID SYSTEM ======================================================================== */ /* Grid layout för kort */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-block: var(--space-6); max-width: var(--container-max); margin-inline: auto; padding-inline: var(--grid-gutter); /* 24px luft på sidorna */ } @media (max-width: 1023px) { .card-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } } @media (max-width: 767px) { .card-grid { grid-template-columns: 1fr; gap: var(--space-4); } } /* ======================================================================== 11. VIDEO CARDS - Komplett fix ======================================================================== */ .video-card .card-image { position: relative; width: 100%; background: #000; } /* Säkerställ att Elementor video widget får rätt aspect ratio */ .video-card .card-image .elementor-widget-video { aspect-ratio: 16 / 9; width: 100%; } .video-card .card-image .elementor-wrapper { position: relative; width: 100%; height: 100%; } /* YouTube iframe måste fylla parent */ .video-card .card-image iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .video-card .card-content { padding: var(--space-4); background: #fff; } .video-card .card-title { font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--weight-h3); color: var(--brand-twilight); margin: 0 0 var(--space-2) 0; line-height: var(--line-h3); } .video-card .card-text { font-size: var(--text-small); color: var(--brand-ink); line-height: var(--line-small); margin: 0; opacity: 0.85; } /* ======================================================================== 12. PRICE TABLE CARDS - Elementor Price Table Widget ======================================================================== */ /* Hover-effekt för Elementor Price Table */ .elementor-price-table { transition: transform var(--transition-normal), box-shadow var(--transition-normal); } .elementor-price-table:hover { transform: translateY(-8px); /*box-shadow: var(--shadow-lg);*/ } /* ======================================================================== 13. CARD SYSTEM (universell bas för blog-cards) ======================================================================== EXKLUDERAR: .video-card, .pkg-card, .card-grid (har egen styling i sektion 9, 10, 11) INKLUDERAR: .blog-card, Elementor Posts Widget, framtida kort-typer ANVÄNDNING: - Blog-cards: .blog-grid → .blog-card - Elementor Posts Widget: .elementor-posts-container → .elementor-post - Framtida kort: [custom]-grid → [custom]-card VIKTIGT: Video-cards (sektion 11) är EXKLUDERADE från denna styling ======================================================================== */ /* 13.1 - Card Grid Container ------------------------------------------------ Gäller ENDAST för blog-grid och Elementor Posts Widget Exkluderar: video-grid, pkg-grid, card-grid */ .is-public .blog-grid, .is-public .elementor-posts-container.elementor-posts { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: var(--space-4) !important; width: 100% !important; margin: var(--space-5) 0 !important; padding: 0 !important; list-style: none !important; } @media (max-width: 980px) { .is-public .blog-grid, .is-public .elementor-posts-container.elementor-posts { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 640px) { .is-public .blog-grid, .is-public .elementor-posts-container.elementor-posts { grid-template-columns: 1fr !important; } } .video-card { border:1px solid color-mix(in srgb,var(--brand-ink) 8%, transparent); } .video-card .card-image { aspect-ratio: var(--card-aspect); } .video-card .card-content { padding: var(--card-padding); } .video-card .card-title { display:-webkit-box; -webkit-line-clamp: var(--card-title-lines); -webkit-box-orient: vertical; overflow:hidden; } .video-card .card-text { display:-webkit-box; -webkit-line-clamp: var(--card-excerpt-lines); -webkit-box-orient: vertical; overflow:hidden; } /* 13.2 - Card Container ------------------------------------------------ Gäller ENDAST för blog-card och Elementor Posts Exkluderar: video-card, pkg-card */ .is-public .blog-card, .is-public .elementor-post.elementor-grid-item { background: white !important; border-radius: var(--radius-card) !important; overflow: hidden !important; box-shadow: var(--shadow-sm) !important; border: 1px solid color-mix(in srgb, var(--brand-ink) 8%, transparent) !important; transition: transform var(--transition-normal), box-shadow var(--transition-normal) !important; display: flex !important; flex-direction: column !important; margin: 0 !important; padding: 0 !important; } .is-public .blog-card:hover, .is-public .elementor-post.elementor-grid-item:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; } /* 13.3 - Card Image Container ------------------------------------------------ Featured image i blog-cards */ .is-public .blog-card .card-image, .is-public .elementor-post__thumbnail { position: relative !important; aspect-ratio: 16 / 9 !important; background: var(--brand-lilac) !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } .is-public .blog-card .card-image img, .is-public .elementor-post__thumbnail img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform var(--transition-slow) !important; } .is-public .blog-card:hover .card-image img, .is-public .elementor-post:hover .elementor-post__thumbnail img { transform: scale(1.05) !important; } /* 13.4 - Card Content ------------------------------------------------ */ .is-public .blog-card .card-content, .is-public .elementor-post__text { padding: var(--space-4) !important; flex: 1 !important; display: flex !important; flex-direction: column !important; gap: var(--space-2) !important; } /* 13.5 - Card Title ------------------------------------------------ */ .is-public .blog-card .card-title, .is-public .blog-card h3, .is-public .elementor-post__title { font-family: var(--font-heading) !important; font-size: var(--text-h3) !important; font-weight: var(--weight-h3) !important; color: var(--brand-twilight) !important; margin: 0 0 var(--space-2) 0 !important; line-height: var(--line-h3) !important; transition: color var(--transition-fast) !important; } .is-public .blog-card:hover .card-title, .is-public .blog-card:hover h3, .is-public .elementor-post:hover .elementor-post__title { color: var(--brand-terracotta) !important; } .is-public .blog-card .card-title a, .is-public .blog-card h3 a, .is-public .elementor-post__title a { color: inherit !important; text-decoration: none !important; } /* 13.6 - Card Text ------------------------------------------------ */ .is-public .blog-card .card-text, .is-public .blog-card .card-excerpt, .is-public .elementor-post__excerpt, .is-public .elementor-post__excerpt p { font-size: var(--text-small) !important; color: var(--brand-ink) !important; line-height: var(--line-small) !important; margin: 0 !important; opacity: 0.85 !important; } /* 13.7 - Card Badge ------------------------------------------------ Färger definieras i blog.css */ .is-public .blog-badge { position: absolute !important; top: var(--space-3) !important; left: var(--space-3) !important; z-index: 10 !important; display: inline-flex !important; align-items: center !important; padding: var(--space-1) var(--space-2) !important; border-radius: var(--radius-input) !important; font-family: var(--font-body) !important; font-size: var(--text-tiny) !important; font-weight: var(--weight-bold) !important; line-height: 1 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; backdrop-filter: blur(8px) !important; } /* 13.8 - Card Meta ------------------------------------------------ */ .is-public .blog-card .card-meta, .is-public .elementor-post__meta-data { display: flex !important; gap: var(--space-3) !important; align-items: center !important; font-size: var(--text-tiny) !important; color: var(--brand-ink) !important; opacity: 0.6 !important; margin-top: auto !important; padding-top: var(--space-2) !important; } .is-public .elementor-post__meta-data span { display: inline-flex !important; align-items: center !important; } /* 13.9 - Read More Link ------------------------------------------------ */ .is-public .blog-card .card-read-more, .is-public .elementor-post__read-more { display: inline-flex !important; align-items: center !important; color: var(--brand-terracotta) !important; font-size: var(--text-small) !important; font-weight: var(--weight-bold) !important; text-decoration: none !important; margin-top: var(--space-2) !important; transition: color var(--transition-fast) !important; } .is-public .blog-card .card-read-more:hover, .is-public .elementor-post__read-more:hover { color: var(--brand-twilight) !important; } /* 13.10 - Reduced Motion ------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .is-public .blog-card, .is-public .blog-card img, .is-public .elementor-post, .is-public .elementor-post__thumbnail img { transition: none !important; } .is-public .blog-card:hover img, .is-public .elementor-post:hover .elementor-post__thumbnail img { transform: none !important; } } /* 13.11 - Elementor Kit Reset ------------------------------------------------ */ .is-public .blog-card .elementor-widget-heading .elementor-heading-title, .is-public .elementor-post .elementor-post__title { margin-top: 0 !important; margin-bottom: var(--space-2) !important; } .is-public .blog-card .elementor-text-editor, .is-public .elementor-post__excerpt { margin: 0 !important; } .is-public .blog-card .elementor-image, .is-public .blog-card .elementor-widget-image { margin: 0 !important; } /* ======================================================================== 14. FOOTER - Matches header menu styling ======================================================================== */ /* 14.1 Footer container ------------------------------------ */ .is-public .cctrl-footer { background: var(--brand-lilac); padding: clamp(var(--space-6), 6vw, var(--space-8)) var(--gutter); margin-top: auto; } .is-public .cctrl-footer__inner { max-width: var(--container-max); margin: 0 auto; } .is-public .cctrl-footer__grid { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(var(--space-5), 5vw, var(--space-8)); margin-bottom: var(--space-6); } @media (max-width: 980px) { .is-public .cctrl-footer__grid { grid-template-columns: 1fr; gap: var(--space-6); } } /* 14.2 Footer brand section ------------------------------------ */ .is-public .cctrl-footer__brand { display: flex; flex-direction: column; gap: var(--space-1); } .is-public .cctrl-footer__title { font-family: var(--font-heading); font-size: var(--h3-size); font-weight: 800; color: var(--brand-twilight); margin: 0; line-height: var(--h3-line); } .is-public .cctrl-footer__tagline { font-family: var(--font-body); font-size: var(--text-small); font-weight: 600; color: var(--brand-twilight); text-transform: uppercase; letter-spacing: 0.1em; margin: 0; opacity: 0.8; } .is-public .cctrl-footer__description { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--line-body); color: var(--brand-ink); margin: 0; opacity: 0.85; } /* 14.3 Footer navigation ------------------------------------ */ .is-public .cctrl-footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(var(--space-4), 4vw, var(--space-6)); } @media (max-width: 768px) { .is-public .cctrl-footer__nav { grid-template-columns: 1fr; gap: var(--space-5); } } .is-public .cctrl-footer__nav-column { display: flex; flex-direction: column; gap: var(--space-2); } /* 14.4 Footer nav title (column headers) ------------------------------------ */ .is-public .cctrl-footer__nav-title { font-family: var(--font-heading); font-size: var(--text-small); font-weight: 700; color: var(--brand-twilight); text-transform: uppercase; letter-spacing: 0.15em; margin: 0 0 var(--space-2) 0; padding-bottom: var(--space-1); border-bottom: 2px solid color-mix(in srgb, var(--lav-400), transparent 60%); } /* 14.5 Footer nav list ------------------------------------ */ .is-public .cctrl-footer__nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); } .is-public .cctrl-footer__nav-list li { margin: 0; padding: 0; } /* 14.6 Footer nav links - Match header menu styling ------------------------------------ */ .is-public .cctrl-footer__nav-list a { display: inline-block; font-family: var(--font-body); font-size: var(--text-body); font-weight: 600; color: var(--brand-twilight); text-decoration: none; padding: var(--space-1) 0; position: relative; transition: color 160ms ease; line-height: 1.5; } /* Underline effect matching header menu */ .is-public .cctrl-footer__nav-list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 999px; background: transparent; transform: scaleX(0); transform-origin: left; transition: transform 180ms ease, background 180ms ease; } .is-public .cctrl-footer__nav-list a:hover, .is-public .cctrl-footer__nav-list a:focus-visible { color: var(--lav-500); } .is-public .cctrl-footer__nav-list a:hover::after, .is-public .cctrl-footer__nav-list a:focus-visible::after { background: var(--lav-400, #aeb3da); transform: scaleX(1); } /* Active state */ .is-public .cctrl-footer__nav-list .current-menu-item > a, .is-public .cctrl-footer__nav-list .current-menu-ancestor > a { color: var(--lav-500); } .is-public .cctrl-footer__nav-list .current-menu-item > a::after, .is-public .cctrl-footer__nav-list .current-menu-ancestor > a::after { background: var(--lav-400, #aeb3da); transform: scaleX(1); } /* 14.7 Footer bottom section ------------------------------------ */ .is-public .cctrl-footer__bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: var(--space-5); border-top: 1px solid color-mix(in srgb, var(--brand-ink), transparent 85%); gap: var(--space-4); } .is-public .cctrl-footer__copyright { grid-column: 2; justify-self: center; text-align: center; } .is-public .cctrl-footer__legal { grid-column: 3; justify-self: end; } @media (max-width: 640px) { .is-public .cctrl-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); } } /* 14.8 Footer copyright ------------------------------------ */ .is-public .cctrl-footer__copyright { font-family: var(--font-body); font-size: var(--text-small); color: var(--brand-ink); opacity: 0.75; margin: 0; } .is-public .cctrl-footer__copyright p { margin: 0; font-size: inherit; } /* 14.9 Footer social links ------------------------------------ */ .is-public .cctrl-footer__social { display: flex; gap: var(--space-3); align-items: center; } .is-public .cctrl-footer__social-link { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-2); border-radius: var(--radius-md); color: var(--brand-twilight); text-decoration: none; font-weight: 600; font-size: var(--text-small); transition: background 150ms ease, color 150ms ease; } .is-public .cctrl-footer__social-link:hover, .is-public .cctrl-footer__social-link:focus-visible { background: color-mix(in srgb, var(--lav-300), transparent 70%); color: var(--lav-500); } .is-public .cctrl-footer__social-link span { display: none; /* Hide text, show icons only if you add icons later */ } /* 14.10 Container class alignment ------------------------------------ */ .is-public .cctrl-footer .cctrl-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); } align-items: center; padding-top: var(--space-5); border-top: 1px solid color-mix(in srgb, var(--brand-ink), transparent 85%); flex-wrap: wrap; gap: var(--space-4); } @media (max-width: 640px) { .is-public .cctrl-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); } } /* 14.8 Footer copyright ------------------------------------ */ .is-public .cctrl-footer__copyright { font-family: var(--font-body); font-size: var(--text-small); color: var(--brand-ink); opacity: 0.75; margin: 0; } .is-public .cctrl-footer__copyright p { margin: 0; font-size: inherit; } /* 14.9 Footer social links ------------------------------------ */ .is-public .cctrl-footer__social { display: flex; gap: var(--space-3); align-items: center; } .is-public .cctrl-footer__social-link { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-2); border-radius: var(--radius-md); color: var(--brand-twilight); text-decoration: none; font-weight: 600; font-size: var(--text-small); transition: background 150ms ease, color 150ms ease; } .is-public .cctrl-footer__social-link:hover, .is-public .cctrl-footer__social-link:focus-visible { background: color-mix(in srgb, var(--lav-300), transparent 70%); color: var(--lav-500); } .is-public .cctrl-footer__social-link span { display: none; /* Hide text, show icons only if you add icons later */ } /* 14.10 Container class alignment ------------------------------------ */ .is-public .cctrl-footer .cctrl-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }