/* ===================================================================== Revisjonsmotor — delt designsystem (brukes av alle sider) Brandfont: Inter (lastes i ), med SF Pro / system som fallback. ===================================================================== */ :root { --accent: #0071e3; --accent-rgb: 0, 113, 227; --blur: 18px; --glow-size: 620px; --glow-alpha: .60; --glow-stop: 50%; --ink: #1d1d1f; --ink-soft: #3a3a44; --ink-mut: #6e6e73; --ok: #34c759; --ok-ink: #248a3d; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Inter', -apple-system, 'SF Pro Text', 'Segoe UI', Roboto, system-ui, sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; color: var(--ink); background: #eef5ff; } ::selection { background: rgba(var(--accent-rgb), .18); } a { text-decoration: none; color: inherit; } @keyframes aurora1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(70px,40px) scale(1.25); } } @keyframes aurora2 { 0%,100% { transform: translate(0,0) scale(1.1); } 50% { transform: translate(-80px,-50px) scale(.85); } } /* ===== subtil interaktivitet (det brukeren liker) ===== */ .mag { transition: transform .2s cubic-bezier(.2,.7,.3,1); } .mag:hover { transform: scale(1.045); } .nav-link { transition: color .15s; } .nav-link:hover { color: var(--accent); } .btn-ghost { transition: background .15s, transform .2s cubic-bezier(.2,.7,.3,1); } .btn-ghost:hover { background: #fff !important; transform: translateY(-1px); } .btn-accent { transition: filter .15s, transform .2s cubic-bezier(.2,.7,.3,1); } .btn-accent:hover { filter: brightness(1.06); transform: translateY(-1px); } .lift { transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s; } .lift:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 44px rgba(0,0,0,.10); } input:focus, textarea:focus { border-color: var(--accent) !important; } /* sekundærknapp («Gå til Revisjonsmotor») */ .btn-outline { border: 1px solid rgba(0,0,0,.14); color: var(--ink); font-size: 14px; font-weight: 500; padding: 9px 16px; border-radius: 980px; display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.5); transition: background .15s, border-color .15s, transform .2s; } .btn-outline:hover { background: #fff; border-color: var(--accent); color: var(--accent); transform: translateY(-1px); } /* ===== layout ===== */ .section { padding: 96px 40px; position: relative; overflow: hidden; } .wrap { max-width: 1080px; margin: 0 auto; position: relative; } .blob { position: absolute; border-radius: 50%; pointer-events: none; } .glass-card { background: rgba(255,255,255,.55); backdrop-filter: blur(var(--blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); border: 1px solid rgba(255,255,255,.75); border-radius: 18px; padding: 28px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05); } .pill { background: var(--accent); color: #fff; font-size: 14px; font-weight: 500; padding: 9px 18px; border-radius: 980px; display: inline-block; } h1 { font-size: 62px; line-height: 1.04; font-weight: 700; letter-spacing: -0.038em; margin: 0 0 22px; color: #11131a; } h2 { font-size: 42px; line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 16px; } h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.018em; margin: 0 0 9px; } .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .lead { font-size: 18px; line-height: 1.55; color: var(--ink-soft); letter-spacing: -0.012em; } .icon-tile { width: 44px; height: 44px; border-radius: 12px; background: rgba(var(--accent-rgb),.12); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .icon-tile i { color: var(--accent); font-size: 20px; } .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; } /* nav-skall (felles topplinje) */ .nav-shell { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.5); backdrop-filter: blur(var(--blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--blur)) saturate(180%); border: 1px solid rgba(255,255,255,.7); border-radius: 980px; padding: 10px 12px 10px 22px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.08); } @media (max-width: 920px) { h1 { font-size: 42px; } h2 { font-size: 32px; } .section { padding: 64px 24px; } .grid-3, .grid-2 { grid-template-columns: 1fr; } .nav-links-extra { display: none; } } /* Telefon: rydd opp i toppmenyen (logo + «Be om demo» får god plass) */ @media (max-width: 640px) { .nav-shell { padding: 8px 10px 8px 16px; } .nav-shell .btn-outline { display: none; } /* «Gå til Revisjonsmotor» skjules på liten skjerm */ .pill { padding: 9px 16px; } } /* Smal telefon: stable navn/firma-feltene i demo-skjemaet */ @media (max-width: 520px) { #demo-form > div:first-child { grid-template-columns: 1fr !important; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .blob { animation: none !important; } .mag, .nav-link, .btn-ghost, .btn-accent, .btn-outline, .lift { transition: none !important; } }