/* ========================================================================== Voltvik — Designsystem «Nordic Precision» Warm Nordic Minimalism. Ingen byggesteg, ingen rammeverk. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design-tokens -------------------------------------------------------------------------- */ :root { /* Kjernefarger */ --c-primary: #0F172A; --c-primary-soft: #1E293B; --c-secondary: #059669; --c-secondary-soft: #10B981; --c-secondary-wash: #ECFDF5; --c-tertiary: #D97706; --c-tertiary-wash: #FFFBEB; /* Merkefarge fra Voltvik-logoen. --c-brand er ikonaksenten, --c-brand-deep er den tekstsikre varianten (6,1:1 mot hvit). */ --c-brand: #0EA5E9; --c-brand-deep: #0369A1; --c-danger: #B91C1C; --c-danger-wash: #FEF2F2; --c-neutral: #64748B; --c-neutral-soft: #94A3B8; /* Flater */ --s-canvas: #F8F9FA; --s-elevated: #FFFFFF; --s-sunken: #F1F5F9; --s-inverse: #0F172A; --s-frosted: rgba(255, 255, 255, 0.82); /* Linjer */ --line: #E2E8F0; --line-strong: #CBD5E1; /* Tekst */ --t-primary: #0F172A; --t-secondary: #475569; --t-muted: #64748B; --t-inverse: #F8FAFC; --t-inverse-muted: #94A3B8; /* Typografi */ --f-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; --f-body: "Geist", "Inter", "Segoe UI", system-ui, sans-serif; --f-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; /* Spacing-skala */ --sp-xxs: 0.25rem; --sp-xs: 0.5rem; --sp-sm: 0.75rem; --sp-md: 1rem; --sp-lg: 1.5rem; --sp-xl: 2rem; --sp-2xl: 3rem; --sp-3xl: 4.5rem; --sp-4xl: 6rem; --sp-section: 7.5rem; /* Layout */ --container: 76rem; --container-narrow: 52rem; --gutter: 1rem; /* Radius */ --r-xs: 0.25rem; --r-sm: 0.5rem; --r-md: 0.75rem; --r-lg: 1rem; --r-xl: 1.5rem; --r-full: 9999px; /* Elevasjon */ --e1: 0 1px 2px rgba(15, 23, 42, 0.03), 0 4px 12px rgba(15, 23, 42, 0.02); --e2: 0 4px 6px -1px rgba(15, 23, 42, 0.04), 0 12px 24px -4px rgba(15, 23, 42, 0.04); --e3: 0 20px 40px -12px rgba(15, 23, 42, 0.08); /* Bevegelse */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur: 220ms; } /* -------------------------------------------------------------------------- 2. Grunnlag -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--s-canvas); color: var(--t-primary); font-family: var(--f-body); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; /* Norsk har mange lange sammensatte ord ("forhåndsbestilling"). Bryt dem heller enn å sprenge layouten på smale skjermer. */ overflow-wrap: break-word; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; border-radius: var(--r-xs); } ::selection { background: #DCFCE7; color: var(--c-primary); } /* -------------------------------------------------------------------------- 3. Typografi -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5 { font-family: var(--f-display); color: var(--t-primary); margin: 0; text-wrap: balance; } .display-hero { font-size: clamp(2.375rem, 5.5vw, 3.5rem); line-height: 1.14; letter-spacing: -0.03em; font-weight: 600; } /* Orddeling på overskrifter: gir norske delingsregler, slik at lange sammensatte ord brytes pent i stedet for å flyte over. */ .display-hero, .headline-xl, .headline-lg, .headline-md, .headline-sm, h1, h2, h3, h4 { hyphens: auto; -webkit-hyphens: auto; } .headline-xl { font-size: clamp(1.875rem, 3.6vw, 2.5rem); line-height: 1.2; letter-spacing: -0.025em; font-weight: 600; } .headline-lg { font-size: clamp(1.5rem, 2.4vw, 1.75rem); line-height: 1.28; letter-spacing: -0.02em; font-weight: 600; } .headline-md { font-size: 1.375rem; line-height: 1.27; letter-spacing: -0.015em; font-weight: 500; } .headline-sm { font-size: 1.125rem; line-height: 1.33; letter-spacing: -0.01em; font-weight: 500; } p { margin: 0; } .body-lg { font-size: 1.125rem; line-height: 1.56; letter-spacing: -0.005em; color: var(--t-secondary); } .body-md { font-size: 0.9375rem; line-height: 1.6; color: var(--t-secondary); } .body-sm { font-size: 0.8125rem; line-height: 1.54; color: var(--t-muted); } .label-caps { font-family: var(--f-body); font-size: 0.6875rem; line-height: 1.27; letter-spacing: 0.08em; font-weight: 600; text-transform: uppercase; color: var(--c-neutral); } .mono, .label-numeric { font-family: var(--f-mono); font-size: 0.8125rem; letter-spacing: 0.02em; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--t-primary); overflow-wrap: anywhere; } .t-secondary { color: var(--c-secondary); } .t-tertiary { color: var(--c-tertiary); } .t-muted { color: var(--t-muted); } .measure { max-width: 60ch; } .center { text-align: center; margin-inline: auto; } strong { font-weight: 600; color: var(--t-primary); } /* -------------------------------------------------------------------------- 4. Layout -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container-narrow { max-width: var(--container-narrow); } .section { padding-block: var(--sp-3xl); } .section-lg { padding-block: var(--sp-3xl); } .section-tight { padding-block: var(--sp-2xl); } .section--sunken { background: var(--s-sunken); } .section--inverse { background: var(--s-inverse); color: var(--t-inverse); } .section--inverse h1, .section--inverse h2, .section--inverse h3, .section--inverse h4 { color: var(--t-inverse); } .section--inverse .body-lg, .section--inverse .body-md { color: var(--t-inverse-muted); } .section--inverse .label-caps { color: var(--c-secondary-soft); } .stack > * + * { margin-top: var(--sp-md); } .stack-lg > * + * { margin-top: var(--sp-lg); } .stack-xl > * + * { margin-top: var(--sp-xl); } .grid { display: grid; gap: var(--sp-md); } .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } .split { display: grid; grid-template-columns: 1fr; gap: var(--sp-xl); align-items: center; } /* Grid- og flex-barn har min-width:auto som standard, slik at lange ord, URL-er og monospace-strenger sprenger kolonnen på smale skjermer. */ .grid > *, .split > *, .flow-xs > *, .flow-sm > *, .flow-md > *, .flow-between > *, .steps > *, .step > *, .note > *, .field-inline > *, .spec-list > *, .spec-row > *, .accordion > *, .acc-item summary > *, .metrics > *, .form > *, .form-row > *, .field > *, .choice > *, .checklist > *, .checklist li > *, .footer-grid > *, .footer-bottom > * { min-width: 0; } /* Spacing-utilities — brukes i stedet for inline style="margin-top". */ .mt-xs { margin-top: var(--sp-xs); } .mt-sm { margin-top: var(--sp-sm); } .mt-md { margin-top: var(--sp-md); } .mt-lg { margin-top: var(--sp-lg); } .mt-xl { margin-top: var(--sp-xl); } .mt-2xl { margin-top: var(--sp-2xl); } .flow-xs { display: flex; flex-wrap: wrap; gap: var(--sp-xs); } .flow-sm { display: flex; flex-wrap: wrap; gap: var(--sp-sm); } .flow-md { display: flex; flex-wrap: wrap; gap: var(--sp-md); } .flow-center { justify-content: center; } .flow-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap; } /* Seksjonshode */ .section-head { max-width: 44rem; margin-bottom: var(--sp-2xl); } .section-head .label-caps { display: block; margin-bottom: var(--sp-sm); } .section-head > p { margin-top: var(--sp-md); } .section-head.center { text-align: center; } /* -------------------------------------------------------------------------- 5. Navigasjon -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 60; background: var(--s-frosted); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; height: 4.25rem; gap: var(--sp-md); } .brand { display: flex; align-items: center; gap: 0.625rem; min-width: 0; } .brand img { height: 2rem; width: auto; object-fit: contain; } .brand-text { display: flex; flex-direction: column; line-height: 1; } .brand-name { font-family: var(--f-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; color: var(--t-primary); } .brand-sub { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--c-brand-deep); margin-top: 3px; } .nav-links { display: none; align-items: center; gap: var(--sp-xs); } .nav-link { padding: 0.5rem 0.875rem; border-radius: var(--r-full); font-size: 0.875rem; font-weight: 500; color: var(--t-secondary); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .nav-link:hover { background: var(--s-sunken); color: var(--t-primary); } .nav-link[aria-current="page"] { background: var(--c-primary); color: #fff; } .nav-actions { display: flex; align-items: center; gap: var(--sp-xs); } .nav-actions .btn { display: none; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--line); background: var(--s-elevated); border-radius: var(--r-full); cursor: pointer; padding: 0; } .nav-toggle svg { width: 20px; height: 20px; stroke: var(--t-primary); } .nav-toggle .icon-close { display: none; } .nav-toggle[aria-expanded="true"] .icon-open { display: none; } .nav-toggle[aria-expanded="true"] .icon-close { display: block; } .mobile-menu { display: none; border-top: 1px solid var(--line); background: var(--s-elevated); padding: var(--sp-sm) var(--gutter) var(--sp-lg); } .mobile-menu.is-open { display: block; } .mobile-menu a { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 0.25rem; font-size: 1rem; font-weight: 500; border-bottom: 1px solid var(--line); } .mobile-menu a.btn { border-bottom: 0; } .mobile-menu a[aria-current="page"] { color: var(--c-secondary); } .mobile-menu .btn { margin-top: var(--sp-md); width: 100%; } @media (min-width: 900px) { .nav-links { display: flex; } .nav-actions .btn { display: inline-flex; } .nav-toggle { display: none; } .mobile-menu { display: none !important; } } /* -------------------------------------------------------------------------- 6. Knapper -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.75rem; border-radius: var(--r-full); font-family: var(--f-body); font-size: 0.9375rem; font-weight: 600; line-height: 1; max-width: 100%; overflow-wrap: anywhere; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform 120ms var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .btn:active { transform: scale(0.98); } .btn svg { width: 18px; height: 18px; flex-shrink: 0; } .btn-primary { background: var(--c-primary); color: #fff; } .btn-primary:hover { background: var(--c-primary-soft); box-shadow: var(--e2); } .btn-accent { background: var(--c-secondary); color: #fff; } .btn-accent:hover { background: #047857; box-shadow: var(--e2); } .btn-secondary { background: var(--s-elevated); color: var(--t-primary); border-color: var(--line); } .btn-secondary:hover { border-color: var(--line-strong); box-shadow: var(--e1); } .btn-ghost { background: transparent; color: var(--t-primary); padding-inline: 0.75rem; } .btn-ghost:hover { color: var(--c-secondary); } .btn-sm { padding: 0.625rem 1.125rem; font-size: 0.8125rem; } .btn-block { width: 100%; } .btn[aria-disabled="true"], .btn:disabled { background: var(--s-sunken); color: var(--c-neutral-soft); border-color: var(--line); cursor: not-allowed; pointer-events: none; } .section--inverse .btn-secondary, .cta-band .btn-secondary { background: transparent; color: #fff; border-color: rgba(248, 250, 252, 0.28); } .section--inverse .btn-secondary:hover, .cta-band .btn-secondary:hover { border-color: rgba(248, 250, 252, 0.6); } /* -------------------------------------------------------------------------- 7. Badges / merkelapper -------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 0.4375rem; height: 1.75rem; padding: 0 0.75rem; border-radius: var(--r-full); background: var(--s-frosted); border: 1px solid var(--line); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-secondary); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); white-space: nowrap; max-width: 100%; } .badge .dot { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--c-secondary); flex-shrink: 0; } .badge--live .dot { animation: pulse 2.4s var(--ease) infinite; } .badge--warn { background: var(--c-tertiary-wash); border-color: #FDE68A; color: #92400E; } .badge--warn .dot { background: var(--c-tertiary); } .badge--ok { background: var(--c-secondary-wash); border-color: #A7F3D0; color: #065F46; } .badge--solid { background: var(--c-primary); border-color: var(--c-primary); color: #fff; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* -------------------------------------------------------------------------- 8. Kort -------------------------------------------------------------------------- */ .card { background: var(--s-elevated); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-lg); box-shadow: var(--e1); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .card--hover:hover { box-shadow: var(--e2); border-color: var(--line-strong); transform: translateY(-2px); } .card--flat { box-shadow: none; } .card--sunken { background: var(--s-sunken); box-shadow: none; } .card--accent { border-color: #A7F3D0; background: var(--c-secondary-wash); } .card--pad-lg { padding: var(--sp-xl); } .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-full); background: var(--s-sunken); color: var(--c-primary); margin-bottom: var(--sp-md); flex-shrink: 0; } .card-icon svg { width: 20px; height: 20px; } .card-icon--accent { background: var(--c-secondary-wash); color: var(--c-secondary); } .card-icon--warn { background: var(--c-tertiary-wash); color: var(--c-tertiary); } .card h3 + p, .card h4 + p { margin-top: 0.5rem; } /* -------------------------------------------------------------------------- 9. Steg-liste -------------------------------------------------------------------------- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-sm); counter-reset: step; } .step { background: var(--s-elevated); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-lg); box-shadow: var(--e1); display: grid; grid-template-columns: 1.75rem 1fr; gap: var(--sp-md); align-items: start; } .step::before { counter-increment: step; content: counter(step); display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--r-full); background: var(--s-sunken); color: var(--t-primary); font-family: var(--f-mono); font-size: 0.8125rem; font-weight: 600; } .step-body > * + * { margin-top: 0.5rem; } .step h3, .step h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; } .note { display: flex; gap: 0.625rem; padding: 0.75rem 0.875rem; border-radius: var(--r-sm); background: var(--s-sunken); font-size: 0.8125rem; line-height: 1.54; color: var(--t-secondary); } .note--warn { background: var(--c-tertiary-wash); color: #92400E; } .note--ok { background: var(--c-secondary-wash); color: #065F46; } .note--danger { background: var(--c-danger-wash); color: #991B1B; } .note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; } /* Kodefelt / adresse */ .field-inline { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); padding: 0.75rem 0.875rem; border-radius: var(--r-sm); background: var(--s-sunken); border: 1px solid var(--line); flex-wrap: wrap; } .field-inline .mono { font-size: 0.9375rem; font-weight: 600; } code { font-family: var(--f-mono); font-size: 0.875em; background: var(--s-sunken); border: 1px solid var(--line); border-radius: var(--r-xs); padding: 0.1em 0.4em; color: var(--t-primary); overflow-wrap: anywhere; } /* -------------------------------------------------------------------------- 10. Tabeller -------------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--s-elevated); box-shadow: var(--e1); -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; min-width: 34rem; } thead th { text-align: left; padding: 0.875rem 1rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-neutral); background: var(--s-sunken); border-bottom: 1px solid var(--line); white-space: nowrap; } tbody td { padding: 0.875rem 1rem; font-size: 0.875rem; color: var(--t-secondary); border-bottom: 1px solid var(--line); vertical-align: top; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: #FCFDFE; } tbody td:first-child { color: var(--t-primary); font-weight: 500; } /* Spesifikasjonsliste */ .spec-list { display: grid; gap: 0; margin: 0; } .spec-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-md); padding: 0.8125rem 0; border-bottom: 1px solid var(--line); } .spec-row:last-child { border-bottom: 0; } .spec-row dt { font-size: 0.875rem; color: var(--t-muted); } .spec-row dd { margin: 0; font-family: var(--f-mono); font-size: 0.8125rem; font-weight: 500; color: var(--t-primary); text-align: right; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 11. Trekkspill (FAQ / feilsøking) -------------------------------------------------------------------------- */ .accordion { display: grid; gap: var(--sp-xs); } .acc-item { background: var(--s-elevated); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .acc-item[open] { border-color: var(--line-strong); box-shadow: var(--e1); } .acc-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding: 1.0625rem var(--sp-lg); cursor: pointer; list-style: none; font-family: var(--f-display); font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; color: var(--t-primary); } .acc-item summary::-webkit-details-marker { display: none; } .acc-item summary::after { content: ""; width: 10px; height: 10px; flex-shrink: 0; border-right: 1.5px solid var(--c-neutral); border-bottom: 1.5px solid var(--c-neutral); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur) var(--ease); } .acc-item[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); } .acc-item summary:hover { background: #FCFDFE; } .acc-body { padding: 0 var(--sp-lg) var(--sp-lg); } .acc-body > * + * { margin-top: var(--sp-sm); } .acc-body ol, .acc-body ul { margin: 0; padding-left: 1.25rem; } .acc-body li { font-size: 0.9375rem; line-height: 1.6; color: var(--t-secondary); margin-bottom: 0.375rem; } /* -------------------------------------------------------------------------- 12. Faner -------------------------------------------------------------------------- */ .tabs { display: inline-flex; padding: 0.25rem; background: var(--s-sunken); border: 1px solid var(--line); border-radius: var(--r-full); gap: 0.125rem; max-width: 100%; overflow-x: auto; } .tab { padding: 0.5rem 1.125rem; border: 0; background: transparent; border-radius: var(--r-full); font-family: var(--f-body); font-size: 0.8125rem; font-weight: 600; color: var(--t-muted); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); white-space: nowrap; } .tab:hover { color: var(--t-primary); } .tab[aria-selected="true"] { background: var(--s-elevated); color: var(--t-primary); box-shadow: var(--e1); } .tab-panel[hidden] { display: none; } /* -------------------------------------------------------------------------- 13. Hero -------------------------------------------------------------------------- */ .hero { padding-block: var(--sp-2xl) var(--sp-3xl); position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -30% 40% 40% -20%; background: radial-gradient(ellipse at center, rgba(5, 150, 105, 0.07), transparent 62%); pointer-events: none; } .hero .container { position: relative; } .hero-copy > * + * { margin-top: var(--sp-lg); } .hero-visual { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--e3); background: var(--s-sunken); aspect-ratio: 4 / 3; } .hero-visual img { width: 100%; height: 100%; object-fit: cover; } .hero-visual--square { aspect-ratio: 1 / 1; } .hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.05) 45%, transparent); pointer-events: none; } .hero-visual .overlay { position: absolute; left: var(--sp-lg); right: var(--sp-lg); bottom: var(--sp-lg); z-index: 2; color: #fff; } .hero-visual .overlay .label-caps { color: #6EE7B7; } .hero-visual .overlay h2 { color: #fff; margin-top: 0.25rem; } .hero-visual .overlay p { color: #CBD5E1; font-size: 0.8125rem; margin-top: 0.25rem; } .hero-visual .badge-float { position: absolute; top: var(--sp-md); left: var(--sp-md); z-index: 2; } /* Måler-statistikk */ .metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); margin: 0; } .metric { padding: var(--sp-md) 0; } .metric dt { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--c-neutral); } .metric dd { margin: 0.375rem 0 0; font-family: var(--f-mono); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; color: var(--t-primary); font-variant-numeric: tabular-nums; } .metric dd small { font-size: 0.875rem; color: var(--t-muted); font-family: var(--f-body); } /* -------------------------------------------------------------------------- 14. Skjema -------------------------------------------------------------------------- */ .form { display: grid; gap: var(--sp-md); } .form-row { display: grid; gap: var(--sp-md); } .field { display: flex; flex-direction: column; gap: 0.4375rem; } .field label { font-size: 0.8125rem; font-weight: 600; color: var(--t-primary); } .field .hint { font-size: 0.75rem; color: var(--t-muted); } .input, .select, .textarea { height: 3rem; padding: 0 0.875rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--s-elevated); font-family: var(--f-body); font-size: 0.9375rem; color: var(--t-primary); width: 100%; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); appearance: none; } .textarea { height: auto; min-height: 7.5rem; padding: 0.75rem 0.875rem; resize: vertical; line-height: 1.6; } .input::placeholder, .textarea::placeholder { color: var(--c-neutral-soft); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06); } .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 18px; padding-right: 2.5rem; cursor: pointer; } .choice { display: flex; gap: 0.875rem; padding: var(--sp-md); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--s-elevated); cursor: pointer; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .choice:hover { border-color: var(--line-strong); } .choice input { margin-top: 0.25rem; accent-color: var(--c-primary); flex-shrink: 0; } .choice.is-selected { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary); } .choice-body { flex: 1; min-width: 0; } .choice-title { display: flex; justify-content: space-between; gap: var(--sp-sm); align-items: baseline; flex-wrap: wrap; } .choice-title strong { font-family: var(--f-display); font-size: 1rem; font-weight: 600; } .choice-price { font-family: var(--f-mono); font-size: 0.9375rem; font-weight: 500; color: var(--t-primary); white-space: nowrap; } .choice-body p { font-size: 0.8125rem; color: var(--t-muted); margin-top: 0.25rem; line-height: 1.5; } .form-status { padding: 0.875rem var(--sp-md); border-radius: var(--r-sm); font-size: 0.875rem; font-weight: 500; } .form-status[hidden] { display: none; } .form-status--ok { background: var(--c-secondary-wash); color: #065F46; } .form-status--err { background: var(--c-danger-wash); color: #991B1B; } /* -------------------------------------------------------------------------- 15. Diverse -------------------------------------------------------------------------- */ .pill-list { display: flex; flex-wrap: wrap; gap: 0.4375rem; } .pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: var(--r-full); background: var(--s-elevated); border: 1px solid var(--line); font-size: 0.8125rem; font-weight: 500; color: var(--t-secondary); } .link-arrow { display: inline-flex; align-items: center; flex-wrap: wrap; max-width: 100%; overflow-wrap: anywhere; gap: 0.375rem; font-weight: 600; font-size: 0.875rem; color: var(--c-secondary); } .link-arrow svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); } .link-arrow:hover svg { transform: translateX(3px); } .divider { height: 1px; background: var(--line); border: 0; margin: 0; } .checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; } .checklist li { display: flex; gap: 0.625rem; font-size: 0.9375rem; color: var(--t-secondary); line-height: 1.55; } .checklist svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--c-secondary); } .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; } .skip-link { position: absolute; left: var(--sp-md); top: -4rem; z-index: 100; background: var(--c-primary); color: #fff; padding: 0.75rem 1.25rem; border-radius: var(--r-sm); font-weight: 600; font-size: 0.875rem; transition: top var(--dur) var(--ease); } .skip-link:focus { top: var(--sp-md); } /* -------------------------------------------------------------------------- 16. CTA-bånd -------------------------------------------------------------------------- */ .cta-band { background: var(--s-inverse); border-radius: var(--r-xl); padding: var(--sp-2xl) var(--sp-lg); color: var(--t-inverse); text-align: center; position: relative; overflow: hidden; } .cta-band::before { content: ""; position: absolute; inset: -60% -20% auto -20%; height: 140%; background: radial-gradient(ellipse at top, rgba(5, 150, 105, 0.22), transparent 60%); pointer-events: none; } .cta-band > * { position: relative; } .cta-band h2 { color: #fff; } .cta-band p { color: var(--t-inverse-muted); margin-top: var(--sp-md); } .cta-band .flow-md { margin-top: var(--sp-xl); justify-content: center; } /* -------------------------------------------------------------------------- 17. Bunntekst -------------------------------------------------------------------------- */ .site-footer { background: var(--s-elevated); border-top: 1px solid var(--line); padding-block: var(--sp-2xl) var(--sp-xl); margin-top: var(--sp-3xl); } .footer-grid { display: grid; gap: var(--sp-xl); } .footer-col h4 { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--c-neutral); font-family: var(--f-body); margin-bottom: var(--sp-sm); } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .footer-col a { font-size: 0.875rem; color: var(--t-secondary); } .footer-col a:hover { color: var(--c-secondary); } .footer-bottom { margin-top: var(--sp-xl); padding-top: var(--sp-lg); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--sp-sm) var(--sp-lg); align-items: center; justify-content: space-between; } .footer-bottom p { font-size: 0.8125rem; color: var(--t-muted); } /* -------------------------------------------------------------------------- 18. Responsivt -------------------------------------------------------------------------- */ @media (min-width: 640px) { :root { --gutter: 1.5rem; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } .form-row { grid-template-columns: repeat(2, 1fr); } .metrics { grid-template-columns: repeat(4, 1fr); } .cta-band { padding: var(--sp-3xl) var(--sp-2xl); } } @media (min-width: 900px) { :root { --gutter: 2rem; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .section { padding-block: var(--sp-4xl); } .section-lg { padding-block: var(--sp-section); } .split { grid-template-columns: 1fr 1fr; gap: var(--sp-3xl); } .split--wide { grid-template-columns: 1.05fr 0.95fr; } .hero { padding-block: var(--sp-3xl) var(--sp-4xl); } .footer-grid { grid-template-columns: 1.6fr repeat(3, 1fr); } .step { padding: var(--sp-lg) var(--sp-xl); } } /* Ultrasmale skjermer: la badges brytes over flere linjer i stedet for å sprenge viewporten. Påvirker ikke vanlige mobilstørrelser. */ @media (max-width: 380px) { .badge { white-space: normal; height: auto; min-height: 1.75rem; padding-block: 0.3125rem; text-align: center; } .choice-price { white-space: normal; } .btn { white-space: normal; padding-inline: 1rem; line-height: 1.25; text-align: center; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media print { .site-header, .site-footer, .nav-toggle, .cta-band { display: none !important; } body { background: #fff; } .card, .step { box-shadow: none; break-inside: avoid; } }