/** Shopify CDN: Minification failed Line 271:56 Unexpected "*" Line 349:28 Unexpected "*" Line 386:68 Expected ":" Line 390:65 Unterminated string token **/ :root { --paper: #fafaf8; --paper-2: #edece8; --ink: #0f1012; --graphite: #6e6e6b; --line: #e4e3de; --navy: #1e2e44; --font-display: 'Archivo', sans-serif; --font-mono: 'IBM Plex Mono', monospace; /* dekorative baggrundsmønstre, fra forside-mockup.html — kun de tre mønstre, ingen af mockuppens egne --ice/--clay/--sand-farver, som ikke er en del af det godkendte designsystem. Bruges via currentColor eller --line, sat pr. sektion, se blocks/sections der refererer dem. */ --contour: repeating-radial-gradient(circle at 12% 118%, transparent 0 46px, currentColor 46px 47px); --twill: repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 7px); --columns: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px calc(100% / 12)); } /* Styling for Horizon's core header (blocks/_header-menu.liquid, blocks/_header-logo.liquid) — no core file touched, this is our own stylesheet targeting their confirmed class names (read directly from both files, not guessed). Mono/uppercase treatment for the nav and wordmark, matching the mockup's header typography. The underline lives on .menu-list__link-title, NOT .menu-list__link — Horizon's own _header-menu.liquid already puts a JS-driven "safety box" pseudo-element on .menu-list__link::after (a hover-bridge for dropdown/mega-menus, sized via a --box-height custom property assets/header-menu.js sets on hover). Reusing that same selector let our background/transform properties (which Horizon's rule doesn't declare, so nothing overrode them) get composited onto THEIR box at THEIR height once JS set data-safety-box="true" on hover — a solid block instead of a thin line. Confirmed via the actual compiled CSS (compiled_assets/styles.css loads after arcero.css, so same- specificity conflicts on shared properties like `height` resolved in Horizon's favor; only our unclaimed properties like `background` survived). .menu-list__link-title carries no pseudo-element of Horizon's own, confirmed by reading the file — safe to use. */ .menu-list__link-title { position: relative; padding-bottom: 2px; font-family: var(--font-mono, 'IBM Plex Mono', monospace); letter-spacing: 0.14em; text-transform: uppercase; font-size: 11px; } .menu-list__link-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; } .menu-list__link:hover .menu-list__link-title::after, .menu-list__link:focus .menu-list__link-title::after { transform: scaleX(1); transform-origin: left; } .header-logo { font-family: var(--font-mono, 'IBM Plex Mono', monospace); letter-spacing: 0.34em; text-transform: uppercase; } /* .currency-code (localization/currency selector "DKK" label) — used in BOTH sections/header.liquid (desktop) and snippets/header-drawer.liquid (mobile drawer). No dedicated CSS rule exists for it anywhere in the theme (confirmed by search) — it was just inheriting the page's plain body font on both surfaces, not a drawer-specific regression. Styled globally, unscoped, so desktop and mobile stay consistent with each other rather than fixing only one and creating a new mismatch. */ .currency-code { font-family: var(--font-mono, 'IBM Plex Mono', monospace); letter-spacing: 0.14em; text-transform: uppercase; } /* Styling for Horizon's core announcement bar (sections/header-announcements.liquid, blocks/_announcement.liquid) — no core file touched, targets confirmed class names. Matches arcero-ticker's dark/mono/uppercase treatment. --color-foreground is overridden alongside the background so the section's own prev/next arrows (which read that variable, set by its render 'contrast- override' call from the background_color SETTING, not this CSS background) stay visible once a second announcement block is added and the arrows appear. */ .announcement-bar { background: var(--ink, #0f1012); --color-foreground: var(--paper, #fafaf8); } .announcement-bar__text { font-family: var(--font-mono, 'IBM Plex Mono', monospace); letter-spacing: 0.14em; text-transform: uppercase; font-size: 11px; color: var(--paper, #fafaf8); } /* Styling for Horizon's native mobile menu drawer (snippets/header-drawer.liquid) — background/foreground via custom- property override, same collision-free technique as the tech-slider fix (Horizon's own rule only READS --color-background/--color- foreground, doesn't set them directly). BUT: header-drawer.liquid unconditionally adds a "color-custom-{{ block.id }}" class to .menu-drawer, because the _header-menu block's background_color setting has a non-blank schema default ("{{ settings.color_palette. background }}") — so contrast-override always fires and always sets --color-background/--color-foreground/etc. directly on that class, at the SAME specificity as a plain ".menu-drawer" rule. Since compiled Horizon CSS loads after arcero.css, it would win on the tie. Confirmed via computed-style check (background stayed #ffffff despite this rule) before landing on ".header-drawer .menu-drawer" (two classes) to reliably out-specify the single-class color-custom-* selector regardless of source order. --color/--color-rgb are also overridden, not just --color-foreground — color-custom-* sets "color: var(--color, var(--color-foreground))", and --color takes priority in that fallback chain when both are defined, so leaving it alone let stale black text leak through on .menu-drawer__wordmark's color: inherit (caught via computed-style check, not assumed). Typography on .menu-drawer__menu-item-text — a class Horizon's own stylesheet never sets font-family/letter-spacing/text-transform on directly (those live on the ANCESTOR --mainlist/--parent/--child classes via CSS vars, and inherit down to the child span), so no specificity fight needed there. --color-foreground-subdued/-muted are explicitly recomputed here (not just --color-foreground-rgb) because Horizon's own color-palette.liquid bakes them as frozen rgb() literals at the section's color-scheme level — they would NOT automatically re-derive from an --color-foreground-rgb override further down the tree. .menu-drawer__wordmark is a real element added to the drawer markup (snippets/header-drawer.liquid, approved core-file change, logged in ARCERO-CHANGES.md) — reuses shop.name, same data source as desktop's .header-logo text fallback, not a hardcoded string. Frosted glass, not solid: paired with backdrop-filter: blur(20px) saturate(180%), the SAME recipe Horizon already uses in two other places (snippets/quick-add-styles.liquid, sections/product- information.liquid) — reused, not invented. backdrop-filter isn't inherited, so it's declared on both .menu-drawer AND .menu-drawer__submenu (level 2/3 panels), or only the top level would get the glass effect. Corrected after the first version shipped a solid --ink panel — the original ask was transparent-like-the- homepage-header, not solid. Gradient, not flat: light/transparent at the top, darker/more opaque at the bottom — same "to top" direction and light-to-dark logic as .arcero-hero-slideshow__scrim (blocks/arcero-hero-slide.liquid: linear-gradient(to top, rgb(0 0 0 / 0.68) 0%, rgb(0 0 0 / 0.08) 48%, rgb(0 0 0 / 0.28) 100%)) — but 2 stops instead of 3, and --ink instead of black. The hero's middle dip exists to reveal the photo behind it; the drawer has no image to reveal, just blurred page content throughout, so a straight 2-stop transition is the right adaptation, not a literal copy of the 3 values. --color-background alone CANNOT express a gradient — Horizon's own rule reads it via "background-color: var(--color-background)", and background-color doesn't accept a gradient (would compute as invalid, falling back to transparent). Using the "background" shorthand directly here instead, at higher specificity than Horizon's plain .menu-drawer rule, so it correctly wins for the background-color component too. --color- background is left set as a plain non-gradient fallback for any other consumer, but the actual visible background comes from this rule's "background" declaration below, not from that custom property. Top stop is --graphite (#6e6e6b), not a near-opaque --ink shade — Lucas called the top out as too dark/solid-looking. Bottom stays --ink, unchanged. .menu-drawer__featured-content forced back to container-type: normal — its native container-type: inline-size (needed for the featured- product cards' cqi-based width) breaks backdrop-filter's ability to composite "what's behind" for that region and everything from that point down (the currency/language row above it included) — the gradient/blur visibly stopped partway down the panel, product cards and the currency selector sat on plain unblurred page white. Confirmed via computed geometry + before/after screenshots, not assumed; confirmed this override does not break the cqi sizing (card width still resolves sensibly against a container further up the tree). */ .header-drawer .menu-drawer { --color-background: rgb(15 16 18 / 0.85); --color: var(--paper); --color-rgb: 250, 250, 248; --color-foreground: var(--paper); --color-foreground-rgb: 250, 250, 248; --color-foreground-subdued: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); --color-foreground-muted: rgb(var(--color-foreground-rgb) / var(--opacity-muted-text)); --color-border: var(--paper); background: linear-gradient(to top, rgb(15 16 18 / 0.92) 0%, rgb(110 110 107 / 0.55) 100%); backdrop-filter: blur(20px) saturate(180%); } .header-drawer .menu-drawer__featured-content { container-type: normal; } .header-drawer .menu-drawer__submenu { background: linear-gradient(to top, rgb(15 16 18 / 0.92) 0%, rgb(110 110 107 / 0.55) 100%); backdrop-filter: blur(20px) saturate(180%); } .menu-drawer__wordmark { display: block; padding: var(--padding-lg) var(--padding-xl); font-family: var(--font-mono, 'IBM Plex Mono', monospace); letter-spacing: 0.34em; text-transform: uppercase; font-size: 13px; text-decoration: none; color: inherit; } .menu-drawer .menu-drawer__close-button { align-self: flex-end; } .menu-drawer .menu-drawer__menu-item-text { position: relative; padding-bottom: 2px; font-family: var(--font-mono, 'IBM Plex Mono', monospace); letter-spacing: 0.14em; text-transform: uppercase; } /* Statisk understregning i stedet for hover — mobil/touch har ingen museover-tilstand, så desktop's scaleX(0)-på-hover-effekt ville aldrig vises. Altid synlig i stedet. */ .menu-drawer .menu-drawer__menu-item-text::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; opacity: 0.35; } /* Note: Horizon's native footer used to be styled here (a blanket footer { ... } / footer .section-background { ... } block scoped to the literal