/* ═══════════════════════════════════════════════════════════════ * MOLSLINJEN CVI — KOMPONENTER * * To slags regler i denne fil: * * 1. NYE komponenter (.btn, .play-disc) — bruges af nyt markup. * 2. CVI-OVERRIDES på legacy Webflow-klasser (.footer, .faq-*, * .discount-*, .booking-cta). Markup'en er identisk på tværs af * alle sider — samme klasser, samme w-node-*-id'er — så én regel * her retter den samme komponent 13 steder. * * Overrides virker fordi filen linkes SIDST i , efter legacy-CSS. * Selector-dybden matcher legacy, så intet !important er nødvendigt. * Rører du en regel her og den ikke slår igennem: tjek at til * cvi/ står efter main.css og style.css. * * IKKE med her: .mn (nav) og .mf (footer) fra landing.css. De er død * kode — alle tre CVI-sider udelader MolsNav/MolsFooter og bruger den * statiske legacy-navbar og -footer i stedet. Samme med .handoff. * ═══════════════════════════════════════════════════════════════ */ /* ── Knapper ────────────────────────────────────────────────────── */ .btn { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1; padding: 0.9rem 1.8rem; border-radius: var(--radius-pill); border: 2px solid transparent; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); text-decoration: none; white-space: nowrap; } .btn-cta { background: var(--color-cta); color: var(--color-havskum); border-color: var(--color-cta); font-weight: 600; } .btn-cta:hover { background: var(--color-cta-hover); border-color: var(--color-cta-hover); } /* .btn-secondary arver farve fra konteksten — parret med .btn-dark-bg eller .btn-light-bg, så samme knap kan ligge på begge bunde. */ .btn-secondary { background: transparent; border-color: currentColor; color: inherit; } .btn-dark-bg.btn-secondary { color: var(--color-havskum); border-color: var(--color-havskum); } .btn-dark-bg.btn-secondary:hover { background: var(--color-havskum); color: var(--color-dyb-havblaa); } .btn-light-bg.btn-secondary { color: var(--color-dyb-havblaa); border-color: var(--color-dyb-havblaa); } .btn-light-bg.btn-secondary:hover { background: var(--color-dyb-havblaa); color: var(--color-havskum); } /* ── Play-disc — lille inline afspil-knap ("Hør sangen") ─────────── */ .play-disc { width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--color-cta); display: inline-flex; align-items: center; justify-content: center; color: var(--color-dyb-havblaa); flex: 0 0 auto; } .play-disc svg { width: 9px; height: 9px; display: block; } /* Spinner i play-disc mens Vimeo buffrer */ .play-spinner { width: 10px; height: 10px; border-radius: var(--radius-pill); border: 2px solid currentColor; border-top-color: transparent; animation: play-spin 0.6s linear infinite; } @keyframes play-spin { to { transform: rotate(360deg); } } .btn.is-loading { cursor: progress; } /* ═══════════════════════════════════════════════════════════════ * CVI-OVERRIDES PÅ LEGACY-KOMPONENTER * ═══════════════════════════════════════════════════════════════ */ /* ── Footer ───────────────────────────────────────────────────── Var #1f299c — en lilla-blå der aldrig har været i CVI-paletten. Gradienten skal matche baggrunden, ellers slår den gamle farve igennem ovenpå symbol-mønstret. */ .footer { background-color: var(--color-dyb-havblaa); background-image: linear-gradient(rgba(0, 37, 71, .9), rgba(0, 37, 71, .9)), url("/assets/logo/MOLSLINJEN_Symbol_NEG_RGB.svg"); } /* ── FAQ ──────────────────────────────────────────────────────── Var #001f47 — tæt på Dyb Havblå, men ikke den. */ .faq-heading, .faq-description, .readmore { color: var(--color-dyb-havblaa); } .faq-card.bot { border-top-color: var(--color-dyb-havblaa-20); } .faq-card.mid { border-left-color: var(--color-dyb-havblaa-20); border-right-color: var(--color-dyb-havblaa-20); } .faq-button { color: var(--color-dyb-havblaa); border-color: var(--color-dyb-havblaa); border-radius: var(--radius-pill); transition: background .2s var(--ease), color .2s var(--ease); } .faq-button:hover { background-color: var(--color-dyb-havblaa); color: var(--color-havskum); } /* Sekundær .button-variant (annika, business, jul). Havde mintgrøn BAGGRUND i hvile, ikke kun tekstfarve. */ .button { background-color: var(--color-cta); color: var(--color-havskum); } /* Legacy sætter kun border-color på hover, i #001f47. Uden denne linje skifter kanten farve når man rører knappen. */ .faq-button:hover { border-color: var(--color-dyb-havblaa); } /* ── Rabat-sektion ────────────────────────────────────────────── Deler .faq-heading/.faq-description med FAQ'en, så farverne er dækket ovenfor. Her er kun rytmen. */ .discount-section { padding-top: var(--section-pad-y); }