/** Shopify CDN: Minification failed Line 543:0 Unexpected "}" **/ /* ============================================================ ØSTENS SOL – CUSTOM CSS TIL SHOPIFY (HORIZON TEMA) ============================================================ SÅDAN BRUGER DU DENNE FIL: 1. Gå til Shopify Admin → Online Store → Themes 2. Klik "..." på dit aktive tema → "Edit code" 3. Under "Assets" klik "Add a new asset" 4. Upload denne fil som "custom-redesign.css" 5. Åbn filen "layout/theme.liquid" 6. Find linjen der indeholder 7. Indsæt denne linje LIGE FØR : {{ 'custom-redesign.css' | asset_url | stylesheet_tag }} 8. Gem filen TIP: Tag altid en backup af dit tema først! Klik "..." → "Duplicate" før du begynder. ============================================================ */ /* =========================================== 1. GOOGLE FONTS (typografi-opgradering) =========================================== BEMÆRK: Denne import skal tilføjes i theme.liquid , IKKE i CSS-filen. Indsæt denne linje i theme.liquid lige FØR den linje du indsatte ovenfor: =========================================== */ /* =========================================== 2. FARVEPALETTE – varm & premium =========================================== */ :root { --color-cream: #FFF8F0; --color-warm-white: #FFFAF6; --color-sand: #F5EDE3; --color-clay: #E8D5C0; --color-earth: #8B6F47; --color-deep: #2C1810; --color-ink: #1A1208; --color-accent: #C4572A; --color-accent-hover: #A84520; --color-muted: #9A8E80; --color-border-custom: #E5DDD4; } /* =========================================== 3. GLOBAL TYPOGRAFI =========================================== */ /* Overskrifter: DM Serif Display */ h1, h2, h3, .h1, .h2, .h3, .section-title { font-family: 'DM Serif Display', Georgia, serif !important; font-weight: 400 !important; font-style: normal; } /* Brødtekst: Plus Jakarta Sans */ body, p, a, button, input, select, textarea, .h4, .h5, .h6, h4, h5, h6 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; } /* =========================================== 4. BAGGRUNDSFARVER – varm creme =========================================== */ /* Hvide sektioner → varm hvid */ .color-scheme-1 { --color-background: rgb(255 250 246 / 1.0) !important; --color-background-rgb: 255 250 246 !important; } /* Sekundær baggrund → sand */ .color-scheme-9a2a18f4-f4f2-45c6-9aaf-84c70e978dd8 { --color-background: rgb(255 248 240 / 1.0) !important; --color-background-rgb: 255 248 240 !important; } /* =========================================== 5. HEADER – logo, søgebar, kurv =========================================== */ /* Generel header-styling */ .header { border-bottom: 1px solid #E5DDD4 !important; } /* Logo størrelse */ .header-logo__image { max-height: 44px !important; mix-blend-mode: multiply !important; /* Gør hvid baggrund usynlig */ } /* Søgebar */ .onhow-search-bar__container { border: 1.5px solid #E5DDD4 !important; border-radius: 6px !important; background: white !important; transition: border-color 0.2s, box-shadow 0.2s !important; } .onhow-search-bar__container:focus-within { border-color: #8B6F47 !important; box-shadow: 0 0 0 3px rgba(139,111,71,0.08) !important; background: white !important; } .onhow-search-bar__input { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-size: 14px !important; } .onhow-search-bar__input::placeholder { color: #9A8E80 !important; } /* Skjul X-knappen i søgebaren */ .onhow-search-bar__reset { display: none !important; } /* =========================================== 6. NAVIGATION – aktiv state accent farve =========================================== */ .menu-list__link--active .menu-list__link-title, .menu-list__link:hover .menu-list__link-title { color: var(--color-accent) !important; } /* =========================================== 7. HERO SEKTION – CTA knap forbedring =========================================== */ /* Primær CTA knap */ .button--AaDJENFBZR2pPSnh6T__button_Ury3tc, .hero .button { background: #1A1208 !important; color: white !important; border-radius: 100px !important; padding: 16px 40px !important; font-weight: 600 !important; font-size: 15px !important; transition: background 0.3s, transform 0.2s !important; min-width: 200px !important; } .button--AaDJENFBZR2pPSnh6T__button_Ury3tc:hover { background: #C4572A !important; transform: translateY(-1px) !important; } /* =========================================== 8. USP BAR – levering, fragt, priser =========================================== */ /* Varm baggrund på USP-bar */ .section--page-width .color-scheme-3 { background: #F5EDE3 !important; } /* =========================================== 9. PRODUKTKORT – ensartet design =========================================== */ /* Kort-container – border kun på ydre grid-item */ .product-card__content { border: none !important; border-radius: 12px !important; overflow: hidden !important; transition: transform 0.3s, box-shadow 0.3s !important; } /* Ydre produktkort-ramme – én enkelt border */ .product-grid__item { border: 1px solid rgba(229, 221, 212, 0.6) !important; border-radius: 14px !important; overflow: hidden !important; background: white !important; } .product-card:hover .product-card__content { transform: translateY(-4px) !important; box-shadow: 0 8px 32px rgba(44,24,16,0.12) !important; } /* Produktbillede zoom on hover */ .product-media__image { transition: transform 0.5s ease !important; } .product-card:hover .product-media__image { transform: scale(1.05) !important; } /* Produkt titel */ .product-card .text-block p { font-size: 13px !important; font-weight: 600 !important; line-height: 1.4 !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; word-break: break-word !important; overflow-wrap: anywhere !important; } /* Sørg for at produktkort ikke overflower grid-kolonnen */ .product-card, .product-grid__item { min-width: 0 !important; } .product-card__content { min-width: 0 !important; overflow: visible !important; } /* Pris styling */ .price { font-weight: 700 !important; color: #1A1208 !important; } .compare-at-price { color: #9A8E80 !important; } /* Tilbud badge */ .product-badges__badge { background: #C4572A !important; color: white !important; border-radius: 100px !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.03em !important; } /* Stop madspild badge (grøn) */ .badge-madspild { background: #2D8B4E !important; color: white !important; border-radius: 100px !important; } /* Tilføj til kurv knap */ .add-to-cart-button { background: #1A1208 !important; color: white !important; border-radius: 6px !important; font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-weight: 600 !important; transition: background 0.2s !important; } .add-to-cart-button:hover { background: #C4572A !important; } /* Quantity selector */ .quantity-selector { border: 1.5px solid #E5DDD4 !important; border-radius: 6px !important; } /* =========================================== 10. KATEGORI-KORT – kompakte kort med afrundede billeder =========================================== */ /* Reducer afstanden mellem kategorikort */ [data-testid="collections-list-grid"].resource-list--grid { --resource-list-column-gap-desktop: 16px !important; } /* Kategori-kort: centreret med border */ [id*="collection_list_fB6qGE"] .collection-card { border: 1.5px solid #E5DDD4 !important; border-radius: 12px !important; transition: border-color 0.2s, transform 0.2s !important; text-align: center !important; background: white !important; } [id*="collection_list_fB6qGE"] .collection-card:hover { border-color: #8B6F47 !important; transform: translateY(-2px) !important; } /* Kategori-billeder: vis fuld størrelse i kortet, ikke klippet rundt */ [id*="collection_list_fB6qGE"] .collection-card__image { padding: 12px !important; } [id*="collection_list_fB6qGE"] .image-block__image { border-radius: 8px !important; object-fit: contain !important; } /* Kategori-navn styling */ [id*="collection_list_fB6qGE"] .collection-card__content { padding-bottom: 12px !important; } [id*="collection_list_fB6qGE"] .collection-card__content p { font-size: 12px !important; font-weight: 600 !important; } /* =========================================== 11. LANDE-KORT – rektangulære med gradient overlay =========================================== */ /* Lande-kort: ingen border, afrundede hjørner */ [id*="collection_list_mkyBjr"] .collection-card { border: none !important; border-radius: 12px !important; overflow: hidden !important; } /* Billeder: rektangulære */ [id*="collection_list_mkyBjr"] .collection-card__image, [id*="collection_list_mkyBjr"] .image-block { border-radius: 12px !important; overflow: hidden !important; } [id*="collection_list_mkyBjr"] .image-block__image { border-radius: 12px !important; aspect-ratio: 3/2 !important; object-fit: cover !important; transition: transform 0.5s ease !important; } [id*="collection_list_mkyBjr"] .collection-card:hover .image-block__image { transform: scale(1.05) !important; } /* Gradient overlay — sat på image-block som har position relative */ [id*="collection_list_mkyBjr"] .resource-image { position: relative !important; } [id*="collection_list_mkyBjr"] .resource-image::after { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: linear-gradient(to top, rgba(26,18,8,0.7) 0%, rgba(26,18,8,0.15) 35%, transparent 55%) !important; border-radius: 12px !important; pointer-events: none !important; z-index: 1 !important; display: block !important; } /* Land-navn: hvid tekst oven på billedet */ [id*="collection_list_mkyBjr"] .collection-card__content { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; padding: 16px 20px !important; z-index: 2 !important; } [id*="collection_list_mkyBjr"] .collection-card__content p, [id*="collection_list_mkyBjr"] .collection-card__content .text-block, [id*="collection_list_mkyBjr"] .collection-card__content h3, [id*="collection_list_mkyBjr"] .collection-card__content .h3 { color: white !important; --color: white !important; text-shadow: 0 1px 4px rgba(0,0,0,0.4) !important; } /* =========================================== 12. CLICK & COLLECT TEKST PÅ PRODUKTKORT =========================================== For at fjerne den gentagne "Spar 10% ved Click and Collect"-tekst fra hvert produktkort, skal du ændre det i tema-sektionerne. Gå til: Edit code → Sections Find den relevante product-list sektion og fjern/kommenter RTE-blokken med Click & Collect teksten. Alternativt kan du skjule den med CSS: =========================================== */ /* Skjul gentagende Click & Collect tekst på produktkort */ .product-card .rte-formatter[class*="text_Vd4YEi"], .product-card .rte-formatter[class*="text_Nbh3eY"], .product-card rte-formatter:last-of-type, .product-card .rte p:last-child { display: none !important; } /* Mere specifik: skjul enhver rte-blok i produktkort der nævner Click and Collect */ product-card rte-formatter.rte { display: none !important; } /* =========================================== 13. MARQUEE – finere styling =========================================== */ .custom-marquee { background: #FFF8F0 !important; border-bottom: 1px solid #E5DDD4 !important; } .marquee-text { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-weight: 500 !important; font-size: 13px !important; color: #8B6F47 !important; } /* Sæt marquee hastighed ned – 25s er standard, 50s er langsommere */ .custom-marquee .track { animation-duration: 50s !important; } /* =========================================== 14. FOOTER – mørk baggrund =========================================== */ /* Footer sektioner – brug footer-group som selector */ .shopify-section-group-footer-group .section-background { background: #1A1208 !important; } .shopify-section-group-footer-group .section, .shopify-section-group-footer-group .color-scheme-9a2a18f4-f4f2-45c6-9aaf-84c70e978dd8 { --color-background: rgb(26 18 8 / 1.0) !important; --color-background-rgb: 26 18 8 !important; --color-foreground: rgb(255 255 255 / 0.7) !important; --color-foreground-rgb: 255 255 255 !important; --color-foreground-heading: rgb(255 255 255 / 1.0) !important; --color-foreground-heading-rgb: 255 255 255 !important; background: #1A1208 !important; color: rgba(255,255,255,0.7) !important; } .shopify-section-group-footer-group h5, .shopify-section-group-footer-group h6, .shopify-section-group-footer-group strong { color: white !important; } .shopify-section-group-footer-group a { color: rgba(255,255,255,0.6) !important; } .shopify-section-group-footer-group a:hover { color: white !important; } .shopify-section-group-footer-group .social-icons__icon { color: rgba(255,255,255,0.5) !important; } .shopify-section-group-footer-group .utilities { border-color: rgba(255,255,255,0.1) !important; } /* Smiley-badge i footer – behold synlighed */ .shopify-section-group-footer-group img { mix-blend-mode: normal !important; } /* =========================================== 15. GENERELLE FORBEDRINGER =========================================== */ /* Glattere scroll */ html { scroll-behavior: smooth; } /* Bedre link hover på hele siden */ a { transition: color 0.2s !important; } /* Galleri arver afrunding fra kortet */ .card-gallery { overflow: hidden !important; } /* Sekundær knap styling */ .button-secondary { border-color: #E5DDD4 !important; border-radius: 100px !important; transition: all 0.2s !important; } .button-secondary:hover { border-color: #8B6F47 !important; background: #FFF8F0 !important; } @media screen and (max-width: 749px) { .product-card__content.product-grid__card { padding-bottom: 16px !important; } } } /* Antalvælger: centreret, knap fuld bredde */ .product-card .product-form-buttons { align-items: center !important; } .product-card .product-form-buttons .add-to-cart-button, .product-card .product-form-buttons > span { width: 100% !important; align-self: stretch !important; }