/* * Extracted from header.php so browsers can cache it instead of * re-downloading it inside every page. The that replaces it sits in the * exact same position in , so the cascade order against Bootstrap above * and WordPress/Neve's own inline styles below is unchanged. */ /* ============================================ CSS Variables (Design Tokens) ============================================ */ :root { /* Colors */ --color-primary: #c23f36; --color-dark: #263238; --color-white: #ffffff; --color-text-light: #cfd8dc; --color-text-lighter: #b0bec5; --color-border: #37474f; --color-border-light: rgba(255, 255, 255, 0.2); /* Typography */ --font-family-primary: 'Roboto', Helvetica, Arial, serif; --font-size-small: 10pt; --font-size-base: 13.3333px; --font-size-medium: 14px; --font-size-large: 16px; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; /* Spacing */ --spacing-xs: 10px; --spacing-sm: 15px; --spacing-md: 20px; --spacing-lg: 30px; --spacing-xl: 40px; /* Layout */ --container-max-width: 1250px; --nav-height: 70px; --footer-min-height: 450px; /* Breakpoints */ --breakpoint-mobile: 768px; --breakpoint-tablet: 1040px; } /* ============================================ Base Styles ============================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-family-primary); } /* ============================================ Inline icons (see bv_icon() in functions.php) ============================================ */ .bv-icon { display: inline-block; vertical-align: -0.125em; flex: 0 0 auto; } /* ============================================ Navigation Component ============================================ */ .navbar { background-color: var(--color-primary); height: var(--nav-height); font-family: var(--font-family-primary); display: flex; align-items: center; padding: 0 var(--spacing-md); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .nav-container { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: var(--container-max-width); margin: 0 auto; padding-left: var(--spacing-lg); padding-right: var(--spacing-sm); } /* Logo */ .navbar-brand { display: flex; align-items: center; } .navbar-logo { width: 164px; height: 32px; } /* Mobile Toggle Button */ .navbar-toggler { display: none; background: transparent; border: none; cursor: pointer; padding: 5px; } .navbar-toggler:focus { outline: 2px solid var(--color-white); outline-offset: 2px; } .navbar-toggler.hidden { display: none !important; } .hamburger-icon { width: 32px; height: 32px; color: var(--color-white); } .navbar-close { display: none; } .navbar-close:focus { outline: 2px solid var(--color-white); outline-offset: 2px; } /* Navigation Menu */ .navbar-collapse { display: flex; flex-direction: row-reverse; } .navbar-nav { display: flex; list-style: none; gap: 0; align-items: center; flex-grow: 1; justify-content: flex-end; } .nav-item { display: flex; align-items: center; } .nav-link { color: var(--color-white); text-decoration: none; font-size: var(--font-size-base); font-weight: var(--font-weight-regular); line-height: 20px; padding: var(--spacing-xs) var(--spacing-sm); transition: border-bottom 0.3s ease; display: inline-block; border-bottom: 2px solid transparent; } .nav-link:hover, .nav-link:focus { border-bottom: 2px solid var(--color-white); } .nav-link:focus { outline: 2px solid var(--color-white); outline-offset: 2px; } /* Remove hover effect from Traders Club image link */ .nav-link:has(.navbar-tradersclub):hover, .nav-link:has(.navbar-tradersclub):focus { border-bottom: 2px solid transparent; } .navbar-tradersclub { height: 39px; width: auto; vertical-align: middle; } /* Navigation Separators */ .nav-sep, .nav-sep-blink { color: var(--color-white); font-size: var(--font-size-large); padding: 0 5px; } .nav-sep-blink { animation: blink 1.5s ease-in-out infinite; } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.3; } } /* ============================================ Footer Component ============================================ */ .footer { background-color: var(--color-dark); min-height: var(--footer-min-height); position: relative; bottom: 0; width: 100%; white-space: nowrap; padding-top: var(--spacing-md); padding-bottom: var(--spacing-xl); color: var(--color-white); } .footer .container { max-width: var(--container-max-width); margin: 0 auto; padding: 0 var(--spacing-lg); } .footer-main { display: flex; flex-wrap: wrap; margin: 0 -15px; } .footer-col { flex: 0 0 25%; max-width: 25%; padding: 0 var(--spacing-sm); white-space: normal; } .footer-main h3 { font-size: var(--font-size-medium); line-height: 115%; font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-xs); text-transform: uppercase; margin-top: var(--spacing-lg); color: var(--color-white); } .footer ul { list-style: none; padding: 0; margin: 0; } .footer li { margin-bottom: var(--spacing-xs); font-weight: var(--font-weight-light); } .footer a { color: var(--color-text-light); text-decoration: none; font-size: var(--font-size-medium); transition: opacity 0.3s ease; } .footer a:hover, .footer a:focus { opacity: 0.7; } .footer a:focus { outline: 2px solid var(--color-text-light); outline-offset: 2px; } .footer p { font-size: var(--font-size-small); line-height: 130%; font-weight: var(--font-weight-light); color: var(--color-text-light); margin-bottom: var(--spacing-sm); white-space: normal; } .footer-logo { width: 80%; max-width: 256px; height: auto; } .footer-col:last-child { display: flex; justify-content: flex-start; align-items: flex-start; } .footer-col:last-child a { display: block; } .separator { width: 100%; margin: var(--spacing-sm) 0; border: none; border-bottom: 1px solid var(--color-border); } .footer-copyright { display: flex; width: 100%; } .footer-copyright small { font-size: 12px; line-height: 115%; color: var(--color-text-lighter); display: block; } /* Address styling */ address { font-style: normal; font-size: var(--font-size-small); line-height: 130%; font-weight: var(--font-weight-light); color: var(--color-text-light); margin-bottom: var(--spacing-sm); } /* ============================================ Utility Classes ============================================ */ .text-center-xs { text-align: center; } .text-left-sm { text-align: left; } /* ============================================ Demo Content ============================================ */ .content { padding: var(--spacing-xl) var(--spacing-md); max-width: 1200px; margin: 0 auto; } .content h2 { font-size: 1.2em; margin-bottom: var(--spacing-sm); } /* ============================================ Responsive Design - Mobile Navigation ============================================ */ @media (max-width: 1040px) { .navbar { height: var(--nav-height); position: relative; } .nav-container.menu-open { padding-left: var(--spacing-xs); } .navbar-toggler { display: flex; } .navbar-collapse { display: none; position: absolute; top: var(--nav-height); left: 0; width: 100%; background-color: var(--color-primary); flex-direction: column; z-index: 1000; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .navbar-collapse.show { display: flex; } .navbar-close { display: block; position: absolute; top: -55px; right: var(--spacing-lg); background: transparent; border: none; cursor: pointer; padding: 5px; z-index: 1001; } .close-icon { width: 32px; height: 32px; color: var(--color-white); } .navbar-nav { flex-direction: column-reverse; width: 100%; /* Horizontal padding matches .navbar so the items line up with the logo above them. */ padding: 0 var(--spacing-md) var(--spacing-md) var(--spacing-md); gap: 0; align-items: flex-start; } .nav-item { width: 100%; justify-content: flex-start; height: 43px; display: flex; align-items: center; padding: 0; border-bottom: 1px solid var(--color-border-light); } .nav-item:first-child { margin-top: var(--spacing-md); } .nav-item:has(.navbar-tradersclub) { border-bottom: none; } .nav-link { font-size: var(--font-size-large); padding: 0; } .nav-sep { margin-left: var(--spacing-xs); } .nav-sep-blink { display: none; } } /* Subnav base */ .subnav-bs{ background: var(--color-primary); border-top: 1px solid var(--color-border-light); } .subnav-bs__container{ max-width: var(--container-max-width); margin: 0 auto; padding: 0 var(--spacing-lg); } /* Desktop: right aligned */ .subnav-bs__list{ list-style: none; display: flex; justify-content: start; /* right */ align-items: center; margin: 0; padding: 6px 0; gap: 0; } /* Top-level items */ .subnav-bs__item{ position: relative; display: flex; align-items: center; } .subnav-bs__link{ color: var(--color-white); text-decoration: none; font-size: var(--font-size-base); padding: 6px var(--spacing-sm); border-bottom: 2px solid transparent; white-space: nowrap; } .subnav-bs__link:hover, .subnav-bs__link:focus{ border-bottom: 2px solid var(--color-white); } /* Dropdown menu look (Bootstrap uses dropdown-menu) */ .subnav-bs .dropdown-menu{ background: var(--color-primary); border: 1px solid var(--color-border-light); } .subnav-bs .dropdown-item{ color: var(--color-white); } .subnav-bs .dropdown-item:hover, .subnav-bs .dropdown-item:focus{ background: rgba(255,255,255,0.12); color: var(--color-white); } .subnav-bs .dropdown-item, .subnav-bs .dropdown-item:visited{ color: var(--color-white) !important; } /* Keep all subnav link states white (no blue/purple) */ .subnav-bs a, .subnav-bs a:visited, .subnav-bs a:hover, .subnav-bs a:active, .subnav-bs a:focus{ color: var(--color-white) !important; } /* Show desktop version by default */ .subnav-bs__mobile{ display: none; } .subnav-bs__desktop{ display: block; } /* On mobile, show only the "Hitta rätt" dropdown */ @media (max-width: 991.98px){ .subnav-bs__desktop{ display: none; } .subnav-bs__mobile{ display: block; } .subnav-bs__list--mobile{ justify-content: flex-start; padding: 6px 0; } } /* Subnav base */ .subnav-bs{ background: var(--color-primary); border-top: 1px solid var(--color-border-light); } .subnav-bs__container{ max-width: var(--container-max-width); margin: 0 auto; padding: 0 var(--spacing-lg); } /* Keep all subnav link states white (prevents blue/purple) */ .subnav-bs a, .subnav-bs a:visited, .subnav-bs a:hover, .subnav-bs a:active, .subnav-bs a:focus{ color: var(--color-white) !important; text-decoration: none; } /* Menu list */ .subnav-bs__list{ list-style: none; display: flex; justify-content: flex-end; /* right on desktop */ align-items: center; margin: 0; padding: 6px 0; gap: 0; } .subnav-bs__item{ position: relative; display: flex; align-items: center; } .subnav-bs__link{ color: var(--color-white); font-size: var(--font-size-base); padding: 6px var(--spacing-sm); border-bottom: 2px solid transparent; white-space: nowrap; } .subnav-bs__link:hover, .subnav-bs__link:focus{ border-bottom: 2px solid var(--color-white); } /* Mobile “Hitta rätt” trigger */ .subnav-bs__toggle{ background: transparent; border: 0; color: var(--color-white); padding: 12px 0; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); cursor: pointer; width: 100%; text-align: left; } /* Caret icon for "Hitta rätt" */ .subnav-bs__caret{ display: inline-block; margin-left: 6px; transition: transform 0.2s ease; font-size: 14px; } /* Rotate caret when open */ .subnav-bs__toggle[aria-expanded="true"] .subnav-bs__caret{ transform: rotate(180deg); } /* Remove blue active/focus styles from "Hitta rätt" */ .subnav-bs__toggle, .subnav-bs__toggle:focus, .subnav-bs__toggle:active, .subnav-bs__toggle:focus:active{ color: var(--color-white) !important; background: transparent !important; box-shadow: none !important; outline: none !important; } /* Desktop: hide toggle, force menu visible (no collapse) */ @media (min-width: 992px){ .subnav-bs__toggle{ display:none; } .subnav-bs__collapse{ display:block !important; height:auto !important; visibility:visible !important; } } /* Mobile: stack submenu items */ @media (max-width: 991.98px){ .subnav-bs__list{ justify-content: flex-start; flex-direction: column; align-items: flex-start; padding: 0 0 8px 0; } .subnav-bs__item{ width: 100%; } .subnav-bs__link{ width: 100%; padding: 10px 0; border-bottom: 1px solid var(--color-border-light); } } /* Mobile: show items directly */ @media (max-width: 991.98px){ .subnav-bs__list{ justify-content: flex-start; flex-direction: column; align-items: flex-start; } .subnav-bs__item{ width: 100%; } .subnav-bs__link{ width: 100%; padding: 10px 0; border-bottom: 1px solid var(--color-border-light); } } /* ============================================ Responsive Design - Mobile Footer ============================================ */ @media (max-width: 768px) { .footer-col { flex: 0 0 100%; max-width: 100%; margin-bottom: var(--spacing-sm); } .footer-col:last-child { justify-content: center; } .footer-copyright { justify-content: center; } .text-center-xs { text-align: center; } .text-left-sm { text-align: center; } }