/** Shopify CDN: Minification failed Line 301:11 Expected ":" Line 305:78 Unterminated string token Line 312:64 Expected ":" Line 317:72 Expected identifier but found whitespace Line 325:48 Expected identifier but found "`" **/ /* Lysverden campaign hero — the "Opptil 40 % rabatt" banner at the top of the homepage (section key hero_jVaWmY in templates/index.json). Scoped by the section id's suffix, the same convention lysverden-hero-center.css uses for the returns hero further down the page. Everything in lysverden-hero.css applies to every .lv-hero across the collection and page templates; everything here applies to exactly one section, so it is kept apart. Delete this file and its stylesheet_tag in snippets/stylesheets.liquid when the campaign ends — the hero then falls back to the generic .lv-hero treatment with no further edits. Loaded AFTER lysverden-hero.css so the button rules below win on order as well as on specificity. ---- why the copy is navy on this hero and white on every other one ---- The section runs on colour scheme 6, whose foreground is #fff. That is right over a photo; it is unreadable over this one, whose left two-fifths are a bare cream wall the artwork deliberately leaves empty for the copy. Rather than switch the section to another scheme — which would also swap the button and input colours out from under the theme editor — the two foreground custom properties are redefined on the container. The text blocks set `color: var(--color-foreground)` inline, so redefining the variable upstream reaches them; a plain `color:` rule here would not beat the inline style. */ [id$='__hero_jVaWmY'] .hero__container.lv-hero { --lv-navy: #0f1e43; --lv-gold: #b9932f; /* Burnt orange for the HØSTKAMPANJE chip — autumn, and far enough from the Merkegul #F5B301 the purchase CTAs use that the two never read as the same control. Dark enough to carry white uppercase at ~5:1, which the 11-14px tracked label needs. */ --lv-autumn: #b4521b; --lv-cream: 243 227 214; /* sampled off the artwork's own left-hand wall */ --color-foreground: var(--lv-navy); --color-foreground-heading: var(--lv-navy); } /* ---- crop anchoring ---- lysverden-hero.css anchors every .lv-hero at `center 58%`, solved for a photo whose subject sits high in the frame. This artwork is composed the other way round: the lamps run from the wall fitting at y 5% down to the cabinet at y 100%, and the empty wall that carries the copy is on the LEFT rather than above. So the anchor moves to the bottom-right corner, which fixes both axes at once — `cover` only ever discards one: - box narrower than the image (every width below ~2560px): the overflow is horizontal, and anchoring right means it comes off the extended cream on the left, never off a lamp. - box shorter than the image (only reachable via the 80svh cap on short windows): the overflow is vertical, and anchoring bottom means it comes off the ceiling, never off the cabinet the lamps stand on. The desktop crop is authored at exactly 4.000:1 to match the ceiling the height rule in lysverden-hero.css imposes — max(600px, 100vw/4) caps the box ratio at 4.0 — so on a normal-height window nothing is ever trimmed vertically at any width. */ [id$='__hero_jVaWmY'] .hero__container.lv-hero img.hero__media { object-position: 100% 100%; } /* ---- the copy column ---- */ [id$='__hero_jVaWmY'] .hero__container.lv-hero .hero__content-wrapper { position: relative; z-index: 2; } /* ---- inset from the left edge ---- The wrapper is the section grid's centre column, so its left edge is the theme's --page-margin: 40px flat from 750px up. On the photo that read as crowded — the copy started 14px LEFT of the header logo, which sits in a column that carries its own padding, so the largest type on the page was also the closest thing to the viewport edge. The shift is a margin rather than padding, and --lv-copy-inset is added back to the max-width the generic sheet sets, so the text column keeps the exact measure it had and nothing rewraps — the box only moves. There is room for it: the artwork's empty cream wall runs to roughly x 40%, well past the 34% the copy occupies at desktop widths. Scales with the viewport so the gap stays proportional instead of looking generous at 1100px and mean at 2400px. Phones keep the 40px margin: below 750px the copy needs the full width it has. */ @media screen and (min-width: 750px) { [id$='__hero_jVaWmY'] .hero__container.lv-hero .hero__content-wrapper { --lv-copy-inset: clamp(20px, 3.2vw, 72px); margin-inline-start: var(--lv-copy-inset); max-width: calc(62% + var(--lv-copy-inset)); /* tablet measure, from lysverden-hero.css */ } } @media screen and (min-width: 1100px) { [id$='__hero_jVaWmY'] .hero__container.lv-hero .hero__content-wrapper { max-width: calc(34% + var(--lv-copy-inset)); /* desktop measure, from lysverden-hero.css */ } } /* Blocks are addressed by position, matching the convention in lysverden-hero.css. The order is fixed in templates/index.json: 1 eyebrow pill 2 headline 3 sentence 4 CTAs 5 trust line */ /* 1 — the "Opptil" pill. A text block styled into a chip: the block element is already width:fit-content, so it only needs the surface and the tracking. The font-size has to be set here rather than on the block because lysverden-hero.css sizes every

in a .lv-hero content wrapper at 17px. */ [id$='__hero_jVaWmY'] .hero__content-wrapper > *:nth-child(1) { padding: 0.5em 1.15em; border-radius: 999px; background: var(--lv-autumn); /* The label has to be white, and a `color` declaration here cannot deliver that: snippets/text.liquid renders `color: var(--color-foreground)` as an INLINE style on this very element, which outranks any stylesheet rule. Redefining the variable on the element is what actually reaches it — the same lever used for the navy copy at the top of this file, pointed the other way. Without it the chip renders navy-on-navy and reads as empty. */ --color-foreground: #fff; --color-foreground-heading: #fff; } [id$='__hero_jVaWmY'] .hero__content-wrapper > *:nth-child(1), [id$='__hero_jVaWmY'] .hero__content-wrapper > *:nth-child(1) :is(p, h1, h2, h3, h4, h5, h6) { margin: 0; font-size: clamp(11px, 0.92vw, 14px); font-weight: 600; line-height: 1.1; letter-spacing: 0.16em; text-transform: uppercase; } /* 2 — the headline. Two voices in one block so the whole claim stays a single editable field in the theme editor: the bold rate, then the qualifier in a light weight beneath it. The qualifier is marked up as because the block's setting is a `richtext`, which keeps but strips — the emphasis is typographic, not semantic, so the italic is turned back off. */ [id$='__hero_jVaWmY'] .hero__content-wrapper > *:nth-child(2) :is(h1, h2, h3, h4, h5, h6) { margin: 0; font-size: clamp(38px, 4.45vw, 72px); font-weight: 700; line-height: 1.02; letter-spacing: -0.015em; text-transform: uppercase; } [id$='__hero_jVaWmY'] .hero__content-wrapper > *:nth-child(2) em { display: block; margin-block-start: 0.12em; font-size: 0.74em; font-style: normal; font-weight: 300; letter-spacing: -0.005em; text-transform: none; } /* The rule under the headline: a hairline that fades out to the right with a dot closing it, drawn as two backgrounds on one pseudo-element so it costs no markup. Sized in ch so it tracks the type scale instead of pinning to a pixel width that only looks right at one viewport. */ [id$='__hero_jVaWmY'] .hero__content-wrapper > *:nth-child(2)::after { content: ''; display: block; width: clamp(120px, 11vw, 180px); height: 8px; margin-block-start: clamp(14px, 1.5vw, 26px); background: linear-gradient(90deg, var(--lv-gold) 0%, rgb(185 147 47 / 25%) 100%) no-repeat 0 50% / calc(100% - 12px) 2px, radial-gradient(circle at calc(100% - 3.5px) 50%, var(--lv-gold) 0 3.5px, transparent 3.5px); } /* 3 — the sentence. lysverden-hero.css already sets 17px/1.55 at >=750px; only the measure and the slightly recessive tone are set here. */ [id$='__hero_jVaWmY'] .hero__content-wrapper > *:nth-child(3) { max-width: 34ch; color: rgb(15 30 67 / 78%); } /* 5 — the trust line that used to sit under the CTAs ("Kvalitetsprodukter • Designet for å vare", with a shield mask) is gone: floating on the photo it read as a stray caption rather than as part of the copy block, and the trust bar directly below the hero says the same thing in a place built for it. The space it occupied goes with it — the CTA group's padding-block-end in templates/index.json drops from 25 to 0, since that gap existed only to separate the buttons from this line. The block order is now four children, so every nth-child selector above is unchanged. */ /* ---- CTAs ---- lysverden-hero.css paints every .hero .button navy and hangs an arrow off it. That is the primary treatment, and it is correct for "Se tilbudene". The secondary has to be pulled back out of it: outlined, navy on nothing, and no arrow — two arrows side by side read as two primaries. */ [id$='__hero_jVaWmY'] .hero .button-secondary { background: rgb(255 255 255 / 18%); border-color: rgb(15 30 67 / 30%); color: var(--lv-navy); } [id$='__hero_jVaWmY'] .hero .button-secondary:hover { background: rgb(15 30 67 / 7%); border-color: var(--lv-navy); } [id$='__hero_jVaWmY'] .hero .button-secondary::after { content: none; } /* ---- legibility where the copy leaves the empty wall ---- On a large screen no scrim is needed: the copy sits entirely on the artwork's own cream wall, where navy on rgb(243 227 214) measures about 12:1. Below 1100px the box is far squarer than the crop, so `cover` shows less of the image's width and the wardrobe travels left under the text — hence a cream veil, keyed to the wall's own colour so it reads as more wall rather than as a panel. It also replaces the dark scrim lysverden-hero.css puts on every .lv-hero under 1100px, which was built for white copy and would bury navy. */ @media screen and (max-width: 1099px) { [id$='__hero_jVaWmY'] .hero__container.lv-hero::before { inset: 0; height: auto; background: linear-gradient( 90deg, rgb(var(--lv-cream) / 96%) 0%, rgb(var(--lv-cream) / 90%) 30%, rgb(var(--lv-cream) / 60%) 52%, rgb(var(--lv-cream) / 0%) 72% ); } } /* Phones: the copy can no longer dodge the lamps in any horizontal arrangement, so it stops trying. The veil turns vertical — heaviest at the top, gone by the two-thirds line — and the copy moves up into it, which leaves the cabinet and the lit lamps clear in the bottom third where they read best. */ @media screen and (max-width: 749px) { /* Phones get their own image rather than a slice of the wide one — the section's `custom_mobile_media` setting, currently Warm_Pendant_Lights_Over_Marble_Table.png. That is a standing rule, not a one-off: a crop of the landscape artwork always loses either the lamps or the copy's clear ground at phone widths. Historical note, in case a generated hero image is ever used again: the original campaign artwork carried its own burned-in "Opptil 40 % rabatt" disc, which landed behind the headline on a phone-shaped box and made the hero read 40 % twice. Veiling it failed (cream heavy enough to erase a navy disc also erased the photo) and inpainting smeared the lamp beside it; the only fix that worked was cropping the badge out of frame entirely. Keep promotional text out of hero artwork. */ [id$='__hero_jVaWmY'] .hero__container.lv-hero { /* ---- 2026-10-06: re-solved for the new portrait artwork ---- The phone slot now carries Warm_Pendant_Lights_Over_Marble_Table.png, 900x1598 = 0.563:1 — far taller than the 0.746:1 crop every number below was solved for. At the old height a 390px phone gave a 390x384 box, i.e. 1.016:1, so `cover` scaled the image to 390x693 and threw away 309px of it. Anchored at the bottom (see the rule under this one) every one of those discarded pixels came off the TOP — which is exactly where the three pendants hang. The hero was showing a marble table and four chairs and no lamps at all, on a lighting store's homepage. Two changes fix it together, and neither works alone: - the slope goes 40vw -> 56vw and the floor 370px -> 420px, so the box gets closer to the image's own shape (390px phone: 446px tall, 0.874:1 instead of 1.016:1) and `cover` discards 36% of the height rather than 45%; - the anchor moves to the top, so what is discarded is the chair backs at the bottom instead of the lamps at the top. The 500px ceiling is deliberately kept: it is reached at 486px now rather than 680px, and it is what makes the handover to the tablet block in lysverden-hero.css exact at 749px. Across the band the copy still clears the CTAs — the copy block runs ~330px, so the photo keeps 90-170px of table and chair below the buttons, which is the part of the scene that sells the room. ---- the original note, kept because the trade-off it describes still governs ---- Was 134vw / 620px max, then 116vw / 540px, then clamp(370px, 109vw, 510px). Each of those shortened the box to close the gap under the CTAs, and each kept the same shape — a height that scales with the viewport WIDTH — which is why the gap kept coming back at the wider end of the band. Measured across the band, the copy's bottom edge is essentially fixed: 352px below the hero's top at 320-360px (the sentence takes a fourth line there), and 330px from 375px up. The height, meanwhile, was climbing 1.09px per px of width. So the leftover under the buttons grew from 18px at 320px to 180px at every width from 480px up, where the old 510px ceiling took over — and on a 390px phone it was 95px, a bare strip of drawer front reading as dead space rather than as photograph. The fix is to flatten the slope, not to subtract a constant: 40vw instead of 109vw, with the 228px base chosen so the gap lands near 50px where the copy settles at three lines. Across the band the gap now runs 18px at 320px -> 54px at 390px -> 70px at 430px, instead of 18 -> 95 -> 139. Two endpoints are deliberately preserved: - the 370px floor, which still governs below ~355px and keeps the 320px case exactly as it was (the copy is tallest there and has least room); - the ceiling, which now lands on 500px rather than 510px and is reached at ~680px, so at 749px the hero hands over to the tablet block in lysverden-hero.css at precisely the 500px that block starts on — the handover is now exact where it used to step by 10px. The 30px this takes off a 390px phone comes off the TOP of the crop, since the image is anchored `50% 100%` just below: it is wardrobe and wall up there, and the lamp, the sideboard and its drawer line are all untouched. */ ---- 2026-10-06, second pass: the slope was the wrong lever ---- 56vw bought the lamps back but left 172px of photo under the CTAs at 500px — measured, not estimated: navy button bottom 457px, hero bottom 629px. The reason a `vw` slope keeps overshooting is that the thing it is chasing runs the OTHER way. The copy's bottom edge SHRINKS as the phone gets wider, because the sentence un-wraps: ~370px at 320px, ~345px at 390px, 328px measured at 500px. Height climbing with width while the copy falls means the leftover grows twice as fast as the slope suggests. So the slope is flattened almost to nothing (13vw) and the base carries the height instead. Resulting gap under the buttons: ~15px at 320px, ~46px at 390px, ~51px at 430px, ~77px at 500px — against 18 / 116 / 128 / 172 before. The 320px end is deliberately left tight; the copy is tallest there and has the least room, exactly as the original rule had it. The image still shows every pendant: at 390px the box is 390x391, the image scales to 390x693, and the visible 56% spans y 0-56% — the lamps occupy y 0-49%. Height can be taken off the bottom freely because the anchor is at the top; what goes is chair backs and blurred floor. ⚠️ Trade-off accepted: the handover to the tablet block is no longer seamless. At 749px this gives 437px and the tablet rule starts at 500px, so a desktop window being dragged across 750px steps by 63px. A phone never sees it, and no height formula can both stay tight on a 390px phone and reach 500px at 749px. */ ⚠️ `min-height` has to be reset with it, and this is the trap that made the first attempt at this change a no-op: sections/hero.liquid ships `.hero__container { min-height: inherit }`, inheriting `calc(var(--hero-min-height) - var(--hero-height-offset))` from `.hero`. A floor beats a smaller `height` outright, so the box simply stayed where it was and two different clamps rendered pixel-for-pixel identically. If a height change here appears to do nothing, this is why — check the floor before re-tuning the number. */ height: clamp(420px, calc(228px + 56vw), 500px); } /* Centred horizontally — the image is narrower than the box in this band, so there is no horizontal overflow to steer — and anchored to the TOP, which is the whole fix. The image's subject is stacked: pendants at y 0-32%, marble table at 38-58%, chair backs below. `cover` on a box squarer than the source can only discard height, so the anchor decides which end of that stack survives. Bottom-anchoring (what this rule used to say, correct for the previous landscape crop) kept the chairs and cut the lamps. */ [id$='__hero_jVaWmY'] .hero__container.lv-hero img.hero__media { object-position: 50% 0%; } /* With the badge out of frame the veil only has to carry navy over the wardrobe, so it can be much lighter than it needed to be — and it runs on the diagonal, clearing early towards the bottom right where the lamp is. */ [id$='__hero_jVaWmY'] .hero__container.lv-hero::before { background: linear-gradient( 156deg, rgb(var(--lv-cream) / 93%) 0%, rgb(var(--lv-cream) / 86%) 30%, rgb(var(--lv-cream) / 38%) 48%, rgb(var(--lv-cream) / 0%) 64% ); } /* lysverden-hero.css pins the generic hero's CTAs to a single nowrap row, sized for two short labels. "Utforsk alle produkter" is not short, and at 390px the pair overflowed the viewport with the secondary sliced off at the right edge. Let them wrap instead. */ [id$='__hero_jVaWmY'] .hero__content-wrapper .layout-panel-flex--row { flex-wrap: wrap; gap: 10px; } [id$='__hero_jVaWmY'] .hero__content-wrapper .layout-panel-flex--row .button { font-size: 14px; white-space: normal; } /* The secondary CTA's desktop treatment — navy on an 18% white wash — works over the artwork's bare cream wall, where it sits on one flat tone. On a phone there is no bare wall: the button lands on the lit marble and the chair backs, and 18% white over a warm mid-tone leaves navy label on warm grey at roughly 2:1. It was legible as a shape and not as words. Phones therefore get an opaque surface instead of a wash, so the contrast stops depending on what happens to be behind it, plus a firmer border so the outline still reads as the quieter of the two buttons next to the solid navy primary. */ [id$='__hero_jVaWmY'] .hero .button-secondary { background: rgb(255 255 255 / 94%); border-color: rgb(15 30 67 / 55%); color: var(--lv-navy); font-weight: 600; } [id$='__hero_jVaWmY'] .hero .button-secondary:hover { background: #fff; border-color: var(--lv-navy); } /* ---- vertical balance on phones ---- The copy used to be pinned to the top of the box, which left ~20px above the HØSTKAMPANJE chip and 172px of photo under the CTAs — bottom-heavy enough to read as dead space rather than as photograph. Centring is the right lever here, not the height: the box is 479px on a phone no matter what this file asks for. `height` and even `min-height` on .hero__container are both overruled from above — hero.liquid puts the section id on the OUTER `.hero` element and gives it `min-height: calc(var(--hero-min-height) - var(--hero-height-offset))`, with `--hero-min-height` written as an inline custom property that a stylesheet cannot reach. Two different height clamps were verified to render pixel-for-pixel identically before this was understood, and the measured 479px did not move between a 900px and a 1400px window either. So the free space is a fixed quantity; this rule just splits it evenly above and below the copy instead of dumping all of it at the bottom. ⚠️ If you ever need the hero itself shorter, the lever is the section's height setting in the theme editor, not a rule in this file. */ [id$='__hero_jVaWmY'] .hero__container.lv-hero .hero__content-wrapper { justify-content: center; /* Where the copy sits in the leftover space. With `justify-content: center` a padding on one side moves the copy HALF that distance towards the other — the free space either side of the padding is what gets split evenly. Dead centre measured 85.5px above the chip and 85.5px below the buttons, which read top-heavy on a phone: the hero's job down there is to show the lamps, so the photo wants the lower half and the copy should sit a little high of centre. Measured, not derived: the shift is ~0.78px per px of padding here, not the 0.5 the centring model predicts — the wrapper is not free to grow in both directions, so half the padding is not what it gives back. 41px lifted the copy 32px and left only 53px on top, which was further than asked for. 26px lands it on ~65px above the chip against ~106px below the buttons. (Against 20/172 before any of this, when the copy was pinned to the top, and 85.5/85.5 at dead centre.) */ padding-block-end: 26px; max-width: 100%; } /* lysverden-hero.css shrinks the second child to 38px for the generic hero's three-line headline. This one is two lines and is the whole message. */ [id$='__hero_jVaWmY'] .hero__content-wrapper > *:nth-child(2) :is(h1, h2, h3, h4, h5, h6) { font-size: 40px; line-height: 1.02; } [id$='__hero_jVaWmY'] .hero__content-wrapper > *:nth-child(3) { max-width: 30ch; } }