/* Sitebuilder Stylesheet */ /* Design tokens are the single source of truth in css/tokens.css, linked (in parallel) before this file in each . See DESIGN-RULEBOOK.md Part 2. */ /* Reset & Base */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif); font-size: 16px; line-height: 1.7; color: var(--color-text); background: var(--color-bg); } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: none; transition: var(--transition); } a:hover { color: var(--color-accent); } /* Make INLINE PROSE links in content more visible. The underline is the link affordance and applies ONLY to bare (unclassed) links — i.e. real prose links. Structural/component links carry a class (.na-card, .erb-card, buttons, …) and are deliberately excluded so the underline never bleeds onto card/component text. See DESIGN-RULEBOOK.md → "Underlines mean prose links only". */ .content a:not([class]), .card a:not([class]), .editor-content a:not([class]) { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; } .content a:not([class]):hover, .card a:not([class]):hover, .editor-content a:not([class]):hover { color: var(--color-primary); } /* "Under construction" / coming-soon screen (includes/maintenance.php) */ .mnt-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6); box-sizing: border-box; background: var(--color-bg); } .mnt-card { max-width: 560px; width: 100%; text-align: center; } .mnt-logo { max-height: 80px; width: auto; margin: 0 auto var(--space-5); display: block; } .mnt-name { font-size: var(--text-lg); font-weight: 700; color: var(--color-primary); margin: 0 0 var(--space-4); } .mnt-title { font-size: var(--text-3xl); line-height: 1.15; margin: 0 0 var(--space-3); color: var(--color-text); } .mnt-msg { font-size: var(--text-lg); line-height: 1.55; color: var(--color-text-light); margin: 0 0 var(--space-5); } .mnt-count { display: inline-flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; } .mnt-unit { min-width: 72px; padding: var(--space-3) var(--space-2); border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-white); } .mnt-num { font-size: var(--text-2xl); font-weight: 700; line-height: 1; } .mnt-lbl { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; margin-top: var(--space-1); } /* Layout */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 20px; } /* Header */ .header { background: var(--color-primary); color: var(--color-white); padding: 0; position: sticky; top: 0; z-index: 1000; box-shadow: var(--shadow-md); } .header-content { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; padding-right: max(20px, calc((100vw - var(--max-width)) / 2 + 20px)); } .logo { font-size: 1.4rem; font-weight: 700; color: var(--color-white); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; white-space: nowrap; flex: 1; line-height: 1.1; } /* Optional slogan under the site name (site_tagline setting) */ .logo-tagline { font-size: 0.72rem; font-weight: 400; opacity: 0.82; letter-spacing: 0.02em; } .logo:hover { color: var(--color-white); opacity: 0.9; } .logo img { max-height: 50px; width: auto; object-fit: contain; } /* Navigation */ .nav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 3px; flex: 1; } .nav a { color: rgba(255,255,255,0.9); padding: 8px 12px; border-radius: var(--radius); font-weight: 500; font-size: 0.9rem; transition: var(--transition); white-space: nowrap; } .nav a:hover, .nav a.active { background: rgba(255,255,255,0.2); color: var(--color-white); } /* Navigation dropdown for overflow items */ .nav-dropdown { position: relative; } .nav-dropdown-toggle { background: none; border: none; color: rgba(255,255,255,0.9); padding: 8px 12px; border-radius: var(--radius); font-weight: 500; font-size: 0.9rem; cursor: pointer; transition: var(--transition); font-family: inherit; white-space: nowrap; } .nav-dropdown-toggle:hover, .nav-dropdown.has-active .nav-dropdown-toggle { background: rgba(255,255,255,0.2); color: var(--color-white); } .dropdown-arrow { font-size: 0.8em; margin-left: 5px; transition: transform 0.3s; } .nav-dropdown.open .dropdown-arrow { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; top: 100%; right: 0; background: var(--color-white); border-radius: var(--radius); box-shadow: 0 4px 20px rgba(0,0,0,0.2); min-width: 200px; padding: 8px 0; display: none; z-index: 1000; } .nav-dropdown.open .nav-dropdown-menu { display: block; } .nav-dropdown-menu a { display: block; color: var(--color-text) !important; padding: 10px 20px !important; border-radius: 0 !important; font-weight: 500; } .nav-dropdown-menu a:hover { background: var(--color-light, #f5f5f5) !important; color: var(--color-primary) !important; } .nav-dropdown-menu a.active { background: var(--color-primary) !important; color: var(--color-white) !important; } /* Children inside the overflow ("Mer...") dropdown — indented under their parent */ .nav-dropdown-menu a.nav-dropdown-child { padding-left: 36px !important; } /* Submenu parent in the main nav row — link + arrow combined */ .nav-submenu { display: flex; align-items: stretch; border-radius: var(--radius); transition: var(--transition); } .nav-submenu:hover, .nav-submenu.has-active, .nav-submenu.active { background: rgba(255,255,255,0.2); } .nav-submenu .nav-submenu-link { color: rgba(255,255,255,0.9); padding: 8px 4px 8px 12px; font-weight: 500; font-size: 0.9rem; text-decoration: none; white-space: nowrap; display: flex; align-items: center; transition: var(--transition); background: transparent; border-radius: 0; } .nav-submenu.active .nav-submenu-link, .nav-submenu:hover .nav-submenu-link { color: var(--color-white); background: transparent; } .nav-submenu-toggle { background: transparent; border: none; color: rgba(255,255,255,0.9); cursor: pointer; padding: 8px 10px 8px 4px; font-family: inherit; display: flex; align-items: center; } .nav-submenu-toggle:hover { color: var(--color-white); } /* Submenu dropdown panel anchors to the parent's left edge (not right like Mer...) */ .nav-submenu .nav-dropdown-menu { left: 0; right: auto; } /* ---------- Gallery block: carousel mode ---------- */ .block-gallery-carousel { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius); background: #000; user-select: none; } .block-gallery-carousel.aspect-21-9 { aspect-ratio: 21 / 9; } .block-gallery-carousel.aspect-16-9 { aspect-ratio: 16 / 9; } .block-gallery-carousel.aspect-4-3 { aspect-ratio: 4 / 3; } .block-gallery-carousel.aspect-1-1 { aspect-ratio: 1 / 1; } .block-gallery-carousel-track { position: relative; width: 100%; height: 100%; min-height: 200px; } .block-gallery-carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; cursor: pointer; } .block-gallery-carousel-slide.active { opacity: 1; z-index: 1; } /* When the carousel has a fixed aspect ratio, cover the slot. In auto mode the slide just contains the image at its natural ratio. */ .block-gallery-carousel-slide img { width: 100%; height: 100%; display: block; } .block-gallery-carousel.aspect-21-9 .block-gallery-carousel-slide img, .block-gallery-carousel.aspect-16-9 .block-gallery-carousel-slide img, .block-gallery-carousel.aspect-4-3 .block-gallery-carousel-slide img, .block-gallery-carousel.aspect-1-1 .block-gallery-carousel-slide img { object-fit: cover; } /* In auto mode there's no fixed aspect-ratio on the container — let images flow */ .block-gallery-carousel:not(.aspect-21-9):not(.aspect-16-9):not(.aspect-4-3):not(.aspect-1-1) { aspect-ratio: auto; } .block-gallery-carousel:not(.aspect-21-9):not(.aspect-16-9):not(.aspect-4-3):not(.aspect-1-1) .block-gallery-carousel-track { /* Track grows with the active slide */ min-height: 0; } .block-gallery-carousel:not(.aspect-21-9):not(.aspect-16-9):not(.aspect-4-3):not(.aspect-1-1) .block-gallery-carousel-slide { position: relative; } .block-gallery-carousel:not(.aspect-21-9):not(.aspect-16-9):not(.aspect-4-3):not(.aspect-1-1) .block-gallery-carousel-slide:not(.active) { display: none; } .block-gallery-carousel:not(.aspect-21-9):not(.aspect-16-9):not(.aspect-4-3):not(.aspect-1-1) .block-gallery-carousel-slide img { height: auto; object-fit: contain; } .block-gallery-carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.4); border: none; color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; z-index: 5; transition: background 0.2s; } .block-gallery-carousel-nav:hover { background: rgba(0,0,0,0.7); } .block-gallery-carousel-nav.prev { left: 12px; } .block-gallery-carousel-nav.next { right: 12px; } .block-gallery-carousel-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; } .block-gallery-carousel-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.5); border: none; cursor: pointer; padding: 0; transition: background 0.2s, transform 0.2s; } .block-gallery-carousel-dot:hover { background: rgba(255,255,255,0.8); } .block-gallery-carousel-dot.active { background: #fff; transform: scale(1.3); } .block-gallery-carousel-caption { margin-top: 10px; text-align: center; font-size: 0.95rem; color: var(--color-text); font-style: italic; } /* Mobile menu toggle */ .menu-toggle { display: none; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 5px; } /* Hero Section */ .hero { background-size: cover; background-position: center; color: var(--color-white); padding: 80px 20px; text-align: center; min-height: var(--hero-height, 300px); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; box-shadow: var(--shadow-md); } .hero h1 { font-size: 2.8rem; font-weight: 700; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .hero p { font-size: 1.2rem; opacity: 0.95; max-width: 600px; margin: 0 auto; } /* Page Header (for subpages) */ /* Hero OFF → a genuinely light header (clearly distinct from the .hero band): no brand fill, dark text, just a title over a thin divider. */ .page-header { background: transparent; color: var(--color-text); padding: 32px 20px 14px; text-align: center; position: relative; z-index: 1; border-bottom: 1px solid var(--color-border); } .page-header h1 { font-size: 1.9rem; font-weight: 700; } /* Main Content */ .main { padding: var(--section-padding, 60px) 20px; background: var(--color-white); } /* Content width — the ONE rule. Value comes from --content-width, which themes.php sets (theme default -> site setting -> per-page inline override). No other place caps .content. */ .content { max-width: var(--content-width, 1000px); margin: 0 auto; } .content h2 { color: var(--color-primary); font-size: 1.8rem; margin: 40px 0 20px; padding-bottom: 10px; border-bottom: 3px solid var(--color-accent); } .content h2:first-child { margin-top: 0; } .content p { margin-bottom: 1.2em; } .content ul { margin: 1em 0 1.5em 1.5em; } .content li { margin-bottom: 0.5em; } /* Cards */ .card { background: var(--color-white); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 30px; margin-bottom: 30px; transition: var(--transition); } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } /* Content Cards (insertable via editor) */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin: 20px 0; padding: 20px; background: rgba(0, 0, 0, 0.02); border: 1px solid var(--color-border); border-radius: var(--radius); transition: var(--transition); } .card-grid:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); background: rgba(0, 0, 0, 0.01); } .content-card { background: var(--color-bg); padding: 15px; border-radius: var(--radius); transition: var(--transition); } .content-card:hover { box-shadow: var(--shadow-sm); } .content-card img { width: 100%; border-radius: calc(var(--radius) - 4px); margin-bottom: 12px; aspect-ratio: 16/10; object-fit: cover; } .content-card h3 { margin: 0 0 8px 0; font-size: 1.1rem; color: var(--color-primary); } .content-card p { margin: 0; font-size: 0.95rem; color: var(--color-text-light); line-height: 1.5; } @media (max-width: 768px) { .card-grid { grid-template-columns: 1fr; } } /* Lightbox (shared by gallery and card grids) */ .lightbox, .block-lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.95); z-index: 2000; align-items: center; justify-content: center; } .lightbox.active, .block-lightbox.active { display: flex; } .lightbox-content, .block-lightbox-content { position: relative; max-width: 90%; max-height: 90%; } .lightbox-content img, .block-lightbox-content img { max-width: 100%; max-height: 85vh; object-fit: contain; border-radius: 4px; transition: transform 0.25s ease, opacity 0.25s ease; } .lightbox-content img.slide-left, .block-lightbox-content img.slide-left { transform: translateX(-100px); opacity: 0; } .lightbox-content img.slide-right, .block-lightbox-content img.slide-right { transform: translateX(100px); opacity: 0; } .lightbox-caption, .block-lightbox-caption { text-align: center; color: white; padding: 15px; font-size: 1.1rem; } .lightbox-close, .block-lightbox-close { position: absolute; top: 20px; right: 20px; background: none; border: none; color: white; font-size: 2.5rem; cursor: pointer; z-index: 2001; line-height: 1; padding: 10px; } .lightbox-close:hover, .block-lightbox-close:hover { color: #ccc; } .lightbox-nav, .block-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.2); border: none; color: white; font-size: 2.5rem; cursor: pointer; padding: 20px 15px; border-radius: 4px; transition: background 0.2s; z-index: 2001; } .lightbox-nav:hover, .block-lightbox-nav:hover { background: rgba(255,255,255,0.3); } .lightbox-prev, .block-lightbox-prev { left: 20px; } .lightbox-next, .block-lightbox-next { right: 20px; } .lightbox-counter, .block-lightbox-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: 0.9rem; } /* News lightbox carries a download-info line + button at the bottom of its content; a tall portrait image pushes those down onto the bottom-anchored counter. Move the news counter to the top-center so "X / Y" never overlaps them. Scoped by id so the legacy block-gallery lightbox keeps its bottom counter. */ #news-lightbox-counter { top: 16px; bottom: auto; text-shadow: 0 1px 3px rgba(0,0,0,0.7); } /* News lightbox: stack the image area over a fixed bottom band (filmstrip + download controls). Column layout means the image fills the space ABOVE the band — never overlapping or pushing the button off-screen, at any aspect. (Nav arrows / close / counter are position:absolute, so they're unaffected.) */ #news-lightbox { flex-direction: column; } #news-lightbox .block-lightbox-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; } #news-lightbox-img { max-height: 100%; max-width: 92vw; } #news-lightbox-bottom { flex: 0 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0 16px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); } #news-lightbox-filmstrip { display: flex; gap: 6px; max-width: 94vw; overflow-x: auto; overflow-y: hidden; padding: 4px 10px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.4) transparent; } #news-lightbox-filmstrip img { height: 54px; width: auto; flex: 0 0 auto; border-radius: 4px; border: 2px solid transparent; opacity: 0.5; cursor: pointer; object-fit: cover; transition: opacity 0.15s ease, border-color 0.15s ease; -webkit-user-drag: none; user-select: none; } #news-lightbox-filmstrip img.active { opacity: 1; border-color: #fff; } #news-lightbox-filmstrip img:hover { opacity: 0.85; } #news-lightbox-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; padding: 0 12px; } #news-lightbox-dlinfo { color: #ccc; font-size: 0.9em; } /* Make card images clickable when lightbox is enabled */ .content-card.has-lightbox { cursor: pointer; } .content-card.has-lightbox img { transition: transform 0.2s, box-shadow 0.2s; } .content-card.has-lightbox:hover img { transform: scale(1.02); box-shadow: 0 8px 25px rgba(0,0,0,0.2); } /* Image Gallery */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; padding: 20px 0; } .gallery-item { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); } .gallery-item:hover { box-shadow: var(--shadow-md); transform: scale(1.02); } .gallery-item img { width: 100%; height: 200px; object-fit: cover; } .gallery-item figcaption { padding: 12px 15px; background: var(--color-white); font-size: 0.9rem; color: var(--color-secondary); } /* News bildserie — justified-rows natural-aspect gallery (true portrait/landscape, no crop, curated order preserved). JS in template-news.php sizes each item from its stored w/h and adds .is-justified; pre-JS / no-JS = graceful wrap at natural aspect. Scoped to .news-gallery-justified so other galleries are untouched. */ .gallery.news-gallery-justified { display: flex; flex-wrap: wrap; gap: 6px; grid-template-columns: none; align-content: flex-start; padding: 20px 0; } .news-gallery-justified .gallery-item { position: relative; margin: 0; flex: 0 0 auto; overflow: hidden; } .news-gallery-justified .gallery-item img { display: block; width: 100%; height: auto; /* fallback: show natural aspect, never cropped */ object-fit: contain; } .news-gallery-justified.is-justified .gallery-item img { height: 100%; /* JS active: fill the exactly-proportioned box → no crop */ object-fit: cover; } .news-gallery-justified:not(.is-justified) .gallery-item { flex: 1 1 220px; /* pre-JS / no-JS: simple responsive wrap */ max-width: 360px; } .news-gallery-justified .gallery-item:hover { transform: none; /* tight packing → zoom the image inside instead of the cell */ } .news-gallery-justified.is-justified .gallery-item:hover img { transform: scale(1.04); transition: transform 0.3s ease; } .news-gallery-justified .gallery-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 20px 10px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); color: #fff; font-size: 0.85rem; line-height: 1.3; } /* Document List */ .document-list { list-style: none; padding: 0; margin: 0; } .document-list li { margin: 0; } .document-list a { display: flex; align-items: center; padding: 15px 20px; background: var(--color-bg); border-radius: var(--radius); margin-bottom: 10px; transition: var(--transition); gap: 12px; } .document-list a:hover { background: var(--color-primary); color: var(--color-white); transform: translateX(5px); } .document-list .icon { font-size: 1.3rem; } /* Board Members */ .board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } .board-member { background: var(--color-bg); padding: 25px; border-radius: var(--radius); text-align: center; transition: var(--transition); } .board-member:hover { box-shadow: var(--shadow-sm); } .board-member h3 { color: var(--color-primary); margin-bottom: 5px; font-size: 1.1rem; } .board-member .role { color: var(--color-text-light); font-size: 0.9rem; margin-bottom: 10px; } .board-member a { font-size: 0.9rem; } /* Buttons */ .btn { display: inline-block; padding: 12px 28px; background: var(--color-primary); color: var(--color-white); border-radius: var(--radius); font-weight: 600; transition: var(--transition); border: none; cursor: pointer; } .btn:hover { background: var(--color-accent); color: var(--color-white); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .btn-outline { background: transparent; border: 2px solid var(--color-primary); color: var(--color-primary); } .btn-outline:hover { background: var(--color-primary); color: var(--color-white); } /* Footer */ .footer { background: var(--color-primary); color: rgba(255,255,255,0.9); padding: 40px 20px; text-align: center; } .footer p { margin: 5px 0; font-size: 0.95rem; } .footer a { color: rgba(255,255,255,0.9); } .footer a:hover { color: var(--color-white); } /* Customer login (Kundinloggning) — discreet footer utility link, sits beside the cookie-settings link below the footer. Mirrors .cookie-settings-link. */ .customer-login-link { text-align: center; padding: 8px 0 14px; } .customer-login-link a { font-size: 0.8rem; color: inherit; opacity: 0.6; text-decoration: underline; } .customer-login-link a:hover { opacity: 1; } /* Extended Footer (with map and info) */ .extended-footer { background: var(--color-bg); padding: 40px 20px; border-top: 1px solid var(--color-border); } .extended-footer-content { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: var(--max-width); margin: 0 auto; align-items: start; } .extended-footer-content.map-right { direction: rtl; } .extended-footer-content.map-right > * { direction: ltr; } .footer-map { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .footer-map iframe { width: 100%; height: 300px; border: none; display: block; } .footer-info { color: var(--color-text); line-height: 1.8; } .footer-info h3 { color: var(--color-primary); margin: 0 0 15px 0; font-size: 1.2rem; } .footer-info p { margin: 0 0 10px 0; } .footer-info a { color: var(--color-accent); } .footer-info a:hover { color: var(--color-primary); } .social-links { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; } .social-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 25px; color: white; font-size: 0.95rem; text-decoration: none; transition: transform 0.2s, opacity 0.2s; } .social-link i { font-size: 1.1rem; } .social-link:hover { transform: scale(1.05); opacity: 0.9; color: white; } .social-facebook { background: #1877f2; } .social-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); } .facebook-like-container { margin-top: 15px; } .fb-like-placeholder { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: #f0f0f0; border-radius: 6px; color: #666; font-size: 0.85rem; cursor: default; } .fb-like-placeholder i { color: #1877f2; } @media (max-width: 768px) { .extended-footer-content { grid-template-columns: 1fr; gap: 25px; } .extended-footer-content.map-right { direction: ltr; } .footer-map iframe { height: 250px; } } /* Responsive Design */ @media (max-width: 768px) { .header-content { flex-wrap: wrap; } .menu-toggle { display: block; } .nav { display: none; width: 100%; /* Cancel the desktop flex:1 (flex-basis 0 ignores width) so the open menu wraps to its own full-width line BELOW the logo row — the logo stops re-centering when menus grow, and items center across the full width. */ flex: 0 0 100%; flex-direction: column; padding-top: 15px; gap: 5px; } .nav.active { display: flex; } .nav a { padding: 12px 15px; text-align: center; } /* Mobile dropdown styles */ .nav-dropdown { width: 100%; } .nav-dropdown-toggle { width: 100%; text-align: center; padding: 12px 15px; } .nav-dropdown-menu { position: static; box-shadow: none; background: rgba(255,255,255,0.1); border-radius: 0; margin-top: 5px; } .nav-dropdown-menu a { color: rgba(255,255,255,0.9) !important; text-align: center; } .nav-dropdown-menu a:hover { background: rgba(255,255,255,0.2) !important; color: var(--color-white) !important; } .nav-dropdown-menu a.active { background: rgba(255,255,255,0.3) !important; color: var(--color-white) !important; } /* Page submenus (Om oss ▾) behave exactly like the Mer... accordion: label+caret centered as one unit, panel opens full-width BELOW the item (desktop keeps the flex row, so the static panel would otherwise render as a flex sibling beside the caret — the "side popup" bug). */ .nav-submenu { flex-wrap: wrap; justify-content: center; } .nav-submenu .nav-dropdown-menu { flex-basis: 100%; width: 100%; } .hero { padding: 50px 20px; min-height: 250px; } .hero h1 { font-size: 2rem; } .hero p { font-size: 1rem; } .page-header { padding: 35px 20px; } .page-header h1 { font-size: 1.7rem; } .main { padding: 40px 15px; } .content h2 { font-size: 1.5rem; } .gallery { grid-template-columns: 1fr; } .board-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .logo { font-size: 1.2rem; } .hero h1 { font-size: 1.6rem; } .card { padding: 20px; } } /* Block Page Layout — grid; per-row layout classes from sbRowLayoutClass() */ .block-row { display: grid; grid-template-columns: 1fr; gap: 20px; } .block-row.row-2 { grid-template-columns: 1fr 1fr; } /* 2 lika */ .block-row.row-1-2 { grid-template-columns: 1fr 2fr; } /* 1/3 + 2/3 */ .block-row.row-2-1 { grid-template-columns: 2fr 1fr; } /* 2/3 + 1/3 */ .block-row.row-3 { grid-template-columns: 1fr 1fr 1fr; } /* 3 lika */ .block-row.row-1-3 { grid-template-columns: 1fr 3fr; } /* 1/4 + 3/4 */ .block-row.row-3-1 { grid-template-columns: 3fr 1fr; } /* 3/4 + 1/4 */ .block-column { min-width: 0; } /* ===== Section rows: row/column styling (v1.73.0) ===== Class vocabulary emitted by sb*Attrs() in pages-config.php (single owner). Pages WITHOUT bands never get main--bands/content-run — their markup and these pre-existing rules are untouched (zero-regression guarantee). */ .main--bands { padding: 0; } .content-run { padding: var(--section-padding, 60px) 20px; } .row-band { position: relative; overflow: hidden; background: var(--band-bg, transparent); } .row-band-bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .row-band-bg[data-parallax] { inset: -20% 0; will-change: transform; } .row-band-inner { position: relative; z-index: 1; /* +40px compensates border-box side padding so inner width == .content */ max-width: calc(var(--content-width, 1000px) + 40px); margin: 0 auto; padding: var(--row-pad, var(--space-6)) 20px; } .pad-none { --row-pad: 0; } .pad-small { --row-pad: var(--space-4); } .pad-medium { --row-pad: var(--space-6); } .pad-large { --row-pad: var(--space-8); } .block-row.row-boxed { background: var(--row-bg, transparent); background-size: cover; background-position: center; padding: var(--row-pad, var(--space-6)); border-radius: var(--radius); } .row-light { --color-text: #f5f7fa; --color-text-light: #d4dae0; --color-primary: #ffffff; --color-accent: #ffffff; color: var(--color-text); } .block-column.col-styled { background: var(--col-bg, transparent); border-radius: var(--radius); padding: var(--col-pad, var(--space-4)); } .block-column.col-border { border: 1px solid var(--color-border, #dde3e8); } .block-column.col-straight { border-radius: 0; } .col-pad-none { --col-pad: 0; } .col-pad-small { --col-pad: var(--space-2); } .col-pad-medium { --col-pad: var(--space-4); } .col-pad-large { --col-pad: var(--space-6); } /* Hero parallax layer (created client-side by js/parallax.js) */ .hero--parallax { position: relative; overflow: hidden; } .parallax-hero-bg { position: absolute; inset: -20% 0; background-size: cover; background-position: center; will-change: transform; } .hero--parallax > * { position: relative; z-index: 1; } @media (max-width: 768px) { .row-band-inner { padding-top: calc(var(--row-pad, var(--space-6)) * 0.6); padding-bottom: calc(var(--row-pad, var(--space-6)) * 0.6); } } .block { margin-bottom: 30px; } .block:last-child { margin-bottom: 0; } .block-empty { text-align: center; color: var(--color-text-light); padding: 20px; background: var(--color-bg); border-radius: var(--radius); } /* Block Image */ .block-image-figure { text-align: center; } .block-image-img { max-width: 100%; border-radius: var(--radius); transition: var(--transition); } .block-image-caption { margin-top: 10px; font-size: 0.9rem; color: var(--color-text-light); font-style: italic; } @media (max-width: 768px) { .block-row.row-2, .block-row.row-1-2, .block-row.row-2-1, .block-row.row-3, .block-row.row-1-3, .block-row.row-3-1 { grid-template-columns: 1fr; } } /* Utility Classes */ .text-center { text-align: center; } .mt-2 { margin-top: 20px; } .mt-4 { margin-top: 40px; } .mb-2 { margin-bottom: 20px; } .mb-4 { margin-bottom: 40px; } /* ===== Erbjudande / sales-box block ===== */ .block-erbjudande { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 30px 0; } .block-erbjudande.erb-cols-1 { grid-template-columns: 1fr; } .block-erbjudande.erb-cols-3 { grid-template-columns: repeat(3, 1fr); } .block-erbjudande.erb-cols-4 { grid-template-columns: repeat(4, 1fr); } .erb-card { display: flex; flex-direction: column; position: relative; background: var(--color-light); border: 1px solid var(--color-border); border-radius: var(--erb-radius, var(--card-radius)); box-shadow: var(--card-shadow); overflow: hidden; color: inherit; text-decoration: none; } .erb-card.erb-card-link { cursor: pointer; } .erb-card-media { position: relative; line-height: 0; } .erb-card-media img { width: 100%; height: auto; display: block; } .erb-badge { position: absolute; top: 14px; right: 14px; background: var(--color-primary); color: #fff; font-weight: 700; font-size: 0.9rem; padding: 10px 14px; border-radius: 999px; box-shadow: var(--shadow-2); } .erb-badge-float { position: static; align-self: flex-start; margin: 16px 0 0 16px; } .erb-card-body { display: flex; flex-direction: column; gap: 10px; padding: 22px; flex: 1; } .erb-card-title { margin: 0; } .erb-card-text { margin: 0; line-height: 1.55; } .erb-card-btn { align-self: flex-start; margin-top: auto; display: inline-block; background: var(--color-primary); color: #fff; text-decoration: none; font-weight: 600; padding: 12px 24px; border-radius: 999px; transition: background 0.2s; } .erb-card-btn:hover { background: var(--color-accent); } .erb-card-btn-static { cursor: default; opacity: 0.85; } /* Kortstil: Helbild (fullbleed) — image fills the card, content over a scrim */ .erb-style-fullbleed { min-height: 320px; justify-content: flex-end; background-size: cover; background-position: center; background-repeat: no-repeat; } .erb-style-fullbleed .erb-card-body { /* Keep the text area dark across its full height (fading only at the very top edge) so white text stays readable over any image — even light ones. */ background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.80) 72%, rgba(0,0,0,0) 100%); padding: 64px 22px 22px; } .erb-style-fullbleed .erb-card-title, .erb-style-fullbleed .erb-card-text { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.6); } .erb-style-fullbleed .erb-badge { z-index: 1; } /* "Ram runt korten" off */ .erb-noborder .erb-card { border-color: transparent; } /* Hover: Lyft */ .erb-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .erb-hover-lift .erb-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-4); } /* Hover: Roterande kort (flip) */ .erb-hover-flip .erb-card { display: block; position: relative; min-height: 360px; background: none; border: none; box-shadow: none; overflow: visible; perspective: 1200px; } .erb-flip-inner { position: absolute; inset: 0; transition: transform 0.6s ease; transform-style: preserve-3d; } .erb-hover-flip .erb-card:hover .erb-flip-inner, .erb-hover-flip .erb-card:focus-visible .erb-flip-inner { transform: rotateY(180deg); } .erb-face { position: absolute; inset: 0; display: flex; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--color-border); border-radius: var(--erb-radius, var(--card-radius)); box-shadow: var(--card-shadow); overflow: hidden; } .erb-noborder .erb-face { border-color: transparent; } .erb-face-front { align-items: flex-end; background-color: var(--color-light); background-size: cover; background-position: center; } .erb-front-label { width: 100%; padding: 52px 20px 18px; background: linear-gradient(to top, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0) 100%); } .erb-face-front .erb-card-title { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.6); } .erb-hover-flip .erb-badge { z-index: 2; } .erb-face-back { transform: rotateY(180deg); align-items: center; justify-content: center; background-color: var(--color-primary); background-size: cover; background-position: center; color: #fff; } .erb-face-back::before { content: ""; position: absolute; inset: 0; background: rgba(15, 18, 24, 0.78); } .erb-back-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px; text-align: center; } .erb-face-back .erb-card-title, .erb-face-back .erb-card-text { color: #fff; } .erb-face-back .erb-card-btn { margin-top: 4px; } @media (max-width: 768px) { .block-erbjudande { grid-template-columns: 1fr !important; } } /* No hover (touch): don't rotate — stack front then back so nothing is hidden */ @media (hover: none) { .erb-hover-flip .erb-card { min-height: 0; perspective: none; } .erb-hover-flip .erb-flip-inner { position: static; transform: none; } .erb-hover-flip .erb-face { position: static; transform: none; backface-visibility: visible; -webkit-backface-visibility: visible; } .erb-hover-flip .erb-face-front { min-height: 220px; } } /* ===== Video block (YouTube, consent-gated) ===== */ .block-video { margin: 30px 0; } .block-video .video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--card-radius); overflow: hidden; } .block-video .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .block-video .video-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background-color: #000; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; } .block-video .video-facade::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.18); transition: background 0.2s; } .block-video .video-facade:hover::after, .block-video .video-facade:focus-visible::after { background: rgba(0,0,0,0.35); } .block-video .video-play { position: relative; z-index: 1; width: 68px; height: 48px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4)); } .block-video .video-play svg { display: block; width: 100%; height: 100%; } .block-video .video-play-bg { fill: #212121; opacity: 0.8; transition: fill 0.2s, opacity 0.2s; } .block-video .video-facade:hover .video-play-bg { fill: #cc0000; opacity: 1; } .block-video .video-caption { margin: 8px 0 0; font-size: 0.9rem; color: var(--color-text-light, #666); text-align: center; }