/* ==========================================================================
Homepage redesign - 2026
Loaded only when USE_NEW_HOME_LAYOUT is on (see frame/html_head.twig).
Homepage rules are scoped under .home-v2 so they cannot affect other pages;
.footer-v2 rules are intentionally global because the footer is site-wide.
app.css is never edited - everything here is an override.
========================================================================== */
/* --------------------------------------------------------------------------
1. DESIGN TOKENS
NOTE: these values are read from a raster mock-up and are APPROXIMATE.
Correct them here once and every rule below follows.
-------------------------------------------------------------------------- */
:root {
--hv-navy: #070060; /* headings: Blekk og Toner, section titles */
--hv-blue: #1478F0; /* CTA buttons + links */
--hv-blue-dark: #0F63CC; /* CTA hover */
--hv-ink: #2D2D2D; /* body copy */
--hv-muted: #5A5A5A; /* secondary copy */
--hv-line: #E3E6EA; /* hairlines / card borders */
--hv-surface: #FFFFFF; /* card background */
--hv-surface-alt: #F7F8FA; /* section background */
--hv-pink: #ED008C; /* GRATIS badge */
--hv-footer-text: #070060; /* footer: ALL copy + links - navy blue */
--hv-footer-hover:#1478F0; /* footer link hover */
--hv-fs-hero: 30px;
--hv-fs-section: 28px;
--hv-fs-tile: 16px;
--hv-fs-nav: 15px;
--hv-fs-body: 15px;
--hv-sidebar-w: 240px; /* was 350px in app.css */
--hv-grid-gap: 24px; /* was 30px in app.css */
}
/* Global (site-wide, like the footer rules): smoother text rendering, and a
smaller base size (app.css sets 16px; everything without its own
font-size inherits from here). */
body {
font-size: 15px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; /* Legacy Firefox support */
text-rendering: optimizeLegibility;
}
/* --------------------------------------------------------------------------
2. SIDEBAR CATEGORY NAVIGATION (homepage, desktop)
-------------------------------------------------------------------------- */
.home-v2 .home-sidebar .br-12 { padding: 0 !important; border-color: var(--hv-line) !important; }
.home-cat-nav__group { margin: 0; padding: 6px 0; }
.home-cat-nav__group + .home-cat-nav__group { border-top: 1px solid var(--hv-line); }
.home-cat-nav__link {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 11px 16px;
font-size: var(--hv-fs-nav); font-weight: 600; line-height: 1.3;
color: var(--hv-navy); text-decoration: none;
transition: background-color .15s ease, color .15s ease;
}
.home-cat-nav__link:hover,
.home-cat-nav__item.active > .home-cat-nav__link { background: var(--hv-surface-alt); color: var(--hv-blue); }
.home-cat-nav__chevron { flex: 0 0 auto; color: var(--hv-muted); }
.home-cat-nav__link:hover .home-cat-nav__chevron { color: var(--hv-blue); }
/* --- 2a. Subcategories + colour-coded underline ------------------------------
Each carries --cat-color inline from CategoryMenuBuilder (the DB value, or
the band default). The underline sits under the TEXT only, hence inline-block. */
.home-cat-nav__label {
display: inline-block;
border-bottom: 3px solid var(--cat-color, transparent);
padding-bottom: 2px;
font-weight: 700;
}
.home-cat-nav__toggle {
width: 100%; background: none; border: 0; text-align: left;
cursor: pointer; font-family: inherit;
}
.home-cat-nav__chevron { transition: transform .2s ease; }
/* Collapsed by default; the toggle script adds .is-open. */
.home-cat-nav__sub {
display: none; margin: 0 0 0 16px; padding: 2px 0 8px;
}
.home-cat-nav__item.is-open > .home-cat-nav__sub { display: block; }
/* --- 2c. CARD GROUPS (match the approved sidebar screenshot) -----------------
Each of the three colour bands is its own rounded card with a gap between,
rather than one outer box with internal dividers. The outer wrapper that
frame.twig renders is therefore neutralised here instead of in the template. */
.home-v2 .home-sidebar .br-12 {
border: 0 !important;
padding: 0 !important;
background: transparent;
}
.home-cat-nav__group {
background: var(--hv-surface);
border: 1px solid var(--hv-line);
border-radius: 12px;
padding: 0;
margin: 0 0 16px;
overflow: hidden;
}
.home-cat-nav__group:last-child { margin-bottom: 0; }
/* groups are separate cards now, so the old divider between them is removed */
.home-cat-nav__group + .home-cat-nav__group { border-top: 1px solid var(--hv-line); }
/* hairline between rows inside a card */
.home-cat-nav__item + .home-cat-nav__item { border-top: 1px solid var(--hv-line); }
.home-cat-nav__link { padding: 13px 16px; }
.home-cat-nav__label { border-bottom-width: 3px; padding-bottom: 3px; }
.home-cat-nav__chevron { color: var(--hv-navy); stroke-width: 2; }
/* right-pointing chevron turns down when the group is open */
.home-cat-nav__item.is-open > .home-cat-nav__toggle .home-cat-nav__chevron {
transform: rotate(90deg);
}
/* --- 2d. EXPANDED SUBCATEGORIES (match the attached menu screenshot) ---------
Indented white block, right chevron on every row. Each row's own text
carries a colour-coded underline (--cat-color, inherited from the parent
) - same treatment as the top-level .home-cat-nav__label - instead of
the single vertical rail running down the whole list. */
.home-cat-nav__sub {
background: var(--hv-surface);
margin: 0 0 0 20px;
padding: 0;
}
.home-cat-nav__sublink {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 12px 16px;
font-size: 15px; font-weight: 400; line-height: 1.3;
color: var(--hv-navy); text-decoration: none;
border-bottom: 0;
}
.home-cat-nav__sublabel {
display: inline-block;
border-bottom: 2px solid var(--cat-color, transparent);
padding-bottom: 2px;
}
.home-cat-nav__sub li + li .home-cat-nav__sublink {
border-top: 1px solid var(--hv-line);
}
.home-cat-nav__sublink:hover { color: var(--hv-blue); background: var(--hv-surface-alt); font-weight: 600; }
.home-cat-nav__sublink--all { font-weight: 600; color: var(--hv-navy); }
.home-cat-nav__sublink.active { font-weight: 600; color: var(--hv-blue); background: var(--hv-surface-alt); }
.home-cat-nav__subchevron { flex: 0 0 auto; color: var(--hv-navy); }
.home-cat-nav__sublink:hover .home-cat-nav__subchevron { color: var(--hv-blue); }
/* The open parent row keeps its underline and turns its chevron downward. */
.home-cat-nav__item.is-open > .home-cat-nav__toggle { background: transparent; }
/* Active (current) menu entries use the same colours as :hover. Declared after the
.is-open reset above so an open + active parent keeps the hover background. */
.home-cat-nav__item.active > .home-cat-nav__link,
.home-cat-nav__item.active > .home-cat-nav__toggle { background: var(--hv-surface-alt); color: var(--hv-blue); }
.home-cat-nav__item.active > .home-cat-nav__link .home-cat-nav__chevron,
.home-cat-nav__sublink.active .home-cat-nav__subchevron { color: var(--hv-blue); }
/* --- 2e. OFF-CANVAS VARIANT --------------------------------------------------
Inside the mobile slide-out panel the rows run edge to edge, so the card
chrome (border, radius, gap) is dropped and only the hairlines remain. */
.home-cat-nav--offcanvas .home-cat-nav__group {
border: 0;
border-radius: 0;
margin: 0;
overflow: visible;
}
.home-cat-nav--offcanvas .home-cat-nav__group + .home-cat-nav__group {
border-top: 1px solid var(--hv-line);
}
.home-cat-nav--offcanvas .home-cat-nav__link { padding: 14px 4px; }
.home-cat-nav--offcanvas .home-cat-nav__sub { margin-left: 12px; }
.home-cat-nav--offcanvas .home-cat-nav__sublink { padding: 12px 12px; }
/* --------------------------------------------------------------------------
2b. GRID PROPORTIONS
app.css uses 350px + calc(100% - 380px). The design gives the sidebar less room
and the main column more, so it is narrowed here for the homepage only.
-------------------------------------------------------------------------- */
/* Desktop only. Below 992px the sidebar is display:none, and app.css collapses the
grid to a single column - this override must not outrank that, or the main
column would be squeezed into the empty sidebar track. */
@media (min-width: 992px) {
.home-v2 .app-grid-1to3 {
grid-template-columns: var(--hv-sidebar-w) calc(100% - var(--hv-sidebar-w) - var(--hv-grid-gap));
gap: var(--hv-grid-gap);
}
}
/* --------------------------------------------------------------------------
3. HERO
-------------------------------------------------------------------------- */
.home-v2 .home-hero { border-color: var(--hv-line) !important; padding: 24px; background: var(--hv-surface); }
/* Decorative splash, bottom-right, behind the title/logos (z-index below). */
.home-v2 .home-hero__splash {
position: absolute;
right: -5px;
bottom: 0;
width: 380px;
max-width: 45%;
height: auto;
pointer-events: none;
z-index: 0;
}
.home-v2 .home-hero > div { position: relative; z-index: 1; gap: 40px; }
.home-v2 .home-hero__title {
font-size: var(--hv-fs-hero); font-weight: 800; line-height: 1.15;
color: var(--hv-navy); margin: 0 0 10px;
}
.home-v2 .home-hero__tagline {
font-size: 16px; font-weight: 400; line-height: 1.45;
color: var(--hv-navy); margin: 0 0 18px;
}
.home-v2 .home-hero__tagline-bold { font-weight: 700; }
.home-v2 .home-hero__cta {
display: inline-flex; align-items: center; gap: 10px;
padding: 11px 22px; border-radius: 8px;
background: var(--hv-blue); color: #fff;
font-size: 15px; font-weight: 600; text-decoration: none;
transition: background-color .15s ease;
}
.home-v2 .home-hero__cta:hover { background: var(--hv-blue-dark); color: #fff; }
/* Brand logos: sit right after the title (no longer stretched to the far
right edge, which pushed them into the splash graphic), tighter row gap. */
.home-v2 .brands-logo-wrapper { gap: 6px; }
.home-v2 .brands-logo-row { gap: 8px; }
/* The source logo files each carry a different amount of built-in canvas
padding (HP's circle mark alone fills ~70% of its canvas vs ~30% for the
wordmark logos), so scaling every image to the same WIDTH left them at
very different visual heights. Giving every cell the same fixed height and
letterboxing the image inside it (object-fit: contain) makes the row look
consistent regardless of each file's own padding. */
.home-v2 .brands-logo-row a {
display: flex; align-items: center; justify-content: center;
height: 32px;
}
.home-v2 .brands-logo-row img {
width: 100%;
/* height: 100%; */
/* max-width: 90px; */
/* object-fit: contain; */
}
/* --------------------------------------------------------------------------
4. POPULAR CATEGORIES
-------------------------------------------------------------------------- */
.home-v2 .home-categories__title {
font-size: var(--hv-fs-section); font-weight: 700;
color: var(--hv-navy); text-align: left; margin: 0;
}
.home-v2 .home-categories .category-item {
border: 1px solid var(--hv-line); border-radius: 12px;
background: var(--hv-surface); padding: 16px 10px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.home-v2 .home-categories .category-item:hover {
border-color: var(--hv-blue); box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.home-v2 .home-categories .category-item img { height: 100%; width: 140px; }
.home-v2 .home-categories .category-item .overflow-hidden { text-align: center; }
.home-v2 .home-categories .category-item h3 {
font-size: var(--hv-fs-tile); font-weight: 700;
color: var(--dark-charcoal); margin: 10px 0 0;
}
/* --------------------------------------------------------------------------
5. TRUST BAR
-------------------------------------------------------------------------- */
.trust-bar { padding: 30px 0 10px; }
.trust-bar__row { display: flex; gap: 16px; align-items: stretch; }
.trust-bar__card {
display: flex; align-items: center; gap: 16px;
border: 1px solid var(--hv-line); border-radius: 12px;
background: var(--hv-surface-alt); padding: 16px 20px;
}
.trust-bar__card { flex: 1 1 auto; gap: 0; }
.trust-bar__cell {
flex: 1 1 0; display: flex; align-items: center; justify-content: center;
gap: 12px; text-align: center; padding: 4px 18px;
}
/* Separator between every item, not just the review cells. */
.trust-bar__cell + .trust-bar__cell { border-left: 1px solid var(--hv-line); }
/* The promo is wider than the rest and stays left-aligned. */
.trust-bar__cell.trust-bar__promo { flex: 1.6 1 0; }
.trust-bar__promo { text-decoration: none; justify-content: flex-start; }
.trust-bar__badge {
flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%;
background: var(--hv-pink); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.trust-bar__promo-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.trust-bar__title { font-size: 18px; font-weight: 800; color: var(--hv-navy); }
.trust-bar__sub { font-size: 14px; color: var(--dark-charcoal); font-weight: 500; }
.trust-bar__btn {
margin-top: 4px; padding: 7px 18px; border-radius: 8px;
background: var(--hv-blue); color: #fff; font-size: 14px; font-weight: 600;
}
.trust-bar__promo:hover .trust-bar__btn { background: var(--hv-blue-dark); }
.trust-bar__review { flex-direction: column; gap: 4px; }
.trust-bar__review-head { display: flex; align-items: center; gap: 8px; }
.trust-bar__stars { display: flex; gap: 2px; }
.trust-bar__rating { margin: 0; font-size: 16px; font-weight: 700; color: var(--hv-navy); }
.trust-bar__link { font-size: 14px; font-weight: 500; color: var(--hv-blue); text-decoration: none; }
.trust-bar__link:hover { text-decoration: underline; color: var(--hv-blue-dark); }
.trust-bar__award img { max-height: 92px; width: auto; }
/* Trustpilot: a self-contained bordered badge, distinct from the plain
icon+stars+rating cells above (per the design), still followed by the
same "Se kundene våre" link/caption the other cells have. */
.trust-bar__trustpilot { flex-direction: column; gap: 8px; }
.trust-bar__trustpilot-badge {
display: inline-flex; align-items: center; gap: 8px;
color: var(--hv-ink); text-decoration: none;
}
.trust-bar__trustpilot-badge:hover { color: var(--hv-ink); }
/* Big star: outside the bordered pill entirely. */
.trust-bar__tp-star-big { width: 28px; height: 28px; flex: 0 0 auto; }
/* The pill wraps only the "Review us on [star] Trustpilot" text. */
.trust-bar__tp-pill {
display: inline-flex; align-items: center; gap: 3px;
padding: 10px 18px;
border: 1px solid #00B67A; border-radius: 7px;
background: var(--hv-surface);
font-size: 14px; white-space: nowrap;
color: #000000; font-weight: 500;
}
.trust-bar__tp-star-small { width: 20px; height: 20px; flex: 0 0 auto; }
.trust-bar__tp-pill strong { color: #000000; margin-left: -3px; }
/* --------------------------------------------------------------------------
6. FOOTER (site-wide - deliberately not scoped to .home-v2)
-------------------------------------------------------------------------- */
.footer-v2__top { display: flex; gap: 32px; padding: 36px 0 28px; flex-wrap: wrap; }
.footer-v2__brand { flex: 1 1 230px; }
.footer-v2__tagline { margin: 14px 0 2px; font-size: var(--hv-fs-body); color: var(--hv-footer-text); }
.footer-v2__domain { margin: 0; font-size: var(--hv-fs-body); font-weight: 600; color: var(--hv-footer-text); }
.footer-v2__social { display: flex; gap: 12px; margin-top: 14px; color: var(--hv-footer-text); }
.footer-v2__social a { color: inherit; }
.footer-v2__social a:hover { color: var(--hv-footer-hover); }
.footer-v2__col { flex: 1 1 170px; }
.footer-v2__coltitle {
display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px;
background: none; border: 0; padding: 0; margin: 0 0 12px;
font-size: 16px; font-weight: 700; color: var(--hv-footer-text); text-align: left;
}
.footer-v2__coltitle--static { display: block; }
.footer-v2__chev { display: none; flex: 0 0 auto; transition: transform .2s ease; }
.footer-v2__links { margin: 0; }
.footer-v2__links li + li { margin-top: 8px; }
.footer-v2__links a { font-size: var(--hv-fs-body); color: var(--hv-footer-text); text-decoration: none; }
.footer-v2__links a:hover { color: var(--hv-footer-hover); text-decoration: underline; }
.footer-v2__pay { flex: 1 1 210px; }
.footer-v2__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.footer-v2__logo { height: 30px; width: auto; }
.footer-v2__delivery-label { margin: 14px 0 0; font-size: var(--hv-fs-body); font-weight: 600; color: var(--hv-footer-text); }
.footer-v2__delivery { margin: 10px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-v2__bring-logo { height: 60px; width: auto; }
.footer-v2__delivery-logo { height: 24px; width: auto; }
.footer-v2__legal {
border-top: 1px solid var(--hv-line); padding: 16px 0 22px; text-align: center;
font-size: 13px; color: var(--hv-footer-text);
}
.footer-v2__legal a { color: var(--hv-footer-text); text-decoration: none; }
.footer-v2__legal a:hover { color: var(--hv-footer-hover); text-decoration: underline; }
/* --------------------------------------------------------------------------
7. RESPONSIVE
-------------------------------------------------------------------------- */
@media (max-width: 991px) {
/* Wrap the five cells onto two rows; separators become horizontal. */
.trust-bar__card { flex-wrap: wrap; }
.trust-bar__cell { flex: 1 1 30%; padding: 12px; }
.trust-bar__cell.trust-bar__promo { flex: 1 1 100%; border-bottom: 1px solid var(--hv-line); }
.trust-bar__cell.trust-bar__promo + .trust-bar__cell { border-left: 0; }
}
@media (max-width: 767px) {
:root { --hv-fs-hero: 26px; --hv-fs-section: 22px; --hv-fs-tile: 15px; }
/* Design calls for a 2-column category grid on mobile (app.css steps 5 -> 4 -> 3). */
.home-v2 .home-categories__grid { grid-template-columns: repeat(2, 1fr) !important; }
.home-v2 .home-categories__title { text-align: left; }
.home-v2 .home-hero { padding: 18px; }
.home-v2 .home-hero__tagline { font-size: 16px; }
.trust-bar__card { flex-direction: row; flex-wrap: wrap; padding: 6px 10px; }
.trust-bar__cell { flex: 1 1 44%; padding: 12px 8px; }
.trust-bar__cell.trust-bar__promo { flex: 1 1 100%; justify-content: flex-start; }
/* On narrow screens the rules read better horizontally. */
.trust-bar__cell + .trust-bar__cell { border-left: 0; border-top: 1px solid var(--hv-line); }
.trust-bar__cell.trust-bar__award { flex: 1 1 100%; }
.trust-bar__badge { width: 56px; height: 56px; font-size: 12px; }
.trust-bar__title { font-size: 18px; }
/* Footer becomes an accordion */
.footer-v2__top { flex-direction: column; gap: 0; }
.footer-v2__col { flex: 1 1 auto; border-top: 1px solid var(--hv-line); padding: 4px 0; }
.footer-v2__coltitle { padding: 14px 2px; margin: 0; }
.footer-v2__chev { display: block; }
.footer-v2__col.is-open .footer-v2__chev { transform: rotate(180deg); }
.footer-v2__links { display: none; padding: 0 2px 14px; }
.footer-v2__col.is-open .footer-v2__links { display: block; }
.footer-v2__pay { padding: 18px 0 4px; text-align: center; }
.footer-v2__logos { justify-content: center; }
.footer-v2__delivery { justify-content: center; }
.footer-v2__brand { text-align: center; padding-bottom: 8px; }
.footer-v2__social { justify-content: center; }
}
/* --------------------------------------------------------------------------
8. STICKY HEADER (site-wide - deliberately not scoped to .home-v2)
--------------------------------------------------------------------------
position:sticky cannot be used here: .header-main-navbar sits inside
.header-section, and a sticky box may only travel within its PARENT's box.
That parent is only as tall as the header itself, so the bar would unstick
after ~40px and scroll away.
Instead a small script in header.twig adds .is-fixed once the bar reaches the
top of the viewport, and inserts a same-height placeholder so the page does
not jump by the bar's height at that moment. */
.header-main-navbar.is-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1020; /* above page content, below modals */
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
/* --------------------------------------------------------------------------
9. HEADER TOP BAR (site-wide - deliberately not scoped to .home-v2)
--------------------------------------------------------------------------
Text: KJOPSHJELP / Faktura-EHF-Kort-Vipps / Fri frakt (.header-top, 15px),
the Inkl./Eks. mva toggle + "kroner igjen til fri frakt" (relies on the
shared .font-14 utility class, so it is overridden here by a more specific
selector instead of touching .font-14 itself - that class is reused on
unrelated pages: login, product, terms), and the KONTO label (same
.font-14 utility, same reason for the specific selector).
Icon sizes are trimmed to match the smaller text.
Colour: the three top-bar items carry the shared .dark-gray class
(#2D2D2D) - overridden here to --dark-charcoal (#111111) via a more
specific selector rather than touching .dark-gray itself, which is
reused site-wide. */
.header-top { font-size: 12px; }
.header-top .dark-gray { color: var(--dark-charcoal); }
/* Design shows this text at a lighter weight than the markup's fw-bold (700). */
.header-top .fw-bold { font-weight: 500; }
/* Search bar: design shows one seamless rounded box - no divider before the
search icon. app.css's button::before draws that divider; hidden here
rather than edited there, since the search form is reused site-wide. */
.header-search-form button::before { display: none; }
.header-search-form input,
.header-search-form button { font-size: 13px; }
.header-search-form > form > div:first-child {
border-radius: 7px;
border: 1px solid #EDEDED;
}
.header-search-form input { border-radius: 7px 0 0 7px; }
.header-section .price-change-container {
border-radius: 7px;
border: 1px solid #EDEDED;
}
/* Design's search bar is noticeably shorter than app.css's desktop padding
(18px top/bottom). app.css already reduces this at <=991px and <=767px;
wrapped in the matching min-width here so those mobile roll-backs still
win at narrower widths instead of being overridden by this later file. */
@media (min-width: 992px) {
.header-search-form input,
.header-search-form button { padding: 11px 20px; }
/* Fixed width instead of stretching to fill the row, plus extra breathing
room after the logo. Scoped to --desktop only - the mobile off-canvas
search reuses the shared .header-search-form class and stays untouched. */
.header-search-form--desktop {
width: 550px;
max-width: 550px;
flex: 0 0 auto;
margin-left: 40px;
}
}
.header-top svg { width: 16px; height: 16px; }
.header-top img { width: 22px; height: 22px; }
.price-change-container .price-change-parts-container,
.price-change-container .price-sum,
.price-change-container .price-sum-text { font-size: 13px; font-weight: 700; }
.price-change-input {
position: relative;
top: 2px;
margin-left: 2px;
}
.price-change-container .price-change-parts-container {
display: flex;
gap: 10px;
}
.user-konto-menu .font-14 { font-size: 13px; font-weight: 700; }
.user-konto-menu img { width: 20px; }
#hm_cart img { width: 20px; }