/* ======================================== BLOG STYLES - Mubsira Analytics Clean, professional white theme ======================================== */ /* Reset & Base */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --color-bg: #ffffff; --color-surface: #f8f9fa; --color-surface-2: #f0f1f3; --color-border: #e2e4e8; --color-text: #1a1a2e; --color-text-muted: #5a5a72; --color-accent: #6366f1; --color-accent-light: #4f46e5; --color-success: #16a34a; --color-danger: #dc2626; --color-warning: #d97706; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --max-width: 760px; --max-width-wide: 1100px; --radius: 12px; --radius-sm: 8px; } body { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); line-height: 1.7; font-size: 16px; -webkit-font-smoothing: antialiased; } a { color: var(--color-accent); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--color-accent-light); } /* ========== LANGUAGE TOGGLE ========== */ .lang-toggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden; font-size: 13px; font-weight: 600; margin-left: 16px; } .lang-toggle button { background: transparent; border: none; padding: 5px 14px; cursor: pointer; color: var(--color-text-muted); font-family: var(--font-sans); font-size: 13px; font-weight: 600; transition: all 0.2s; } .lang-toggle button.active { background: var(--color-accent); color: #fff; } .lang-toggle button:not(.active):hover { background: var(--color-surface); color: var(--color-text); } /* ========== BILINGUAL LANGUAGE SWITCHING ========== Default: show EN, hide FR. When body has .lang-fr: show FR, hide EN. Selectors target only elements INSIDE to avoid breaking the element itself. ================================================== */ /* --- Default state: English visible, French hidden --- */ body div[lang="fr"], body p[lang="fr"], body span[lang="fr"], body h1[lang="fr"], body h2[lang="fr"], body h3[lang="fr"], body header[lang="fr"], body section[lang="fr"], body ul[lang="fr"], body li[lang="fr"], body a[lang="fr"], body strong[lang="fr"], body img[lang="fr"], body figure[lang="fr"], body figcaption[lang="fr"], body table[lang="fr"], body .steps-block[lang="fr"], body .cta-block[lang="fr"] { display: none !important; } /* --- French active: hide EN, show FR --- */ body.lang-fr div[lang="en"], body.lang-fr p[lang="en"], body.lang-fr span[lang="en"], body.lang-fr h1[lang="en"], body.lang-fr h2[lang="en"], body.lang-fr h3[lang="en"], body.lang-fr header[lang="en"], body.lang-fr section[lang="en"], body.lang-fr ul[lang="en"], body.lang-fr li[lang="en"], body.lang-fr a[lang="en"], body.lang-fr strong[lang="en"], body.lang-fr img[lang="en"], body.lang-fr figure[lang="en"], body.lang-fr figcaption[lang="en"], body.lang-fr table[lang="en"] { display: none !important; } /* FR block elements */ body.lang-fr div[lang="fr"], body.lang-fr p[lang="fr"], body.lang-fr header[lang="fr"], body.lang-fr section[lang="fr"], body.lang-fr h1[lang="fr"], body.lang-fr h2[lang="fr"], body.lang-fr h3[lang="fr"], body.lang-fr figure[lang="fr"], body.lang-fr figcaption[lang="fr"], body.lang-fr table[lang="fr"] { display: block !important; } /* FR inline elements */ body.lang-fr span[lang="fr"], body.lang-fr a[lang="fr"], body.lang-fr img[lang="fr"] { display: inline !important; } /* FR list elements */ body.lang-fr ul[lang="fr"] { display: block !important; } body.lang-fr li[lang="fr"] { display: list-item !important; } /* FR flex containers */ body.lang-fr .steps-block[lang="fr"] { display: flex !important; } /* FR strong (callout box) */ body.lang-fr strong[lang="fr"] { display: block !important; } /* FR cta-block (needs to be block for centering) */ body.lang-fr .cta-block[lang="fr"] { display: block !important; } /* Lang toggle must always remain visible */ .lang-toggle { display: inline-flex !important; } /* ========== NAVIGATION ========== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); } .nav-container { max-width: var(--max-width-wide); margin: 0 auto; padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; } .nav-brand { font-size: 18px; font-weight: 700; color: var(--color-text); letter-spacing: -0.5px; } .brand-dot { color: var(--color-accent); } .brand-sep { color: var(--color-border); margin: 0 4px; font-weight: 400; } .brand-app { color: var(--color-text-muted); font-weight: 500; } .nav-right { display: flex; align-items: center; gap: 8px; } .nav-links { list-style: none; display: flex; gap: 24px; } .nav-links a { color: var(--color-text-muted); font-size: 14px; font-weight: 500; transition: color 0.2s; } .nav-links a:hover { color: var(--color-text); } /* ========== HAMBURGER MENU (mobile) ========== */ .nav-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; margin-left: 8px; flex-direction: column; gap: 4px; align-items: center; justify-content: center; } .nav-hamburger span { display: block; width: 20px; height: 2px; background: var(--color-text); border-radius: 2px; transition: all 0.25s ease; } /* Animate hamburger to X when active */ .nav-hamburger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-hamburger.active span:nth-child(2) { opacity: 0; } .nav-hamburger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ========== ARTICLE HERO ========== */ .article-hero { padding: 120px 24px 48px; background: linear-gradient(180deg, rgba(99, 102, 241, 0.04) 0%, transparent 100%); } .article-hero-inner { max-width: var(--max-width); margin: 0 auto; } .article-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; font-size: 13px; color: var(--color-text-muted); } .article-category { background: rgba(99, 102, 241, 0.1); color: var(--color-accent); padding: 4px 12px; border-radius: 20px; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .article-updated { font-size: 12px; color: var(--color-text-muted); font-style: italic; opacity: 0.85; } .article-hero h1 { font-size: clamp(28px, 5vw, 42px); font-weight: 800; line-height: 1.15; letter-spacing: -1px; margin-bottom: 16px; color: var(--color-text); } .article-subtitle { font-size: 18px; color: var(--color-text-muted); line-height: 1.6; max-width: 600px; } /* ========== ARTICLE BODY ========== */ .article-body { max-width: var(--max-width); margin: 0 auto; padding: 32px 24px 80px; } .article-body > p { margin-bottom: 20px; font-size: 16.5px; line-height: 1.75; color: var(--color-text); } .article-body h2 { font-size: 24px; font-weight: 700; color: var(--color-text); margin-top: 56px; margin-bottom: 16px; letter-spacing: -0.5px; padding-top: 16px; border-top: 1px solid var(--color-border); } .article-body h2:first-of-type { border-top: none; padding-top: 0; margin-top: 40px; } .article-body h3 { font-size: 18px; font-weight: 600; color: var(--color-text); margin-bottom: 8px; } .article-body ul, .article-body ol { margin-bottom: 20px; padding-left: 24px; } .article-body li { margin-bottom: 8px; line-height: 1.7; } .article-body em { color: var(--color-accent); font-style: italic; } .article-body strong { color: var(--color-text); font-weight: 700; } /* ========== BEFORE / AFTER BLOCKS ========== */ .before-after-block { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: start; margin: 28px 0 24px; } .ba-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; } .ba-before { border-color: rgba(220, 38, 38, 0.3); } .ba-after { border-color: rgba(22, 163, 74, 0.3); } .ba-label { padding: 10px 16px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .ba-before .ba-label { background: rgba(220, 38, 38, 0.06); color: #dc2626; } .ba-after .ba-label { background: rgba(22, 163, 74, 0.06); color: #16a34a; } .ba-panel table { width: 100%; border-collapse: collapse; font-size: 13px; } .ba-panel th { text-align: left; padding: 8px 12px; background: var(--color-surface-2); color: var(--color-text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--color-border); } .ba-panel td { padding: 7px 12px; border-bottom: 1px solid rgba(226, 228, 232, 0.7); color: var(--color-text); font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 12.5px; white-space: nowrap; } .highlight-row td { background: rgba(220, 38, 38, 0.04); } .ba-note { padding: 10px 16px; font-size: 12px; color: var(--color-text-muted); border-top: 1px solid var(--color-border); line-height: 1.5; } .ba-arrow { display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--color-text-muted); padding-top: 80px; font-weight: 300; } /* ========== STEPS BLOCK ========== */ .steps-block { margin: 28px 0 32px; display: flex; flex-direction: column; gap: 20px; } .step-card { display: flex; gap: 20px; align-items: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 24px; } .step-num { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: rgba(99, 102, 241, 0.1); color: var(--color-accent); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; } .step-card p { font-size: 14.5px; color: var(--color-text-muted); line-height: 1.6; margin-top: 4px; } /* ========== SEO INTRO ========== */ .article-intro { margin: 0 0 24px; } .article-intro p { font-size: 17px; line-height: 1.8; color: var(--color-text-muted); margin: 0; } /* ========== DOWNLOAD BOX ========== */ .download-box { background: linear-gradient(135deg, rgba(22, 163, 106, 0.05), rgba(99, 102, 241, 0.05)); border: 1.5px solid rgba(22, 163, 106, 0.2); border-radius: var(--radius); padding: 28px; margin: 36px 0; } .download-box-inner { display: flex; gap: 20px; align-items: flex-start; } .download-icon { flex-shrink: 0; color: var(--color-success); margin-top: 2px; width: 44px; height: 44px; background: rgba(22, 163, 106, 0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; } .download-box strong { display: block; color: var(--color-text); font-size: 16px; margin-bottom: 8px; } .download-box p { font-size: 14.5px; color: var(--color-text-muted); line-height: 1.65; margin: 0 0 14px; } .download-buttons { display: flex; gap: 10px; flex-wrap: wrap; } .download-buttons .btn-small { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 8px 16px; border-radius: 8px; font-weight: 600; transition: all 0.2s; } /* ========== CALLOUT BOX ========== */ .callout-box { display: flex; gap: 16px; align-items: flex-start; background: rgba(99, 102, 241, 0.04); border: 1px solid rgba(99, 102, 241, 0.15); border-radius: var(--radius); padding: 24px; margin: 32px 0; } .callout-icon { flex-shrink: 0; color: var(--color-accent); margin-top: 2px; } .callout-box strong { display: block; color: var(--color-text); font-size: 15px; margin-bottom: 6px; } .callout-box p { font-size: 14px; color: var(--color-text-muted); line-height: 1.6; margin: 0; } /* ========== SUMMARY LIST ========== */ .summary-list { list-style: none; padding: 0; margin: 20px 0 32px; } .summary-list li { padding: 12px 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: 8px; font-size: 14.5px; line-height: 1.6; } .summary-list li strong { color: var(--color-accent); } /* ========== CTA BLOCK ========== */ .cta-block { text-align: center; padding: 48px 32px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(99, 102, 241, 0.02) 100%); border: 1px solid rgba(99, 102, 241, 0.15); border-radius: var(--radius); margin-top: 48px; } .cta-block h2 { border: none !important; padding: 0 !important; margin: 0 0 12px !important; font-size: 28px; color: var(--color-text); } .cta-block p { color: var(--color-text-muted); font-size: 16px; margin-bottom: 24px; } .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s; text-decoration: none; border: none; } .btn-primary { background: var(--color-accent); color: #fff; } .btn-primary:hover { background: #4f46e5; color: #fff; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(99, 102, 241, 0.25); } .btn-outline { background: transparent; color: var(--color-accent); border: 1px solid var(--color-accent); } .btn-outline:hover { background: rgba(99, 102, 241, 0.06); color: var(--color-accent-light); } .btn-large { padding: 14px 32px; font-size: 16px; } /* ========== FOOTER ========== */ .site-footer { border-top: 1px solid var(--color-border); padding: 32px 24px; } .footer-inner { max-width: var(--max-width-wide); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer-copy { font-size: 13px; color: var(--color-text-muted); } .footer-links { list-style: none; display: flex; gap: 24px; } .footer-links a { color: var(--color-text-muted); font-size: 13px; } .footer-links a:hover { color: var(--color-text); } /* ========== SCREENSHOT / FIGURE ========== */ .article-screenshot { margin: 28px 0 32px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); } .article-screenshot img { width: 100%; height: auto; display: block; } .article-screenshot figcaption { padding: 12px 16px; font-size: 13px; color: var(--color-text-muted); border-top: 1px solid var(--color-border); line-height: 1.5; text-align: center; } .article-screenshot.screenshot-wide { max-width: none; margin-left: -40px; margin-right: -40px; border-radius: var(--radius); } /* ========== NUMBER HIGHLIGHT ========== */ .stat-highlight { display: inline-flex; align-items: baseline; gap: 6px; background: rgba(99, 102, 241, 0.06); border: 1px solid rgba(99, 102, 241, 0.12); border-radius: 6px; padding: 3px 10px; font-weight: 600; font-size: 14px; color: var(--color-accent); white-space: nowrap; } /* ========== VARIANCE TABLE (inline in blog) ========== */ .variance-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 20px 0 28px; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; } .variance-table th { background: var(--color-surface-2); padding: 10px 14px; text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); } .variance-table td { padding: 9px 14px; border-bottom: 1px solid rgba(226, 228, 232, 0.6); } .variance-table .var-up { color: var(--color-danger); font-weight: 600; } .variance-table .var-down { color: var(--color-success); font-weight: 600; } /* ========== RESPONSIVE ========== */ /* Prevent horizontal overflow on all screen sizes */ html, body { overflow-x: hidden; } @media (max-width: 768px) { /* --- Navigation --- */ .nav-links { display: none; position: absolute; top: 52px; left: 0; right: 0; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); flex-direction: column; padding: 12px 16px 16px; gap: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); z-index: 99; } .nav-links.open { display: flex; } .nav-links li { border-bottom: 1px solid var(--color-border); } .nav-links li:last-child { border-bottom: none; } .nav-links a { display: block; padding: 12px 4px; font-size: 15px; } .nav-hamburger { display: flex; } .nav-container { padding: 0 16px; height: 52px; } .nav-brand { font-size: 16px; } .lang-toggle { margin-left: 0; } /* --- Hero --- */ .article-hero { padding: 80px 16px 28px; } .article-hero h1 { font-size: 24px; letter-spacing: -0.5px; line-height: 1.2; } .article-subtitle { font-size: 15px; line-height: 1.5; } .article-meta { flex-wrap: wrap; gap: 8px; font-size: 12px; } .article-category { font-size: 11px; padding: 3px 10px; } /* --- Article body --- */ .article-body { padding: 20px 16px 48px; } .article-body > p, .article-body > div > p { font-size: 15px; line-height: 1.7; margin-bottom: 16px; } .article-body h2 { font-size: 19px; margin-top: 40px; margin-bottom: 12px; letter-spacing: -0.3px; } .article-body h3 { font-size: 16px; } /* --- Screenshots (wide) --- */ .article-screenshot.screenshot-wide { margin-left: -16px; margin-right: -16px; border-radius: 0; } .article-screenshot figcaption { padding: 10px 14px; font-size: 12px; } /* --- Variance table (make scrollable) --- */ .variance-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 16px 0 24px; font-size: 13px; } .variance-table th { padding: 8px 10px; font-size: 11px; white-space: nowrap; } .variance-table td { padding: 7px 10px; white-space: nowrap; } /* --- Before / After blocks --- */ .before-after-block { grid-template-columns: 1fr; gap: 0; } .ba-arrow { padding: 8px 0; font-size: 20px; transform: rotate(90deg); } .ba-panel td { font-size: 11px; padding: 6px 8px; } .ba-panel th { font-size: 10px; padding: 6px 8px; } .ba-panel table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* --- Callout box --- */ .callout-box { flex-direction: column; gap: 12px; padding: 18px 16px; margin: 24px 0; } /* --- Download box --- */ .download-box { padding: 18px 16px; margin: 24px 0; } .download-box-inner { flex-direction: column; gap: 12px; } .download-icon { width: 38px; height: 38px; } .download-buttons .btn-small { font-size: 12px; padding: 8px 12px; } /* --- SEO Intro --- */ .article-intro p { font-size: 15px; } .callout-box strong { font-size: 14px; } .callout-box p { font-size: 13px; } /* --- Steps --- */ .step-card { flex-direction: column; gap: 12px; padding: 18px 16px; } .step-num { width: 34px; height: 34px; font-size: 16px; } .step-card p { font-size: 13.5px; } /* --- Summary list --- */ .summary-list li { padding: 10px 14px; font-size: 13.5px; line-height: 1.55; } /* --- CTA block --- */ .cta-block { padding: 28px 18px; margin-top: 36px; } .cta-block h2 { font-size: 21px !important; } .cta-block p { font-size: 14px; } .cta-buttons { flex-direction: column; align-items: stretch; } .btn { justify-content: center; padding: 12px 20px; font-size: 14px; } .btn-large { padding: 14px 20px; font-size: 15px; } /* --- Footer --- */ .site-footer { padding: 24px 16px; } .footer-inner { flex-direction: column; text-align: center; gap: 12px; } .footer-links { flex-wrap: wrap; justify-content: center; gap: 12px 20px; } } /* ========== EXTRA-SMALL SCREENS ========== */ @media (max-width: 480px) { .article-hero h1 { font-size: 21px; } .article-subtitle { font-size: 14px; } .article-body > p, .article-body > div > p { font-size: 14.5px; } .article-body h2 { font-size: 17px; } .article-screenshot figcaption { font-size: 11.5px; padding: 8px 12px; } .variance-table th { font-size: 10px; padding: 6px 8px; } .variance-table td { font-size: 12px; padding: 6px 8px; } .ba-panel td { font-size: 10px; padding: 5px 6px; } .ba-panel th { font-size: 9px; padding: 5px 6px; } .summary-list li { padding: 9px 12px; font-size: 13px; } .callout-box { padding: 14px 12px; } .cta-block { padding: 24px 14px; } .cta-block h2 { font-size: 19px !important; } .cta-block p { font-size: 13px; } .btn { font-size: 13.5px; padding: 11px 16px; } } /* ========== RELATED ARTICLES ========== */ .related-articles { margin-top: 3rem; padding: 2rem; background: var(--bg-card, #f8f9fa); border-radius: 12px; border: 1px solid var(--border-color, #e2e8f0); } .related-articles h2 { font-size: 1.25rem; margin-bottom: 1rem; color: var(--text-heading, #1a202c); } .related-articles ul { list-style: none; padding: 0; margin: 0; } .related-articles li { padding: 0.5rem 0; } .related-articles li + li { border-top: 1px solid var(--border-color, #e2e8f0); } .related-articles a { color: var(--accent, #2563eb); text-decoration: none; font-weight: 500; } .related-articles a:hover { text-decoration: underline; } /* ======================================== BREADCRUMB NAVIGATION ======================================== */ .breadcrumb { max-width: var(--max-width-wide, 1100px); margin: 80px auto 0; padding: 16px 24px 0; font-size: 0.85rem; } .breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; gap: 0; align-items: center; } .breadcrumb li { display: inline-flex; align-items: center; color: var(--color-text-muted, #5a5a72); } .breadcrumb li + li::before { content: "/"; margin: 0 8px; color: var(--color-border, #e2e4e8); font-weight: 400; } .breadcrumb li a { color: var(--color-accent, #6366f1); text-decoration: none; font-weight: 500; } .breadcrumb li a:hover { text-decoration: underline; } .breadcrumb li[aria-current="page"] { color: var(--color-text, #1a1a2e); font-weight: 600; } /* Bilingual breadcrumb: override the global lang hide/show for breadcrumb items */ .breadcrumb li[lang="fr"] { display: none !important; } body.lang-fr .breadcrumb li[lang="en"] { display: none !important; } body.lang-fr .breadcrumb li[lang="fr"] { display: inline-flex !important; } .breadcrumb li[lang="en"] { display: inline-flex; } /* Breadcrumb links with lang should show/hide properly */ .breadcrumb a[lang="fr"] { display: none !important; } body.lang-fr .breadcrumb a[lang="en"] { display: none !important; } body.lang-fr .breadcrumb a[lang="fr"] { display: inline !important; } /* ========== SCREENSHOT FIGURES ========== */ .screenshot-figure { margin: 2rem 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); } .screenshot-figure img { width: 100%; height: auto; display: block; } .screenshot-figure figcaption { padding: 12px 20px; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-muted); border-top: 1px solid var(--color-border); background: var(--color-bg); } .screenshot-figure figcaption code { background: var(--color-surface-2); padding: 1px 5px; border-radius: 4px; font-size: 0.8125rem; } /* ========== DATA TABLES ========== */ .data-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9rem; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--color-border); } .data-table thead { background: var(--color-accent); color: #fff; } .data-table th { padding: 10px 14px; text-align: left; font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.03em; } .data-table td { padding: 8px 14px; border-bottom: 1px solid var(--color-border); } .data-table tbody tr:nth-child(even) { background: var(--color-surface); } .data-table tbody tr:hover { background: #eef0ff; } .data-table code { background: var(--color-surface-2); padding: 1px 5px; border-radius: 4px; font-size: 0.8125rem; white-space: nowrap; } .data-table.compact th { padding: 8px 10px; } .data-table.compact td { padding: 6px 10px; } /* ========== REPORT BREAKDOWN ========== */ .report-breakdown { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 24px; margin: 1.5rem 0; } .report-breakdown h4 { font-size: 1rem; font-weight: 700; margin: 0 0 12px 0; padding-top: 16px; border-top: 1px solid var(--color-border); color: var(--color-text); } .report-breakdown h4:first-child { padding-top: 0; border-top: none; } .report-breakdown ul { list-style: none; padding: 0; margin: 0 0 8px 0; } .report-breakdown li { padding: 6px 0; font-size: 0.9rem; line-height: 1.5; color: var(--color-text); } .report-breakdown li code { background: var(--color-surface-2); padding: 1px 5px; border-radius: 4px; font-size: 0.8125rem; } /* ========== CHANGES EXAMPLES ========== */ .changes-examples { margin: 1rem 0 2rem 0; } /* ========== RESPONSIVE: Screenshot figures ========== */ @media (max-width: 640px) { .screenshot-figure figcaption { padding: 10px 14px; font-size: 0.8125rem; } .data-table { font-size: 0.8rem; } .data-table th, .data-table td { padding: 6px 8px; } .data-table.compact th, .data-table.compact td { padding: 5px 6px; } .report-breakdown { padding: 16px; } }