/* ========================================================================== * style.css — Editorial dark theme for an academic knowledge base. * Palette is warm-dark (#0f1115) with a single muted scholarly blue accent. * Headings use a serif for editorial feel; body uses a clean sans. * ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600;1,700&family=B612:ital,wght@0,400;0,700;1,400&family=B612+Mono:wght@400;700&display=swap'); /* --- Design tokens ------------------------------------------------------- */ :root { --bg: #000000; --surface: #0a0a0a; --surface-2: #141414; --border: #1f1f1f; --border-strong: #2e2e2e; --text: #e6e6e6; --text-muted: #a0a6b0; --text-subtle: #6b7180; --accent: #7aa7ff; --accent-hover: #a5c4ff; --accent-quiet: #3f5a8a; --warn: #d4a85a; --success: #7db68a; --code-bg: #0b0d11; --code-fg: #e6e6e6; --content-width: 960px; --font-serif: 'Newsreader', 'Source Serif Pro', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace; --font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif; /* Site-wide H1 — sunset coral, used everywhere h1 appears */ --h1-color: #FF6F61; --h1-color-hover: #FF8F84; --h1-glow: rgba(255, 111, 97, 0.18); } /* --- Base ---------------------------------------------------------------- */ * { box-sizing: border-box; } /* Root font size drives every rem on the site. --pa-fs is the visitor's text-size choice from the 🎨 picker (A A A row); the data-font attribute is set pre-paint in each page's snippet, so there is no reflow flash. Unset = 1 = the historical 16px base, so nothing moves for existing users. */ html { background: var(--bg); font-size: calc(16px * var(--pa-fs, 1)); } :root[data-font="small"] { --pa-fs: 0.9; } :root[data-font="large"] { --pa-fs: 1.15; } body { margin: 0; /* Fluid — fills the whole browser window (owner, 2026-08-02, matching nitra.net's full-width pass; was max-width: 1600px). The large-screen font-size steps below keep the layout proportioned on wide displays. */ max-width: none; padding: 0 40px 60px; font-family: var(--font-sans); font-size: 1rem; line-height: 1.7; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (max-width: 720px) { body { padding: 0 20px 48px; } } /* Large-screen type scale — on a 16" MacBook Pro (1728px logical) and up, every rem-sized element grows with the viewport so the fluid layout reads proportioned instead of stretched. Must keep multiplying by --pa-fs or the visitor's A A A text-size choice would stop working on big screens. */ @media (min-width: 1600px) { html { font-size: calc(18px * var(--pa-fs, 1)); } } @media (min-width: 1920px) { html { font-size: calc(19px * var(--pa-fs, 1)); } } /* --- Typography ---------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: 600; color: var(--text); line-height: 1.25; letter-spacing: -0.01em; margin: 1.8em 0 0.6em; } /* All H1 — Playfair Display in sunset coral. Distinct from body Newsreader serif so page titles read as travel-magazine. */ h1 { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; margin-top: 0.4em; color: var(--h1-color); letter-spacing: -0.005em; transition: color 0.15s ease; } h1:hover { color: var(--h1-color-hover); } /* Primary page title (the one with id="top" used by back-to-top). */ h1#top { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.015em; color: var(--h1-color); text-shadow: 0 0 30px var(--h1-glow); padding-bottom: 0.15em; } h1#top:hover { color: var(--h1-color-hover); } h2 { font-size: 1.55rem; font-weight: 600; border-bottom: 1px solid var(--border); padding-bottom: 0.35em; } h3 { font-size: 1.2rem; font-weight: 600; color: var(--text); } h4 { font-size: 1.02rem; font-weight: 600; color: var(--text-muted); text-transform: none; } p { color: var(--text); margin: 0 0 1.1em; } ul, ol { color: var(--text); margin: 0 0 1.2em 0; padding-left: 1.4em; } li { margin-bottom: 0.45em; color: var(--text); } strong { color: var(--text); font-weight: 600; } em { color: var(--text-muted); font-style: italic; } blockquote { margin: 1.5em 0; padding: 0.6em 1.2em; border-left: 3px solid var(--accent-quiet); background: var(--surface); color: var(--text-muted); font-style: italic; } hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; } /* --- Links --------------------------------------------------------------- */ a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease, color 0.15s ease; } a:hover { color: var(--accent-hover); border-bottom-color: var(--accent-hover); background: transparent; } /* --- Code ---------------------------------------------------------------- */ code { font-family: var(--font-mono); font-size: 0.9em; background: var(--code-bg); color: var(--code-fg); padding: 0.12em 0.4em; border-radius: 3px; border: 1px solid var(--border); } pre { background: var(--code-bg); color: var(--code-fg); padding: 1em 1.2em; border-radius: 6px; border: 1px solid var(--border); overflow-x: auto; line-height: 1.55; font-family: var(--font-mono); font-size: 0.88rem; margin: 1.2em 0; } pre code { background: transparent; border: 0; padding: 0; } /* Prism code block sizing override — higher specificity than theme CSS */ body pre[class*="language-"] { font-size: 0.95rem; line-height: 1.5; font-family: var(--font-mono); } body code[class*="language-"] { font-size: 0.8rem; font-family: var(--font-mono); } body pre[class*="language-"] { padding: 0.9em 1.1em; border-radius: 6px; margin: 1.2em 0; } /* --- Tables -------------------------------------------------------------- */ table { border-collapse: collapse; width: 100%; margin: 1.4em 0; font-size: 0.95rem; } th, td { text-align: left; padding: 10px 14px; border: 1px solid var(--border); vertical-align: top; } th { background: var(--surface-2); color: var(--text); font-weight: 600; font-family: var(--font-sans); letter-spacing: 0.01em; } td { background: var(--surface); color: var(--text); } tr:hover td { background: var(--surface-2); } /* Legacy class aliases used across content pages */ .table, .comparison-table { width: 100%; border-collapse: collapse; margin: 1.4em 0; background: var(--surface); } .table th, .comparison-table th { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); padding: 10px 14px; } .table td, .comparison-table td { background: var(--surface); color: var(--text); border: 1px solid var(--border); padding: 10px 14px; } .table tr:hover td, .comparison-table tr:hover td { background: var(--surface-2); } /* --- Profile / hero blocks (homepage) ------------------------------------ */ .profile-photo { border-radius: 4px; border: 1px solid var(--border); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); } .hero { margin: 2.4em 0 2.2em; padding: 0; } .hero-title { font-family: var(--font-display); font-size: 2.8rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 0.15em; color: var(--h1-color); text-shadow: 0 0 30px var(--h1-glow); } .hero-title:hover { color: var(--h1-color-hover); } .hero-subtitle { font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; color: var(--text-muted); margin: 0 0 1.4em; font-weight: 400; } .hero-meta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size: 0.95rem; color: var(--text-muted); margin: 0; padding: 0; } .hero-meta dt { font-weight: 600; color: var(--text); font-variant: small-caps; letter-spacing: 0.04em; font-size: 0.85rem; padding-top: 3px; } .hero-meta dd { margin: 0; color: var(--text); } /* --- Document Intelligence banner (homepage) ----------------------------- Size and position (max-width, margin) are set inline in index.html so they can be tweaked without touching CSS or running cache-bust. ------------------------------------------------------------------------ */ .doc-intel-banner { display: block; width: 100%; border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; background: var(--surface); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .doc-intel-banner:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(122, 167, 255, 0.18); transform: translateY(-1px); } .doc-intel-banner img { display: block; width: 100%; height: auto; } /* --- Search input (kept functional, restyled) ---------------------------- */ .search-box { margin-bottom: 24px; } input[type="text"] { width: 100%; max-width: 720px; height: 44px; padding: 8px 14px; /* iOS Safari zooms the viewport when a focused field renders below 16px. The Small text size can push fields under that, so floor them — the zoom-jump is more disruptive than the pixel of text it would save. */ font-size: max(16px, 1rem); font-family: var(--font-sans); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; } input[type="text"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(122, 167, 255, 0.15); } input[type="submit"] { height: 44px; padding: 0 22px; font-size: 0.95rem; font-family: var(--font-sans); font-weight: 500; background: var(--accent-quiet); color: var(--text); border: 1px solid var(--accent-quiet); border-radius: 4px; cursor: pointer; margin-left: 6px; } input[type="submit"]:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); } /* --- Footer -------------------------------------------------------------- */ .footer { text-align: center; margin-top: 4em; padding: 1.4em 0 0.6em; border-top: 1px solid var(--border); color: var(--text-subtle); font-size: 0.82rem; background: transparent; font-weight: 400; } .footer p { margin: 3px 0; color: var(--text-subtle); } /* --- Q&A blocks (used on some pages) ------------------------------------- */ .question { font-weight: 600; color: var(--accent); } .answer { margin-bottom: 1.2em; color: var(--text); } /* --- Tagline / emphasis styles preserved from prior design --------------- */ .tagline { color: var(--warn); font-size: 1.15rem; font-family: var(--font-serif); font-style: italic; } .expertise-area { margin-bottom: 1.8em; padding: 1.1em 1.3em; background: var(--surface); border-left: 3px solid var(--accent-quiet); border-radius: 3px; } .expertise-area h3 { margin-top: 0; } .expertise-area p { margin-bottom: 0.8em; line-height: 1.7; } .experience-block { margin-bottom: 1.5em; padding: 1.1em 1.3em; background: var(--surface); border-left: 3px solid var(--warn); border-radius: 3px; } .experience-block h3 { margin-top: 0; margin-bottom: 0.5em; } .tech-category { margin-bottom: 1.2em; padding: 0.8em 1.1em; background: var(--surface); border-left: 3px solid var(--success); border-radius: 3px; } .tech-category h4 { margin-top: 0; margin-bottom: 0.45em; } .tech-category p { margin: 0; color: var(--text); } .education-item { margin-bottom: 1.6em; padding: 1.1em 1.3em; background: var(--surface); border-left: 3px solid var(--accent); border-radius: 3px; } .education-item h3 { margin-top: 0; margin-bottom: 0.3em; color: var(--text); } .education-item p { margin: 0.3em 0; line-height: 1.6; } .education-item strong { color: var(--warn); font-weight: 600; } /* --- Counter / video helpers kept intact --------------------------------- */ .counter-container { display: flex; justify-content: center; align-items: center; height: 240px; margin-top: 0; background: var(--bg); color: var(--text); } .video-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; } .video-item { display: flex; flex-direction: column; } .video-item img { max-width: 100%; height: auto; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55); display: block; } .video-item a { text-decoration: none; color: var(--accent); font-weight: 500; } .video-item a:hover { border-bottom-color: var(--accent-hover); } .video-media { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; border-radius: 6px; border: 1px solid var(--border); } .video-media img, .video-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; } .video-description { margin: 1.2em 0; font-size: 0.9rem; color: var(--text-muted); } /* --- Images -------------------------------------------------------------- */ img { max-width: 100%; height: auto; border-radius: 4px; } img.raw { border-radius: 0; } /* --- Page hero (single feature image at top of a destination page) ------- */ .page-hero { margin: 0.6em auto 2em; max-width: 100%; /* a lonely hero image spans the full page width (owner, 2026-07-22) */ text-align: center; } .page-hero img { width: 100%; border-radius: 8px; border: 1px solid var(--border); box-shadow: 0 12px 38px rgba(0, 0, 0, 0.55); display: block; } .page-hero figcaption { margin-top: 0.65em; font-size: 0.9rem; color: var(--text-muted); font-style: italic; } /* --- Poster grid (2-up Visual Guides on destination pages) --------------- */ .poster-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin: 1.4em 0 2.2em; align-items: start; } .poster-grid .page-hero { max-width: 100%; margin: 0; } @media (max-width: 640px) { .poster-grid { grid-template-columns: 1fr; gap: 16px; } } /* --- Poster detail page (single poster, click to expand) ----------------- */ .poster-figure { margin: 0.6em 0 1.6em; max-width: none; text-align: center; } .poster-figure img { width: 100%; border-radius: 8px; border: 1px solid var(--border); box-shadow: 0 12px 38px rgba(0, 0, 0, 0.55); display: block; cursor: zoom-in; } .poster-figure figcaption { margin-top: 0.65em; font-size: 0.9rem; color: var(--text-muted); font-style: italic; } /* --- Featured Videos (YouTube grid, myhealthcare-style) ------------------ */ /* Fixed 4-across grid: 16 videos render as 4 columns x 4 rows on desktop, stepping down to 2-up on tablet and 1-up on mobile. */ .video-container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 20px 0 8px; } @media screen and (max-width: 1000px) { .video-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 600px) { .video-container { grid-template-columns: 1fr; } } .video-item { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .video-item:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); } .video-media { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; cursor: pointer; } .video-media img, .video-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; } .video-media[data-video-id]:hover img { opacity: 0.82; } .video-description { margin: 0; padding: 11px 14px; font-size: 0.85rem; color: var(--text-muted); line-height: 1.45; } #featured-playlist h3 { margin-bottom: 6px; } #playlist-play-all { background: var(--accent); color: #06122b; border: 0; border-radius: 6px; padding: 12px 24px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.2s ease; } #playlist-play-all:hover { background: var(--accent-hover); } /* --- Photo grid (responsive 3-up gallery for destination sections) ------- */ .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 1.4em 0 2.2em; } .photo-grid figure { margin: 0; display: flex; flex-direction: column; } .photo-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); display: block; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .photo-grid figure:hover img { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); } .photo-grid figcaption { margin-top: 0.5em; font-size: 0.85rem; color: var(--text-muted); line-height: 1.45; } @media (max-width: 900px) { .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } @media (max-width: 540px) { .photo-grid { grid-template-columns: 1fr; gap: 14px; } } /* --- Utility ------------------------------------------------------------- */ .green-text { color: var(--success); } /* --- 2026-04-25: Mobile responsive additions ----------------------------- */ @media (max-width: 768px) { /* Phone base: 15px, still multiplied by the visitor's text-size choice. */ html { font-size: calc(15px * var(--pa-fs, 1)); } /* Reduce body left/right padding for phones */ body { padding: 0 16px 48px; line-height: 1.6; } /* Headings: scale down so they fit on narrow viewports */ h1, .hero-title { font-size: 1.6rem !important; line-height: 1.2; } h2 { font-size: 1.25rem; } h3 { font-size: 1.08rem; } .hero-subtitle { font-size: 1rem; } /* Hero homepage table: stack image above text. Targets the inline-styled s inside the hero . */ .hero table, .hero table tr, .hero table tbody { display: block; width: 100% !important; } .hero table td { display: block !important; width: 100% !important; padding: 0 0 1em 0 !important; text-align: left; } .hero table td img.profile-photo { width: 160px !important; height: auto; } /* Tables: allow horizontal scrolling rather than blowing out the layout */ table, .table, .comparison-table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 0.88rem; } th, td, .table th, .table td, .comparison-table th, .comparison-table td { padding: 8px 10px; } /* Code blocks: keep horizontal scroll and shrink slightly */ pre, body pre[class*="language-"] { font-size: 0.78rem; padding: 0.7em 0.85em; overflow-x: auto; word-wrap: break-word; } body code[class*="language-"] { font-size: 0.78rem; } code { word-break: break-word; } /* Inline-styled fixed-width

(e.g.

) — scale to viewport */ hr[width], hr[width="1100"] { width: 100% !important; max-width: 100% !important; } /* Images never overflow */ img { max-width: 100%; height: auto; } /* Hero meta: stack labels above values for small widths */ .hero-meta { grid-template-columns: 1fr; gap: 2px 0; } .hero-meta dt { padding-top: 8px; } /* TOC nav blocks (inline-styled) — tighten padding */ nav[aria-label="Table of contents"] { padding: 0.8em 1em !important; font-size: 0.92rem; } /* Aggressive override: any element using inline width:1100 / wide fixed widths */ [style*="width: 1100"], [style*="width:1100"] { width: 100% !important; max-width: 100% !important; } /* Aggressive override: large inline left padding on hero

*/ .hero table td[style*="padding: 0 0 0 60px"] { padding: 1em 0 0 0 !important; } } /* ========================================================================== * Connections bar — horizontal pill-nav for related pages * ========================================================================== */ .connections-bar { margin: 1.2em 0 2em; padding: 12px 16px; background: var(--surface); border-left: 3px solid var(--accent); border-radius: 4px; } .connections-bar .connections-label { font-weight: 600; color: var(--accent); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.06em; margin-right: 10px; } .connections-bar a { display: inline-block; padding: 4px 12px; margin: 3px 4px 3px 0; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 16px; color: var(--text) !important; text-decoration: none; font-size: 0.9em; white-space: nowrap; transition: all 0.2s ease; } .connections-bar a:hover { background: var(--bg); color: var(--accent-hover) !important; border-color: var(--accent); } /* ========================================================================== * Table of Contents — 3-column newspaper-flow layout * ========================================================================== */ ol.toc-grid, ul.toc-grid { display: block; column-count: 3; column-gap: 40px; padding-left: 1.6em; margin: 0 0 1.8em 0; } ol.toc-grid li, ul.toc-grid li { break-inside: avoid; margin: 0 0 8px 0; padding-left: 4px; line-height: 1.45; } @media (max-width: 900px) { ol.toc-grid, ul.toc-grid { column-count: 2; } } @media (max-width: 500px) { ol.toc-grid, ul.toc-grid { column-count: 1; } } /* ========================================================================== * Deep-dive cards — 3-across grid for "popular tourist destinations" * ========================================================================== */ .deep-dive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 1.4em 0 2.4em; } .deep-dive-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--h1-color); border-radius: 6px; padding: 18px 20px 16px; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; text-decoration: none; } .deep-dive-card:hover { transform: translateY(-3px); border-color: var(--border-strong); border-left-color: var(--h1-color-hover); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); background: var(--surface-2); } .deep-dive-card .card-eyebrow { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px; } .deep-dive-card h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--h1-color); margin: 0 0 8px; line-height: 1.2; border-bottom: 0; padding-bottom: 0; } .deep-dive-card:hover h3 { color: var(--h1-color-hover); } .deep-dive-card p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; margin: 0 0 12px; } .deep-dive-card .card-cta { margin-top: auto; color: var(--accent); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em; } .deep-dive-card:hover .card-cta { color: var(--accent-hover); } @media (max-width: 900px) { .deep-dive-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } } @media (max-width: 560px) { .deep-dive-grid { grid-template-columns: 1fr; gap: 12px; } .deep-dive-card { padding: 14px 16px 12px; } } @media (max-width: 480px) { html { font-size: calc(14.5px * var(--pa-fs, 1)); } body { padding: 0 10px 40px; } h1, .hero-title { font-size: 1.4rem !important; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; } .hero-subtitle { font-size: 0.95rem; } pre, body pre[class*="language-"] { font-size: 0.72rem; padding: 0.55em 0.7em; } body code[class*="language-"] { font-size: 0.72rem; } th, td, .table th, .table td, .comparison-table th, .comparison-table td { padding: 6px 8px; font-size: 0.82rem; } nav[aria-label="Table of contents"] { padding: 0.65em 0.8em !important; font-size: 0.88rem; } nav[aria-label="Table of contents"] ol { padding-left: 1.1em; } .expertise-area, .experience-block, .tech-category, .education-item { padding: 0.85em 0.95em; } .hero table td img.profile-photo { width: 130px !important; } } /* Lightbox */ .photo-grid figure img { cursor: zoom-in; } .lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; } .lightbox img { max-width: 95vw; max-height: 95vh; display: block; } /* ===== Hotels city pages (moved from per-page inline styles, 2026-07-21) ===== */ /* Shared hotel-page components (same block on every /Hotels/ city page) */ .hotel-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--h1-color); border-radius: 6px; padding: 18px 22px 14px; margin: 0 0 18px; } .hotel-card h3 { font-family: var(--font-display); font-size: 1.3rem; color: var(--h1-color); margin: 0 0 2px; border-bottom: 0; } .hotel-card h3 .rank { color: var(--text-subtle); font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; margin-right: 6px; } .hotel-meta { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 10px; } .hotel-meta strong { color: var(--warn); font-weight: 600; } .badges { margin: 0 0 10px; } .badge { display: inline-block; padding: 2px 10px; margin: 2px 6px 2px 0; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-2); color: var(--text-muted); font-size: 0.75rem; letter-spacing: 0.03em; } .badge.luxe { border-color: var(--warn); color: var(--warn); } .hotel-card p { margin: 0 0 0.8em; color: var(--text); font-size: 0.97rem; } .signature { color: var(--text-muted); font-size: 0.9rem; font-style: italic; margin: 0 0 4px; } .signature strong { color: var(--accent); font-style: normal; } /* Nightly-rate bar chart */ .rate-chart { margin: 1.2em 0 2em; } .rate-row { display: grid; grid-template-columns: minmax(150px, 240px) 1fr 70px; gap: 10px; align-items: center; margin-bottom: 7px; } .rate-row a { color: var(--text); font-size: 0.88rem; border-bottom: 0; } .rate-row a:hover { color: var(--accent-hover); } .rate-track { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; height: 16px; overflow: hidden; } .rate-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-quiet), var(--h1-color)); border-radius: 3px; } .rate-val { color: var(--warn); font-size: 0.85rem; font-weight: 600; text-align: right; } .chart-note, .rate-note { color: var(--text-subtle); font-size: 0.8rem; } /* When-to-go season strip */ .season-strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin: 1em 0 0.5em; } .season-strip .m { text-align: center; padding: 7px 2px; border-radius: 4px; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text); border: 1px solid var(--border); background: var(--surface-2); cursor: default; } .m.best { background: rgba(80, 180, 120, 0.30); border-color: rgba(80, 180, 120, 0.55); } .m.wet { background: rgba(90, 140, 220, 0.26); border-color: rgba(90, 140, 220, 0.5); } .m.hot { background: rgba(220, 140, 70, 0.28); border-color: rgba(220, 140, 70, 0.5); } .season-legend { color: var(--text-muted); font-size: 0.8rem; margin: 0 0 1.6em; } .season-legend .k { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin: 0 4px 0 12px; vertical-align: middle; } .k.best { background: rgba(80, 180, 120, 0.5); } .k.fine { background: var(--surface-2); border: 1px solid var(--border); } .k.hot { background: rgba(220, 140, 70, 0.5); } .k.wet { background: rgba(90, 140, 220, 0.5); } @media (max-width: 640px) { .rate-row { grid-template-columns: 1fr; gap: 2px; margin-bottom: 12px; } .rate-val { text-align: left; } .season-strip { grid-template-columns: repeat(6, 1fr); } } /* ===== Stay-by-budget grid (2026-08-10) =============================== */ /* Four tier boxes horizontally, mirroring the Featured Videos grid geometry (.video-container): 4-up desktop -> 2-up tablet -> 1-up mobile, same 18px gutter, same hover lift. Cards carry the site's 135deg gradient treatment, tinted per tier. */ .budget-grid, .find-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 20px 0 8px; } @media screen and (max-width: 1000px) { .budget-grid, .find-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 600px) { .budget-grid, .find-grid { grid-template-columns: 1fr; } } .budget-box { display: flex; flex-direction: column; /* Two-layer 135deg wash, same visual language as the destination cards — but built from theme tokens, not fixed hex, so the four light themes (soft-linen, calm-sky, warm-sand, sage-wellness) stay readable. */ background: linear-gradient(135deg, rgba(120, 167, 255, 0.18), rgba(0, 0, 0, 0)), linear-gradient(135deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .budget-box:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); } /* Per-tier tint: only the translucent top-left wash changes, so every tier inherits whatever base the active theme provides. */ .budget-box.tier-1 { background: linear-gradient(135deg, rgba(80, 180, 120, 0.22), rgba(0, 0, 0, 0)), linear-gradient(135deg, var(--surface-2), var(--surface)); } .budget-box.tier-2 { background: linear-gradient(135deg, rgba(120, 167, 255, 0.20), rgba(0, 0, 0, 0)), linear-gradient(135deg, var(--surface-2), var(--surface)); } .budget-box.tier-3 { background: linear-gradient(135deg, rgba(186, 140, 255, 0.20), rgba(0, 0, 0, 0)), linear-gradient(135deg, var(--surface-2), var(--surface)); } .budget-box.tier-4 { background: linear-gradient(135deg, rgba(233, 181, 92, 0.22), rgba(0, 0, 0, 0)), linear-gradient(135deg, var(--surface-2), var(--surface)); } .budget-box h3 { font-family: var(--font-display); font-size: 1.12rem; color: var(--h1-color); margin: 0 0 2px; border-bottom: 0; } .budget-band { display: block; margin: 0 0 10px; color: var(--warn); font-size: 0.9rem; font-weight: 600; } .budget-box ul { list-style: none; margin: 0 0 12px; padding: 0; flex: 1 1 auto; } .budget-box li { margin: 0 0 9px; color: var(--text); font-size: 0.88rem; line-height: 1.45; } .budget-box li strong { color: var(--text); font-weight: 600; } .budget-box li span { display: block; color: var(--text-muted); font-size: 0.82rem; line-height: 1.4; } .budget-best { margin: 0; padding-top: 10px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.8rem; line-height: 1.4; } .budget-best strong { color: var(--accent); font-weight: 600; } /* --- Find-a-stay directory (same gradient card, country -> city links) --- */ .find-box { display: flex; flex-direction: column; background: linear-gradient(135deg, rgba(120, 167, 255, 0.16), rgba(0, 0, 0, 0)), linear-gradient(135deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .find-box:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); } .find-country { margin: 10px 0 0; font-family: var(--font-display); font-size: 1.02rem; color: var(--h1-color); border-bottom: 0; } .find-country:first-child { margin-top: 0; } .find-box ul { list-style: none; margin: 5px 0 0; padding: 0; } .find-box li { margin: 0 0 5px; font-size: 0.88rem; line-height: 1.4; } .find-box li a { border-bottom: 1px solid transparent; } .find-box li .n { color: var(--text-subtle); font-size: 0.78rem; margin-left: 5px; } /* --------------------------------------------------------------------------- Related guides ("More in ") — poster detail pages. Added 2026-08-10. The 425 topic pages were dead ends: their only links were back to the parent city guide, so 55% of the sitemap had no lateral path and a reader finishing one guide had nowhere to go. Shares the .budget-grid / .find-grid geometry so the site keeps one grid language, and is built from theme tokens rather than fixed hex so the light themes stay readable. --------------------------------------------------------------------------- */ .related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 14px; } @media screen and (max-width: 1000px) { .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 600px) { .related-grid { grid-template-columns: 1fr; } } .related-card { display: block; background: linear-gradient(135deg, rgba(120, 167, 255, 0.14), rgba(0, 0, 0, 0)), linear-gradient(135deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: 8px; padding: 13px 16px; text-decoration: none; color: inherit; font-weight: 600; line-height: 1.4; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .related-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); text-decoration: none; } .related-links { margin: 4px 0 8px; line-height: 2; } .related-links a { font-weight: 600; } .related-links span { opacity: 0.45; padding: 0 8px; } /* --- Page wallpaper (2026-08-30, owner). Opt-in per page: put data-wallpaper on and set --pa-wallpaper on :root. Introduced on /news/ and rolled out only where it clearly helps -- see CLAUDE.md for the rules it must pass. It hangs off html::before, not body::before, because style.css sets a background on BOTH html and body; body's is not propagated to the canvas, so it painted straight over a body::before at z-index:-1 and the first attempt rendered nothing at all. body is made transparent on wallpaper pages so the image shows through, and the theme colour still comes from html. The 3px blur matters more than the opacity: it removes the fine detail that type has to compete with, so the image can stay readable as a scene while text stays comfortably legible (measured 11.7:1 on flightdeck). Tables are safe on top of it because td/th already carry their own --surface ground. */ body[data-wallpaper] { background: transparent; } html:has(body[data-wallpaper])::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--pa-wallpaper, none); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.18; filter: blur(3px); transform: scale(1.03); /* hides the blur's soft edge */ } /* The four light themes take it fainter: dark photo detail under dark body text is what actually harms legibility. */ :root[data-theme="warm-sand"]:has(body[data-wallpaper])::before, :root[data-theme="calm-sky"]:has(body[data-wallpaper])::before, :root[data-theme="sage-wellness"]:has(body[data-wallpaper])::before, :root[data-theme="soft-linen"]:has(body[data-wallpaper])::before { opacity: 0.11; } /* On a phone a cover-scaled 16:9 photo crops to almost nothing useful and only costs bandwidth on the connection least able to spare it. */ @media (max-width: 640px) { html:has(body[data-wallpaper])::before { display: none; } } @media (prefers-reduced-motion: reduce) { html:has(body[data-wallpaper])::before { background-attachment: scroll; } } /* --- Departure surfaces: reclaim the breadcrumb strip, and carry the hub link (2026-08-30, owner). A board wants every vertical pixel it can get, so the breadcrumb is hidden on the five pages that carry one -- the homepage and /lax/ /bkk/ /tpe/ /hnd/. It is worth ~45px: .breadcrumb is `margin: 12px 0 18px` plus its own line. Scoped with :has(.dep-strip) so ONLY board pages lose it. Every other breadcrumb on the site is untouched, and a new board page inherits this with no edit. The BreadcrumbList JSON-LD that 9-seo-meta.py injects is unaffected, so the trail is still published to search engines -- only the on-screen strip goes. .dep-more is the hub chip. It was defined inline on the homepage only; it lives here now so all five boards share one definition. */ html:has(.dep-strip) #breadcrumb, /* /airlines/ joined this set on 2026-08-30: it carries the pinned switcher but has no .dep-strip of its own, and with two bars already pinned above it the breadcrumb was a third row of navigation saying less than either. */ html:has(.board-nav) #breadcrumb { display: none; } .dep-more { font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; font-size: .72rem; letter-spacing: .1em; color: #FFB703; text-decoration: none; white-space: nowrap; border: 1px solid rgba(255, 183, 3, .35); border-radius: 6px; padding: 4px 8px; } .dep-more:hover { color: #FF8A50; border-color: #FF8A50; } /* ── BOARD SWITCHER (owner 2026-08-30) ───────────────────────────────────── "add on the top of every departure table the exact same link as on the mega menu and keep them always there even when user is scrolling up and down". STICKY, and position:fixed was TRIED AND REVERTED on 2026-08-30 at the owner's request ("it does not work"). Do not re-attempt it without solving the problem below. Fixed takes the strip out of the document flow and pins it to the VIEWPORT, which puts it over the site menu. Offsetting the body by the strip height moves the page down, but the menu is full-bleed — .navbar runs width:calc(100% + 80px) with margin-left:-40px — while a fixed element sits against the viewport, not the body box. The two no longer share a coordinate system, so the strip and the navbar stop lining up, and every page gains permanent chrome above a menu that was already there. Sticky keeps the strip in flow: it sits inside the board where it belongs, shares the body's coordinate system, and pins to the top the moment it gets there. That is the behaviour asked for originally — "always there even when user is scrolling" — without the layout cost. Nine links do not fit on a phone, so the strip scrolls sideways rather than wrapping to three rows and eating the board's vertical space. overflow-x on the sticky element ITSELF is fine; only an ancestor's overflow breaks it. Colours are fixed dark, not theme tokens: .dep-strip keeps a dark ground under every theme, so a themed switcher would go invisible on the light ones — the same trap that made the homepage h2 titles use --nav-text. */ .board-nav{ position: sticky; top: 0; z-index: 40; display: flex; gap: .3rem; align-items: center; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; margin: 0 0 12px; padding: .4rem .45rem; background: #05141F; border: 1px solid rgba(255,183,3,.22); border-radius: 8px; box-shadow: 0 6px 14px rgba(0,0,0,.45); } .board-nav a{ flex: 0 0 auto; display: flex; align-items: center; min-height: 44px; /* mobile tap target */ padding: 0 .7rem; border-radius: 6px; /* EXACTLY the mega menu's typography (owner 2026-08-30): the family from .navbar and the size/weight from its dropdown links, so the switcher reads as part of the same navigation rather than as board furniture. Do not "improve" this to the mono stack the board itself uses. */ font-family: 'Segoe UI Historic', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.84rem; font-weight: 500; white-space: nowrap; text-decoration: none; color: rgba(233,223,200,.78); border: 1px solid transparent; } .board-nav a:hover, .board-nav a:focus-visible{ color: #FFB703; background: rgba(255,183,3,.08); border-color: rgba(255,183,3,.35); } .board-nav a[aria-current="page"]{ color: #071A2E; background: #FFB703; font-weight: 700; border-color: #FFB703; } .board-nav a[aria-current="page"]:hover{ color:#071A2E; } @media (max-width: 700px){ .board-nav a{ font-size: 0.8rem; padding: 0 .55rem; } } @media (prefers-reduced-motion: no-preference){ .board-nav{ scroll-behavior: smooth; } } /* ── PINNED HEADER ON BOARD PAGES ONLY (owner 2026-08-30) ────────────────── The switcher alone could not be fixed: the site menu already occupies the top of the screen, so a fixed switcher covered it, and offsetting the body made the two stop lining up because .navbar is full-bleed (width:100%+80px, margin-left:-40px) while a fixed element measures against the VIEWPORT. The fix is to pin BOTH, as one stack: menu on top, switcher directly under it, neither ever moving. Everything below is scoped with html:has(.board-nav), so ONLY the ten board surfaces are affected and the other ~1,100 pages are untouched. ⚠ --pa-menu-h is measured at runtime, not hardcoded. The navbar has breakpoints at 720/768/480px and the visitor can change the text size, so any fixed number would be wrong for someone. The board pages set the variable from the real element; the value here is only a first-paint fallback. */ /* First-paint fallbacks only — both are measured at runtime. 66px is the strip's real height (44px tap target + padding + border + the gap the flex row adds), confirmed by probing the rendered page rather than computed from the box model, which under-counted it by 8px. */ html:has(.board-nav){ --pa-menu-h: 102px; --board-nav-h: 66px; } html:has(.board-nav) #menu{ position: fixed; top: 0; left: 0; right: 0; z-index: 9999; } /* Neutralise the full-bleed trick: it compensates for the BODY's padding, but a fixed #menu already spans the viewport, so leaving it on would overflow 80px to the right. The navbar's own 0 40px padding still gives the inset. */ html:has(.board-nav) #menu .navbar{ width: 100%; margin-left: 0; } html:has(.board-nav) .board-nav{ position: fixed; top: var(--pa-menu-h, 102px); left: 0; right: 0; z-index: 9998; /* under the menu, so dropdowns open over it */ margin: 0; border: 0; border-bottom: 1px solid rgba(255,183,3,.28); border-radius: 0; padding: .35rem .6rem; box-shadow: 0 4px 12px rgba(0,0,0,.5); } /* ⚠ !important is REQUIRED here, and is not laziness. navigation.css line 13 carries `body { padding-top: 0 !important; }` to close the gap above the navbar. Without matching it this rule is simply ignored — measured: the offset computed to 0px while both bars rendered fixed, so the board's column headers sat underneath them. Specificity alone cannot win against !important; only !important plus higher specificity can, which this has (html + :has(.board-nav) + body). Scoped to board pages, so the navbar rule still governs the other ~1,100 pages. */ html:has(.board-nav) body{ padding-top: calc(var(--pa-menu-h, 56px) + var(--board-nav-h, 66px)) !important; }