/* ============================================================ layout.css — container, header, category bar, breadcrumb, footer Loaded on every page. ============================================================ */ /* ------------------------------------------------------------ AD SLOTS — GTM-managed (no hardcoded AdSense) CLS-fix pattern. The inline-flow slots (top, bottom, inline) now permanently reserve their min-height — the `:empty { display:none }` collapse was removed on those three because it was the root cause of the layout jump: slots rendered as 0-height before AdSense fired, then snapped to min-height when the iframe arrived. With the rules below the reservation is present from first paint, so the iframe slots into already-reserved space and no shift occurs. The sidebar slot KEEPS its `:empty { display:none }` because a 600px empty reservation is too tall a UX cost when no ad fills. Selectors: .ad-slot-top, .ad-slot-bottom — leaderboard-style placements .ad-slot-inline — between-content placement .ad-slot-sidebar — 300×600 half-page (desktop only) The download-flow variant (`.ad-slot-download-top`) lives in single-wpdmpro.css. ------------------------------------------------------------ */ .ad-slot-top, .ad-slot-bottom { display: block; width: 100%; max-width: 970px; min-height: 90px; margin: 24px auto; text-align: center; } .ad-slot-inline { display: block; width: 100%; min-height: 250px; margin: 32px auto; text-align: center; } .ad-slot-sidebar { width: 300px; min-height: 600px; } .ad-slot-sidebar:empty { display: none; } /* Sidebar hidden below 900px (kept from prior config — the 300px column would feel cramped on tablets too, not just phones). Redundant with the 768px display:none below, but harmless. */ @media (max-width: 900px) { .ad-slot-sidebar { display: none; } } @media (max-width: 768px) { .ad-slot-top, .ad-slot-bottom { min-height: 100px; } .ad-slot-inline { min-height: 250px; } .ad-slot-sidebar { display: none; } } @media (max-width: 480px) { .ad-slot-bottom { max-width: calc(100% - 32px); margin: 24px auto 8px; } } /* ------------------------------------------------------------ CONTAINER ------------------------------------------------------------ */ .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } /* ------------------------------------------------------------ HEADER ------------------------------------------------------------ */ .header { background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .header-inner { display: flex; align-items: center; gap: 32px; height: 64px; } .logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.03em; color: var(--text); flex-shrink: 0; } .logo:hover { color: var(--text); } .logo img { max-height: 40px; width: auto; } .logo-mark { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--primary) 0%, var(--purple) 100%); display: grid; place-items: center; color: #fff; font-size: 16px; font-weight: 800; } .nav-main { display: flex; gap: 4px; flex: 1; } .nav-main a { padding: 8px 14px; border-radius: 8px; color: var(--text-2); font-weight: 500; font-size: 14px; transition: all 0.15s; } .nav-main a:hover { background: var(--bg-soft); color: var(--text); } .nav-main a.active, .nav-main .current-menu-item > a, .nav-main .current_page_item > a { background: var(--primary-light); color: var(--primary-dark); } /* Header search. Scoped to `.header` — WordPress body_class() adds a bare `search` class to on a results page, so an unscoped `.search` rule would size the whole document (the 300px width broke /?s=). */ .header .search { position: relative; width: 300px; } .header .search input { width: 100%; height: 38px; padding: 0 14px 0 38px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft); font-size: 14px; transition: all 0.15s; } .header .search input:focus { outline: none; background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); } .header .search svg { position: absolute; left: 12px; top: 11px; color: var(--text-3); } /* Header search hides on the homepage — the hero search is the primary entry point there. */ .search-hidden-on-home { display: none; } /* Header reflow on narrow screens — logo on row 1, the platform menu on its own scrollable row 2 (the header search is hidden here). */ @media (max-width: 768px) { .header-inner { flex-wrap: wrap; height: auto; gap: 8px 12px; padding-top: 10px; padding-bottom: 10px; } .header-inner .logo { order: 1; flex: 0 0 auto; } .header-inner .search { display: none; } .header-inner .nav-main { order: 2; flex: 1 1 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .header-inner .nav-main::-webkit-scrollbar { display: none; height: 0; } .header-inner .nav-main .menu { white-space: nowrap; } .header-inner .nav-main .menu li { flex-shrink: 0; } } /* ------------------------------------------------------------ CATEGORY BAR ------------------------------------------------------------ */ .cat-bar { position: relative; overflow: hidden; background: var(--surface); border-bottom: 1px solid var(--border); } /* Soft fade hints on the scrollable edges (toggled by cat-bar.js). */ .cat-bar::before, .cat-bar::after { content: ''; position: absolute; top: 0; bottom: 0; width: 32px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.2s ease; } .cat-bar::before { left: 0; background: linear-gradient(to right, var(--surface), transparent); } .cat-bar::after { right: 0; background: linear-gradient(to left, var(--surface), transparent); } .cat-bar.is-scrolled-from-start::before { opacity: 1; } .cat-bar.is-not-scrolled-to-end::after { opacity: 1; } /* Horizontal scroller — scrollbar hidden, touch-friendly. max-width + auto margins align the scroller with the centered page container so chips don't drift to the viewport edge on medium / wider viewports. `width: 100%` is the mobile-overflow fix: without it, a block element with `overflow-x: auto` and no explicit width can shrink-to-content on iOS Safari, propagating the child .menu's `width: max-content` up to the page and causing sideways scroll. Pairs with `overflow-x: clip` on in base.css. */ .cat-bar-inner { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; padding: 8px 0; width: 100%; /* explicit — prevents shrink-to-content */ max-width: var(--container); margin: 0 auto; } .cat-bar-inner::-webkit-scrollbar { display: none; height: 0; width: 0; } /* ------------------------------------------------------------ BREADCRUMB ------------------------------------------------------------ */ .crumb { padding: 14px 0 6px; font-size: 13px; color: var(--text-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .crumb a { color: var(--text-2); font-weight: 500; } .crumb a:hover { color: var(--primary); } .crumb .sep { color: var(--text-muted); } .crumb .current { color: var(--text); font-weight: 600; } /* ------------------------------------------------------------ PAGE MAIN ------------------------------------------------------------ */ .site-main { padding-bottom: 32px; } /* ------------------------------------------------------------ FOOTER ------------------------------------------------------------ */ .footer { background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%); border-top: 1px solid var(--border); margin-top: 48px; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; padding: 48px 0 32px; } .footer-brand { display: flex; flex-direction: column; gap: 12px; } .footer-brand p { color: var(--text-2); font-size: 14px; line-height: 1.6; max-width: 30ch; } .footer-col h5 { font-size: 13px; font-weight: 800; color: var(--text); margin: 0 0 14px; text-transform: uppercase; letter-spacing: 0.05em; } .footer-col-title { font-size: 13px; font-weight: 800; color: var(--text); margin: 0 0 14px; text-transform: uppercase; letter-spacing: 0.05em; } .footer-col .menu { list-style: none; margin: 0; padding: 0; } .footer-col .menu li { margin: 0 0 8px; list-style: none; } .footer-col .menu a { font-size: 13px; color: var(--text-2); text-decoration: none; transition: color 0.15s ease; } .footer-col .menu a:hover { color: var(--primary); } .footer-bottom { padding: 24px 0; /* was 20 — more breathing room above + below */ border-top: 1px solid var(--border); font-size: 12.5px; /* was 13 — quieter, more infrastructural */ font-weight: 500; letter-spacing: 0.01em; color: var(--text-muted); /* was --text-3 (#8b95a5) → --text-muted (#b1b8c4), softer */ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } @media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } .footer-brand { grid-column: span 2; } } @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } .footer-brand { grid-column: span 1; } .footer-bottom { flex-direction: column; align-items: center; /* center each line when stacked */ gap: 8px; text-align: center; } } /* ------------------------------------------------------------ NAV MENU INTEGRATION (wp_nav_menu output) ------------------------------------------------------------ */ .nav-main .menu { display: flex; align-items: center; gap: 4px; list-style: none; flex-wrap: nowrap; } .nav-main .menu li { list-style: none; } .cat-bar-inner .menu { display: flex; align-items: center; gap: 4px; list-style: none; flex-wrap: nowrap; white-space: nowrap; width: max-content; min-width: 100%; margin: 0; padding: 0 24px; } .cat-bar-inner .menu li { list-style: none; flex-shrink: 0; } .cat-bar-inner .menu a { display: inline-flex; align-items: center; gap: 6px; /* was 8 — modest horizontal trim for desktop fit */ padding: 7px 12px; /* was 7 14 — modest horizontal trim for desktop fit */ border-radius: var(--r-full); font-size: 13px; /* unchanged — text size preserved */ font-weight: 600; color: var(--text-2); white-space: nowrap; transition: all 0.15s; } .cat-bar-inner .menu a:hover { background: var(--bg-soft); color: var(--text); } .cat-bar-inner .menu .is-active > a, .cat-bar-inner .menu .current-menu-item > a, .cat-bar-inner .menu .current-menu-parent > a, .cat-bar-inner .menu .current-cat > a { background: var(--text); color: #fff; } .footer-col .menu, .footer-col .menu li { list-style: none; } /* Inline SVG icons injected into menu items (inc/menu-icons.php) */ .menu-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 6px; vertical-align: middle; flex-shrink: 0; } .menu-icon svg { width: 100%; height: 100%; display: block; } /* Defensive cap — a header / category-bar icon may never balloon. If an inline SVG ever loses its .menu-icon sizing it stays within 24px instead of falling back to the 300×150 SVG default. */ .header svg, .cat-bar svg { max-width: 24px; max-height: 24px; } .nav-main a, .cat-bar a, .footer-col .menu a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } /* Custom logo (get_custom_logo output) */ .custom-logo-link { display: flex; align-items: center; flex-shrink: 0; } .custom-logo { max-height: 40px; width: auto; } /* ------------------------------------------------------------ RESPONSIVE ------------------------------------------------------------ */ @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { .nav-main { display: none; } .header .search { width: auto; flex: 1; } .header-inner { gap: 16px; } .footer-grid { grid-template-columns: 1fr; } }