/* home-modern.css Kun overrides for forsiden når er satt. VIKTIG: Ikke overstyr .btn globalt – kun i header/hero. */ :root{ --kf-green: #0b6b43; --kf-green-2: #0a5f3c; --kf-accent: #f28c28; --kf-accent-2: #e27914; --kf-bg: var(--brand-bg); --kf-text: var(--brand-text); --kf-muted: var(--brand-muted); --radius-lg: 18px; --radius-md: 14px; --shadow: 0 12px 30px rgba(0,0,0,.10); } .kf-modern { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--kf-bg); color: var(--kf-text); } /* ===== TOPBAR (grønn som i mockup) ===== */ .kf-modern .kf-header{ background: var(--brand-green-dark); backdrop-filter: none; border-bottom: 0; } .kf-modern .kf-header__inner{ padding: 0.95rem 0; } .kf-modern .brand__logo{ background: rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); } .kf-modern .brand__name, .kf-modern .brand__tagline, .kf-modern .header-actions, .kf-modern .account-area__label{ color: #fff; } .kf-modern .brand__tagline{ color: rgba(255,255,255,0.8); } /* 🔥 HER ER FIXEN: Overstyr KUN knapper i header (ikke hele siden) */ .kf-modern .kf-header .nav-btn{ background: rgba(255,255,255,0.14); color: #fff; box-shadow: none; } .kf-modern .kf-header .nav-btn:hover, .kf-modern .kf-header .nav-btn:focus-visible{ transform: translateY(-1px); box-shadow: 0 12px 24px rgba(0,0,0,0.18); background: rgba(255,255,255,0.18); } .kf-modern .kf-header .nav-btn--secondary{ background: transparent; border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.95); } .kf-modern .kf-header .header-cart{ background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); color: #fff; } .kf-modern .kf-header .header-cart__count{ background: var(--kf-accent); } /* Skjul header-søk visuelt (men behold i DOM for app.js) */ .kf-modern .kf-modern-header__search{ position: absolute; left: -99999px; width: 1px; height: 1px; overflow: hidden; } /* ===== INTRO (kompakt) ===== */ .kf-modern .kf-modern-intro{ background: linear-gradient(135deg, rgba(0,153,68,0.08), rgba(0,153,68,0.02)); } .kf-modern .kf-modern-intro__inner{ padding: clamp(1.6rem, 3vw, 2.4rem) 0; } .kf-modern .kf-modern-intro__content{ display: grid; gap: 0.6rem; max-width: 720px; } .kf-modern .kf-modern-intro__eyebrow{ color: var(--brand-green-dark); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; } .kf-modern .kf-modern-intro__title{ color: var(--brand-green-dark); margin: 0; font-size: clamp(2rem, 3vw, 2.6rem); } .kf-modern .kf-modern-intro__desc{ color: var(--brand-muted); margin: 0; font-size: 1rem; } /* ===== SEKSJONER ===== */ .kf-modern .category-bar{ margin-top: 0.6rem; } .kf-modern .category-bar .section-title, .kf-modern .section-title{ color: var(--brand-green-dark); } .kf-modern .section-subtitle{ color: var(--brand-muted); } /* ===== FAST BUNNFILTER ===== */ .kf-modern .kf-modern-filterdock{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; background: linear-gradient(0deg, var(--brand-green-dark), #0b6b43); padding: 10px 0; box-shadow: 0 -14px 34px rgba(0,0,0,0.18); } .kf-modern .kf-modern-filterdock__inner{ display: grid; grid-template-columns: repeat(3, 1fr) auto auto; gap: 10px; align-items: center; } .kf-modern .kf-modern-filterdock__field select{ width: 100%; height: 48px; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); color: #fff; padding: 0 12px; outline: none; } .kf-modern .kf-modern-filterdock__field select option{ color: #111; } .kf-modern .kf-modern-filterdock__toggle{ display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); color: #fff; font-weight: 700; } .kf-modern .kf-modern-filterdock__cta{ height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border-radius: 999px; background: var(--kf-accent); color: #fff; font-weight: 800; text-decoration: none; white-space: nowrap; } .kf-modern .kf-modern-filterdock__cta:hover{ background: var(--kf-accent-2); } /* Gi plass nederst så innhold ikke havner bak bunnbaren */ .kf-modern .kf-modern-main{ padding-bottom: 88px; } .kf-modern .kf-modern-footer{ padding-bottom: 110px; } /* ===== RESPONSIVE ===== */ @media (max-width: 980px){ .kf-modern .kf-modern-filterdock__inner{ grid-template-columns: 1fr 1fr; } .kf-modern .kf-modern-filterdock__cta{ grid-column: 1 / -1; } } @media (max-width: 520px){ .kf-modern .kf-modern-intro__inner{ padding: 1.4rem 0; } }