/* ISBAT design-system migration target. */ /* === Migrated from WPCode 1009947 ISHELLA V2.1 base dark premium CSS === */ /* === BASE === */ /* ========================================================================== ISHELLA V2.1 — Dark Premium Design System base.css — Design tokens, reset, grid, utilities Isbaneteknikk AS · isbaneteknikk.no ========================================================================== */ /* ========================================================================== SCOPED RESET ========================================================================== */ /* Keep the shared nav sticky by preventing page-level inline body styles from turning into a scroll container. Exclude known lock states that intentionally use overflow to freeze the page. */ body:not(.isbat-simple-nav-menu-open):not(.isbat-kpop-open):not(.isbat-lb-open):not(.wc-modal--open):not(.wc-block-product-gallery-modal-open) { overflow-x: clip !important; overflow-y: visible !important; } .elementor-widget-html *, .elementor-widget-html *::before, .elementor-widget-html *::after { margin: 0; padding: 0; box-sizing: border-box; } .elementor-widget-html { color: var(--text-primary); background-color: var(--bg-deep); font-family: var(--font-body); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x:hidden; max-width:100vw; } .elementor-widget-html img { max-width: 100%; height: auto; display: block; } .elementor-widget-html a { text-decoration: none; color: inherit; transition: all .3s var(--ease); } .elementor-widget-html ul { list-style: none; } /* Headings */ .elementor-widget-html h1, .elementor-widget-html h2, .elementor-widget-html h3, .elementor-widget-html h4 { font-family: var(--font-heading); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--text-primary); } /* ========================================================================== SKIP LINK ========================================================================== */ .sv-skip-link { position: absolute; top: -100%; left: 16px; z-index: 9999; padding: 12px 24px; background: var(--brand-red); color: #fff; font-weight: 700; border-radius: var(--radius-sm); transition: top .3s; } .sv-skip-link:focus { top: 16px; } /* ========================================================================== SCROLL PROGRESS BAR ========================================================================== */ .sv-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--brand-red), var(--ice-blue), var(--emerald)); z-index: 9999; pointer-events: none; transition: width .1s linear; } /* ========================================================================== CONTAINER ========================================================================== */ .sv-container { max-width: 1440px; margin: 0 auto; padding: 0 24px; } @media(min-width: 768px) { .sv-container { padding: 0 48px; } } @media(min-width: 1200px) { .sv-container { padding: 0 56px; } } /* ========================================================================== AURORA BLOBS (parametric — set opacity per page via inline style or page class) ========================================================================== */ .sv-orb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(140px);opacity:.015} .sv-orb-1{width:700px;height:700px;background:var(--ice-blue);top:-200px;right:-250px} .sv-orb-2{width:600px;height:600px;background:var(--ice-blue);bottom:30%;left:-200px} .sv-aurora-3 { width: 400px; height: 400px; background: var(--emerald); top: 50%; right: -180px; animation: svAuroraFloat 25s ease-in-out infinite alternate; } /* ========================================================================== FILM GRAIN ========================================================================== */ .sv-grain { position: absolute; inset: 0; z-index: 9998; pointer-events: none; opacity: .006; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px; } /* ========================================================================== SECTIONS ========================================================================== */ .sv-section { position: relative; z-index: 1; padding: var(--space-section-y) 0; } .sv-section--alt { background: var(--bg-surface); } /* Section Label */ .sv-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: var(--v24-fs-xxs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-red); margin-bottom: 14px; } .sv-label::before { content: ''; width: 22px; height: 2px; background: var(--brand-red); transition: width .5s var(--ease); } .sv-label--center { justify-content: center; } /* Section Title */ .sv-title { font-size: var(--v24-fs-3xl); margin-bottom: 16px; } .sv-title .accent { color: var(--ice-blue); } .sv-title .accent-red { color: var(--brand-red); } /* Section Description */ .sv-desc { font-size: var(--v24-fs-md); color: var(--text-secondary); max-width: 640px; line-height: 1.75; } /* Section Header (centered) */ .sv-header { text-align: center; margin-bottom: 60px; } .sv-header .sv-desc { margin: 0 auto; } .sv-section-cta { text-align: center; margin-top: 52px; } .sv-btn-group { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 32px; } /* ========================================================================== DIVIDER ========================================================================== */ .sv-divider { height: 1px; border: none; margin: 0; background: linear-gradient(90deg, transparent, rgba(56,189,248,.12) 20%, rgba(255,0,51,.08) 50%, rgba(56,189,248,.12) 80%, transparent); } /* ========================================================================== SCROLL REVEAL ========================================================================== */ .sv-reveal { opacity: 0; transform: translateY(36px); transition: opacity .8s var(--ease-expo), transform .8s var(--ease-expo); } .sv-reveal.visible { opacity: 1; transform: none; } .sv-reveal-left { opacity: 0; transform: translateX(-36px); transition: opacity .8s var(--ease-expo), transform .8s var(--ease-expo); } .sv-reveal-left.visible { opacity: 1; transform: none; } .sv-reveal-right { opacity: 0; transform: translateX(36px); transition: opacity .8s var(--ease-expo), transform .8s var(--ease-expo); } .sv-reveal-right.visible { opacity: 1; transform: none; } .sv-d1 { transition-delay: .06s; } .sv-d2 { transition-delay: .12s; } .sv-d3 { transition-delay: .18s; } .sv-d4 { transition-delay: .24s; } .sv-d5 { transition-delay: .30s; } .sv-d6 { transition-delay: .36s; } /* ========================================================================== SHIMMER (lazy images) ========================================================================== */ @keyframes svShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .elementor-widget-html img[loading="lazy"] { background: linear-gradient(90deg, var(--bg-card) 25%, #1e293b 50%, var(--bg-card) 75%); background-size: 200% 100%; animation: svShimmer 1.5s infinite; } .elementor-widget-html img[loading="lazy"][src] { animation: none; background: none; } /* ========================================================================== FOCUS STATES ========================================================================== */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ice-blue); outline-offset: 2px; } /* ========================================================================== UTILITIES ========================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================================== REDUCED MOTION ========================================================================== */ @media(prefers-reduced-motion: reduce) { .sv-reveal, .sv-reveal-left, .sv-reveal-right { opacity: 1; transform: none; transition: none; } .elementor-widget-html * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .sv-aurora, .sv-grain { display: none; } } /* ========================================================================== RESPONSIVE BASE ========================================================================== */ @media(max-width: 768px) { .sv-section { padding: 72px 0; } .sv-header { margin-bottom: 40px; } .sv-btn-group { flex-direction: column; } .sv-btn-group .sv-btn { width: 100%; max-width: 320px; justify-content: center; text-align: center; } } /* === COMPONENTS === */ /* ========================================================================== ISHELLA V2.1 — Shared Components components.css — Buttons, hero, trust bar, FAQ, CTA, cards, breadcrumb Isbaneteknikk AS · isbaneteknikk.no ========================================================================== */ /* ========================================================================== BUTTONS ========================================================================== */ .sv-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 32px; font-family: var(--font-heading); font-size: var(--v24-fs-sm); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: var(--radius-full); border: none; cursor: pointer; transition: all .35s var(--ease); position: relative; overflow: hidden; } .sv-btn i, .sv-btn svg { font-size: var(--v24-fs-xs); transition: transform .3s var(--ease); } .sv-btn:hover i, .sv-btn:hover svg { transform: translateX(3px); } .sv-btn--primary{background:rgba(255,0,51,.14);color:#fff;border:1px solid rgba(255,0,51,.48);backdrop-filter:blur(8px)} .sv-btn--primary:hover{transform:translateY(-2px);border-color:rgba(255,64,102,.72);box-shadow:0 0 0 1px rgba(255,64,102,.35) inset,0 0 22px rgba(255,0,51,.32)} .sv-btn--ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--border-subtle); } .sv-btn--ghost:hover { border-color: var(--ice-blue); color: var(--ice-blue); background: rgba(56,189,248,.05); } .sv-btn--hero-ice { background: linear-gradient(135deg, rgba(56,189,248,.42) 0%, rgba(0,51,153,.72) 100%); color: #fff; border: 1px solid rgba(56,189,248,.5); box-shadow: 0 4px 24px rgba(56,189,248,.22), 0 0 0 1px rgba(255,255,255,.06); } .sv-btn--hero-ice:hover { transform: translateY(-3px); border-color: var(--ice-blue-light); box-shadow: 0 10px 36px rgba(56,189,248,.35), 0 0 0 1px rgba(56,189,248,.2); color: #fff; } .sv-btn--hero-ice::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.14) 50%, transparent 80%); transform: translateX(-110%); transition: transform .65s ease; pointer-events: none; } .sv-btn--hero-ice:hover::after { transform: translateX(110%); } .sv-btn--outline { background: rgba(255,255,255,.04); color: var(--text-primary); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .sv-btn--outline:hover { border-color: rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.08); transform: translateY(-3px); } .sv-btn--ice { background: rgba(56,189,248,.1); color: var(--ice-blue); border: 1px solid rgba(56,189,248,.2); } .sv-btn--ice:hover { background: rgba(56,189,248,.18); box-shadow: 0 8px 30px rgba(56,189,248,.15); } .sv-btn--lg { padding: 20px 48px; font-size: var(--v24-fs-sm); letter-spacing: .06em; } .sv-btn:focus-visible { outline: 2px solid var(--ice-blue); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(56,189,248,.15); } /* ========================================================================== BREADCRUMB ========================================================================== */ .sv-breadcrumb { padding: 20px 0; position: relative; z-index: 2; background: rgba(10,15,30,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); } .sv-breadcrumb-list { display: flex; align-items: center; gap: 8px; font-size: var(--v24-fs-xs); color: var(--text-muted); flex-wrap: wrap; } .sv-breadcrumb-list a:hover { color: var(--ice-blue); } .sv-breadcrumb-list .sep { opacity: .4; } .sv-breadcrumb-list .current { color: var(--text-primary); font-weight: 600; } /* Pill variant (used in godkjenninger hero) */ .sv-breadcrumb--pill { display: flex; align-items: center; gap: 8px; padding: 14px 20px; background: rgba(10,15,30,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); font-size: var(--v24-fs-xxs); font-weight: 600; color: var(--text-muted); margin-bottom: 24px; width: fit-content; } .sv-breadcrumb--pill a:hover { color: var(--ice-blue); } .sv-breadcrumb--pill .sep { opacity: .4; } /* ========================================================================== CREDENTIALS BAR (trust logos) ========================================================================== */ .sv-creds-bar { position: relative; z-index: 3; padding: 40px 0; background: var(--bg-surface); border-bottom: 1px solid rgba(255,255,255,.06); } .sv-hero-creds { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 32px); flex-wrap: wrap; } .sv-hero-cred { width: clamp(68px, 14vw, 88px); height: clamp(68px, 14vw, 88px); display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.95); border-radius: 14px; padding: 10px; box-shadow: 0 2px 14px rgba(0,0,0,.2); transition: transform .3s var(--ease); } .sv-hero-cred:hover { transform: scale(1.06); } .sv-hero-cred img { max-width: 100%; max-height: 100%; object-fit: contain; } /* ========================================================================== HERO — Base + variants ========================================================================== */ /* Shared hero elements */ .sv-hero-overlay { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 120% 100% at 50% 45%, rgba(2,6,23,.25) 0%, rgba(2,6,23,.6) 70%, rgba(2,6,23,.85) 100%), linear-gradient(180deg, var(--bg-deep) 0%, transparent 14%), linear-gradient(0deg, var(--bg-deep) 0%, transparent 40%); } .sv-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; background: rgba(255,0,51,.1); border: 1px solid rgba(255,0,51,.2); border-radius: var(--radius-full); font-size: var(--v24-fs-xxs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-red); margin-bottom: 24px; text-shadow: 0 1px 4px rgba(0,0,0,.5); } .sv-pulse-dot { width: 7px; height: 7px; background: var(--brand-red); border-radius: 50%; animation: svPulseDot 2s infinite; } @keyframes svPulseDot { 0%,100%{box-shadow:0 0 0 0 rgba(255,0,51,.4)} 50%{box-shadow:0 0 0 8px rgba(255,0,51,0)} } .sv-hero-subtitle { font-size: var(--v24-fs-md); color: var(--text-primary); margin-bottom: 32px; max-width: 540px; line-height: 1.85; opacity: .95; text-shadow: 0 1px 8px rgba(0,0,0,.6), 0 2px 16px rgba(0,0,0,.3); } .sv-hero-text { font-size: var(--v24-fs-md); color: #f0f4f8; margin-bottom: 40px; max-width: 540px; line-height: 1.85; text-shadow: 0 1px 8px rgba(0,0,0,.7), 0 2px 16px rgba(0,0,0,.4); } .sv-hero-cta { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } .sv-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; } /* Hero slide system (shared by all slider heroes) */ .sv-hero-bg { position: absolute; inset: 0; } .sv-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease-in-out; } .sv-hero-slide.active { opacity: 1; } .sv-hero-slide img { width: 100%; height: 100%; object-fit: cover; } /* Bottom fade */ .sv-hero-fade { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 150px; background: linear-gradient(0deg, var(--bg-deep) 0%, transparent 100%); pointer-events: none; z-index: 1; } /* Hero dots (om-oss style) */ .sv-hero-dots { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 8px; } .sv-hero-dot { width: 28px; height: 3px; border-radius: 2px; border: none; padding: 0; background: rgba(255,255,255,.2); cursor: pointer; transition: all .5s var(--ease-expo); } .sv-hero-dot.active { width: 48px; background: var(--brand-red); box-shadow: 0 0 12px rgba(255,0,51,.4); } /* ========================================================================== HERO — Home (100dvh, 8 slides, particles) ========================================================================== */ .sv-hero--home { position: relative; min-height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 140px 0 100px; } .sv-hero--home::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 150px; background: linear-gradient(0deg, var(--bg-deep) 0%, transparent 100%); pointer-events: none; z-index: 1; } .sv-hero--home .sv-hero-content { position: relative; z-index: 2; max-width: 780px; text-align: center; display: flex; flex-direction: column; align-items: center; } .sv-hero--home h1 { font-size: var(--v24-fs-4xl); font-weight: 900; margin-bottom: 20px; line-height: 1.12; color: #fff; letter-spacing: -.02em; text-shadow: 0 2px 16px rgba(0,0,0,.7), 0 6px 32px rgba(0,0,0,.4); } @keyframes svFloatBadge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} } .sv-hero--home .sv-hero-badge { animation: svFloatBadge 3s ease-in-out infinite; } /* Ken Burns — 8 slides (7s = synk med hero-timer) */ .sv-hero-slide.active img { animation: svKB1 7s ease forwards; } .sv-hero-slide:nth-child(2).active img { animation: svKB2 7s ease forwards; } .sv-hero-slide:nth-child(3).active img { animation: svKB3 7s ease forwards; } .sv-hero-slide:nth-child(4).active img { animation: svKB4 7s ease forwards; } .sv-hero-slide:nth-child(5).active img { animation: svKB5 7s ease forwards; } .sv-hero-slide:nth-child(6).active img { animation: svKB6 7s ease forwards; } .sv-hero-slide:nth-child(7).active img { animation: svKB7 7s ease forwards; } .sv-hero-slide:nth-child(8).active img { animation: svKB8 7s ease forwards; } @keyframes svKB1{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.1) translate(-1.5%,-1%)}} @keyframes svKB2{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.11) translate(1.5%,-.5%)}} @keyframes svKB3{0%{transform:scale(1) translate(0,1%)}100%{transform:scale(1.09) translate(0,-1.5%)}} @keyframes svKB4{0%{transform:scale(1.03) translate(1%,0)}100%{transform:scale(1.1) translate(-1.5%,.5%)}} @keyframes svKB5{0%{transform:scale(1) translate(-1%,-.5%)}100%{transform:scale(1.1) translate(1%,.5%)}} @keyframes svKB6{0%{transform:scale(1.05) translate(.5%,.5%)}100%{transform:scale(1.12) translate(-1%,-1.5%)}} @keyframes svKB7{0%{transform:scale(1.02) translate(-.5%,0)}100%{transform:scale(1.11) translate(1%,-1%)}} @keyframes svKB8{0%{transform:scale(1) translate(.5%,.5%)}100%{transform:scale(1.09) translate(-1%,-.5%)}} /* Hero trustbar (index only) */ .hero-banner__trustbar { display: inline-flex; align-items: center; gap: 18px; margin-bottom: 52px; padding: 16px 36px 16px 20px; position: relative; background: rgba(2,6,23,.7); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-full); transition: border-color .4s var(--ease); } .hero-banner__trustbar:hover { border-color: rgba(255,255,255,.22); } .hero-banner__trustbar-stripe { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); width: clamp(340px, 65vw, 680px); height: 5px; border-radius: 3px; background: linear-gradient(90deg, #BA0C2F 0%, #BA0C2F 28%, #fff 28%, #fff 36%, #00205B 36%, #00205B 64%, #fff 64%, #fff 72%, #BA0C2F 72%, #BA0C2F 100%); opacity: .6; } .hero-banner__trustbar-flag { flex-shrink: 0; width: 44px; height: 32px; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.45); } .hero-banner__trustbar-flag svg { display: block; width: 100%; height: 100%; } .hero-banner__trustbar-text { font-family: var(--font-body); font-size: var(--v24-fs-xl); font-weight: 600; color: #fff; letter-spacing: .01em; line-height: 1.5; text-shadow: 0 1px 6px rgba(0,0,0,.4); } /* ========================================================================== HERO — Standard (5 slides + dots, used on om-oss) ========================================================================== */ .sv-hero--standard { position: relative; min-height: 80vh; display: flex; align-items: center; overflow: hidden; } .sv-hero--standard::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 150px; background: linear-gradient(0deg, var(--bg-deep) 0%, transparent 100%); pointer-events: none; z-index: 1; } .sv-hero--standard .sv-hero-content { position: relative; z-index: 2; padding: 140px 0 80px; width: 100%; } .sv-hero--standard h1 { font-size: var(--v24-fs-4xl); font-weight: 900; margin-bottom: 16px; color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.6); } .sv-hero--standard .sv-hero-tagline { font-size: var(--v24-fs-xl); color: var(--text-secondary); max-width: 600px; line-height: 1.7; margin-bottom: 32px; text-shadow: 0 3px 16px rgba(0,0,0,.8), 0 1px 4px rgba(0,0,0,.5); } .sv-hero--standard .sv-hero-sub { font-size: var(--v24-fs-xl); color: var(--text-secondary); max-width: 600px; line-height: 1.7; margin-bottom: 32px; text-shadow: 0 3px 16px rgba(0,0,0,.8), 0 1px 4px rgba(0,0,0,.5); } /* ========================================================================== HERO — Background (kontakt style, align-items: flex-end) ========================================================================== */ .sv-hero--background { position: relative; min-height: 60vh; display: flex; align-items: flex-end; overflow: hidden; } .sv-hero--background .sv-hero-overlay { background: linear-gradient(90deg, rgba(10,13,20,.88) 0%, rgba(10,13,20,.72) 35%, rgba(10,13,20,.35) 65%, rgba(10,13,20,.15) 100%), linear-gradient(0deg, var(--bg-deep) 0%, rgba(10,13,20,.55) 15%, transparent 50%); } .sv-hero--background .sv-hero-content { position: relative; z-index: 2; padding: 140px 0 80px; width: 100%; } .sv-hero--background .sv-hero-inner { max-width: 680px; } .sv-hero--background h1 { font-size: var(--v24-fs-4xl); font-weight: 900; margin-bottom: 24px; color: #fff; text-shadow: 0 3px 16px rgba(0,0,0,.8), 0 1px 3px rgba(0,0,0,.6); line-height: 1.08; } .sv-hero--background h1 .accent { color: var(--brand-red); filter: drop-shadow(0 0 20px rgba(255,0,51,.35)); text-shadow: 0 3px 16px rgba(0,0,0,.8), 0 0 30px rgba(255,0,51,.2); } .sv-hero--background .sv-hero-subtitle { font-size: var(--v24-fs-xl); color: #e2e8f0; max-width: 540px; line-height: 1.85; margin-bottom: 40px; text-shadow: 0 2px 8px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.5); font-weight: 500; } .sv-hero-trust { display: flex; align-items: center; gap: 28px; margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); flex-wrap: wrap; } .sv-hero-trust-item { display: flex; align-items: center; gap: 8px; font-size: var(--v24-fs-xs); color: #e2e8f0; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.5); } .sv-hero-trust-item svg { flex-shrink: 0; } /* ========================================================================== HERO — Mini (45dvh, single bg + badge, for godkj/butikk) ========================================================================== */ .sv-hero--mini { position: relative; min-height: 45dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 110px 0 80px; } .sv-hero--mini .sv-hero-bg img { animation: svKBMini 25s ease infinite alternate; } @keyframes svKBMini { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1.05) translate(-0.5%, -0.3%); } } .sv-hero--mini::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 100px; background: linear-gradient(0deg, var(--bg-deep) 0%, transparent 100%); pointer-events: none; z-index: 1; } .sv-hero--mini .sv-hero-content { position: relative; z-index: 2; max-width: 780px; text-align: center; display: flex; flex-direction: column; align-items: center; } .sv-hero--mini h1 { font-size: var(--v24-fs-3xl); font-weight: 900; margin-bottom: 20px; line-height: 1.12; color: #fff; letter-spacing: -.02em; text-shadow: 0 2px 16px rgba(0,0,0,.7), 0 6px 32px rgba(0,0,0,.4); } /* ========================================================================== HERO — Document (static, for godkjenninger) ========================================================================== */ .sv-hero--document { position: relative; min-height: 50vh; display: flex; align-items: center; overflow: hidden; padding: 120px 0 80px; } .sv-hero--document .sv-hero-bg img { width: 100%; height: 100%; object-fit: cover; } .sv-hero--document::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 150px; background: linear-gradient(0deg, var(--bg-deep) 0%, transparent 100%); pointer-events: none; z-index: 1; } .sv-hero--document .sv-hero-content { position: relative; z-index: 3; max-width: 720px; } .sv-hero--document .sv-hero-content::before { content: ''; display: block; width: 56px; height: 3px; background: linear-gradient(90deg, var(--brand-red), var(--ice-blue)); border-radius: 2px; margin-bottom: 24px; } .sv-hero--document h1 { font-size: var(--v24-fs-4xl); font-weight: 900; margin-bottom: 24px; text-shadow: 0 2px 12px rgba(0,0,0,.7), 0 4px 24px rgba(0,0,0,.4); } .sv-hero--document h1 .accent { filter: drop-shadow(0 2px 8px rgba(56,189,248,.3)); } /* ========================================================================== HERO — Editorial (text only, for nyheter) ========================================================================== */ .sv-hero--editorial { position: relative; padding: clamp(72px, 12vw, 140px) 0 clamp(56px, 8vw, 88px); text-align: center; overflow: hidden; background: var(--bg-deep); } .sv-hero--editorial::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 40% at 30% 50%, rgba(56,189,248,.08), transparent 60%), radial-gradient(ellipse 40% 50% at 70% 60%, rgba(255,0,51,.05), transparent 60%); pointer-events: none; } .sv-hero--editorial h1:not(.sv-hero-title-stack) { font-family: var(--font-heading); font-size: var(--v24-fs-4xl); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin: 0 auto clamp(16px, 2.5vw, 22px); max-width: min(36rem, 100%); position: relative; } .sv-hero--editorial h1:not(.sv-hero-title-stack) span { color: var(--ice-blue); } .sv-hero--editorial h1.sv-hero-title-stack { font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.03em; display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.5vw, 14px); margin: 0 auto clamp(24px, 3.8vw, 40px); max-width: min(44rem, 100%); line-height: 1.08; position: relative; } .sv-hero--editorial .sv-hero-title-line1 { font-size: var(--v24-fs-4xl); color: var(--text-primary); text-shadow: 0 4px 36px rgba(0,0,0,.55), 0 0 48px rgba(56,189,248,.1); } .sv-hero--editorial .sv-hero-title-year { color: var(--ice-blue); text-shadow: 0 0 32px rgba(56,189,248,.4), 0 2px 20px rgba(0,0,0,.35); } .sv-hero--editorial .sv-hero-title-line2 { display: block; font-size: var(--v24-fs-xl); font-weight: 800; letter-spacing: -0.02em; color: rgba(241,245,249,.98); text-shadow: 0 2px 22px rgba(0,0,0,.5); } /* ========================================================================== FAQ LAYOUT ========================================================================== */ .sv-faq-layout { display: grid; grid-template-columns: .38fr 1fr; gap: 80px; align-items: start; } .sv-faq-sidebar { position: sticky; top: 100px; } .sv-faq-sidebar p { color: var(--text-secondary); margin-top: 12px; margin-bottom: 28px; line-height: 1.7; } .sv-faq-list { display: flex; flex-direction: column; gap: 10px; } .sv-faq-item { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; transition: border-color .3s; } .sv-faq-item:hover { border-color: rgba(255,255,255,.14); } .sv-faq-item.open { border-color: var(--border-glow); background: rgba(56,189,248,.02); } .sv-faq-item.open::before { content: ''; display: block; height: 2px; background: linear-gradient(90deg, var(--brand-red), var(--ice-blue)); } .sv-faq-q { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; cursor: pointer; width: 100%; text-align: left; background: none; border: none; gap: 16px; font-family: var(--font-heading); font-size: var(--v24-fs-sm); font-weight: 700; color: var(--text-primary); transition: color .2s; min-height: 48px; } .sv-faq-q:hover { color: var(--ice-blue); } .sv-faq-q i { font-size: var(--v24-fs-xxs); color: var(--text-muted); transition: transform .35s var(--ease), color .35s; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.04); border: 1px solid var(--border-subtle); } .sv-faq-item.open .sv-faq-q i { transform: rotate(180deg); color: var(--ice-blue); background: rgba(56,189,248,.08); border-color: rgba(56,189,248,.2); } .sv-faq-body { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); } .sv-faq-item.open .sv-faq-body { max-height: 500px; } .sv-faq-body-inner { padding: 0 24px 20px; font-size: var(--v24-fs-sm); color: var(--text-secondary); line-height: 1.85; } /* ========================================================================== FINAL CTA ========================================================================== */ .sv-final-cta { position: relative; text-align: center; padding: 100px 0; background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-deep) 100%); } .sv-final-cta .sv-title { margin-bottom: 20px; } .sv-final-cta .sv-desc { margin: 0 auto 40px; } .sv-final-cta-actions { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } /* Glass CTA box (butikk/godkjenninger style) */ .sv-cta-box { text-align: center; max-width: 700px; margin: 0 auto; padding: 56px 40px; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .sv-cta-box h2 { font-size: var(--v24-fs-2xl); margin-bottom: 16px; } .sv-cta-box p { font-size: var(--v24-fs-md); color: var(--text-secondary); line-height: 1.75; margin-bottom: 32px; max-width: 520px; margin-left: auto; margin-right: auto; } .sv-cta-box .sv-btn-group { justify-content: center; margin-top: 0; } .sv-cta-phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--v24-fs-sm); color: var(--ice-blue); margin-top: 20px; } .sv-cta-phone i { font-size: var(--v24-fs-xs); } /* ========================================================================== CARD BASE ========================================================================== */ .sv-card { background: rgba(26,35,50,.65); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 28px 24px; transition: all .4s var(--ease); position: relative; overflow: hidden; } .sv-card:hover { transform: translateY(-6px); border-color: var(--border-glow); box-shadow: 0 20px 60px rgba(0,0,0,.3), 0 0 30px rgba(56,189,248,.06); } /* ========================================================================== CHECK LIST ========================================================================== */ .sv-check-list { list-style: none; margin: 28px 0 36px; } .sv-check-list li { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; font-size: var(--v24-fs-sm); color: var(--text-secondary); line-height: 1.6; border-bottom: 1px solid var(--border-subtle); } .sv-check-list li:last-child { border-bottom: none; } .sv-check-list li i { color: var(--emerald); flex-shrink: 0; margin-top: 3px; font-size: var(--v24-fs-xs); } /* ========================================================================== CONTENT GRID (2-col split) ========================================================================== */ .sv-content-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; } @media(min-width: 960px) { .sv-content-grid { grid-template-columns: 1fr 1fr; gap: 64px; } } .sv-content-grid--reverse { direction: rtl; } .sv-content-grid--reverse > * { direction: ltr; } @media(max-width: 960px) { .sv-content-grid--reverse { direction: ltr; } } /* ========================================================================== TABLE ========================================================================== */ .sv-table-wrapper { background: rgba(26,35,50,.65); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.2); } .sv-table { width: 100%; border-collapse: separate; border-spacing: 0; } .sv-table tr { transition: background .25s ease; } .sv-table tr:hover { background: rgba(56,189,248,.03); } .sv-table td { padding: 14px 20px; border-bottom: 1px solid var(--border-subtle); font-size: var(--v24-fs-xs); color: #f0f4f8; line-height: 1.5; } .sv-table td:first-child { font-weight: 600; color: var(--text-primary); width: 40%; } .sv-table tr:last-child td { border-bottom: none; } /* ========================================================================== RESPONSIVE — Components ========================================================================== */ @media(max-width: 1024px) { .sv-faq-layout { grid-template-columns: 1fr; gap: 40px; } .sv-faq-sidebar { position: static; } } @media(max-width: 768px) { .sv-hero-cta { flex-direction: column; align-items: center; } .sv-hero-cta .sv-btn { width: 100%; max-width: 340px; justify-content: center; } .sv-hero-actions { flex-direction: column; } .sv-hero-actions .sv-btn { width: 100%; justify-content: center; } .sv-final-cta { padding: 72px 0; } .sv-final-cta-actions { flex-direction: column; align-items: center; } .sv-final-cta-actions .sv-btn { width: 100%; max-width: 340px; justify-content: center; } .sv-cta-box { padding: 40px 24px; } .sv-hero--mini { min-height: 45dvh; padding: 100px 0 72px; } .sv-hero--mini h1 { font-size: var(--v24-fs-2xl); } .sv-hero--document { min-height: 45vh; padding: 100px 0 60px; } .sv-hero--document h1 { font-size: var(--v24-fs-3xl); } .sv-hero--standard { min-height: 60vh; } .sv-hero--standard .sv-hero-content { padding: 120px 0 60px; } .sv-hero--standard h1 { font-size: var(--v24-fs-3xl); line-height: 1.15; } .sv-hero--standard .sv-hero-cta { flex-direction: column; gap: 12px; } .sv-hero--standard .sv-hero-cta > * { width: 100%; text-align: center; justify-content: center; } .sv-hero--background .sv-hero-cta { flex-direction: column; } .sv-hero--background .sv-hero-cta .sv-btn { width: 100%; max-width: 340px; justify-content: center; } .sv-hero-trust { gap: 16px; } .sv-content-grid { gap: 28px; } } @media(max-width: 600px) { .sv-hero--home h1 { font-size: var(--v24-fs-2xl); } .sv-hero--home { min-height: 100dvh; padding: 100px 0 72px; } .sv-hero--home .sv-hero-content { padding: 0 8px; } .hero-banner__trustbar-text { font-size: var(--v24-fs-xxs); } .hero-banner__trustbar { gap: 10px; padding: 10px 18px 10px 12px; margin-bottom: 28px; } .hero-banner__trustbar-flag { width: 26px; height: 19px; } .sv-hero-cta .sv-btn { padding: 16px 32px; font-size: var(--v24-fs-xs); } .sv-hero--background h1 { font-size: var(--v24-fs-3xl); } .sv-hero--background { min-height: 55vh; } .sv-hero-trust-item { font-size: var(--v24-fs-xxs); } .sv-faq-q { padding: 20px 20px; min-height: 52px; font-size: var(--v24-fs-sm); } .sv-faq-body-inner { padding: 0 20px 18px; } .sv-content-grid { grid-template-columns: 1fr; gap: 24px; } .sv-content-grid--reverse { direction: ltr; } } /* === PAGES === */ /* ========================================================================== ISHELLA V2.1 — Page-specific Styles pages.css — Styles unique to individual pages Isbaneteknikk AS · isbaneteknikk.no ========================================================================== */ /* ========================================================================== INDEX — Service Cards (mouse glow) ========================================================================== */ .sv-svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .sv-svc-card { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-subtle); transition: all .4s var(--ease), transform .35s var(--ease); cursor: pointer; min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 2px 8px rgba(0,0,0,.2); } .sv-svc-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(56,189,248,.08); border-color: var(--border-glow); } .sv-svc-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .4s; background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(56,189,248,.06), transparent 40%); pointer-events: none; z-index: 3; } .sv-svc-card:hover::after { opacity: 1; } .sv-svc-card-bg { position: absolute; inset: 0; } .sv-svc-card-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .45; transition: transform .7s var(--ease), opacity .5s; } .sv-svc-card:hover .sv-svc-card-bg img { transform: scale(1.06); opacity: .25; } .sv-svc-badge { position: absolute; top: 16px; left: 16px; z-index: 4; padding: 5px 12px; border-radius: var(--radius-full); font-size: var(--v24-fs-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; backdrop-filter: blur(8px); } .sv-svc-badge--red { background: rgba(255,0,51,.15); border: 1px solid rgba(255,0,51,.25); color: var(--brand-red); } .sv-svc-badge--ice { background: rgba(56,189,248,.12); border: 1px solid rgba(56,189,248,.2); color: var(--ice-blue); } .sv-svc-badge--green { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.15); color: var(--emerald); } .sv-svc-body { position: relative; z-index: 2; padding: 32px 28px; background: linear-gradient(0deg, rgba(4,8,22,.98) 50%, rgba(4,8,22,.72) 80%, transparent 100%); } .sv-svc-body h3 { font-size: var(--v24-fs-lg); font-weight: 700; margin-bottom: 10px; } .sv-svc-body p { font-size: var(--v24-fs-xs); color: var(--text-secondary); line-height: 1.65; margin-bottom: 14px; } .sv-svc-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--v24-fs-xs); font-weight: 700; color: var(--brand-red); opacity: 0; transform: translateY(8px); transition: .35s; } .sv-svc-card:hover .sv-svc-arrow { opacity: 1; transform: translateY(0); } /* ========================================================================== INDEX — Intro Grid ========================================================================== */ .sv-intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: center; } .sv-intro-text p { font-size: var(--v24-fs-md); color: var(--text-secondary); line-height: 1.85; margin-bottom: 20px; } .sv-intro-text blockquote { border-left: 3px solid var(--ice-blue); padding: 20px 0 20px 28px; margin: 32px 0; font-style: italic; color: #f1f5f9; font-weight: 500; font-size: var(--v24-fs-md); line-height: 1.6; background: linear-gradient(90deg, rgba(56,189,248,.04), transparent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .sv-intro-visual { position: relative; } .sv-intro-img-main { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); box-shadow: 0 32px 72px -16px rgba(0,0,0,.6); } .sv-intro-img-main img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform .8s var(--ease); } .sv-intro-img-main:hover img { transform: scale(1.04); } .sv-intro-img-float { position: absolute; bottom: -28px; left: -32px; width: 56%; border-radius: var(--radius-md); overflow: hidden; border: 2px solid var(--border-glow); box-shadow: 0 20px 56px rgba(0,0,0,.5); z-index: 3; } .sv-intro-img-float img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform .8s var(--ease); } .sv-intro-img-float:hover img { transform: scale(1.05); } /* ========================================================================== INDEX — Process Steps ========================================================================== */ .sv-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; } .sv-process-grid::before { content: ''; position: absolute; top: 44px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, var(--brand-red), var(--ice-blue)); opacity: .25; z-index: 0; } .sv-process-step { position: relative; z-index: 1; text-align: center; padding: 0 12px; } .sv-process-num { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: var(--v24-fs-lg); font-weight: 800; background: var(--bg-card); border: 2px solid rgba(255,255,255,.14); color: var(--ice-blue-light); transition: all .3s; } .sv-process-step:hover .sv-process-num { background: linear-gradient(135deg, rgba(255,0,51,.1), rgba(56,189,248,.1)); border-color: var(--ice-blue-light); box-shadow: 0 0 22px rgba(56,189,248,.18), 0 0 42px rgba(255,0,51,.06); } .sv-process-step h3 { font-size: var(--v24-fs-sm); font-weight: 700; margin-bottom: 8px; } .sv-process-step p { font-size: var(--v24-fs-xs); color: var(--text-secondary); line-height: 1.65; } /* ========================================================================== INDEX — Product Cards ========================================================================== */ .sv-prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .sv-prod-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; transition: all .4s var(--ease); display: block; color: inherit; box-shadow: 0 2px 6px rgba(0,0,0,.15); position: relative; } .sv-prod-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(56,189,248,.08); border-color: var(--border-glow); } .sv-prod-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--brand-red), var(--ice-blue)); opacity: 0; transition: opacity .4s var(--ease); } .sv-prod-card:hover::after { opacity: 1; } .sv-prod-thumb { aspect-ratio: 4/3; overflow: hidden; position: relative; background: var(--bg-card); } .sv-prod-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .sv-prod-card:hover .sv-prod-thumb img { transform: scale(1.06); } .sv-prod-tag { position: absolute; top: 12px; left: 12px; padding: 4px 12px; font-size: var(--v24-fs-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-radius: var(--radius-full); backdrop-filter: blur(8px); } .sv-prod-tag--ice { background: rgba(56,189,248,.12); color: var(--ice-blue); border: 1px solid rgba(56,189,248,.2); } .sv-prod-tag--red { background: rgba(255,0,51,.12); color: var(--brand-red); border: 1px solid rgba(255,0,51,.15); } .sv-prod-tag--green { background: rgba(16,185,129,.1); color: var(--emerald); border: 1px solid rgba(16,185,129,.15); } .sv-prod-info { padding: 22px 20px; } .sv-prod-info h3 { font-size: var(--v24-fs-md); font-weight: 700; margin-bottom: 6px; } .sv-prod-info p { font-size: var(--v24-fs-xs); color: var(--text-muted); line-height: 1.6; } .sv-prod-link { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: var(--v24-fs-xs); font-weight: 700; color: var(--brand-red); transition: gap .3s; } .sv-prod-card:hover .sv-prod-link { gap: 10px; } .sv-prod-link i { font-size: var(--v24-fs-xxs); } /* ========================================================================== INDEX — Project Cards ========================================================================== */ .sv-projects-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .sv-project-card { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; cursor: pointer; border: 1px solid var(--border-subtle); transition: all .4s var(--ease); } .sv-project-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,.4); border-color: var(--border-glow); } .sv-project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .sv-project-card:hover img { transform: scale(1.06); } .sv-project-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 20px 20px; background: linear-gradient(0deg, rgba(2,6,23,.95) 0%, rgba(2,6,23,.6) 60%, transparent 100%); transition: padding .3s; } .sv-project-card:hover .sv-project-overlay { padding-bottom: 24px; } .sv-project-overlay h3 { font-size: var(--v24-fs-md); font-weight: 700; margin-bottom: 4px; } .sv-project-overlay span { font-size: var(--v24-fs-xxs); color: var(--text-muted); } .sv-project-tag { position: absolute; top: 12px; left: 12px; z-index: 4; padding: 4px 10px; border-radius: var(--radius-full); font-size: var(--v24-fs-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; backdrop-filter: blur(8px); background: rgba(56,189,248,.12); border: 1px solid rgba(56,189,248,.2); color: var(--ice-blue); } /* ========================================================================== INDEX — Feature Section (IceBear) ========================================================================== */ .sv-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .sv-feature-img { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); box-shadow: 0 40px 80px -20px rgba(0,0,0,.6); } .sv-feature-img img { width: 100%; border-radius: var(--radius-lg); transition: transform .8s ease; } .sv-feature-img:hover img { transform: scale(1.03); } /* ========================================================================== INDEX — Shop Cards (6 small categories, index version) ========================================================================== */ .sv-hero--home ~ .sv-section .sv-shop-grid { grid-template-columns: repeat(3, 1fr); } @media(min-width: 1100px) { .sv-hero--home ~ .sv-section .sv-shop-grid { grid-template-columns: repeat(6, 1fr); } } /* ========================================================================== INDEX — Why Cards (trust badges) ========================================================================== */ .sv-why-intro { max-width: 740px; margin: 0 auto 56px; text-align: center; } .sv-why-intro p { font-size: var(--v24-fs-md); color: var(--text-secondary); line-height: 1.8; } .sv-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .sv-why-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 36px 24px; text-align: center; transition: all .4s var(--ease); position: relative; overflow: hidden; } .sv-why-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--brand-red), var(--ice-blue)); opacity: 0; transition: opacity .4s var(--ease); } .sv-why-card:hover::after { opacity: 1; } .sv-why-card:hover { transform: translateY(-6px); border-color: var(--brand-red); box-shadow: 0 -2px 0 0 var(--brand-red) inset, 0 20px 60px rgba(0,0,0,.3); } /* Badge wrap (logo version) */ .sv-why-badge-wrap { width: 96px; height: 96px; margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; background: #ffffff; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.1); transition: transform .35s var(--spring), box-shadow .4s var(--ease); position: relative; overflow: hidden; } .sv-why-badge-wrap::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,51,153,.04), rgba(255,0,51,.04)); opacity: 0; transition: opacity .4s; } .sv-why-card:hover .sv-why-badge-wrap::before { opacity: 1; } .sv-why-card:hover .sv-why-badge-wrap { transform: scale(1.06) translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.25), 0 0 0 1px rgba(56,189,248,.15); } .sv-why-badge { max-height: 64px; max-width: 72px; width: auto; object-fit: contain; filter: contrast(1.05) saturate(1.1); transition: filter .3s; } .sv-why-card:hover .sv-why-badge { filter: contrast(1.1) saturate(1.2); box-shadow: 0 8px 28px rgba(56,189,248,.15); } /* Icon wrap variant (FA icons) */ .sv-why-icon-wrap { width: 88px; height: 88px; margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(56,189,248,.08), rgba(255,0,51,.06)); border: 1px solid var(--border-glow); border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.05); transition: transform .35s var(--spring), box-shadow .4s var(--ease); } .sv-why-icon-wrap i { font-size: var(--v24-fs-2xl); color: var(--ice-blue); transition: transform .3s var(--ease), color .3s var(--ease); } .sv-why-card:hover .sv-why-icon-wrap { transform: scale(1.06) translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.25), 0 0 0 1px rgba(56,189,248,.15); } .sv-why-card:hover .sv-why-icon-wrap i { color: var(--brand-red); transform: scale(1.1); } .sv-why-card h3 { font-size: var(--v24-fs-md); font-weight: 800; margin-bottom: 10px; font-family: var(--font-heading); } .sv-why-card p { font-size: var(--v24-fs-xs); color: var(--text-secondary); line-height: 1.7; } /* ========================================================================== INDEX — Innbytte CTA ========================================================================== */ .sv-innbytte-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; } .sv-innbytte-step { background: var(--glass-bg); backdrop-filter: var(--glass-blur); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 36px 28px; text-align: center; transition: all .4s var(--ease); position: relative; } .sv-innbytte-step:hover { border-color: var(--ice-blue); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(56,189,248,.1); } .sv-innbytte-num { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-red), var(--brand-red-deep)); font-family: var(--font-heading); font-size: var(--v24-fs-lg); font-weight: 900; color: #fff; box-shadow: 0 8px 24px rgba(255,0,51,.25); } .sv-innbytte-step h4 { font-family: var(--font-heading); font-size: var(--v24-fs-md); font-weight: 800; margin-bottom: 10px; color: #fff; } .sv-innbytte-step p { font-size: var(--v24-fs-sm); color: var(--text-muted); line-height: 1.65; } .sv-innbytte-benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-bottom: 40px; } .sv-innbytte-benefit { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: var(--radius-full); background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); font-size: var(--v24-fs-xs); font-weight: 700; color: var(--emerald); text-transform: uppercase; letter-spacing: .04em; transition: all .3s var(--ease); } .sv-innbytte-benefit:hover { background: rgba(16,185,129,.14); transform: translateY(-2px); } .sv-innbytte-benefit i { font-size: var(--v24-fs-sm); } /* ========================================================================== INDEX — Ice Particles Canvas ========================================================================== */ #sv-particles { position: fixed; inset: 0; z-index: 9997; pointer-events: none; } /* ========================================================================== INDEX — Project Gallery Cards (pg-card) ========================================================================== */ .pg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .pg-card { display: block; text-decoration: none; color: inherit; background: var(--bg-card); border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius-lg); overflow: hidden; transition: transform .4s var(--ease-expo), border-color .4s, box-shadow .4s; position: relative; } .pg-card:hover { transform: translateY(-7px); border-color: rgba(56,189,248,.3); box-shadow: 0 28px 64px rgba(0,0,0,.5); } .pg-card-thumb { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; background: var(--bg-elevated); } .pg-card-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.88); transition: transform .65s var(--ease), filter .45s; } .pg-card:hover .pg-card-thumb img { transform: scale(1.08); filter: brightness(1); } .pg-card-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg, rgba(2,6,23,.6) 0%, rgba(2,6,23,.15) 50%, transparent 100%); opacity: 0; transition: opacity .35s var(--ease); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 28px; } .pg-card:hover .pg-card-overlay { opacity: 1; } .pg-card-overlay-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-red); color: #fff; padding: 10px 24px; border-radius: var(--radius-sm); font-size: var(--v24-fs-xs); font-weight: 700; letter-spacing: .03em; transform: translateY(10px); transition: transform .35s var(--ease-expo); box-shadow: 0 8px 24px rgba(255,0,51,.45); } .pg-card:hover .pg-card-overlay-btn { transform: translateY(0); } .pg-year-badge { position: absolute; top: 14px; right: 14px; z-index: 3; background: rgba(2,6,23,.82); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.14); border-radius: 100px; padding: 5px 13px; font-size: var(--v24-fs-xxs); font-weight: 700; color: var(--ice-blue); font-family: var(--font-mono); letter-spacing: .04em; } .pg-type-badge { position: absolute; top: 14px; left: 14px; z-index: 3; padding: 5px 12px; border-radius: 100px; font-size: var(--v24-fs-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .pg-type-badge--ishall { background: rgba(255,0,51,.2); border: 1px solid rgba(255,0,51,.35); color: #f87171; } .pg-type-badge--utendors { background: rgba(16,185,129,.18); border: 1px solid rgba(16,185,129,.35); color: #34d399; } .pg-type-badge--sentrumsbane { background: rgba(59,130,246,.18); border: 1px solid rgba(59,130,246,.35); color: #60a5fa; } .pg-type-badge--kundetilpasset { background: rgba(245,158,11,.18); border: 1px solid rgba(245,158,11,.35); color: #fbbf24; } .pg-type-badge--undervarme { background: rgba(239,68,68,.18); border: 1px solid rgba(239,68,68,.35); color: #f87171; } .pg-card-body { padding: 20px 22px 22px; } .pg-card-title { font-size: var(--v24-fs-md); font-weight: 800; color: var(--text-primary); line-height: 1.25; margin-bottom: 8px; font-family: var(--font-heading); } .pg-card-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.09); } .pg-card-loc { font-size: var(--v24-fs-xs); color: var(--text-muted); display: flex; align-items: center; gap: 5px; } .pg-card-loc i { color: var(--ice-blue); font-size: var(--v24-fs-xxs); } .pg-card-arrow { font-size: var(--v24-fs-xxs); font-weight: 700; color: var(--text-muted); display: flex; align-items: center; gap: 5px; transition: color .25s; } .pg-card:hover .pg-card-arrow { color: var(--ice-blue); } .pg-card-arrow i { transition: transform .25s; } .pg-card:hover .pg-card-arrow i { transform: translateX(3px); } .pg-card--hidden { display: none; } .pg-grid.pg-grid--expanded .pg-card--hidden { display: block; opacity: 0; transform: translateY(24px); animation: pgRevealCard .5s var(--ease-expo) forwards; } @keyframes pgRevealCard { to { opacity: 1; transform: translateY(0); } } .pg-grid.pg-grid--expanded .pg-card--hidden:nth-child(10) { animation-delay: .06s; } .pg-grid.pg-grid--expanded .pg-card--hidden:nth-child(11) { animation-delay: .12s; } .pg-grid.pg-grid--expanded .pg-card--hidden:nth-child(12) { animation-delay: .18s; } #pg-show-more.pg-hidden { display: none; } /* ========================================================================== BUTIKK — Shop Cards (3-col) ========================================================================== */ .sv-shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media(min-width: 768px) { .sv-shop-grid { grid-template-columns: repeat(3, 1fr); } } .sv-shop-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; transition: all .4s var(--ease); cursor: pointer; text-align: center; } .sv-shop-card:hover { transform: translateY(-6px); border-color: var(--border-glow); box-shadow: 0 12px 36px rgba(56,189,248,.06); } .sv-shop-card-img { aspect-ratio: 1; overflow: hidden; background: var(--bg-card); } .sv-shop-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .sv-shop-card:hover .sv-shop-card-img img { transform: scale(1.06); } .sv-shop-card-body { padding: 18px 16px; } .sv-shop-card-body h3 { font-size: var(--v24-fs-sm); font-weight: 700; margin-bottom: 6px; } .sv-shop-card-body p { font-size: var(--v24-fs-xs); color: var(--text-muted); line-height: 1.5; } .sv-shop-card:focus-visible { outline: 2px solid var(--ice-blue); outline-offset: 2px; } /* ========================================================================== GODKJENNINGER — Cert Logo Cards ========================================================================== */ .sv-cert-logo { position: relative; display: flex; align-items: center; justify-content: center; padding: 40px 44px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 40%, rgba(56,189,248,.02)), radial-gradient(circle at 50% 42%, rgba(255,255,255,.18), rgba(255,255,255,.04) 34%, rgba(56,189,248,.02) 62%, transparent 78%); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg); max-width: 300px; min-height: 220px; margin: 0 auto; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 22px 60px rgba(0,0,0,.24); overflow: hidden; transition: all .4s var(--ease); } .sv-cert-logo::before { content: ''; position: absolute; inset: 12px; border-radius: calc(var(--radius-lg) - 10px); background: linear-gradient(135deg, rgba(255,255,255,.03), rgba(56,189,248,.015)); border: 1px solid rgba(255,255,255,.045); pointer-events: none; } .sv-cert-logo::after { content: ''; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,0) 68%); filter: blur(8px); opacity: .9; pointer-events: none; } .sv-cert-logo:hover { border-color: rgba(137,179,217,.24); box-shadow: 0 18px 55px rgba(56,189,248,.14), 0 20px 70px rgba(0,0,0,.28); transform: translateY(-4px); } .sv-cert-logo img { position: relative; z-index: 1; max-width: 178px; max-height: 142px; width: auto; height: auto; object-fit: contain; filter: brightness(1.14) contrast(1.14) saturate(1.04) drop-shadow(0 8px 24px rgba(10,13,20,.28)); transition: transform .4s var(--ease), filter .4s var(--ease); } .sv-cert-logo:hover img { transform: scale(1.045); filter: brightness(1.18) contrast(1.16) saturate(1.05) drop-shadow(0 14px 28px rgba(10,13,20,.3)); } .sv-cert-logo--startbank img { max-width: 188px; filter: brightness(1.22) contrast(1.18) saturate(1.02) drop-shadow(0 10px 28px rgba(10,13,20,.26)); } .sv-cert-logo--sentral img { max-width: 150px; filter: brightness(1.18) contrast(1.22) saturate(1.02) drop-shadow(0 10px 28px rgba(10,13,20,.28)); } .sv-cert-logo--mester img { max-width: 182px; background: rgba(255,255,255,.95); border-radius: 10px; padding: 14px 16px; filter: drop-shadow(0 4px 16px rgba(0,0,0,.14)) contrast(1.04); } .sv-cert-logo--miljo img { max-width: 150px; max-height: 156px; filter: brightness(1.16) contrast(1.1) saturate(1.05) drop-shadow(0 10px 28px rgba(10,13,20,.24)); } .sv-cert-logo--laerebedrift img { max-width: 176px; background: rgba(255,255,255,.95); border-radius: 10px; padding: 14px 16px; filter: drop-shadow(0 4px 16px rgba(0,0,0,.14)) contrast(1.04); } @media(min-width: 960px) { .sv-content-grid .sv-cert-logo { margin: 0; } } @media(max-width: 960px) { .sv-cert-logo { max-width: 260px; min-height: 188px; margin: 0 auto; padding: 34px 32px; } } @media(max-width: 768px) { .sv-cert-logo { max-width: 250px; min-height: 180px; padding: 28px; } .sv-cert-logo img { max-width: 156px; max-height: 118px; } } /* ========================================================================== KONTAKT — Contact Cards ========================================================================== */ .sv-cards-section { padding: 72px 0; background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); position: relative; z-index: 1; } .sv-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .sv-contact-card { background: linear-gradient(135deg, rgba(10,15,30,.7) 0%, rgba(26,35,50,.5) 50%, rgba(10,15,30,.65) 100%); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 32px 26px; display: flex; flex-direction: column; gap: 14px; transition: all .4s var(--ease); position: relative; overflow: hidden; } .sv-contact-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(56,189,248,.08), rgba(255,0,51,.04), rgba(56,189,248,.06)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .5; transition: opacity .4s; } .sv-contact-card:hover { transform: translateY(-4px); border-color: rgba(255,0,51,.15); box-shadow: 0 16px 40px rgba(0,0,0,.3); } .sv-contact-card:hover::before { opacity: 1; } .sv-card-icon { width: 54px; height: 54px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: var(--v24-fs-lg); margin-bottom: 4px; transition: all .35s var(--ease); } .sv-card-icon.red { background: linear-gradient(135deg, rgba(255,0,51,.12), rgba(255,0,51,.06)); color: var(--brand-red); border: 1px solid rgba(255,0,51,.15); } .sv-contact-card:hover .sv-card-icon.red { background: var(--brand-red); color: #fff; box-shadow: 0 4px 16px rgba(255,0,51,.3); } .sv-card-icon.ice { background: linear-gradient(135deg, rgba(56,189,248,.12), rgba(56,189,248,.05)); color: var(--ice-blue); border: 1px solid rgba(56,189,248,.15); } .sv-contact-card:hover .sv-card-icon.ice { background: var(--ice-blue); color: #0f1520; box-shadow: 0 4px 16px rgba(56,189,248,.25); } .sv-card-icon.emerald { background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(16,185,129,.05)); color: var(--emerald); border: 1px solid rgba(16,185,129,.15); } .sv-contact-card:hover .sv-card-icon.emerald { background: var(--emerald); color: #fff; box-shadow: 0 4px 16px rgba(16,185,129,.25); } .sv-card-icon.amber { background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(245,158,11,.05)); color: var(--amber); border: 1px solid rgba(245,158,11,.15); } .sv-contact-card:hover .sv-card-icon.amber { background: var(--amber); color: #0f1520; box-shadow: 0 4px 16px rgba(245,158,11,.25); } .sv-card-label { font-size: var(--v24-fs-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); } .sv-card-title { font-family: var(--font-heading); font-size: var(--v24-fs-md); font-weight: 700; color: var(--text-primary); margin-bottom: 2px; } .sv-card-value { font-size: var(--v24-fs-sm); color: var(--text-primary); line-height: 1.6; } .sv-card-value a { color: var(--text-primary); font-weight: 600; transition: color .25s; } .sv-card-value a:hover { color: var(--ice-blue); } .sv-card-sub { font-size: var(--v24-fs-xs); color: var(--text-secondary); } /* Kontakt — Main Grid + Form */ .sv-main-section { padding: 88px 0; position: relative; overflow: hidden; } .sv-main-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; } .sv-info-col { display: flex; flex-direction: column; gap: 32px; } .sv-company-block { background: linear-gradient(135deg, rgba(10,15,30,.7), rgba(26,35,50,.5), rgba(10,15,30,.65)); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 36px 30px; position: relative; overflow: hidden; } .sv-company-block::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--brand-red), var(--brand-blue)); } .sv-company-block h3 { font-size: var(--v24-fs-lg); font-weight: 800; margin-bottom: 24px; color: var(--ice-blue); display: flex; align-items: center; gap: 10px; } .sv-info-row { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-subtle); transition: all .3s var(--ease); } .sv-info-row:hover { padding-left: 6px; } .sv-info-row:last-child { border-bottom: none; padding-bottom: 0; } .sv-info-icon { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: var(--v24-fs-xs); background: linear-gradient(135deg, rgba(255,0,51,.1), rgba(255,0,51,.05)); color: var(--brand-red); border: 1px solid rgba(255,0,51,.1); transition: all .3s var(--ease); } .sv-info-row:hover .sv-info-icon { background: var(--brand-red); color: #fff; box-shadow: 0 4px 12px rgba(255,0,51,.25); } .sv-info-text { display: flex; flex-direction: column; gap: 2px; } .sv-info-label { font-size: var(--v24-fs-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); } .sv-info-value { font-size: var(--v24-fs-sm); font-weight: 600; color: var(--text-primary); } .sv-info-value a { color: var(--text-primary); } .sv-info-value a:hover { color: var(--brand-red); } /* Hours card */ .sv-hours-card { background: linear-gradient(135deg, rgba(10,15,30,.7), rgba(26,35,50,.5), rgba(10,15,30,.65)); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 28px 26px; position: relative; overflow: hidden; } .sv-hours-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--emerald), transparent); } .sv-hours-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .sv-hours-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(16,185,129,.08); color: var(--emerald); border: 1px solid rgba(16,185,129,.12); font-size: var(--v24-fs-sm); } .sv-hours-title { font-family: var(--font-heading); font-size: var(--v24-fs-md); font-weight: 700; color: var(--text-primary); } .sv-hours-list { display: flex; flex-direction: column; gap: 10px; } .sv-hours-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--v24-fs-xs); padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.04); } .sv-hours-row:last-child { border-bottom: none; } .sv-hours-day { color: var(--text-secondary); font-weight: 500; } .sv-hours-time { color: var(--text-primary); font-weight: 700; font-size: var(--v24-fs-xs); } .sv-hours-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-full); font-size: var(--v24-fs-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .sv-hours-badge.emergency { background: rgba(255,0,51,.06); color: #ff3366; border: 1px solid rgba(255,0,51,.12); } /* Quick links */ .sv-quick-links { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .sv-quick-link { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: rgba(10,15,30,.5); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-size: var(--v24-fs-sm); font-weight: 600; color: var(--text-primary); transition: all .3s var(--ease); } .sv-quick-link:hover { border-color: rgba(56,189,248,.15); background: rgba(15,21,32,.8); transform: translateX(4px); } .sv-quick-link svg { color: var(--text-muted); transition: color .3s; flex-shrink: 0; } .sv-quick-link:hover svg { color: var(--ice-blue); } .sv-quick-link span { margin-left: auto; font-size: var(--v24-fs-xxs); color: var(--text-muted); } /* Contact Form */ .sv-form-col { display: flex; flex-direction: column; } .sv-form-col .sv-label { margin-bottom: 14px; } .sv-form-col .sv-title { margin-bottom: 8px; } .sv-form-col .sv-desc { margin-bottom: 32px; } .sv-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .sv-form-group { margin-bottom: 20px; } .sv-form-label { display: block; margin-bottom: 8px; font-size: var(--v24-fs-xxs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #e2e8f0; } .sv-form-input, .sv-form-select { width: 100%; padding: 16px 20px; background: rgba(2,6,23,.78); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; color: #fff; font-size: var(--v24-fs-sm); font-family: inherit; transition: all .3s var(--ease); outline: none; -webkit-text-fill-color: #fff; } .sv-form-input::placeholder { color: rgba(255,255,255,.55); -webkit-text-fill-color: rgba(255,255,255,.55); } .sv-form-input:hover, .sv-form-select:hover { border-color: rgba(255,255,255,.35); background: rgba(2,6,23,.88); } .sv-form-input:focus, .sv-form-input:focus-visible, .sv-form-select:focus, .sv-form-select:focus-visible { border-color: var(--ice-blue); background: rgba(2,6,23,.94); box-shadow: 0 0 0 4px rgba(56,189,248,.15); -webkit-text-fill-color: #fff; } .sv-form-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 44px; cursor: pointer; } .sv-form-select option { background: #0f172a; color: #fff; } .sv-form-select:disabled { opacity: .5; cursor: not-allowed; color: rgba(255,255,255,.6); -webkit-text-fill-color: rgba(255,255,255,.6); } textarea.sv-form-input { min-height: 150px; resize: vertical; line-height: 1.65; } .sv-form-input:-webkit-autofill, .sv-form-input:-webkit-autofill:hover, .sv-form-input:-webkit-autofill:focus, .sv-form-select:-webkit-autofill, .sv-form-select:-webkit-autofill:hover, .sv-form-select:-webkit-autofill:focus, textarea.sv-form-input:-webkit-autofill, textarea.sv-form-input:-webkit-autofill:hover, textarea.sv-form-input:-webkit-autofill:focus { -webkit-text-fill-color: #fff !important; caret-color: #fff !important; border: 1px solid rgba(255,255,255,.24) !important; -webkit-box-shadow: 0 0 0 1000px rgba(2,6,23,.92) inset !important; box-shadow: 0 0 0 1000px rgba(2,6,23,.92) inset !important; transition: background-color 9999s ease-in-out 0s !important; } .sv-form-submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 48px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--brand-red), var(--brand-red-deep)); color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: var(--v24-fs-md); text-transform: uppercase; letter-spacing: .1em; border: none; cursor: pointer; box-shadow: 0 8px 24px rgba(255,0,51,.3); transition: all .35s var(--ease); position: relative; overflow: hidden; } .sv-form-submit:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(255,0,51,.4); } .sv-form-submit::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.15) 50%, transparent 80%); transform: translateX(-110%); transition: transform .65s ease; pointer-events: none; } .sv-form-submit:hover:not(:disabled)::after { transform: translateX(110%); } .sv-form-submit:disabled { opacity: .6; cursor: wait; } .sv-form-response { margin-top: 18px; padding: 16px 22px; border-radius: 10px; font-weight: 600; text-align: center; display: none; font-size: var(--v24-fs-sm); } .sv-form-response.sv-form-success { display: block; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.35); color: #34d399; } .sv-form-response.sv-form-error { display: block; background: rgba(255,0,51,.12); border: 1px solid rgba(255,0,51,.35); color: #fb7185; } /* ========================================================================== OM-OSS — Desc Grid + Sidebar ========================================================================== */ .sv-desc-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: start; } .sv-desc-text h2 { margin-bottom: 24px; } .sv-desc-text p { font-size: var(--v24-fs-md); color: var(--text-secondary); line-height: 1.85; margin-bottom: 20px; } .sv-desc-text blockquote { border-left: 3px solid var(--ice-blue); padding: 24px 28px 24px 32px; margin: 32px 0; font-style: italic; color: var(--text-primary); font-weight: 500; font-size: var(--v24-fs-md); line-height: 1.7; background: linear-gradient(135deg, rgba(56,189,248,.06) 0%, rgba(56,189,248,.02) 60%, transparent 100%); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .sv-desc-sidebar { position: sticky; top: 100px; } .sv-desc-infobox { background: linear-gradient(135deg, rgba(17,24,39,.75), rgba(26,35,50,.55), rgba(17,24,39,.7)); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 32px 28px; } .sv-desc-infobox h3 { font-size: var(--v24-fs-md); margin-bottom: 16px; color: var(--ice-blue); } .sv-desc-infobox ul { list-style: none; } .sv-desc-infobox li { padding: 10px 0; border-bottom: 1px solid var(--border-subtle); display: flex; justify-content: space-between; font-size: var(--v24-fs-sm); } .sv-desc-infobox li:last-child { border-bottom: none; } .sv-desc-infobox li span:first-child { color: var(--text-muted); } .sv-desc-infobox li span:last-child { color: var(--text-primary); font-weight: 600; } /* OM-OSS — Key Data */ .sv-keydata-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .sv-keydata-item { background: linear-gradient(135deg, rgba(17,24,39,.75), rgba(26,35,50,.55), rgba(17,24,39,.7)); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 36px 20px; text-align: center; transition: all .4s var(--ease); } .sv-keydata-item:hover { border-color: rgba(255,255,255,.14); transform: translateY(-6px); box-shadow: 0 20px 56px rgba(0,0,0,.35); } .sv-keydata-icon { font-size: var(--v24-fs-xl); color: var(--ice-blue); margin-bottom: 14px; } .sv-keydata-val { font-size: var(--v24-fs-2xl); font-weight: 700; color: var(--ice-blue); margin-bottom: 6px; } .sv-keydata-label { font-size: var(--v24-fs-xxs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; } /* OM-OSS — Sert Cards */ .sv-serts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .sv-sert-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: all .5s var(--ease); } .sv-sert-card:hover { transform: translateY(-6px); box-shadow: 0 28px 64px rgba(0,0,0,.45), 0 0 40px rgba(56,189,248,.05); border-color: rgba(255,255,255,.14); } .sv-sert-top { background: rgba(255,255,255,.08); padding: 32px 24px; display: flex; align-items: center; justify-content: center; min-height: 120px; backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); position: relative; } .sv-sert-top::after { content: ''; position: absolute; bottom: 0; left: 16px; right: 16px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); } .sv-sert-top img { max-height: 64px; max-width: 140px; width: auto; object-fit: contain; display: block; } .sv-sert-body { padding: 28px 24px 32px; flex: 1; display: flex; flex-direction: column; gap: 10px; } .sv-sert-body h3 { font-size: var(--v24-fs-md); } .sv-sert-body p { font-size: var(--v24-fs-sm); color: var(--text-secondary); line-height: 1.75; flex: 1; } .sv-sert-tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--v24-fs-xxs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--emerald); margin-top: 4px; } .sv-sert-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); animation: svPulseEmerald 2s ease-in-out infinite; } @keyframes svPulseEmerald { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.4);opacity:1} 50%{box-shadow:0 0 0 4px rgba(16,185,129,0);opacity:.7} } /* OM-OSS — Values */ .sv-why-icon { width: 72px; height: 72px; border-radius: 18px; background: var(--brand-red-glow); color: var(--brand-red); display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,0,51,.15); margin-bottom: 28px; font-size: var(--v24-fs-xl); box-shadow: 0 0 24px rgba(255,0,51,.08); transition: box-shadow .4s var(--ease); } .sv-why-card:hover .sv-why-icon { box-shadow: 0 0 32px rgba(255,0,51,.15); } .sv-why-num { position: absolute; top: 24px; right: 24px; font-size: var(--v24-fs-xxs); color: rgba(255,255,255,.14); font-weight: 600; } /* OM-OSS — Gallery */ .sv-gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 280px 280px; gap: 16px; } .sv-gal-item { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,.14); position: relative; box-shadow: 0 8px 32px rgba(0,0,0,.4); transition: box-shadow .4s; } .sv-gal-item:first-child { grid-row: span 2; } .sv-gal-item:nth-child(4) { grid-column: span 2; } .sv-gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .sv-gal-item:hover { box-shadow: 0 16px 48px rgba(0,0,0,.6); } .sv-gal-item:hover img { transform: scale(1.06); } .sv-gal-cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(0deg, rgba(2,6,23,.92) 0%, transparent 100%); font-size: var(--v24-fs-xs); font-weight: 600; color: var(--text-secondary); opacity: 0; transform: translateY(8px); transition: all .4s var(--ease); } .sv-gal-item:hover .sv-gal-cap { opacity: 1; transform: none; } /* OM-OSS — Totalentreprise */ .sv-total-grid { display: grid; grid-template-columns: .85fr 1.25fr; gap: 80px; align-items: center; } .sv-total-text h2 { margin-bottom: 24px; } .sv-total-text p { color: var(--text-secondary); font-size: var(--v24-fs-md); line-height: 1.9; margin-bottom: 18px; } .sv-total-links { margin-top: 32px; display: flex; flex-direction: column; gap: 10px; } .sv-total-link { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border-subtle); transition: all .35s var(--ease); font-weight: 600; font-size: var(--v24-fs-sm); } .sv-total-link i { color: var(--ice-blue); flex-shrink: 0; } .sv-total-link:hover { border-color: var(--ice-blue); background: rgba(56,189,248,.06); transform: translateX(6px); } .sv-mosaic-img { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 8px 32px rgba(0,0,0,.4); transition: box-shadow .4s var(--ease); } .sv-mosaic-img:hover { box-shadow: 0 16px 48px rgba(0,0,0,.55); } .sv-total-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .sv-mosaic-img:first-child { grid-row: span 2; } .sv-mosaic-img img { width: 100%; height: 100%; object-fit: cover; min-height: 200px; transition: transform .8s var(--ease); } .sv-mosaic-img:first-child img { min-height: 420px; } .sv-mosaic-img:hover img { transform: scale(1.06); } /* OM-OSS — CTA section */ .sv-cta-section { padding: 96px 0; background: var(--bg-surface); border-top: 1px solid var(--border-subtle); text-align: center; } .sv-cta-section h2 { font-size: var(--v24-fs-3xl); margin-bottom: 16px; } .sv-cta-section p { font-size: var(--v24-fs-md); color: var(--text-secondary); max-width: 560px; margin: 0 auto 36px; line-height: 1.8; } .sv-cta-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; } /* ========================================================================== NYHETER — Editorial Hero + Cards ========================================================================== */ .isbat-nyheter { position: relative; } .ny-hero-label { display: inline-flex; align-items: center; gap: 10px; font-size: var(--v24-fs-xxs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-red); margin-bottom: 16px; position: relative; } .ny-hero-label::before { content: ''; width: 22px; height: 2px; background: var(--brand-red); } .ny-hero-desc { font-size: var(--v24-fs-md); color: var(--text-secondary); max-width: 580px; margin: 0 auto 32px; line-height: 1.75; position: relative; } .ny-toolbar { display: flex; flex-wrap: wrap; gap: 12px; max-width: 1440px; margin: 0 auto; padding: 32px 0; align-items: center; justify-content: center; } .ny-search { flex: 1 1 280px; max-width: 420px; position: relative; } .ny-search input { width: 100%; padding: 12px 18px 12px 44px; background: var(--glass-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-body); font-size: var(--v24-fs-sm); outline: none; transition: border-color .3s; } .ny-search input::placeholder { color: var(--text-muted); } .ny-search input:focus { border-color: var(--ice-blue); } .ny-search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: var(--v24-fs-xs); pointer-events: none; } .ny-sort { padding: 12px 18px; background: var(--glass-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-body); font-size: var(--v24-fs-sm); outline: none; cursor: pointer; transition: border-color .3s; } .ny-sort:focus { border-color: var(--ice-blue); } .ny-sort option { background: var(--bg-card); color: var(--text-primary); } .ny-count { font-size: var(--v24-fs-xs); color: var(--text-muted); font-weight: 600; white-space: nowrap; } .ny-grid-wrapper { max-width: 1440px; margin: 0 auto; padding: 0 0 60px; } .ny-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .ny-card { display: flex; flex-direction: column; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; position: relative; overflow: hidden; cursor: pointer; } .ny-card:hover { transform: translateY(-4px); border-color: rgba(56,189,248,.2); box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 16px rgba(56,189,248,.06); } .ny-card:focus-visible { outline: 2px solid var(--ice-blue); outline-offset: 2px; } .ny-card-thumb { position: relative; width: 100%; height: 180px; overflow: hidden; background: var(--bg-card); } .ny-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), filter .5s; filter: brightness(.88); } .ny-card:hover .ny-card-thumb img { transform: scale(1.04); filter: brightness(1); } .ny-card-thumb-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,13,20,.5) 0%, transparent 50%); pointer-events: none; } .ny-card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 18px; } .ny-card-title { font-family: var(--font-heading); font-size: var(--v24-fs-md); font-weight: 700; line-height: 1.35; margin-bottom: 12px; color: var(--text-primary); transition: color .3s; } .ny-card:hover .ny-card-title { color: var(--ice-blue); } .ny-card-meta { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: var(--v24-fs-xs); color: var(--text-muted); } .ny-card-arrow { margin-left: auto; color: var(--text-muted); font-size: var(--v24-fs-xs); transition: transform .3s, color .3s; } .ny-card:hover .ny-card-arrow { transform: translateX(4px); color: var(--ice-blue); } .ny-load-more { display: flex; justify-content: center; margin-top: 40px; } .ny-no-results { text-align: center; padding: 60px 20px; color: var(--text-muted); font-size: var(--v24-fs-md); grid-column: 1 / -1; } .ny-cta { text-align: center; padding: 80px 0; position: relative; } .ny-cta h2 { font-size: var(--v24-fs-3xl); margin-bottom: 14px; } .ny-cta p { font-size: var(--v24-fs-md); color: var(--text-secondary); max-width: 520px; margin: 0 auto 28px; line-height: 1.7; } .ny-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ========================================================================== MILJØPOLICY — Green accents on standard ISBAT dark theme Uses standard bg/fonts, emerald accents for environmental topic ========================================================================== */ /* Green accent button */ .sv-btn--green { background: linear-gradient(135deg, var(--emerald), #047857); color: #fff; box-shadow: 0 4px 24px rgba(16,185,129,.3), 0 0 60px rgba(16,185,129,.12); } .sv-btn--green:hover { box-shadow: 0 8px 40px rgba(16,185,129,.45), 0 0 80px rgba(16,185,129,.2); transform: translateY(-3px); } /* Green label variant */ .sv-label--green { color: var(--emerald); } .sv-label--green::before { background: var(--emerald); } /* Green hero badge variant */ .sv-hero-badge--green { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.2); color: var(--emerald); } .sv-hero-badge--green .sv-pulse-dot { background: var(--emerald); } /* Stats bar */ .sv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .sv-stat { text-align: center; padding: 32px 16px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); transition: all .4s var(--ease); } .sv-stat:hover { transform: translateY(-4px); border-color: rgba(56,189,248,.2); box-shadow: 0 12px 40px rgba(0,0,0,.3); } .sv-stat-num { font-family: var(--font-heading); font-size: var(--v24-fs-3xl); font-weight: 800; color: var(--emerald); line-height: 1; margin-bottom: 8px; } .sv-stat-label { font-size: var(--v24-fs-xs); color: var(--text-muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } /* Feature text-only (centered) */ .sv-feature-text-only { max-width: 800px; margin: 0 auto; text-align: center; } .sv-feature-text-only h2 { font-size: var(--v24-fs-3xl); margin-bottom: 20px; } .sv-feature-text-only p { color: var(--text-secondary); font-size: var(--v24-fs-md); line-height: 1.85; max-width: 720px; margin: 0 auto; } /* Feature text */ .sv-feature-text h2 { font-size: var(--v24-fs-3xl); margin-bottom: 20px; } .sv-feature-text p { color: var(--text-secondary); font-size: var(--v24-fs-md); line-height: 1.85; margin-bottom: 18px; } /* Feature list (checkmarks) */ .sv-feature-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 28px 0; } .sv-feature-list li { display: flex; align-items: flex-start; gap: 14px; font-size: var(--v24-fs-sm); color: var(--text-secondary); line-height: 1.7; } .sv-feature-list li svg { width: 20px; height: 20px; color: var(--emerald); flex-shrink: 0; margin-top: 3px; } /* Card grid (4-col icon cards) */ .sv-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .sv-card-grid .sv-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; position: relative; transition: all .6s var(--ease-expo); } .sv-card-grid .sv-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--brand-red), var(--ice-blue)); opacity: 0; transition: opacity .4s; } .sv-card-grid .sv-card:hover::before { opacity: 1; } .sv-card-grid .sv-card:hover { transform: translateY(-8px); border-color: rgba(56,189,248,.2); box-shadow: 0 24px 64px rgba(0,0,0,.4); } .sv-card-grid .sv-card-body { padding: 28px 24px; display: flex; flex-direction: column; flex: 1; } .sv-card-grid .sv-card-icon { width: 52px; height: 52px; border-radius: var(--radius-sm); background: rgba(56,189,248,.08); color: var(--ice-blue); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; border: 1px solid rgba(56,189,248,.12); } .sv-card-grid .sv-card-icon svg { width: 22px; height: 22px; } .sv-card-grid .sv-card h3 { font-size: var(--v24-fs-lg); font-weight: 700; margin-bottom: 12px; } .sv-card-grid .sv-card p { font-size: var(--v24-fs-sm); color: var(--text-secondary); line-height: 1.7; } /* Card logo (cert cards) */ .sv-card-logo { width: 100%; max-width: 140px; height: 72px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.92); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 20px; } .sv-card-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } /* CTA card (glass) */ .sv-cta-card { background: linear-gradient(160deg, rgba(11,17,34,.95), rgba(2,6,23,.98)); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; position: relative; box-shadow: 0 40px 100px rgba(0,0,0,.5); padding: 64px; text-align: center; } .sv-cta-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand-red), var(--ice-blue), var(--emerald)); box-shadow: 0 0 20px rgba(56,189,248,.2); } .sv-cta-card h2 { font-size: var(--v24-fs-3xl); margin-bottom: 16px; } .sv-cta-card p { color: var(--text-secondary); font-size: var(--v24-fs-md); max-width: 700px; margin: 0 auto 32px; line-height: 1.8; } .sv-cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; } /* ========================================================================== PROJECT DETAIL PAGE (pg- prefix) ========================================================================== */ /* Hero extras */ .pg-hero-meta { display: flex; flex-wrap: wrap; gap: 14px; margin: 24px 0 36px; } .pg-meta-pill { display: flex; align-items: center; gap: 8px; background: rgba(10,15,35,.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: var(--radius-full); padding: 8px 18px; font-size: var(--v24-fs-xs); font-weight: 600; color: var(--text-secondary); } .pg-meta-pill svg { width: 14px; height: 14px; color: var(--ice-blue); flex-shrink: 0; } .pg-meta-pill strong { color: var(--text-primary); } .pg-hero-type-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(56,189,248,.1); border: 1px solid rgba(56,189,248,.2); border-radius: var(--radius-full); padding: 7px 16px; margin-left: 10px; margin-bottom: 24px; font-size: var(--v24-fs-xxs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ice-blue); } /* Trust bar */ .pg-trust-bar { padding: 28px 0; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); background: linear-gradient(180deg,rgba(10,15,35,.4),transparent); position: relative; z-index: 2; } .pg-trust-inner { max-width: 900px; margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: clamp(24px,5vw,64px); flex-wrap: wrap; padding: 0 20px; } .pg-trust-item { display: flex; flex-direction: column; align-items: center; gap: 8px; } .pg-trust-item img { max-height: 60px; width: auto; object-fit: contain; background: rgba(255,255,255,.9); border-radius: 8px; padding: 6px 10px; transition: transform .3s var(--ease); } .pg-trust-item:hover img { transform: scale(1.06); } .pg-trust-item span { font-size: var(--v24-fs-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); } /* Specs section */ .pg-specs-section { padding: 80px 0; background: var(--bg-surface); position: relative; overflow: hidden; } .pg-specs-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 80% 50%,rgba(56,189,248,.06),transparent 65%); pointer-events: none; } .pg-specs-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: start; } .pg-status-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: var(--radius-full); font-size: var(--v24-fs-xxs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 28px; } .pg-status-badge::before { content: '●'; font-size: var(--v24-fs-xxs); } .pg-status-badge.done { background: rgba(16,185,129,.15); border: 1px solid rgba(16,185,129,.4); color: #10b981; } .pg-status-badge.ongoing { background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.4); color: #f59e0b; } .pg-status-badge.coming { background: rgba(56,189,248,.1); border: 1px solid rgba(56,189,248,.25); color: var(--ice-blue); } .pg-spec-glass { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 36px; box-shadow: 0 16px 48px rgba(0,0,0,.3); } .pg-specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .pg-spec-row { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: var(--radius-sm); background: rgba(255,255,255,.025); transition: background .2s var(--ease); } .pg-spec-row:hover { background: rgba(255,255,255,.05); } .pg-spec-row.full-width { grid-column: 1 / -1; } .pg-spec-key { font-size: var(--v24-fs-xxs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); } .pg-spec-val { font-size: var(--v24-fs-md); font-weight: 700; color: var(--text-primary); font-family: var(--font-heading); } .pg-spec-val.highlight { color: var(--ice-blue); } .pg-spec-intro { font-size: var(--v24-fs-md); color: var(--text-secondary); line-height: 1.85; } .pg-spec-intro p + p { margin-top: 16px; } /* Description body */ .pg-desc-body { padding: 80px 0; } .pg-ingress { font-size: var(--v24-fs-xl); color: var(--text-secondary); line-height: 1.8; margin-bottom: 36px; font-weight: 500; padding-bottom: 32px; border-bottom: 1px solid var(--glass-border); } .pg-body-text { font-size: var(--v24-fs-md); color: var(--text-secondary); line-height: 1.9; } .pg-body-text p + p { margin-top: 20px; } .pg-body-text h3 { font-size: var(--v24-fs-xl); color: var(--text-primary); margin: 36px 0 12px; font-weight: 700; } .pg-body-text strong { color: var(--text-primary); } /* Gallery */ .pg-gallery-section { padding: 100px 0; background: var(--bg-surface); position: relative; overflow: hidden; } .pg-gallery-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 20% 50%,rgba(255,0,51,.04),transparent 60%); pointer-events: none; } .pg-gal-grid { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 260px; gap: 10px; } .pg-gal-item { position: relative; overflow: hidden; border-radius: var(--radius-md); cursor: pointer; background: var(--bg-elevated); } .pg-gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s var(--ease); } .pg-gal-item:hover img { transform: scale(1.05); } .pg-gal-item.span-2 { grid-column: span 2; } .pg-gal-item.span-row { grid-row: span 2; } .pg-gal-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg,rgba(2,6,23,.8) 0%,transparent 50%); opacity: 0; transition: opacity .3s var(--ease); display: flex; align-items: flex-end; padding: 16px; } .pg-gal-item:hover .pg-gal-overlay { opacity: 1; } .pg-gal-caption { font-size: var(--v24-fs-xs); font-weight: 600; color: #fff; } /* Lightbox */ .pg-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(2,6,23,.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: none; align-items: center; justify-content: center; } .pg-lightbox.open { display: flex; } .pg-lb-img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: var(--radius-md); box-shadow: 0 32px 80px rgba(0,0,0,.7); } .pg-lb-close { position: absolute; top: 24px; right: 28px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: 50%; width: 44px; height: 44px; font-size: var(--v24-fs-lg); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s var(--ease); } .pg-lb-close:hover { background: rgba(255,0,51,.3); } .pg-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff; border-radius: 50%; width: 52px; height: 52px; font-size: var(--v24-fs-xl); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s var(--ease); } .pg-lb-nav:hover { background: rgba(255,255,255,.18); } .pg-lb-prev { left: 24px; } .pg-lb-next { right: 24px; } .pg-lb-counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-size: var(--v24-fs-xs); color: rgba(255,255,255,.6); font-weight: 600; } /* Related section */ .pg-related-section { padding: 80px 0; background: var(--bg-surface); } /* Category link grid */ .pg-link-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 14px; margin: 40px 0; } .pg-link-item { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-radius: var(--radius-md); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); color: var(--text-primary); text-decoration: none; transition: all .3s var(--ease); } .pg-link-item:hover { border-color: rgba(56,189,248,.3); background: rgba(56,189,248,.06); transform: translateY(-2px); } .pg-link-item svg { color: var(--ice-blue); flex-shrink: 0; } .pg-link-item span { font-size: var(--v24-fs-sm); font-weight: 600; } /* ========================================================================== RESPONSIVE — Pages ========================================================================== */ @media(max-width: 1100px) { .sv-svc-grid { grid-template-columns: repeat(2, 1fr); } .sv-why-grid { grid-template-columns: repeat(2, 1fr); } .sv-serts-grid { grid-template-columns: repeat(2, 1fr); } .sv-total-grid { grid-template-columns: 1fr; gap: 56px; } .sv-keydata-grid { grid-template-columns: repeat(2, 1fr); } .sv-cards-grid { grid-template-columns: repeat(2, 1fr); } .sv-card-grid { grid-template-columns: repeat(2, 1fr); } } @media(max-width: 1200px) { .pg-grid { grid-template-columns: repeat(3, 1fr); } } @media(max-width: 1024px) { .sv-intro-grid { grid-template-columns: 1fr; gap: 48px; } .sv-intro-img-float { position: relative; bottom: auto; left: auto; width: 100%; margin-top: 16px; } .sv-feature-grid { grid-template-columns: 1fr; gap: 48px; } .sv-main-grid { grid-template-columns: 1fr; gap: 40px; } .sv-feature-grid, .sv-feature-grid--reverse { grid-template-columns: 1fr; gap: 48px; } .sv-feature-grid--reverse .sv-feature-visual { order: 0; } } @media(max-width: 992px) { .sv-prod-grid { grid-template-columns: repeat(2, 1fr); } .sv-projects-grid { grid-template-columns: repeat(2, 1fr); } } @media(max-width: 900px) { .pg-grid { grid-template-columns: repeat(2, 1fr); } .sv-svc-grid { grid-template-columns: 1fr; } .sv-svc-card { min-height: 320px; } .sv-process-grid { grid-template-columns: repeat(2, 1fr); } .sv-process-grid::before { display: none; } .sv-desc-grid { grid-template-columns: 1fr; gap: 40px; } .sv-desc-sidebar { position: static; } .sv-gal-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; } .sv-gal-item:first-child { grid-row: auto; grid-column: auto; } .sv-gal-item:nth-child(4) { grid-column: auto; } } @media(max-width: 768px) { .sv-why-grid { grid-template-columns: 1fr; } .sv-serts-grid { grid-template-columns: 1fr; } .sv-total-mosaic { grid-template-columns: 1fr; } .sv-gal-grid { grid-template-columns: 1fr; } .sv-cards-grid { grid-template-columns: 1fr; } .sv-innbytte-grid { grid-template-columns: 1fr; } .sv-innbytte-benefits { flex-direction: column; align-items: center; } .sv-cta-btns { flex-direction: column; align-items: center; } .sv-cta-btns > * { width: 100%; text-align: center; justify-content: center; } .sv-main-section { padding: 64px 0; } .sv-cards-section { padding: 64px 0; } .ny-grid { grid-template-columns: 1fr; } .ny-toolbar { padding: 24px 0; } .ny-grid-wrapper { padding: 0 0 40px; } .ny-cta { padding: 60px 0; } .sv-cta-card { padding: 40px 24px; } .sv-stats { grid-template-columns: repeat(2, 1fr); } .sv-card-grid { grid-template-columns: 1fr; } .sv-why-card { padding: 36px 28px; } } @media(max-width: 640px) { .sv-form-row { grid-template-columns: 1fr; gap: 0; } .sv-hero-trust-item { font-size: var(--v24-fs-xxs); } } @media(max-width: 600px) { .pg-grid { grid-template-columns: 1fr; gap: 16px; } .sv-projects-grid { grid-template-columns: 1fr; } .sv-prod-grid { grid-template-columns: 1fr; } .sv-shop-grid { grid-template-columns: repeat(2, 1fr); } .sv-process-grid { grid-template-columns: 1fr; gap: 32px; } } @media(min-width: 769px) and (max-width: 1024px) { .ny-grid { grid-template-columns: repeat(2, 1fr); } } @media(min-width: 1025px) and (max-width: 1399px) { .ny-grid { grid-template-columns: repeat(3, 1fr); } } @media(min-width: 1400px) { .ny-grid { grid-template-columns: repeat(4, 1fr); } } @media(max-width: 900px) { .pg-specs-layout { grid-template-columns: 1fr; } .pg-gal-grid { grid-template-columns: repeat(3,1fr); } } @media(max-width: 640px) { .pg-gal-grid { grid-template-columns: repeat(2,1fr); } .pg-gal-item.span-2 { grid-column: auto; } .pg-gal-item.span-row { grid-row: auto; } .pg-specs-grid { grid-template-columns: 1fr; } .pg-hero-type-badge { margin-left: 0; } } @media(max-width: 400px) { .pg-gal-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; } .pg-link-grid { grid-template-columns: 1fr; } } /* —— Prosjektartikkel (nyhetsmal) —— */ .sv-hero--editorial.sv-hero--split-sky { background: radial-gradient(ellipse 140% 95% at 50% -5%, #0d1a30 0%, #071018 42%, #020617 100%); } .sv-hero--editorial.sv-hero--split-sky::before { background: radial-gradient(ellipse 92% 88% at 22% 46%, rgba(255,0,51,.26), transparent 58%), radial-gradient(ellipse 90% 90% at 78% 40%, rgba(56,189,248,.24), transparent 58%), radial-gradient(ellipse 110% 58% at 50% 100%, rgba(2,6,23,.9), transparent 62%), linear-gradient(180deg, rgba(2,6,23,.42) 0%, transparent 48%); } .sv-hero--editorial.sv-hero--split-sky .sv-hero-tagline { margin: clamp(10px, 2vw, 18px) auto clamp(26px, 4vw, 40px); padding: clamp(4px, 1vw, 12px) 0; color: rgba(240,244,248,.92); } .sv-hero--editorial.sv-hero--split-sky .sv-meta-pill { border-color: rgba(56,189,248,.35); background: rgba(10,15,35,.55); box-shadow: 0 0 0 1px rgba(56,189,248,.08); } .sv-hero--editorial.sv-hero--split-sky .sv-article-type-badge { border-color: rgba(56,189,248,.45); background: rgba(56,189,248,.08); } .sv-hero--editorial.sv-hero--split-sky .sv-hero-badge { border-color: rgba(255,0,51,.45); background: rgba(255,0,51,.08); } /* Editorial + Ken Burns-bakgrunn — kompakt hero */ .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns { position: relative; /* Full viewport — bildefyll, ingen stripe med sidebakgrunn under */ min-height: 100vh; min-height: 100dvh; padding-top: clamp(72px, 10vw, 104px); } .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-hero-bg { position: absolute; inset: 0; z-index: 0; } /* Nøytral sot over Ken Burns — kun sort, foto synlig */ .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns::before { z-index: 1; background: radial-gradient(ellipse 92% 88% at 50% 48%, rgba(0,0,0,.12) 0%, rgba(0,0,0,.34) 52%, rgba(0,0,0,.54) 100%), linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.14) 36%, rgba(0,0,0,.12) 58%, rgba(0,0,0,.42) 100%); } .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-container { z-index: 2; } .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-hero-content > div:first-child { gap: 4px 6px; margin-bottom: clamp(6px, 1.1vw, 11px); } .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns h1.sv-hero-title-stack { gap: clamp(2px, 0.55vw, 6px); margin-bottom: clamp(6px, 1.1vw, 11px); line-height: 1.03; } .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-hero-title-line1 { font-size: var(--v24-fs-3xl); } .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-hero-title-line2 { font-size: var(--v24-fs-xl); margin-top: -0.04em; } .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-hero-badge { padding: 5px 14px; font-size: var(--v24-fs-xxs); } .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-pulse-dot { width: 6px; height: 6px; } .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-article-type-badge { padding: 5px 12px; font-size: var(--v24-fs-xxs); } .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-article-meta { margin: clamp(4px, 0.9vw, 10px) 0 clamp(10px, 1.6vw, 16px); gap: 6px; } .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-meta-pill { padding: 5px 12px; font-size: var(--v24-fs-xs); gap: 6px; } .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-meta-pill i { font-size: var(--v24-fs-xxs); line-height: 1; } .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-hero-actions { gap: 10px; } .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-hero-actions .sv-btn { padding: 11px 20px; font-size: var(--v24-fs-xs); gap: 8px; } .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-hero-actions .sv-btn i { font-size: var(--v24-fs-xxs); } /* Lystlunden: episk hero + større artikkeltekst */ .isbat-page--prosjekt .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns { padding-top: clamp(80px, 12vw, 118px); } .isbat-page--prosjekt .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-hero-title-line1 { font-size: var(--v24-fs-4xl); text-shadow: 0 6px 40px rgba(0,0,0,.75), 0 2px 18px rgba(0,0,0,.45); } .isbat-page--prosjekt .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-hero-title-year { text-shadow: 0 0 36px rgba(56,189,248,.42), 0 3px 20px rgba(0,0,0,.45); } .isbat-page--prosjekt .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-hero-title-line2 { font-size: var(--v24-fs-xl); font-weight: 800; text-shadow: 0 4px 26px rgba(0,0,0,.72); } .isbat-page--prosjekt .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-hero-actions .sv-btn { padding: 13px 26px; font-size: var(--v24-fs-sm); font-weight: 700; letter-spacing: .03em; } .isbat-page--prosjekt .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-hero-content > div:first-child { gap: 10px 14px; margin-bottom: clamp(12px, 2vw, 20px); padding: 6px 10px; } .isbat-page--prosjekt .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-hero-badge { padding: 9px 20px; font-size: var(--v24-fs-xxs); letter-spacing: .11em; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 6px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); background: rgba(255,0,51,.2); border-color: rgba(255,0,51,.58); color: #fff; } .isbat-page--prosjekt .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-article-type-badge { padding: 9px 20px; font-size: var(--v24-fs-xxs); letter-spacing: .11em; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 6px 28px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08); background: rgba(56,189,248,.18); border-color: rgba(56,189,248,.58); color: #f0f9ff; } .isbat-page--prosjekt .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-pulse-dot { width: 7px; height: 7px; } .isbat-page--prosjekt .sv-article-section { padding: 40px 0 32px; } .isbat-page--prosjekt .sv-article-layout { gap: 20px 36px; } .isbat-page--prosjekt .sv-article-block .sv-label, .isbat-page--prosjekt .sv-article-block h2.sv-label { margin-bottom: 8px; } .isbat-page--prosjekt .sv-article-section .sv-article-text { font-size: var(--v24-fs-xl); line-height: 1.72; } .isbat-page--prosjekt .sv-article-section .sv-article-text p + p { margin-top: 12px; } .isbat-page--prosjekt #sv-galleri.sv-section--article-gal { padding-top: clamp(72px, 10vw, 112px); } .sv-hero--editorial .sv-container { position: relative; z-index: 1; } .sv-hero--editorial .sv-hero-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: min(52rem, 100%); margin: 0 auto; padding: 0 clamp(4px, 1.5vw, 8px); box-sizing: border-box; } .sv-hero--editorial .sv-hero-content > div:first-child { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px; margin-bottom: clamp(18px, 2.8vw, 26px); } .sv-hero--editorial .sv-hero-badge { margin-bottom: 0; } .sv-hero--editorial .sv-article-type-badge { margin-left: 0; margin-bottom: 0; } .sv-hero--editorial .sv-hero-tagline { max-width: min(38rem, 100%); margin: 0 auto; font-size: var(--v24-fs-xl); line-height: 1.68; color: var(--text-secondary); } .sv-hero--editorial .sv-article-meta { margin: clamp(22px, 3.2vw, 30px) 0 clamp(24px, 3.8vw, 34px); justify-content: center; } .sv-hero--editorial .sv-hero-actions { justify-content: center; width: 100%; gap: clamp(12px, 2vw, 16px); } @media (max-width: 600px) { .sv-hero--editorial { padding: clamp(52px, 14vw, 84px) 0 clamp(40px, 10vw, 64px); } .sv-hero--editorial .sv-hero-content { padding: 0; } } .sv-article-type-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(56,189,248,.1); border: 1px solid rgba(56,189,248,.2); border-radius: var(--radius-full); padding: 7px 16px; margin-left: 10px; font-size: var(--v24-fs-xxs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ice-blue); vertical-align: middle; } .sv-article-meta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 20px 0 28px; } .sv-meta-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(10,15,35,.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: var(--radius-full); padding: 8px 18px; font-size: var(--v24-fs-xs); font-weight: 600; color: var(--text-secondary); } .sv-meta-pill i { color: var(--ice-blue); } .sv-article-section { padding: 72px 0 56px; background: var(--bg-deep); } .sv-article-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 56px; align-items: start; } @media(max-width: 900px) { .sv-article-layout { grid-template-columns: 1fr; } } .sv-article-block .sv-label { margin-bottom: 12px; } /* h2.sv-label: correct outline without overriding .sv-label look */ .elementor-widget-html .sv-article-block h2.sv-label { font-family: var(--font-body); font-size: var(--v24-fs-xxs); font-weight: 700; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-red); } .sv-article-text { font-size: var(--v24-fs-md); color: var(--text-secondary); line-height: 1.85; } .sv-article-text p + p { margin-top: 16px; } .sv-article-details { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 28px 28px 24px; } .sv-article-details h3 { font-family: var(--font-heading); font-size: var(--v24-fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ice-blue); margin-bottom: 18px; } .sv-fact-row { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 12px 20px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: var(--v24-fs-sm); } .sv-fact-row:last-child { border-bottom: 0; } .sv-fact-k { color: var(--text-muted); font-weight: 600; } .sv-fact-v { color: var(--text-primary); font-weight: 600; } #sv-galleri.sv-section--article-gal { padding-top: 56px; padding-bottom: 88px; } /* Prosjekt-galleri: ikke bruk OM-oss-mosaikk (første/fjerde rute) på #svGalGrid */ #sv-galleri #svGalGrid { grid-template-rows: none; grid-auto-rows: 260px; align-content: start; } #sv-galleri #svGalGrid > .sv-gal-item:first-child { grid-row: auto; grid-column: auto; } #sv-galleri #svGalGrid > .sv-gal-item:nth-child(4) { grid-column: auto; } .sv-gal-item { cursor: pointer; } .sv-gal-item .sv-gal-caption-bar { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 14px 16px 16px; background: linear-gradient(0deg, rgba(2,6,23,.92) 0%, transparent 100%); pointer-events: none; } .sv-gal-caption { font-size: var(--v24-fs-xs); font-weight: 600; color: #fff; line-height: 1.3; } .sv-gal-loadmore-wrap { text-align: center; margin-top: 28px; } .sv-gal-loadmore-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: var(--radius-full); font-family: var(--font-body); font-size: var(--v24-fs-sm); font-weight: 700; background: rgba(56,189,248,.08); border: 1px solid rgba(56,189,248,.25); color: var(--ice-blue); cursor: pointer; transition: all .25s var(--ease); } .sv-gal-loadmore-btn:hover { background: rgba(56,189,248,.14); border-color: var(--ice-blue); } .sv-gal-loadmore-btn.sv-is-hidden { display: none; } .sv-lb-overlay { position: fixed; inset: 0; z-index: 100000; background: rgba(2,6,23,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; padding: 56px 16px 80px; } .sv-lb-overlay.is-active { opacity: 1; visibility: visible; } .sv-lb-overlay .sv-lb-swiper { position: relative; width: 100%; max-width: 1200px; height: min(75vh, 720px); margin: 0 auto; } .sv-lb-overlay .swiper-slide { display: flex; align-items: center; justify-content: center; } .sv-lb-overlay .swiper-slide img { max-width: 100%; max-height: min(75vh, 720px); width: auto; height: auto; object-fit: contain; border-radius: var(--radius-md); } .sv-lb-close-btn { position: absolute; top: 16px; right: 20px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; font-size: var(--v24-fs-xl); line-height: 1; cursor: pointer; transition: background .2s; } .sv-lb-close-btn:hover { background: rgba(255,0,51,.35); } .sv-lb-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: var(--v24-fs-xs); font-weight: 600; color: rgba(255,255,255,.55); z-index: 5; } .sv-lb-overlay .swiper-button-prev, .sv-lb-overlay .swiper-button-next { width: 48px !important; height: 48px !important; margin-top: 0 !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 12; color: #fff !important; background: rgba(2, 6, 23, 0.55); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; } .sv-lb-overlay .swiper-button-prev { left: 8px !important; } .sv-lb-overlay .swiper-button-next { right: 8px !important; } .sv-lb-overlay .swiper-button-prev:after, .sv-lb-overlay .swiper-button-next:after { font-size: var(--v24-fs-md); font-weight: 700 !important; } .sv-hero--editorial.sv-hero--with-kenburns .sv-hero-kb-nav { position: absolute; inset: 0; z-index: 4; pointer-events: none; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(8px, 2vw, 24px); } .sv-hero--editorial.sv-hero--with-kenburns .sv-hero-kb-btn { pointer-events: auto; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(2, 6, 23, 0.45); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: var(--v24-fs-md); transition: background .2s, border-color .2s; } .sv-hero--editorial.sv-hero--with-kenburns .sv-hero-kb-btn:hover { background: rgba(255, 0, 51, 0.35); border-color: rgba(255, 255, 255, 0.35); } @media (max-width: 600px) { .sv-hero--editorial.sv-hero--with-kenburns .sv-hero-kb-btn { width: 42px; height: 42px; } } .sv-thumb-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .sv-thumb-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; } .sv-thumb-link:hover { transform: translateY(-4px); border-color: rgba(56,189,248,.28); box-shadow: 0 16px 44px rgba(0,0,0,.35); } .sv-thumb-link-img { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-card); } .sv-thumb-link-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .sv-thumb-link:hover .sv-thumb-link-img img { transform: scale(1.04); } .sv-thumb-link-body { padding: 18px 20px 20px; } .sv-thumb-link-body h3 { font-size: var(--v24-fs-md); font-weight: 800; margin-bottom: 8px; color: var(--text-primary); font-family: var(--font-heading); } .sv-thumb-link-body span { font-size: var(--v24-fs-xs); color: var(--text-muted); font-weight: 600; } .sv-nh-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 12px; } .sv-nh-search-wrapper { flex: 1 1 240px; max-width: 420px; } .sv-nh-search-input { width: 100%; padding: 12px 16px; background: var(--glass-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-body); font-size: var(--v24-fs-sm); } .sv-nh-search-input:focus { outline: 2px solid rgba(56,189,248,.4); outline-offset: 2px; border-color: var(--ice-blue); } .sv-nh-sort-wrapper { display: flex; align-items: center; gap: 10px; } .sv-nh-sort-label { font-size: var(--v24-fs-xs); color: var(--text-muted); font-weight: 600; } .sv-nh-sort-select { padding: 10px 14px; background: var(--glass-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); font-size: var(--v24-fs-sm); font-family: var(--font-body); } .sv-nh-meta { margin-bottom: 20px; } .sv-nh-count { font-size: var(--v24-fs-xs); color: var(--text-muted); font-weight: 600; } .sv-nh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } .sv-nh-card { display: flex; flex-direction: column; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); text-decoration: none; color: inherit; overflow: hidden; transition: transform .3s, border-color .3s, box-shadow .3s; } .sv-nh-card:hover { transform: translateY(-3px); border-color: rgba(56,189,248,.22); box-shadow: 0 12px 36px rgba(0,0,0,.32); } .sv-nh-card-thumb { height: 160px; overflow: hidden; background: var(--bg-card); } .sv-nh-card-thumb img { width: 100%; height: 100%; object-fit: cover; } .sv-nh-card-body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; } .sv-nh-card-title { font-family: var(--font-heading); font-size: var(--v24-fs-sm); font-weight: 700; line-height: 1.35; margin-bottom: 10px; color: var(--text-primary); } .sv-nh-card-meta { margin-top: auto; font-size: var(--v24-fs-xs); color: var(--text-muted); } .sv-nh-empty { display: none; text-align: center; padding: 48px 20px; color: var(--text-muted); } .sv-nh-empty.is-visible { display: block; } .sv-nh-loadmore-wrap { text-align: center; margin-top: 36px; } .sv-nh-card.is-hidden { display: none; } /* ── Lystlunden: nyhetsmal-parallell (brødsmule, hero-artikkel, videre lenker, nyhetsgrid, CTA) ── */ .isbat-page--prosjekt .ps-breadcrumb { padding: 20px 0; border-bottom: 1px solid var(--glass-border); background: var(--bg-surface); } .isbat-page--prosjekt .ps-breadcrumb-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--v24-fs-xs); color: var(--text-muted); } .isbat-page--prosjekt .ps-breadcrumb-inner a { color: var(--text-muted); transition: color .2s; } .isbat-page--prosjekt .ps-breadcrumb-inner a:hover { color: var(--ice-blue); } .isbat-page--prosjekt .ps-breadcrumb-inner .ps-bc-sep { opacity: .4; user-select: none; } .isbat-page--prosjekt .ps-breadcrumb-inner .ps-bc-current { color: var(--text-secondary); font-weight: 600; } .isbat-page--prosjekt .sv-article-layout { grid-template-columns: 1fr; max-width: 860px; margin: 0 auto; gap: clamp(36px, 5vw, 52px); } .isbat-page--prosjekt .sv-article-text .sv-article-lead { font-size: var(--v24-fs-xl); line-height: 1.75; color: var(--text-primary); } .isbat-page--prosjekt .sv-hero--ps-article.sv-hero--editorial { min-height: min(92vh, 920px); padding: 0; display: flex; flex-direction: column; } .isbat-page--prosjekt .sv-hero--ps-article .sv-container { position: relative; z-index: 2; flex: 1; display: flex; align-items: flex-end; padding-bottom: clamp(48px, 8vw, 100px); padding-top: clamp(72px, 12vw, 120px); } .isbat-page--prosjekt .sv-hero--ps-article .sv-hero-content { text-align: left; align-items: flex-start; max-width: 820px; margin: 0 auto 0 0; width: 100%; } .isbat-page--prosjekt .sv-hero--ps-article .sv-hero-content > div:first-child { justify-content: flex-start; } .isbat-page--prosjekt .sv-hero--ps-article h1.sv-hero-title--article { font-family: var(--font-heading); font-size: var(--v24-fs-4xl); font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 clamp(18px, 2.8vw, 26px); max-width: min(22ch, 100%); text-shadow: 0 4px 36px rgba(0,0,0,.55), 0 0 48px rgba(56,189,248,.08); } .isbat-page--prosjekt .sv-hero--ps-article .sv-article-meta { justify-content: flex-start; } .isbat-page--prosjekt .sv-hero--ps-article .sv-hero-actions { justify-content: flex-start; } .isbat-page--prosjekt .sv-hero--ps-article.sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns { padding-top: 0; } #videre-lenker .sv-thumb-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } #videre-lenker .sv-thumb-link { display: flex; flex-direction: row; align-items: center; gap: 0; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; color: inherit; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; } #videre-lenker .sv-thumb-link:hover { transform: translateY(-3px); border-color: var(--border-glow); box-shadow: 0 12px 36px rgba(0,0,0,.28); } #videre-lenker .sv-thumb-top:not(.sv-thumb-top--icon) { display: none; } #videre-lenker .sv-thumb-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px 14px 0; flex: 1; } #videre-lenker .sv-thumb-body h3 { font-size: var(--v24-fs-sm); line-height: 1.3; margin: 0; font-family: var(--font-heading); font-weight: 700; } #videre-lenker .sv-thumb-body p { margin: 0; font-size: var(--v24-fs-xs); line-height: 1.5; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #videre-lenker .sv-thumb-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--v24-fs-xxs); font-weight: 700; color: var(--brand-red); margin-top: 2px; } #videre-lenker .sv-thumb-link:hover .sv-thumb-arrow i { transform: translateX(3px); } @media (max-width: 768px) { #videre-lenker .sv-thumb-links { grid-template-columns: 1fr; } } .isbat-nyheter-gallery { --nh-ice: #6699cc; --nh-bg: #0a0f1e; --nh-card: #0f172a; --nh-border: rgba(255,255,255,.1); background: var(--nh-bg); padding: 80px 28px; font-family:var(--isbat-font-body); } .isbat-nyheter-inner { max-width: 1320px; margin: 0 auto; } .isbat-nyheter-header { margin-bottom: 16px; } .isbat-nyheter-header h2 { font-family:var(--isbat-font-heading); font-size: var(--v24-fs-3xl); font-weight: 800; color: #f1f5f9; margin-bottom: 8px; } .isbat-nyheter-header h2 span { color: var(--nh-ice); } .isbat-nyheter-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--nh-border); } .isbat-nh-search-wrapper { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; max-width: 400px; } .isbat-nh-search-input { width: 100%; padding: 12px 18px; background: rgba(255,255,255,.05); border: 1px solid var(--nh-border); border-radius: 10px; color: #fff; font-size: var(--v24-fs-sm); font-family: inherit; transition: .3s; } .isbat-nh-search-input::placeholder { color: rgba(184,197,212,.7); } .isbat-nh-search-input:hover, .isbat-nh-search-input:focus { border-color: var(--nh-ice); outline: none; } .isbat-nh-sort-wrapper { display: flex; align-items: center; gap: 10px; } .isbat-nh-sort-label { font-size: var(--v24-fs-xs); color: #b8c5d4; font-weight: 600; } .isbat-nh-sort-select { padding: 10px 16px; background: rgba(255,255,255,.05); border: 1px solid var(--nh-border); border-radius: 10px; color: #fff; font-size: var(--v24-fs-xs); font-family: inherit; cursor: pointer; transition: .3s; } .isbat-nh-sort-select:hover { border-color: var(--nh-ice); } .isbat-nh-sort-select option { background: #0f172a; color: #fff; } .isbat-nh-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; } .isbat-nh-count { font-size: var(--v24-fs-sm); color: #b8c5d4; font-weight: 700; } .isbat-nh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; } @media (max-width: 1000px) { .isbat-nh-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .isbat-nh-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .isbat-nh-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } @media (max-width: 400px) { .isbat-nh-grid { grid-template-columns: 1fr; } } .isbat-nh-card { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 10/11; display: block; cursor: pointer; background: var(--nh-card); border: 1px solid var(--nh-border); transition: transform .4s ease, border-color .3s ease, box-shadow .4s ease; text-decoration: none; color: inherit; contain: layout style paint; } .isbat-nh-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; opacity: .8; } .isbat-nh-card:hover img { transform: scale(1.08); opacity: .4; } .isbat-nh-card:hover { border-color: var(--nh-ice); box-shadow: 0 20px 50px rgba(0,0,0,.5); transform: translateY(-4px); } .isbat-nh-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px 14px 14px; background: linear-gradient(0deg, rgba(2,6,23,.95) 30%, transparent); pointer-events: none; } .isbat-nh-card h3 { font-family:var(--isbat-font-heading); color: #fff; font-size: var(--v24-fs-sm); margin: 0 0 5px 0; line-height: 1.2; } .isbat-nh-date { font-size: var(--v24-fs-xxs); color: #b8c5d4; } .isbat-nh-empty { display: none; padding: 24px; color: #b8c5d4; font-weight: 700; text-align: center; font-size: var(--v24-fs-lg); } .isbat-nh-loadmore-wrap { text-align: center; margin: 32px 0 12px; } .isbat-nh-loadmore-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; background: rgba(15,23,42,.8); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; color: #f1f5f9; font-family:var(--isbat-font-heading); font-size: var(--v24-fs-sm); font-weight: 600; cursor: pointer; transition: border-color .3s, color .3s, transform .3s, box-shadow .3s; } .isbat-nh-loadmore-btn:hover { border-color: rgba(102,153,204,.4); color: #6699cc; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,.3); } .isbat-nh-loadmore-btn svg { width: 18px; height: 18px; transition: transform .3s; } .isbat-nh-loadmore-btn:hover svg { transform: translateY(3px); } .isbat-page--prosjekt .ps-cta-section { background: linear-gradient(135deg, rgba(0,51,153,.12), rgba(255,0,51,.06)); padding: 64px 0; position: relative; z-index: 1; } .isbat-page--prosjekt .ps-cta-inner { max-width: 860px; margin: 0 auto; padding: 0 24px; text-align: center; } .isbat-page--prosjekt .ps-cta-desc { color: var(--text-secondary); font-size: var(--v24-fs-md); line-height: 1.8; max-width: 540px; margin: 0 auto 32px; } .isbat-page--prosjekt .ps-cta-buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .isbat-page--prosjekt .ps-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 34px; border-radius: var(--radius-sm); border: none; cursor: pointer; font-family: var(--font-body); font-size: var(--v24-fs-sm); font-weight: 700; letter-spacing: .02em; transition: background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); } .isbat-page--prosjekt .ps-btn svg { width: 14px; height: 14px; transition: transform .3s; } .isbat-page--prosjekt .ps-btn:hover svg { transform: translateX(3px); } .isbat-page--prosjekt .ps-btn--red { background: var(--brand-red); color: #fff; } .isbat-page--prosjekt .ps-btn--red:hover { background: var(--brand-red-deep); box-shadow: 0 8px 30px var(--brand-red-glow); transform: translateY(-2px); } .isbat-page--prosjekt .ps-btn--ghost { background: rgba(255,255,255,.08); color: var(--text-primary); border: 1px solid var(--glass-border); } .isbat-page--prosjekt .ps-btn--ghost:hover { background: rgba(255,255,255,.14); border-color: var(--ice-blue); color: var(--ice-blue); } /* ========================================================================== ISHELLA V2.2 — Mappeharmonisering Konsistent på tvers av prosjektfiler (klonet med malen) ========================================================================== */ /* --- Seksjonsrytme --- */ .pg-specs-section, .pg-desc-body, .pg-gallery-section, .pg-related-section { padding-top: var(--space-section-y); padding-bottom: var(--space-section-y); } .sv-final-cta { padding: var(--space-section-y) 0; } /* --- Brødsmulesti (bar-variant) --- */ .sv-breadcrumb-bar { position: relative; z-index: 4; padding: 16px 0 18px; background: rgba(10, 15, 35, 0.75); backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .sv-breadcrumb-bar .sv-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 6px; list-style: none; margin: 0; padding: 0; font-size: var(--v24-fs-xs); font-weight: 600; color: var(--text-muted); } .sv-breadcrumb-bar .sv-breadcrumb a { color: var(--text-muted); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease); } .sv-breadcrumb-bar .sv-breadcrumb a:hover { color: var(--ice-blue); border-bottom-color: rgba(56, 189, 248, 0.35); } .sv-breadcrumb-bar .sv-breadcrumb li[aria-current="page"] { color: var(--text-primary); font-weight: 700; } .sv-breadcrumb-bar .sv-breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 10px; opacity: .35; font-weight: 500; } /* Klassisk brødsmulesti øverst i main — samme premium stripe */ main#hovedinnhold > nav.sv-breadcrumb:first-of-type, main#hovedinnhold > nav.sv-breadcrumb-bar:first-of-type { padding: 16px 0 18px; background: rgba(10, 15, 35, 0.75); backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* --- Hero: sterkere overlay, subtil ISBAT-blå, bedre kontrast --- */ section.sv-hero--standard .sv-hero-overlay, .sv-hero.sv-hero--standard .sv-hero-overlay { background: radial-gradient(ellipse 110% 90% at 50% 100%, rgba(2, 6, 23, 0.9) 0%, transparent 52%), linear-gradient(165deg, rgba(0, 51, 153, 0.28) 0%, transparent 38%), linear-gradient(0deg, rgba(2, 6, 23, 0.92) 0%, rgba(2, 6, 23, 0.45) 38%, rgba(2, 6, 23, 0.2) 100%); } /* --- Prosjekt- og kategorikort --- */ .pg-grid { gap: var(--grid-gap, 20px); } .pg-card { border-color: rgba(255, 255, 255, 0.11); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); } a.pg-card:focus-visible { outline: 2px solid var(--ice-blue); outline-offset: 3px; box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12); } .pg-link-item:focus-visible { outline: 2px solid var(--ice-blue); outline-offset: 2px; } /* --- Trust / spesifikasjoner --- */ .pg-trust-inner { gap: clamp(28px, 5vw, 56px); } .pg-spec-glass { border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 20px 56px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(56, 189, 248, 0.06); } /* --- Seksjonshierarki --- */ main#hovedinnhold .sv-header { margin-bottom: clamp(40px, 5vw, 56px); } main#hovedinnhold .sv-title + .sv-desc { margin-top: 8px; } /* --- Tabeller i widget (fallback) --- */ .elementor-widget-html table { width: 100%; border-collapse: collapse; font-size: var(--v24-fs-sm); color: var(--text-secondary); background: rgba(255, 255, 255, 0.02); border: 1px solid var(--glass-border); border-radius: var(--radius-md); overflow: hidden; } .elementor-widget-html thead { background: rgba(0, 51, 153, 0.15); } .elementor-widget-html th, .elementor-widget-html td { padding: 14px 18px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .elementor-widget-html th { font-family: var(--font-heading); font-weight: 700; font-size: var(--v24-fs-xxs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .elementor-widget-html tr:last-child td { border-bottom: none; } /* --- Mobil: touchmål og CTA-stabling --- */ @media (max-width: 768px) { .sv-btn { min-height: 48px; justify-content: center; } .sv-hero-actions, .sv-final-cta-actions { flex-direction: column; align-items: stretch; } .sv-hero-actions .sv-btn, .sv-final-cta-actions .sv-btn { width: 100%; max-width: 100%; } } /* === Migrated from WPCode 1009732 ishella v25 baseline CSS === */ :root{ --isbat-brand-primary:#ff1744;--isbat-brand-primary-hover:#ff3b61;--isbat-brand-primary-deep:#cc0f35;--isbat-brand-secondary:#2dd4ff; --isbat-bg-base:#040816;--isbat-bg-surface:#0d1426;--isbat-bg-elevated:#151f34; --isbat-text-primary:#f8fbff;--isbat-text-secondary:#d7e2ee;--isbat-text-muted:#aebfd1; --isbat-border-subtle:rgba(255,255,255,.12); --isbat-radius-sm:12px;--isbat-radius-md:16px;--isbat-radius-lg:22px;--isbat-radius-full:999px; --isbat-font-heading:'Inter',system-ui,-apple-system,sans-serif;--isbat-font-body:'Inter',system-ui,-apple-system,sans-serif;--isbat-font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; --isbat-fs-xxs:.75rem;--isbat-fs-xs:.8125rem;--isbat-fs-sm:.9375rem;--isbat-fs-md:1rem;--isbat-fs-lg:1.125rem;--isbat-fs-xl:clamp(1.25rem,1.6vw,1.5rem);--isbat-fs-2xl:clamp(1.5rem,2.5vw,2rem);--isbat-fs-3xl:clamp(1.875rem,3.5vw,2.75rem);--isbat-fs-4xl:clamp(2.25rem,5vw,3.5rem);--isbat-fs-hero:clamp(2.5rem,7vw,5rem); --isbat-lh-tight:1.12;--isbat-lh-body:1.6;--isbat-ls-tight:-.02em;--isbat-ls-label:.08em; --isbat-s-1:.25rem;--isbat-s-2:.5rem;--isbat-s-3:.75rem;--isbat-s-4:1rem;--isbat-s-5:1.25rem;--isbat-s-6:1.5rem;--isbat-s-7:1.75rem;--isbat-s-8:2rem;--isbat-s-9:2.25rem;--isbat-s-10:2.5rem;--isbat-s-11:2.75rem;--isbat-s-12:3rem;--isbat-s-13:3.25rem;--isbat-s-14:3.5rem;--isbat-s-15:3.75rem;--isbat-s-16:4rem;--isbat-s-17:4.25rem;--isbat-s-18:4.5rem;--isbat-s-19:4.75rem;--isbat-s-20:5rem;--isbat-s-21:5.25rem;--isbat-s-22:5.5rem;--isbat-s-23:5.75rem;--isbat-s-24:6rem; --v25-brand-primary:var(--isbat-brand-primary);--v25-brand-primary-hover:var(--isbat-brand-primary-hover);--v25-brand-primary-deep:var(--isbat-brand-primary-deep);--v25-brand-secondary:var(--isbat-brand-secondary); --v25-bg-base:var(--isbat-bg-base);--v25-bg-surface:var(--isbat-bg-surface);--v25-bg-elevated:var(--isbat-bg-elevated); --v25-text-primary:var(--isbat-text-primary);--v25-text-secondary:var(--isbat-text-secondary);--v25-text-muted:var(--isbat-text-muted); --v25-border-subtle:var(--isbat-border-subtle);--v25-radius-sm:var(--isbat-radius-sm);--v25-radius-md:var(--isbat-radius-md);--v25-radius-pill:var(--isbat-radius-full); --v25-font-heading:var(--isbat-font-heading);--v25-font-body:var(--isbat-font-body); --v25-fs-xxs:var(--isbat-fs-xxs);--v25-fs-xs:var(--isbat-fs-xs);--v25-fs-sm:var(--isbat-fs-sm);--v25-fs-md:var(--isbat-fs-md);--v25-fs-lg:var(--isbat-fs-lg);--v25-fs-xl:var(--isbat-fs-xl);--v25-fs-2xl:var(--isbat-fs-2xl);--v25-fs-3xl:var(--isbat-fs-3xl);--v25-fs-4xl:var(--isbat-fs-4xl);--v25-fs-hero:var(--isbat-fs-hero); --v24-brand-primary:var(--isbat-brand-primary);--v24-brand-primary-hover:var(--isbat-brand-primary-hover);--v24-brand-primary-deep:var(--isbat-brand-primary-deep);--v24-brand-secondary:var(--isbat-brand-secondary); --v24-bg-base:var(--isbat-bg-base);--v24-bg-surface:var(--isbat-bg-surface);--v24-bg-elevated:var(--isbat-bg-elevated); --v24-text-primary:var(--isbat-text-primary);--v24-text-secondary:var(--isbat-text-secondary);--v24-text-muted:var(--isbat-text-muted); --v24-border-subtle:var(--isbat-border-subtle);--v24-radius-sm:var(--isbat-radius-sm);--v24-radius-md:var(--isbat-radius-md);--v24-radius-pill:var(--isbat-radius-full); --v24-font-heading:var(--isbat-font-heading);--v24-font-body:var(--isbat-font-body); --v24-fs-xxs:var(--isbat-fs-xxs);--v24-fs-xs:var(--isbat-fs-xs);--v24-fs-sm:var(--isbat-fs-sm);--v24-fs-md:var(--isbat-fs-md);--v24-fs-lg:var(--isbat-fs-lg);--v24-fs-xl:var(--isbat-fs-xl);--v24-fs-2xl:var(--isbat-fs-2xl);--v24-fs-3xl:var(--isbat-fs-3xl);--v24-fs-4xl:var(--isbat-fs-4xl);--v24-fs-hero:var(--isbat-fs-hero); --v24-lh-tight:var(--isbat-lh-tight);--v24-lh-body:var(--isbat-lh-body); --brand-red:var(--isbat-brand-primary);--brand-red-hover:var(--isbat-brand-primary-hover);--brand-red-deep:var(--isbat-brand-primary-deep); --ice-blue:var(--isbat-brand-secondary);--ice-blue-light:#7be5ff; --bg-deep:var(--isbat-bg-base);--bg-surface:var(--isbat-bg-surface);--bg-elevated:var(--isbat-bg-elevated);--bg-card:var(--isbat-bg-surface); --text-primary:var(--isbat-text-primary);--text-secondary:var(--isbat-text-secondary);--text-muted:var(--isbat-text-muted); --border-subtle:var(--isbat-border-subtle);--font-heading:var(--isbat-font-heading);--font-body:var(--isbat-font-body);--font-mono:var(--isbat-font-mono); }.v24-page{background:var(--isbat-bg-base);color:var(--isbat-text-primary);font-family:var(--isbat-font-body);} .v24-page h1, .v24-page h2, .v24-page h3, .v24-page h4{font-family:var(--isbat-font-heading);line-height:var(--isbat-lh-tight);letter-spacing:var(--isbat-ls-tight);} /* === Migrated from WPCode 1009736 ishella v26 extensions CSS === */ :root{ /* Easing curves (used widely as transition timing-function) */ --ease: cubic-bezier(.22, 1, .36, 1); --ease-expo: cubic-bezier(.19, 1, .22, 1); /* Legacy radius aliases (point at V2.4 tokens) */ --radius-sm: var(--v24-radius-sm); --radius-md: var(--v24-radius-md); --radius-lg: 22px; --radius-full: var(--v24-radius-pill); /* Accent colors */ --emerald: #34d399; /* === V2.6 product colors === */ --isbat-src-bergvarme: #7be5ff; --isbat-src-luftvann: #2dd4ff; --isbat-src-fjernvarme: #4ade80; --isbat-src-bio: #22c55e; --isbat-src-pshi: #ff1744; /* === V2.6 responsive grid utility === */ --isbat-grid-auto-fit: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); --isbat-grid-auto-fit-sm: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); --isbat-grid-auto-fit-lg: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); /* === Standardiserte breakpoints === */ --isbat-bp-tablet: 600px; --isbat-bp-laptop: 900px; --isbat-bp-desktop: 1200px; --isbat-bp-wide: 1600px; } /* === Migrated from WPCode 1009737 ishella v3 brand overrides CSS === */ /* === Google Fonts: Outfit + Plus Jakarta Sans === */ /* === Token overrides (cascade beats v2.5 baseline) === */ :root { --isbat-blue: #003399; --isbat-red: #FF0033; --bg-deep: #020617; --isbat-bg-base: #020617; --isbat-brand-primary: #E30613; --isbat-brand-primary-hover: #ff1f37; --isbat-brand-primary-deep: #b8050f; --brand-red: #E30613; --brand-red-hover: #ff1f37; --brand-red-deep: #b8050f; --isbat-font-heading: 'Outfit', system-ui, -apple-system, sans-serif; --isbat-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; } /* === Base typography rules === */ html, body { font-family: var(--isbat-font-body); line-height: 1.7; background: var(--isbat-bg-base); } h1, h2, h3, h4, h5, h6, .elementor-widget-html h1, .elementor-widget-html h2, .elementor-widget-html h3, .elementor-widget-html h4, .elementor-widget-html h5, .elementor-widget-html h6 { font-family: var(--isbat-font-heading); font-weight: 800; letter-spacing: -0.02em; } button, .sv-btn, .ps-btn, [class*="btn--primary"], [class*="btn--ghost"], [class*="btn--ice"], input, select, textarea, label { font-family: var(--isbat-font-body); font-weight: 500; }table, code, pre, kbd, samp, .sv-spec, [class*="-table"], [class*="-spec"]{ font-family: var(--isbat-font-mono); } /* === Migrated from WPCode 1009943 ISBAT polish CSS === */ /* ============================================================ ISBAT POLISH 2026-04-26 — knapper, hero-overlays, kunstgress ============================================================ */ /* --------- 1) PRIMARY CTA-knapper: bedre lesbarhet ---------- */ .sv-btn.sv-btn--primary, .sv-btn--primary, button.sv-btn--primary, a.sv-btn--primary { font-weight: 700 !important; letter-spacing: 0.045em !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important; background: linear-gradient(180deg, #ff1f37 0%, #E30613 50%, #c80512 100%) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 -1px 0 rgba(0, 0, 0, 0.25) inset, 0 8px 24px rgba(227, 6, 19, 0.32), 0 2px 6px rgba(0, 0, 0, 0.35) !important; transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s, background .18s !important; } .sv-btn.sv-btn--primary:hover, .sv-btn--primary:hover, button.sv-btn--primary:hover, a.sv-btn--primary:hover { background: linear-gradient(180deg, #ff3b53 0%, #ff1f37 50%, #d80614 100%) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -1px 0 rgba(0, 0, 0, 0.30) inset, 0 12px 32px rgba(227, 6, 19, 0.45), 0 4px 10px rgba(0, 0, 0, 0.40) !important; transform: translateY(-1px); } .sv-btn.sv-btn--primary:active, .sv-btn--primary:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, 0 4px 12px rgba(227, 6, 19, 0.28) !important; } /* Sekundære knapper (sv-btn--ghost / outline) får også bedre kontrast */ .sv-btn.sv-btn--ghost, .sv-btn--ghost, .sv-btn--outline { font-weight: 600 !important; letter-spacing: 0.04em !important; border: 1.5px solid rgba(255, 255, 255, 0.32) !important; background: rgba(255, 255, 255, 0.04) !important; backdrop-filter: blur(8px); transition: border-color .18s, background .18s, transform .18s; } .sv-btn.sv-btn--ghost:hover, .sv-btn--ghost:hover, .sv-btn--outline:hover { border-color: rgba(45, 212, 255, 0.55) !important; background: rgba(45, 212, 255, 0.08) !important; color: #c4f3ff !important; transform: translateY(-1px); } /* --------- 2) HERO-overlays: lysere så bilder ses ---------- */ .sv-hero-bg::after { background: linear-gradient(135deg, rgba(4, 8, 22, 0.55) 0%, rgba(4, 8, 22, 0.30) 50%, rgba(4, 8, 22, 0.50) 100%) !important; } .sv-hero--editorial::before, .sv-hero--ps-article::before { background: radial-gradient(92% 88% at 50% 48%, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.18) 52%, rgba(0, 0, 0, 0.36) 100%), linear-gradient( rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.08) 36%, rgba(0, 0, 0, 0.30) 100%) !important; } /* Forbedre tekst-lesbarhet i hero-tittel ved å legge til subtle tekst-skygge */ .sv-hero h1, .sv-hero-title, .sv-hero-title--article { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30); }body.page[class*="kunstgressbaner"] .sv-section{ padding-block: clamp(48px, 6vw, 88px); } body.page[class*="kunstgressbaner"] .sv-svc-card{ padding: clamp(20px, 2.5vw, 32px); }body.page[class*="kunstgressbaner"] .sv-cards-grid{ gap: clamp(16px, 2vw, 28px) !important; } /* Forbedret accent-farge på 'span.accent' — brúk ISBAT-rød med subtil glow */ .sv-title .accent, .accent { color: #ff3b53; text-shadow: 0 0 24px rgba(255, 23, 68, 0.18); } /* Pills/labels får mer kontrast */ .sv-label, .sv-label--center { background: rgba(45, 212, 255, 0.10); border: 1px solid rgba(45, 212, 255, 0.35); color: #c4f3ff; font-weight: 700; letter-spacing: 0.16em; padding: 6px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; } /* --------- 5) Form-felter på kalkulator: bedre kontrast ---------- */ #gf select, #gf input, #gf textarea { border: 1.5px solid rgba(255, 255, 255, 0.14) !important; background: rgba(255, 255, 255, 0.04) !important; color: #f1f5ff !important; transition: border-color .18s, background .18s; } #gf select:hover, #gf input:hover, #gf textarea:hover { border-color: rgba(45, 212, 255, 0.32) !important; } #gf select:focus, #gf input:focus, #gf textarea:focus { outline: 2px solid #2dd4ff; outline-offset: 2px; border-color: rgba(45, 212, 255, 0.55) !important; background: rgba(45, 212, 255, 0.06) !important; } /* --------- 6) Reduced motion respekt ---------- */ @media (prefers-reduced-motion: reduce) { .sv-btn--primary, .sv-btn--primary:hover, .sv-btn--primary:active, .sv-btn--ghost:hover{ transform: none !important; transition: none !important; } } /* === Migrated from WPCode 1009733 button readable override CSS === */ /* Force Dark Premium body font + UI weight on all button variants */ .sv-btn, .sv-btn--primary, .sv-btn--ghost, .sv-btn--outline, .sv-btn--ice, .sv-btn--hero-ice, .ps-btn, .ps-btn--red, .ps-btn--ghost, .sv-split-btn, .sv-split-btn--ice, .sv-split-btn--red, .sv-show-more-btn, .pg-card-overlay-btn{ font-family: var(--isbat-font-body, 'Plus Jakarta Sans', system-ui, sans-serif) !important; font-weight: 500 !important; } .sv-btn--primary{background:#E30613 !important;color:#fff !important;border:1px solid #E30613 !important;backdrop-filter:none !important} .sv-btn--primary:hover{background:#b8050f !important;border-color:#b8050f !important;box-shadow:0 8px 30px rgba(227,6,19,.4) !important} .sv-btn--ghost{background:rgba(255,255,255,.12) !important;color:#fff !important;border:1px solid rgba(255,255,255,.42) !important} .sv-btn--ghost:hover{background:rgba(255,255,255,.22) !important;border-color:#fff !important;color:#fff !important} .sv-btn--outline{background:rgba(255,255,255,.12) !important;color:#fff !important;border:1px solid rgba(255,255,255,.42) !important} .sv-btn--outline:hover{background:rgba(255,255,255,.22) !important;border-color:#fff !important;color:#fff !important} .sv-btn--ice{background:#2dd4ff !important;color:#020617 !important;border:1px solid #2dd4ff !important} .sv-btn--ice:hover{background:#50e0ff !important;border-color:#50e0ff !important;color:#020617 !important;box-shadow:0 8px 30px rgba(45,212,255,.4) !important} .sv-btn--hero-ice{color:#fff !important;border:1px solid rgba(56,189,248,.6) !important} .sv-btn--hero-ice:hover{color:#fff !important;border-color:#2dd4ff !important} .ps-btn, .isbat-page--prosjekt .ps-btn{color:#fff !important} .ps-btn--red, .isbat-page--prosjekt .ps-btn--red{background:#E30613 !important;color:#fff !important} .ps-btn--red:hover, .isbat-page--prosjekt .ps-btn--red:hover{background:#b8050f !important;color:#fff !important} .ps-btn--ghost, .isbat-page--prosjekt .ps-btn--ghost{background:rgba(255,255,255,.14) !important;color:#fff !important;border:1px solid rgba(255,255,255,.42) !important} .ps-btn--ghost:hover, .isbat-page--prosjekt .ps-btn--ghost:hover{background:rgba(255,255,255,.24) !important;color:#fff !important;border-color:#fff !important} .sv-split-btn--ice{background:linear-gradient(135deg,#2dd4ff,#0891b2) !important;color:#0f172a !important} .sv-split-btn--red{background:linear-gradient(135deg,#E30613,#b8050f) !important;color:#fff !important} .sv-show-more-btn{background:rgba(56,189,248,.12) !important;color:#2dd4ff !important;border:1px solid rgba(56,189,248,.55) !important} .sv-show-more-btn:hover{background:rgba(56,189,248,.22) !important;border-color:#2dd4ff !important;color:#fff !important} .pg-card-overlay-btn{background:rgba(255,255,255,.18) !important;color:#fff !important;border:1px solid rgba(255,255,255,.5) !important} .pg-card-overlay-btn:hover{background:rgba(255,255,255,.28) !important;border-color:#fff !important} .sv-btn:focus-visible, .ps-btn:focus-visible, .sv-split-btn:focus-visible, .sv-show-more-btn:focus-visible{outline:3px solid #ffc107 !important;outline-offset:3px !important} /* Mobile symmetry pass for legacy SV/Elementor pages */ @media (max-width: 700px) { body .elementor-widget-html .sv-container, body .sv-icebear-page .sv-container, body .sv-page .sv-container, body .v24-page .sv-container { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: clamp(16px, 5vw, 22px) !important; padding-right: clamp(16px, 5vw, 22px) !important; box-sizing: border-box !important; } body .elementor-widget-html .sv-hero-content, body .sv-icebear-page .sv-hero-content, body .sv-page .sv-hero-content, body .v24-page .sv-hero-content { padding-left: 0 !important; padding-right: 0 !important; } body .elementor-widget-html .sv-hero-copy, body .sv-icebear-page .sv-hero-copy, body .sv-page .sv-hero-copy, body .v24-page .sv-hero-copy { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } }