/* ============================================================ Newsvik — Theme stylesheet ------------------------------------------------------------ Single source of truth for the public-facing theme: palette (light + dark), site container width, header, layout grid, widget rendering, and mobile responsiveness. Color philosophy: cool slate-based neutrals — no loud reds or oranges. Links pick up a subtle blue. Active states use a light gray chip (#bebebe) for consistency with the existing layout-toggle look. Light/dark switch: (default) (user picks dark) The theme toggle in the header writes this attribute and mirrors it into localStorage (newsvik_theme) so the choice survives reloads. ============================================================ */ :root, :root[data-theme="light"] { --bg: #f1f5f9; /* page background */ --bg-elev: #ffffff; /* cards / header / dropdowns */ --bg-sub: #f8fafc; /* subtle inset (search input, etc.) */ --text: #1e293b; /* primary text */ --text-muted: #64748b; /* secondary text / meta */ --text-dim: #94a3b8; /* tertiary / placeholder */ --border: #e2e8f0; /* hairline borders */ --border-strong: #cbd5e1; --link: #2563eb; /* hyperlinks (admin chrome / non-news) */ --link-hover: #1d4ed8; --news-link: #337ab7; /* news titles — kept distinct from --link because publishers expect a familiar "news blue" tone on aggregated headlines. */ --news-link-hover: #125a99; --accent: #475569; /* slate-600 — primary button */ --accent-hover: #334155; --accent-soft: #e2e8f0; /* hover bg for ghost buttons */ --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04); --radius: 8px; --radius-lg: 12px; --header-h: 62px; --header-h-shrunk: 48px; /* compact state when the page is scrolled */ --container-max: 1200px; } :root[data-theme="dark"] { --bg: #0f172a; --bg-elev: #1e293b; --bg-sub: #0b1220; --text: #e2e8f0; --text-muted: #94a3b8; --text-dim: #64748b; --border: #334155; --border-strong: #475569; --link: #60a5fa; --link-hover: #93c5fd; --news-link: #7eb5dd; /* lifted from #337ab7 for AA contrast on dark surfaces */ --news-link-hover: #a8d0eb; --accent: #cbd5e1; --accent-hover: #f1f5f9; --accent-soft: #1e293b; --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3); } /* Animation timing — shared across the scroll-shrink choreography so the header and the secondary bar move in lockstep. */ :root { --header-ease: 220ms ease; } /* ---------- reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; font-size: 15px; line-height: 1.5; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; } img { max-width: 100%; height: auto; } /* Universal container — every centered band inside the page uses this. */ .site-container { max-width: var(--container-max); margin: 0 auto; padding: 0 16px; width: 100%; } /* ============================================================ Header (sticky, full-bleed background, content centered) ------------------------------------------------------------ Two states: normal — .site-header (header-h = 62px) shrunk — .site-header.is-scrolled (header-h-shrunk = 48px) The shrunk class is toggled by JS in _header.php on window scroll. Logo, search input, icon buttons all interpolate to smaller sizes over --header-ease so the transition is smooth. The secondary bar below the header rides along via the same easing on its `top:`. ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--bg-elev); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); transition: box-shadow var(--header-ease); } .site-header.is-scrolled { box-shadow: var(--shadow-lg); /* a touch heavier so it reads as "stuck" */ } .header-inner { display: flex; align-items: center; gap: 14px; height: var(--header-h); transition: height var(--header-ease); } .site-header.is-scrolled .header-inner { height: var(--header-h-shrunk); } .brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.25rem; flex-shrink: 0; transition: font-size var(--header-ease); } .brand:hover { text-decoration: none; color: var(--text); } .brand img { height: 28px; width: auto; transition: height var(--header-ease); } .site-header.is-scrolled .brand { font-size: 1.05rem; } .site-header.is-scrolled .brand img { height: 22px; } /* Global search — sits in the middle, expands. */ .global-search { position: relative; flex: 1; max-width: 540px; margin: 0 auto; } .global-search input { width: 100%; height: 38px; padding: 0 14px 0 38px; background: var(--bg-sub); border: 1px solid var(--border); border-radius: 999px; color: var(--text); font: inherit; font-size: 0.92rem; transition: border-color 0.15s, background 0.15s, height var(--header-ease), font-size var(--header-ease); } .site-header.is-scrolled .global-search input { height: 32px; font-size: 0.88rem; } .global-search input:focus { outline: none; border-color: var(--accent); background: var(--bg-elev); } .global-search::before { content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3-3'/%3E%3C/svg%3E") center/contain no-repeat; pointer-events: none; } /* Primary menu (top-level + dropdowns) */ .primary-menu { display: flex; align-items: center; gap: 4px; } .primary-menu .menu-item { position: relative; } .primary-menu .menu-link { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 6px; color: var(--text); font-size: 0.92rem; font-weight: 500; text-decoration: none; white-space: nowrap; } .primary-menu .menu-link:hover { background: var(--accent-soft); color: var(--text); text-decoration: none; } .primary-menu .menu-item.has-children > .menu-link::after { content: ""; width: 10px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; margin-left: 2px; } .primary-menu .submenu { position: absolute; top: 100%; left: 0; min-width: 180px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; display: none; z-index: 60; } .primary-menu .menu-item:hover > .submenu, .primary-menu .menu-item:focus-within > .submenu { display: block; } .primary-menu .submenu .menu-link { display: block; padding: 8px 12px; border-radius: 4px; font-size: 0.88rem; } /* Header right-side icons (theme toggle, etc.) */ .header-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .icon-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s, width var(--header-ease), height var(--header-ease); } .site-header.is-scrolled .icon-btn { width: 32px; height: 32px; } .icon-btn:hover { background: var(--accent-soft); color: var(--text); } .icon-btn svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ============================================================ Image toggle — lets visitors hide every news/feed thumbnail site-wide (saves bandwidth, gives a text-only reading mode). State lives on via the boot script in _header.php (localStorage key: newsvik_images, values yes|no). Article body images are intentionally NOT in the selector list — editorial article content is treated as part of the story, not thumbnailware. ============================================================ */ .image-toggle .icon-img-on { display: block; } .image-toggle .icon-img-off { display: none; } :root[data-images="off"] .image-toggle .icon-img-on { display: none; } :root[data-images="off"] .image-toggle .icon-img-off { display: block; } :root[data-images="off"] .fc-thumb, :root[data-images="off"] .feed-list-item img, :root[data-images="off"] .sr-thumb { display: none !important; } /* When images are hidden, the .fc-entry rows no longer need the thumb-sized gap — collapse padding so titles align cleanly. Triangle bullets get added so each entry still reads as a list item (mirrors the .fc-entry-no-img treatment already used by the server when image_path is empty). */ :root[data-images="off"] .fc-entry { padding: 8px 6px; } :root[data-images="off"] .fc-entry:not(.fc-entry-no-img)::before { content: '\25B8'; color: #605d5d; margin-right: 1px; font-size: 20px; } :root[data-images="off"] .feed-list-item { padding: 14px; } :root[data-images="off"] .feed-list-item:not(.fl-no-img)::before { content: '\25B8'; color: #605d5d; font-size: 20px; margin-right: 1px; flex-shrink: 0; } /* Search-result equivalent: when the visitor (or admin) toggles images off, results that DID have a thumbnail get the same bullet treatment as the ones that natively didn't, so the list stays visually uniform. */ :root[data-images="off"] .search-result { padding: 14px; } :root[data-images="off"] .search-result:not(.sr-no-img)::before { content: '\25B8'; color: #605d5d; font-size: 20px; margin-right: 1px; flex-shrink: 0; } .hamburger { display: none; /* shown only on mobile */ } /* ============================================================ Secondary menu strip — sits glued under the header, shares the sticky stack so it scrolls with the page header. Visually quieter than the primary menu so the eye lands on the brand+search first. ============================================================ */ .secondary-menu-bar { /* Non-sticky: scrolls away with the page. Used to be position:sticky glued under .site-header, but the user wanted to see it as a static strip below the header. The sibling-scroll-shrink rule that adjusted its `top:` is removed too — it had nothing to anchor against once the bar stopped being position:sticky. */ background: var(--bg-sub); border-bottom: 1px solid var(--border); } .secondary-menu-bar .secondary-menu-inner { display: flex; align-items: center; justify-content: center; /* center the menu within the container */ min-height: 32px; /* slimmer strip — was 40px */ /* overflow:visible (default) is essential here — any non-visible value creates a clipping context that hides the absolutely-positioned .submenu dropdowns instead of letting them escape downward. */ } /* The inner element renderPrimaryMenu emits is