/* Generated from embedded styles for post 1009222. */ /* Hero centered (contractor-site inspired) */ .sv-hero--editorial{min-height:90vh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;} .sv-hero--editorial .sv-container{width:100%;} .sv-hero-content{text-align:center!important;max-width:1100px;margin:0 auto!important;padding:80px 24px;position:relative;z-index:2;} .sv-hero-title--article{text-align:center!important;font-family:var(--font-heading,Inter,sans-serif);font-size:clamp(3rem,9vw,7rem)!important;font-weight:900!important;line-height:1.02!important;letter-spacing:-.03em!important;text-transform:uppercase!important;margin:0 auto 32px!important;color:#f8fbff!important;-webkit-text-fill-color:#f8fbff!important;background:none!important;filter:drop-shadow(0 2px 8px rgba(0,0,0,.55)) drop-shadow(0 0 24px rgba(0,0,0,.35));} .sv-hero-actions{display:flex!important;flex-wrap:wrap;justify-content:center!important;gap:14px;margin:0 auto!important;} .sv-hero-content>p,.sv-hero-content .sv-hero-subtitle{margin:0 auto 24px;max-width:680px;line-height:1.6;color:#cbd5e1;} /* Gallery v4: scrollable viewport with full FileBird folder */ .sv-gal-viewport{position:relative;max-height:none;overflow-y:auto;overflow-x:hidden;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(15,23,42,.4);padding:18px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:rgba(56,189,248,.45) rgba(15,23,42,.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 20px 60px rgba(0,0,0,.45);} .sv-gal-viewport::-webkit-scrollbar{width:10px;} .sv-gal-viewport::-webkit-scrollbar-track{background:rgba(15,23,42,.45);border-radius:8px;} .sv-gal-viewport::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(56,189,248,.45),rgba(255,0,51,.4));border-radius:8px;border:2px solid rgba(15,23,42,.4);} .sv-gal-viewport::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(56,189,248,.65),rgba(255,0,51,.55));} .sv-gal-viewport:focus-visible{outline:2px solid rgba(56,189,248,.6);outline-offset:3px;} .sv-gal-viewport::after{content:"";position:sticky;bottom:0;left:0;right:0;display:block;height:32px;margin:-32px -18px 0;background:linear-gradient(180deg,transparent,rgba(2,6,23,.85));pointer-events:none;} .sv-gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;} .sv-gal-item{position:relative;overflow:hidden;border-radius:14px;cursor:pointer;background:rgba(15,23,42,.5);border:1px solid rgba(255,255,255,.06);aspect-ratio:4/3;} .sv-gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.22,.61,.36,1);} .sv-gal-item:hover img{transform:scale(1.06);} .sv-gal-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(2,6,23,.55) 100%);opacity:.7;pointer-events:none;transition:opacity .3s;} .sv-gal-item:hover::after{opacity:1;} .sv-gal-caption-bar{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;z-index:2;} .sv-gal-caption{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6);} .sv-gal-meta{display:flex;justify-content:center;margin-top:14px;} .sv-gal-meta-count{font-size:12px;color:#94a3b8;font-weight:600;letter-spacing:.05em;background:rgba(15,23,42,.55);padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.08);} @media(max-width:1024px){.sv-gal-grid{grid-template-columns:repeat(3,1fr);}} @media(max-width:720px){.sv-gal-grid{grid-template-columns:repeat(2,1fr);}.sv-gal-viewport{max-height:none;}} @media(max-width:420px){.sv-gal-grid{grid-template-columns:1fr;}} /* Redesigned contact section (kept from previous) */ .ps-cta-section{padding:clamp(64px,8vw,120px) 20px;background:radial-gradient(ellipse 80% 90% at 50% 0%,rgba(255,0,51,.12),transparent 60%),radial-gradient(ellipse 80% 80% at 50% 100%,rgba(56,189,248,.08),transparent 60%);position:relative;overflow:hidden;} .ps-cta-inner{max-width:1100px;margin:0 auto;position:relative;z-index:1;} .ps-cta-card{background:rgba(15,23,42,.55);backdrop-filter:blur(22px) saturate(1.2);border:1px solid rgba(255,255,255,.14);border-radius:28px;padding:clamp(40px,5vw,72px) clamp(28px,4vw,60px);box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);position:relative;overflow:hidden;text-align:center;} .ps-cta-card::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#ff0033,#38bdf8,#10b981,#38bdf8,#ff0033);background-size:200% 100%;animation:psHueRoll 14s linear infinite;} @keyframes psHueRoll{0%{background-position:0% 50%}100%{background-position:200% 50%}} .ps-cta-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;background:rgba(255,0,51,.14);border:1px solid rgba(255,0,51,.32);color:#ffb3c0;font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;} .ps-cta-eyebrow .ps-pulse{width:8px;height:8px;border-radius:50%;background:#ff0033;animation:psPulse 2.2s infinite;} @keyframes psPulse{0%{box-shadow:0 0 0 0 rgba(255,0,51,.55)}70%{box-shadow:0 0 0 12px rgba(255,0,51,0)}100%{box-shadow:0 0 0 0 rgba(255,0,51,0)}} .ps-cta-card h2{font-size:clamp(28px,3.6vw,46px);font-weight:900;line-height:1.05;margin:0 0 14px;letter-spacing:-.02em;color:#fff;} .ps-cta-card h2 .accent{color:#2dd4ff;background:none;-webkit-text-fill-color:#2dd4ff;} .ps-cta-card .ps-cta-desc{max-width:640px;margin:0 auto 28px;font-size:clamp(15px,1.4vw,17px);line-height:1.6;color:#cbd5e1;} .ps-cta-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:560px;margin:0 auto 32px;} .ps-cta-stat{padding:14px 12px;background:rgba(15,23,42,.55);border:1px solid rgba(255,255,255,.12);border-radius:14px;} .ps-cta-stat .ps-cta-stat-num{font-family:JetBrains Mono,monospace;font-size:clamp(18px,2vw,26px);font-weight:900;color:#7dd3fc;line-height:1;margin-bottom:4px;} .ps-cta-stat .ps-cta-stat-lbl{font-size:10px;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em;font-weight:700;} .ps-cta-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:18px;} .ps-cta-buttons .ps-btn{padding:14px 24px;font-size:14px;font-weight:800;border-radius:12px;display:inline-flex;align-items:center;gap:10px;transition:transform .25s,box-shadow .25s,border-color .25s;} .ps-cta-buttons .ps-btn--red{background:linear-gradient(135deg,#ff0033,#c00026);color:#fff;border:none;box-shadow:0 8px 26px rgba(255,0,51,.35);} .ps-cta-buttons .ps-btn--red:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(255,0,51,.5);} .ps-cta-buttons .ps-btn--ghost{background:rgba(255,255,255,.06);border:1px solid rgba(125,211,252,.32);color:#dbeafe;backdrop-filter:blur(12px);} .ps-cta-buttons .ps-btn--ghost:hover{transform:translateY(-3px);border-color:rgba(125,211,252,.55);background:rgba(56,189,248,.12);} .ps-cta-fineprint{font-size:12px;color:#94a3b8;margin:0;} @media(max-width:560px){.ps-cta-stats{grid-template-columns:1fr;}} /* Lightbox fullscreen + autoplay polish */ .sv-gal-item{cursor:pointer;} .sv-gal-item::after{pointer-events:none;} .sv-gal-item img{pointer-events:none;} .sv-lb-overlay:fullscreen,.sv-lb-overlay:-webkit-full-screen{background:#000!important;padding:0!important;width:100vw!important;height:100vh!important;}.sv-lb-overlay:fullscreen .sv-lb-swiper,.sv-lb-overlay:-webkit-full-screen .sv-lb-swiper{width:100vw!important;max-width:100vw!important;height:100vh!important;max-height:100vh!important;margin:0!important;}.sv-lb-overlay:fullscreen .swiper,.sv-lb-overlay:-webkit-full-screen .swiper{width:100vw!important;height:100vh!important;}.sv-lb-overlay:fullscreen .swiper-wrapper,.sv-lb-overlay:-webkit-full-screen .swiper-wrapper{height:100vh!important;}.sv-lb-overlay:fullscreen .swiper-slide,.sv-lb-overlay:-webkit-full-screen .swiper-slide{width:100vw!important;height:100vh!important;display:flex!important;align-items:center!important;justify-content:center!important;}.sv-lb-overlay:fullscreen .swiper-slide img,.sv-lb-overlay:-webkit-full-screen .swiper-slide img{width:auto!important;height:auto!important;max-width:100vw!important;max-height:100vh!important;object-fit:contain!important;border-radius:0!important;display:block!important;image-rendering:auto;} /* General lightbox image quality */ .sv-lb-swiper .swiper-slide img{image-rendering:auto;-webkit-image-rendering:auto;will-change:transform;} .sv-lb-overlay:fullscreen .sv-lb-swiper,.sv-lb-overlay:-webkit-full-screen .sv-lb-swiper{height:100vh!important;max-width:100vw!important;} .sv-lb-overlay:fullscreen .swiper-slide img,.sv-lb-overlay:-webkit-full-screen .swiper-slide img{max-height:100vh!important;max-width:100vw!important;border-radius:0!important;} .sv-lb-overlay .swiper-button-prev,.sv-lb-overlay .swiper-button-next{color:#fff;opacity:.85;width:54px;height:54px;border-radius:50%;background:rgba(15,23,42,.55);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);transition:background .25s,transform .25s,border-color .25s;} .sv-lb-overlay .swiper-button-prev:hover,.sv-lb-overlay .swiper-button-next:hover{background:rgba(255,0,51,.5);border-color:rgba(255,255,255,.35);transform:scale(1.05);} .sv-lb-overlay .swiper-button-prev::after,.sv-lb-overlay .swiper-button-next::after{font-size:18px;font-weight:900;} /* Lightbox toolbar (play + fullscreen buttons) */ .sv-lb-toolbar{position:fixed;top:24px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:10002;} .sv-lb-tool{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:rgba(15,23,42,.65);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.18);color:#fff;font-family:Inter,sans-serif;font-size:12px;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:background .25s,border-color .25s,transform .2s;} .sv-lb-tool:hover{background:rgba(255,0,51,.45);border-color:rgba(255,255,255,.35);transform:translateY(-1px);} .sv-lb-tool.is-active{background:rgba(255,0,51,.55);border-color:rgba(255,255,255,.4);} .sv-lb-tool i{font-size:13px;} .sv-lb-tool-lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;} @media(max-width:560px){.sv-lb-tool-lbl{display:none;}.sv-lb-tool{padding:9px 12px;}} .sv-lb-counter{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:7px 18px;border-radius:999px;background:rgba(15,23,42,.65);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);color:#fff;font-family:JetBrains Mono,monospace;font-size:13px;font-weight:700;letter-spacing:.06em;z-index:10001;} /* Utforsk prosjekter cards — bedre UX */ .pg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;} .pg-card{position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:rgba(15,23,42,.55);border:1px solid rgba(255,255,255,.08);text-decoration:none;color:inherit;transition:transform .35s cubic-bezier(.22,.61,.36,1),border-color .3s,box-shadow .4s;} .pg-card:hover{transform:translateY(-6px);border-color:rgba(56,189,248,.4);box-shadow:0 28px 60px rgba(0,0,0,.45),0 0 0 1px rgba(56,189,248,.1) inset;} .pg-card-thumb{position:relative;aspect-ratio:4/3;overflow:hidden;} .pg-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s cubic-bezier(.22,.61,.36,1);} .pg-card:hover .pg-card-thumb img{transform:scale(1.08);} .pg-card-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(2,6,23,.85) 100%);pointer-events:none;} .pg-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1;} .pg-card-tag{display:inline-flex;align-items:center;width:max-content;padding:4px 10px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:rgba(56,189,248,.14);color:#7dd3fc;border:1px solid rgba(56,189,248,.32);margin-bottom:4px;} .pg-card-body h3{margin:0;font-size:clamp(15px,1.3vw,18px);font-weight:800;line-height:1.25;color:#f1f5f9;} .pg-card-year{font-family:JetBrains Mono,monospace;font-size:12px;color:#94a3b8;letter-spacing:.05em;margin-top:auto;padding-top:6px;} /* Tab buttons polish */ .pg-filter-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:36px;} .pg-filter-tab{padding:10px 22px;min-height:42px;border-radius:999px;background:rgba(15,23,42,.45);border:1px solid rgba(255,255,255,.1);color:#cbd5e1;font-weight:700;font-size:13px;letter-spacing:.04em;cursor:pointer;transition:all .25s;} .pg-filter-tab:hover{border-color:rgba(56,189,248,.4);color:#fff;background:rgba(56,189,248,.08);} .pg-filter-tab.active{background:rgba(56,189,248,.16);border-color:rgba(56,189,248,.5);color:#fff;box-shadow:0 6px 18px rgba(56,189,248,.18);} .pg-panel-cta{display:flex;justify-content:center;margin-top:32px;} @media(max-width:1024px){.pg-grid{grid-template-columns:repeat(3,1fr);}} @media(max-width:720px){.pg-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:420px){.pg-grid{grid-template-columns:1fr;}} /* Utforsk prosjekter - storre header */ #andre-prosjekter-title{font-size:clamp(2.25rem,5.5vw,4rem)!important;font-weight:900!important;line-height:1.05!important;letter-spacing:-.025em!important;} #andre-prosjekter .sv-label--center{font-size:clamp(15px,1.6vw,20px)!important;font-weight:900!important;letter-spacing:.22em!important;text-transform:uppercase!important;margin-bottom:20px!important;padding:10px 22px!important;display:inline-block!important;border-radius:999px!important;background:linear-gradient(135deg,rgba(255,0,51,.18),rgba(56,189,248,.16))!important;border:1.5px solid rgba(255,0,51,.42)!important;color:#fff!important;box-shadow:0 6px 22px rgba(255,0,51,.22),inset 0 1px 0 rgba(255,255,255,.08)!important;text-shadow:0 1px 4px rgba(0,0,0,.45)!important;} #andre-prosjekter .sv-desc{font-size:clamp(15px,1.4vw,18px)!important;max-width:680px;margin:14px auto 0;line-height:1.6;}.sv-gal-viewport .sv-gal-item:nth-child(n+13){display:none;}.sv-lb-overlay{display:none!important;}.sv-lb-overlay.is-open,.sv-lb-overlay[aria-hidden="false"]{display:flex!important;} #brx-content.wordpress>h1:first-child{display:none!important} #brx-content.wordpress{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important} #brx-content .elementor-widget-html{overflow:visible!important;overflow-x:clip!important} 400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap"); /* === BASE === */ /* ========================================================================== ISHELLA V2.1 — Dark Premium Design System base.css — Design tokens, reset, grid, utilities Isbaneteknikk AS · isbaneteknikk.no ========================================================================== */ /* ========================================================================== SCOPED RESET ========================================================================== */ .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, .elementor-widget-html ol { 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) */ /* ISBAT: hero-slides + breadcrumb-bar fix v1 */ .sv-hero-bg, .sv-hero-slides { position: absolute; inset: 0; z-index: 0; } .sv-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease-in-out; background-size: cover; background-position: center; background-repeat: no-repeat; } .sv-hero-slide.active, .sv-hero-slide.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, .sv-hero-dot.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); } .{ display: none; } .pg-grid.pg-grid--expanded .{ 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 .:nth-child(10) { animation-delay: .06s; } .pg-grid.pg-grid--expanded .:nth-child(11) { animation-delay: .12s; } .pg-grid.pg-grid--expanded .: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--lystlunden .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns, .isbat-page--prosjekt .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns { padding-top: clamp(80px, 12vw, 118px); } .isbat-page--lystlunden .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-hero-title-line1, .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--lystlunden .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-hero-title-year, .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--lystlunden .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-hero-title-line2, .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--lystlunden .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-hero-actions .sv-btn, .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--lystlunden .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-hero-content > div:first-child, .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--lystlunden .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-hero-badge, .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--lystlunden .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-article-type-badge, .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--lystlunden .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-pulse-dot, .isbat-page--prosjekt .sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns .sv-pulse-dot { width: 7px; height: 7px; } .isbat-page--lystlunden .sv-article-section { padding: 40px 0 32px; } .isbat-page--lystlunden .sv-article-layout { gap: 20px 36px; } .isbat-page--lystlunden .sv-article-block .sv-label, .isbat-page--lystlunden .sv-article-block h2.sv-label { margin-bottom: 8px; } .isbat-page--lystlunden .sv-article-section .sv-article-text { font-size: var(--v24-fs-xl); line-height: 1.72; } .isbat-page--lystlunden .sv-article-section .sv-article-text p + p { margin-top: 12px; } .isbat-page--lystlunden #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--lystlunden .ps-breadcrumb, .isbat-page--prosjekt .ps-breadcrumb { padding: 20px 0; border-bottom: 1px solid var(--glass-border); background: var(--bg-surface); } .isbat-page--lystlunden .ps-breadcrumb-inner, .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--lystlunden .ps-breadcrumb-inner a, .isbat-page--prosjekt .ps-breadcrumb-inner a { color: var(--text-muted); transition: color .2s; } .isbat-page--lystlunden .ps-breadcrumb-inner a:hover, .isbat-page--prosjekt .ps-breadcrumb-inner a:hover { color: var(--ice-blue); } .isbat-page--lystlunden .ps-breadcrumb-inner .ps-bc-sep, .isbat-page--prosjekt .ps-breadcrumb-inner .ps-bc-sep { opacity: .4; user-select: none; } .isbat-page--lystlunden .ps-breadcrumb-inner .ps-bc-current, .isbat-page--prosjekt .ps-breadcrumb-inner .ps-bc-current { color: var(--text-secondary); font-weight: 600; } .isbat-page--lystlunden .sv-article-layout { grid-template-columns: 1fr; max-width: 860px; margin: 0 auto; gap: clamp(36px, 5vw, 52px); } .isbat-page--lystlunden .sv-article-text .sv-article-lead { font-size: var(--v24-fs-xl); line-height: 1.75; color: var(--text-primary); } .isbat-page--lystlunden .sv-hero--ps-article.sv-hero--editorial, .isbat-page--prosjekt .sv-hero--ps-article.sv-hero--editorial { min-height: min(92vh, 920px); padding: 0; display: flex; flex-direction: column; } .isbat-page--lystlunden .sv-hero--ps-article .sv-container, .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--lystlunden .sv-hero--ps-article .sv-hero-content, .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--lystlunden .sv-hero--ps-article .sv-hero-content > div:first-child, .isbat-page--prosjekt .sv-hero--ps-article .sv-hero-content > div:first-child { justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 10px 14px; } .isbat-page--lystlunden .sv-hero--ps-article h1.sv-hero-title--article, .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--lystlunden .sv-hero--ps-article .sv-article-meta, .isbat-page--prosjekt .sv-hero--ps-article .sv-article-meta { justify-content: flex-start; width: 100%; max-width: min(820px, 100%); gap: 8px 10px; margin: 0 0 clamp(14px, 2.2vw, 22px); box-sizing: border-box; } .isbat-page--lystlunden .sv-hero--ps-article .sv-hero-actions, .isbat-page--prosjekt .sv-hero--ps-article .sv-hero-actions { justify-content: flex-start; } .isbat-page--lystlunden .sv-hero--ps-article.sv-hero--editorial.sv-hero--split-sky.sv-hero--with-kenburns, .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(4, minmax(0, 1fr)); gap: 20px; } #videre-lenker .sv-thumb-link { display: flex; flex-direction: column; min-height: 250px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; color: inherit; transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); box-shadow: 0 2px 10px rgba(0,0,0,.16); } #videre-lenker .sv-thumb-link:hover { transform: translateY(-6px); border-color: var(--border-glow); box-shadow: 0 18px 48px rgba(0,0,0,.32); } #videre-lenker .sv-thumb-top { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-elevated); } #videre-lenker .sv-thumb-top img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .4s var(--ease); filter: brightness(.88); } #videre-lenker .sv-thumb-link:hover .sv-thumb-top img { transform: scale(1.05); filter: brightness(1); } #videre-lenker .sv-thumb-top::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(2,6,23,.55) 0%, rgba(2,6,23,.08) 55%, transparent 100%); pointer-events: none; } #videre-lenker .sv-thumb-icon { position: absolute; top: 14px; left: 14px; z-index: 2; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(2,6,23,.72); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ice-blue); box-shadow: 0 8px 24px rgba(0,0,0,.24); } #videre-lenker .sv-thumb-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; flex: 1; } #videre-lenker .sv-thumb-body h3 { font-size: var(--v24-fs-md); line-height: 1.25; margin: 0; font-family: var(--font-heading); font-weight: 800; } #videre-lenker .sv-thumb-body p { margin: 0; font-size: var(--v24-fs-xs); line-height: 1.65; color: var(--text-secondary); flex: 1; } #videre-lenker .sv-thumb-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--v24-fs-xs); font-weight: 700; color: var(--brand-red); } #videre-lenker .sv-thumb-link:hover .sv-thumb-arrow i { transform: translateX(3px); } @media (max-width: 1100px) { #videre-lenker .sv-thumb-links { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { #videre-lenker .sv-thumb-links { grid-template-columns: 1fr; gap: 16px; } #videre-lenker .sv-thumb-link { min-height: unset; } } .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--lystlunden .ps-cta-section, .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--lystlunden .ps-cta-inner, .isbat-page--prosjekt .ps-cta-inner { max-width: 860px; margin: 0 auto; padding: 0 24px; text-align: center; } .isbat-page--lystlunden .ps-cta-desc, .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--lystlunden .ps-cta-buttons, .isbat-page--prosjekt .ps-cta-buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .isbat-page--lystlunden .ps-btn, .isbat-page--prosjekt .ps-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 34px; min-height: 48px; 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--lystlunden .ps-btn svg, .isbat-page--prosjekt .ps-btn svg { width: 14px; height: 14px; transition: transform .3s; } .isbat-page--lystlunden .ps-btn:hover svg, .isbat-page--prosjekt .ps-btn:hover svg { transform: translateX(3px); } .isbat-page--lystlunden .ps-btn--red, .isbat-page--prosjekt .ps-btn--red { background: var(--brand-red); color: #fff; } .isbat-page--lystlunden .ps-btn--red:hover, .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--lystlunden .ps-btn--ghost, .isbat-page--prosjekt .ps-btn--ghost { background: rgba(255,255,255,.08); color: var(--text-primary); border: 1px solid var(--glass-border); } .isbat-page--lystlunden .ps-btn--ghost:hover, .isbat-page--prosjekt .ps-btn--ghost:hover { background: rgba(255,255,255,.14); border-color: var(--ice-blue); color: var(--ice-blue); } /* Landing: tre kolonner på større skjermer */ .isbat-page--prosjekt .sv-card-grid--landing { grid-template-columns: repeat(3, 1fr); } @media (max-width: 1024px) { .isbat-page--prosjekt .sv-card-grid--landing { grid-template-columns: 1fr; } } /* ========================================================================== 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); background: transparent; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; position: static; z-index: auto; } .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%); } /* Mini-hero (landing / hub): samme ISBAT-premium som mappeharmonisering */ section.sv-hero--mini .sv-hero-overlay, .sv-hero.sv-hero--mini .sv-hero-overlay { background: radial-gradient(ellipse 110% 90% at 50% 100%, rgba(2, 6, 23, 0.88) 0%, transparent 52%), linear-gradient(165deg, rgba(0, 51, 153, 0.24) 0%, transparent 40%), linear-gradient(0deg, rgba(2, 6, 23, 0.9) 0%, rgba(2, 6, 23, 0.42) 40%, rgba(2, 6, 23, 0.15) 100%); } /* --- Kategorikort (prosjektoversikt) — samme finish som pg-card --- */ .pg-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap, 20px); } @media (max-width: 640px) { .pg-cat-grid { grid-template-columns: 1fr; } } a.pg-cat-card { display: block; text-decoration: none; color: inherit; background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.11); border-radius: var(--radius-lg); overflow: hidden; position: relative; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); transition: transform .4s var(--ease-expo), border-color .4s, box-shadow .4s; } a.pg-cat-card:hover { transform: translateY(-7px); border-color: rgba(56, 189, 248, 0.3); box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5); } a.pg-cat-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-cat-img { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; background: var(--bg-elevated); } .pg-cat-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.88); transition: transform .65s var(--ease), filter .45s; } a.pg-cat-card:hover .pg-cat-img img { transform: scale(1.08); filter: brightness(1); } .pg-cat-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 24px 22px 22px; background: linear-gradient(0deg, rgba(2, 6, 23, 0.92) 0%, rgba(2, 6, 23, 0.2) 50%, transparent 100%); pointer-events: none; } .pg-cat-count { font-size: var(--v24-fs-xxs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ice-blue); margin-bottom: 8px; font-family: var(--font-mono); } .pg-cat-title { font-family: var(--font-heading); font-size: var(--v24-fs-xl); font-weight: 800; color: #fff; margin: 0; line-height: 1.2; text-wrap: balance; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); } .pg-cat-arrow { position: absolute; top: 20px; right: 20px; font-size: var(--v24-fs-xl); font-weight: 700; color: rgba(255, 255, 255, 0.85); transition: transform 0.3s var(--ease), color 0.3s; } a.pg-cat-card:hover .pg-cat-arrow { transform: translateX(4px); color: var(--ice-blue); } /* --- 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; } /* Topp-hub: badge-rad som kategorisider / Lystlunden-mønster */ .sv-hero--mini .sv-hub-hero-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; } .sv-hero--mini .sv-hub-hero-badges .sv-article-type-badge { margin-left: 0; } /* --- 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; } /* --- CTA label/title (erstatter inline styles) --- */ .sv-label--center-flex { justify-content: center; display: flex; } .sv-title--cta { font-size: var(--v24-fs-2xl); margin-bottom: 16px; text-align: center; } /* --- 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%; } } img[loading="lazy"]{background:none!important;animation:none!important;} .sv-title,.pg-card-title{text-wrap:balance;} .sv-faq-q{cursor:pointer;} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #38bdf8!important;outline-offset:3px!important;} @media (prefers-reduced-motion: reduce){.sv-reveal{opacity:1!important;transform:none!important;filter:none!important;}.sv-grain,#sv-particles,.sv-hero-cta::before,.sv-hero-cta::after{display:none!important;}*{scroll-behavior:auto!important;}} @media (max-width:900px){#sv-particles,.sv-grain{display:none!important;}} .pg-card-tag{display:inline-block;font-size:var(--v24-fs-xxs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ice-blue);margin-bottom:10px;} /* ISBAT spacing v2 — trimmed for hub page */ .elementor-widget-html .sv-section-header, .elementor-widget-html .sv-header{margin-bottom:clamp(40px,6vw,72px)!important;} .elementor-widget-html .sv-label{margin-bottom:clamp(14px,2.2vw,20px)!important;} .elementor-widget-html .sv-title{margin-bottom:clamp(18px,2.5vw,28px)!important;} .elementor-widget-html .sv-section{padding-top:clamp(88px,10vw,120px)!important;padding-bottom:clamp(88px,10vw,120px)!important;} .elementor-widget-html .sv-hero--mini .sv-hero-content{padding-bottom:clamp(56px,8vw,84px)!important;} .elementor-widget-html .sv-hub-grid{gap:clamp(16px,2.5vw,22px)!important;} .elementor-widget-html .sv-hub-mesh{padding-top:clamp(48px,7vw,88px)!important;} html{scroll-padding-top:0.75rem;} @media(max-width:375px){ .elementor-widget-html .sv-hero--mini .sv-hero-content{padding-top:100px!important;padding-bottom:48px!important;} .elementor-widget-html h1{font-size:var(--v24-fs-2xl);} .elementor-widget-html .sv-hero-subtitle{font-size:var(--v24-fs-sm);} .elementor-widget-html .sv-hero-actions{flex-direction:column!important;gap:10px!important;width:100%!important;} .elementor-widget-html .sv-btn{font-size:var(--v24-fs-xs);padding:13px 22px!important;width:100%!important;justify-content:center!important;} .elementor-widget-html .sv-container{padding:0 16px!important;} .elementor-widget-html .sv-title{font-size:var(--v24-fs-xl);} .elementor-widget-html .sv-desc{font-size:var(--v24-fs-sm);} .elementor-widget-html .pg-grid,.elementor-widget-html .pg-cat-grid,.elementor-widget-html .sv-card-grid{grid-template-columns:1fr!important;gap:14px!important;} .elementor-widget-html .sv-hero-badge{font-size:var(--v24-fs-xxs);padding:5px 12px!important;} .elementor-widget-html .ps-cta-buttons{flex-direction:column!important;gap:10px!important;} .elementor-widget-html .ps-btn{width:100%!important;justify-content:center!important;text-align:center!important;} } .sv-reveal,.sv-reveal-left,.sv-reveal-right{opacity:1!important;transform:none!important;transition:none!important;filter:none!important;} /* ISHELLA 2.5 project system: compact, tactile, responsive */ html,body{margin:0;background:#020617;} .elementor-widget-html{--i25-bg:#020617;--i25-panel:#0b1220;--i25-panel-2:#111a2d;--i25-line:rgba(226,232,240,.12);--i25-line-strong:rgba(125,211,252,.32);--i25-text:#edf6ff;--i25-muted:#9fb0c5;--i25-ice:#38bdf8;--i25-red:#ff0033;--i25-green:#34d399;background:var(--i25-bg);color:var(--i25-text);} .elementor-widget-html .sv-grain{opacity:.004!important;} .elementor-widget-html .sv-orb{opacity:.012!important;} .elementor-widget-html .sv-hero--mini{min-height:clamp(360px,58svh,620px)!important;display:flex;padding:0!important;align-items:flex-end;overflow:hidden;background:#020617;} .elementor-widget-html .sv-hero--mini .sv-hero-bg,.elementor-widget-html .sv-hero--mini .sv-hero-bg img{position:absolute!important;inset:0;width:100%;height:100%;} .elementor-widget-html .sv-hero--mini .sv-hero-bg img{object-fit:cover;filter:saturate(1.02) contrast(1.04) brightness(.9);object-position:center 38%;} .elementor-widget-html .sv-hero--mini .sv-hero-overlay{background:linear-gradient(180deg,rgba(2,6,23,.02) 0%,rgba(2,6,23,.24) 38%,rgba(2,6,23,.82) 100%),radial-gradient(ellipse 85% 58% at 50% 72%,rgba(56,189,248,.11),transparent 72%)!important;} .elementor-widget-html .sv-hero--mini .sv-hero-content{width:100%;max-width:1120px;margin:0 auto!important;text-align:center;padding:clamp(112px,14vw,170px) 24px clamp(48px,7vw,76px)!important;position:relative;z-index:2;} .elementor-widget-html .sv-hero--mini h1{max-width:1100px;margin-inline:auto!important;font-size:clamp(2.15rem,5.55vw,4.65rem)!important;line-height:1.02!important;letter-spacing:0!important;text-wrap:balance;text-shadow:0 3px 22px rgba(0,0,0,.58)!important;} .elementor-widget-html .sv-section{padding-top:clamp(70px,8vw,108px)!important;padding-bottom:clamp(70px,8vw,108px)!important;} .elementor-widget-html .sv-section:first-of-type,.elementor-widget-html .sv-divider + .sv-section{padding-top:clamp(50px,6vw,78px)!important;} .elementor-widget-html .sv-header{margin-bottom:clamp(34px,5vw,58px)!important;} .elementor-widget-html .sv-label{color:var(--i25-ice)!important;letter-spacing:.16em!important;} .elementor-widget-html .sv-title,.elementor-widget-html .pg-card-body h3,.elementor-widget-html .pg-cat-title{text-wrap:balance;letter-spacing:0!important;} .elementor-widget-html .sv-desc{color:var(--i25-muted)!important;} .elementor-widget-html .pg-grid,.elementor-widget-html .pg-cat-grid,.elementor-widget-html .sv-card-grid--landing{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))!important;gap:clamp(14px,2vw,24px)!important;align-items:stretch;} .elementor-widget-html .pg-card,.elementor-widget-html .pg-cat-card,.elementor-widget-html .sv-card,.elementor-widget-html .ps-cta-card{border-radius:14px!important;} .elementor-widget-html .pg-card{height:100%;background:linear-gradient(180deg,rgba(15,23,42,.78),rgba(8,13,24,.96));border:1px solid var(--i25-line)!important;box-shadow:0 18px 46px rgba(0,0,0,.28);isolation:isolate;} .elementor-widget-html .pg-card:hover,.elementor-widget-html .pg-cat-card:hover{transform:translateY(-4px);border-color:var(--i25-line-strong)!important;} .elementor-widget-html .pg-card-thumb,.elementor-widget-html .pg-cat-img{aspect-ratio:4/3;background:#0f172a;overflow:hidden;} .elementor-widget-html .pg-card-thumb img,.elementor-widget-html .pg-cat-img img{width:100%;height:100%;object-fit:cover;} .elementor-widget-html .pg-card-body{padding:clamp(16px,2vw,22px)!important;} .elementor-widget-html .pg-card-body h3{font-size:clamp(1rem,1.18vw,1.15rem)!important;line-height:1.3!important;color:var(--i25-text)!important;} .elementor-widget-html .pg-card-tag{display:inline-flex!important;width:max-content;max-width:100%;padding:5px 10px!important;border-radius:999px!important;background:rgba(56,189,248,.12)!important;border:1px solid rgba(56,189,248,.28)!important;color:#7dd3fc!important;font-size:.68rem!important;font-weight:800!important;letter-spacing:.08em!important;line-height:1.15!important;} .elementor-widget-html .pg-card-year{color:#c7d2e1!important;} .elementor-widget-html .pg-card-location{display:flex!important;align-items:flex-start;gap:6px;line-height:1.45;color:var(--i25-muted)!important;} .elementor-widget-html .pg-card-location i{margin-top:.18em;flex:0 0 auto;color:#7dd3fc!important;} .elementor-widget-html .pg-filter-tabs,.elementor-widget-html .ny-filter-tabs,.elementor-widget-html .ny-filter-bar{display:flex!important;gap:8px!important;margin:0 auto clamp(28px,4vw,42px)!important;padding:6px!important;max-width:max-content;border:1px solid var(--i25-line)!important;border-radius:999px!important;background:rgba(7,13,24,.68)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;} .elementor-widget-html .pg-filter-tabs::-webkit-scrollbar,.elementor-widget-html .ny-filter-tabs::-webkit-scrollbar,.elementor-widget-html .ny-filter-bar::-webkit-scrollbar{display:none;} .elementor-widget-html .pg-filter-tab,.elementor-widget-html .ny-filter-tab{min-height:42px!important;border-radius:999px!important;white-space:nowrap!important;padding:10px 16px!important;border:1px solid transparent!important;background:transparent!important;color:var(--i25-muted)!important;} .elementor-widget-html .pg-filter-tab:hover,.elementor-widget-html .ny-filter-tab:hover{background:rgba(56,189,248,.09)!important;color:#f8fbff!important;} .elementor-widget-html .pg-filter-tab[aria-selected="true"],.elementor-widget-html .pg-filter-tab.is-active,.elementor-widget-html .ny-filter-tab[aria-selected="true"],.elementor-widget-html .ny-filter-tab.is-active{background:rgba(56,189,248,.16)!important;border-color:rgba(56,189,248,.42)!important;color:#e8f8ff!important;box-shadow:inset 0 0 0 1px rgba(56,189,248,.12)!important;} .elementor-widget-html .pg-card.pg-card--hidden{display:none!important;} .elementor-widget-html .pg-filter-empty.is-shown{display:block!important;} .elementor-widget-html .ps-cta-section{padding:clamp(58px,7vw,98px) 20px!important;background:linear-gradient(180deg,#020617,rgba(7,13,24,.96))!important;} .elementor-widget-html .ps-cta-card{max-width:980px;margin:0 auto;text-align:center;background:linear-gradient(180deg,rgba(15,23,42,.78),rgba(8,13,24,.94))!important;border:1px solid var(--i25-line)!important;box-shadow:0 24px 70px rgba(0,0,0,.34)!important;} .elementor-widget-html .ps-cta-buttons .ps-btn,.elementor-widget-html .sv-btn{min-height:48px;} .elementor-widget-html a:focus-visible,.elementor-widget-html button:focus-visible{outline:3px solid var(--i25-ice)!important;outline-offset:3px!important;} @media(min-width:760px){.elementor-widget-html .pg-filter-tabs,.elementor-widget-html .ny-filter-tabs,.elementor-widget-html .ny-filter-bar{justify-content:center!important;}} @media(max-width:640px){.elementor-widget-html .sv-container{padding-inline:18px!important;}.elementor-widget-html .sv-hero--mini{min-height:clamp(380px,54svh,470px)!important;}.elementor-widget-html .sv-hero--mini .sv-hero-content{padding-top:92px!important;padding-bottom:42px!important;}.elementor-widget-html .sv-hero--mini h1{font-size:clamp(2rem,11.6vw,3rem)!important;}.elementor-widget-html .sv-section{padding-top:54px!important;padding-bottom:64px!important;}.elementor-widget-html .sv-divider + .sv-section{padding-top:46px!important;}.elementor-widget-html .pg-filter-tabs,.elementor-widget-html .ny-filter-tabs,.elementor-widget-html .ny-filter-bar{justify-content:flex-start!important;max-width:100%;border-radius:16px!important;}.elementor-widget-html .ps-cta-stats{grid-template-columns:1fr!important;}.elementor-widget-html .ps-cta-buttons{flex-direction:column!important;}.elementor-widget-html .ps-btn,.elementor-widget-html .sv-btn{width:100%;justify-content:center;text-align:center;}} @media(pointer:coarse){.elementor-widget-html .pg-card:hover,.elementor-widget-html .pg-cat-card:hover{transform:none!important;}} @media(prefers-reduced-motion:reduce){.elementor-widget-html .pg-card,.elementor-widget-html .pg-cat-card,.elementor-widget-html img{transition:none!important;animation:none!important;}}