/* ========================================================================= WanderLuxe — design system Hand-ported from the React prototype's src/index.css + Tailwind classes across App.tsx / Navbar.tsx / HeroSlider.tsx / DestinationExplorer.tsx / ArticleGrid.tsx / SingleArticleModal.tsx / PhotoGalleryModal.tsx / InteractiveTravelTools.tsx / WordPressCustomizerDrawer.tsx / BookmarksDrawer.tsx / SearchModal.tsx / Footer.tsx / ParticleCanvas.tsx. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Design tokens — 5 palettes (exact hex/rgba from ParticleCanvas.tsx's getPaletteColors() + App.tsx's getTravelPaletteClass()). The customizer writes data-wl-palette on ; each block below scopes its overrides to that attribute so the live switch is instant, no reload. ------------------------------------------------------------------------- */ :root, html[data-wl-palette="luxury-gold"] { --wl-bg: #090c13; --wl-bg-alt: #0c0f17; --wl-bg-elevated: #121826; --wl-surface: rgba(18, 24, 38, 0.6); --wl-surface-luxury: linear-gradient(135deg, rgba(26, 32, 48, 0.7) 0%, rgba(15, 20, 32, 0.85) 100%); --wl-border: rgba(255, 255, 255, 0.08); --wl-border-accent: rgba(212, 175, 55, 0.25); --wl-accent: #d4af37; --wl-accent-light: #fce08a; --wl-accent-dark: #9a7824; --wl-accent-rgb: 212, 175, 55; --wl-particle-primary: rgba(223, 183, 70, 1); --wl-particle-secondary: rgba(252, 224, 138, 1); --wl-glow-a: rgba(245, 158, 11, 0.20); --wl-glow-b: rgba(202, 138, 4, 0.15); --wl-text: #f1f5f9; --wl-text-muted: #94a3b8; --wl-text-dim: #75869e; /* raised from #64748b: that was 4.21:1 on the footer and 3.07:1 in the drawer, both under WCAG AA. Now 5.4:1 / 4.8:1. */ } html[data-wl-palette="arctic-aurora"] { --wl-bg: #06131b; --wl-bg-alt: #081820; --wl-bg-elevated: #0e2530; --wl-surface: rgba(10, 34, 40, 0.6); --wl-surface-luxury: linear-gradient(135deg, rgba(12, 46, 46, 0.7) 0%, rgba(6, 26, 30, 0.85) 100%); --wl-border: rgba(255, 255, 255, 0.08); --wl-border-accent: rgba(56, 239, 125, 0.25); --wl-accent: #38ef7d; --wl-accent-light: #a7f3d0; --wl-accent-dark: #11998e; --wl-accent-rgb: 56, 239, 125; --wl-particle-primary: rgba(56, 239, 125, 1); --wl-particle-secondary: rgba(17, 153, 142, 1); --wl-glow-a: rgba(16, 185, 129, 0.20); --wl-glow-b: rgba(6, 182, 212, 0.15); --wl-text: #ecfdf5; --wl-text-muted: #8fb4ac; --wl-text-dim: #5f7d78; } html[data-wl-palette="sunset-amber"] { --wl-bg: #170c0c; --wl-bg-alt: #1c0e0d; --wl-bg-elevated: #291410; --wl-surface: rgba(41, 20, 16, 0.6); --wl-surface-luxury: linear-gradient(135deg, rgba(51, 25, 18, 0.7) 0%, rgba(23, 12, 12, 0.85) 100%); --wl-border: rgba(255, 255, 255, 0.08); --wl-border-accent: rgba(245, 158, 11, 0.25); --wl-accent: #f59e0b; --wl-accent-light: #fed7aa; --wl-accent-dark: #b45309; --wl-accent-rgb: 245, 158, 11; --wl-particle-primary: rgba(245, 158, 11, 1); --wl-particle-secondary: rgba(251, 146, 60, 1); --wl-glow-a: rgba(217, 119, 6, 0.22); --wl-glow-b: rgba(225, 29, 72, 0.15); --wl-text: #fef3ea; --wl-text-muted: #c9a48f; --wl-text-dim: #8a6a5a; } html[data-wl-palette="deep-obsidian"] { --wl-bg: #05070a; --wl-bg-alt: #070a0e; --wl-bg-elevated: #10151d; --wl-surface: rgba(15, 20, 28, 0.6); --wl-surface-luxury: linear-gradient(135deg, rgba(22, 28, 38, 0.7) 0%, rgba(8, 11, 16, 0.85) 100%); --wl-border: rgba(255, 255, 255, 0.08); --wl-border-accent: rgba(148, 163, 184, 0.25); --wl-accent: #94a3b8; --wl-accent-light: #f1f5f9; --wl-accent-dark: #475569; --wl-accent-rgb: 148, 163, 184; --wl-particle-primary: rgba(203, 213, 225, 1); --wl-particle-secondary: rgba(148, 163, 184, 1); --wl-glow-a: rgba(148, 163, 184, 0.15); --wl-glow-b: rgba(67, 56, 202, 0.12); --wl-text: #f1f5f9; --wl-text-muted: #8a95a5; --wl-text-dim: #59626f; } html[data-wl-palette="emerald-sanctuary"] { --wl-bg: #08140f; --wl-bg-alt: #0a1712; --wl-bg-elevated: #10241b; --wl-surface: rgba(12, 34, 26, 0.6); --wl-surface-luxury: linear-gradient(135deg, rgba(14, 43, 33, 0.7) 0%, rgba(8, 20, 15, 0.85) 100%); --wl-border: rgba(255, 255, 255, 0.08); --wl-border-accent: rgba(16, 185, 129, 0.25); --wl-accent: #10b981; --wl-accent-light: #d1fae5; --wl-accent-dark: #047857; --wl-accent-rgb: 16, 185, 129; --wl-particle-primary: rgba(16, 185, 129, 1); --wl-particle-secondary: rgba(52, 211, 153, 1); --wl-glow-a: rgba(5, 150, 105, 0.20); --wl-glow-b: rgba(20, 184, 166, 0.15); --wl-text: #ecfdf5; --wl-text-muted: #8fb0a3; --wl-text-dim: #5e766c; } /* Font pairings — switched via data-wl-font on . */ :root { --wl-font-heading: 'Cinzel', 'Noto Serif SC', serif; --wl-font-body: 'Plus Jakarta Sans', 'Noto Serif SC', system-ui, sans-serif; } html[data-wl-font="cinzel-serif"] { --wl-font-heading: 'Cinzel', 'Noto Serif SC', serif; } html[data-wl-font="cormorant-editorial"] { --wl-font-heading: 'Cormorant Garamond', 'Noto Serif SC', serif; } html[data-wl-font="modern-sans"] { --wl-font-heading: 'Plus Jakarta Sans', 'Noto Serif SC', system-ui, sans-serif; } /* ------------------------------------------------------------------------- 2. Reset & base ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body.wanderluxe-body { background: var(--wl-bg); color: var(--wl-text); font-family: var(--wl-font-body); margin: 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; transition: background-color .7s ease, color .7s ease; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5 { margin: 0; font-family: var(--wl-font-heading); } p { margin: 0; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #090c13; } ::-webkit-scrollbar-thumb { background: #252e42; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--wl-accent); } .wl-container { max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; } @media (min-width: 640px) { .wl-container { padding: 0 1.5rem; } } @media (min-width: 1024px) { .wl-container { padding: 0 2rem; } } .wl-section { position: relative; padding: 5rem 0; } .wl-section-tight { padding: 3.5rem 0; } .wl-eyebrow { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; } .wl-eyebrow-line { width: 1.5rem; height: 1px; background: var(--wl-accent); } .wl-eyebrow-text { font-size: .72rem; text-transform: uppercase; letter-spacing: .22em; color: var(--wl-accent); font-weight: 600; } /* No global word-break:keep-all here. keep-all forbids EVERY CJK break, which overflows long Chinese headings, and it does nothing useful for English. Per-language rules live in section 16: line-break:strict for Chinese, overflow-wrap/hyphens for Latin. text-wrap:balance suits both. */ .wl-heading-xl { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700; color: #fff; text-wrap: balance; overflow-wrap: break-word; } .wl-heading-lg { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 700; color: #fff; } .wl-subhead { color: var(--wl-text-muted); font-size: .9rem; font-weight: 300; max-width: 42rem; margin-top: .5rem; } .wl-gold-gradient { background: linear-gradient(135deg, var(--wl-accent-light) 0%, var(--wl-accent) 50%, var(--wl-accent-dark) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ------------------------------------------------------------------------- 3. Glass surfaces (verbatim from prototype's index.css) + legibility scrim Every text block sitting over the persistent particle canvas or a hero photo MUST use one of these (or .wl-card-scrim) — see the CHANGELOG note on this project's recurring "text over moving background" bug class. ------------------------------------------------------------------------- */ .wl-glass-panel { background: var(--wl-surface); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--wl-border-accent); } .wl-glass-card { background: var(--wl-surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--wl-border); border-radius: 1rem; } .wl-glass-luxury { background: var(--wl-surface-luxury); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--wl-border-accent); box-shadow: 0 20px 40px -15px rgba(0,0,0,.6), 0 0 20px rgba(var(--wl-accent-rgb), .05); border-radius: 1.5rem; } .wl-scrim-b { position: relative; } .wl-scrim-b::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to top, var(--wl-bg) 0%, rgba(9,12,19,.55) 55%, transparent 100%); } /* ------------------------------------------------------------------------- 4. Buttons, pills, chips, icons ------------------------------------------------------------------------- */ .wl-btn { display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; font-weight: 700; font-size: .8rem; letter-spacing: .03em; border: none; transition: all .25s ease; padding: .85rem 1.6rem; } .wl-btn-gold { background: linear-gradient(90deg, var(--wl-accent-light), var(--wl-accent), var(--wl-accent-dark)); color: #0c0f17; box-shadow: 0 8px 24px -8px rgba(var(--wl-accent-rgb), .4); } .wl-btn-gold:hover { filter: brightness(1.1); transform: translateY(-1px); } .wl-btn-ghost { background: rgba(15, 23, 42, .8); color: var(--wl-text); border: 1px solid rgba(100,116,139,.4); backdrop-filter: blur(8px); } .wl-btn-ghost:hover { border-color: rgba(var(--wl-accent-rgb), .5); } .wl-btn-link { background: none; color: var(--wl-text-muted); padding: .85rem .5rem; } .wl-btn-link:hover { color: var(--wl-accent); } .wl-btn-sm { padding: .5rem 1rem; font-size: .72rem; } .wl-icon { width: 1.05em; height: 1.05em; } .wl-icon-xs { width: .85em; height: .85em; } .wl-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 999px; background: rgba(15,23,42,.75); color: var(--wl-text-muted); border: 1px solid rgba(100,116,139,.35); backdrop-filter: blur(6px); transition: all .2s ease; } .wl-icon-btn:hover { color: var(--wl-accent); border-color: rgba(var(--wl-accent-rgb), .4); } .wl-icon-btn.is-active { color: var(--wl-accent); background: rgba(var(--wl-accent-rgb), .18); border-color: rgba(var(--wl-accent-rgb), .4); } .wl-like-btn.is-active { color: #fb7185; background: rgba(244,63,94,.18); border-color: rgba(244,63,94,.4); } .wl-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: 999px; font-size: .68rem; font-weight: 600; white-space: nowrap; } .wl-pill-dark { background: rgba(2,6,15,.8); color: var(--wl-accent-light); border: 1px solid rgba(var(--wl-accent-rgb), .3); backdrop-filter: blur(6px); } .wl-pill-outline { background: rgba(15,23,42,.8); color: var(--wl-text-muted); border: 1px solid rgba(100,116,139,.4); text-transform: uppercase; letter-spacing: .05em; } .wl-pill-gold { background: var(--wl-accent); color: #0c0f17; font-weight: 700; } .wl-chip { padding: .4rem 1rem; border-radius: 999px; font-size: .72rem; font-weight: 500; white-space: nowrap; background: rgba(15,23,42,.7); color: var(--wl-text-muted); border: 1px solid rgba(30,41,59,.8); transition: all .25s ease; } .wl-chip:hover { color: #fff; background: rgba(30,41,59,.9); } .wl-chip.is-active { background: var(--wl-accent); color: #0c0f17; font-weight: 700; box-shadow: 0 6px 16px -6px rgba(var(--wl-accent-rgb), .4); } .wl-chip-sm { padding: .15rem .55rem; border-radius: .3rem; font-size: .65rem; background: rgba(30,41,59,.8); color: var(--wl-text-muted); border: 1px solid rgba(51,65,85,.4); } .wl-chip-row { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: 1rem; scrollbar-width: none; } .wl-chip-row::-webkit-scrollbar { display: none; } /* ========================================================================= 5. Header / Navbar ========================================================================= */ .wl-header { position: sticky; top: 0; z-index: 40; background: rgba(9,12,19,.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(30,41,59,.6); padding: 1rem 0; transition: all .5s ease; } .wl-header.is-scrolled { background: rgba(9,12,19,.96); backdrop-filter: blur(20px); border-bottom-color: rgba(var(--wl-accent-rgb), .15); padding: .65rem 0; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); } .wl-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* min-width:0 lets the brand shrink instead of forcing the action cluster past the viewport edge (flex items default to min-width:auto). */ .wl-brand { display: flex; align-items: center; gap: .7rem; min-width: 0; } .wl-brand-mark { width: 2.5rem; height: 2.5rem; border-radius: .75rem; padding: 1px; background: linear-gradient(135deg, #fbbf24, #b45309, #451a03); box-shadow: 0 8px 20px -8px rgba(var(--wl-accent-rgb), .3); flex-shrink: 0; } .wl-brand-mark-inner { width: 100%; height: 100%; background: #0c0f17; border-radius: .68rem; display: flex; align-items: center; justify-content: center; } .wl-brand-mark-inner .wl-icon { width: 1.15rem; height: 1.15rem; color: var(--wl-accent); transition: transform .5s ease; } .wl-brand:hover .wl-brand-mark-inner .wl-icon { transform: rotate(45deg); } /* display:block is load-bearing: `overflow` does not apply to a non-replaced inline box, so as an inline span this never truncated and the wordmark ran underneath the header actions on narrow viewports. */ .wl-brand-title { display: block; font-family: var(--wl-font-heading); font-weight: 700; font-size: 1.15rem; letter-spacing: .16em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Narrow phones: tighten the wordmark so brand + actions fit inside 360px. */ @media (max-width: 479px) { .wl-brand-title { font-size: 1rem; letter-spacing: .1em; } } .wl-brand-sub { font-size: .62rem; color: var(--wl-text-muted); text-transform: uppercase; letter-spacing: .18em; margin-top: 1px; display: none; } @media (min-width: 768px) { .wl-brand-sub { display: block; } } .wl-nav-pills { display: none; align-items: center; gap: .15rem; background: rgba(18,24,38,.7); backdrop-filter: blur(8px); padding: .35rem; border-radius: 999px; border: 1px solid rgba(51,65,85,.4); } @media (min-width: 1024px) { .wl-nav-pills { display: flex; } } .wl-nav-pill { padding: .45rem 1.1rem; border-radius: 999px; font-size: .74rem; font-weight: 500; color: #cbd5e1; background: none; border: none; transition: all .25s ease; } .wl-nav-pill:hover { color: #fff; background: rgba(255,255,255,.05); } .wl-nav-pill.is-active { color: #0f172a; font-weight: 700; background: linear-gradient(90deg, #fcd34d, var(--wl-accent), var(--wl-accent-dark)); box-shadow: 0 6px 14px -4px rgba(var(--wl-accent-rgb), .3); } .wl-header-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; } /* The soundscape toggle is duplicated inside the mobile drawer, so drop it from the cramped mobile action bar rather than letting the row overflow. */ @media (max-width: 639px) { .wl-header-actions [data-wl-soundscape] { display: none; } } .wl-soundscape-label { font-size: .68rem; font-family: monospace; color: var(--wl-accent-light); display: none; } @media (min-width: 1280px) { .wl-soundscape-label.is-playing { display: inline; } } .wl-bookmark-count { position: absolute; top: -4px; right: -4px; width: 1.05rem; height: 1.05rem; background: var(--wl-accent); color: #0f172a; border-radius: 999px; font-size: .6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.4); } .wl-customizer-toggle { display: none; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: 999px; font-size: .74rem; background: rgba(30,41,59,.8); color: var(--wl-accent-light); border: 1px solid rgba(var(--wl-accent-rgb), .3); } @media (min-width: 640px) { .wl-customizer-toggle { display: inline-flex; } } .wl-mobile-toggle { display: inline-flex; padding: .5rem; border-radius: .6rem; color: #cbd5e1; background: none; border: none; } @media (min-width: 1024px) { .wl-mobile-toggle { display: none; } } .wl-mobile-menu { display: none; background: rgba(12,15,23,.97); border-bottom: 1px solid rgba(var(--wl-accent-rgb), .2); padding: 1rem 1.25rem 1.5rem; } .wl-mobile-menu.is-open { display: block; } @media (min-width: 1024px) { .wl-mobile-menu { display: none !important; } } .wl-mobile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .75rem; } .wl-mobile-item { display: flex; align-items: center; gap: .5rem; padding: .65rem; border-radius: .75rem; font-size: .74rem; color: #cbd5e1; background: rgba(30,41,59,.4); } .wl-mobile-item.is-active { color: var(--wl-accent-light); background: rgba(var(--wl-accent-rgb), .18); border: 1px solid rgba(var(--wl-accent-rgb), .3); } .wl-mobile-footer-row { display: flex; align-items: center; justify-content: space-between; padding-top: .75rem; margin-top: .75rem; border-top: 1px solid rgba(30,41,59,.8); font-size: .72rem; color: var(--wl-text-muted); } .wl-mobile-sounds { display: flex; gap: .5rem; } .wl-mobile-sounds button { background: none; border: none; color: var(--wl-text-muted); } /* ========================================================================= 6. Hero slider ========================================================================= */ .wl-hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; background: var(--wl-bg); } .wl-hero-slide { position: absolute; inset: 0; opacity: 0; transform: scale(1); transition: opacity 1.2s ease-in-out, transform 8s ease-out; } .wl-hero-slide.is-active { opacity: 1; transform: scale(1.05); z-index: 1; } .wl-hero-slide img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.65) contrast(1.05); } .wl-hero-slide-scrim-1 { position: absolute; inset: 0; background: linear-gradient(to top, var(--wl-bg) 0%, rgba(9,12,19,.4) 45%, transparent 100%); } .wl-hero-slide-scrim-2 { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(9,12,19,.3) 65%, rgba(9,12,19,.8) 100%); } .wl-hero-grid-overlay { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(255,255,255,.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.02) 1px, transparent 1px); background-size: 4rem 4rem; } .wl-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1280px; margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; min-height: 80vh; padding: 6rem 1.25rem 3rem; } @media (min-width: 640px) { .wl-hero-inner { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .wl-hero-inner { padding-left: 2rem; padding-right: 2rem; } } .wl-hero-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 2.5rem; } .wl-hero-badges { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; } .wl-hero-telemetry { display: none; align-items: center; gap: 1rem; background: rgba(2,6,23,.7); border: 1px solid rgba(var(--wl-accent-rgb), .2); padding: .35rem 1rem; border-radius: 999px; font-size: .74rem; color: #cbd5e1; backdrop-filter: blur(6px); } @media (min-width: 768px) { .wl-hero-telemetry { display: flex; } } .wl-hero-telemetry .sep { color: #475569; } .wl-hero-main { margin: auto 0; max-width: 52rem; } .wl-hero-kicker { font-size: .8rem; text-transform: uppercase; letter-spacing: .25em; color: rgba(var(--wl-accent-rgb), .9); font-weight: 500; margin-bottom: .75rem; } .wl-hero-title { font-size: clamp(2rem, 5.4vw, 3.75rem); font-weight: 700; color: #fff; line-height: 1.12; letter-spacing: -.01em; margin-bottom: 1.1rem; text-shadow: 0 10px 30px rgba(0,0,0,.5); text-wrap: balance; } .wl-hero-excerpt { font-size: clamp(.9rem, 1.6vw, 1.15rem); color: #e2e8f0; font-weight: 300; line-height: 1.7; max-width: 42rem; margin-bottom: 2rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .wl-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } .wl-hero-bottom { display: flex; flex-direction: column; gap: 1.5rem; padding-top: 2rem; border-top: 1px solid rgba(30,41,59,.6); } @media (min-width: 640px) { .wl-hero-bottom { flex-direction: row; align-items: center; justify-content: space-between; } } .wl-hero-author { display: flex; align-items: center; gap: .75rem; } .wl-hero-author img { width: 2.5rem; height: 2.5rem; border-radius: 999px; object-fit: cover; border: 2px solid rgba(var(--wl-accent-rgb), .5); } .wl-hero-author-name { display: block; font-size: .74rem; font-weight: 600; color: #fff; } .wl-hero-author-role { display: block; font-size: .66rem; color: var(--wl-text-muted); line-height: 1.45; } .wl-hero-author > span { min-width: 0; } .wl-hero-controls { display: flex; align-items: center; gap: 1rem; justify-content: space-between; width: 100%; } @media (min-width: 640px) { .wl-hero-controls { width: auto; justify-content: flex-end; } } .wl-hero-dots { display: flex; align-items: center; gap: .5rem; } .wl-hero-dot { height: .35rem; width: .5rem; border-radius: 999px; background: #334155; border: none; transition: all .5s ease; padding: 0; } .wl-hero-dot.is-active { width: 2rem; background: var(--wl-accent); box-shadow: 0 4px 10px -2px rgba(var(--wl-accent-rgb), .5); } .wl-hero-arrows { display: flex; align-items: center; gap: .5rem; } .wl-hero-arrow { width: 2.25rem; height: 2.25rem; border-radius: 999px; background: rgba(15,23,42,.8); border: 1px solid #334155; color: #cbd5e1; display: flex; align-items: center; justify-content: center; transition: all .2s ease; } .wl-hero-arrow:hover { background: var(--wl-accent); color: #0f172a; } .wl-avatar-xs { width: 1.5rem; height: 1.5rem; border-radius: 999px; object-fit: cover; border: 1px solid rgba(var(--wl-accent-rgb), .3); } /* ========================================================================= 7. Destination explorer ========================================================================= */ .wl-section-header { display: flex; flex-direction: column; gap: 1.25rem; justify-content: space-between; margin-bottom: 2.5rem; } @media (min-width: 768px) { .wl-section-header { flex-direction: row; align-items: flex-end; flex-wrap: wrap; } /* Sections with many filter chips can't fit a 48px heading and the chip row on one line (heading ~580px + chips ~850px > 1216px container), which squeezed the heading to ~345px and wrapped it mid-word. Reserving a readable basis for the heading makes the chip row wrap to its own full line only when it genuinely doesn't fit; sections with few chips still sit side by side. */ .wl-section-header > :first-child { flex: 1 1 auto; min-width: 26rem; } .wl-section-header > .wl-chip-row { flex: 1 1 auto; min-width: 0; } } .wl-search-box { position: relative; width: 100%; } @media (min-width: 768px) { .wl-search-box { width: 18rem; } } .wl-search-box .wl-icon { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--wl-accent); } .wl-search-box input { width: 100%; padding: .65rem 1rem .65rem 2.4rem; background: rgba(15,23,42,.8); border: 1px solid #1e293b; border-radius: 999px; font-size: .74rem; color: #fff; } .wl-search-box input::placeholder { color: #64748b; } .wl-search-box input:focus { outline: none; border-color: rgba(var(--wl-accent-rgb), .5); } .wl-radar-banner { border-radius: 1.25rem; padding: 1.5rem; margin-bottom: 3rem; border: 1px solid var(--wl-border-accent); display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 1024px) { .wl-radar-banner { flex-direction: row; align-items: center; justify-content: space-between; } } .wl-radar-flag { display: flex; align-items: center; gap: .5rem; color: var(--wl-accent); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; } .wl-radar-flag .wl-icon { animation: wl-spin 18s linear infinite; } .wl-radar-title { font-size: 1.3rem; font-weight: 700; color: #fff; margin: .5rem 0; } .wl-radar-desc { font-size: .74rem; color: var(--wl-text-muted); max-width: 32rem; line-height: 1.6; } .wl-radar-pins { display: flex; flex-wrap: wrap; gap: .6rem; } .wl-radar-pin { display: flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border-radius: .6rem; font-size: .72rem; font-weight: 500; background: rgba(30,41,59,.8); color: #cbd5e1; border: 1px solid rgba(51,65,85,.5); } .wl-radar-pin:hover { color: var(--wl-accent-light); } .wl-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .wl-grid-2 { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .wl-grid-4 { grid-template-columns: repeat(4, 1fr); } .wl-grid-3 { grid-template-columns: repeat(3, 1fr); } } .wl-card { position: relative; border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; transition: all .5s cubic-bezier(.2,.8,.2,1); } a.wl-card, .wl-card { cursor: pointer; } .wl-card:hover { transform: translateY(-5px); box-shadow: 0 30px 50px -20px rgba(var(--wl-accent-rgb), .12); border-color: rgba(var(--wl-accent-rgb), .4) !important; } .wl-card-media { position: relative; height: 15rem; overflow: hidden; } .wl-card-media-tall { height: 15rem; } .wl-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; } .wl-card:hover .wl-card-img { transform: scale(1.1); } .wl-card-scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--wl-bg-alt) 0%, transparent 55%, rgba(0,0,0,.3) 100%); } .wl-card-top-row { position: absolute; top: .75rem; left: .75rem; right: .75rem; display: flex; align-items: center; justify-content: space-between; z-index: 2; } .wl-card-cat-pill { position: absolute; top: .75rem; left: .75rem; z-index: 2; } .wl-card-actions { display: flex; gap: .4rem; } .wl-card-actions .wl-icon-btn { width: 1.9rem; height: 1.9rem; } /* Sits outside the media link as a sibling (see wl_article_card()) so the like/bookmark buttons are never nested interactive-in-interactive content — absolutely positioned to visually overlay the same top-right corner of the card image. */ .wl-card-actions-float { position: absolute; top: .75rem; right: .75rem; z-index: 3; } .wl-card-pin { position: absolute; bottom: .75rem; left: .75rem; display: flex; align-items: center; gap: .3rem; font-size: .68rem; color: #e2e8f0; background: rgba(2,6,23,.7); padding: .15rem .5rem; border-radius: .4rem; z-index: 2; } .wl-card-title-on-media { position: absolute; bottom: .75rem; left: .75rem; right: .75rem; z-index: 2; } .wl-card-title-on-media h3 { font-size: 1.05rem; font-weight: 700; color: #fff; } .wl-card-title-on-media p { font-size: .68rem; color: #cbd5e1; margin-top: 2px; } .wl-pill-temp { position: absolute; top: .75rem; left: .75rem; z-index: 2; } .wl-pill-country { position: absolute; top: .75rem; right: .75rem; z-index: 2; } .wl-card-body { padding: 1.2rem; display: flex; flex-direction: column; gap: .75rem; flex: 1; } .wl-card-title { font-size: 1.15rem; font-weight: 700; color: #fff; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wl-card:hover .wl-card-title { color: var(--wl-accent-light); } .wl-card-excerpt { font-size: .76rem; color: var(--wl-text-muted); line-height: 1.6; font-weight: 300; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wl-tag-row { display: flex; flex-wrap: wrap; gap: .35rem; } .wl-card-footer { padding-top: .85rem; border-top: 1px solid rgba(30,41,59,.8); display: flex; align-items: center; justify-content: space-between; font-size: .72rem; } .wl-card-author { display: flex; align-items: center; gap: .4rem; color: #cbd5e1; } .wl-card-meta { display: flex; align-items: center; gap: .7rem; color: var(--wl-text-muted); } .wl-meta-views { display: flex; align-items: center; gap: .25rem; } .wl-card-read-more { color: var(--wl-accent); font-weight: 600; display: inline-flex; align-items: center; gap: .15rem; } .wl-empty-state { text-align: center; padding: 4rem 1rem; color: var(--wl-text-muted); font-size: .85rem; } .wl-empty-state button { margin-top: 1rem; } /* ========================================================================= 8. Article grid layouts (magazine / grid / masonry / filmstrip) ========================================================================= */ .wl-grid-controls { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; } .wl-layout-switch { display: flex; align-items: center; background: #0f172a; border: 1px solid #1e293b; padding: .25rem; border-radius: .8rem; } .wl-layout-btn { padding: .4rem; border-radius: .6rem; color: var(--wl-text-muted); background: none; border: none; } .wl-layout-btn.is-active { background: var(--wl-accent); color: #0f172a; } .wl-sort-select { background: #0f172a; border: 1px solid #1e293b; color: #cbd5e1; font-size: .74rem; border-radius: .8rem; padding: .5rem .75rem; } .wl-magazine-featured { border-radius: 1.5rem; overflow: hidden; border: 1px solid var(--wl-border-accent); display: grid; grid-template-columns: 1fr; margin-bottom: 3rem; } @media (min-width: 1024px) { .wl-magazine-featured { grid-template-columns: 7fr 5fr; } } .wl-magazine-media { position: relative; height: 20rem; overflow: hidden; } @media (min-width: 1024px) { .wl-magazine-media { height: 30rem; } } .wl-magazine-media img { width: 100%; height: 100%; object-fit: cover; } .wl-magazine-featured-badge { position: absolute; top: 1rem; left: 1rem; padding: .35rem .9rem; background: var(--wl-accent); color: #0f172a; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-radius: 999px; } .wl-magazine-body { padding: 1.75rem 2rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; } .wl-magazine-meta-row { display: flex; align-items: center; gap: .75rem; font-size: .72rem; color: var(--wl-text-muted); } .wl-magazine-title { font-size: clamp(1.4rem,2.4vw,1.9rem); font-weight: 700; color: #fff; line-height: 1.3; margin: .75rem 0; } .wl-magazine-excerpt { font-size: .85rem; color: #cbd5e1; font-weight: 300; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .wl-magazine-footer { padding-top: 1.25rem; border-top: 1px solid rgba(30,41,59,.8); display: flex; align-items: center; justify-content: space-between; } .wl-magazine-author { display: flex; align-items: center; gap: .6rem; } .wl-magazine-author img { width: 2.2rem; height: 2.2rem; border-radius: 999px; object-fit: cover; border: 1px solid rgba(var(--wl-accent-rgb), .4); } .wl-filmstrip { display: flex; gap: 1.5rem; overflow-x: auto; padding: .5rem 0 2rem; scroll-snap-type: x mandatory; } .wl-filmstrip .wl-article-card { width: 20rem; flex-shrink: 0; scroll-snap-align: start; } @media (min-width: 640px) { .wl-filmstrip .wl-article-card { width: 24rem; } } /* ========================================================================= 9. Single article ========================================================================= */ .wl-reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--wl-accent-light), var(--wl-accent)); z-index: 60; width: 0%; transition: width .1s linear; } .wl-article-topbar { position: sticky; top: 0; z-index: 30; background: rgba(9,12,19,.9); backdrop-filter: blur(16px); padding: 1rem 0; border-bottom: 1px solid rgba(var(--wl-accent-rgb), .15); } .wl-article-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .wl-article-topbar-left { display: flex; align-items: center; gap: .75rem; font-size: .78rem; color: var(--wl-text-muted); } .wl-article-topbar-actions { display: flex; align-items: center; gap: .5rem; } .wl-article-hero { position: relative; height: 62vw; max-height: 68vh; min-height: 22rem; overflow: hidden; } .wl-article-hero img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7) contrast(1.05); } .wl-article-hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--wl-bg) 5%, rgba(9,12,19,.4) 55%, transparent 100%); } .wl-article-hero-content { position: absolute; left: 0; right: 0; bottom: 2.5rem; max-width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 0 1.25rem; } @media (min-width: 640px) { .wl-article-hero-content { padding: 0 1.5rem; } } @media (min-width: 1024px) { .wl-article-hero-content { padding: 0 2rem; } } .wl-article-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .74rem; color: #e2e8f0; margin-bottom: .75rem; } .wl-article-hero-title { font-size: clamp(1.7rem, 4vw, 3rem); font-weight: 700; color: #fff; line-height: 1.2; max-width: 56rem; } .wl-article-hero-subtitle { font-size: clamp(.85rem, 1.4vw, 1.1rem); color: #cbd5e1; font-weight: 300; max-width: 46rem; margin-top: .6rem; } .wl-author-bar { padding: 1.5rem; border-bottom: 1px solid #1e293b; background: rgba(12,16,28,.8); display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 640px) { .wl-author-bar { flex-direction: row; align-items: center; justify-content: space-between; padding: 1.5rem 3rem; } } .wl-author-info { display: flex; align-items: center; gap: 1rem; } .wl-author-avatar { width: 3.5rem; height: 3.5rem; border-radius: 999px; object-fit: cover; border: 2px solid rgba(var(--wl-accent-rgb), .5); } .wl-author-name-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; font-weight: 600; color: #fff; } .wl-author-badge { font-size: .6rem; padding: .1rem .5rem; border-radius: .3rem; background: rgba(var(--wl-accent-rgb), .15); color: var(--wl-accent-light); border: 1px solid rgba(var(--wl-accent-rgb), .3); } .wl-author-role { font-size: .74rem; color: var(--wl-accent-light); font-weight: 500; } .wl-author-bio { font-size: .74rem; color: var(--wl-text-muted); font-weight: 300; margin-top: 2px; } .wl-author-stats { display: flex; gap: 1.25rem; font-size: .72rem; color: var(--wl-text-muted); } .wl-author-stats .num { color: #e2e8f0; font-weight: 700; font-size: .9rem; display: block; } .wl-highlights-band { padding: 2rem 1.5rem; background: rgba(15,23,42,.4); } @media (min-width: 640px) { .wl-highlights-band { padding: 2rem 3rem; } } .wl-highlights-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; } @media (min-width: 640px) { .wl-highlights-grid { grid-template-columns: 1fr 1fr; } } .wl-highlight-item { display: flex; align-items: flex-start; gap: .6rem; font-size: .78rem; color: #cbd5e1; background: rgba(18,24,38,.7); padding: .75rem; border-radius: .8rem; border: 1px solid #1e293b; line-height: 1.55; } .wl-highlight-item .wl-icon { color: var(--wl-accent); flex-shrink: 0; margin-top: 2px; } .wl-article-body { max-width: 64rem; margin: 0 auto; padding: 3rem 1.5rem; } @media (min-width: 640px) { .wl-article-body { padding: 3rem; } } .wl-article-intro { font-size: clamp(1rem, 1.6vw, 1.2rem); color: #e2e8f0; font-weight: 300; line-height: 1.85; } .wl-article-intro p:first-letter { font-family: var(--wl-font-heading); font-size: 3rem; color: var(--wl-accent); float: left; margin-right: .6rem; line-height: .8; } /* Chapter blocks inside generated article content. Scoped to .wl-article-body on purpose: the bare .wl-section class is the global page-section layout (5rem block padding, defined far above) and an unscoped rule here silently overrode it site-wide. */ .wl-article-body .wl-section { padding-top: 2rem; margin-top: 2rem; border-top: 1px solid rgba(30,41,59,.8); } .wl-section-heading { font-size: clamp(1.3rem, 2.2vw, 1.85rem); font-weight: 700; color: var(--wl-accent-light); letter-spacing: .01em; margin-bottom: 1.25rem; } .wl-section-text p { font-size: .95rem; color: #cbd5e1; font-weight: 300; line-height: 1.85; margin-bottom: 1rem; } /* Editorial measure. The article column is 64rem so that figures, itinerary cards and the budget panel can run wide, but prose set that wide reads at ~110 characters per line — roughly 50% past the comfortable maximum. Cap the text blocks themselves instead of narrowing the whole column. */ .wl-article-body .wl-article-intro p, .wl-article-body .wl-section-text p, .wl-article-body .wl-tips-box, .wl-article-body .wl-pullquote, .wl-dest-body > p { max-width: 68ch; } .wl-article-body .wl-tips-box li { max-width: 64ch; } .wl-pullquote { margin: 1.75rem 0; padding: 1.5rem; border-radius: 1rem; background: linear-gradient(90deg, rgba(var(--wl-accent-rgb), .1), rgba(15,23,42,.6), transparent); border-left: 4px solid var(--wl-accent); color: var(--wl-accent-light); font-family: 'Cormorant Garamond', 'Noto Serif SC', serif; font-style: italic; font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.6; } .wl-inline-figure { margin: 2rem 0; } .wl-inline-figure-media { border-radius: 1rem; overflow: hidden; border: 1px solid var(--wl-border-accent); box-shadow: 0 25px 50px -20px rgba(0,0,0,.6); cursor: zoom-in; position: relative; } .wl-inline-figure-media img { width: 100%; max-height: 34rem; object-fit: cover; transition: transform .7s ease; } .wl-inline-figure-media:hover img { transform: scale(1.04); } .wl-inline-figure figcaption { margin-top: .6rem; display: flex; flex-direction: column; gap: .4rem; font-size: .75rem; color: var(--wl-text-muted); background: rgba(15,23,42,.6); padding: .75rem; border-radius: .8rem; border: 1px solid #1e293b; } @media (min-width: 640px) { .wl-inline-figure figcaption { flex-direction: row; align-items: center; justify-content: space-between; } } .wl-figcaption-text { font-style: italic; } /* A full EXIF line ("Hasselblad X2D 100C · XCD 2,5/38V · f/8.0 · 2.5s (ND1000)") is wider than a 360px viewport, so it cannot be nowrap by default — that pushed the whole document 14px wide. Wrap on phones, single line once the figcaption goes horizontal and there is room for it. */ .wl-exif-chip { font-family: monospace; font-size: .68rem; color: var(--wl-accent-light); background: rgba(2,6,23,.7); padding: .3rem .6rem; border-radius: .5rem; border: 1px solid #1e293b; white-space: normal; overflow-wrap: anywhere; } @media (min-width: 640px) { .wl-exif-chip { white-space: nowrap; overflow-wrap: normal; } } .wl-tips-box { margin-top: 1.25rem; padding: 1rem; border-radius: .8rem; background: rgba(15,23,42,.8); border: 1px solid #1e293b; } .wl-tips-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--wl-accent); display: block; margin-bottom: .5rem; } .wl-tips-box ul { display: flex; flex-direction: column; gap: .4rem; } .wl-tips-box li { font-size: .78rem; color: #cbd5e1; padding-left: 1rem; position: relative; } .wl-tips-box li::before { content: "•"; position: absolute; left: 0; color: var(--wl-accent); font-weight: 700; } /* Before/After slider */ .wl-ba-header { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; } @media (min-width: 640px) { .wl-ba-header { flex-direction: row; align-items: center; justify-content: space-between; } } .wl-ba-title { font-size: 1.3rem; font-weight: 700; color: #fff; margin-top: .25rem; } .wl-ba-slider { position: relative; height: 24rem; border-radius: 1.25rem; overflow: hidden; border: 1px solid var(--wl-border-accent); box-shadow: 0 25px 50px -20px rgba(0,0,0,.6); user-select: none; touch-action: pan-y; } .wl-ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .wl-ba-after { z-index: 1; } .wl-ba-before-wrap { position: absolute; inset: 0; overflow: hidden; z-index: 2; width: 50%; } .wl-ba-before-wrap img { width: 100vw; max-width: none; } .wl-ba-label { position: absolute; bottom: 1rem; padding: .4rem .9rem; background: rgba(2,6,23,.8); color: var(--wl-accent-light); font-size: .72rem; font-weight: 600; border-radius: 999px; border: 1px solid rgba(var(--wl-accent-rgb), .3); z-index: 3; } .wl-ba-label-after { right: 1rem; } .wl-ba-label-before { left: 1rem; } .wl-ba-handle { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--wl-accent); left: 50%; z-index: 4; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 12px rgba(var(--wl-accent-rgb),.6); cursor: ew-resize; } .wl-ba-handle-grip { width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--wl-accent); color: #0f172a; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; box-shadow: 0 6px 16px rgba(0,0,0,.4); } .wl-ba-hit { position: absolute; inset: 0; z-index: 5; cursor: ew-resize; } /* Itinerary timeline */ .wl-itinerary-list { display: flex; flex-direction: column; gap: 1rem; } .wl-itinerary-item { padding: 1.1rem 1.25rem; border-radius: 1rem; border: 1px solid #1e293b; } .wl-itinerary-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; } .wl-itinerary-left { display: flex; align-items: center; gap: .75rem; } .wl-itinerary-day { width: 2.1rem; height: 2.1rem; border-radius: .7rem; background: rgba(var(--wl-accent-rgb), .18); color: var(--wl-accent-light); font-family: monospace; font-weight: 700; font-size: .74rem; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(var(--wl-accent-rgb), .35); flex-shrink: 0; } .wl-itinerary-title { font-size: .95rem; font-weight: 700; color: #fff; } .wl-itinerary-hotel { font-size: .72rem; color: var(--wl-accent-light); font-weight: 500; } .wl-itinerary-summary { font-size: .78rem; color: #cbd5e1; line-height: 1.6; font-weight: 300; padding-left: 2.85rem; margin-top: .4rem; } .wl-itinerary-spots { display: flex; flex-wrap: wrap; gap: .4rem; padding-left: 2.85rem; margin-top: .5rem; } .wl-itinerary-spot { font-size: .66rem; padding: .15rem .55rem; border-radius: .3rem; background: #1e293b; color: #cbd5e1; } /* Budget card */ .wl-budget-card { padding: 1.5rem; border-radius: 1.25rem; } .wl-budget-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .wl-budget-title { font-size: 1.15rem; font-weight: 700; color: #fff; margin-top: .3rem; } .wl-budget-value { font-size: 1.4rem; font-weight: 700; font-family: monospace; } .wl-budget-grid { display: grid; grid-template-columns: 1fr; gap: .6rem; padding-top: .5rem; } @media (min-width: 640px) { .wl-budget-grid { grid-template-columns: 1fr 1fr; } } .wl-budget-row { display: flex; align-items: center; justify-content: space-between; padding: .6rem .75rem; border-radius: .6rem; background: rgba(15,23,42,.8); border: 1px solid #1e293b; font-size: .76rem; } .wl-budget-row .cost { font-family: monospace; color: var(--wl-accent-light); font-weight: 700; } /* Inline photo grid on single article */ .wl-inline-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; } @media (min-width: 640px) { .wl-inline-gallery { grid-template-columns: repeat(4, 1fr); } } .wl-inline-gallery-item { position: relative; height: 9rem; border-radius: .8rem; overflow: hidden; border: 1px solid #1e293b; cursor: pointer; } .wl-inline-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .wl-inline-gallery-item:hover img { transform: scale(1.1); } .wl-inline-gallery-caption { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8), transparent 60%); display: flex; align-items: flex-end; padding: .5rem; } .wl-inline-gallery-caption span { font-size: .68rem; color: #fff; font-weight: 500; } /* Comments */ .wl-comment-form { padding: 1.25rem; border-radius: 1.25rem; display: flex; flex-direction: column; gap: .75rem; } .wl-comment-form input, .wl-comment-form textarea { width: 100%; padding: .6rem .85rem; border-radius: .8rem; background: #0f172a; border: 1px solid #1e293b; color: #fff; font-size: .78rem; font-family: inherit; } .wl-comment-form textarea { resize: vertical; min-height: 5rem; } .wl-comment-form input::placeholder, .wl-comment-form textarea::placeholder { color: #64748b; } .wl-comment-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; } .wl-comment-item { padding: 1rem; border-radius: .9rem; background: rgba(15,23,42,.6); border: 1px solid #1e293b; } .wl-comment-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .wl-comment-author { display: flex; align-items: center; gap: .6rem; } .wl-comment-author img { width: 2rem; height: 2rem; border-radius: 999px; object-fit: cover; border: 1px solid rgba(var(--wl-accent-rgb), .3); } .wl-comment-author-name { font-size: .78rem; font-weight: 600; color: #fff; } .wl-comment-date { font-size: .65rem; color: var(--wl-text-muted); } .wl-comment-content { font-size: .78rem; color: #cbd5e1; line-height: 1.6; font-weight: 300; padding-left: 2.6rem; margin-top: .5rem; } /* ========================================================================= 10. Photo gallery + lightbox ========================================================================= */ .wl-gallery-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .wl-gallery-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .wl-gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1280px) { .wl-gallery-grid { grid-template-columns: repeat(4, 1fr); } } .wl-photo-card { position: relative; border-radius: 1rem; overflow: hidden; height: 18rem; cursor: pointer; border: 1px solid #1e293b; } .wl-photo-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; } .wl-photo-card:hover img { transform: scale(1.1); } .wl-photo-card-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.2) 55%, transparent); } .wl-photo-card-tag { position: absolute; top: .75rem; left: .75rem; } .wl-photo-card-info { position: absolute; bottom: .75rem; left: .75rem; right: .75rem; } .wl-photo-card-title { font-size: 1rem; font-weight: 700; color: #fff; } .wl-photo-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: .68rem; color: #e2e8f0; margin-top: .3rem; } .wl-lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.96); backdrop-filter: blur(24px); display: none; align-items: center; justify-content: center; padding: 1rem; } .wl-lightbox.is-open { display: flex; } .wl-lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; } .wl-lightbox-inner { max-width: 72rem; width: 100%; max-height: 90vh; display: flex; flex-direction: column; border-radius: 1.5rem; overflow: hidden; background: var(--wl-bg-alt); border: 1px solid var(--wl-border-accent); box-shadow: 0 40px 80px rgba(0,0,0,.6); } @media (min-width: 1024px) { .wl-lightbox-inner { flex-direction: row; max-height: 88vh; } } .wl-lightbox-media { flex: 1; background: #000; display: flex; align-items: center; justify-content: center; min-height: 40vh; overflow: hidden; } .wl-lightbox-media img { width: 100%; height: 100%; max-height: 85vh; object-fit: contain; } .wl-lightbox-panel { width: 100%; padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; border-top: 1px solid #1e293b; } @media (min-width: 1024px) { .wl-lightbox-panel { width: 24rem; border-top: none; border-left: 1px solid #1e293b; padding: 2rem; } } .wl-lightbox-title { font-size: 1.4rem; font-weight: 700; color: #fff; margin-top: .5rem; } .wl-lightbox-loc { font-size: .78rem; color: var(--wl-text-muted); margin-top: .3rem; display: flex; align-items: center; gap: .3rem; } .wl-exif-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; font-family: monospace; font-size: .75rem; margin-top: .75rem; } .wl-exif-tile { background: #0f172a; padding: .65rem; border-radius: .7rem; border: 1px solid #1e293b; } .wl-exif-tile.span-2 { grid-column: 1 / -1; } .wl-exif-tile .lbl { font-size: .6rem; color: #64748b; text-transform: uppercase; display: block; } .wl-exif-tile .val { color: #e2e8f0; font-weight: 700; } .wl-exif-tile .val.accent { color: var(--wl-accent-light); } /* ========================================================================= 11. Interactive Travel Tools ========================================================================= */ .wl-tools-header { text-align: center; max-width: 44rem; margin: 0 auto 3rem; } .wl-tools-header .wl-eyebrow, .wl-tools-header .wl-eyebrow-text { justify-content: center; } .wl-tools-header .wl-eyebrow { justify-content: center; } .wl-tools-header p { color: var(--wl-text-muted); font-size: .85rem; margin-top: .75rem; } .wl-tools-tabbar { display: flex; justify-content: center; margin-bottom: 2.5rem; } .wl-tools-tabs { display: flex; padding: .3rem; border-radius: 1rem; background: #0f172a; border: 1px solid #1e293b; max-width: 44rem; width: 100%; flex-wrap: wrap; } .wl-tools-tab { flex: 1 1 auto; min-width: 45%; padding: .7rem 1rem; border-radius: .8rem; font-size: .74rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: .4rem; color: var(--wl-text-muted); background: none; border: none; } @media (min-width: 640px) { .wl-tools-tab { min-width: 0; } } .wl-tools-tab.is-active { background: var(--wl-accent); color: #0f172a; box-shadow: 0 6px 16px -6px rgba(var(--wl-accent-rgb), .3); } .wl-tools-panel { max-width: 56rem; margin: 0 auto; padding: 1.5rem; border-radius: 1.5rem; display: none; flex-direction: column; gap: 1.5rem; } @media (min-width: 640px) { .wl-tools-panel { padding: 2.5rem; } } .wl-tools-panel.is-active { display: flex; } .wl-tools-panel-head { display: flex; flex-direction: column; gap: 1rem; justify-content: space-between; } @media (min-width: 640px) { .wl-tools-panel-head { flex-direction: row; align-items: center; } } .wl-tools-panel-title { font-size: 1.1rem; font-weight: 700; color: #fff; display: flex; align-items: center; gap: .5rem; } .wl-tools-panel-sub { font-size: .74rem; color: var(--wl-text-muted); margin-top: .25rem; } .wl-progress-track { width: 100%; background: #1e293b; height: .6rem; border-radius: 999px; overflow: hidden; } @media (min-width: 640px) { .wl-progress-track { width: 12rem; } } .wl-progress-fill { background: linear-gradient(90deg, var(--wl-accent), var(--wl-accent-dark)); height: 100%; border-radius: 999px; transition: width .5s ease; } .wl-packing-cats { display: flex; gap: .5rem; flex-wrap: wrap; } .wl-packing-cat { padding: .35rem .8rem; border-radius: .6rem; font-size: .72rem; font-weight: 500; background: rgba(30,41,59,.8); color: var(--wl-text-muted); border: none; } .wl-packing-cat.is-active { background: rgba(var(--wl-accent-rgb), .2); color: var(--wl-accent-light); border: 1px solid rgba(var(--wl-accent-rgb), .4); } .wl-packing-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; } @media (min-width: 640px) { .wl-packing-grid { grid-template-columns: 1fr 1fr; } } .wl-packing-item { padding: .85rem; border-radius: .8rem; border: 1px solid #1e293b; background: rgba(15,23,42,.7); display: flex; align-items: flex-start; gap: .6rem; color: var(--wl-text-muted); } .wl-packing-item.is-checked { background: rgba(var(--wl-accent-rgb), .1); border-color: rgba(var(--wl-accent-rgb), .4); color: #e2e8f0; } .wl-packing-item .wl-icon { flex-shrink: 0; margin-top: 2px; color: #475569; } /* The unchecked state has no glyph of its own, so draw the box in CSS — otherwise the checklist renders with no visible affordance at all. */ .wl-packing-icon { flex-shrink: 0; margin-top: 2px; width: 1.05rem; height: 1.05rem; border-radius: .3rem; border: 1.5px solid #475569; display: flex; align-items: center; justify-content: center; transition: border-color .2s ease, background .2s ease; } .wl-packing-icon .wl-icon { width: .8rem; height: .8rem; margin-top: 0; } .wl-packing-item:hover .wl-packing-icon { border-color: rgba(var(--wl-accent-rgb), .6); } .wl-packing-icon[data-state="checked"] { border-color: var(--wl-accent); background: rgba(var(--wl-accent-rgb), .18); } .wl-packing-item.is-checked .wl-icon { color: var(--wl-accent); } .wl-packing-name { font-size: .76rem; font-weight: 500; line-height: 1.5; } .wl-packing-item.is-checked .wl-packing-name { text-decoration: line-through; color: var(--wl-text-muted); } .wl-packing-cat-label { font-size: .62rem; color: rgba(var(--wl-accent-rgb), .8); display: block; margin-top: 2px; } .wl-form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .wl-form-grid-3 { grid-template-columns: repeat(3, 1fr); } } .wl-field label { font-size: .72rem; font-weight: 600; color: #cbd5e1; display: block; margin-bottom: .35rem; } .wl-field select, .wl-field input { width: 100%; background: #0f172a; border: 1px solid #1e293b; border-radius: .7rem; padding: .6rem .85rem; font-size: .76rem; color: #fff; } .wl-plan-output { padding: 1.5rem; border-radius: 1rem; background: rgba(2,6,23,.7); border: 1px solid var(--wl-border-accent); display: none; } .wl-plan-output.is-visible { display: block; } .wl-plan-output-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .wl-plan-copy-btn { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--wl-accent-light); background: #0f172a; padding: .4rem .8rem; border-radius: .6rem; border: 1px solid #1e293b; } .wl-plan-text { font-size: .78rem; color: #cbd5e1; white-space: pre-wrap; line-height: 1.75; font-family: var(--wl-font-body); } .wl-currency-inputs { display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem; border-radius: 1rem; background: rgba(15,23,42,.8); border: 1px solid #1e293b; } @media (min-width: 640px) { .wl-currency-inputs { flex-direction: row; align-items: center; } } .wl-currency-inputs .wl-field { flex: 1; width: 100%; } .wl-currency-amount { font-size: 1.2rem; font-weight: 700; font-family: monospace; color: var(--wl-accent-light); } .wl-currency-note { font-size: .68rem; color: var(--wl-text-dim); } .wl-currency-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 640px) { .wl-currency-grid { grid-template-columns: repeat(3, 1fr); } } .wl-currency-tile { padding: 1rem; border-radius: 1rem; background: rgba(15,23,42,.6); border: 1px solid #1e293b; } .wl-currency-tile .code { font-size: .68rem; font-weight: 600; color: var(--wl-text-muted); } .wl-currency-tile .value { font-size: 1.1rem; font-weight: 700; font-family: monospace; color: #fff; margin-top: .2rem; } .wl-currency-tile .value span { font-size: .7rem; color: var(--wl-accent); font-family: var(--wl-font-body); } .wl-season-rows { display: flex; flex-direction: column; gap: .75rem; } .wl-season-row { padding: 1rem; border-radius: .8rem; background: rgba(15,23,42,.6); border: 1px solid #1e293b; display: flex; flex-direction: column; gap: .5rem; } @media (min-width: 640px) { .wl-season-row { flex-direction: row; align-items: center; justify-content: space-between; } } .wl-season-place { font-size: .9rem; font-weight: 700; color: #fff; } .wl-season-highlight { font-size: .74rem; color: var(--wl-text-muted); font-weight: 300; } .wl-season-best { text-align: right; } .wl-season-best .badge { padding: .3rem .8rem; border-radius: 999px; background: rgba(var(--wl-accent-rgb), .15); color: var(--wl-accent-light); font-weight: 600; font-size: .72rem; border: 1px solid rgba(var(--wl-accent-rgb), .3); } .wl-season-weather { font-size: .65rem; color: var(--wl-text-dim); margin-top: .3rem; } /* ========================================================================= 12. Customizer drawer / Bookmarks drawer / Search modal (shared drawer chrome) ========================================================================= */ .wl-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.65); backdrop-filter: blur(6px); display: none; } .wl-overlay.is-open { display: block; } .wl-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; width: 100%; max-width: 26rem; background: var(--wl-bg); border-left: 1px solid var(--wl-border-accent); box-shadow: -20px 0 60px rgba(0,0,0,.5); padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); } .wl-drawer.is-open { transform: translateX(0); } .wl-drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid #1e293b; } .wl-drawer-title-row { display: flex; align-items: center; gap: .6rem; } .wl-drawer-title { font-size: 1rem; font-weight: 700; color: #fff; } .wl-drawer-subtitle { font-size: .68rem; color: var(--wl-text-muted); } .wl-drawer-close { background: none; border: none; color: var(--wl-text-muted); padding: .3rem; border-radius: 999px; } .wl-drawer-close:hover { background: #1e293b; color: #fff; } .wl-drawer-body { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.25rem 0; overflow-y: auto; flex: 1; } .wl-drawer-footer { padding-top: 1rem; border-top: 1px solid #1e293b; display: flex; flex-direction: column; gap: .6rem; } .wl-field-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--wl-accent); display: flex; align-items: center; gap: .35rem; margin-bottom: .6rem; } .wl-option-list { display: flex; flex-direction: column; gap: .5rem; } .wl-option-btn { width: 100%; padding: .7rem .85rem; border-radius: .75rem; border: 1px solid #1e293b; background: rgba(15,23,42,.6); color: var(--wl-text-muted); font-size: .76rem; font-weight: 500; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .wl-option-btn.is-active { background: rgba(30,41,59,.9); border-color: var(--wl-accent); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.3); } .wl-option-btn .wl-icon.accent { color: var(--wl-accent); } .wl-swatch { width: 1rem; height: 1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); flex-shrink: 0; } .wl-option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .wl-option-grid .wl-option-btn { flex-direction: row; justify-content: flex-start; } .wl-bookmark-list { display: flex; flex-direction: column; gap: .75rem; } .wl-bookmark-item { padding: .75rem; border-radius: 1rem; background: rgba(15,23,42,.7); border: 1px solid #1e293b; display: flex; gap: .75rem; } .wl-bookmark-item img { width: 5rem; height: 5rem; border-radius: .8rem; object-fit: cover; flex-shrink: 0; } .wl-bookmark-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; } .wl-bookmark-title { font-size: .78rem; font-weight: 700; color: #fff; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .wl-bookmark-loc { font-size: .65rem; color: var(--wl-text-muted); display: flex; align-items: center; gap: .25rem; margin-top: .25rem; } .wl-bookmark-remove { color: var(--wl-text-dim); background: none; border: none; padding: .2rem; } .wl-bookmark-remove:hover { color: #fb7185; } .wl-bookmark-empty { text-align: center; padding: 3rem 1rem; color: var(--wl-text-muted); font-size: .78rem; } .wl-bookmark-empty .wl-icon { width: 2rem; height: 2rem; color: #334155; margin: 0 auto 1rem; } .wl-search-modal { position: fixed; inset: 0; z-index: 82; background: rgba(0,0,0,.85); backdrop-filter: blur(16px); display: none; align-items: flex-start; justify-content: center; padding: 5rem 1rem 1rem; } .wl-search-modal.is-open { display: flex; } .wl-search-modal-inner { max-width: 42rem; width: 100%; background: var(--wl-bg-alt); border: 1px solid var(--wl-border-accent); border-radius: 1.5rem; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.6); } .wl-search-input-row { padding: 1.1rem 1.25rem; border-bottom: 1px solid #1e293b; display: flex; align-items: center; gap: .75rem; } .wl-search-input-row .wl-icon { color: var(--wl-accent); flex-shrink: 0; } .wl-search-input-row input { flex: 1; background: none; border: none; color: #fff; font-size: .95rem; } .wl-search-input-row input:focus { outline: none; } .wl-search-body { padding: 1.5rem; max-height: 60vh; overflow-y: auto; } .wl-search-kicker { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; color: var(--wl-accent); font-weight: 700; display: block; margin-bottom: .75rem; } .wl-search-keywords { display: flex; flex-wrap: wrap; gap: .5rem; } .wl-search-result { padding: .75rem; border-radius: 1rem; background: rgba(15,23,42,.6); border: 1px solid #1e293b; display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem; } .wl-search-result img { width: 4rem; height: 4rem; border-radius: .8rem; object-fit: cover; flex-shrink: 0; } .wl-search-result-body { flex: 1; min-width: 0; } .wl-search-result-cat { font-size: .62rem; color: var(--wl-accent); font-weight: 700; } .wl-search-result-title { font-size: .8rem; font-weight: 700; color: #fff; } .wl-search-result-loc { font-size: .7rem; color: var(--wl-text-muted); margin-top: .15rem; } /* ========================================================================= 13. Footer ========================================================================= */ .wl-footer { background: #06080e; border-top: 1px solid rgba(var(--wl-accent-rgb), .15); padding: 4rem 0 3rem; color: var(--wl-text-muted); font-size: .76rem; } .wl-insta-strip { margin-bottom: 3.5rem; } .wl-insta-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--wl-accent); font-weight: 600; } .wl-insta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; } @media (min-width: 640px) { .wl-insta-grid { grid-template-columns: repeat(6, 1fr); } } .wl-insta-tile { position: relative; height: 7rem; border-radius: .8rem; overflow: hidden; border: 1px solid #1e293b; } @media (min-width: 640px) { .wl-insta-tile { height: 9rem; } } .wl-insta-tile img { width: 100%; height: 100%; object-fit: cover; } .wl-footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 3.5rem; } @media (min-width: 768px) { .wl-footer-grid { grid-template-columns: repeat(4, 1fr); } } .wl-footer-brand { display: flex; align-items: center; gap: .5rem; font-family: var(--wl-font-heading); font-weight: 700; font-size: 1.25rem; color: #fff; letter-spacing: .1em; margin-bottom: .75rem; } .wl-footer-social { display: flex; gap: .6rem; margin-top: .75rem; } .wl-footer-social a { padding: .5rem; border-radius: .6rem; background: #0f172a; color: var(--wl-accent); } .wl-footer-heading { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--wl-accent); font-weight: 700; margin-bottom: .9rem; } .wl-footer-links { display: flex; flex-direction: column; gap: .6rem; } .wl-footer-links button, .wl-footer-links a { background: none; border: none; text-align: left; color: var(--wl-text-muted); font-size: .76rem; } .wl-footer-links button:hover, .wl-footer-links a:hover { color: var(--wl-accent-light); } .wl-newsletter-form { display: flex; gap: .4rem; margin-top: .75rem; } .wl-newsletter-form input { flex: 1; background: #0f172a; border: 1px solid #1e293b; border-radius: .7rem; padding: .5rem .75rem; color: #fff; font-size: .74rem; } .wl-newsletter-form button { background: linear-gradient(90deg, var(--wl-accent), var(--wl-accent-dark)); color: #0f172a; font-weight: 700; padding: .5rem .75rem; border-radius: .7rem; border: none; } .wl-newsletter-success { padding: .75rem; border-radius: .8rem; background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); color: #6ee7b7; display: flex; align-items: center; gap: .5rem; } .wl-footer-bottom { padding-top: 2rem; border-top: 1px solid #0f172a; display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: space-between; text-align: center; color: var(--wl-text-dim); font-size: .68rem; } @media (min-width: 640px) { .wl-footer-bottom { flex-direction: row; text-align: left; } } .wl-footer-bottom-links { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; } /* ========================================================================= 14. Particle canvas host + ambient glow ========================================================================= */ .wl-particle-host { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: .6; } .wl-particle-blob { position: absolute; border-radius: 999px; filter: blur(140px); opacity: .22; background: var(--wl-glow-a); } .wl-particle-blob-a { top: -20%; left: -10%; width: 65vw; height: 65vw; animation: wl-drift-a 18s ease-in-out infinite; } .wl-particle-blob-b { top: 40%; right: -15%; width: 55vw; height: 55vw; filter: blur(160px); opacity: .18; background: var(--wl-glow-b); animation: wl-drift-b 22s ease-in-out infinite; } .wl-particle-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at top, transparent 20%, rgba(9,12,19,.3) 60%, rgba(9,12,19,.8) 100%); } #wl-particle-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .88; } main, .wl-header, .wl-footer { position: relative; z-index: 1; } @keyframes wl-drift-a { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(30px,-40px) scale(1.08); } 66% { transform: translate(-20px,20px) scale(.95); } } @keyframes wl-drift-b { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(-40px,30px) scale(.96); } 66% { transform: translate(25px,-25px) scale(1.06); } } @keyframes wl-spin { to { transform: rotate(360deg); } } @keyframes wl-gold-pulse { 0%,100% { opacity: .4; transform: scale(1); } 50% { opacity: .8; transform: scale(1.05); } } @media (prefers-reduced-motion: reduce) { .wl-particle-blob-a, .wl-particle-blob-b, .wl-radar-flag .wl-icon { animation: none !important; } * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ========================================================================= 15. 3D tilt (customizer toggle) ========================================================================= */ html[data-wl-tilt="on"] .wl-card { transition: transform .15s ease-out, box-shadow .3s ease; transform-style: preserve-3d; will-change: transform; } /* ========================================================================= 16. Misc pages: destination archive/single, 404, search, comments ========================================================================= */ .wl-page-hero { padding: 7rem 0 3rem; text-align: center; } .wl-page-hero .wl-heading-xl { margin-top: .5rem; } .wl-dest-single-hero { position: relative; height: 60vh; min-height: 24rem; overflow: hidden; } .wl-dest-single-hero img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); } .wl-dest-single-hero .wl-article-hero-scrim { } .wl-dest-stat-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; } .wl-dest-body { max-width: 56rem; margin: 0 auto; padding: 3rem 1.5rem; } .wl-dest-body p { color: #cbd5e1; font-size: .95rem; line-height: 1.85; font-weight: 300; margin-bottom: 1rem; } .wl-404-wrap { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4rem 1.5rem; } .wl-comments-wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem 4rem; } @media (min-width: 640px) { .wl-comments-wrap { padding: 0 3rem 4rem; } } .wl-comment-form-title { font-size: 1.2rem; font-weight: 700; color: #fff; margin-bottom: 1rem; } .wl-back-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--wl-accent); margin-bottom: 1.5rem; } /* Native WP comment form, styled to match .wl-comment-form */ #commentform { padding: 1.25rem; border-radius: 1.25rem; background: var(--wl-surface); backdrop-filter: blur(12px); border: 1px solid var(--wl-border); display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; } #commentform p { margin: 0; } #commentform input[type="text"], #commentform input[type="email"], #commentform input[type="url"], #commentform textarea { width: 100%; padding: .6rem .85rem; border-radius: .8rem; background: #0f172a; border: 1px solid #1e293b; color: #fff; font-size: .78rem; font-family: inherit; } #commentform textarea { resize: vertical; min-height: 5rem; } #commentform input::placeholder, #commentform textarea::placeholder { color: #64748b; } .comment-form-author, .comment-form-email { display: inline-block; width: calc(50% - .4rem); } .comment-form-author { margin-right: .8rem; } @media (max-width: 480px) { .comment-form-author, .comment-form-email { width: 100%; margin-right: 0; } } .wl-comment-list { display: flex; flex-direction: column; gap: 1rem; list-style: none; margin: 0; padding: 0; } .wl-comments-section { max-width: 64rem; margin: 0 auto; } .screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; } /* ========================================================================= 16. Bilingual UI — language switch + per-language typography ========================================================================= */ /* The switch is two real links; keep it compact enough that adding it to the header action cluster cannot push the row past a 360px viewport. */ .wl-lang-switch { display: inline-flex; align-items: center; gap: .25rem; flex-shrink: 0; padding: .3rem .5rem; border-radius: 999px; background: rgba(30,41,59,.7); border: 1px solid rgba(51,65,85,.6); line-height: 1; } .wl-lang-opt { font-size: .68rem; font-weight: 600; letter-spacing: .06em; color: var(--wl-text-muted); text-decoration: none; padding: .15rem .3rem; border-radius: .4rem; transition: color .2s ease, background .2s ease; white-space: nowrap; } .wl-lang-opt:hover { color: #fff; } .wl-lang-opt.is-active { color: var(--wl-accent-light); background: rgba(var(--wl-accent-rgb), .16); } .wl-lang-sep { font-size: .6rem; color: rgba(148,163,184,.5); } .wl-lang-switch-footer { background: none; border: none; padding: 0; } /* Below 640px the header row cannot hold brand + switch + actions without truncating the wordmark to "WAND…". The switch is mirrored in the mobile drawer (and in the footer), so drop it from the cramped bar instead. */ @media (max-width: 639px) { .wl-lang-switch-header { display: none; } } .wl-mobile-lang-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .75rem; margin-top: .75rem; border-top: 1px solid rgba(30,41,59,.8); } .wl-mobile-lang-label { font-size: .72rem; color: var(--wl-text-muted); } /* The brand block is the flex item that must yield first; flex defaults to min-width:auto, which refuses to shrink and overflows the viewport. */ .wl-brand-text { min-width: 0; display: block; } /* Replaces an when a catalog entry has no thumbnail. An empty src="" would make the browser re-request the page HTML as an image. */ .wl-thumb-placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #111827, #1e293b); border-radius: inherit; } /* -------- Latin typography (default state) -------- */ .wl-lang-en h1, .wl-lang-en h2, .wl-lang-en h3, .wl-lang-en .wl-heading-xl, .wl-lang-en .wl-heading-lg { text-wrap: balance; } .wl-lang-en .wl-card-title, .wl-lang-en .wl-magazine-title, .wl-lang-en .wl-hero-title, .wl-lang-en .wl-article-hero-title, .wl-lang-en .wl-packing-name, .wl-lang-en .wl-season-place, .wl-lang-en .wl-highlight-item span, .wl-lang-en .wl-itinerary-title { overflow-wrap: break-word; word-break: normal; } .wl-lang-en .wl-card-excerpt, .wl-lang-en .wl-subhead, .wl-lang-en .wl-section-text p { text-wrap: pretty; overflow-wrap: break-word; hyphens: auto; } /* -------- CJK typography (Chinese state only) -------- `word-break: keep-all` forbids every CJK break and overflows; `line-break: strict` keeps the correct kinsoku rules while still allowing breaks. Scoped to .wl-lang-zh so it can never touch English typography. */ .wl-lang-zh { line-break: strict; } .wl-lang-zh h1, .wl-lang-zh h2, .wl-lang-zh h3, .wl-lang-zh h4, .wl-lang-zh .wl-heading-xl, .wl-lang-zh .wl-heading-lg, .wl-lang-zh .wl-hero-title, .wl-lang-zh .wl-article-hero-title { line-break: strict; text-wrap: balance; word-break: normal; } .wl-lang-zh p, .wl-lang-zh li, .wl-lang-zh .wl-card-excerpt, .wl-lang-zh .wl-subhead { line-break: strict; word-break: normal; overflow-wrap: break-word; } /* Latin runs embedded in Chinese copy (place names, EXIF, model numbers) still need to be able to wrap rather than push a card open. */ .wl-lang-zh .wl-chip, .wl-lang-zh .wl-chip-sm, .wl-lang-zh .wl-pill, .wl-lang-zh .wl-packing-name, .wl-lang-zh .wl-itinerary-spot { overflow-wrap: break-word; }