/* Theme Name: Cruise & Magic Theme URI: https://cruiseandmagic.nl Description: Magische, Nederlandstalige theme voor Disney-cruises, parktickets en arrangementen. Drie sfeervarianten (Nacht / Gouden uur / Dag), sterrenhemel, sparkle-trail, varend schip naar Castaway Cay met vuurwerk. Alle informatie komt binnen via een content-laag die koppelt aan de letscruise-satellite plugin (read-only uit de letscruise.nl-hub, centraal beheerd via TheBridge), met de ontwerp-inhoud als terugval. Author: Cruise & Magic Version: 1.0.1 Requires at least: 6.2 Tested up to: 6.8 Requires PHP: 8.0 Text Domain: cruise-magic */ /* ───────────────────── BASE ───────────────────── */ html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; background: #0B1530; } * { box-sizing: border-box; } ::selection { background: var(--gold, #D9B45A); color: #0B1530; } select option { color: #1A2B4D; background: #FFFFFF; } input::placeholder, textarea::placeholder { color: inherit; opacity: .4; } img { max-width: 100%; } a { color: inherit; } /* ───────────────────── SFEERTHEMA'S ───────────────────── data-theme staat op (gezet door de head-init + cm-magic.js), zodat de sfeer flikker-vrij meteen klopt. */ :root, html[data-theme="nacht"] { --bg: #0B1530; --bg-alt: #0E1B3C; --ink: #F2ECDC; --ink-soft: rgba(242,236,220,.68); --ink-faint: rgba(242,236,220,.4); --card-bg: rgba(14,26,60,.6); --line: rgba(217,180,90,.28); --line-soft: rgba(255,255,255,.09); --gold: #D9B45A; --header-bg: rgba(8,16,38,.78); --field-bg: rgba(255,255,255,.05); --hero-grad: linear-gradient(180deg, #060D22 0%, #0B1530 55%, #13234E 100%); --shadow: 0 24px 60px rgba(3,8,24,.5); --o-moon: 1; --o-sun: 0; --o-dusk: 0; } html[data-theme="goud"] { --bg: #231B38; --bg-alt: #2A2142; --ink: #F7EDDC; --ink-soft: rgba(247,237,220,.7); --ink-faint: rgba(247,237,220,.42); --card-bg: rgba(42,32,70,.6); --line: rgba(224,188,98,.32); --line-soft: rgba(255,255,255,.1); --gold: #E0BC62; --header-bg: rgba(26,19,44,.78); --field-bg: rgba(255,255,255,.06); --hero-grad: linear-gradient(180deg, #191437 0%, #3A2350 45%, #8A4B47 80%, #C98A4E 100%); --shadow: 0 24px 60px rgba(10,6,24,.5); --o-moon: 0; --o-sun: 0; --o-dusk: 1; } html[data-theme="dag"] { --bg: #FBF8F0; --bg-alt: #FFFFFF; --ink: #1A2B4D; --ink-soft: rgba(26,43,77,.66); --ink-faint: rgba(26,43,77,.42); --card-bg: #FFFFFF; --line: rgba(176,138,46,.4); --line-soft: rgba(26,43,77,.13); --gold: #B08A2E; --header-bg: rgba(251,248,240,.85); --field-bg: rgba(26,43,77,.05); --hero-grad: linear-gradient(180deg, #E8F0F5 0%, #F4F1E6 70%, #FBF8F0 100%); --shadow: 0 18px 44px rgba(26,43,77,.13); --o-moon: 0; --o-sun: 1; --o-dusk: 0; } .cm-root { background: var(--bg, #0B1530); color: var(--ink, #F2ECDC); transition: background .7s ease, color .7s ease; } /* ───────────────────── KEYFRAMES ───────────────────── */ @keyframes cmTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .2; } } @keyframes cmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes cmPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } @keyframes cmFly { 0% { transform: translate(-280px, 26px) rotate(-4deg); opacity: 0; } 4% { opacity: .92; } 24% { transform: translate(1320px, -34px) rotate(-4deg); opacity: .92; } 28%, 100% { transform: translate(1320px, -34px) rotate(-4deg); opacity: 0; } } @keyframes cmSailIn { from { transform: translateX(-120vw); } to { transform: translateX(0); } } @keyframes cmBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes cmBeam { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes cmRise { from { transform: translateY(22px); } to { transform: translateY(0); } } /* ───────────────────── IMAGE-SLOT (terugval-placeholder) ───────────────────── */ .cm-slot { position: relative; display: block; overflow: hidden; background: #0E1B3C; } html[data-theme="dag"] .cm-slot { background: #E8EEF3; } .cm-slot img { width: 100%; height: 100%; object-fit: cover; display: block; } .cm-slot__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font-size: 13px; line-height: 1.4; color: var(--ink-faint, rgba(242,236,220,.4)); background: radial-gradient(120% 120% at 30% 20%, rgba(217,180,90,.10), transparent 60%), repeating-linear-gradient(135deg, rgba(217,180,90,.05) 0 12px, transparent 12px 24px); } /* ───────────────────── RESPONSIVE ───────────────────── Het ontwerp is desktop-first; deze regels houden het op tablet/mobiel netjes. */ @media (max-width: 1024px) { .cm-hero-grid { grid-template-columns: 1fr !important; gap: 36px !important; } .cm-hero-art { height: 380px !important; } .cm-why-grid { grid-template-columns: 1fr !important; gap: 36px !important; } } @media (max-width: 860px) { .cm-header-inner { padding: 12px 20px !important; gap: 14px !important; flex-wrap: wrap !important; } .cm-nav { order: 3; width: 100%; gap: 18px !important; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; } .cm-nav::-webkit-scrollbar { display: none; } .cm-section { padding-left: 20px !important; padding-right: 20px !important; } .cm-search-grid { grid-template-columns: 1fr !important; } .cm-grid-3 { grid-template-columns: 1fr !important; } .cm-grid-2 { grid-template-columns: 1fr !important; } .cm-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; } .cm-hero-pad { padding-top: 48px !important; } .cm-newsletter-row { flex-direction: column !important; } } @media (max-width: 560px) { .cm-footer-grid { grid-template-columns: 1fr !important; } .cm-hero-art { transform: scale(.82); } .cm-cta-header { padding: 9px 14px !important; } } /* Toegankelijkheid: respecteer reduced-motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } html { scroll-behavior: auto; } }