/* ========================================================================== Nordmanns-Reiser – ny bestillingsflyt (demo) Designtokens hentet fra nordmannsreiser.no: navy #00253f · teal #15779b · turkis #28b5a4 · Poppins + DM Serif Display ========================================================================== */ /* -------------------------------------------------------------------------- STRUKTURELLE tokens (delt på tvers av ALLE merkevarer). Geometri og semantikk som ikke er knyttet til merkevarens palett. -------------------------------------------------------------------------- */ :root { --radius: 14px; --radius-sm: 9px; --maxw: 1140px; --danger: #c0392b; } /* -------------------------------------------------------------------------- MERKEVARE-tokens. Hver merkevare har sin egen blokk, scopet til `.brand-`. JS legger `nr-redesign brand-osl` på KUN for merkevarer som har meldt seg på redesignet (se booking.js → REDESIGNED). Custom properties arver til alle etterkommere av , så hele flyten plukker opp riktig palett uten at noen selektor må gjentas per merkevare. Discover Norway (DN) og andre uregistrerte merkevarer får ALDRI brand-klassen → disse reglene matcher aldri → de rendres nøyaktig som i dag. -------------------------------------------------------------------------- */ .brand-osl { --navy: #00253f; --navy-700: #033352; --teal: #15779b; --teal-600: #11607d; --turq: #28b5a4; --turq-700: #1f9587; --ink: #1d2733; --muted: #5d6b78; --line: #e4e8ec; --bg: #f4f6f8; --card: #ffffff; --gold: #c8a45c; --ok: #1f9587; --shadow: 0 10px 30px rgba(0, 37, 63, .08); --shadow-lg: 0 18px 50px rgba(0, 37, 63, .14); --serif: "DM Serif Display", Georgia, serif; --sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* -------------------------------------------------------------------------- MAXPULSE (MAXP) — sporty, teknisk, elektrisk. Kilde: apps/maxpulse-no/src/app/globals.css (vår egen kode). Ingen serif og ingen gull: display-fonten er en stram grotesk, og aksenten er elektrisk cyan mot nesten-svart. -------------------------------------------------------------------------- */ .brand-maxp { --navy: #0e1721; /* mp-ink — «max»-svart fra logoen */ --navy-700: #003a4f; --teal: #006c8e; /* mp-blue-700. IKKE logo-cyan #00b5e8: den gir 2,39:1 mot hvit tekst. Denne gir 5,94:1 og består AA. */ --teal-600: #005472; --turq: #00b5e8; /* logo-cyan — brukes kun som aksent, aldri bak hvit tekst */ --ink: #0e1721; --muted: #6b7785; --line: #d2dce3; --bg: #f4f7fa; /* kald blågrå, ikke varm */ --card: #ffffff; --gold: #b30010; /* Maxpulse har ingen gull — merket bruker rødt som signal */ --ok: #3f6b3b; --shadow: 0 10px 30px rgba(14, 23, 33, .07); --shadow-lg: 0 18px 50px rgba(14, 23, 33, .12); --radius: 16px; /* kort — romsligere enn Nordmannsreisers 14px */ --radius-sm: 8px; /* felt */ --serif: "Inter Tight", system-ui, sans-serif; /* bevisst ikke en serif */ --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } /* Maxpulse er rektangulær, ikke pilleformet. */ .brand-maxp .btn { border-radius: 6px; } .brand-maxp .opt__badge { border-radius: 4px; } .brand-maxp .confirm__num { border-radius: 6px; } .brand-maxp .pax-block__tag, .brand-maxp .flight-leg__tag { border-radius: 4px; } /* Logo-cyan #00b5e8 med hvit tekst gir 2,39:1 — under AA. --teal (#006c8e) gir 5,94:1 og er den eneste cyanen som holder. Samme felle som TRF/DN. */ .brand-maxp .btn--primary { background: var(--teal); color: #fff; box-shadow: 0 6px 18px rgba(0, 108, 142, .28); } .brand-maxp .btn--primary:hover { background: var(--teal-600); color: #fff; } .brand-maxp .btn--ghost { color: var(--teal); } /* -------------------------------------------------------------------------- TEMAREISER FREDRIKSTAD (TRF) — kjølig, kantet, typografisk streng. Kilde: temareiserfredrikstad.no/css/site.min.css. NB: TRF og Discover Norway deler i dag samme mal (93,4 % identisk CSS). Serifen under er forslaget som skiller dem — TRF lisensierer allerede adobe-caslon-pro uten å bruke den, og den matcher kulturformidler-profilen. -------------------------------------------------------------------------- */ .brand-trf { --navy: #002337; --navy-700: #001b2a; --teal: #002337; /* knapp = navy. Merkets lyseblå #81b7e6 gir 2,1:1 mot hvit. */ --teal-600: #b30010; /* hover bytter til merkerødt — TRFs signaturbevegelse */ --turq: #81b7e6; /* merkets lyseblå, brukt som flate og aksent */ --ink: #002337; --muted: #5f6f7a; --line: #e0e0e0; --bg: #f7f9fb; --card: #ffffff; --gold: #b30010; --ok: #008000; --shadow: 0 8px 22px rgba(0, 35, 55, .06); --shadow-lg: 0 16px 40px rgba(0, 35, 55, .10); --serif: "adobe-caslon-pro", Georgia, "Times New Roman", serif; --sans: "Montserrat", system-ui, -apple-system, sans-serif; } /* Null radius er et bevisst valg hos TRF, ikke Bootstrap-arv. */ .brand-trf .panel, .brand-trf .opt, .brand-trf .addon, .brand-trf .summary__card, .brand-trf .pax-block, .brand-trf .flight-leg, .brand-trf .pkg-card, .brand-trf .field input, .brand-trf .textarea, .brand-trf .accept { border-radius: 0; } .brand-trf .btn { border-radius: 0; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; } /* Merkets lyseblå #81b7e6 med hvit tekst gir 2,13:1 — under AA-kravet på 4,5:1. Det er feilen som ligger i deres egen .btn i dag. Navy med hvit tekst gir 16,2:1. */ .brand-trf .btn--primary { background: var(--navy); color: #fff; box-shadow: none; } .brand-trf .btn--primary:hover { background: var(--teal-600); color: #fff; } .brand-trf .btn--ghost { color: var(--navy); } .brand-trf .opt__badge { border-radius: 0; } /* -------------------------------------------------------------------------- DISCOVER NORWAY (DN) — hardt, flatt, nøkternt. Engelskspråklig. Kilde: discover-norway.no/css/site.min.css. Solgt ut av konsernet, men flyten skal fortsatt oppgraderes. -------------------------------------------------------------------------- */ .brand-dn { --navy: #002337; --navy-700: #001b2a; --teal: #002337; --teal-600: #b30010; --turq: #81b7e6; --ink: #002337; --muted: #6b7c86; --line: #e0e0e0; --bg: #ffffff; /* DN har ingen off-white sideflate */ --card: #ffffff; --gold: #b30010; --ok: #28a745; --shadow: 0 6px 18px rgba(0, 35, 55, .05); --shadow-lg: 0 14px 34px rgba(0, 35, 55, .09); --serif: "Montserrat", system-ui, sans-serif; /* DN bruker versal-sans, ikke serif */ --sans: "Montserrat", system-ui, -apple-system, sans-serif; } .brand-dn .panel, .brand-dn .opt, .brand-dn .addon, .brand-dn .summary__card, .brand-dn .pax-block, .brand-dn .flight-leg, .brand-dn .pkg-card, .brand-dn .field input, .brand-dn .textarea, .brand-dn .accept { border-radius: 0; } .brand-dn .btn { border-radius: 0; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; } /* Samme kontrastfelle som TRF — se der. */ .brand-dn .btn--primary { background: var(--navy); color: #fff; box-shadow: none; } .brand-dn .btn--primary:hover { background: var(--teal-600); color: #fff; } .brand-dn .btn--ghost { color: var(--navy); } .brand-dn .opt__badge { border-radius: 0; } .brand-dn .panel > h2, .brand-dn .tour-hero h1 { text-transform: uppercase; letter-spacing: .02em; font-weight: 600; } .brand-dn .tour-hero h1 { font-size: 30px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.15; letter-spacing: .2px; } a { color: var(--teal); text-decoration: none; } a:hover { text-decoration: underline; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } /* ---------- Demo-stripe ---------- Ligger øverst på hver side. Demoen er delt på en offentlig lenke, og bekreftelsessteget sier «Takk for din bestilling!» med et bestillingsnummer. Uten denne stripa kunne en ekte kunde tro de hadde bestilt. Den skal bli stående så lenge sidene ligger ute. */ .demobar { background: #1d2733; color: #fff; font-size: 13.5px; line-height: 1.45; padding: 9px 0; text-align: center; } .demobar b { color: #ffd66b; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; } .demobar span { color: #c9d4dd; } @media (max-width: 640px) { .demobar { font-size: 12.5px; padding: 8px 0; } } /* ---------- Header ---------- */ .site-header { background: #fff; color: var(--navy); border-bottom: 1px solid var(--line); } .site-header__inner { display: flex; align-items: center; gap: 24px; min-height: 76px; } .site-header__logo img { height: 40px; display: block; } .site-header__nav { display: flex; gap: 26px; margin-left: auto; } .site-header__nav a { color: var(--navy); font-size: 15px; font-weight: 500; } .site-header__nav a:hover { color: var(--teal); text-decoration: none; } .site-header__phone { display: flex; align-items: center; gap: 10px; color: var(--navy); font-weight: 700; font-size: 17px; white-space: nowrap; } .site-header__phone:hover { text-decoration: none; color: var(--teal); } .site-header__phone-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--turq); color: var(--navy); font-size: 16px; } .site-header__phone-label { display: block; font-size: 11px; font-weight: 400; color: var(--muted); line-height: 1; } /* ---------- Trust bar ---------- */ .trustbar { background: var(--navy); color: #cdd9e3; font-size: 13px; } .trustbar__inner { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 9px 22px; justify-content: center; } /* ---------- Booking layout ---------- */ .booking { padding: 30px 0 70px; } .loading { padding: 80px 0; text-align: center; color: var(--muted); } .tour-hero { background: linear-gradient(120deg, var(--navy) 0%, var(--teal-600) 100%); color: #fff; border-radius: var(--radius); padding: 34px 38px; box-shadow: var(--shadow); position: relative; overflow: hidden; margin-bottom: 26px; } .tour-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(40,181,164,.35), transparent 70%); pointer-events: none; } /* hero med ekte turbilde – mørk gradient-overlay holder teksten lesbar */ .tour-hero--img { background-size: cover; background-position: center; padding: 0; min-height: 320px; display: flex; align-items: flex-end; } .tour-hero--img::after { display: none; } .tour-hero--img .tour-hero__inner { width: 100%; padding: 38px 38px 32px; background: linear-gradient(0deg, rgba(0,20,34,.92) 0%, rgba(0,20,34,.62) 55%, rgba(0,20,34,0) 100%); } .tour-hero__eyebrow { text-transform: uppercase; letter-spacing: 2.5px; font-size: 12px; color: var(--turq); font-weight: 600; } .tour-hero h1 { font-size: 38px; margin: 8px 0 6px; max-width: 760px; } .tour-hero__sub { color: #d6e2ec; font-size: 17px; max-width: 680px; margin: 0 0 16px; } .tour-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 15px; } .tour-hero__meta b { color: #fff; } .tour-hero__meta span { color: #c6d6e2; display: inline-flex; align-items: center; gap: 8px; } /* ---------- Stepper ---------- */ .stepper { display: flex; gap: 10px; margin: 0 0 26px; counter-reset: step; } .stepper__item { flex: 1; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--card); border-radius: var(--radius-sm); border: 1px solid var(--line); font-size: 14px; color: var(--muted); } .stepper__num { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: #eef1f4; color: var(--muted); font-weight: 700; font-family: var(--sans); font-size: 14px; } .stepper__item.is-active { border-color: var(--teal); box-shadow: 0 4px 14px rgba(21,119,155,.15); } .stepper__item.is-active .stepper__num { background: var(--teal); color: #fff; } .stepper__item.is-active .stepper__label { color: var(--ink); font-weight: 600; } .stepper__item.is-done .stepper__num { background: var(--turq); color: #fff; } .stepper__item.is-done .stepper__num::after { content: "✓"; } .stepper__item.is-done .stepper__num span { display: none; } .stepper__item.is-clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; } .stepper__item.is-clickable:hover { border-color: var(--turq); background: #f3fbf9; box-shadow: 0 4px 14px rgba(40,181,164,.18); } .stepper__item.is-clickable:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .stepper__item.is-clickable .stepper__label::after { content: " ↩"; color: var(--turq-700); font-family: var(--sans); } /* ---------- Two-column grid ---------- */ .layout { display: grid; grid-template-columns: 1fr 360px; gap: 26px; align-items: start; } .panel { background: var(--card); border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 26px 28px; margin-bottom: 22px; } .panel > h2 { font-size: 24px; margin: 0 0 4px; color: var(--navy); } .panel__help { color: var(--muted); font-size: 14px; margin: 0 0 18px; } .panel__label { font-weight: 600; font-family: var(--sans); font-size: 15px; color: var(--navy); margin: 0 0 12px; } /* ---------- Selectable cards (cabins / flights) ---------- */ .options { display: grid; gap: 12px; } .opt { display: grid; grid-template-columns: 26px 1fr auto; gap: 16px; align-items: start; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; position: relative; } .opt:hover { border-color: #b9c6d1; } .opt.is-selected { border-color: var(--teal); background: #f4fafc; box-shadow: 0 4px 16px rgba(21,119,155,.12); } .opt__radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c2ccd5; margin-top: 2px; display: grid; place-items: center; transition: border-color .15s; } .opt.is-selected .opt__radio { border-color: var(--teal); } .opt.is-selected .opt__radio::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--teal); } .opt__title { font-weight: 600; font-size: 16px; color: var(--ink); display: block; } .opt__desc { color: var(--muted); font-size: 13.5px; margin-top: 3px; display: block; } .opt__meta { color: var(--muted); font-size: 12.5px; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 14px; } .opt__price { text-align: right; white-space: nowrap; } .opt__price b { font-size: 19px; color: var(--navy); display: block; } .opt__price small { color: var(--muted); font-size: 12px; } .opt__badge { position: absolute; top: -10px; left: 16px; background: var(--gold); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .4px; padding: 3px 10px; border-radius: 20px; font-family: var(--sans); } .opt__badge--teal { background: var(--turq); } /* checkbox style add-ons */ .opt--check .opt__radio { border-radius: 6px; } .opt--check.is-selected .opt__radio::after { width: 12px; height: 7px; border: 0; background: transparent; border-left: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal); transform: rotate(-45deg) translateY(-2px); border-radius: 0; } /* ---------- Travellers counter ---------- */ .counter-row { display: flex; flex-wrap: wrap; gap: 18px; } .counter { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; background: #fbfcfd; } .counter__label b { display: block; font-size: 15px; color: var(--navy); font-family: var(--sans); font-weight: 600; } .counter__label small { color: var(--muted); font-size: 12.5px; } .counter__ctrl { display: flex; align-items: center; gap: 12px; margin-left: auto; } .counter__btn { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--teal); background: #fff; color: var(--teal); font-size: 20px; font-weight: 600; cursor: pointer; line-height: 1; display: grid; place-items: center; transition: background .15s, color .15s; } .counter__btn:hover:not(:disabled) { background: var(--teal); color: #fff; } .counter__btn:disabled { opacity: .35; cursor: not-allowed; } .counter__val { min-width: 22px; text-align: center; font-weight: 700; font-size: 17px; } /* ---------- Forms ---------- */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; } .field { display: flex; flex-direction: column; gap: 6px; } .field--full { grid-column: 1 / -1; } .field label { font-size: 13.5px; font-weight: 600; color: var(--navy); } .field label .req { color: var(--danger); } .field input, .field select { font-family: var(--sans); font-size: 15px; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); transition: border-color .15s; } .field input:focus, .field select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(21,119,155,.12); } .field input.is-invalid { border-color: var(--danger); } .field__error { color: var(--danger); font-size: 12.5px; min-height: 1px; } .textarea { width: 100%; font-family: var(--sans); font-size: 15px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); resize: vertical; min-height: 96px; transition: border-color .15s; box-sizing: border-box; } .textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(21,119,155,.12); } .panel__optional { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--muted); } .review-comment { margin: 4px 0 0; padding: 12px 14px; background: var(--bg-soft, #f5f8fa); border-radius: var(--radius-sm); font-size: 14px; color: var(--ink); white-space: pre-wrap; } .pax-block { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px 22px; margin-bottom: 16px; } .pax-block__head { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; } .pax-block__head h3 { font-size: 18px; margin: 0; color: var(--navy); } .pax-block__tag { font-size: 12px; font-weight: 600; font-family: var(--sans); color: var(--teal); background: #eaf4f8; padding: 3px 10px; border-radius: 20px; } .copy-link { margin-left: auto; font-size: 13px; font-family: var(--sans); cursor: pointer; } .accept { display: flex; gap: 12px; align-items: flex-start; background: #f7f9fb; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; margin-top: 6px; } .accept input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--teal); } .accept label { font-size: 14px; color: var(--ink); } .accept--newsletter { margin-top: 10px; background: #f4fafc; border-color: #d5e8ef; } /* ---------- Gift card ---------- */ .giftcard { display: flex; align-items: center; gap: 14px; background: linear-gradient(120deg,#fcf7ef,#fdfaf3); border: 1px dashed var(--gold); border-radius: var(--radius-sm); padding: 16px 18px; } .giftcard__icon { font-size: 26px; } .giftcard input { width: 130px; } /* ---------- Summary sidebar ---------- */ .summary { position: sticky; top: 18px; } .summary__card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; } .summary__head { background: var(--navy); color: #fff; padding: 18px 22px; } .summary__head h3 { color: #fff; font-size: 20px; margin: 0; } .summary__head p { margin: 4px 0 0; font-size: 13px; color: #bcd0de; } .summary__body { padding: 18px 22px; } .sline { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 7px 0; border-bottom: 1px dashed var(--line); } .sline:last-of-type { border-bottom: 0; } .sline span:first-child { color: var(--muted); } .sline b { font-weight: 600; white-space: nowrap; } .sline--muted span, .sline--muted b { color: var(--muted); font-weight: 400; } .summary__total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 22px; background: #f4fafc; border-top: 1px solid var(--line); } .summary__total span { font-weight: 600; color: var(--navy); } .summary__total b { font-family: var(--serif); font-size: 30px; color: var(--navy); } .summary__total small { display:block; font-family: var(--sans); font-size: 11px; color: var(--muted); text-align: right; font-weight: 400;} .summary__note { padding: 14px 22px; font-size: 12.5px; color: var(--muted); background: #fbfcfd; border-top: 1px solid var(--line); } .summary__deposit { color: var(--teal-600); font-weight: 600; } /* ---------- Buttons / nav ---------- */ .btn { font-family: var(--sans); font-weight: 600; font-size: 16px; border: 0; border-radius: 30px; padding: 14px 30px; cursor: pointer; transition: transform .1s, box-shadow .15s, background .15s; display: inline-flex; align-items: center; gap: 10px; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--turq); color: var(--navy); box-shadow: 0 6px 18px rgba(40,181,164,.35); } .btn--primary:hover { background: var(--turq-700); color: #fff; } .btn--ghost { background: transparent; color: var(--teal); padding-left: 8px; } .btn--ghost:hover { text-decoration: underline; } .btn--block { width: 100%; justify-content: center; } .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; } .formnav { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 14px; } .alert { background: #fdecea; color: var(--danger); border: 1px solid #f5c6c0; border-radius: var(--radius-sm); padding: 12px 16px; font-size: 14px; margin-bottom: 16px; } .allotment { font-size: 13px; color: var(--teal-600); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; } .allotment__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--turq); box-shadow: 0 0 0 4px rgba(40,181,164,.2); } .allotment--sold { color: var(--danger); } .allotment--sold .allotment__dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(192,57,43,.15); } /* ---------- Sold-out cards ---------- */ .opt.is-disabled { cursor: not-allowed; opacity: .62; background: #fafbfc; } .opt.is-disabled:hover { border-color: var(--line); } .opt.is-disabled .opt__radio { border-style: dashed; } /* ---------- Included panel ---------- */ .panel--included { background: #f7fbfc; border-color: #d7e8ee; } .incl-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; } .incl-list li { position: relative; padding-left: 26px; font-size: 14px; color: var(--ink); } .incl-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--turq-700); font-weight: 700; } .incl-notes { margin-top: 20px; padding-top: 16px; border-top: 1px solid #d7e8ee; } .incl-notes b { font-family: var(--sans); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--teal); } .incl-notes ul { margin: 8px 0 0; padding-left: 18px; } .incl-notes li { font-size: 13px; color: var(--muted); margin-bottom: 4px; } /* ---------- Fly ---------- */ .flights { display: grid; gap: 10px; } .flight-leg { display: grid; grid-template-columns: 150px 1fr auto; gap: 18px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 18px; background: #fbfcfd; } .flight-leg__carrier { display: flex; align-items: center; gap: 8px; } .flight-leg__carrier b { font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--navy); } .flight-leg__carrier small { color: var(--muted); font-size: 12px; } .flight-leg__air { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: #eaf4f8; color: var(--teal-600); font-size: 14px; } .flight-leg__route { display: flex; align-items: center; gap: 16px; } .flight-leg__pt { display: flex; flex-direction: column; line-height: 1.35; } .flight-leg__pt b { font-size: 14.5px; color: var(--ink); } .flight-leg__pt--to { text-align: right; } .flight-leg__code { font-size: 11px; letter-spacing: 1px; color: var(--teal-600); font-weight: 600; } .flight-leg__pt span:last-child { font-size: 12.5px; color: var(--muted); } .flight-leg__arrow { color: #b9c6d1; font-size: 18px; } .flight-leg__tag { font-size: 11px; font-weight: 600; font-family: var(--sans); color: var(--turq-700); background: #e7f7f3; padding: 4px 11px; border-radius: 20px; white-space: nowrap; } /* ---------- Inkludert i pakken (kort) ---------- */ .pkg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .pkg-card { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 15px 16px; background: #fff; } .pkg-card__icon { font-size: 22px; line-height: 1.2; flex: 0 0 auto; } .pkg-card__flag { display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); } .pkg-card__body { display: flex; flex-direction: column; gap: 3px; } .pkg-card__body b { font-family: var(--sans); font-weight: 600; font-size: 14.5px; color: var(--navy); } .pkg-card__place { font-size: 12px; font-weight: 600; color: var(--teal-600); text-transform: uppercase; letter-spacing: .6px; } .pkg-card__note { font-size: 13px; color: var(--muted); } /* ---------- Sidebar CTA + nav-justering ---------- */ .summary__cta { padding: 16px 22px 20px; border-top: 1px solid var(--line); background: #fff; } .formnav--end { justify-content: flex-end; margin-bottom: 22px; } /* ---------- Lag 1: fallback ved nedetid ---------- */ .outage { max-width: 640px; margin: 0 auto; text-align: center; } .outage__icon { font-size: 42px; line-height: 1; } .outage h2 { margin: 10px 0 6px; } .outage > p { color: var(--muted); margin: 0 auto; max-width: 52ch; } .outage__contact { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 22px 0 6px; } .outage__form { text-align: left; margin-top: 24px; border-top: 1px solid var(--line); padding-top: 24px; } .outage__form .formnav--end { margin-bottom: 0; margin-top: 16px; } /* ---------- Tilvalg + forsikring (flervalg/avkrysning) ---------- */ .addons { display: grid; gap: 12px; } .addon { display: flex; align-items: center; gap: 14px; cursor: pointer; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; background: #fff; transition: border-color .15s, box-shadow .15s; } .addon:hover { border-color: #b9c6d1; } .addon.is-selected { border-color: var(--teal); background: #f4fafc; box-shadow: 0 4px 16px rgba(21,119,155,.12); } .addon__check { flex: 0 0 auto; width: 22px; height: 22px; border: 2px solid #b9c6d1; border-radius: 6px; display: flex; align-items: center; justify-content: center; } .addon.is-selected .addon__check { border-color: var(--teal); background: var(--teal); } .addon.is-selected .addon__check::after { content: ""; width: 11px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translateY(-1px); } .addon__body { flex: 1; display: flex; flex-direction: column; gap: 3px; } .addon__body b { font-weight: 600; font-size: 15.5px; color: var(--ink); } .addon__desc { color: var(--muted); font-size: 13.5px; } .addon__price { text-align: right; white-space: nowrap; } .addon__price b { font-size: 17px; color: var(--navy); display: block; } .addon__price small { color: var(--muted); font-size: 12px; } /* ---------- Hvem tilvalget gjelder for ---------- Vises KUN for tilvalg Travelwire priser per person (maxpax >= 1). For fastpris-tilvalg tar motoren én enhet uansett hvor mange som er huket av, så et personvalg der ville lovet en priseffekt som ikke finnes. Brikkene ligger utenfor