/* ============================================================= Mobile stylesheet — applies only when has the .is-mobile class (set by the UA-detect script in index.html ). Desktop UI is untouched. Designed as a progressive rebuild — each section of the desktop layout is overridden one at a time. Tokens below mirror the existing :root in index.html so this file (and the war-status sub-page) can use them directly. No new tokens. ============================================================= */ :root { --r-xs: 1px; --r-sm: 2px; --r-md: 3px; --r-lg: 5px; --c-bg: #000710; --c-fg: #FFFDFB; --c-accent: #4ea8de; --c-status-yes: #00E03E; --c-status-no: #FF0000; --c-border-subtle: rgba(255, 253, 251, 0.10); /* SEO/AIO intro-paragraph font size on mobile sub-pages. 25% smaller than the news parent text (15px → 11.25px). Reuse across any mobile-only SEO paragraph. */ --seo-font-size: 11.25px; } /* ===== HEADER (top bar) ===== */ /* Header sits flat on the page background — no bar, no shadow, no fixed bg layer. Same --c-bg as blends them into a single surface. */ html.is-mobile .site-header { position: static; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 10px; padding-left: 14px; padding-right: 14px; height: 56px; background: transparent; box-shadow: none; } html.is-mobile body { padding-top: 0; } /* Day badge — keep visual treatment, force mobile-readable size. */ html.is-mobile .war-day-badge { justify-self: start; font-size: 13px; padding: 6px 10px; line-height: 1; box-sizing: border-box; } /* Hide the " of war" suffix on mobile; badge reads just "Day 83". */ html.is-mobile .war-day-suffix { display: none; } /* Hide the invisible mirror badge — its title-centering job is replaced by the grid columns. */ html.is-mobile .war-day-badge.mirror { display: none; } /* Hide the desktop "On this site" dropdown — mobile nav replaces it. */ html.is-mobile .site-info-wrapper { display: none; } /* Hide the pulsing dot inside the h1. */ html.is-mobile .site-header-pulse { display: none; } /* Replace the h1 text content. The desktop title swap JS (.title-text) is suppressed; we render fixed mobile text via ::after. */ html.is-mobile .site-header-title { font-size: 15px; font-weight: 500; color: var(--c-fg); letter-spacing: 0.01em; transform: none; gap: 0; margin: 0; line-height: 1; text-align: center; } html.is-mobile .site-header-title .title-text { display: none; } html.is-mobile .site-header-title::after { content: "Is the Iran war over?"; } /* ===== PM bars (under header) ===== Two clickable bars that show live Polymarket odds and link to the /war-status sub-page. Hidden on desktop. */ .mobile-pm-bars { display: none; } html.is-mobile .mobile-pm-bars { display: flex; flex-direction: column; gap: 10px; /* Bottom padding mirrors the visual gap above bar 1 (badge bottom → first-bar top): 8px wrapper padding + ~15.5px badge-to-header-bottom ≈ 23.5px. trump-statements margin-top is zeroed below to honor it. */ padding: 8px 14px 23.5px; } html.is-mobile .mobile-pm-bar, html.is-mobile .tracker-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; /* Subtle 3D — lit from above. Highlight at top edge, gentle fade to a dark bottom edge. Mockup Option D, reduced ~25%. */ background: linear-gradient( to bottom, rgba(255, 253, 251, 0.09) 0%, rgba(255, 253, 251, 0.022) 35%, rgba(0, 7, 16, 0.19) 100% ); box-shadow: inset 0 1px 0 rgba(255, 253, 251, 0.19); border: 1px solid rgba(255, 253, 251, 0.5); border-radius: var(--r-lg); color: var(--c-fg); text-decoration: none; font-size: 15px; line-height: 1.3; -webkit-tap-highlight-color: var(--c-border-subtle); } html.is-mobile .mobile-pm-pct { font-weight: 600; } html.is-mobile .mobile-pm-chev, html.is-mobile .tracker-bar-chev { font-size: 22px; line-height: 1; flex-shrink: 0; color: var(--c-fg); /* The `›` glyph's optical center sits below its line-box center in Satoshi, so flex align-items: center makes it look low. Nudge up. */ transform: translateY(-2px); } /* Tracker bars — same visual treatment as the PM bars above, just placed below the 3-tile row. Wrapper top-padding mirrors the gap from tiles. */ .tracker-bars { display: none; } html.is-mobile .tracker-bars { display: flex; flex-direction: column; gap: 10px; padding: 23.5px 14px 0; } /* Tighter vertical padding on tracker-bar — the 25px-tall cost badge would otherwise make the bar ~5px taller than the PM bars above. 11px top/bottom + 25px badge = 47px, matching the PM bar height. */ html.is-mobile .tracker-bar { padding: 11px 16px; } /* Right-side cluster: live cost badge + chevron sit together at the right edge while the title text stays anchored at the left. Gap between badge and chevron == bar's right padding (16px), so the chevron sits symmetrically between the badge and the bar's right edge. */ html.is-mobile .tracker-bar-actions { display: inline-flex; align-items: center; gap: 16px; } /* Cost badge — same visual as the Day badge in the header. */ html.is-mobile .tracker-bar-amount { display: inline-block; padding: 6px 10px; background: var(--c-fg); color: var(--c-bg); border-radius: var(--r-sm); font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; } /* The "Is the Iran war over?" h2 section + its two stat-rows are relocated to the /war-status sub-page on mobile. Hide them on the home page. Desktop keeps them in place. JS that updates #pm-pct / #pm-invade-pct still runs harmlessly against the hidden nodes; the visible values on mobile come from the mobile-pm-bars above. */ html.is-mobile #war-status, html.is-mobile .stat-row { display: none; } /* ===== "What did Trump say?" — mobile home preview ===== Hides the section header (h2 + #/X buttons + Show all + Inspect), matches container padding to the PM bars (14px gutter), shows the 3 most recent entries fading toward the bottom, and replaces the "Read more" toggle button with a link to /trump-statements. */ html.is-mobile #trump-statements { width: auto; max-width: none; padding-left: 14px; padding-right: 14px; margin-left: 0; margin-right: 0; /* Inline style on the desktop element sets margin-top via clamp(). Zero it on mobile so the .mobile-pm-bars padding-bottom is the only gap between the second PM bar and the first news entry. */ margin-top: 0 !important; } html.is-mobile #trump-statements .timeline-header { display: none; } /* Show today (1), yesterday (2), 2-days-ago (3); hide 4+. The mask gradient on the timeline-fold creates the fade from full visibility at entry 1-2 to transparent through entry 3. */ html.is-mobile .timeline-fold:not(.fold-open) .entry:nth-child(n+4) { display: none; } /* Per-entry mask: today's entry is fully opaque (no mask). Entry 2 fades from 70% → 30% alpha within its own box. Entry 3 fades from 30% → 0%. Each entry's mask is self-contained, so the fade NEVER shifts when the fold's total height changes, when text length grows, or when the mobile URL bar shows/hides on scroll. No JS needed. */ html.is-mobile .timeline-fold:not(.fold-open) .entry:nth-child(2) { -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.3)); mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.3)); } html.is-mobile .timeline-fold:not(.fold-open) .entry:nth-child(3) { -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent); mask-image: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent); } /* The JS-sized timeline-fade overlay isn't needed on mobile (the mask on the fold itself does the fade). */ html.is-mobile .timeline-fade { display: none; } /* Hide the desktop "Read more" toggle button on mobile; show the mobile-only link instead. */ html.is-mobile .read-more-btn { display: none; } .mobile-read-more { display: none; } html.is-mobile .mobile-read-more { display: inline-flex; align-items: center; justify-content: center; gap: 0.35em; margin: 18px auto 0; padding: 6px 10px; background: var(--c-fg); color: var(--c-bg); border: 1px solid var(--c-fg); border-radius: var(--r-sm); font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none; position: relative; z-index: 3; } /* Entry text sizing on mobile (home + sub-page). Parent text + sources match the PM bar font (15px). Child text + sources scale to preserve the desktop parent:child ratio of 18:15 → 15 × (15/18) = 12.5px. */ html.is-mobile .full-text { font-size: 15px; line-height: 1.45; } html.is-mobile .reply-body { font-size: 12.5px; line-height: 1.45; } /* Scale up the em-based entry internals (parent dot, child dot, today pulse rings, date pill) so they stay visually proportional to the bumped text. Em values inside entries compute from this anchor. */ html.is-mobile .timeline-fold, html.is-mobile .timeline { font-size: 15px; } /* Pull entry dots flush to the 14px gutter — matches the left edge of the mobile PM bars, tracker bars, tiles, and (on the sub-page) the Show all button. */ html.is-mobile .timeline { padding-left: 0; } /* Desktop's .timeline-fold has overflow:hidden (needed for the desktop read-more max-height fade). On mobile we use per-entry CSS masks and never set max-height — and the entry dots' outward pulse ring (a box-shadow that extends past the dot's box) was being clipped by that overflow:hidden, cutting off half of today's pulsing dot. Mobile doesn't need the clip, so allow the pulse to render outside the fold. */ html.is-mobile .timeline-fold { overflow: visible; } /* Counteract the visual "heaviness" the date pill picks up at the larger mobile size — drop weight 500 → 400 to keep it perceptually the same as desktop. */ html.is-mobile .date-pill { font-weight: 400; } /* "Show more" → down-chevron SVG only on mobile. Original text hidden via font-size:0; ::after paints the chevron in the parent's accent color via mask-image + background-color: currentColor. Clicks still fire on .show-more's click handler. */ html.is-mobile .show-more { font-size: 0; line-height: 0; display: inline-flex; align-items: center; vertical-align: middle; } html.is-mobile .show-more::after { content: ''; font-size: 15px; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain; } html.is-mobile .mobile-read-more svg { width: 0.9em; height: 0.9em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* Center the mobile read-more link below the (now-faded) timeline. */ html.is-mobile #trump-statements { text-align: center; } html.is-mobile #trump-statements .timeline-fold, html.is-mobile #trump-statements .timeline { text-align: left; } /* Three icon-tiles row below the news preview. Same border/radius/fill treatment as the PM bars, but vertically rectangular with an icon in the top half and a title in the bottom half. */ .mobile-tiles { display: none; } html.is-mobile .mobile-tiles { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; /* Same gap above as between the second PM bar and the news section. */ padding: 23.5px 14px 0; } html.is-mobile .mobile-tile { /* Equal vertical spacing top → icon, icon → title, title → bottom (14px, matching the PM bar's padding-top). Tile height collapses to fit content. Side padding trimmed 50% (6px → 3px) so the title text has more horizontal room before wrapping. */ display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 3px; /* Frosted glass (preview Option E): subtle white tint, backdrop blur for depth, top highlight + bottom shadow for a raised pill. */ background: rgba(255, 253, 251, 0.05); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 253, 251, 0.18), inset 0 -1px 0 rgba(0, 7, 16, 0.35); border: 1px solid rgba(255, 253, 251, 0.5); border-radius: var(--r-lg); color: var(--c-fg); text-decoration: none; text-align: center; -webkit-tap-highlight-color: var(--c-border-subtle); overflow: hidden; } html.is-mobile .mobile-tile-icon { position: relative; width: 24px; height: 24px; } html.is-mobile .mobile-tile-icon svg { width: 24px; height: 24px; display: block; } /* The pulse-clone is a duplicate of the icon SVG, absolutely-stacked on top of the original, scaled up + faded out on a loop. Visually this mimics the box-shadow ring on the parent timeline dot but follows the icon's actual silhouette. */ html.is-mobile .mobile-tile-icon .mobile-tile-pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); transform-origin: center; pointer-events: none; opacity: 0.5; /* Matches the parent/child dot glow-ring timing (0.75s ease-in-out). */ animation: mobile-tile-pulse 0.75s ease-in-out infinite; } @keyframes mobile-tile-pulse { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; } 100% { transform: translate(-50%, -50%) scale(2.1); opacity: 0; } } html.is-mobile .mobile-tile-title { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; line-height: 1.2; /* 75% smaller left/right padding (was 6px → 1.5px) so labels have more horizontal room before wrapping to 2 lines. */ padding: 0 1.5px; } /* Right chevron next to each tile title — same style as the polymarket bar chevron, sized to the title's font and vertically centered with the text via flex align-items on the title container. */ html.is-mobile .mobile-tile-chev { width: 1.1em; height: 1.1em; margin-left: 0.25em; flex-shrink: 0; opacity: 1; /* Nudge the chevron down to align with the title text's optical midline (capitals are top-heavy; geometric center sits too high). */ transform: translateY(1px) !important; } /* The Strait ships map, oil chart, and Polymarket invasion chart have dedicated mobile sub-pages (/strait, /oil, /invasion) reached via the row-of-three tile buttons. Hide their home-page instances on mobile along with every related sidecar (section h2, Scroll/Drag/Zoom hint bars, day-bar troops chart + its legend/scroller). Desktop home still shows them. */ html.is-mobile #hormuz-status, html.is-mobile #ship-map-box, html.is-mobile #us-attacks, html.is-mobile #strike-map-box, html.is-mobile #gas-prices, html.is-mobile #oil-chart-box, html.is-mobile #pm-chart-box, html.is-mobile .oil-chart-drawer, html.is-mobile .pm-chart-drawer, html.is-mobile #troops-deploy, html.is-mobile .day-bar-legend, html.is-mobile .day-bar-section, /* "How much does the Iran war cost?" section + both ticker blocks + source captions are relocated to /costs on mobile. Scoped to `body >` so the /costs sub-page (which holds these inside #content-host) is unaffected. */ html.is-mobile body > #war-cost, html.is-mobile body > .cost-line, html.is-mobile body > .cost-ticker-wrap, html.is-mobile body > .cost-source { display: none; } /* Footer "this site exists…" paragraph: bump the desktop clamp (which bottoms out at 5px on a narrow viewport) up to a readable mobile size. */ /* "This site exists…" paragraph is relocated to /about on mobile. */ html.is-mobile .powered-by { display: none; } /* Divider below the tracker bars — 2px solid accent-blue line, 75% of viewport width, centered. Padding above/below matches the tile→tracker gap (23.5px) so the line breathes equally between the trackers and the About bar below. */ .mobile-about-divider { display: none; } html.is-mobile .mobile-about-divider { display: block; width: 75%; height: 1px; margin: 23.5px auto; background: var(--c-accent); border: none; border-radius: 999px; } /* The news-section SEO paragraph belongs on the /trump-statements mobile sub-page only, not the mobile home preview. */ html.is-mobile .news-intro, /* The war-status SEO paragraph on the desktop home sits inside a

. On the mobile war-status sub-page it sits as a direct body child, so this selector hides the home placement only. */ html.is-mobile .container > .war-status-intro, /* Chart intro paragraphs only appear on the desktop home page as direct body children; mobile sub-pages re-show them inside #content-host with their own scoped CSS. The `body >` selector matches the home-page placement only, so sub-pages aren't affected. */ html.is-mobile body > .chart-intro { display: none; } /* About bar — visually identical to the .tracker-bar treatment but with centered text + chevron and no cost badge. */ .mobile-about-wrap { display: none; } html.is-mobile .mobile-about-wrap { display: block; padding: 0 14px; } html.is-mobile .mobile-about-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; background: linear-gradient( to bottom, rgba(255, 253, 251, 0.09) 0%, rgba(255, 253, 251, 0.022) 35%, rgba(0, 7, 16, 0.19) 100% ); box-shadow: inset 0 1px 0 rgba(255, 253, 251, 0.19); border: 1px solid rgba(255, 253, 251, 0.5); border-radius: var(--r-lg); color: var(--c-fg); text-decoration: none; font-size: 15px; line-height: 1.3; -webkit-tap-highlight-color: var(--c-border-subtle); } html.is-mobile .mobile-about-chev { font-size: 22px; line-height: 1; flex-shrink: 0; color: var(--c-fg); transform: translateY(-2px); } /* Oil + Polymarket chart SVGs on mobile sub-pages: claim all touch gestures so finger-drags pan/zoom the chart instead of partially scrolling the page or triggering pinch-to-tab-switcher. Without this the chart's passive touchmove handler competes with the browser's native gestures, causing the choppy / jumpy behavior. */ html.is-mobile #oil-chart-svg, html.is-mobile #pm-chart-svg, html.is-mobile #oil-chart-box, html.is-mobile #pm-chart-box { touch-action: none; -ms-touch-action: none; } /* Prevent the document itself from triggering pull-to-refresh / pinch browser-zoom on the mobile chart sub-pages. */ html.is-mobile body { overscroll-behavior: contain; } /* Mobile status badge (right side) — same shape as the Day badge. Default hidden on desktop. */ .mobile-status-badge { display: none; } html.is-mobile .mobile-status-badge { display: inline-block; justify-self: end; padding: 6px 10px; background: var(--c-status-no); border: 1px solid var(--c-status-no); border-radius: var(--r-sm); color: var(--c-fg); font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 13px; font-weight: 500; white-space: nowrap; line-height: 1; user-select: none; -webkit-user-select: none; }