/* ============================================================ Urban Hald — Landingsside CSS Scope: #lp — gælder kun sider der bruger
Tilføj dette til Design → Skins → Skin specifikke styles ============================================================ */ #lp { font-family: 'Poppins', Arial, sans-serif; font-size: 13px; font-weight: 300; color: rgba(50,50,50,1); background: #fff; line-height: 1.5; } #lp * { box-sizing: border-box; margin: 0; padding: 0; } #lp a { color: inherit; text-decoration: none; } #lp img { max-width: 100%; height: auto; display: block; } /* --- KNAPPER --- */ #lp .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 35px; min-height: 35px; border-radius: 25px; font-family: 'Poppins', Arial, sans-serif; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; cursor: pointer; border: none; text-decoration: none; white-space: nowrap; transition: opacity 0.2s; } #lp .btn-dark { background: #000; color: #fff; } #lp .btn-dark:hover { background: rgba(70,70,70,1); } #lp .btn-light { background: rgb(227,227,227); color: #000; } #lp .btn-light:hover { background: #c8c8c8; } #lp .btn-outline { background: transparent; color: rgba(50,50,50,1); border: 1px solid rgba(50,50,50,1); } #lp .btn-outline:hover { opacity: 0.7; } /* --- LAYOUT --- */ #lp .lp-container, #lp .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } #lp section { padding: 70px 0; } #lp .lp-section-title, #lp .section-title { font-size: 24px; font-weight: 400; margin-bottom: 10px; } #lp .lp-section-sub, #lp .section-sub { font-size: 13px; color: rgba(50,50,50,1); margin-bottom: 40px; max-width: 600px; } /* --- HERO --- */ #lp .lp-hero, #lp .hero { background: #f1e7d9; padding: 0; min-height: 480px; display: flex; align-items: stretch; } #lp .lp-hero-inner, #lp .hero-inner { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; gap: 48px; align-items: center; min-height: 480px; } #lp .lp-hero-text, #lp .hero-text { padding: 56px 0; } #lp .lp-hero-label, #lp .label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(100,100,100,1); font-weight: 400; margin-bottom: 14px; display: block; } #lp .lp-hero h1, #lp .hero h1 { font-size: 28px; font-weight: 400; line-height: 1.2; color: rgba(50,50,50,1); margin-bottom: 14px; text-align: left; } #lp .lp-hero-sub, #lp .hero-sub { font-size: 14px; font-weight: 300; color: rgba(50,50,50,1); line-height: 1.7; margin-bottom: 28px; max-width: 480px; } #lp .lp-hero-ctas, #lp .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; } /* --- HERO BILLEDE ---*/ #lp .lp-hero-image, #lp .hero-image { display: flex; align-items: center; justify-content: center; padding: 40px 0; } #lp .lp-hero-image img, #lp .hero-image img { max-height: 380px; width: 100%; object-fit: contain; border-radius: 8px; } #lp .image-caption { font-size: 11px; margin-top: 10px; } @media (max-width: 768px) { #lp .hero-image .image-caption { padding: 0 24px 20px; } } /* --- HERO VIDEO --- */ #lp .lp-hero-video, #lp .hero-video { display: flex; align-items: center; justify-content: center; padding: 2px 0; } #lp .lp-hero-video video, #lp .hero-video video { max-height: 380px; width: 110%; object-fit: cover; border-radius: 8px; display: block; } #lp .lp-hero-video iframe, #lp .hero-video iframe { width: 100%; aspect-ratio: 16/9; border: none; border-radius: 8px; display: block; } /* --- STATS RIBBON --- */ #lp .lp-stats { background: #fff; border-top: 1px solid rgb(227,227,227); border-bottom: 1px solid rgb(227,227,227); padding: 0; } #lp .lp-stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 auto; } #lp .lp-stat { text-align: center; padding: 24px; border-right: 1px solid rgb(227,227,227); } #lp .lp-stat:last-child { border-right: none; } #lp .lp-stat-num { font-size: 18px; font-weight: 400; color: rgb(50, 50, 50); line-height: 1.2; display: block; text-transform: uppercase;} #lp .lp-stat-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.9px; color: rgba(100,100,100,1); margin-top: 4px; display: block; } /* --- KAMPAGNE BANNER --- */ #lp .lp-campaign { background: #375442; color: #fff; padding: 14px 24px; } #lp .lp-campaign-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; } #lp .lp-campaign-text { font-size: 13px; font-weight: 400; } #lp .lp-campaign-text strong { font-weight: 400; } #lp .lp-campaign .btn { padding: 7px 22px; min-height: 0; font-size: 11px; } @media (max-width: 768px) { #lp .lp-stats-inner { grid-template-columns: 1fr 1fr; } #lp .lp-stat:nth-child(2) { border-right: none; } #lp .lp-stat:nth-child(1), #lp .lp-stat:nth-child(2) { border-bottom: 1px solid rgb(227,227,227); } #lp .lp-stat { padding: 18px 16px; } #lp .lp-stat-num { font-size: 18px; } #lp .lp-campaign-inner { flex-direction: column; gap: 10px; text-align: center; } } /* --- PROBLEM --- */ #lp .lp-problem { background: #fff; } #lp .lp-problem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } #lp .lp-problem-card { background: #dadada; border-radius: 5px; padding: 24px; border-left: 3px solid #375442; } #lp .lp-problem-card h3 { font-size: 13px; font-weight: 600; margin-bottom: 8px; } #lp .lp-problem-card p { font-size: 12px; color: rgba(50,50,50,1); line-height: 1.6; margin: 0; } /* --- INTRO --- */ #lp .lp-intro { background: #f1e7d9; } #lp .lp-intro-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } #lp .lp-intro-text h2 { font-size: 24px; font-weight: 400; margin-bottom: 16px; } #lp .lp-intro-text p { color: rgba(50,50,50,1); line-height: 1.7; margin-bottom: 12px; font-size: 13px; } #lp .lp-highlights { list-style: none; margin-top: 20px; padding: 0; } #lp .lp-highlights li { padding: 8px 0; display: flex; align-items: flex-start; gap: 10px; font-size: 13px; } #lp .lp-highlights li:last-child { border-bottom: none; } #lp .lp-highlights .check { color: #375442; font-weight: 400; flex-shrink: 0; } #lp .lp-intro-image img { width: 100%; border-radius: 5px; object-fit: cover; aspect-ratio: 4/3; } /* --- PLUGLY KARRUSEL --- */ #lp #bp_ProductCarousel_851 * { margin: revert; box-sizing: revert; } /* --- PRODUCTS --- */ #lp .lp-products { background: #fff; } #lp .lp-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } #lp .lp-product-card { border: 1px solid rgb(227,227,227); border-radius: 5px; overflow: hidden; transition: box-shadow 0.2s; display: flex; flex-direction: column; } #lp .lp-product-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); } #lp .lp-product-img { background: #fff !important; padding: 20px !important; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } #lp .lp-product-img img { max-height: 140px; object-fit: contain; margin: 0 auto; } #lp .lp-product-info { padding: 16px; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } #lp .lp-product-label { display: none; } #lp .lp-product-info h3 { font-size: 13px; font-weight: 500; margin-bottom: 6px; line-height: 1.4; flex: 1; } #lp .lp-product-price { font-size: 18px; font-weight: 400; margin-bottom: 12px; } #lp .lp-product-price span { font-size: 12px; font-weight: 300; color: rgba(50,50,50,1); } #lp .lp-product-badge { display: inline-block; background: #edf5f1; color: #375442; font-size: 10px; padding: 3px 10px; border-radius: 25px; margin-bottom: 10px; border: 1px solid #cee5d9; font-weight: 400; } /* --- BENEFITS --- */ #lp .lp-benefits { background: #375442; color: #fff; } #lp .lp-benefits .lp-section-title { color: #fff; } #lp .lp-benefits .lp-section-sub { color: rgba(255,255,255,0.6); } #lp .lp-benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } #lp .lp-benefit-item { padding: 8px 0; } #lp .lp-benefit-icon { width: 44px; height: 44px; background: rgba(255,255,255,0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } #lp .lp-benefit-icon svg { width: 20px; height: 20px; stroke: rgba(255,255,255,0.85); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } #lp .lp-benefit-item h3 { font-size: 14px; font-weight: 500; margin-bottom: 6px; color: #fff; } #lp .lp-benefit-item p { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.7; } /* --- VIDEO --- */ #lp .lp-video { background: #f1e7d9; } #lp .lp-video-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } #lp .lp-video-text h2 { font-size: 24px; font-weight: 400; margin-bottom: 14px; } #lp .lp-video-text p { color: rgba(50,50,50,1); line-height: 1.7; font-size: 13px; margin-bottom: 20px; } #lp .lp-video-main { border-radius: 5px; overflow: hidden; aspect-ratio: 16/9; margin-bottom: 12px; } #lp .lp-video-main iframe { width: 100%; height: 100%; border: none; } #lp .lp-video-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } #lp .lp-video-thumb { border-radius: 5px; overflow: hidden; position: relative; display: block; aspect-ratio: 16/9; } #lp .lp-video-thumb img { width: 100%; height: 100%; object-fit: cover; } /* --- TOOLS --- */ #lp .lp-tools { background: #fff; } #lp .lp-tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } #lp .lp-tool-card { border-radius: 5px; overflow: hidden; text-align: center; transition: box-shadow 0.2s, transform 0.2s; text-decoration: none; color: inherit; display: block; cursor: pointer; } #lp .lp-tool-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-2px); color: inherit; } #lp .lp-tool-img { aspect-ratio: 3/2; overflow: hidden; width: 100%; } #lp .lp-tool-img img { width: 100%; height: 100%; object-fit: cover; display: block; } #lp .lp-tool-info { padding: 16px; } #lp .lp-tool-info h3 { font-size: 14px; font-weight: 500; margin-bottom: 5px; } #lp .lp-tool-info p { font-size: 12px; color: rgba(50,50,50,1); margin-bottom: 12px; line-height: 1.5; } /* --- FAQ --- */ #lp .lp-faq { background: #cee5d9; } #lp .lp-faq-list { max-width: 800px; overflow: hidden; } #lp .lp-faq-item { border-bottom: 1px solid rgba(55,84,66,0.2); overflow: hidden; } #lp .lp-faq-q { width: 100%; background: none; border: none; text-align: left; padding: 16px 0; font-family: 'Poppins', Arial, sans-serif; font-size: 13px; font-weight: 500; color: rgba(50,50,50,1); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; white-space: normal !important; min-width: 0; max-width: 100%; box-sizing: border-box; } #lp .lp-faq-q .lp-faq-text { flex: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; } #lp .lp-faq-q .lp-faq-arrow { color: #375442; flex-shrink: 0; transition: transform 0.25s; font-size: 18px; font-weight: 300; } #lp .lp-faq-q.open .lp-faq-arrow { transform: rotate(45deg); } #lp .lp-faq-a { display: none; padding: 0 0 16px; font-size: 13px; color: rgba(50,50,50,1); line-height: 1.7; } #lp .lp-faq-a.open { display: block; } /* --- FAQ MORE LINK --- */ #lp .lp-faq-more { margin-top: 24px; } #lp .lp-faq-more a { font-size: 13px; font-weight: 500; color: #375442; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } #lp .lp-faq-more a:hover { text-decoration: underline; } /* --- STEPS --- */ #lp .lp-steps { background: #f8f5f1; } #lp .lp-steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; margin-top: 40px; } #lp .lp-steps-grid::before { content: ''; position: absolute; top: 20px; left: 44px; right: 44px; height: 1px; background: rgba(55,84,66,0.2); z-index: 0; } #lp .lp-step { position: relative; z-index: 1; } #lp .lp-step-num { width: 40px; height: 40px; border-radius: 50%; background: #375442; color: #fff; font-size: 15px; font-weight: 500; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-family: 'Poppins', Arial, sans-serif; } #lp .lp-step-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; } #lp .lp-step-desc { font-size: 13px; color: rgba(50,50,50,0.75); line-height: 1.6; } /* --- LEAD CTA --- */ #lp .lp-lead { background: #f1e7d9; } #lp .lp-lead-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } #lp .lp-lead-text h2 { font-size: 24px; font-weight: 400; margin-bottom: 10px; } #lp .lp-lead-text p { color: rgba(50,50,50,1); line-height: 1.7; font-size: 13px; margin-bottom: 20px; } #lp .lp-lead-form { display: flex; flex-direction: column; gap: 10px; } #lp .lp-lead-form input { padding: 0 20px; height: 42px; border-radius: 25px; border: 1px solid rgb(227,227,227); font-family: 'Poppins', Arial, sans-serif; font-size: 13px; font-weight: 300; outline: none; } #lp .lp-lead-form input:focus { border-color: #cee5d9; } #lp .lp-disclaimer { font-size: 11px; color: rgba(150,150,150,1); margin-top: 6px; text-align: center; } /* --- EXPERT --- */ #lp .lp-expert { background: #fff; } #lp .lp-expert-inner { display: grid; grid-template-columns: 1fr 360px; gap: 60px; align-items: center; } #lp .lp-expert-text h2 { font-size: 24px; font-weight: 400; margin-bottom: 14px; } #lp .lp-expert-text p { color: rgba(50,50,50,1); line-height: 1.7; font-size: 13px; margin-bottom: 28px; max-width: 480px; } #lp .lp-expert-ctas { display: flex; gap: 14px; flex-wrap: wrap; } #lp .lp-expert-photo img { width: 100%; border-radius: 5px; aspect-ratio: 4/3; object-fit: cover; } /* --- RESPONSIVE --- */ @media (max-width: 1099px) { #lp .lp-problem-grid { grid-template-columns: repeat(2, 1fr); } #lp .lp-products-grid { grid-template-columns: repeat(2, 1fr); } #lp .lp-benefits-grid { grid-template-columns: repeat(2, 1fr); } #lp .lp-tools-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { #lp section { padding: 50px 0; } #lp .lp-hero-inner, #lp .hero-inner { grid-template-columns: 1fr; min-height: auto; gap: 0; } #lp .lp-hero-image, #lp .hero-image { display: block; padding: 0; margin: 0 -24px; order: -1; } #lp .lp-hero-image img, #lp .hero-image img { border-radius: 0; max-height: 260px; width: 100%; object-fit: cover; } #lp .lp-hero-video, #lp .hero-video { display: flex; padding: 0; margin: 0 -24px; } #lp .lp-hero-video video, #lp .hero-video video { border-radius: 0; max-height: 260px; width: 100%; object-fit: cover; } #lp .lp-hero-video iframe, #lp .hero-video iframe { border-radius: 0; } #lp .lp-hero-text, #lp .hero-text { padding: 40px 0; } #lp .lp-problem-grid { grid-template-columns: 1fr 1fr; } #lp .lp-intro-inner { grid-template-columns: 1fr; } #lp .lp-products-grid { grid-template-columns: 1fr 1fr; } #lp .lp-benefits-grid { grid-template-columns: 1fr; gap: 20px; } #lp .lp-video-inner { grid-template-columns: 1fr; } #lp .lp-video-thumbs { grid-template-columns: 1fr; } #lp .lp-tools-grid { grid-template-columns: 1fr; } #lp .lp-tool-card { display: grid; grid-template-columns: 110px 1fr; text-align: left; align-items: start; gap: 0; } #lp .lp-tool-img { aspect-ratio: 1/1; height: 110px; width: 110px; flex-shrink: 0; } #lp .lp-tool-info { padding-top: 0; } #lp .lp-lead-inner { grid-template-columns: 1fr; gap: 32px; } #lp .lp-expert-inner { grid-template-columns: 1fr; gap: 32px; } #lp .lp-expert-photo { margin: 0 -24px; } #lp .lp-expert-photo img { border-radius: 0; max-height: 260px; width: 100%; object-fit: cover; aspect-ratio: unset; } #lp .lp-steps-grid { grid-template-columns: 1fr 1fr; gap: 24px; } #lp .lp-steps-grid::before { display: none; } } /* ===== V2: TILLAEG TIL MICROCEMENT PAA BADEVAERELSE ===== */ /* Urban-Hald badeværelse: tilføjelser nederst i lp-final-v2.css. Wrapper:
. Font, knapper, container, hero, kort, stats og grundlayout genbruges ovenfra. Eksisterende sider uden class="lp-bath" rammes ikke af disse tilføjelser. */ #lp.lp-bath { overflow-wrap: break-word; } #lp.lp-bath section { scroll-margin-top: 20px; } #lp.lp-bath a:focus-visible, #lp.lp-bath summary:focus-visible { outline: 2px solid #375442; outline-offset: 4px; } #lp.lp-bath p + p { margin-top: 12px; } #lp.lp-bath .btn { white-space: normal; text-align: center; max-width: 100%; } #lp.lp-bath .lp-intro-inner > *, #lp.lp-bath .lp-hero-inner > * { min-width: 0; } #lp.lp-bath .lp-hero-image { display: block; } #lp.lp-bath .lp-hero-image img { object-fit: cover; } #lp.lp-bath .bath-crumbs { font-size: 11px; margin-bottom: 28px; } #lp.lp-bath .bath-crumbs a, #lp.lp-bath .bath-text-link, #lp.lp-bath p a { text-decoration: underline; text-underline-offset: 3px; } #lp.lp-bath .bath-caption { font-size: 11px; margin-top: 10px; } #lp.lp-bath .bath-jump { display: flex; flex-wrap: wrap; gap: 12px 26px; padding-top: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--grey); } #lp.lp-bath .bath-jump a:hover { text-decoration: underline; } #lp.lp-bath .bath-intro { max-width: 830px; } #lp.lp-bath .bath-grid { margin-top: 36px; } #lp.lp-bath .bath-list:not(.lp-highlights) { margin: 18px 0; padding-left: 20px; } #lp.lp-bath .bath-list:not(.lp-highlights) li { padding: 5px 0; } #lp.lp-bath .bath-note { padding: 24px; border-left: 3px solid #375442; background: #f1e7d9; margin-top: 24px; } #lp.lp-bath .bath-note h3 { margin-bottom: 8px; font-size: 13px; line-height: 1.4; font-weight: 700; } #lp.lp-bath .bath-price { background: #f1e7d9; } #lp.lp-bath .bath-price-title { font-size: 28px; font-weight: 400; line-height: 1.2; margin-bottom: 18px; } #lp.lp-bath .lp-hero-ctas { margin-top: 24px; } #lp.lp-bath .lp-hero .lp-hero-ctas { margin-top: 0; } #lp.lp-bath .lp-product-info h3 { flex: initial; } #lp.lp-bath .lp-product-img img { max-height: none; width: 100%; height: auto; } #lp.lp-bath .lp-product-info .lp-hero-ctas { margin-top: auto; padding-top: 22px; } #lp.lp-bath .lp-product-info .btn { padding-left: 18px; padding-right: 18px; } #lp.lp-bath .bath-small { font-size: 12px; } #lp.lp-bath .bath-gallery img { width: 100%; height: 340px; object-fit: cover; border-radius: 5px; } #lp.lp-bath .bath-gallery h3 { margin: 18px 0 8px; font-size: 18px; } #lp.lp-bath .bath-steps { grid-template-columns: 1fr 1fr; } #lp.lp-bath .bath-steps::before { display: none; } #lp.lp-bath .bath-timing { margin: 35px 0 0; padding: 28px; background: #f1e7d9; display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; } #lp.lp-bath .bath-timing strong { display: block; font-size: 26px; font-weight: 400; } #lp.lp-bath .bath-resources a { display: flex; justify-content: space-between; gap: 15px; padding: 20px 0; border-bottom: 1px solid var(--grey); } #lp.lp-bath .bath-resources a:hover { text-decoration: underline; } #lp.lp-bath .bath-text-link { display: inline-block; margin-top: 24px; } /* Native details genbruger FAQ-design uden at kræve lpFaq() eller globale JS-events. */ #lp.lp-bath .lp-faq-q { list-style: none; } #lp.lp-bath .lp-faq-q::-webkit-details-marker { display: none; } #lp.lp-bath details[open] > .lp-faq-a { display: block; } #lp.lp-bath details[open] .lp-faq-arrow { transform: rotate(45deg); } #lp.lp-bath .lp-faq-list { width: 100%; } #lp.lp-bath .lp-faq .lp-intro-inner { align-items: start; } #lp.lp-bath .bath-end { max-width: 800px; margin: auto; text-align: center; } #lp.lp-bath .bath-end .lp-hero-ctas { justify-content: center; margin-top: 28px; } #lp.lp-bath .bath-footer { padding-top: 30px; font-size: 11px; } @media (max-width: 768px) { #lp.lp-bath .lp-hero { padding: 0; } #lp.lp-bath .lp-hero-image .bath-caption { padding: 0 24px 20px; } #lp.lp-bath .bath-timing { grid-template-columns: 1fr; } } @media (max-width: 480px) { #lp.lp-bath .bath-steps { grid-template-columns: 1fr; } #lp.lp-bath .lp-hero-ctas .btn { width: 100%; } #lp.lp-bath .bath-gallery img { height: 300px; } } @media (prefers-reduced-motion: reduce) { #lp.lp-bath *, #lp.lp-bath *::before, #lp.lp-bath *::after { transition: none; } } /* Før/efter og video — kun badeværelsessiden. */ #lp.lp-bath .bath-transform { background:#fff; } #lp.lp-bath .bath-comparison-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:28px; } #lp.lp-bath .bath-compare-frame { position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:5px; background:#f1e7d9; } #lp.lp-bath .bath-compare-frame > img { display:block; width:100%; height:100%; object-fit:cover; } #lp.lp-bath .bath-compare-frame .bath-before { position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--reveal)) 0 0); } #lp.lp-bath .bath-compare-label { position:absolute; top:16px; left:16px; padding:6px 12px; background:#fff; color:#222; font-size:12px; font-weight:700; border-radius:3px; } #lp.lp-bath .bath-after-label { left:auto; right:16px; } #lp.lp-bath .bath-compare-line { position:absolute; left:var(--reveal); top:0; bottom:0; width:2px; background:#fff; transform:translateX(-50%); pointer-events:none; } #lp.lp-bath .bath-compare-line span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:white; color:#375442; font-size:24px; box-shadow:0 2px 12px #0003; } #lp.lp-bath .bath-compare-frame input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; touch-action:pan-y; } #lp.lp-bath .bath-compare-frame:focus-within { outline:3px solid #375442; outline-offset:4px; } #lp.lp-bath .bath-comparison h3 { font-size:16px; font-weight:700; margin-top:16px; } #lp.lp-bath .bath-video-row { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-top:40px; padding-top:36px; border-top:1px solid #ddd; } #lp.lp-bath .bath-video-row h3 { font-size:22px; line-height:1.35; margin:12px 0; } #lp.lp-bath .bath-video { position:relative; aspect-ratio:16/9; background:#375442; border-radius:5px; overflow:hidden; } #lp.lp-bath .bath-video iframe { width:100%; height:100%; border:0; display:block; } #lp.lp-bath .bath-video [hidden] { display:none; } #lp.lp-bath .bath-video-play { width:100%; height:100%; padding:24px; border:0; color:white; background:#375442; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; font:inherit; } #lp.lp-bath .bath-video-play:hover { background:#294231; } #lp.lp-bath .bath-video-play:focus-visible { outline:3px solid white; outline-offset:-6px; } #lp.lp-bath .bath-play-icon { display:grid; place-items:center; width:56px; height:56px; border:1px solid #fff9; border-radius:50%; font-size:22px; } #lp.lp-bath .bath-video-play small { font-size:11px; } @media(max-width:768px) { #lp.lp-bath .bath-comparison-grid, #lp.lp-bath .bath-video-row { grid-template-columns:1fr; gap:28px; } #lp.lp-bath .bath-compare-frame { aspect-ratio:1; } } /* --- SEKTION: kompakt variant (fx en boks lige før en vareliste) --- */ #lp section.lp-compact { padding: 40px 0; } #lp .lp-compact-title { font-size: 18px; font-weight: 400; margin-bottom: 20px; } /* --- GRID-MODIFIERS: overstyr antal kolonner på eksisterende grids --- */ /* Virker på lp-problem-grid, lp-tools-grid, lp-benefits-grid, lp-products-grid */ #lp .lp-cols-2 { grid-template-columns: repeat(2, 1fr); } #lp .lp-cols-3 { grid-template-columns: repeat(3, 1fr); } #lp .lp-cols-4 { grid-template-columns: repeat(4, 1fr); } /* --- SAMMENLIGNING: to valg side om side, det ene fremhævet --- */ #lp .lp-compare-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; } #lp .lp-compare-grid.is-equal { grid-template-columns: 1fr 1fr; } #lp .lp-compare-card { border-radius: 5px; padding: 24px; border: 1px solid rgb(227,227,227); display: flex; flex-direction: column; min-width: 0; } #lp .lp-compare-card.is-featured { background: #f1e7d9; border-color: #f1e7d9; border-left: 3px solid #375442; } #lp .lp-compare-card h3 { font-size: 13px; font-weight: 600; margin-bottom: 4px; } #lp .lp-compare-card .lp-highlights { margin-top: 8px; flex: 1; } #lp .lp-compare-card .lp-highlights li { padding: 5px 0; } /* --- TEKSTLINK med pil, grøn --- */ #lp .lp-text-link { display: inline-block; margin-top: 14px; font-weight: 500; color: #375442; } #lp .lp-text-link:hover { text-decoration: underline; } /* --- EYEBROW: lille label over en overskrift (mål, kategori o.l.) --- */ #lp .lp-eyebrow { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: rgba(100,100,100,1); margin-bottom: 6px; } /* --- KORT-VARIANTER --- */ /* Tool-kort uden link: ingen hover, venstrestillet tekst, billede over tekst på mobil */ #lp .lp-tool-card.is-static { cursor: default; } #lp .lp-tool-card.is-static:hover { box-shadow: none; transform: none; } #lp .lp-tool-card.is-static .lp-tool-info { text-align: left; } #lp .lp-tool-card.is-static .lp-tool-info p { margin-bottom: 0; } /* Problem-kort på farvet baggrund */ #lp .lp-problem-card.is-light { background: #fff; } /* Simpel liste inde i et kort */ #lp .lp-card-list { list-style: none; margin-top: 6px; } #lp .lp-card-list li { padding: 3px 0; font-size: 13px; } #lp .lp-card-list small { font-size: 12px; color: rgba(100,100,100,1); } /* --- NOTE: fremhævet bemærkning med grøn kant --- */ #lp .lp-note { padding: 24px; border-left: 3px solid #375442; background: #f1e7d9; margin-top: 24px; } #lp .lp-note h3 { font-size: 13px; font-weight: 600; margin-bottom: 8px; } #lp .lp-intro .lp-note { background: #fff; } /* --- KNAPRÆKKE uden for hero --- */ #lp .lp-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; } #lp .lp-ctas .btn { white-space: normal; text-align: center; max-width: 100%; } @media (max-width: 1099px) { #lp .lp-cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { #lp section.lp-compact { padding: 30px 0; } #lp .lp-cols-2, #lp .lp-cols-3, #lp .lp-cols-4, #lp .lp-compare-grid, #lp .lp-compare-grid.is-equal { grid-template-columns: 1fr; } #lp .lp-tool-card.is-static { display: block; } #lp .lp-tool-card.is-static .lp-tool-img { width: 100%; height: auto; aspect-ratio: 3/2; } #lp .lp-tool-card.is-static .lp-tool-info { padding-top: 16px; } } @media (max-width: 480px) { #lp .lp-ctas .btn { width: 100%; } }