/* ═══════════════════════════════════════════════════════════════ * MOLSLINJEN CVI — BEREGNER * * CVI-laget på beregner-sektionen: kort, input, resultat-kort og * "Book billet". Markup'en er Webflow-arvet og ENS på alle 13 sider * — samme klasser, samme w-node-*-id'er — så disse regler flytter * den samme komponent overalt hvor filen linkes ind. * * Mønstret er hentet fra den-smarte-vej-paa-ferie, som allerede kører * CVI'en. Den side har ændringerne inde i sin egen main.css; her ligger * de ét sted i stedet, så resten af siderne kan arve dem. * * Den største visuelle ændring: CTA'en var mintgrøn (#2bf6a5). Den er * ikke i CVI-paletten — den er nu --color-cta (Pantone 298). * * Kræver tokens.css. Skal linkes EFTER main.css og style.css. * ═══════════════════════════════════════════════════════════════ */ /* ── Sektionsbund ─────────────────────────────────────────────── Var #001f47 (main.css) og #132352 på (style.css). Begge er nabofarver til Dyb Havblå, ingen af dem er den. */ body { background-color: var(--color-dyb-havblaa); } .calculator-section, .navigation { background-color: var(--color-dyb-havblaa); } /* ── Overskrifter over beregneren ───────────────────────────────── */ .centered-heading, .centered-subheading { color: var(--color-dyb-havblaa); } /* ── CTA-knapper ──────────────────────────────────────────────── Mintgrøn → CTA-blå, mørk tekst → hvid. */ .cta { color: var(--color-havskum); background-color: var(--color-cta); font-size: 1rem; font-weight: 600; } .booking-cta { max-width: 200px; color: var(--color-havskum); background-color: var(--color-cta); padding: .9rem 1.8rem; font-size: 1rem; font-weight: 600; transition: background-color .2s var(--ease); } /* !important er nødvendigt her, ikke kosmetik: legacy main.css sætter selv hover med !important (#24d68f mintgrøn på de fleste sider, #8b0f1a rød på /jul/). Uden det vinder legacy, og knappen blinker tilbage til den gamle farve i det øjeblik man rører den. */ .cta:hover, .booking-cta:hover { background-color: var(--color-cta-hover) !important; } /* Pilen i "Book billet" er en mørk SVG. Knappen er nu blå med hvid tekst, så pilen inverteres i stedet for at skulle leveres i to farver. */ .booking-cta img { filter: brightness(0) invert(1); } /* Undtagelse: den afsluttende "Book billet" nederst i beregneren skal være mere prominent end sidens øvrige CTA'er. */ .calculator-section .booking-cta { padding: 1.3rem 2rem; } .calculator-section .booking-cta, .calculator-section .booking-cta-text { font-size: 20px; } /* ── Resultat-kort ────────────────────────────────────────────── Var en 84°-gradient #001f47 → #0031aa. CVI'en har ingen gradienter; det er en flad Havblå-flade nu. */ .succes-message { min-height: 140px; background: var(--color-havblaa); background-image: none; color: var(--color-havskum); padding: 1.4rem 1.2rem; margin: 1.5rem 0; border-radius: 6px; height: auto; } .molslinjen-banner { background-image: none; background-color: var(--color-havblaa); } /* ── Dropdowns ──────────────────────────────────────────────────── */ .dropdown-content a, .mobile-dropdown-content a { color: var(--color-dyb-havblaa); } .mobile-dropdown-content { background-color: var(--color-sand); } /* ── Kort ─────────────────────────────────────────────────────── Højden er sat i main.css pr. side og varierer lidt; her sikres kun at wrapper og canvas følges ad, så kortet ikke ender 0px højt bag en skjult container. Selve kort-STYLINGEN (land, vand, markører, labels) sidder i JS/cvi-map.js — Google Maps kan ikke styles i CSS. */ .map, .google-map { width: 100%; min-height: 550px; } /* Google Maps by-labels — Korolev + let halo så teksten kan læses mod både land og vand. Positionen sættes via labelOrigin i cvi-map.js. !important fordi Google skriver inline-styles på label-elementet. */ .map-city-label { font-family: korolev, "Helvetica Neue", sans-serif !important; font-feature-settings: "kern" 1; text-shadow: 0 1px 2px rgba(0, 37, 71, 0.5); white-space: nowrap; letter-spacing: 0.01em; } /* ═══════════════════════════════════════════════════════════════ * FORMULARLAGET * * Beregnerens sektion og knapper kom med i første omgang, men det * brugeren faktisk taster i gjorde ikke: input-felter, dropdown og * "Om besparelsen"-modalen sad tilbage i de gamle farver. * * Tre nabofarver var i omløb hvor der skulle stå Dyb Havblå: * #001F47 input-tekst, kantlinjer, term-link * #001F46 modal og luk-knapper * #132352 dropdown * Ingen af dem er #002547. Forskellen er lille på skærmen, men det er * tre forskellige farver til én rolle. * ═══════════════════════════════════════════════════════════════ */ /* Input-felter. !important matcher legacy, som selv bruger det. */ .w-input, .from-input, .to-input { color: var(--color-dyb-havblaa) !important; } .from-input, .to-input { border-right-color: var(--color-dyb-havblaa); } /* Dropdown og links i beregneren */ .dropdown, .term-link { color: var(--color-dyb-havblaa); } /* "Om besparelsen"-modalen og dens luk-knapper */ .modal-content, .close, .closePopup { color: var(--color-dyb-havblaa); } /* Info-ikonet ved biltypevælgeren. Var #24d68f — den mintgrønne, der er væk alle andre steder. Nu CTA-blå som sidens øvrige handlinger. */ #openPopupBtn { color: var(--color-cta); } /* Faneblade og segment-knapper i beregneren */ .tabbutton { border-color: var(--color-dyb-havblaa); } .buttons button:hover, .buttons button.active { background-color: var(--color-dyb-havblaa); } /* Safari/Chrome autofill overskriver color med sin egen; kun -webkit-text-fill-color slår igennem. */ .w-input:-webkit-autofill, .w-input:-webkit-autofill:focus, .from-input:-webkit-autofill, .from-input:-webkit-autofill:focus, .to-input:-webkit-autofill, .to-input:-webkit-autofill:focus { -webkit-text-fill-color: var(--color-dyb-havblaa) !important; } /* ═══════════════════════════════════════════════════════════════ * RUTE-VÆLGEREN I TOPPEN * * .nav-buttons er position:absolute med top:0.5rem, pinnet i toppen af * .content-wrap. Det er med vilje: containeren er en flex-kolonne med * justify-content:center, så nav'en står øverst mens resten af indholdet * centreres lodret. Gør man nav'en static, ryger den ind i centreringen * og lander midt i stakken — den skal blive absolut. * * Problemet var at absolut placering ikke reserverer plads: det centrerede * indhold kunne vokse op under pillerne og lægge sig bag dem. Det gik kun * fri før, fordi nav'ens højde lige akkurat passede — indtil body skiftede * fra Arial til Korolev, og pillerne (.logo-wrapper arver body-skriften) * blev et par pixels højere. * * padding-top på containeren løser det: centreringen sker nu inden for en * boks der starter under nav'en, så indholdet kan ikke nå op bag den. * Værdien dækker nav'en også når pillerne ombrydes til to linjer på * smalle skærme — derfor så rundhåndet. * ═══════════════════════════════════════════════════════════════ */ .content-wrap { padding-top: 8rem; } @media screen and (max-width: 479px) { /* Under 479px er nav'en allerede i flow (legacy style.css), så den reserverer sin egen plads og padding ville bare give dødt rum. */ .content-wrap { padding-top: 0; } }