/* ========================================================================== * 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 { 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; }