/* Alfredium Visa — Midell Global design language (paper/ink/teal) · 2026-07-11 Full visual rewrite. Every selector app.js relies on is preserved. */ :root { --paper: #FAF7F1; --paper-2: #F2EDE3; --ink: #101D33; --muted: #5A6478; --accent: #0E7C6B; --accent-bright: #3FD0B6; --accent-soft: rgba(14,124,107,.08); --gold: #B8892E; --night: #0B1626; --bg: var(--paper); --card: #ffffff; --line: rgba(16,29,51,.12); --ok: #0E7C6B; --warn: #B8892E; --red: #C2452F; --radius: 18px; --shadow: 0 10px 30px rgba(16,29,51,.07); --display: 'Bricolage Grotesque', sans-serif; --body-font: 'Inter', sans-serif; --mono: 'IBM Plex Mono', monospace; --ink-rgb: 16,29,51; /* Tonede flater — merkelapper, varsler, «dette er fylt ut for deg»-bokser. De lå som løse hex-verdier rundt i fila, og et tema kan ikke følge noe som ikke har navn. */ --teal-flate: #ECF4F3; --gul-flate: #fff8e6; --gul-linje: #f0d9a0; --gul-tekst: #8a6d00; --gronn-flate: #eef7f1; --gronn-linje: #cbe6d7; --gronn-tekst: #1a7f45; --gronn-svak: #fbfefc; --bla-flate: #eef3fc; --oransje-flate: #fff4e8; --oransje-linje: #f0c9a0; --oransje-tekst: #b3651e; --oransje-strek: #c2410c; --skjema-bg: #ffffff; /* inndatafelt — skal følge temaet, i motsetning til logoplaten og QR-koden, som MÅ være hvite */ /* Glasskortene som flyter over fjorden. De lå som nitten løse `rgba(255,255,255,.97)`, så i mørk modus ble teksten lys mens kortet forble hvitt — 1,20:1, altså usynlig. */ --glass: rgba(255,255,255,.97); --glass-linje: rgba(255,255,255,.6); --knapp-tekst: #ffffff; } /* ══ MØRK MODUS ══════════════════════════════════════════════════════════ Lagt til 16.08.2026. Siden leste ikke telefonens innstilling i det hele tatt: den som hadde valgt mørk modus for å se bedre, fikk lys side likevel. To innganger, med vilje: • `prefers-color-scheme` — telefonens eget valg, uten at noen trykker noe • `data-tema` på — halvmånen i menyen, som OVERSTYRER telefonen Derfor `:not([data-tema="lys"])` under media-spørringen: har du aktivt valgt lyst, skal mørk systeminnstilling ikke overkjøre deg. Fjordbildet og all hvit tekst oppå det er like i begge moduser — det er allerede et mørkt fotografi. Det som snur er kortene. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="lys"]) { color-scheme: dark; } } @media (prefers-color-scheme: dark) { :root:not([data-tema="lys"]) { --paper: #10151F; --paper-2: #161C28; --ink: #E8EAEE; --muted: #A2AAB8; --card: #1A2130; --line: rgba(255,255,255,.14); --shadow: 0 10px 30px rgba(0,0,0,.38); /* Turkisen må lysne for å holde kontrast mot mørk flate — samme farge, mer lys. */ --accent: #2FB39C; --accent-soft: rgba(63,208,182,.12); --gold: #D6A94B; --red: #E4705C; --ok: #2FB39C; --warn: #D6A94B; --teal-flate: #14251F; --gul-flate: #2A2416; --gul-linje: #4D4227; --gul-tekst: #E0BE55; --gronn-flate: #14241C; --gronn-linje: #2C4736; --gronn-tekst: #5FCF8E; --gronn-svak: #121D18; --bla-flate: #172030; --oransje-flate: #2A1E16; --oransje-linje: #4E3626; --oransje-tekst: #E29A5E; --oransje-strek: #E2703C; --skjema-bg: #131A27; --glass: rgba(22,29,43,.94); --glass-linje: rgba(255,255,255,.16); /* Turkisen er lysnet for å leses mot mørk flate; da holder ikke hvit tekst oppå den (2,61:1). Mørk tekst på lys knapp gir 9,6:1. */ --knapp-tekst: #06130F; } } :root[data-tema="mork"] { color-scheme: dark; --paper: #10151F; --paper-2: #161C28; --ink: #E8EAEE; --muted: #A2AAB8; --card: #1A2130; --line: rgba(255,255,255,.14); --shadow: 0 10px 30px rgba(0,0,0,.38); /* Turkisen må lysne for å holde kontrast mot mørk flate — samme farge, mer lys. */ --accent: #2FB39C; --accent-soft: rgba(63,208,182,.12); --gold: #D6A94B; --red: #E4705C; --ok: #2FB39C; --warn: #D6A94B; --teal-flate: #14251F; --gul-flate: #2A2416; --gul-linje: #4D4227; --gul-tekst: #E0BE55; --gronn-flate: #14241C; --gronn-linje: #2C4736; --gronn-tekst: #5FCF8E; --gronn-svak: #121D18; --bla-flate: #172030; --oransje-flate: #2A1E16; --oransje-linje: #4E3626; --oransje-tekst: #E29A5E; --oransje-strek: #E2703C; --skjema-bg: #131A27; --glass: rgba(22,29,43,.94); --glass-linje: rgba(255,255,255,.16); /* Turkisen er lysnet for å leses mot mørk flate; da holder ikke hvit tekst oppå den (2,61:1). Mørk tekst på lys knapp gir 9,6:1. */ --knapp-tekst: #06130F; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { overflow-x: hidden; } img, .meter, table { max-width: 100%; } body { font-family: var(--body-font); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; line-height: 1.6; font-size: 16px; } /* film grain — the Midell Global signature */ body::after { content:''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } h1, h2, h3 { font-family: var(--display); letter-spacing: -.02em; } /* --- Topp-meny --- */ .topnav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px clamp(12px, 3vw, 24px); background: rgba(250,247,241,.82); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); } .nav-brand { display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; font-family: var(--display); font-weight: 800; color: var(--ink); font-size: 1.06rem; letter-spacing: -.02em; } .nav-logo { width: 38px; height: 48px; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(16,29,51,.18)); } .nav-actions { display: flex; align-items: center; gap: 8px; position: relative; } .nav-btn { background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink); padding: 9px 18px; border-radius: 100px; font-size: .88rem; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: var(--body-font); transition: all .3s; } .nav-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; filter: none; } .nav-btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); } .nav-btn.ghost:hover { border-color: var(--ink); background: transparent; color: var(--ink); } .nav-lang { border: 1.5px solid var(--line); background: transparent; border-radius: 100px; padding: 8px 8px; font-size: .82rem; cursor: pointer; color: var(--ink); font-family: var(--mono); } .nav-menu-wrap { position: relative; } .nav-menu-dd { position: absolute; left: 0; top: 48px; width: 260px; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px rgba(16,29,51,.14); padding: 8px; z-index: 40; } .faq-q { background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow); } .faq-q h3 { margin: 0 0 6px; font-size: 1.02rem; color: var(--ink); font-weight: 700; } .faq-q p { margin: 0; color: var(--muted); font-size: .93rem; } .doc-card { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 13px 15px; box-shadow: var(--shadow); transition: transform .3s, border-color .3s; } .doc-card:hover { transform: translateY(-2px); border-color: var(--accent); } .doc-card .ico { font-size: 1.4rem; } .doc-card .meta { flex: 1; } .doc-card .meta b { display: block; font-size: .95rem; } .doc-card .meta span { font-size: .8rem; color: var(--muted); } .doc-card .lock { font-size: .76rem; color: var(--red); white-space: nowrap; font-weight: 600; } .doc-card .tag-fill { font-size: .7rem; background: var(--accent-soft); color: var(--accent); padding: 3px 9px; border-radius: 100px; font-family: var(--mono); } .pkgs { display: flex; flex-direction: column; gap: 12px; } .pkg-card { border: 1.5px solid var(--line); border-radius: 20px; padding: 20px; background: var(--card); box-shadow: var(--shadow); transition: transform .3s, border-color .3s, box-shadow .3s; } .pkg-card:hover { transform: translateY(-3px); } .pkg-card.feature { border-color: var(--ink); box-shadow: 0 18px 44px rgba(16,29,51,.12); } .pkg-card .price { font-family: var(--display); font-size: 1.6rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; } .pkg-card h3 { margin: 0 0 4px; font-weight: 700; } .pkg-card button { width: 100%; margin-top: 12px; border: 0; padding: 13px; border-radius: 100px; font-weight: 600; cursor: pointer; background: var(--accent); color: #fff; font-family: var(--body-font); font-size: .95rem; transition: all .3s; } .pkg-card button:hover { box-shadow: 0 8px 26px rgba(14,124,107,.35); transform: translateY(-1px); } .pkg-card button.alt { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); } .pkg-card button.alt:hover { background: var(--ink); color: var(--paper); box-shadow: none; } .badge-best { display: inline-block; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; margin-bottom: 8px; } /* Mobil: kompakt toppmeny */ .nav-menu-dd, .nav-dropdown { max-width: calc(100vw - 20px); } @media (max-width: 560px) { .topnav { padding: 7px 10px; gap: 6px; } .nav-actions { gap: 6px; } .nav-brand { font-size: .98rem; gap: 7px; } .nav-logo { width: 32px; height: 40px; } .nav-btn { padding: 8px 12px; } .nav-btn span { display: none; } .nav-lang { padding: 7px 5px; font-size: .78rem; } } @media (max-width: 380px) { .nav-brand span { display: none; } } .nav-account { position: relative; } .nav-dropdown { position: absolute; right: 0; top: 48px; width: 260px; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px rgba(16,29,51,.14); padding: 8px; } .dd-head { font-family: var(--mono); font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; padding: 8px 8px 3px; } .dd-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 10px; border-radius: 10px; cursor: pointer; font-size: .92rem; color: var(--ink); font-family: var(--body-font); transition: background .25s; } .dd-item:hover { background: var(--accent-soft); } .dd-item .sub { display: block; font-size: .74rem; color: var(--muted); } .nav-dropdown hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; } .app { max-width: 720px; margin: 0 auto; min-height: calc(100dvh - 67px); display: flex; flex-direction: column; } .screen-title { display: flex; align-items: center; gap: 10px; padding: 14px 2px; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 700; letter-spacing: -.01em; } .screen-title .ghost { margin-left: auto; } .screen { display: none; flex: 1; flex-direction: column; padding: 20px clamp(16px, 4vw, 28px) max(20px, env(safe-area-inset-bottom)); } .screen.active { display: flex; } /* --- Start / landing --- */ #screen-start { align-items: center; text-align: center; max-width: 660px; margin: 0 auto; width: 100%; } .brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 34px 0 4px; } .hero-logo { width: 112px; height: 140px; object-fit: contain; filter: drop-shadow(0 16px 36px rgba(16,29,51,.25)); animation: vfloat 6s ease-in-out infinite; } @keyframes vfloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .logo { width: 92px; height: 118px; object-fit: contain; } .logo-sm { width: 26px; height: 32px; object-fit: contain; } h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); margin: 0; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; } .tag { margin: 4px 0 0; color: var(--muted); font-size: .95rem; } .provider { font-family: var(--mono); font-size: .68rem; color: var(--muted); letter-spacing: .18em; text-transform: uppercase; margin: 8px 0 0; } .trust-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 18px 0 4px; } .trust-row span { font-family: var(--mono); font-size: .76rem; color: var(--ink); background: var(--card); border: 1.5px solid var(--line); border-radius: 100px; padding: 7px 15px; } .intro { text-align: left; color: var(--ink); background: var(--card); border: 1.5px solid var(--line); border-radius: 20px; padding: 18px 20px; box-shadow: var(--shadow); font-size: .96rem; } .lang-pick { display: flex; gap: 8px; margin: 18px 0; flex-wrap: wrap; width: 100%; } .lang-btn { flex: 1; min-width: 96px; padding: 12px 8px; border: 1.5px solid var(--line); background: var(--card); border-radius: 100px; font-size: .94rem; cursor: pointer; transition: all .25s; font-family: var(--body-font); } .lang-btn:hover { border-color: var(--ink); } .lang-btn.active { border-color: var(--ink); background: var(--ink); color: var(--paper); font-weight: 600; } .start-form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; width: 100%; } .start-form label { font-weight: 600; font-size: .95rem; } input[type=text] { padding: 15px 18px; border: 1.5px solid var(--line); border-radius: 14px; font-size: 1rem; background: var(--card); font-family: var(--body-font); color: var(--ink); } input[type=text]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .primary { background: var(--accent); color: var(--knapp-tekst); border: 0; padding: 15px; border-radius: 100px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all .3s; font-family: var(--body-font); } .primary:hover { box-shadow: 0 10px 28px rgba(14,124,107,.35); transform: translateY(-1px); filter: none; } .primary:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; } .legal { color: var(--muted); font-size: .8rem; text-align: center; margin-top: auto; padding-top: 16px; } .legal.small { font-size: .74rem; padding-top: 8px; } /* --- Chat --- */ .chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 2px 14px; border-bottom: 1px solid var(--line); font-weight: 600; } .chat-head .ghost { margin-left: auto; } .ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); padding: 8px 15px; border-radius: 100px; font-weight: 600; cursor: pointer; font-size: .86rem; font-family: var(--body-font); transition: all .25s; } .ghost:hover { border-color: var(--ink); } .messages { flex: 1; overflow-y: auto; padding: 16px 2px; display: flex; flex-direction: column; gap: 12px; } .msg { max-width: 86%; padding: 12px 16px; border-radius: 16px; white-space: pre-wrap; word-wrap: break-word; font-size: .95rem; } .msg.assistant { background: var(--card); border: 1.5px solid var(--line); border-bottom-left-radius: 5px; align-self: flex-start; box-shadow: var(--shadow); } .msg.user { background: var(--ink); color: var(--paper); border-bottom-right-radius: 5px; align-self: flex-end; } .msg.assistant strong { color: var(--accent); } .msg .typing::after { content: '▍'; animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } .chat-form { display: flex; gap: 8px; padding: 12px 0 4px; border-top: 1px solid var(--line); } .chat-form input { flex: 1; min-width: 0; } .send { background: var(--accent); color: #fff; border: 0; width: 52px; border-radius: 14px; font-size: 1.2rem; cursor: pointer; transition: all .25s; } .send:hover { box-shadow: 0 6px 20px rgba(14,124,107,.35); } .send:disabled { opacity: .5; box-shadow: none; } /* --- Summary --- */ .summary-body { flex: 1; overflow-y: auto; padding: 16px 0; display: flex; flex-direction: column; gap: 14px; } .loader { text-align: center; color: var(--muted); padding: 40px 0; font-family: var(--mono); font-size: .85rem; } .card { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); } .card h3 { margin: 0 0 8px; font-size: 1.04rem; color: var(--ink); font-weight: 700; } .card ul { margin: 6px 0 0; padding-left: 20px; } .card li { margin: 4px 0; } .score { display: flex; align-items: center; gap: 14px; } .score .badge { font-weight: 700; padding: 8px 16px; border-radius: 100px; font-size: .9rem; white-space: nowrap; font-family: var(--mono); } .badge.lett { background: rgba(14,124,107,.1); color: var(--ok); } .badge.middels { background: rgba(184,137,46,.12); color: var(--warn); } .badge.krevende { background: rgba(194,69,47,.1); color: var(--red); } .meter { flex: 1; height: 8px; border-radius: 100px; background: var(--paper-2); overflow: hidden; border: 1px solid var(--line); } .meter > span { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), var(--warn), var(--red)); } .locked { position: relative; } .lock-pill { display: inline-block; background: rgba(194,69,47,.1); color: var(--red); font-weight: 600; font-size: .8rem; padding: 5px 12px; border-radius: 100px; margin-top: 8px; } .paywall { background: var(--night); color: #E7EDF7; border: 0; position: relative; overflow: hidden; } .paywall::before { content: ''; position: absolute; inset: -40%; background: radial-gradient(420px 220px at 75% 15%, rgba(63,208,182,.16), transparent 60%); pointer-events: none; } .paywall > * { position: relative; } .paywall h3 { color: #fff; } .pkg { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 15px; margin-top: 10px; } .pkg .price { font-family: var(--display); font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; } .pkg .price small { font-size: .75rem; font-weight: 400; opacity: .85; font-family: var(--body-font); } .pkg button { width: 100%; margin-top: 12px; border: 0; padding: 13px; border-radius: 100px; font-weight: 600; cursor: pointer; font-family: var(--body-font); font-size: .93rem; transition: all .3s; } .pkg .buy { background: linear-gradient(135deg, var(--accent), var(--accent-bright)); color: #06130F; } .pkg .buy:hover { box-shadow: 0 8px 28px rgba(63,208,182,.35); transform: translateY(-1px); } .pkg .contact { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.35); } .pkg .contact:hover { background: rgba(255,255,255,.1); } .lead-box { background: var(--teal-flate); border: 1.5px dashed rgba(14,124,107,.45); } .lead-box .row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .lead-box input { flex: 1; min-width: 180px; } .lead-box button { background: var(--accent); color: #fff; border: 0; padding: 12px 18px; border-radius: 100px; font-weight: 600; cursor: pointer; font-family: var(--body-font); } .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 12px 20px; border-radius: 100px; box-shadow: 0 14px 40px rgba(16,29,51,.3); z-index: 50; font-size: .9rem; } .muted { color: var(--muted); } a { color: var(--accent); } .linklist a { display: block; padding: 5px 0; } /* --- Innloggings-modal --- */ .modal-bg { position: fixed; inset: 0; background: rgba(16,29,51,.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 16px; } .modal-bg[hidden] { display: none; } .modal-card { position: relative; background: var(--paper); border: 1.5px solid var(--line); border-radius: 24px; padding: 26px 22px 22px; width: 100%; max-width: 390px; box-shadow: 0 40px 100px rgba(16,29,51,.3); display: flex; flex-direction: column; gap: 10px; } .modal-card h3 { margin: 0; color: var(--ink); font-weight: 700; } .modal-card input { padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; font-size: 1rem; background: var(--card); font-family: var(--body-font); } .modal-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .modal-x { position: absolute; top: 14px; right: 16px; background: none; border: 0; font-size: 1.1rem; color: var(--muted); cursor: pointer; } .login-result { font-size: .9rem; } .login-result .case-link { display: block; width: 100%; text-align: left; background: var(--accent-soft); color: var(--accent); border: 0; padding: 12px 14px; border-radius: 14px; margin-top: 8px; cursor: pointer; font-weight: 600; font-family: var(--body-font); } .login-result .case-link .sub { display: block; font-size: .74rem; color: var(--muted); font-weight: 400; } .login-result .err { color: var(--red); } .login-result .ok { color: var(--ok); } .save-box { background: var(--teal-flate); border: 1.5px dashed rgba(14,124,107,.45); } .save-box .row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .save-box input { flex: 1; min-width: 150px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; font-family: var(--body-font); } .save-box button { background: var(--accent); color: #fff; border: 0; padding: 12px 18px; border-radius: 100px; font-weight: 600; cursor: pointer; font-family: var(--body-font); } /* --- Betalings-modal --- */ .pay-tabs { display: flex; gap: 8px; } .pay-tab { flex: 1; padding: 11px; border: 1.5px solid var(--line); background: var(--card); border-radius: 100px; cursor: pointer; font-weight: 600; font-size: .9rem; font-family: var(--body-font); transition: all .25s; } .pay-tab.active { border-color: var(--ink); background: var(--ink); color: var(--paper); } .pay-pane { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .pay-pane .row2 { display: flex; gap: 8px; } .pay-pane .row2 input { flex: 1; min-width: 0; } .pay-pane input { padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; font-size: 1rem; background: var(--card); font-family: var(--body-font); } .pay-pane input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .pp-qr { text-align: center; } .pp-qr img { width: 230px; max-width: 100%; border: 1.5px solid var(--line); border-radius: 16px; padding: 8px; background: #fff; } .pp-qr .hint { color: var(--muted); font-size: .86rem; margin-top: 8px; } .small { font-size: .8rem; } .pay-success { background: rgba(14,124,107,.08); border: 1.5px solid rgba(14,124,107,.3); border-radius: 16px; padding: 18px; text-align: center; } .pay-success .dl { display: inline-block; margin-top: 10px; background: var(--accent); color: #fff; padding: 13px 22px; border-radius: 100px; font-weight: 600; text-decoration: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; } .hero-logo { animation: none; } } /* ===== Full-bleed cinematic hero + Midell Global footer · 2026-07-11 ===== */ body { background: radial-gradient(1100px 480px at 50% -6%, #EEF5F2 0%, var(--paper) 52%); background-attachment: fixed; } /* Full-bleed hero banner with the title overlaid — same red thread as midellglobal.com / alfredium.com */ .visa-hero { position: relative; align-self: stretch; margin-left: calc(-1 * clamp(16px,4vw,28px)); margin-right: calc(-1 * clamp(16px,4vw,28px)); margin-top: -20px; margin-bottom: 22px; height: min(46svh, 340px); min-height: 250px; overflow: hidden; border-bottom: 1px solid var(--line); } .visa-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; display: block; } .visa-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,22,38,.58) 0%, rgba(11,22,38,.24) 42%, rgba(11,22,38,.5) 72%, var(--paper) 100%); } .visa-hero-inner { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; } .visa-hero-inner .hero-logo { width: 76px; height: 76px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 6px; box-shadow: 0 16px 36px rgba(11,22,38,.42); animation: vfloat 6s ease-in-out infinite; } .visa-hero-inner h1 { color: #fff; margin-top: 14px; font-size: clamp(1.7rem, 7vw, 2.5rem); text-shadow: 0 2px 26px rgba(11,22,38,.55); } .visa-hero-inner .tag { color: rgba(255,255,255,.94); margin-top: 6px; font-size: .98rem; text-shadow: 0 1px 14px rgba(11,22,38,.55); } .visa-hero-inner .provider { color: rgba(255,255,255,.75); margin-top: 9px; } @media (max-width: 480px) { .visa-hero { height: min(42svh, 300px); } .visa-hero-inner .hero-logo { width: 66px; height: 66px; } } @media (prefers-reduced-motion: reduce) { .visa-hero-inner .hero-logo { animation: none; } } /* --- Midell Global footer (the red thread) --- */ .site-foot { border-top: 1px solid var(--line); padding: clamp(38px,6vw,60px) clamp(16px,4vw,28px) 34px; max-width: 1100px; margin: 8px auto 0; width: 100%; } .site-foot .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; } @media (max-width: 640px) { .site-foot .foot-grid { grid-template-columns: 1fr; gap: 26px; } } .site-foot .foot-mark { width: 46px; height: 46px; object-fit: contain; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 5px; display: block; margin-bottom: 12px; } .site-foot .foot-logo { font-family: var(--display); font-weight: 800; font-size: 1.06rem; letter-spacing: -.02em; } .site-foot .brand-col p { color: var(--muted); font-size: .9rem; max-width: 36ch; margin-top: 9px; line-height: 1.6; } .site-foot h4 { font-family: var(--display); font-weight: 700; font-size: .96rem; margin-bottom: 12px; } .site-foot a { display: block; color: var(--muted); text-decoration: none; font-size: .9rem; padding: 4px 0; transition: color .2s; } .site-foot a:hover { color: var(--ink); } .site-foot .foot-bottom { max-width: 1100px; margin: 36px auto 0; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: .8rem; font-family: var(--mono); } .site-foot .foot-bottom a { display: inline; color: var(--muted); } .site-foot .foot-bottom a:hover { color: var(--ink); } /* --- Enkeltskjema-kjøp + de to veiene (13.08.2026) --- */ /* Kjøpsknapp per skjema. Kompakt, så ni rader ikke blir en vegg av knapper. */ .doc-card .doc-buy { font-size: .78rem; font-weight: 600; white-space: nowrap; background: var(--accent); color: #fff; border: 0; padding: 8px 14px; border-radius: 100px; cursor: pointer; transition: filter .2s, transform .2s; } .doc-card .doc-buy:hover { filter: brightness(1.08); transform: translateY(-1px); } .doc-card .doc-dl { font-size: .78rem; font-weight: 600; white-space: nowrap; color: var(--accent); text-decoration: none; border: 1.5px solid var(--accent); padding: 7px 13px; border-radius: 100px; } .doc-card .doc-dl:hover { background: var(--accent-soft); } /* «Gjelder din sak» — rolig markør, ikke et nytt rop om oppmerksomhet. */ .doc-card .tag-rel { display: inline-block; margin-top: 4px; font-style: normal; font-size: .68rem; font-weight: 600; letter-spacing: .02em; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 100px; } .doc-card.is-relevant { border-left: 3px solid var(--accent); } /* De to veiene: fyll ut selv, eller la oss gjøre det. */ .paths { display: flex; flex-direction: column; gap: 12px; } .path-card { border: 1.5px solid var(--line); border-radius: 20px; padding: 18px 20px; background: var(--card); box-shadow: var(--shadow); } .path-card b { display: block; font-size: 1rem; margin-bottom: 4px; } .path-card p { margin: 0 0 12px; font-size: .87rem; } .path-card.path-us { border-color: var(--accent); } .path-card button { width: 100%; } @media (min-width: 720px) { .paths { flex-direction: row; } .paths .path-card { flex: 1; display: flex; flex-direction: column; } .paths .path-card button { margin-top: auto; } } /* --- Handlekurv (13.08.2026) --- */ .doc-card .doc-buy.in-cart { background: var(--ink); } .doc-card .doc-buy.in-cart:hover { filter: brightness(1.3); } /* Kurvlinjen klistrer seg nederst mens kunden blar gjennom ni skjemaer, så totalen alltid er synlig uten å scrolle. */ .cart-bar { position: sticky; bottom: 12px; z-index: 30; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--card); border: 1.5px solid var(--accent); border-radius: 100px; padding: 10px 12px 10px 20px; box-shadow: 0 8px 28px rgba(16,29,51,.16); } .cart-bar .cart-sum { flex: 1; font-size: .9rem; white-space: nowrap; } .cart-bar .cart-sum b { font-size: 1rem; } .cart-bar button { margin: 0; white-space: nowrap; } @media (max-width: 420px) { .cart-bar { border-radius: 18px; padding: 12px 14px; } .cart-bar button { width: 100%; } } /* ===== Forside: Norge-hero i FULL BREDDE (13.08.2026) ===== Første forsøk la hero-en inne i .app (max-width 720px). På desktop ble det en liten boks midt i et hvitt tomrom — motsatt av «drøm deg bort til Norge». Nå bryter hero-en ut av kolonnen og fyller viewporten, med startboksen flytende OPPÅ bildet, ikke hengende under kanten. */ .visa-hero { position: relative; /* Bryt ut av .app sin 720px-kolonne uten å lage vannrett scroll. */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 0; margin-bottom: 28px; height: auto; min-height: 0; overflow: hidden; border-radius: 0; border-bottom: 0; display: flex; align-items: stretch; } .visa-hero-img { width: 100%; height: clamp(520px, 82vh, 900px); object-fit: cover; object-position: center 55%; display: block; border-radius: 0; } /* Mørkner toppen så overskriften er lesbar, og bunnen så den møter sideflaten. */ .visa-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(16,29,51,.42) 0%, rgba(16,29,51,.10) 32%, rgba(16,29,51,.10) 62%, var(--paper) 100%); } /* Alt innholdet ligger oppå bildet: overskrift øverst, boks i midten. */ .visa-hero-inner { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: clamp(28px, 6vh, 72px) 20px 0; text-align: center; color: #fff; } .visa-hero-inner h1 { color: #fff; margin: 10px 0 6px; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; max-width: 15ch; text-shadow: 0 2px 30px rgba(16,29,51,.45); } .visa-hero-inner .tag { color: rgba(255,255,255,.96); margin: 0; font-size: clamp(.95rem, 1.4vw, 1.1rem); text-shadow: 0 1px 16px rgba(16,29,51,.5); } .visa-hero .hero-logo { width: 54px; height: 66px; object-fit: contain; filter: drop-shadow(0 10px 26px rgba(16,29,51,.45)); } /* Startboksen svever midt i bildet — som søkefeltet i referansen. */ .hero-box { position: absolute; z-index: 3; left: 50%; top: 52%; transform: translate(-50%, -50%); width: min(660px, calc(100% - 32px)); background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.8); border-radius: 26px; padding: 18px 20px; box-shadow: 0 24px 70px rgba(16,29,51,.28); } .hero-box-lead { margin: 0 0 12px; font-size: .92rem; color: var(--muted); text-align: center; } .hero-box .start-form { margin: 0; display: flex; gap: 8px; } .hero-box .start-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .hero-box .start-form input { flex: 1; margin: 0; border-radius: 100px; padding: 14px 18px; font-size: 1rem; } .hero-box .start-form button { margin: 0; width: auto; white-space: nowrap; padding-inline: 26px; border-radius: 100px; } .hero-box .lang-pick { margin: 12px 0 0; justify-content: center; gap: 6px; } .hero-box .lang-pick .lang-btn { font-size: .74rem; padding: 5px 12px; } @media (max-width: 640px) { .visa-hero-img { height: clamp(460px, 76vh, 640px); } .hero-box { top: 54%; padding: 16px; border-radius: 22px; } .hero-box .start-form { flex-direction: column; } .hero-box .start-form button { width: 100%; } } .trust-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 22px; } .trust-row span { font-size: .76rem; color: var(--muted); background: var(--card); border: 1.5px solid var(--line); border-radius: 100px; padding: 6px 13px; } /* --- FAQ-teaser: 20 % lesbart, resten synlig men ulesbar --- */ .teaser-head { text-align: center; } .teaser-q { background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow); } .teaser-q h3 { margin: 0 0 6px; font-size: 1rem; } .teaser-visible { margin: 0; font-size: .9rem; } /* Resten av svaret er der, men uskarpt. Det viser at det FINNES noe mer — en tom boks ville bare sett ut som manglende innhold. */ .teaser-locked { position: relative; max-height: 84px; overflow: hidden; margin-top: 6px; user-select: none; } .teaser-locked p { margin: 0; font-size: .9rem; color: var(--muted); filter: blur(4.5px); opacity: .55; } .teaser-locked::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--card) 92%); } .teaser-cta { text-align: center; } .teaser-cta p { margin: 0 0 12px; font-size: .9rem; color: var(--muted); } /* ===================================================================== IMMERSIV MODUS (13.08.2026) Kristians mål: HELE siden skal være fjorden — ingen toppbar, ingen footer, ingen beige tomrom. Bildet ligger fast bak alt, og innholdet flyter oppå som glass. Forrige forsøk lot bildet være et element i dokumentflyten; da tok det slutt når man scrollet og resten falt ned i en smal beige kolonne. ===================================================================== */ /* Bakgrunnen er festet til viewporten, ikke til dokumentet. Kun på start-skjermen — «body»-en fikk ALDRI scopet dette til screen-start, så fjorden lekket inn under chatten: meldingsboblen fløt alene over fjellet med et enormt tomrom ned til inputfeltet (meldt 14.08.2026). Chatten skal se ut som en vanlig chat (Gemini/Claude-aktig), ikke en reiseannonse. */ body.immersive::before { content: ''; position: fixed; inset: 0; z-index: -2; /* Slør OG bilde i ETT lag. Sløret lå før på body::after, som allerede var opptatt av filmkornet (linje 39) — det arvet `opacity: .05` og malte dermed 5 % av det det skulle. Målt 16.08.2026: hvit hero-tittel lå på 2.04:1 mot himmelen, kravet er 4.5. Som meldte det fra telefonen sin. Gradienten står FØRST i lista, altså øverst i stabelen. */ background-image: linear-gradient(180deg, rgba(11,22,38,.56) 0%, rgba(11,22,38,.52) 26%, rgba(11,22,38,.26) 48%, rgba(11,22,38,.36) 78%, rgba(11,22,38,.60) 100%), url('assets/hero.webp'); background-size: cover, cover; background-position: center, center 55%; background-repeat: no-repeat, no-repeat; } /* body.immersive::after er fjernet — filmkornet (linje 39) eier dette pseudoelementet, og sløret bor nå i ::before over. */ body.immersive { background: #0b1626; } /* Footeren er borte, men nav-en beholdes — den har login, konto og meny som allerede virker. Den flyter oppå bildet i stedet for å sitte som en hvit stripe. */ .site-foot { display: none !important; } .topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; border-bottom: 0; box-shadow: none; padding: 14px clamp(14px, 3vw, 28px); display: flex; align-items: center; justify-content: space-between; } /* Svak mørk gradient bak toppen så hvite knapper leses mot lys himmel. */ .topnav::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(16,29,51,.42) 0%, rgba(16,29,51,0) 100%); } .topnav .nav-brand { color: #fff; text-shadow: 0 1px 12px rgba(16,29,51,.5); } .topnav .nav-logo { background: rgba(255,255,255,.92); border-radius: 12px; padding: 3px; } /* Alle knappene i toppen får samme form: hvit pille på glass. */ .nav-btn, .nav-lang { background: var(--glass) !important; color: var(--ink) !important; border: 1px solid rgba(255,255,255,.65) !important; border-radius: 100px !important; padding: 9px 16px !important; font-size: .84rem !important; font-weight: 600 !important; box-shadow: 0 6px 18px rgba(16,29,51,.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .nav-btn:hover, .nav-lang:hover { background: #fff !important; } .nav-btn#nav-login { background: var(--ink) !important; color: #fff !important; border-color: transparent !important; } .nav-actions { display: flex; align-items: center; gap: 8px; } /* Menyen henger under knappen, ikke midt i bildet. */ .nav-menu-dd, .nav-dropdown { border-radius: 16px; border: 1px solid rgba(255,255,255,.6); box-shadow: 0 18px 50px rgba(16,29,51,.28); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); background: var(--glass); } /* Mobil: bare meny + konto. Språk ligger i startboksen uansett. */ @media (max-width: 720px) { .topnav .nav-brand span { display: none; } .nav-lang { display: none !important; } .nav-btn#nav-login span { display: none; } .nav-btn { padding: 9px 13px !important; } } /* Innholdet svever oppå bildet, midtstilt. */ .app { max-width: 780px; min-height: 100dvh; padding-top: clamp(84px, 12vh, 132px); padding-bottom: 64px; } /* Hero-elementet er nå bare en tekstholder — bildet ligger i bakgrunnen. */ .visa-hero { width: auto; margin: 0 0 18px; overflow: visible; display: block; } .visa-hero-img { display: none; } .visa-hero::after { display: none; } .visa-hero-inner { position: static; padding: 0 8px; color: #fff; } .visa-hero-inner h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); max-width: 18ch; margin: 12px auto 8px; text-shadow: 0 2px 30px rgba(16,29,51,.5); } .visa-hero .hero-logo { filter: drop-shadow(0 10px 26px rgba(16,29,51,.5)); } /* Startboksen: hvit pille midt i bildet, som i referansen. */ .hero-box { position: static; transform: none; width: 100%; margin: 22px auto 0; background: var(--glass); border: 0; border-radius: 26px; padding: 18px; box-shadow: 0 24px 70px rgba(16,29,51,.32); } /* Tillitsrad og teasere blir glass, ikke hvite bokser i et beige felt. */ .trust-row { margin: 20px 0 26px; } .trust-row span { background: var(--glass); border-color: var(--glass-linje); backdrop-filter: blur(8px); } .teaser-head { background: transparent; box-shadow: none; border: 0; } .teaser-head h3 { color: #fff; text-shadow: 0 2px 20px rgba(16,29,51,.6); } .teaser-head .muted { color: rgba(255,255,255,.9); } .teaser-q { background: var(--glass); border-color: rgba(255,255,255,.55); backdrop-filter: blur(10px); box-shadow: 0 14px 40px rgba(16,29,51,.18); } .teaser-locked::after { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.94) 92%); } .teaser-cta { background: var(--glass); backdrop-filter: blur(10px); border-color: rgba(255,255,255,.55); } .legal { color: rgba(255,255,255,.95); text-shadow: 0 1px 3px rgba(11,22,38,.85), 0 1px 14px rgba(11,22,38,.6); } /* Hurtigvalg under boksen — inngangen til de vanligste spørsmålene. */ .hero-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px auto 0; max-width: 680px; } .hero-chips button { width: auto; margin: 0; font-size: .82rem; font-weight: 500; background: var(--glass); color: var(--ink); border: 1px solid rgba(255,255,255,.7); border-radius: 100px; padding: 9px 15px; cursor: pointer; box-shadow: 0 6px 18px rgba(16,29,51,.14); transition: transform .2s, background .2s; } .hero-chips button:hover { transform: translateY(-2px); background: #fff; } @media (max-width: 640px) { .app { padding-top: 28px; } .hero-chips button { font-size: .78rem; padding: 8px 13px; } } /* --- Svar som samtale i hero (13.08.2026) --- Chipsene pekte før ned til et kort lenger nede på siden. Det var rotete: kunden mistet konteksten og måtte lete. Nå svarer siden der hun spurte. */ .hero-chat { margin: 16px auto 0; max-width: 680px; } .hc-thread { display: flex; flex-direction: column; gap: 10px; } .hc-bubble { border-radius: 20px; padding: 13px 17px; font-size: .92rem; line-height: 1.5; box-shadow: 0 10px 30px rgba(16,29,51,.18); } /* Kundens eget spørsmål — mørk, høyrestilt, som i en chat. */ .hc-me { align-self: flex-end; max-width: 85%; background: var(--ink); color: #fff; border-bottom-right-radius: 6px; } /* Assistentens svar — hvitt, venstrestilt. */ .hc-bot { align-self: flex-start; max-width: 92%; background: var(--glass); color: var(--ink); border-bottom-left-radius: 6px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .hc-bot > p { margin: 0; } /* Resten av svaret finnes, men er ulesbar til kunden kjører intervjuet. */ .hc-locked { position: relative; max-height: 76px; overflow: hidden; margin-top: 6px; user-select: none; } .hc-locked p { margin: 0; filter: blur(4.5px); opacity: .5; color: var(--muted); } .hc-locked::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.97) 92%); } .hc-cta { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .hc-cta span { flex: 1; font-size: .84rem; color: var(--muted); min-width: 180px; } .hc-cta button { width: auto; margin: 0; padding: 10px 18px; border-radius: 100px; font-size: .86rem; } /* Når samtalen er i gang trenger vi ikke den lange kortlista under. */ .hero-chat:not([hidden]) ~ #faq-teaser { display: none; } /* --- Opprydding etter mobiltest 13.08.2026 --- Funn: logoen sto BÅDE i toppbaren og i hero-en rett under (så ut som en dobbeltoppføring), tillitsraden arvet monospace og lignet kode, og nav-en overlappet hero-innholdet med 22px. */ /* Én logo er nok — toppbaren har den allerede. */ .visa-hero .hero-logo { display: none; } .visa-hero-inner h1 { margin-top: 0; } /* Tillitsraden skal hviske, ikke rope. Den lå som fire like piller rett under hurtigvalgene og konkurrerte med dem. */ .trust-row { margin: 30px 0 24px; gap: 6px 14px; font-family: inherit; } .trust-row span { font-family: inherit; font-size: .74rem; letter-spacing: .01em; background: rgba(255,255,255,.14); color: rgba(255,255,255,.95); border: 0; padding: 6px 12px; backdrop-filter: blur(6px); text-shadow: 0 1px 8px rgba(16,29,51,.4); box-shadow: none; } /* Luft mellom hurtigvalg og tillitsrad. */ .hero-chips { margin-top: 22px; } /* Nav-en skal ikke ligge oppå overskriften. */ .app { padding-top: clamp(96px, 13vh, 140px); } @media (max-width: 640px) { .app { padding-top: 96px; } .visa-hero-inner h1 { font-size: clamp(1.9rem, 8.5vw, 2.5rem); } .trust-row { margin: 24px 0 18px; } .trust-row span { font-size: .7rem; padding: 5px 10px; } } /* Andrevalget i hero: dempet lenkeknapp under Start, så den viser veien uten å konkurrere med primærhandlingen. */ .hero-alt { width: 100%; margin: 10px 0 0; padding: 11px 14px; background: transparent; border: 1px solid var(--line); border-radius: 100px; cursor: pointer; font-size: .87rem; font-weight: 600; color: var(--accent); transition: background .2s, border-color .2s; } .hero-alt:hover { background: var(--accent-soft); border-color: var(--accent); } /* --- Betalingsvelger (14.08.2026) --- Før valgte vi metode ut fra språket. En nordmann i Thailand kunne ville betale med kort, og prisene er ulike i de to valutaene — så beløpet står på hvert valg. */ .pay-choice-bg { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(16,29,51,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .pay-choice { width: min(420px, 100%); background: var(--card); border-radius: 24px; padding: 22px; box-shadow: 0 30px 80px rgba(16,29,51,.4); } .pay-choice h3 { margin: 0 0 16px; text-align: center; font-size: 1.1rem; } .pc-opt { width: 100%; margin: 0 0 10px; padding: 15px 18px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; text-align: left; background: var(--card); color: var(--ink); border: 1.5px solid var(--line); border-radius: 18px; cursor: pointer; transition: border-color .2s, transform .2s, background .2s; } .pc-opt:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); } .pc-name { font-weight: 700; font-size: .96rem; } .pc-amt { grid-row: 1 / span 2; font-weight: 700; font-size: 1.05rem; color: var(--accent); white-space: nowrap; } .pc-sub { grid-column: 1; font-size: .78rem; color: var(--muted); } .pc-cancel { width: 100%; margin: 6px 0 0; padding: 12px; background: transparent; border: 0; cursor: pointer; color: var(--muted); font-size: .86rem; } .pc-cancel:hover { color: var(--ink); } /* --- /takk og /konto (14.08.2026) --- */ .takk-card { text-align: center; } .takk-tick { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.8rem; line-height: 56px; font-weight: 700; } .takk-spin { width: 40px; height: 40px; margin: 0 auto 14px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: takkspin .9s linear infinite; } @keyframes takkspin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .takk-spin { animation: none; } } .takk-files { list-style: none; margin: 0; padding: 0; } .takk-files li { padding: 9px 0; border-bottom: 1px solid var(--line); } .takk-files li:last-child { border-bottom: 0; } .takk-files a { color: var(--accent); text-decoration: none; font-weight: 600; font-size: .92rem; } .takk-files a:hover { text-decoration: underline; } .konto-order-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .konto-order-head .muted { font-size: .8rem; } .konto-status { margin-left: auto; font-size: .7rem; font-weight: 700; letter-spacing: .03em; padding: 3px 10px; border-radius: 100px; text-transform: uppercase; } .konto-fulfilled { background: var(--accent-soft); color: var(--accent); } .konto-pending { background: var(--gul-flate); color: var(--gul-tekst); } .konto-failed { background: rgba(179,64,47,.12); color: var(--red); } .konto-case { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .konto-case .muted { font-size: .8rem; } .konto-case button, .konto-order button { width: auto; margin: 0 0 0 auto; padding: 8px 16px; font-size: .82rem; } .konto-danger { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .konto-danger button { width: auto; margin: 0; } .konto-danger .small { flex-basis: 100%; margin: 4px 0 0; } button.danger { background: transparent; color: var(--red); border: 1.5px solid var(--red); border-radius: 100px; padding: 10px 18px; cursor: pointer; font-weight: 600; } button.danger:hover { background: rgba(179,64,47,.08); } /* --- 30 %-paywall i sammendraget (14.08.2026) --- Serveren sender aldri det låste innholdet. Vi viser derfor HVA som finnes («Gebyrer · 4 punkter») med grå plassholderlinjer — ikke uskarp ekte tekst. Å blurre noe man faktisk har sendt er kosmetikk; dette er en ekte vegg. */ .locked-card { position: relative; } .locked-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .locked-head h3 { margin: 0; } .locked-count { font-size: .74rem; font-weight: 700; letter-spacing: .02em; color: var(--accent); background: var(--accent-soft); padding: 3px 10px; border-radius: 100px; } .locked-rows { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; } .locked-row { height: 11px; border-radius: 6px; background: linear-gradient(90deg, rgba(16,29,51,.10), rgba(16,29,51,.05)); } .locked-row:nth-child(2) { width: 88%; } .locked-row:nth-child(3) { width: 72%; } .locked-row:nth-child(4) { width: 80%; } .locked-badge { position: absolute; top: 14px; right: 16px; font-size: 1rem; opacity: .5; } .timeline-teaser { margin: 10px 0 0; } .unlock-box { text-align: center; border-color: var(--accent); } .unlock-box p { margin: 0 0 14px; font-size: .92rem; } /* ===== Design-QA 14.08.2026 (spec seksjon 8) ===== Funnet ved systematisk måling på 375/390/768/1280 px. */ /* 🔴 Kjøpsknappen stakk UTENFOR viewporten på 375 og 390 px — dokumentkortet er en flex-rad med ikon, tekst, merkelapp og knapp, og på smal skjerm var det ikke plass. Knappen var delvis utilgjengelig på iPhone. */ @media (max-width: 520px) { .doc-card { flex-wrap: wrap; row-gap: 10px; } .doc-card .meta { flex: 1 1 100%; order: 1; } .doc-card .ico { order: 0; } .doc-card .tag-fill { order: 2; } .doc-card .doc-buy, .doc-card .doc-dl { order: 3; margin-left: auto; } } /* Thai uten tofu. Uten dette faller thai tilbake på systemfont, som på Windows og eldre Android mangler glyfene helt. */ :root { --font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Thai', 'Noto Sans', Helvetica, Arial, sans-serif; } body, input, button, select, textarea { font-family: var(--font-stack); } :lang(th), [lang='th'] { line-height: 1.75; } /* Brukergenerert tekst kan inneholde lange ord, URL-er og passnumre uten mellomrom. Uten dette sprenger de boksen sin. */ .msg, .hc-bubble, .teaser-visible, .teaser-locked p, .sumval, .takk-files, .konto-order, p, li, td { overflow-wrap: anywhere; } h1, h2, h3, .visa-hero-inner h1 { text-wrap: balance; } /* Trykkflater: minst 44 px, som er terskelen for at en tommel treffer. Målt før: nav-knapper 36 px, doc-buy 30 px, språkvalg 31 px. */ .nav-btn, .nav-lang, .nav-brand { min-height: 44px; display: inline-flex; align-items: center; } .doc-card .doc-buy, .doc-card .doc-dl { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .lang-pick .lang-btn { min-height: 44px; } .hero-alt, #path-self-cta, .hero-chips button, .pc-opt, .pc-cancel { min-height: 44px; } input, select, textarea { min-height: 44px; } .tabs button { min-height: 44px; } /* Chatten: input skal aldri gjemmes av tastaturet på iOS. */ .chat-form { padding-bottom: max(12px, env(safe-area-inset-bottom)); } /* På mobil skjules knappeteksten, så bare ikonet blir igjen og bredden faller til 33–40 px. Høyden var fikset, bredden ikke — en tommel trenger begge. */ .nav-btn, .nav-lang { min-width: 44px; justify-content: center; } /* --- Svarknapper i chatten (14.08.2026) --- Samme mønster som Gemini/Claude: forslag under svaret, så kunden aldri står med et tomt felt og fire fagbegrep hun ikke kjenner. */ .chat-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; padding: 0 2px; animation: chipsIn .25s ease-out; } @keyframes chipsIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .chat-choices { animation: none; } } .chat-choices button { width: auto; margin: 0; min-height: 44px; padding: 10px 16px; font-size: .88rem; font-weight: 600; line-height: 1.3; color: var(--accent); background: var(--skjema-bg); border: 1.5px solid var(--accent); border-radius: 100px; cursor: pointer; text-align: left; transition: background .18s, transform .18s; } .chat-choices button:hover { background: var(--accent-soft); transform: translateY(-1px); } .chat-choices button:active { transform: translateY(0); } /* --- Alfred som guide i chatten (14.08.2026) --- Figuren lå ubrukt som logo i hjørnet. Nå står han ved siden av hver melding fra assistenten. Bevisst dempet: han skal gi en følelse av at noen hjelper deg, ikke hoppe rundt og ta oppmerksomheten. */ .msg-row { display: flex; align-items: flex-end; gap: 8px; } .msg-row .msg { margin: 0; } .msg-avatar { width: 34px; height: 34px; flex: 0 0 34px; object-fit: contain; object-position: bottom; background: var(--glass); border: 1px solid var(--line); border-radius: 50%; padding: 2px; align-self: flex-end; } /* Mens han "tenker" puster avataren rolig. Stopper når svaret er ferdig. */ .msg-row:has(.typing) .msg-avatar { animation: alfredPust 1.6s ease-in-out infinite; } @keyframes alfredPust { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.04); } } @media (prefers-reduced-motion: reduce) { .msg-row:has(.typing) .msg-avatar { animation: none; } } @media (max-width: 420px) { .msg-avatar { width: 28px; height: 28px; flex-basis: 28px; } .msg-row .msg { max-width: calc(100% - 40px); } } /* ===================================================================== ÉN FLATE — forsiden ER chatten (14.08.2026) Kristian, tredje gang: «Fremsiden har jo en chat, er jo den man skal bruke. Skriver du navnet og trykker enter, skal alt bare skje der, som i en Gemini- eller Claude-chat. Ingen nytt vindu, ingen ny chat, alt på samme sted.» Chat-skjermen er derfor slettet. Under er reglene som gjør at SAMME side skifter drakt: `body.samtale`. ===================================================================== */ /* Meldingene er en del av siden, ikke en boks med egen scroll. */ #messages { flex: none; display: flex; flex-direction: column; gap: 12px; overflow: visible; min-height: 0; width: 100%; max-width: 680px; margin: 0 auto; padding: 0 2px; } body:not(.samtale) #messages { display: none; } /* I samtale trekker forsidens salgsflater seg unna — kunden skal se samtalen sin, ikke en reiseannonse rundt den. */ body.samtale .visa-hero-inner, body.samtale #hero-chips, body.samtale #hero-chat, body.samtale #faq-teaser, body.samtale .trust-row, body.samtale .hero-box-lead, body.samtale .hero-alt, body.samtale .hero-box .lang-pick, /* 🔴 Disse tre manglet, og det var HELE grunnen til at skrivefeltet så feil ut (meldt av Kristian 17.08.2026, rødt merke rundt boksen): • overskriften «Spør oss om visum til Norge» — en salgstittel midt i en samtale som alt er i gang • startspørsmålene — de gjentar seg selv, for samtalen viser sine EGNE valg rett over • «Gratis. Ingen konto» — et løfte til en besøkende, ikke til en kunde som har snakket med Alfred i fem minutter Med dem inne ble boksen 176 px høy. `border-radius: 100px` er laget for en pille på ~68 px; på en 176 px høy boks blir den en klump. Derfor så den ut som forsidekortet som hadde blitt igjen. */ body.samtale .hero-box-tittel, body.samtale #boks-sporsmal, body.samtale .boks-gratis { display: none; } /* Hero-en blir samtaleflaten: den fyller skjermen, og `margin-top: auto` på meldingene legger dem NEDERST når de er få — slik en chat oppfører seg. Blir de mange, vokser hero-en og siden scroller som vanlig (min-height, ikke height — ellers blir de øverste meldingene uleselige). */ body.samtale .visa-hero { display: flex; flex-direction: column; min-height: calc(100dvh - clamp(96px, 13vh, 140px) - 56px); margin-bottom: 0; } body.samtale #messages { margin-top: auto; padding-bottom: 8px; } /* Startboksen BLIR skrivefeltet — samme boks, ny jobb. Den henger fast i bunnen av skjermen mens samtalen ruller forbi over den. */ body.samtale .hero-box { position: sticky; z-index: 4; bottom: max(10px, env(safe-area-inset-bottom)); width: 100%; max-width: 680px; margin: 0 auto; padding: 10px 12px; border-radius: 100px; background: var(--glass); box-shadow: 0 18px 50px rgba(16,29,51,.30); } .hero-box .chat-form { margin: 0; padding: 0; border-top: 0; gap: 8px; } .hero-box .chat-form input { flex: 1; min-width: 0; margin: 0; border-radius: 100px; padding: 13px 18px; font-size: 1rem; border: 1px solid var(--line); background: var(--skjema-bg); } .hero-box .chat-form .send { margin: 0; width: auto; flex: 0 0 auto; border-radius: 100px; padding: 0 20px; min-height: 46px; } /* «Se resultatet →» dukker opp over skrivefeltet når intervjuet er ferdig. */ .hero-summary { display: block; width: auto; margin: 14px auto 0; border-radius: 100px; padding: 10px 20px; background: var(--glass); border: 1px solid var(--glass-linje); box-shadow: 0 10px 28px rgba(16,29,51,.2); } .hero-summary[hidden] { display: none; } /* Legalteksten skal ikke ligge oppå skrivefeltet. */ body.samtale #screen-start > .legal { margin-top: 14px; } @media (max-width: 640px) { body.samtale .hero-box { padding: 8px 10px; } body.samtale .visa-hero { min-height: calc(100dvh - 96px - 48px); } } /* Forsiden er midtstilt — det er riktig for en overskrift, feil for en samtale. Meldinger leses fra venstre. */ #messages, #messages .msg, #messages .msg-row, .chat-choices { text-align: left; } /* Skrivefeltet skal stå NEDERST, ikke svevende med luft under seg. */ body.samtale #screen-start { padding-bottom: 6px; } body.samtale #screen-start > .legal { margin: 14px 0 0; padding-top: 0; font-size: .72rem; position: relative; z-index: 5; color: rgba(255,255,255,.92); } /* `hidden`-attributtet taper mot en display-regel. Uten dette ville både navneskjemaet og skrivefeltet stått synlige samtidig. */ [hidden] { display: none !important; } /* I samtale scroller meldingene forbi under toppbaren. Uten en tettere skygge kolliderer teksten med menyknappene. */ body.samtale .topnav::before { background: linear-gradient(180deg, rgba(16,29,51,.72) 0%, rgba(16,29,51,.45) 55%, rgba(16,29,51,0) 100%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* ===== Utfyllingen (intake) — 14.08.2026 ===== Det sensitive skal SE annerledes ut. Kunden må kunne se med øynene hvilke felt som blir hos henne, ellers er løftet bare en setning i en tekst. */ .intake { max-width: 680px; margin: 0 auto; text-align: left; } .intake h2 { color: #fff; text-shadow: 0 2px 20px rgba(16,29,51,.55); } .intake-lead { color: rgba(255,255,255,.92); font-size: .86rem; margin: 4px 0 18px; } .intake-seksjon { background: var(--glass); border-radius: 20px; padding: 16px 18px; margin: 0 0 14px; box-shadow: 0 14px 40px rgba(16,29,51,.18); } .intake-seksjon h3 { margin: 0 0 12px; font-size: 1.02rem; } .intake-felt { display: block; margin: 0 0 14px; } .intake-sporsmal { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 5px; } .intake-felt input, .intake-felt textarea { width: 100%; margin: 0; border-radius: 12px; padding: 11px 13px; font-size: .95rem; } .intake-hjelp { display: block; font-size: .76rem; color: var(--muted); margin-top: 4px; } /* Låst = blir hos deg. Grønn kant, ikke rød: dette er trygghet, ikke fare. */ .intake-felt.er-sensitiv input, .intake-felt.er-sensitiv textarea { border: 1.5px solid var(--accent); background: var(--accent-soft, rgba(14,124,107,.06)); } .lokal-merke { color: var(--accent); font-weight: 700; } .intake-bunn { margin-top: 18px; } .intake-bunn .muted { color: rgba(255,255,255,.9); text-shadow: 0 1px 10px rgba(16,29,51,.5); } #intake-status { margin-top: 10px; color: #fff; font-size: .9rem; text-shadow: 0 1px 10px rgba(16,29,51,.5); } /* Flervalg: haket av = fylt. Kunden må se hva hun har valgt før hun sender. */ .chat-choices.flervalg button.valgt { background: var(--accent); color: #fff; border-color: var(--accent); } .chat-choices .valg-send { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 700; } .chat-choices .valg-send:disabled { opacity: .45; cursor: default; } /* «Endre forrige svar» — dempet, men alltid der. Et feil svar skal ikke følge kunden helt inn i skjemaet. */ .angre-rad { display: flex; justify-content: flex-end; margin: -2px 2px 4px; } .angre-rad button { width: auto; margin: 0; padding: 5px 12px; min-height: 0; background: rgba(255,255,255,.22); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 100px; font-size: .76rem; cursor: pointer; backdrop-filter: blur(6px); text-shadow: 0 1px 8px rgba(16,29,51,.5); } .angre-rad button:hover { background: rgba(255,255,255,.34); } /* Rabattkode i kassen */ .rabatt-kort { max-width: 420px; text-align: left; } .rabatt-kort #rabatt-inn { width: 100%; text-transform: uppercase; letter-spacing: .08em; font-family: var(--mono); font-size: 1rem; text-align: center; } .rabatt-svar { min-height: 22px; margin: 8px 0 4px; font-size: .88rem; font-weight: 600; } .rabatt-svar.ok { color: var(--accent); } .rabatt-svar.nei { color: var(--red); } /* Samtykke — liten, nederst, ikke en vegg foran innholdet. */ .samtykke { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom)); width: min(560px, calc(100% - 24px)); background: var(--glass); border-radius: 18px; padding: 14px 16px; box-shadow: 0 18px 50px rgba(16,29,51,.3); animation: samtykkeInn .3s ease-out; } @keyframes samtykkeInn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; } } .samtykke p { margin: 0 0 10px; font-size: .84rem; line-height: 1.45; color: var(--ink); } .samtykke-knapper { display: flex; gap: 8px; } .samtykke-knapper button { margin: 0; width: auto; flex: 1; min-height: 42px; border-radius: 100px; font-size: .86rem; } .samtykke-knapper .alt { background: transparent; border: 1px solid var(--line); color: var(--muted); } /* Framdrift mens sammendraget lages. Ubestemt bar — vi later ikke som vi vet hvor lenge det tar, men kunden ser at noe skjer. */ .arbeid { text-align: center; padding: 34px 16px; } .arbeid-bar { height: 5px; border-radius: 100px; overflow: hidden; background: rgba(255,255,255,.28); max-width: 320px; margin: 0 auto 16px; } .arbeid-bar i { display: block; height: 100%; width: 38%; border-radius: 100px; background: linear-gradient(90deg, var(--accent), #4fd1b8); animation: arbeidGli 1.5s ease-in-out infinite; } @keyframes arbeidGli { 0% { transform: translateX(-100%); } 100% { transform: translateX(360%); } } .arbeid-tekst { margin: 0 0 6px; font-size: .95rem; color: #fff; font-weight: 600; text-shadow: 0 1px 12px rgba(16,29,51,.5); transition: opacity .18s; } .arbeid-hint { color: rgba(255,255,255,.93) !important; text-shadow: 0 1px 3px rgba(11,22,38,.85), 0 1px 14px rgba(11,22,38,.6); } @media (prefers-reduced-motion: reduce) { .arbeid-bar i { animation: none; width: 100%; opacity: .5; } } /* Neste steg etter kjøp — den som nettopp betalte er den varmeste kunden. */ .neste-steg { margin-top: 6px; } .neste-h { color: #fff; text-shadow: 0 2px 20px rgba(16,29,51,.55); font-size: 1.15rem; margin: 22px 0 12px; } .neste-kort { background: var(--glass); border-radius: 20px; padding: 18px; margin-bottom: 12px; box-shadow: 0 14px 40px rgba(16,29,51,.2); border: 2px solid var(--accent); } .neste-kort.dempet { border-color: rgba(255,255,255,.6); } .neste-kort h3 { margin: 0 0 8px; font-size: 1.02rem; } .neste-kort p { margin: 0 0 14px; font-size: .9rem; color: var(--muted); line-height: 1.5; } .neste-kort button { margin: 0; width: 100%; } .neste-merke { display: inline-block; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 100px; margin-bottom: 8px; } /* Alfredthai bygger saken din — og lærer deg noe mens du venter. */ .arbeid-alfred { width: 84px; height: 84px; object-fit: contain; display: block; margin: 0 auto 14px; filter: drop-shadow(0 12px 28px rgba(16,29,51,.45)); animation: alfredJobber 2.6s ease-in-out infinite; } @keyframes alfredJobber { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-7px) rotate(1.5deg); } } .arbeid-tips { margin: 18px auto 12px; max-width: 400px; background: var(--glass); border-radius: 16px; padding: 13px 16px; box-shadow: 0 12px 34px rgba(16,29,51,.2); text-align: left; } .arbeid-tips-merke { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; } .arbeid-tips-tekst { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--ink); transition: opacity .2s; min-height: 2.6em; } @media (prefers-reduced-motion: reduce) { .arbeid-alfred { animation: none; } } /* «Gjør dette på PC» — vennlig beskjed, ikke en sperre. */ .pc-varsel { background: rgba(14,124,107,.08); border: 1px solid rgba(14,124,107,.28); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; font-size: .83rem; line-height: 1.45; color: var(--ink); } /* Sponsorskjemaet: enten gjør verten det selv (BankID), eller vi gjør det. */ .sponsor-boks { background: var(--glass); border-radius: 18px; padding: 16px 18px; margin-top: 16px; box-shadow: 0 12px 34px rgba(16,29,51,.2); text-align: left; } .sponsor-boks.gjør-selv { border-left: 4px solid var(--oransje-strek); } .sponsor-boks.vi-gjør { border-left: 4px solid var(--accent); } .sponsor-boks h3 { margin: 0 0 8px; font-size: 1rem; } .sponsor-boks p { margin: 0 0 10px; font-size: .88rem; line-height: 1.5; color: var(--muted); } .sponsor-boks ol { margin: 0 0 12px; padding-left: 20px; font-size: .86rem; line-height: 1.7; } .sponsor-lenke { font-weight: 600; color: var(--accent); text-decoration: none; } .sponsor-lenke:hover { text-decoration: underline; } /* Steg for steg — kunden skal se hvor hun er og hvor langt det er igjen. */ .steg-topp { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .steg-prikker { display: flex; gap: 6px; flex: 1; } .steg-prikker i { height: 5px; flex: 1; border-radius: 100px; background: rgba(255,255,255,.35); transition: background .25s; } .steg-prikker i.gjort { background: var(--accent); } .steg-prikker i.na { background: var(--card); } .steg-teller { font-family: var(--mono); font-size: .76rem; color: rgba(255,255,255,.9); text-shadow: 0 1px 8px rgba(16,29,51,.5); } .steg-knapper { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; } .steg-knapper button { margin: 0; width: auto; min-width: 130px; } .steg-knapper .alt { background: rgba(255,255,255,.22); color: #fff; border: 1px solid rgba(255,255,255,.4); } .pv-lenke { color: inherit; opacity: .85; } .legal .pv-lenke:hover { opacity: 1; } /* Det som gjenstår etter at skjemaene er fylt ut. */ .praktisk-boks { background: var(--glass); border-radius: 18px; padding: 18px; margin-top: 14px; box-shadow: 0 12px 34px rgba(16,29,51,.2); text-align: left; } .praktisk-boks h3 { margin: 0 0 14px; font-size: 1.02rem; } .praktisk-steg { display: flex; gap: 12px; margin-bottom: 16px; } .praktisk-steg:last-child { margin-bottom: 0; } .praktisk-ikon { font-size: 1.3rem; line-height: 1.2; flex: 0 0 26px; } .praktisk-steg b { display: block; font-size: .92rem; margin-bottom: 3px; } .praktisk-steg p { margin: 0 0 6px; font-size: .85rem; line-height: 1.5; color: var(--muted); } .praktisk-lenke { font-size: .85rem; font-weight: 600; color: var(--accent); text-decoration: none; } .praktisk-lenke:hover { text-decoration: underline; } .praktisk-steg .praktisk-lenke + .praktisk-lenke { margin-left: 14px; } /* Tjenestene vi kan gjøre for kunden — tydelig pris, tydelig grense. */ .tjeneste-boks { background: var(--glass); border-radius: 18px; padding: 18px; margin-top: 14px; box-shadow: 0 12px 34px rgba(16,29,51,.2); text-align: left; border-left: 4px solid var(--oransje-strek); } .tjeneste-boks h3 { margin: 0 0 6px; font-size: 1.02rem; } .tjeneste-lead { margin: 0 0 12px; font-size: .86rem; color: var(--muted); line-height: 1.5; } .tjeneste-liste { list-style: none; margin: 0 0 12px; padding: 0; } .tjeneste-liste li { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .88rem; } .tjeneste-liste li:last-child { border-bottom: 0; } .tjeneste-liste b { font-family: var(--mono); font-size: .82rem; color: var(--accent); white-space: nowrap; } .tjeneste-vfs { background: rgba(194,65,12,.06); border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; font-size: .82rem; line-height: 1.5; color: var(--ink); } .tjeneste-boks button { margin: 0; width: 100%; } /* ===== Menyen rant utfor skjermen (meldt 15.08.2026) ===== Den hang fra VENSTRE kant av knappen, og knappen står helt til høyre. Med 260 px bredde havnet halve menyen utenfor viewporten, og teksten ble klippet: «คำถามที่พบ…», «ความเป็นส่วนต…». max-width klemte bredden, men flyttet den ikke — den må henge fra HØYRE. */ .nav-menu-dd, .nav-dropdown { left: auto !important; right: 0; max-width: min(300px, calc(100vw - 16px)); width: max-content; min-width: 240px; } .nav-menu-dd .dd-item, .nav-dropdown .dd-item { white-space: normal; /* lange thai-tekster skal brytes, ikke klippes */ line-height: 1.35; } /* Språkvalg i menyen — flaggene gjør det synlig for den som ikke leser språket siden står på. */ .dd-sprak { display: flex; gap: 6px; padding: 8px 6px 4px; border-top: 1px solid var(--line); margin-top: 6px; } .dd-sprak button { flex: 1; margin: 0; min-height: 40px; padding: 6px 4px; background: transparent; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-size: .78rem; color: var(--ink); line-height: 1.2; } .dd-sprak button.valgt { background: var(--ink); color: #fff; border-color: var(--ink); } .dd-sprak .flagg { display: block; font-size: 1.15rem; margin-bottom: 2px; } /* «Pakken er billigere» — vi sier det før kunden regner det ut selv. */ .kurv-tips { background: var(--gul-flate); border: 1.5px solid var(--gul-linje); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; text-align: left; } .kurv-tips b { display: block; margin-bottom: 4px; font-size: .95rem; } .kurv-tips p { margin: 0 0 10px; font-size: .86rem; line-height: 1.5; color: var(--muted); } .kurv-tips button { margin: 0; width: 100%; } /* Valutavelger — kundens valg, ikke vår gjetning ut fra språket. */ .valutavelger { display: inline-flex; gap: 0; margin-top: 10px; border: 1.5px solid var(--line, #e3e3e3); border-radius: 999px; overflow: hidden; } .valutavelger button { margin: 0; padding: 6px 16px; border: 0; background: transparent; cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--muted); border-radius: 0; width: auto; } .valutavelger button.aktiv { background: var(--brand, #1f4b99); color: #fff; } /* Valg som skjemaet faktisk godtar — nedtrekk og avkryssingsbokser. */ .intake-felt select { width: 100%; padding: 10px 12px; border: 1.5px solid var(--line, #e3e3e3); border-radius: 10px; font: inherit; background: var(--skjema-bg); color: var(--ink); } .intake-valg.flere { display: flex; flex-wrap: wrap; gap: 8px; } .valgboks { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1.5px solid var(--line, #e3e3e3); border-radius: 999px; cursor: pointer; font-size: .88rem; } .valgboks.valgt { border-color: var(--brand, #1f4b99); background: var(--bla-flate); font-weight: 600; } .valgboks input { margin: 0; } /* «Disse rutene må du krysse selv» — ærlig om det vi ikke kan fylle. */ .manuell-boks { background: var(--gul-flate); border: 1.5px solid var(--gul-linje); border-radius: 16px; padding: 16px 18px; margin: 14px 0; } .manuell-boks b { display: block; margin-bottom: 6px; } .manuell-boks p { margin: 0 0 10px; font-size: .88rem; line-height: 1.55; color: var(--muted); } .manuell-boks ul { margin: 0; padding-left: 20px; font-size: .86rem; line-height: 1.7; } /* «Du har kjøpt disse» — svarer på spørsmålet kunden stiller seg når kortene plutselig sier «Last ned» i stedet for «Legg i kurv». */ .eier-kort { border-left: 4px solid var(--ok, #1a7f45); } .eier-kort b { display: block; margin-bottom: 6px; } .eier-kort p { margin: 0 0 12px; font-size: .9rem; line-height: 1.55; } .eier-kort button { margin: 0; } .eier-kort.pakke1 { border-left-color: var(--brand, #1f4b99); } .eier-kort.pakke1 button { width: 100%; margin: 0 0 8px; } .blank-merke { font-style: normal; font-size: .72rem; opacity: .65; font-weight: 400; } /* «Hvem du kjøper av» — står rett under pakkeprisene, der tvilen er størst. */ .tillit-kort { border-left: 4px solid var(--brand, #1f4b99); } .tillit-kort b { display: block; margin-bottom: 6px; } .tillit-kort p { font-size: .9rem; line-height: 1.6; } .tillit-adresse { margin: 10px 0; font-size: .84rem !important; color: var(--muted); } .tillit-lenker { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; } .tillit-lenker a { font-size: .88rem; font-weight: 600; } .foot-firma { margin-bottom: 8px; } .foot-firma b { font-size: .95rem; } .tillit-kanaler { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 12px; font-size: .86rem; } /* Maskoten: ved chatten og ved FAQ-en — der den svarer på noe. Ikke i toppen; der står firmaet. */ .maskot-faq { display: block; width: 76px; height: auto; margin: 0 auto 6px; filter: drop-shadow(0 4px 12px rgba(16,29,51,.22)); } body.immersive .topnav .nav-brand span { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.4); } /* «Alfredium Visa» var skjult på mobil fordi LOGOEN bar merket der. Logoen er flyttet til firmabanneret, så uten dette står app-menyen helt tom. */ @media (max-width: 560px) { .nav-brand span { display: inline !important; font-size: .95rem; } .topnav .nav-brand span { display: inline !important; } } /* Firmaet i menyen som alt finnes — ikke enda en rad på skjermen. Blåtonen er hentet med pipette fra logoen (#297eb7, hue 204°). */ :root { --varaporn: #297eb7; } .dd-firma { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); } .dd-firma-tittel { display: block; padding: 4px 14px 6px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--varaporn); } .dd-item.liten { font-size: .88rem; padding-top: 7px; padding-bottom: 7px; } /* Logofila er HVIT på gjennomsiktig — laget for mørk bakgrunn, som fjord- bildet. Da trenger den ingen hvit sirkel bak; den leses som ett merke sammen med «Alfredium Visa» i stedet for et klistremerke oppå et foto. Målt: den blå varianten forsvinner i himmelen (blått på blått). */ .topnav .nav-logo, .nav-logo { background: none; padding: 0; border-radius: 0; width: 40px; height: 40px; /* logoen er kvadratisk, ikke 38x48 */ filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); } /* På lys bakgrunn (ikke-immersive skjermer) må den derimot fargelegges. */ /* På lys bakgrunn ville den hvite logoen forsvinne. Der bytter vi til den blå varianten via en egen klasse — filter på en hvit strek gir grumsete resultat, en riktig fil gir ren farge. */ body:not(.immersive) .nav-logo { content: url(assets/varaporn-96.png); filter: none; } /* Startskjermen: hva som skjer, hvor mye vi alt vet, hva som blir hos deg. */ .intake-start h2 { margin-bottom: 10px; } .start-punkt { margin: 12px 0; padding: 12px 15px; border-radius: 12px; font-size: .9rem; line-height: 1.55; } .start-fylt { background: var(--gronn-flate); border: 1px solid var(--gronn-linje); } .start-laast { background: var(--gul-flate); border: 1px solid var(--gul-linje); } .intake-start .primary { width: 100%; margin-top: 18px; } /* «fra samtalen din» — så en endring blir et bevisst valg, ikke en tilfeldighet. */ .kilde-merke { display: inline-block; margin-top: 4px; font-size: .72rem; color: var(--gronn-tekst); opacity: .85; } .kilde-merke.er-endret { color: var(--oransje-tekst); font-weight: 600; opacity: 1; } .intake-felt.fra-samtalen input, .intake-felt.fra-samtalen textarea, .intake-felt.fra-samtalen select { border-color: var(--gronn-linje); background: var(--gronn-svak); } /* Inngangen er et spørsmålsfelt, ikke et navnefelt. */ #start-sporsmal { width: 100%; } /* Svarene i hero-chatten er HELE svar nå — ingen uskarp hale. */ .hc-locked, .teaser-locked { display: none !important; } .hc-videre { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .88rem; } .hc-videre span { display: block; margin-bottom: 10px; color: var(--muted); } .hc-videre button { width: 100%; margin: 0; } .hc-thread { display: flex; flex-direction: column; gap: 10px; } /* Valutavelgeren hører til prisene, ikke til et intro-kort som byttes ut. */ .valuta-rad { display: flex; justify-content: center; margin: 0 0 14px; } /* «Se over før vi lager skjemaene» — endringene samlet ett sted, før noe havner på et UDI-skjema. */ .start-endret { background: var(--oransje-flate); border: 1px solid var(--oransje-linje); } .seover-liste { list-style: none; padding: 0; margin: 14px 0; } .seover-liste li { padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); } .seover-liste b { display: block; font-size: .9rem; margin-bottom: 6px; } .seover-liste span { display: block; font-size: .84rem; } .seover-fra { color: var(--muted); text-decoration: line-through; } .seover-til { color: var(--oransje-tekst); font-weight: 600; } /* ── Halvmånen: av/på for mørk modus ──────────────────────────────────────── Sitter i toppmenyen, synlig på alle skjermer. Rund og like bred som høy, så den leses som et ikon og ikke som en knapp med tekst som mangler. */ .nav-tema { width: 40px; height: 40px; padding: 0; font-size: 1.05rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } /* Over fjorden er alt hvitt — knappen må følge med, ellers blir den usynlig. */ body.immersive .nav-tema { color: #fff; border-color: rgba(255,255,255,.45); } body.immersive .nav-tema:hover { background: rgba(255,255,255,.16); color: #fff; } /* ── Tekst som ligger RETT PÅ fjorden ─────────────────────────────────────── `.screen-title` og `.loader` sto i mørk blekk uten skygge, midt oppå fotografiet. Det gikk så vidt så lenge bildet var lyst — og ble verre i det sløret ble gjort mørkere 16.08. Her gjelder samme regel som for fotnoten: hvit tekst med en fast skygge under, ikke en farge som håper på en lys bakgrunn. Gjelder i BEGGE moduser — bildet er mørkt uansett tema. */ body.immersive .screen-title, body.immersive .screen-title span { color: #fff; text-shadow: 0 1px 3px rgba(11,22,38,.85), 0 1px 14px rgba(11,22,38,.6); } body.immersive .loader { color: rgba(255,255,255,.92); text-shadow: 0 1px 3px rgba(11,22,38,.85), 0 1px 14px rgba(11,22,38,.6); } /* LINE er hovedkanalen mot thailandske kunder. Egen farge så den skiller seg fra e-post og telefon — LINEs egen grønn, som folk kjenner igjen. */ .tillit-kanaler .kanal-line { color: #06C755; font-weight: 600; } /* LINE i menyen — LINEs egen grønn som prikk, så kanalen kjennes igjen uten at vi laster et logo-bilde fra et annet domene. */ .dd-line .line-prikk { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #06C755; margin-right: 9px; vertical-align: baseline; } .dd-line { font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════════════ FORSIDEN 16.08.2026 — eksempelkort, pris, tillit, familie-footer og en hero som bruker skjermen. Målt før: på 1440 px var forsiden en 604 px kolonne midt på skjermen. 58 % sto tomt, prisen fantes ikke over folden, og ingenting sa hvem vi er. Mobilen er UROERT. Alt under er enten nye seksjoner eller en mediespørring fra 1024 px og opp — den flyten som virker på telefon skal ikke risikeres. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Alfredthai uten hvit plate ──────────────────────────────────────────── Bildet hadde en hvit boks bakt inn i seg; den er fjernet fra PNG-en 16.08.2026. Da skal heller ikke CSS-en tegne en plate rundt figuren. */ .visa-hero-inner .hero-logo { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; filter: drop-shadow(0 8px 20px rgba(11,22,38,.45)); } /* ── Eksempelkortet ─────────────────────────────────────────────────────── */ .hero-demo { background: var(--card); border-radius: 20px; padding: 18px 20px 20px; box-shadow: 0 24px 56px -20px rgba(11,22,38,.5); text-align: left; max-width: 460px; margin: 16px auto 0; } .demo-merke { display: inline-block; font: 700 .66rem var(--body-font); letter-spacing: .09em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 5px 10px; border-radius: 20px; margin-bottom: 12px; } .demo-rad { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; } .hero-demo > .demo-rad { border-bottom: 1px solid var(--line); } .demo-rad span { font: 500 .82rem var(--body-font); color: var(--muted); } .demo-rad b { font: 700 .84rem var(--body-font); color: var(--ink); text-align: right; } .demo-grad { padding-top: 4px; } .demo-niva { color: var(--gold-tekst); font-family: var(--display); font-size: .92rem; } .demo-bar { display: flex; gap: 4px; margin: 2px 0 6px; } .demo-bar i { flex: 1; height: 7px; border-radius: 4px; background: var(--line); display: block; } .demo-bar i.ok { background: var(--accent); } .demo-bar i.mid { background: var(--gold); } .demo-grad small { font: 400 .72rem/1.45 var(--body-font); color: var(--muted); } .demo-hinder { margin-top: 13px; padding: 13px 14px; border-radius: 14px; background: var(--varsel-flate); border: 1px solid var(--varsel-linje); } .demo-hinder .dh-tittel { font: 700 .76rem var(--body-font); color: var(--varsel-tekst); margin-bottom: 5px; } .demo-hinder b { display: block; font: 700 .84rem var(--body-font); color: var(--ink); margin-bottom: 3px; } .demo-hinder p { margin: 0; font: 400 .78rem/1.5 var(--body-font); color: var(--muted); } .hero-demo .demo-cta { width: 100%; margin-top: 15px; } /* ── Pris ───────────────────────────────────────────────────────────────── Prisen skal møte kunden over folden, ikke ligge begravd i FAQ. */ .pris-seksjon { margin: 34px 0 0; } .pris-topp { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; margin-bottom: 18px; } .pris-topp h2 { font-family: var(--display); font-size: clamp(1.4rem, 4vw, 2rem); margin: 0 0 5px; letter-spacing: -.02em; } .pris-topp p { margin: 0; font-size: .92rem; color: var(--muted); } .valutabytte { display: flex; gap: 5px; background: var(--card); padding: 5px; border-radius: 12px; border: 1px solid var(--line); } .valutabytte button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font: 700 .8rem var(--body-font); padding: 8px 14px; border-radius: 9px; } .valutabytte button.aktiv { background: var(--ink); color: var(--paper); } .pris-rad { display: grid; grid-template-columns: 1fr; gap: 12px; } .pris-kort { position: relative; background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 18px 18px 16px; box-shadow: var(--shadow); } .pris-kort.valgt { border-color: var(--accent); box-shadow: 0 14px 34px -14px rgba(14,124,107,.4); } .pris-merke { position: absolute; top: -10px; left: 18px; font: 700 .64rem var(--body-font); letter-spacing: .05em; background: var(--accent); color: #fff; padding: 4px 10px; border-radius: 12px; } .pk-tittel { font: 700 .88rem var(--body-font); color: var(--ink); margin-bottom: 5px; } .pk-pris { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; } .pk-pris b { font: 800 1.6rem var(--display); letter-spacing: -.02em; color: var(--ink); } .pk-pris small { font: 600 .74rem var(--body-font); color: var(--muted); } .pris-kort p { margin: 0; font: 400 .8rem/1.55 var(--body-font); color: var(--muted); } .pris-bunn { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 15px; } .pris-bunn small { font-size: .78rem; color: var(--muted); } /* ── Tillit ─────────────────────────────────────────────────────────────── Anonyme visumsider er en pest. At vi er et registrert selskap med kontor er nettopp det de ikke kan si — da skal det stå. */ .tillit-seksjon { margin: 34px 0 0; display: grid; grid-template-columns: 1fr; gap: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 24px; } .tillit-tekst h2 { font-family: var(--display); font-size: clamp(1.25rem, 3.4vw, 1.7rem); margin: 0 0 9px; letter-spacing: -.02em; } .tillit-tekst p { margin: 0 0 15px; font-size: .93rem; line-height: 1.65; color: var(--muted); } .tillit-merker { display: flex; flex-wrap: wrap; gap: 8px; } .tillit-merker span { font: 600 .78rem var(--body-font); color: var(--ink); background: var(--paper); border: 1px solid var(--line); padding: 8px 13px; border-radius: 12px; } .tillit-kontakt { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 4px; } .tillit-kontakt b { font: 700 .88rem var(--body-font); color: var(--ink); } .tillit-kontakt .tk-adr { font: 400 .8rem/1.6 var(--body-font); color: var(--muted); margin-bottom: 10px; } .tillit-kontakt a { text-decoration: none; } /* LINE-grønn er et annet firmas merkefarge — den rører vi ikke. Hvit tekst på den er 2,26:1, så teksten snus mørk i stedet: 8:1. */ .tillit-kontakt .tk-line { display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 12px; background: #06C755; color: #0B1626; font: 700 .86rem var(--body-font); margin-bottom: 8px; } .tillit-kontakt .tk-tlf { text-align: center; font: 600 .84rem var(--body-font); color: var(--ink); padding: 5px 0; } .tillit-kontakt .tk-epost { text-align: center; font: 500 .82rem var(--body-font); color: var(--muted); } /* ── Familie-footer ───────────────────────────────────────────────────────── */ .familie-foot { margin: 34px calc(-1 * clamp(16px,4vw,28px)) 0; padding: 32px clamp(16px,4vw,28px) 22px; background: var(--night); color: #fff; border-radius: 22px 22px 0 0; } .ff-kolonner { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 1160px; margin: 0 auto; } .ff-merke img { width: 38px; height: auto; display: block; margin-bottom: 10px; } .ff-merke b { display: block; font: 800 1rem var(--display); margin-bottom: 6px; } .ff-merke span { display: block; font: 700 .8rem var(--body-font); margin-bottom: 3px; } .ff-merke small { display: block; font: 400 .74rem/1.65 var(--body-font); color: #93A8A2; } .familie-foot h3 { font: 700 .72rem var(--body-font); letter-spacing: .06em; text-transform: uppercase; color: #93A8A2; margin: 0 0 11px; } .familie-foot a { display: block; font: 400 .82rem var(--body-font); color: #C9D6D2; text-decoration: none; padding: 4px 0; } .familie-foot a:hover { color: #fff; } .familie-foot a.ff-line { color: #4FD98A; font-weight: 700; } .ff-bunn { max-width: 1160px; margin: 22px auto 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font: 400 .72rem var(--body-font); color: #93A8A2; } /* ── Farger som de nye delene trenger, i begge temaer ──────────────────── */ :root { --gold-tekst: #8A671C; /* gull som TEKST: merkegullet er 3,16:1 på hvitt */ --varsel-flate: #FBF0EC; --varsel-linje: #EBCFC7; --varsel-tekst: #B03A24; } @media (prefers-color-scheme: dark) { :root:not([data-tema="lys"]) { --gold-tekst: #E0BE55; --varsel-flate: #2A1E16; --varsel-linje: #4E3626; --varsel-tekst: #E8917A; } } :root[data-tema="mork"] { --gold-tekst: #E0BE55; --varsel-flate: #2A1E16; --varsel-linje: #4E3626; --varsel-tekst: #E8917A; } /* ── SKJERMBREDDE: heroen tar hele flaten, innholdet i to kolonner ──────── Rutenettet ligger på `.visa-hero` SELV, ikke på tittelblokka: startboksen, meldingene og eksempelkortet er SØSKEN av `.visa-hero-inner`, ikke barn. La man rutenettet på innerblokka, ble bare logo/tittel/ingress plassert og resten falt utenfor. Ingen HTML flyttes — hvert element får sin rute. */ @media (min-width: 1024px) { /* Heroen ligger inne i `.screen`, som har max-width 660px — derfor kunne den aldri fylle skjermen. Her bryter den ut i full bredde igjen. Samme grep for de nye seksjonene, som ellers hadde stått som en smal stripe. */ /* 🔴 To utbrytningstriks på rad (negativ prosentmargin, så left+transform) stablet seg oppå hverandre: prisdelen havnet på x=-418 og første kort lå utenfor skjermen. Løsningen er å slutte å bryte ut i det hele tatt — FORSIDEN får full bredde, og innholdet sentreres innenfor. Ingen prosentregning mot ukjente bokser. De andre skjermene beholder sin smale spalte. */ /* Bremsen ligger på `main.app { max-width: 780px }`. Den skal BLI der — de andre skjermene er tekst, og 1440px lange linjer er uleselige. Bare forsiden bryter ut, og den gjør det ÉN gang, på ett element. Tidligere forsøk la utbrytninger på hver enkelt seksjon; de stablet seg og skjøv prisdelen til x=-418 med første kort utenfor skjermen. */ #screen-start { max-width: none; padding-left: 0; padding-right: 0; position: relative; left: 50%; transform: translateX(-50%); width: 100vw; } #screen-start > * { box-sizing: border-box; } .visa-hero, .familie-foot, .pris-seksjon, .tillit-seksjon { width: 100%; max-width: none; margin-left: 0; margin-right: 0; left: auto; transform: none; } .pris-seksjon, .tillit-seksjon { padding-left: 28px; padding-right: 28px; } /* Alt som ikke skal strekke seg over hele en 1440px-skjerm */ .pris-topp, .pris-rad, .pris-bunn, .ff-kolonner, .ff-bunn, #screen-start > #messages, #screen-start > .hero-chips, #screen-start > .trust-row, #screen-start > .legal { max-width: 1160px; margin-left: auto; margin-right: auto; } #screen-start > #hero-chips, #screen-start > .trust-row { max-width: 1000px; } .visa-hero { height: auto; min-height: 620px; padding: 74px 28px; box-sizing: border-box; display: grid; align-content: center; justify-content: center; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); column-gap: 48px; row-gap: 18px; max-width: none; } .visa-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; } /* Diagonalt slør: mørkest der teksten står, lysest der bildet skal leve. */ .visa-hero::after { background: linear-gradient(118deg, rgba(9,20,38,.88) 0%, rgba(11,22,38,.66) 46%, rgba(11,22,38,.28) 100%); } /* Kolonne 1 — hvem vi er og hva du får */ .visa-hero-inner { position: relative; inset: auto; z-index: 3; grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 0; justify-content: center; } /* Alfredthai er skjult i mobilvisningen («én logo er nok — toppbaren har den»). På skjermbredde er det plass, og figuren er den som gir siden et ansikt. Bildet har ikke lenger hvit plate (PNG-en ble rettet 16.08). */ .visa-hero .hero-logo { display: block; width: 88px; height: auto; margin: 0 0 16px; background: transparent; border: 0; padding: 0; border-radius: 0; animation: none; filter: drop-shadow(0 10px 26px rgba(11,22,38,.5)); } .visa-hero-inner h1 { margin: 0 0 14px; font-size: clamp(2.5rem, 3.8vw, 3.3rem); } .visa-hero-inner .tag { margin: 0; font-size: 1.05rem; } .visa-hero .hero-demo { grid-column: 1; grid-row: 2; margin: 0; max-width: none; align-self: start; } /* Kolonne 2 — samtalen, på samme sted hele veien */ /* 🔴 `position: relative` alene gjenoppliver `left: 50%` fra den gang boksen var absolutt plassert midt i bildet — den havnet 328px for langt til høyre (50 % av sin egen bredde) og stakk utenfor skjermen. Nullstill plasseringen eksplisitt. Rutenettbarn respekterer z-index uten position. */ .visa-hero #messages, .visa-hero .hero-box, .visa-hero .hero-summary, .visa-hero .hero-demo { position: static; left: auto; right: auto; top: auto; transform: none; z-index: 3; } .visa-hero #messages { grid-column: 2; grid-row: 1; align-self: end; margin: 0; } /* Boksen spenner over begge radene og sentreres — i designet står den i høyde med tittelen, ikke nede ved eksempelkortet. Meldingene får rad 1 for seg selv, så en samtale i gang aldri legger seg oppå den. */ .visa-hero .hero-box { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; width: 100%; } body.samtale .visa-hero .hero-box { grid-row: 2; align-self: start; } .visa-hero .hero-summary { grid-column: 2; grid-row: 3; justify-self: start; } /* Thai har tonemerker over og vokaler under; 1.06 klemmer dem. */ html[lang="th"] .visa-hero-inner h1 { line-height: 1.3; } .pris-rad { grid-template-columns: repeat(4, 1fr); gap: 16px; } .tillit-seksjon { grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: center; padding: 30px; } .ff-kolonner { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; } .pris-topp, .pris-rad, .pris-bunn { max-width: 1160px; margin-left: auto; margin-right: auto; } .tillit-seksjon { max-width: 1160px; margin-left: auto; margin-right: auto; } } /* ── Prisdelen på den immersive forsiden ────────────────────────────────── Målt 16.08.2026 i 12 kombinasjoner: overskriften sto i mørk blekk RETT PÅ fjorden — 1,08:1, altså usynlig. Seksjonen har ingen egen flate; den flyter over det faste bildet som alt annet på forsiden. Da må teksten følge samme regel som resten: hvit med fast skygge, ikke en farge som håper på en lys bakgrunn. */ body.immersive .pris-topp h2 { color: #fff; text-shadow: 0 1px 3px rgba(11,22,38,.85), 0 1px 16px rgba(11,22,38,.6); } body.immersive .pris-topp p, body.immersive .pris-bunn small { color: rgba(255,255,255,.94); text-shadow: 0 1px 3px rgba(11,22,38,.85), 0 1px 14px rgba(11,22,38,.6); } /* Knappen «Vi tar hele jobben» sto i mørk blekk med gjennomsiktig bunn. */ body.immersive .pris-bunn .ghost { color: #fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.12); backdrop-filter: blur(8px); } body.immersive .pris-bunn .ghost:hover { background: rgba(255,255,255,.22); } /* Tillitsdelen har egen hvit flate og er uberørt — men overskriften der arver fra kortet, så den skal IKKE gjøres hvit. */ /* ── «Mest valgt» i mørk modus ──────────────────────────────────────────── Turkisen lysner i mørk modus for å leses mot mørk flate; da holder ikke hvit tekst OPPÅ den (2,61:1). Samme felle som hovedknappen i går: en aksentfarge har to jobber, og de trekker i hver sin retning. */ .pris-merke { color: var(--knapp-tekst, #fff); } /* Forsiden er sentrert av `.screen { text-align:center }`. De nye delene er lesetekst i kolonner — de skal være venstrestilt, ellers blir hver linje et nytt utgangspunkt for øyet. */ .pris-kort, .pris-topp, .pris-bunn, .tillit-tekst, .tillit-kontakt, .familie-foot { text-align: left; } .pris-bunn { justify-content: space-between; } .tillit-kontakt b, .tillit-kontakt .tk-adr { text-align: left; } .tillit-kontakt .tk-tlf, .tillit-kontakt .tk-epost { text-align: center; } /* Ansvarsfraskrivelsen sto TO ganger: én i familie-footeren og én i den opprinnelige `.legal` under den. Den opprinnelige beholdes — den har personvern-lenken. */ .ff-bunn span:last-child { display: none; } /* ═══════════════════════════════════════════════════════════════════════════ SIDEMENYEN — app-skallet fra designprosjektet. 17.08.2026 Målt før: alt bak forsiden sto i en 780px spalte midt på en 1440px skjerm, og navigasjonen lå gjemt bak et hamburgerikon. Kunden mistet stedet sitt hver gang hun byttet skjerm. Menyen finnes KUN fra 1024px og opp. På telefon er flyten uendret. ═══════════════════════════════════════════════════════════════════════════ */ .app-side { display: none; } @media (min-width: 1024px) { /* Skallet: meny til venstre, innhold til høyre. `main.app` var 780px bred; nå er den hele flaten, og LESEBREDDEN styres av skjermene selv. */ main.app { max-width: none; width: 100%; display: grid; grid-template-columns: 252px minmax(0, 1fr); align-items: start; padding-left: 0; padding-right: 0; gap: 0; } /* 🔴 Sidemenyen hører til APPEN, ikke forsiden. I designet er forsiden en full markedsside med bare toppbaren; sidemenyen dukker opp først når kunden er inne i saken sin. Med menyen på forsiden ble heroen klemt fra 1440 til 1188px — nettopp det Kristian så. */ body.paa-forsiden main.app { grid-template-columns: minmax(0, 1fr); } body.paa-forsiden .app-side { display: none; } body.paa-forsiden main.app > .screen { grid-column: 1; } .app-side { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; align-self: start; height: 100vh; padding: 20px 16px 18px; background: var(--night); color: #fff; z-index: 12; /* `main.app` har plass reservert på toppen for den faste toppmenyen. Sidemenyen skal gå helt opp i hjørnet, som i designet — derfor oppheves den avstanden her. */ margin-top: calc(-1 * var(--app-topp, 125px)); overflow-y: auto; } /* Skjermene ligger i kolonne 2 og får sin egen lesebredde. Forsiden er unntaket — den skal fylle flaten. */ main.app > .screen { grid-column: 2; grid-row: 1; width: 100%; } main.app > .screen:not(#screen-start) { max-width: 900px; padding: 26px 34px 40px; } /* Forsiden brøt tidligere ut med left/transform mot vinduet. Nå ligger den i kolonne 2, og utbrytningen ville skjøvet den under menyen. */ #screen-start { left: auto; transform: none; width: 100%; } .side-merke { display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; padding: 4px 6px 14px; text-align: left; } .side-merke img { width: 34px; height: auto; display: block; } .side-merke span { font: 800 1rem var(--display); color: #fff; } .side-kort { background: rgba(255,255,255,.07); border-radius: 14px; padding: 13px; } .sk-topp { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .sk-avatar { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--night); display: flex; align-items: center; justify-content: center; font: 700 .86rem var(--body-font); flex: none; } .sk-topp b { display: block; font: 700 .82rem var(--body-font); color: #fff; } .sk-topp small { display: block; font: 500 .7rem var(--body-font); color: #93A8A2; } .sk-bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; } .sk-bar i { display: block; height: 100%; background: var(--accent-bright); transition: width .4s; } .side-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; } .side-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: 0; background: transparent; color: #fff; cursor: pointer; padding: 11px 13px; border-radius: 11px; font: 500 .88rem var(--body-font); transition: background .2s; } .side-item:hover { background: rgba(255,255,255,.08); } .side-item.aktiv { background: rgba(255,255,255,.14); font-weight: 700; } .si-ikon { font-size: 1rem; opacity: .75; } .side-item.aktiv .si-ikon { opacity: 1; } /* LINE-grønn er et annet firmas merkefarge — den beholder vi. Hvit tekst på den er 2,26:1, så teksten er mørk i stedet: 8:1. */ .side-line { display: flex; align-items: center; gap: 9px; text-decoration: none; background: rgba(6,199,85,.16); border: 1px solid rgba(6,199,85,.42); color: #fff; font: 700 .8rem var(--body-font); padding: 11px 13px; border-radius: 11px; } .sl-prikk { width: 9px; height: 9px; border-radius: 50%; background: #06C755; display: block; flex: none; } .side-legal { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); font: 400 .66rem/1.5 var(--body-font); color: #7F918C; } /* Toppmenyen skal ikke ligge oppå sidemenyen. */ .topnav { left: 252px; } /* Hamburgeren er overflødig når menyen står framme. */ .nav-menu-wrap { display: none; } } /* Tomme skjermer skal si HVA som mangler, ikke bare være tomme. */ .tom-skjerm { text-align: center; padding: 40px 20px; } .tom-skjerm img { width: 96px; height: auto; margin: 0 auto 16px; display: block; } .tom-skjerm p { font-size: .95rem; color: var(--muted); margin: 0 0 18px; } .ck-liste { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 10px; } .ck-liste li { display: flex; align-items: flex-start; gap: 11px; font-size: .9rem; color: var(--ink); } .ck-boks { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line2); flex: none; margin-top: 1px; } .ko-topp { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .ko-topp img { width: 44px; height: 44px; object-fit: contain; border-radius: 12px; background: #fff; padding: 4px; } .ko-topp b { display: block; font-size: .95rem; } .ko-topp small { color: var(--muted); font-size: .78rem; } .ko-eller { text-align: center; font-size: .78rem; color: var(--muted); margin: 14px 0 8px; } .ko-kanaler { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; font-size: .85rem; } .ko-kanaler a { text-decoration: none; color: var(--ink); } .ko-kanaler .kanal-line { color: var(--accent); font-weight: 700; } /* Toppavstanden i main.app, lest ut og gitt navn så sidemenyen kan oppheve den. */ @media (min-width: 1024px) { main.app { --app-topp: 124.8px; } } /* ── Forsiden slik designet viser den 17.08.2026 ────────────────────────── */ /* Firmanavnet under merket i toppen: Varaporn Consulting er selskapet, Alfredium Visa er tjenesten. Begge skal stå. */ .nav-navn { display: flex; flex-direction: column; line-height: 1.1; text-align: left; } .nav-navn b { font: 800 1rem var(--display); } .nav-navn small { font: 500 .64rem var(--body-font); opacity: .78; letter-spacing: .02em; } .nav-line { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; } .nl-prikk { width: 9px; height: 9px; border-radius: 50%; background: #06C755; display: block; flex: none; } /* Ingressen og de tre merkene i heroen — de sto ingen steder, henholdsvis langt nede på siden. */ .hero-ingress { color: rgba(255,255,255,.95); font-size: 1.02rem; line-height: 1.6; margin: 14px 0 0; max-width: 30ch; text-shadow: 0 1px 3px rgba(11,22,38,.8), 0 1px 16px rgba(11,22,38,.55); } .hero-merker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .hero-merker span { font: 600 .78rem var(--body-font); color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); padding: 7px 13px; border-radius: 20px; backdrop-filter: blur(6px); } /* Startboksen: overskrift i stedet for en lang paragraf. */ .hero-box-tittel { font: 700 1.05rem var(--display); color: var(--ink); margin: 0 0 12px; text-align: left; } .boks-sporsmal { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; justify-content: center; } .boks-sporsmal button { font: 500 .78rem var(--body-font); color: var(--ink); cursor: pointer; background: var(--card); border: 1px solid var(--line); padding: 7px 12px; border-radius: 20px; } .boks-sporsmal button:hover { border-color: var(--accent); color: var(--accent); } .boks-gratis { text-align: center; font-size: .78rem; color: var(--muted); margin: 12px 0 0; } @media (min-width: 1024px) { .hero-ingress { max-width: 34ch; font-size: 1.06rem; } .visa-hero-inner .hero-logo { width: 72px; } /* Språkknappene hører ikke hjemme i startboksen på skjermbredde — språkvelgeren i toppen gjør den jobben. */ .hero-box .lang-pick { display: none; } } /* Alfredthai og undertittelen på samme linje, over tittelen — som i designet. */ .hero-topp { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 14px; } .hero-topp .hero-logo { margin: 0 !important; flex: none; } .hero-topp .tag { margin: 0 0 8px !important; text-align: left; } @media (min-width: 1024px) { /* Designet har en romsligere venstremarg enn de 28px mobilen bruker, og innholdet er samlet i en kolonne som ikke sprer seg på brede skjermer. */ .visa-hero { padding-left: clamp(28px, 6vw, 88px); padding-right: clamp(28px, 6vw, 88px); } .visa-hero-inner { align-items: flex-start; } .hero-topp .tag { font-size: 1rem; } } /* ═══════════════════════════════════════════════════════════════════════════ SAMTALE-TILSTANDEN PÅ SKJERMBREDDE 17.08.2026 🔴 Feilen dette retter: `body.samtale` skjuler `.visa-hero-inner` — hele kolonne 1 i rutenettet. Da samtalen startet, forsvant tittelen, figuren, ingressen og merkene, og resten spredte seg utover: meldingene på y=-349, startboksen midt på skjermen, eksempelkortet alene til venstre. Målt på 1856px og 2560px. Jeg bygde rutenettet for forsiden i ro og testet aldri samtalen på bred skjerm. Rettelsen: når samtalen er i gang, ER dette appen — sidemeny til venstre, samtalen i én kolonne. Nøyaktig som designet. ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { /* Sidemenyen skal fram så snart samtalen er i gang, også på forsiden. */ body.paa-forsiden.samtale main.app { grid-template-columns: 252px minmax(0, 1fr); } body.paa-forsiden.samtale .app-side { display: flex; } body.paa-forsiden.samtale main.app > .screen { grid-column: 2; } /* Heroen blir samtaleflate: én kolonne, lesebredde, ingen tomme ruter. */ body.samtale .visa-hero { display: flex; flex-direction: column; align-items: center; min-height: 0; padding: 26px clamp(20px, 4vw, 40px) 30px; } body.samtale .visa-hero #messages, body.samtale .visa-hero .hero-box, body.samtale .visa-hero .hero-summary { grid-column: auto; grid-row: auto; width: 100%; max-width: 780px; align-self: center; margin: 0; } body.samtale .visa-hero #messages { margin-bottom: 14px; } /* Markedsdelene hører til forsiden i ro. Under en samtale er de støy — kunden er i gang, ikke i ferd med å bestemme seg. */ body.samtale .hero-demo, body.samtale #pris-seksjon, body.samtale #tillit-seksjon, body.samtale #familie-foot, body.samtale .trust-row { display: none !important; } } /* På brede skjermer skal innholdet ikke strekke seg i det uendelige. Målt på 2560px: eksempelkortet ble 1151px bredt og ingressen en enkelt lang linje. Heroen får en makslinje, sentrert. */ @media (min-width: 1024px) { .visa-hero { max-width: 1560px; margin-left: auto; margin-right: auto; } /* `.visa-hero .hero-demo` lenger opp setter `max-width: none` og vinner på spesifisitet — grensen må settes med samme vekt. */ .visa-hero .hero-demo { max-width: 470px; } .visa-hero .hero-box { max-width: 470px; justify-self: center; } .hero-ingress { max-width: 32ch; } } /* ═══════════════════════════════════════════════════════════════════════════ EKSAKTE MÅL FRA DESIGN-SPECCEN (Notion, hifi-handoff) 17.08.2026 Speccen sier: «Farger, fonter, spacing og tekst er endelige. Ikke gjett — bruk verdiene her.» Alt under er hentet derfra, ikke fra et skjermbilde. Jeg hadde gjettet meg til nesten-riktige tall fra bilder; det er derfor det ble «nesten likt» og aldri likt. ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { /* Hero: padding 104/44/74, innhold max 1200, kolonner 1.02fr .98fr, gap 52 */ .visa-hero { padding: 104px 44px 74px; max-width: none; margin: 0; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); column-gap: 52px; align-items: center; /* 🔴 Basegradienten lå HER og dekket fotoet. På den levende siden er fjorden en FAST bakgrunn bak heroen (body.immersive::before), så en ugjennomsiktig gradient på .visa-hero maler rett oppå den — toppen ble blek og grå i stedet for fjord. Speccen vil ha gradienten UNDER bildet; den ligger nå på body, der den hører hjemme. */ } /* Innholdet sentreres i 1200px, ikke i hele flaten. */ .visa-hero > * { max-width: none; } .visa-hero-inner { max-width: calc((1200px - 52px) * .51); } /* H1 55/1.06/-.03em — ikke en clamp som gjetter. */ .visa-hero-inner h1 { font-size: 55px; line-height: 1.06; letter-spacing: -.03em; text-shadow: 0 2px 20px rgba(11,22,38,.5); } /* Kicker 13/600/.05em #B9D9CF · ingress Inter 400 17/1.62 #E3ECEA max 460 */ .hero-topp .tag { font: 600 13px var(--body-font); letter-spacing: .05em; color: #B9D9CF; } .hero-ingress { font: 400 17px/1.62 var(--body-font); color: #E3ECEA; max-width: 460px; } /* Topbar 64–70px, padding 44px. Sidemeny 250px. Seksjoner 44px. */ .topnav { height: 68px; padding-left: 44px; padding-right: 44px; } main.app { grid-template-columns: 250px minmax(0, 1fr); } body.paa-forsiden.samtale main.app { grid-template-columns: 250px minmax(0, 1fr); } .topnav { left: 250px; } body.paa-forsiden:not(.samtale) .topnav { left: 0; } .pris-seksjon, .tillit-seksjon { padding-left: 44px; padding-right: 44px; } .familie-foot { padding-left: 44px; padding-right: 44px; } /* Content max-width 1200 (var 1160) */ .pris-topp, .pris-rad, .pris-bunn, .tillit-seksjon, .ff-kolonner, .ff-bunn { max-width: 1200px; } } /* «Har du en sak fra før?»-stripa — README: bakgrunn --paper2. */ .kom-tilbake { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; padding: 26px clamp(16px,4vw,44px); background: var(--paper-2); margin-top: 34px; } .kom-tilbake span { font: 600 .92rem var(--body-font); color: var(--ink); } @media (min-width: 1024px) { /* README: maskot 76px i heroen · prisdel padding 62px 44px */ .visa-hero .hero-logo { width: 76px; } .pris-seksjon { padding: 62px 44px; } .kom-tilbake { padding: 30px 44px; } } /* ═══════════════════════════════════════════════════════════════════════════ APP-SKJERMENE ETTER README 17.08.2026 Målt før: 3 av 10 punkter stemte. Skjermene virket, men var den gamle utformingen — ikke bygget etter spesifikasjonen. ═══════════════════════════════════════════════════════════════════════════ */ /* Vanskelighetsmåleren: README gir gradienten eksakt. Den hadde tre stopp (ok→warn→red); speccen har to. */ .meter > span { background: linear-gradient(90deg, #1b7f5c, #e0a63a); } /* Hinder-kortet: #fdeaee bakgrunn, #f3c4cd ramme. Det ene kunden må løse. */ .hinder-kort { background: #fdeaee; border: 1px solid #f3c4cd; } .hinder-kort h3 { color: var(--varsel-tekst, #B03A24); display: flex; align-items: center; gap: 8px; } .hinder-kort p { color: var(--muted2, #4A5567); } /* Tidslinjen som tre prikker: ferdig turkis ✓, nåværende rød ring, framtid grå. */ .tl-prikker { list-style: none; padding: 0; margin: 10px 0 12px; display: flex; flex-direction: column; gap: 12px; } .tl-prikker li { display: flex; align-items: flex-start; gap: 11px; font: 600 .84rem var(--body-font); } .tl-prikker i { width: 16px; height: 16px; border-radius: 50%; flex: none; margin-top: 1px; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 9px; color: #fff; } .tl-ferdig i { background: var(--accent); } .tl-ferdig i::before { content: '✓'; } .tl-naa i { background: transparent; border: 2px solid var(--red); } .tl-naa span { color: var(--red); } .tl-senere i { background: transparent; border: 2px solid var(--line2); } .tl-senere span { color: var(--muted); } .tl-tekst { font-size: .84rem; color: var(--muted); margin: 4px 0 0; } /* FAQ som trekkspill. «−» i rødt når åpent — README. */ .faq-q { padding: 0; overflow: hidden; } .faq-hode { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; padding: 16px 18px; font: inherit; color: inherit; } .faq-hode h3 { margin: 0; font-size: .96rem; } .faq-tegn { font-size: 1.2rem; color: var(--muted); flex: none; } .faq-q.aapen .faq-tegn { color: var(--red); } .faq-svar { display: none; padding: 0 18px 16px; } .faq-q.aapen .faq-svar { display: block; } .faq-svar p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--muted); } /* Sjekklista: framdriftsring i SVG, gullstrek på navy-kort, prosent i midten. */ .ck-framdrift { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px; background: var(--night); color: #fff; margin-bottom: 18px; } .ck-ring { position: relative; width: 56px; height: 56px; flex: none; } .ck-ring svg { width: 56px; height: 56px; transform: rotate(-90deg); } .ck-ring svg circle { transition: stroke-dashoffset .4s; } .ck-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 .82rem var(--body-font); } .ck-teller { font: 700 1rem var(--body-font); } .ck-frist { font: 400 .8rem var(--body-font); color: #C9D6D2; } .ck-liste li { align-items: flex-start; } .ck-navn small { display: block; font: 600 .72rem var(--body-font); color: var(--red); margin-top: 2px; } .ck-neste { padding: 12px 14px; border-radius: 12px; border: 1.5px solid #f3c4cd; background: #fdeaee; } /* README skjerm 5: to kolonner 58/42 mens samtalen går. */ @media (min-width: 1024px) { body.samtale #screen-summary .summary-body { max-width: none; } #screen-summary .summary-body { max-width: 760px; margin: 0 auto; } } /* ── Sammendraget ved siden av samtalen (README skjerm 5, høyre ~42 %) ──── */ .samtale-panel { display: none; } @media (min-width: 1024px) { /* Under en samtale er heroen to kolonner: samtalen til venstre (~58 %), sammendraget som fylles ut til høyre (~42 %). Panelet er hvitt, som i README — det skal lese som et dokument, ikke som enda et glasskort. */ body.samtale .visa-hero { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); column-gap: 32px; max-width: 1200px; margin: 0 auto; padding: 26px 44px 34px; /* 🔴 Målt 17.08.2026 kl. 08: skrivefeltet lå på y=652 med 248 px tom flate under seg, og siden hadde 191 px egen rulling I TILLEGG til at meldingslista rullet inni seg selv. To rullefelt oppå hverandre — da vet ingen hvilken som flytter seg, og halve svaret sto igjen under kanten (Kristian ringte det inn i rødt). Fasit: samtaleflaten er nøyaktig så høy som skjermen tillater, rad 1 (meldingene) er den som strekker seg, og skrivefeltet lander av seg selv på bunnen. Siden ruller ikke — bare samtalen. */ /* Ingen magiske tall: skjermen setter høyden på HELE kolonnen (main.app er nøyaktig 100dvh med border-box), #screen-start strekker seg, og heroen fyller det som er igjen. Endrer toppbaren eller legalteksten høyde, retter dette seg selv. Forrige forsøk trakk fra «117px + 46px» og bommet med 76 px — akkurat den slags tall som råtner. */ height: auto; min-height: 0; flex: 1 1 auto; grid-template-rows: minmax(0, 1fr) auto auto; align-content: stretch; align-items: stretch; } body.samtale .visa-hero #messages { grid-column: 1; grid-row: 1; max-width: none; margin: 0 0 14px; height: 100%; max-height: none; min-height: 0; } /* Panelet strakk seg over alle tre radene og ble like høyt som samtalen. Det skal være så høyt som innholdet, festet i toppen. */ /* Panelet lå 5 px inn under den 68 px høye toppbaren. Meldingsbobler tåler å gli under den (baren har gradient bak seg) — et hvitt dokumentkort gjør det ikke, det leses som en feil. Å dytte hele kolonnen ned i stedet ble prøvd og forkastet: da havnet meldingene på y=-125. Marg på panelet flytter bare panelet. */ body.samtale .visa-hero .samtale-panel { align-self: start; margin-top: 26px; } body.samtale .visa-hero .hero-box { grid-column: 1; grid-row: 2; max-width: none; align-self: start; } body.samtale .visa-hero .hero-summary { grid-column: 1; grid-row: 3; } body.samtale .samtale-panel { display: block; grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 86px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px; box-shadow: var(--shadow); } } .sp-topp { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .sp-topp h3 { margin: 0; font: 800 1.06rem var(--display); color: var(--ink); } .sp-live { display: flex; align-items: center; gap: 6px; white-space: nowrap; font: 600 .68rem var(--body-font); color: var(--accent); background: var(--accent-soft); padding: 5px 10px; border-radius: 14px; } .sp-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: block; } .sp-rad { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .sp-rad span { font: 500 .8rem var(--body-font); color: var(--muted); } .sp-rad b { font: 700 .82rem var(--body-font); color: var(--ink); text-align: right; } .sp-rad b.venter { font-weight: 400; color: var(--muted); } .sp-maaler { height: 8px; border-radius: 100px; background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; margin: 14px 0; } .sp-maaler > span { display: block; height: 100%; background: linear-gradient(90deg, #1b7f5c, #e0a63a); transition: width .4s; } .sp-hinder { padding: 13px 14px; border-radius: 14px; background: #fdeaee; border: 1px solid #f3c4cd; margin-bottom: 16px; } .sp-hinder.tom { opacity: .45; } .sp-h-tittel { font: 700 .76rem var(--body-font); color: var(--varsel-tekst, #B03A24); margin-bottom: 5px; display: flex; gap: 7px; } .sp-hinder p { margin: 0; font: 400 .8rem/1.5 var(--body-font); color: var(--muted2, #4A5567); } .sp-tl-tittel { font: 700 .78rem var(--body-font); color: var(--ink); margin-bottom: 8px; } .sp-cta { width: 100%; margin-top: 6px; } /* ── Samtalen: hele meldingslista skal være lesbar ──────────────────────── 🔴 Målt 17.08.2026: `#messages` startet på y=-620. Lista vokser oppover (`margin-top:auto` — nyeste nederst, som i en chat), men i rutenettet fikk den ingen høydebegrensning. Da havnet begynnelsen av samtalen over skjermkanten, utenfor rekkevidde. Kunden kunne ikke lese hva hun selv hadde spurt om. Løsningen: lista får en høyde og ruller INNI seg selv, som en chat skal. */ @media (min-width: 1024px) { body.samtale .visa-hero #messages { /* Makshøyden er borte: rutenettet gir lista plassen sin nå (se rad-1- regelen lenger nede). Beholder rullingen — den var det som løste at samtalen begynte på y=-620 og ikke kunne leses. */ min-height: 180px; overflow-y: auto; margin-top: 0; padding-right: 6px; scrollbar-width: thin; } /* «Har du en sak fra før?» hører til forsiden i ro. Under en samtale er kunden alt i gang — da er stripa støy, som prisene og tillitsdelen. */ body.samtale .kom-tilbake { display: none !important; } } /* Lag 1 fra speccen: fjord-gradienten som reserve UNDER fotoet. Body-bakgrunnen males først, deretter fotoet i ::before oppå. Laster ikke bildet, ser siden fortsatt ut som norsk natur — ikke en grå flate. */ body.immersive { background-image: linear-gradient(180deg,#cfe0e6 0%,#9db9c4 34%,#5f8794 55%,#2f5766 74%,#173947 100%); background-size: cover; background-attachment: fixed; } @media (min-width: 1024px) { /* Hurtigspørsmålene og tillitsraden lå igjen UNDER heroen og fløt på fotoet. Designet har dem ikke der: spørsmålene bor i startboksen, og merkene er alt flyttet opp i heroen — tillitsraden gjentok dem. */ body.paa-forsiden:not(.samtale) #screen-start > #hero-chips, body.paa-forsiden:not(.samtale) #screen-start > .trust-row { display: none; } } /* Lag 3 fra speccen: det diagonale sløret — mørkest der teksten står. `.visa-hero::after` ble satt til display:none i den immersive omskrivingen 13.08, og da forsvant sløret helt. Uten det ligger den hvite tittelen på lys himmel. Verdiene er speccens, ikke gjettet. */ @media (min-width: 1024px) { body.paa-forsiden:not(.samtale) .visa-hero::after { content: ''; display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(118deg, rgba(9,20,38,.86) 0%, rgba(11,22,38,.62) 44%, rgba(11,22,38,.24) 100%); } /* Innholdet må ligge OVER sløret. */ .visa-hero > *:not(.visa-hero-img) { position: relative; z-index: 2; } .visa-hero .hero-box, .visa-hero .hero-demo, .visa-hero #messages { z-index: 3; } } /* Sløret skal gå helt opp bak den faste toppbaren, som i designet. Uten dette sto en blek stripe øverst der sløret ikke nådde. Jeg flyttet først heroen med negativ margin, men den faktiske toppavstanden er 117px og ikke 124.8 som variabelen sier — da bommet den. Å strekke SLØRET oppover er både enklere og trygt: innholdet står stille. */ @media (min-width: 1024px) { body.paa-forsiden:not(.samtale) .visa-hero::after { top: -160px; } } /* ── Heroens rutenett: EKSAKT som designfila ───────────────────────────── Målt mot «Alfredium Visa (nettside).html» 17.08.2026: design h1 x=120 bredde=585 · boks x=757 bredde=563 mitt h1 x=44 bredde=368 · boks x=843 bredde=470 Speccen sier innhold max-width 1200, kolonner 1.02fr/.98fr, gap 52 — altså 585 + 52 + 563 = 1200, sentrert i 1440 gir 120px på hver side. Mine kolonner var `1.02fr .98fr` av HELE bredden minus 44px padding, ikke av 1200. Derfor ble teksten smalere og lenger til venstre. */ @media (min-width: 1024px) { body.paa-forsiden:not(.samtale) .visa-hero { justify-content: center; grid-template-columns: minmax(0, 585px) minmax(0, 563px); column-gap: 52px; padding-left: 44px; padding-right: 44px; } /* Tekstkolonnen skal fylle sin rute — ikke begrenses en gang til. */ body.paa-forsiden:not(.samtale) .visa-hero-inner { max-width: none; } body.paa-forsiden:not(.samtale) .visa-hero .hero-box, body.paa-forsiden:not(.samtale) .visa-hero .hero-demo { max-width: none; } } /* Forsiden: toppbaren ligger OVER fotoet (transparent), så innholdet trenger ikke plass reservert til den. `main.app` sin toppavstand på 117px dyttet heroen 134px lenger ned enn designfila. På app-skjermene beholdes den — der er baren hvit og tar faktisk plass. */ @media (min-width: 1024px) { body.paa-forsiden:not(.samtale) main.app { padding-top: 0; } /* Tittelen skal fylle kolonnen sin, som i designet (585px, ikke 368). */ body.paa-forsiden:not(.samtale) .visa-hero-inner { align-items: stretch; } body.paa-forsiden:not(.samtale) .visa-hero-inner h1, body.paa-forsiden:not(.samtale) .hero-ingress { width: 100%; } body.paa-forsiden:not(.samtale) .hero-topp, body.paa-forsiden:not(.samtale) .hero-merker { justify-content: flex-start; } } /* ── Samtalen fyller skjermen, og BARE meldingene ruller ────────────────── Målt 17.08: siden hadde 76 px egen rulling PLUSS at meldingslista rullet inni seg selv. To rullefelt oppå hverandre gjør at kunden drar i det ene og det andre flytter seg. Her får ytterkolonnen skjermens høyde, så er det bare ett sted som ruller. */ @media (min-width: 1024px) { body.samtale main.app { height: 100dvh; box-sizing: border-box; overflow: hidden; } body.samtale #screen-start { display: flex; flex-direction: column; /* 🔴 `flex: 1 1 auto` gjorde INGENTING her: #screen-start er barn av et RUTENETT (main.app), og flex-egenskaper gjelder bare i en flex- beholder. Ingenting begrenset høyden, så den ble 1019 px i et rom på 783 — og fordi feltet arver `align-items: center`, fløt overflyten oppover: meldingene havnet på y=-80 og panelet på y=-13. `height: 100%` er det som faktisk binder den til rutenettcellen. */ height: 100%; min-height: 0; overflow: hidden; justify-content: flex-start; align-items: stretch; } } /* Setningen under adressen i bunnen — den som sier hva stedet ER, til en som har rullet helt ned og fortsatt lurer. Sto i designet, falt ut i ombyggingen. */ .familie-foot .ff-lead { margin: 10px 0 0; max-width: 34ch; font: 400 .86rem/1.6 var(--body-font); color: rgba(255,255,255,.72); }