/* ========================================================================== Selgerguiden – bevegelseslag Felles animasjoner for alle sider. Endrer ikke layout eller innhold. Lastes av alle sider sammen med /motion.js. ========================================================================== */ :root { --sg-ease: cubic-bezier(0.22, 1, 0.36, 1); --sg-gold: #b8975a; --sg-gold-light: #ddd0b0; --sg-forest: #1e3d2f; } /* ---------- Inngang over bretten (ren CSS, ingen blink før JS) ---------- NB: fill-mode må være "both". Flere sider (index, digital-vurdering) har opacity: 0 i grunnstilen og stoler på at animasjonen gjør dem synlige. Starter på lav, men ikke null, opacity: elementer med opacity 0 teller ikke som "malt" for Largest Contentful Paint, og det ville svekket Core Web Vitals. */ @keyframes sg-rise { from { opacity: 0.15; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes sg-card-in { from { opacity: 0.15; transform: translateY(30px) scale(0.985); } to { opacity: 1; transform: none; } } .hero-eyebrow, .page-tag, .article-tag, h1, .hero-heading, .page-title, .article-title, .hero-sub, .page-sub, .page-lead, .article-lead, .article-meta, .hero-btns, .stats-visible { animation: sg-rise 0.9s var(--sg-ease) both; } .hero-eyebrow, .page-tag, .article-tag { animation-delay: 0.05s; } h1, .hero-heading, .page-title, .article-title { animation-delay: 0.12s; } .hero-sub, .page-sub, .page-lead, .article-lead, .article-meta { animation-delay: 0.22s; } .hero-btns { animation-delay: 0.3s; } .stats-visible { animation-delay: 0.38s; } .hero-card, .sidebar-form { animation: sg-card-in 1.1s 0.25s var(--sg-ease) both; } /* ---------- Gullstrek som tegnes under kursiv i overskrifter ---------- */ h1 em, h2 em { background-image: linear-gradient(var(--sg-gold-light), var(--sg-gold-light)); background-repeat: no-repeat; background-position: 0 92%; background-size: 0% 0.16em; transition: background-size 1.1s 0.15s var(--sg-ease); } h1 em { animation: sg-underline 1.2s 0.7s var(--sg-ease) forwards; } h2.sg-in em, h2:not(.sg-r) em { background-size: 100% 0.16em; } @keyframes sg-underline { to { background-size: 100% 0.16em; } } /* ---------- Scroll-reveal (klasser settes av motion.js) ---------- */ .sg-r { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--sg-ease), transform 0.8s var(--sg-ease); transition-delay: var(--sg-d, 0s); } .sg-r.sg-in { opacity: 1; transform: none; } /* ---------- Søyler som fylles ---------- */ .sg-bar { transition: width 1.3s var(--sg-ease); transition-delay: var(--sg-d, 0s); } /* ---------- Kort: løft, gullkant og lys som følger musen ---------- */ .related-card, .topic-card, .article-small, .market-card, .megler-item, .stat-item, .fact-item, .diff-item, .trend-metric, .step-item, .tip-box, .hood-card, .hoods-grid > *, .topic-grid > *, .article-grid > * { transition: transform 0.5s var(--sg-ease), box-shadow 0.5s var(--sg-ease), border-color 0.4s ease; } .related-card:hover, .topic-card:hover, .article-small:hover, .market-card:hover, .megler-item:hover, .hood-card:hover, .hoods-grid > *:hover, .topic-grid > *:hover, .article-grid > *:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(24, 22, 15, 0.28); border-color: var(--sg-gold-light); } .sg-glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; background: radial-gradient(320px circle at var(--sg-x, 50%) var(--sg-y, 50%), rgba(221, 208, 176, 0.38), transparent 65%); /* Bak innholdet, men over kortets bakgrunn (kortet får isolation: isolate) */ z-index: -1; } *:hover > .sg-glow { opacity: 1; } /* ---------- Knapper: lite løft og pil som dyttes ---------- */ .cta-btn, .nav-cta, button[type="submit"], .btn-primary, .hero-btn, .submit-btn { transition: transform 0.3s var(--sg-ease), box-shadow 0.3s var(--sg-ease), background-color 0.3s ease; } .cta-btn:hover, .nav-cta:hover, button[type="submit"]:hover, .btn-primary:hover, .hero-btn:hover, .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(30, 61, 47, 0.55); } .sg-arrow { display: inline-block; transition: transform 0.3s var(--sg-ease); } *:hover > .sg-arrow { transform: translateX(4px); } /* ---------- Skjemafelt: myk fokusring ---------- */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(45, 90, 67, 0.12); } /* ---------- Meny: skygge når man har scrollet ---------- */ nav { transition: box-shadow 0.4s ease, background-color 0.4s ease; } nav.sg-scrolled { box-shadow: 0 8px 30px -18px rgba(24, 22, 15, 0.35); } /* ---------- Lesefremdrift på artikler ---------- */ .sg-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--sg-gold), var(--sg-forest)); z-index: 1000; pointer-events: none; } /* ---------- Tabeller: rad lyser opp ved hover ---------- */ .price-table tr, table tr { transition: background-color 0.25s ease; } .price-table tbody tr:hover, table tbody tr:hover { background-color: rgba(221, 208, 176, 0.18); } /* ---------- Respekter brukere som har slått av animasjoner ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; } .sg-r { opacity: 1 !important; transform: none !important; } } /* ========================================================================== «Min bolig»-knapp i menyen (lagt til på alle sider, siste element i