/* ========================================================================== True Work Office — shared site stylesheet Single source of truth for chrome (nav, header, footer) + core look. Linked by every Hugo page (via baseof.html / index.html) AND by the generated dashboards (mission-control, health, cost) so the whole site — including generated pages — shares one visual system automatically. Theming: colours are driven by CSS custom properties. Dark mode is applied either automatically (prefers-color-scheme) or explicitly via data-theme="dark" | "light" on (set by the nav toggle, persisted in localStorage). Surfaces flip; the gold featured box and navy/contact boxes keep dark text on their own light backgrounds in both themes. ========================================================================== */ :root { --tw-navy: #1e3c72; --tw-blue: #2a5298; --tw-ink: #333; --tw-muted: #666; --tw-soft: #f8f9ff; --tw-border: #e0e7ff; --tw-success: #0f9d6e; /* aligned to mc-success (dashboard_chrome.py) 2026-07-16 */ --tw-warning: #c2760a; /* aligned to mc-warning (dashboard_chrome.py) 2026-07-16 */ --tw-danger: #dc2626; --tw-info: #0e7490; --tw-radius: 8px; /* semantic tokens (overridden in dark mode) */ --tw-page: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); --tw-surface: #ffffff; --tw-heading: var(--tw-navy); --tw-link: var(--tw-blue); --tw-table-alt: #fafbff; --tw-subnav-bg: #eef2fb; --tw-shadow: rgba(0,0,0,0.2); --tw-lead: #444; } /* Dark theme — explicit toggle */ :root[data-theme="dark"] { --tw-ink: #d7deee; --tw-muted: #93a1bd; --tw-soft: #1b2540; --tw-border: #2b3958; --tw-page: linear-gradient(135deg, #0c1220 0%, #131d33 100%); --tw-surface: #141c2e; --tw-heading: #9db8ff; --tw-link: #7ea6ff; --tw-table-alt: #172136; --tw-subnav-bg: #172136; --tw-shadow: rgba(0,0,0,0.6); --tw-lead: #b8c2d8; } /* Dark theme — automatic, unless the visitor has explicitly chosen light */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tw-ink: #d7deee; --tw-muted: #93a1bd; --tw-soft: #1b2540; --tw-border: #2b3958; --tw-page: linear-gradient(135deg, #0c1220 0%, #131d33 100%); --tw-surface: #141c2e; --tw-heading: #9db8ff; --tw-link: #7ea6ff; --tw-table-alt: #172136; --tw-subnav-bg: #172136; --tw-shadow: rgba(0,0,0,0.6); --tw-lead: #b8c2d8; } } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; line-height: 1.6; color: var(--tw-ink); background: var(--tw-page); min-height: 100vh; } .container { max-width: 900px; margin: 0 auto; padding: 2rem; background: var(--tw-surface); min-height: 100vh; box-shadow: 0 0 50px var(--tw-shadow); } /* Wide variant for data-dense dashboards */ .container.container-wide { max-width: 1200px; } /* ---- Navigation (shared chrome) ------------------------------------------ */ .site-nav { display: flex; align-items: center; justify-content: center; gap: 1.25rem; flex-wrap: wrap; padding: 0.9rem 1rem; background: var(--tw-soft); border-radius: var(--tw-radius); margin-bottom: 1.5rem; } .site-nav .brand { font-weight: 800; color: var(--tw-heading); text-decoration: none; margin-right: auto; font-size: 1rem; letter-spacing: -0.01em; } .site-nav a { color: var(--tw-heading); font-weight: 600; text-decoration: none; font-size: 0.95rem; padding: 0.25rem 0.15rem; border-bottom: 2px solid transparent; } .site-nav a:hover { border-bottom-color: var(--tw-blue); } .site-nav a.active { color: var(--tw-link); border-bottom-color: var(--tw-link); } /* Theme toggle button (shared chrome) */ .theme-toggle { background: none; border: 1px solid var(--tw-border); color: var(--tw-heading); border-radius: var(--tw-radius); padding: 0.2rem 0.5rem; cursor: pointer; font-size: 1rem; line-height: 1.2; font-weight: 600; } .theme-toggle:hover { border-color: var(--tw-link); } @media (max-width: 640px) { .site-nav { gap: 0.9rem; } .site-nav .brand { margin-right: 0; width: 100%; text-align: center; margin-bottom: 0.3rem; } } /* ---- Footer (shared chrome) ---------------------------------------------- */ .site-footer { text-align: center; margin-top: 3rem; padding: 2rem; background: var(--tw-soft); border-radius: var(--tw-radius); font-size: 0.9rem; color: var(--tw-muted); } .site-footer a { color: var(--tw-heading); text-decoration: none; font-weight: 600; } .site-footer a:hover { text-decoration: underline; } .site-footer nav { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.75rem; } /* ---- Dashboard sub-nav (shared by generated dashboards) ------------------ */ .dash-subnav { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; padding: 0.6rem 1rem; margin: 0 0 1.25rem; background: var(--tw-subnav-bg); border-radius: var(--tw-radius); } .dash-subnav a { color: var(--tw-heading); font-weight: 600; text-decoration: none; font-size: 0.9rem; padding: 0.2rem 0.15rem; border-bottom: 2px solid transparent; } .dash-subnav a:hover { border-bottom-color: var(--tw-blue); } .dash-subnav a.active { color: var(--tw-link); border-bottom-color: var(--tw-link); } .reltime { color: var(--tw-muted); font-size: 0.85em; } /* ---- Core typography ----------------------------------------------------- */ h1 { font-size: 2.2rem; font-weight: 800; color: var(--tw-heading); margin-bottom: 0.5rem; } h2 { font-size: 1.6rem; font-weight: 700; color: var(--tw-heading); margin: 2rem 0 1rem; border-left: 4px solid var(--tw-blue); padding-left: 1rem; } h3 { color: var(--tw-heading); margin-bottom: 0.4rem; } p { margin-bottom: 1rem; } strong { color: var(--tw-heading); } a { color: var(--tw-link); } ul, ol { margin: 0.5rem 0 1rem 1.6rem; line-height: 1.9; } hr { border: none; border-top: 1px solid var(--tw-border); margin: 2rem 0; } .meta { color: var(--tw-muted); font-size: 0.95rem; margin-bottom: 1rem; } .last-updated { color: var(--tw-muted); font-size: 0.85rem; font-style: italic; } /* Tables */ table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; } th, td { border: 1px solid var(--tw-border); padding: 0.75rem; text-align: left; } th { background: var(--tw-soft); color: var(--tw-heading); } tr:nth-child(even) { background: var(--tw-table-alt); } /* ---- Reusable content components (used by home + list pages) ------------- */ .lead { font-size: 1.2rem; color: var(--tw-lead); margin-bottom: 1.5rem; } .card-list { list-style: none; margin-left: 0; padding: 0; } .card-list li { margin: 0.9rem 0; padding: 1rem 1.25rem; background: var(--tw-soft); border: 1px solid var(--tw-border); border-radius: var(--tw-radius); } .card-list li a { font-weight: 700; text-decoration: none; } .card-list li a:hover { text-decoration: underline; } /* Report/section list-page tweaks inherit the card-list look */ .section-block { margin: 1.5rem 0; } /* ---- Homepage components -------------------------------------------------- */ .hero { text-align: center; padding: 2.5rem 0 2rem; border-bottom: 3px solid var(--tw-blue); margin-bottom: 2rem; } .hero .emoji { font-size: 3.5rem; margin-bottom: 0.75rem; } .hero h1 { font-size: 2.5rem; } .hero .tagline { font-size: 1.25rem; color: var(--tw-muted); font-style: italic; } .hero .subtitle { font-size: 1.05rem; color: var(--tw-muted); margin-top: 0.75rem; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin: 2rem 0; } .stat-box { background: var(--tw-navy); color: white; padding: 1.25rem; border-radius: var(--tw-radius); text-align: center; } .stat-box .stat-number { font-size: 1.9rem; font-weight: 800; display: block; } .stat-box .stat-label { font-size: 0.8rem; opacity: 0.9; } .featured-report { background: linear-gradient(135deg, #fff8e6 0%, #ffedcc 100%); border: 2px solid #e8a33d; border-radius: 12px; padding: 2rem; margin: 2.5rem 0; } .featured-report .eyebrow { display: inline-block; background: #e8a33d; color: var(--tw-navy); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.25rem 0.75rem; border-radius: 999px; margin-bottom: 0.75rem; } .featured-report h2 { border-left: none; padding-left: 0; margin: 0 0 0.25rem; color: var(--tw-navy); } .featured-report .sub { font-style: italic; color: #555; margin-bottom: 1rem; } .featured-report p { color: #4a4636; } .featured-report .read-link { display: inline-block; margin-top: 0.5rem; font-weight: 700; color: var(--tw-navy); text-decoration: none; } .featured-report .read-link:hover { text-decoration: underline; } .featured-report .secondary { margin-top: 1rem; font-size: 0.92rem; color: #6b5a2e; } .offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin: 1.5rem 0; } .offer-card { background: var(--tw-soft); border: 1px solid var(--tw-border); border-radius: var(--tw-radius); padding: 1.25rem; } .offer-card h3 { font-size: 1.05rem; } .offer-card a { color: var(--tw-link); font-weight: 600; text-decoration: none; } .offer-card a:hover { text-decoration: underline; } .contact-box { background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%); color: white; padding: 2rem; border-radius: 12px; margin: 2.5rem 0; } .contact-box h2 { color: white; border-left-color: white; margin-top: 0; } .contact-box p { color: #eaf0ff; } .contact-box strong { color: white; } .contact-box .cta { display: inline-block; background: white; color: var(--tw-navy); padding: 0.85rem 1.75rem; border-radius: var(--tw-radius); text-decoration: none; font-weight: 700; margin-top: 1rem; } .contact-box .cta:hover { background: #f0f4ff; } .contact-box .human-line { margin-top: 1.25rem; font-size: 0.92rem; } .contact-box .human-line a { color: white; text-decoration: underline; font-weight: 600; } /* ---- Pagination (list pages — grows gracefully with content) ------------- */ .pagination { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin: 2rem 0 0; padding: 0; } .pagination .page-item { margin: 0; } .pagination .page-link { display: inline-block; padding: 0.4rem 0.75rem; border: 1px solid var(--tw-border); border-radius: var(--tw-radius); color: var(--tw-heading); text-decoration: none; font-weight: 600; font-size: 0.9rem; } .pagination .page-link:hover { border-color: var(--tw-link); } .pagination .page-item.active .page-link { background: var(--tw-blue); color: #fff; border-color: var(--tw-blue); } .pagination .page-item.disabled .page-link { opacity: 0.4; pointer-events: none; } @media (max-width: 768px) { .container { padding: 1rem; } h1 { font-size: 1.7rem; } .hero h1 { font-size: 1.9rem; } } /* Key-points (TL;DR) box for AEO answer-friendly summaries */ .tldr { background: var(--tw-soft); border: 1px solid var(--tw-border); border-left: 4px solid var(--tw-blue); border-radius: var(--tw-radius); padding: 1rem 1.25rem; margin: 0 0 1.5rem; } .tldr strong { color: var(--tw-heading); display: block; margin-bottom: 0.4rem; } .tldr ul { margin: 0 0 0 1.2rem; line-height: 1.7; } /* ---- Content images + figures (site standard) ---------------------------- */ /* Root cause fix: content images had no width constraint, so an intrinsic 1600px diagram overflowed the 900px article column. Constrain every content image to its container and keep the aspect ratio. */ article img, .content-img { max-width: 100%; height: auto; } article figure, figure.content-figure { margin: 1.5rem 0; text-align: center; } article figure img { display: block; margin: 0 auto; max-width: 100%; height: auto; border-radius: var(--tw-radius); } img.content-img { display: block; margin: 1.5rem auto; border-radius: var(--tw-radius); } figcaption { color: var(--tw-muted); font-size: 0.9rem; margin-top: 0.5rem; font-style: italic; } img.lightbox-img { cursor: zoom-in; } /* ---- Lightbox overlay (dependency-free; driven by /js/lightbox.js) -------- */ .lightbox-open { overflow: hidden; } .lightbox-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 2rem; background: rgba(10, 14, 24, 0.88); opacity: 0; transition: opacity 0.25s ease; cursor: zoom-out; } .lightbox-overlay.is-visible { opacity: 1; } .lightbox-overlay[hidden] { display: none; } .lightbox-overlay-img { max-width: 95vw; max-height: 85vh; width: auto; height: auto; object-fit: contain; border-radius: var(--tw-radius); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); transform: scale(0.96); transition: transform 0.25s ease; cursor: default; } .lightbox-overlay.is-visible .lightbox-overlay-img { transform: scale(1); } .lightbox-caption { color: #e8eefc; font-size: 0.9rem; max-width: 80ch; text-align: center; } .lightbox-close { position: absolute; top: 1rem; right: 1.25rem; background: none; border: none; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: var(--tw-radius); } .lightbox-close:hover, .lightbox-close:focus { background: rgba(255, 255, 255, 0.15); outline: none; } /* ---- FAQ section (AEO answer-friendly) ----------------------------------- */ .faq { margin-top: 2.5rem; } .faq h3 { margin-top: 1.25rem; } @media (prefers-reduced-motion: reduce) { .lightbox-overlay, .lightbox-overlay-img { transition: none; } .lightbox-overlay-img { transform: none; } }