/* ========================================================= SEO AUDIT TOOL CLEAN VERSION — PART 1/4 FOUNDATION - CSS variables - Report wrapper - Typography - Report header - Report toolbar foundation - Cards - Card headers - Status badges - Card preview foundation IMPORTANT: Everything is scoped to #seo-audit-report to avoid affecting Elementor / WordPress globally. ========================================================= */ /* ========================================================= 01. DESIGN TOKENS ========================================================= */ #seo-audit-report { --seo-primary: #00386F; --seo-secondary: #333333; --seo-text: #1C2224; --seo-accent: #F1414F; --seo-background: #EEEEEE; --seo-background-soft: #E5EBF3; --seo-white: #FFFFFF; --seo-success: #22C55E; --seo-warning: #F59E0B; --seo-danger: #EF4444; --seo-border: #D9E0E8; --seo-border-light: #E5EAF2; --seo-muted: #687482; --seo-muted-light: #8A95A3; --seo-card-radius: 10px; --seo-small-radius: 7px; --seo-shadow: 0 2px 10px rgba(28, 34, 36, 0.05); --seo-shadow-hover: 0 5px 18px rgba(28, 34, 36, 0.08); --seo-transition: 0.2s ease; --seo-content-width: 1100px; --seo-space-1: 4px; --seo-space-2: 8px; --seo-space-3: 12px; --seo-space-4: 16px; --seo-space-5: 20px; --seo-space-6: 24px; --seo-space-7: 32px; --seo-space-8: 40px; box-sizing: border-box; width: 100%; max-width: var(--seo-content-width); margin-left: auto; margin-right: auto; color: var(--seo-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; text-align: left; } /* ========================================================= 02. BOX SIZING ========================================================= */ #seo-audit-report *, #seo-audit-report *::before, #seo-audit-report *::after { box-sizing: border-box; } /* ========================================================= 03. BASIC RESET ========================================================= */ #seo-audit-report h1, #seo-audit-report h2, #seo-audit-report h3, #seo-audit-report h4, #seo-audit-report h5, #seo-audit-report h6, #seo-audit-report p { margin-top: 0; margin-bottom: 0; } #seo-audit-report button, #seo-audit-report input, #seo-audit-report textarea, #seo-audit-report select { font: inherit; } #seo-audit-report button { margin: 0; } #seo-audit-report img { max-width: 100%; height: auto; } /* ========================================================= 04. REPORT HEADER ========================================================= */ #seo-audit-report .seo-report-header { width: 100%; margin-bottom: var(--seo-space-6); padding: var(--seo-space-6); background: var(--seo-white); border: 1px solid var(--seo-border-light); border-radius: var(--seo-card-radius); box-shadow: var(--seo-shadow); } #seo-audit-report .seo-report-header-main { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--seo-space-6); } #seo-audit-report .seo-report-heading { min-width: 0; flex: 1 1 auto; } #seo-audit-report .seo-report-title { margin: 0; color: var(--seo-primary); font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -0.2px; } #seo-audit-report .seo-report-subtitle { margin-top: 6px; color: var(--seo-muted); font-size: 13px; line-height: 1.5; } #seo-audit-report .seo-report-url { display: inline-block; max-width: 100%; margin-top: 10px; padding: 6px 10px; background: var(--seo-background-soft); border-radius: 6px; color: var(--seo-primary); font-size: 12px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; } /* ========================================================= 05. REPORT HEADER SCORE / SUMMARY AREA ========================================================= */ #seo-audit-report .seo-report-summary { display: flex; align-items: center; gap: var(--seo-space-4); flex: 0 0 auto; } #seo-audit-report .seo-report-score { min-width: 90px; padding: 12px 16px; background: var(--seo-background-soft); border: 1px solid var(--seo-border-light); border-radius: var(--seo-small-radius); text-align: center; } #seo-audit-report .seo-report-score-label { display: block; margin-bottom: 3px; color: var(--seo-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } #seo-audit-report .seo-report-score-value { display: block; color: var(--seo-primary); font-size: 24px; font-weight: 700; line-height: 1.1; } /* ========================================================= 06. REPORT TOOLBAR ========================================================= */ #seo-audit-report .seo-report-toolbar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-bottom: var(--seo-space-5); } #seo-audit-report .seo-report-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 7px 12px; background: var(--seo-white); border: 1px solid var(--seo-border); border-radius: 6px; color: var(--seo-primary); font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; transition: background var(--seo-transition), border-color var(--seo-transition), color var(--seo-transition), box-shadow var(--seo-transition), transform var(--seo-transition); } #seo-audit-report .seo-report-tool:hover { background: var(--seo-background-soft); border-color: var(--seo-primary); box-shadow: 0 2px 6px rgba(0, 56, 111, 0.08); } #seo-audit-report .seo-report-tool:active { transform: translateY(1px); } #seo-audit-report .seo-report-tool:focus-visible { outline: 2px solid var(--seo-accent); outline-offset: 2px; } /* ========================================================= 07. REPORT CARDS ========================================================= */ #seo-audit-report .seo-card { width: 100%; margin-bottom: var(--seo-space-5); background: var(--seo-white); border: 1px solid var(--seo-border-light); border-radius: var(--seo-card-radius); box-shadow: var(--seo-shadow); overflow: hidden; transition: box-shadow var(--seo-transition), border-color var(--seo-transition); } #seo-audit-report .seo-card:hover { border-color: var(--seo-border); box-shadow: var(--seo-shadow-hover); } /* ========================================================= 08. CARD HEADER ========================================================= */ #seo-audit-report .seo-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--seo-space-5); padding: 18px 20px; border-bottom: 1px solid var(--seo-border-light); } #seo-audit-report .seo-card-heading { min-width: 0; flex: 1 1 auto; } #seo-audit-report .seo-card-title { margin: 0; color: var(--seo-primary); font-size: 16px; font-weight: 700; line-height: 1.3; } #seo-audit-report .seo-card-summary { margin-top: 4px; color: var(--seo-muted); font-size: 12px; line-height: 1.45; } /* ========================================================= 09. STATUS BADGES ========================================================= */ #seo-audit-report .seo-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 24px; padding: 4px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1.2; white-space: nowrap; } /* SUCCESS */ #seo-audit-report .seo-badge-success { background: rgba(34, 197, 94, 0.10); color: #15803D; } /* WARNING */ #seo-audit-report .seo-badge-warning { background: rgba(245, 158, 11, 0.12); color: #B45309; } /* DANGER */ #seo-audit-report .seo-badge-danger { background: rgba(239, 68, 68, 0.10); color: #B91C1C; } /* INFO */ #seo-audit-report .seo-badge-info { background: rgba(0, 56, 111, 0.08); color: var(--seo-primary); } /* ========================================================= 10. CARD PREVIEW ========================================================= */ #seo-audit-report .seo-card-preview { padding: 18px 20px; } #seo-audit-report .seo-preview-grid { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 10px; } /* ========================================================= 11. PREVIEW ITEM ========================================================= */ #seo-audit-report .seo-preview-item { min-width: 0; padding: 12px; background: var(--seo-background-soft); border: 1px solid var(--seo-border-light); border-radius: var(--seo-small-radius); } #seo-audit-report .seo-preview-label { display: block; margin-bottom: 5px; color: var(--seo-muted); font-size: 10px; font-weight: 600; line-height: 1.3; } #seo-audit-report .seo-preview-value { display: block; color: var(--seo-text); font-size: 13px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; } /* ========================================================= 12. STAT ITEM ========================================================= */ #seo-audit-report .seo-stat-item { min-width: 0; padding: 12px; background: var(--seo-background-soft); border: 1px solid var(--seo-border-light); border-radius: var(--seo-small-radius); } #seo-audit-report .seo-stat-label { display: block; margin-bottom: 4px; color: var(--seo-muted); font-size: 10px; font-weight: 600; line-height: 1.3; } #seo-audit-report .seo-stat-value { display: block; color: var(--seo-primary); font-size: 18px; font-weight: 700; line-height: 1.2; } #seo-audit-report .seo-stat-unit { display: inline-block; margin-left: 3px; color: var(--seo-muted); font-size: 10px; font-weight: 500; } /* ========================================================= 13. CARD ACTION AREA ========================================================= */ #seo-audit-report .seo-card-actions { display: flex; align-items: center; justify-content: flex-start; padding: 0 20px 16px; } /* ========================================================= 14. VIEW DETAILS BUTTON ========================================================= */ #seo-audit-report .seo-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 0; background: transparent; border: 0; color: var(--seo-primary); font-size: 11px; font-weight: 700; line-height: 1.4; cursor: pointer; transition: color var(--seo-transition); } #seo-audit-report .seo-toggle:hover { color: var(--seo-accent); } #seo-audit-report .seo-toggle:focus-visible { outline: 2px solid var(--seo-accent); outline-offset: 3px; border-radius: 3px; } #seo-audit-report .seo-toggle-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 12px; transition: transform var(--seo-transition); } #seo-audit-report .seo-toggle[aria-expanded="true"] .seo-toggle-icon { transform: translateY(-1px); } /* ========================================================= 15. DETAILS CONTAINER ========================================================= */ #seo-audit-report .seo-details { padding: 20px; background: #FAFBFD; border-top: 1px solid var(--seo-border-light); } #seo-audit-report .seo-details[hidden] { display: none !important; } #seo-audit-report .seo-details.is-open { display: block; } /* ========================================================= 16. DETAIL HEADING ========================================================= */ #seo-audit-report .seo-detail-heading { margin-bottom: 14px; } #seo-audit-report .seo-detail-heading h4 { margin: 0; color: var(--seo-text); font-size: 13px; font-weight: 700; line-height: 1.35; } #seo-audit-report .seo-detail-heading p { margin-top: 3px; color: var(--seo-muted); font-size: 11px; line-height: 1.5; } /* ========================================================= 17. DETAIL GRID ========================================================= */ #seo-audit-report .seo-detail-grid { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 10px; } #seo-audit-report .seo-detail-item { min-width: 0; padding: 12px; background: var(--seo-white); border: 1px solid var(--seo-border-light); border-radius: 7px; } #seo-audit-report .seo-detail-item-label { display: block; margin-bottom: 5px; color: var(--seo-muted); font-size: 10px; font-weight: 600; line-height: 1.3; } #seo-audit-report .seo-detail-item-value { display: block; color: var(--seo-text); font-size: 12px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; } /* ========================================================= 18. FULL WIDTH DETAIL ITEM ========================================================= */ #seo-audit-report .seo-detail-item-full { grid-column: 1 / -1; } /* ========================================================= 19. INLINE STATUS ========================================================= */ #seo-audit-report .seo-inline-status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 5px; font-size: 10px; font-weight: 700; } #seo-audit-report .seo-inline-success { background: rgba(34, 197, 94, 0.10); color: #15803D; } #seo-audit-report .seo-inline-warning { background: rgba(245, 158, 11, 0.12); color: #B45309; } #seo-audit-report .seo-inline-danger { background: rgba(239, 68, 68, 0.10); color: #B91C1C; } /* ========================================================= 20. EMPTY STATE ========================================================= */ #seo-audit-report .seo-empty { padding: 16px; background: var(--seo-white); border: 1px dashed var(--seo-border); border-radius: 7px; color: var(--seo-muted); font-size: 12px; line-height: 1.5; text-align: center; } /* ========================================================= 21. DETAIL SECTION ========================================================= */ #seo-audit-report .seo-detail-section { margin-top: 22px; } #seo-audit-report .seo-detail-section:first-child { margin-top: 0; } /* ========================================================= 22. LONG TEXT ========================================================= */ #seo-audit-report .seo-long-text { max-height: 280px; padding: 14px; background: var(--seo-white); border: 1px solid var(--seo-border-light); border-radius: 7px; color: var(--seo-text); font-size: 12px; line-height: 1.7; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; } /* ========================================================= 23. CODE BLOCK ========================================================= */ #seo-audit-report .seo-code-block { max-height: 360px; margin: 0; padding: 14px; background: #F3F6FA; border: 1px solid var(--seo-border-light); border-radius: 7px; color: var(--seo-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 11px; line-height: 1.6; overflow: auto; white-space: pre; } /* ========================================================= 24. URL DISPLAY ========================================================= */ #seo-audit-report .seo-url-display { min-width: 0; padding: 10px 12px; background: var(--seo-white); border: 1px solid var(--seo-border-light); border-radius: 6px; color: var(--seo-primary); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; } /* ========================================================= 25. DIRECTIVE VALUE ========================================================= */ #seo-audit-report .seo-directive-value { min-width: 0; } #seo-audit-report .seo-directive-value code { display: block; padding: 10px 12px; background: var(--seo-white); border: 1px solid var(--seo-border-light); border-radius: 6px; color: var(--seo-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 11px; line-height: 1.5; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; } /* ========================================================= 26. TEXT EMPTY ========================================================= */ #seo-audit-report .seo-text-empty { color: var(--seo-muted-light); font-style: italic; } /* ========================================================= 27. PROGRESS BAR ========================================================= */ #seo-audit-report .seo-progress { width: 100%; } #seo-audit-report .seo-progress-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } #seo-audit-report .seo-progress-label { color: var(--seo-muted); font-size: 10px; font-weight: 600; } #seo-audit-report .seo-progress-value { color: var(--seo-text); font-size: 10px; font-weight: 700; } #seo-audit-report .seo-progress-track { width: 100%; height: 6px; background: #E7EBF0; border-radius: 999px; overflow: hidden; } #seo-audit-report .seo-progress-fill { height: 100%; min-width: 0; border-radius: inherit; background: var(--seo-primary); transition: width 0.35s ease; } #seo-audit-report .seo-progress-success { background: var(--seo-success); } #seo-audit-report .seo-progress-warning { background: var(--seo-warning); } #seo-audit-report .seo-progress-danger { background: var(--seo-danger); } /* ========================================================= 28. STATUS SUMMARY ========================================================= */ #seo-audit-report .seo-status-summary { display: flex; align-items: center; gap: 7px; color: var(--seo-text); font-size: 12px; font-weight: 600; } #seo-audit-report .seo-status-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--seo-muted); } #seo-audit-report .seo-status-summary-success .seo-status-dot { background: var(--seo-success); } #seo-audit-report .seo-status-summary-warning .seo-status-dot { background: var(--seo-warning); } #seo-audit-report .seo-status-summary-danger .seo-status-dot { background: var(--seo-danger); } /* ========================================================= 29. GENERAL METRICS ========================================================= */ #seo-audit-report .seo-metric { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; background: var(--seo-background-soft); border: 1px solid var(--seo-border-light); border-radius: 5px; color: var(--seo-muted); font-size: 10px; } #seo-audit-report .seo-metric strong { color: var(--seo-primary); font-weight: 700; } /* ========================================================= 30. SECONDARY METRICS ========================================================= */ #seo-audit-report .seo-link-secondary-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; } /* ========================================================= 31. CONTENT PRIMARY ========================================================= */ #seo-audit-report .seo-content-primary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding: 14px; background: var(--seo-background-soft); border: 1px solid var(--seo-border-light); border-radius: 7px; } #seo-audit-report .seo-content-word-count { min-width: 0; } #seo-audit-report .seo-content-word-count strong { display: block; color: var(--seo-primary); font-size: 24px; font-weight: 700; line-height: 1.15; } #seo-audit-report .seo-reading-time { display: inline-flex; align-items: center; padding: 6px 9px; background: var(--seo-white); border: 1px solid var(--seo-border-light); border-radius: 5px; color: var(--seo-muted); font-size: 10px; font-weight: 600; } /* ========================================================= 32. IMAGE / CANONICAL / ROBOTS PREVIEW FOUNDATIONS ========================================================= */ #seo-audit-report .seo-image-progress, #seo-audit-report .seo-meta-progress { display: grid; gap: 12px; margin-top: 12px; } #seo-audit-report .seo-canonical-preview, #seo-audit-report .seo-robots-preview, #seo-audit-report .seo-og-preview, #seo-audit-report .seo-twitter-preview, #seo-audit-report .seo-html-overview, #seo-audit-report .seo-schema-overview, #seo-audit-report .seo-technical-overview, #seo-audit-report .seo-image-overview, #seo-audit-report .seo-link-overview, #seo-audit-report .seo-content-overview { width: 100%; } /* ========================================================= 33. HEADING SUMMARY ========================================================= */ #seo-audit-report .seo-heading-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 12px; } #seo-audit-report .seo-heading-total { color: var(--seo-muted); font-size: 11px; font-weight: 600; } /* ========================================================= 34. DETAIL TABLE FOUNDATION ========================================================= */ #seo-audit-report .seo-table-wrapper { width: 100%; overflow-x: auto; border: 1px solid var(--seo-border-light); border-radius: 7px; background: var(--seo-white); } #seo-audit-report .seo-table { width: 100%; min-width: 650px; margin: 0; border-collapse: collapse; border-spacing: 0; background: var(--seo-white); } #seo-audit-report .seo-table th, #seo-audit-report .seo-table td { padding: 10px 12px; border-bottom: 1px solid var(--seo-border-light); color: var(--seo-text); font-size: 11px; line-height: 1.5; text-align: left; vertical-align: top; } #seo-audit-report .seo-table th { background: var(--seo-background-soft); color: var(--seo-primary); font-weight: 700; white-space: nowrap; } #seo-audit-report .seo-table tr:last-child td { border-bottom: 0; } #seo-audit-report .seo-table td { overflow-wrap: anywhere; } #seo-audit-report .seo-table tbody tr:hover td { background: #FAFBFC; } /* ========================================================= 35. TOOLBAR INSIDE CARD ========================================================= */ #seo-audit-report .seo-card-toolbar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; padding: 0 20px 10px; } #seo-audit-report .seo-tool-button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 27px; padding: 5px 8px; background: transparent; border: 1px solid transparent; border-radius: 5px; color: var(--seo-muted); font-size: 10px; font-weight: 600; line-height: 1; cursor: pointer; transition: color var(--seo-transition), background var(--seo-transition), border-color var(--seo-transition); } #seo-audit-report .seo-tool-button:hover { background: var(--seo-background-soft); border-color: var(--seo-border); color: var(--seo-primary); } #seo-audit-report .seo-tool-button:focus-visible { outline: 2px solid var(--seo-accent); outline-offset: 2px; } #seo-audit-report .seo-tool-button.is-feedback { color: var(--seo-success); } #seo-audit-report .seo-tool-icon { font-size: 12px; line-height: 1; } #seo-audit-report .seo-tool-label { line-height: 1; } /* ========================================================= 36. LOADING STATE ========================================================= */ #seo-audit-report .seo-audit-loading { display: flex; align-items: center; justify-content: center; min-height: 220px; padding: 30px; background: var(--seo-white); border: 1px solid var(--seo-border-light); border-radius: var(--seo-card-radius); } #seo-audit-report .seo-loading-content { max-width: 420px; text-align: center; } #seo-audit-report .seo-loading-content h3 { margin: 16px 0 5px; color: var(--seo-primary); font-size: 17px; font-weight: 700; } #seo-audit-report .seo-loading-content p { color: var(--seo-muted); font-size: 12px; line-height: 1.6; } /* ========================================================= 37. LOADING SPINNER ========================================================= */ #seo-audit-report .seo-loading-spinner { width: 34px; height: 34px; margin: 0 auto; border: 3px solid var(--seo-background-soft); border-top-color: var(--seo-primary); border-radius: 50%; animation: seo-audit-spin 0.8s linear infinite; } @keyframes seo-audit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================= 38. ERROR STATE ========================================================= */ #seo-audit-report .seo-audit-error { display: flex; align-items: flex-start; gap: 14px; padding: 20px; background: var(--seo-white); border: 1px solid rgba( 239, 68, 68, 0.25 ); border-left: 4px solid var(--seo-danger); border-radius: var(--seo-card-radius); } #seo-audit-report .seo-error-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 30px; background: rgba( 239, 68, 68, 0.10 ); border-radius: 50%; color: var(--seo-danger); font-size: 18px; font-weight: 700; } #seo-audit-report .seo-error-content h3 { margin: 0 0 4px; color: var(--seo-text); font-size: 14px; font-weight: 700; } #seo-audit-report .seo-error-content p { margin: 0; color: var(--seo-muted); font-size: 12px; line-height: 1.6; } #seo-audit-report .seo-error-content small { display: block; margin-top: 8px; color: var(--seo-muted-light); font-size: 10px; } /* ========================================================= 39. DISABLED BUTTON ========================================================= */ #seo-audit-report button:disabled { opacity: 0.6; cursor: not-allowed; } /* ========================================================= 40. ACCESSIBILITY ========================================================= */ #seo-audit-report button:focus:not(:focus-visible) { outline: none; } /* ========================================================= 41. REDUCED MOTION ========================================================= */ @media ( prefers-reduced-motion: reduce ) { #seo-audit-report *, #seo-audit-report *::before, #seo-audit-report *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================= END OF PART 1/4 ========================================================= */ /* ========================================================= SEO AUDIT TOOL CLEAN VERSION — PART 2/4 REPORT CONTENT - Meta information - Headings - Canonical - Robots - Open Graph - Twitter Cards - HTML information - Schema - Technical information - Images - Links - Content - Detail content - Tables - Toolbars ========================================================= */ /* ========================================================= 01. META INFORMATION ========================================================= */ #seo-audit-report .seo-meta-grid { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 10px; } #seo-audit-report .seo-meta-item { min-width: 0; padding: 13px; background: var(--seo-background-soft); border: 1px solid var(--seo-border-light); border-radius: var(--seo-small-radius); } #seo-audit-report .seo-meta-item-label { display: block; margin-bottom: 5px; color: var(--seo-muted); font-size: 10px; font-weight: 600; line-height: 1.3; } #seo-audit-report .seo-meta-item-value { display: block; color: var(--seo-text); font-size: 13px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; } #seo-audit-report .seo-meta-item-value.is-good { color: #15803D; } #seo-audit-report .seo-meta-item-value.is-warning { color: #B45309; } #seo-audit-report .seo-meta-item-value.is-danger { color: #B91C1C; } /* ========================================================= 02. META TITLE / DESCRIPTION ========================================================= */ #seo-audit-report .seo-meta-title { grid-column: 1 / -1; } #seo-audit-report .seo-meta-description { grid-column: 1 / -1; } #seo-audit-report .seo-meta-text { color: var(--seo-text); font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; } /* ========================================================= 03. CHARACTER LENGTH ========================================================= */ #seo-audit-report .seo-character-info { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; } #seo-audit-report .seo-character-count { color: var(--seo-primary); font-size: 11px; font-weight: 700; } #seo-audit-report .seo-character-recommendation { color: var(--seo-muted); font-size: 10px; } /* ========================================================= 04. HEADING STRUCTURE ========================================================= */ #seo-audit-report .seo-heading-grid { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 10px; } #seo-audit-report .seo-heading-item { position: relative; min-width: 0; padding: 14px; background: var(--seo-background-soft); border: 1px solid var(--seo-border-light); border-radius: var(--seo-small-radius); } #seo-audit-report .seo-heading-label { display: block; margin-bottom: 4px; color: var(--seo-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; } #seo-audit-report .seo-heading-count { display: block; color: var(--seo-primary); font-size: 22px; font-weight: 700; line-height: 1.2; } #seo-audit-report .seo-heading-item.is-empty { background: rgba( 245, 158, 11, 0.06 ); border-color: rgba( 245, 158, 11, 0.22 ); } #seo-audit-report .seo-heading-item.is-empty .seo-heading-count { color: var(--seo-warning); } /* ========================================================= 05. HEADING NOTICE ========================================================= */ #seo-audit-report .seo-heading-notice { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; background: rgba( 245, 158, 11, 0.07 ); border: 1px solid rgba( 245, 158, 11, 0.20 ); border-radius: 6px; color: #92400E; font-size: 11px; line-height: 1.5; } /* ========================================================= 06. HEADING LIST ========================================================= */ #seo-audit-report .seo-heading-list { display: grid; gap: 8px; } #seo-audit-report .seo-heading-row { display: grid; grid-template-columns: 70px minmax( 0, 1fr ); gap: 12px; align-items: start; padding: 10px 12px; background: var(--seo-white); border: 1px solid var(--seo-border-light); border-radius: 6px; } #seo-audit-report .seo-heading-level { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 3px 7px; background: var(--seo-background-soft); border-radius: 5px; color: var(--seo-primary); font-size: 10px; font-weight: 700; } #seo-audit-report .seo-heading-text { min-width: 0; color: var(--seo-text); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; } /* ========================================================= 07. CANONICAL ========================================================= */ #seo-audit-report .seo-canonical-box { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: var(--seo-background-soft); border: 1px solid var(--seo-border-light); border-radius: 7px; } #seo-audit-report .seo-canonical-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 30px; background: var(--seo-white); border: 1px solid var(--seo-border-light); border-radius: 50%; color: var(--seo-primary); font-size: 14px; font-weight: 700; } #seo-audit-report .seo-canonical-content { min-width: 0; } #seo-audit-report .seo-canonical-label { display: block; margin-bottom: 4px; color: var(--seo-muted); font-size: 10px; font-weight: 600; } #seo-audit-report .seo-canonical-url { color: var(--seo-primary); font-size: 12px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; } /* ========================================================= 08. ROBOTS META ========================================================= */ #seo-audit-report .seo-robots-box { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 10px; } #seo-audit-report .seo-robots-status { display: flex; align-items: center; gap: 8px; padding: 12px; background: var(--seo-background-soft); border: 1px solid var(--seo-border-light); border-radius: 7px; } #seo-audit-report .seo-robots-status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--seo-muted); } #seo-audit-report .seo-robots-status.is-good .seo-robots-status-dot { background: var(--seo-success); } #seo-audit-report .seo-robots-status.is-warning .seo-robots-status-dot { background: var(--seo-warning); } #seo-audit-report .seo-robots-status.is-danger .seo-robots-status-dot { background: var(--seo-danger); } #seo-audit-report .seo-robots-status-text { min-width: 0; color: var(--seo-text); font-size: 11px; font-weight: 600; overflow-wrap: anywhere; } /* ========================================================= 09. OPEN GRAPH ========================================================= */ #seo-audit-report .seo-og-grid { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 10px; } #seo-audit-report .seo-og-item { min-width: 0; padding: 12px; background: var(--seo-background-soft); border: 1px solid var(--seo-border-light); border-radius: 7px; } #seo-audit-report .seo-og-label { display: block; margin-bottom: 5px; color: var(--seo-muted); font-size: 10px; font-weight: 700; line-height: 1.3; } #seo-audit-report .seo-og-value { display: block; color: var(--seo-text); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; } #seo-audit-report .seo-og-value.is-missing { color: var(--seo-muted-light); font-style: italic; } /* ========================================================= 10. TWITTER CARDS ========================================================= */ #seo-audit-report .seo-twitter-grid { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 10px; } #seo-audit-report .seo-twitter-item { min-width: 0; padding: 12px; background: var(--seo-background-soft); border: 1px solid var(--seo-border-light); border-radius: 7px; } #seo-audit-report .seo-twitter-label { display: block; margin-bottom: 5px; color: var(--seo-muted); font-size: 10px; font-weight: 700; } #seo-audit-report .seo-twitter-value { display: block; color: var(--seo-text); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; } /* ========================================================= 11. HTML INFORMATION ========================================================= */ #seo-audit-report .seo-html-grid { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 10px; } #seo-audit-report .seo-html-item { min-width: 0; padding: 13px; background: var(--seo-background-soft); border: 1px solid var(--seo-border-light); border-radius: 7px; } #seo-audit-report .seo-html-label { display: block; margin-bottom: 5px; color: var(--seo-muted); font-size: 10px; font-weight: 600; } #seo-audit-report .seo-html-value { display: block; color: var(--seo-primary); font-size: 13px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; } /* ========================================================= 12. SCHEMA ========================================================= */ #seo-audit-report .seo-schema-summary { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 10px; } #seo-audit-report .seo-schema-stat { padding: 14px; background: var(--seo-background-soft); border: 1px solid var(--seo-border-light); border-radius: 7px; } #seo-audit-report .seo-schema-stat-label { display: block; margin-bottom: 5px; color: var(--seo-muted); font-size: 10px; font-weight: 600; } #seo-audit-report .seo-schema-stat-value { display: block; color: var(--seo-primary); font-size: 21px; font-weight: 700; line-height: 1.2; } /* ========================================================= 13. SCHEMA TYPE LIST ========================================================= */ #seo-audit-report .seo-schema-types { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } #seo-audit-report .seo-schema-type { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 8px; background: var(--seo-white); border: 1px solid var(--seo-border); border-radius: 5px; color: var(--seo-primary); font-size: 10px; font-weight: 600; } /* ========================================================= 14. TECHNICAL INFORMATION ========================================================= */ #seo-audit-report .seo-technical-grid { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 10px; } #seo-audit-report .seo-technical-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; padding: 12px; background: var(--seo-background-soft); border: 1px solid var(--seo-border-light); border-radius: 7px; } #seo-audit-report .seo-technical-label { color: var(--seo-muted); font-size: 10px; font-weight: 600; } #seo-audit-report .seo-technical-value { min-width: 0; color: var(--seo-text); font-size: 11px; font-weight: 700; text-align: right; overflow-wrap: anywhere; } #seo-audit-report .seo-technical-value.is-good { color: #15803D; } #seo-audit-report .seo-technical-value.is-warning { color: #B45309; } #seo-audit-report .seo-technical-value.is-danger { color: #B91C1C; } /* ========================================================= 15. IMAGE AUDIT ========================================================= */ #seo-audit-report .seo-image-summary { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 10px; } #seo-audit-report .seo-image-stat { min-width: 0; padding: 13px; background: var(--seo-background-soft); border: 1px solid var(--seo-border-light); border-radius: 7px; } #seo-audit-report .seo-image-stat-label { display: block; margin-bottom: 5px; color: var(--seo-muted); font-size: 10px; font-weight: 600; } #seo-audit-report .seo-image-stat-value { display: block; color: var(--seo-primary); font-size: 20px; font-weight: 700; line-height: 1.2; } /* ========================================================= 16. IMAGE ALT PROGRESS ========================================================= */ #seo-audit-report .seo-alt-progress { margin-top: 14px; } #seo-audit-report .seo-alt-progress .seo-progress-track { height: 7px; } /* ========================================================= 17. IMAGE LIST ========================================================= */ #seo-audit-report .seo-image-list { display: grid; gap: 8px; } #seo-audit-report .seo-image-row { display: grid; grid-template-columns: 42px minmax( 0, 1fr ) auto; align-items: center; gap: 10px; padding: 9px; background: var(--seo-white); border: 1px solid var(--seo-border-light); border-radius: 6px; } #seo-audit-report .seo-image-thumb { width: 42px; height: 42px; border-radius: 5px; background: var(--seo-background-soft); object-fit: cover; } #seo-audit-report .seo-image-url { min-width: 0; color: var(--seo-primary); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; } #seo-audit-report .seo-image-alt-status { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 5px; font-size: 9px; font-weight: 700; white-space: nowrap; } #seo-audit-report .seo-image-alt-status.is-good { background: rgba( 34, 197, 94, 0.10 ); color: #15803D; } #seo-audit-report .seo-image-alt-status.is-warning { background: rgba( 245, 158, 11, 0.12 ); color: #B45309; } /* ========================================================= 18. LINK ANALYSIS ========================================================= */ #seo-audit-report .seo-link-summary { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 10px; } #seo-audit-report .seo-link-stat { min-width: 0; padding: 13px; background: var(--seo-background-soft); border: 1px solid var(--seo-border-light); border-radius: 7px; } #seo-audit-report .seo-link-stat-label { display: block; margin-bottom: 5px; color: var(--seo-muted); font-size: 10px; font-weight: 600; } #seo-audit-report .seo-link-stat-value { display: block; color: var(--seo-primary); font-size: 20px; font-weight: 700; line-height: 1.2; } /* ========================================================= 19. LINK TYPE BADGES ========================================================= */ #seo-audit-report .seo-link-types { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; } #seo-audit-report .seo-link-type { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 8px; background: var(--seo-background-soft); border: 1px solid var(--seo-border-light); border-radius: 5px; color: var(--seo-muted); font-size: 10px; font-weight: 600; } #seo-audit-report .seo-link-type strong { margin-left: 4px; color: var(--seo-primary); } /* ========================================================= 20. LINK ROW ========================================================= */ #seo-audit-report .seo-link-row { display: grid; grid-template-columns: minmax( 0, 1fr ) auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--seo-white); border: 1px solid var(--seo-border-light); border-radius: 6px; } #seo-audit-report .seo-link-url { min-width: 0; color: var(--seo-primary); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; } #seo-audit-report .seo-link-status { display: inline-flex; align-items: center; justify-content: center; min-height: 23px; padding: 4px 7px; background: var(--seo-background-soft); border-radius: 5px; color: var(--seo-muted); font-size: 9px; font-weight: 700; white-space: nowrap; } /* ========================================================= 21. CONTENT ANALYSIS ========================================================= */ #seo-audit-report .seo-content-summary { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 10px; } #seo-audit-report .seo-content-stat { min-width: 0; padding: 13px; background: var(--seo-background-soft); border: 1px solid var(--seo-border-light); border-radius: 7px; } #seo-audit-report .seo-content-stat-label { display: block; margin-bottom: 5px; color: var(--seo-muted); font-size: 10px; font-weight: 600; } #seo-audit-report .seo-content-stat-value { display: block; color: var(--seo-primary); font-size: 20px; font-weight: 700; line-height: 1.2; } /* ========================================================= 22. CONTENT QUALITY ========================================================= */ #seo-audit-report .seo-content-quality { margin-top: 14px; padding: 14px; background: var(--seo-white); border: 1px solid var(--seo-border-light); border-radius: 7px; } #seo-audit-report .seo-content-quality-title { margin-bottom: 10px; color: var(--seo-text); font-size: 12px; font-weight: 700; } /* ========================================================= 23. CONTENT TAGS ========================================================= */ #seo-audit-report .seo-content-tags { display: flex; flex-wrap: wrap; gap: 6px; } #seo-audit-report .seo-content-tag { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 8px; border: 1px solid var(--seo-border-light); border-radius: 5px; font-size: 10px; font-weight: 600; } #seo-audit-report .seo-content-tag-good { background: rgba( 34, 197, 94, 0.08 ); border-color: rgba( 34, 197, 94, 0.18 ); color: #15803D; } #seo-audit-report .seo-content-tag-warning { background: rgba( 245, 158, 11, 0.08 ); border-color: rgba( 245, 158, 11, 0.18 ); color: #B45309; } #seo-audit-report .seo-content-tag-danger { background: rgba( 239, 68, 68, 0.08 ); border-color: rgba( 239, 68, 68, 0.18 ); color: #B91C1C; } /* ========================================================= 24. DETAIL TABLE IMPROVEMENTS ========================================================= */ #seo-audit-report .seo-details .seo-table-wrapper { margin-top: 14px; } #seo-audit-report .seo-details .seo-table th { position: sticky; top: 0; z-index: 1; } #seo-audit-report .seo-table .seo-table-value { color: var(--seo-text); } #seo-audit-report .seo-table .seo-table-muted { color: var(--seo-muted); } /* ========================================================= 25. TABLE STATUS ========================================================= */ #seo-audit-report .seo-table-status { display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 3px 7px; border-radius: 5px; font-size: 9px; font-weight: 700; white-space: nowrap; } #seo-audit-report .seo-table-status-success { background: rgba( 34, 197, 94, 0.10 ); color: #15803D; } #seo-audit-report .seo-table-status-warning { background: rgba( 245, 158, 11, 0.12 ); color: #B45309; } #seo-audit-report .seo-table-status-danger { background: rgba( 239, 68, 68, 0.10 ); color: #B91C1C; } /* ========================================================= 26. DETAILS FOOTER ========================================================= */ #seo-audit-report .seo-details-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--seo-border-light); } #seo-audit-report .seo-details-note { color: var(--seo-muted); font-size: 10px; line-height: 1.5; } /* ========================================================= 27. DETAIL ACTION BUTTON ========================================================= */ #seo-audit-report .seo-detail-action { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 6px 10px; background: var(--seo-primary); border: 1px solid var(--seo-primary); border-radius: 5px; color: var(--seo-white); font-size: 10px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background var(--seo-transition), border-color var(--seo-transition), transform var(--seo-transition); } #seo-audit-report .seo-detail-action:hover { background: #002D59; border-color: #002D59; color: var(--seo-white); } #seo-audit-report .seo-detail-action:active { transform: translateY(1px); } /* ========================================================= 28. SUCCESS MESSAGE ========================================================= */ #seo-audit-report .seo-success-message { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; background: rgba( 34, 197, 94, 0.07 ); border: 1px solid rgba( 34, 197, 94, 0.18 ); border-radius: 6px; color: #15803D; font-size: 11px; line-height: 1.5; } /* ========================================================= 29. WARNING MESSAGE ========================================================= */ #seo-audit-report .seo-warning-message { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; background: rgba( 245, 158, 11, 0.07 ); border: 1px solid rgba( 245, 158, 11, 0.18 ); border-radius: 6px; color: #92400E; font-size: 11px; line-height: 1.5; } /* ========================================================= 30. DANGER MESSAGE ========================================================= */ #seo-audit-report .seo-danger-message { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; background: rgba( 239, 68, 68, 0.07 ); border: 1px solid rgba( 239, 68, 68, 0.18 ); border-radius: 6px; color: #991B1B; font-size: 11px; line-height: 1.5; } /* ========================================================= 31. BULLET LIST ========================================================= */ #seo-audit-report .seo-bullet-list { margin: 0; padding-left: 18px; color: var(--seo-text); font-size: 11px; line-height: 1.7; } #seo-audit-report .seo-bullet-list li { margin-bottom: 5px; } #seo-audit-report .seo-bullet-list li:last-child { margin-bottom: 0; } /* ========================================================= 32. CHECK LIST ========================================================= */ #seo-audit-report .seo-check-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; } #seo-audit-report .seo-check-list li { display: flex; align-items: flex-start; gap: 7px; color: var(--seo-text); font-size: 11px; line-height: 1.5; } #seo-audit-report .seo-check-list li::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; background: rgba( 34, 197, 94, 0.10 ); border-radius: 50%; color: #15803D; font-size: 9px; font-weight: 700; } /* ========================================================= 33. ISSUE LIST ========================================================= */ #seo-audit-report .seo-issue-list { display: grid; gap: 8px; } #seo-audit-report .seo-issue-item { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; background: var(--seo-white); border: 1px solid var(--seo-border-light); border-radius: 6px; } #seo-audit-report .seo-issue-marker { width: 7px; height: 7px; flex: 0 0 7px; margin-top: 5px; border-radius: 50%; background: var(--seo-danger); } #seo-audit-report .seo-issue-item.warning .seo-issue-marker { background: var(--seo-warning); } #seo-audit-report .seo-issue-item.success .seo-issue-marker { background: var(--seo-success); } #seo-audit-report .seo-issue-content { min-width: 0; flex: 1 1 auto; } #seo-audit-report .seo-issue-title { color: var(--seo-text); font-size: 11px; font-weight: 700; line-height: 1.45; } #seo-audit-report .seo-issue-description { margin-top: 3px; color: var(--seo-muted); font-size: 10px; line-height: 1.5; } /* ========================================================= 34. REPORT DIVIDER ========================================================= */ #seo-audit-report .seo-divider { width: 100%; height: 1px; margin: 18px 0; background: var(--seo-border-light); } /* ========================================================= 35. SMALL LABEL ========================================================= */ #seo-audit-report .seo-small-label { display: inline-block; margin-bottom: 5px; color: var(--seo-muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } /* ========================================================= 36. PRIMARY VALUE ========================================================= */ #seo-audit-report .seo-primary-value { color: var(--seo-primary); font-size: 18px; font-weight: 700; line-height: 1.25; } /* ========================================================= 37. ACCENT VALUE ========================================================= */ #seo-audit-report .seo-accent-value { color: var(--seo-accent); font-weight: 700; } /* ========================================================= 38. MUTED VALUE ========================================================= */ #seo-audit-report .seo-muted-value { color: var(--seo-muted); } /* ========================================================= 39. CODE INLINE ========================================================= */ #seo-audit-report code { padding: 2px 5px; background: #F1F4F7; border-radius: 4px; color: var(--seo-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 0.9em; overflow-wrap: anywhere; } /* ========================================================= 40. CARD LAST CHILD ========================================================= */ #seo-audit-report .seo-card:last-child { margin-bottom: 0; } /* ========================================================= 41. CARD OPEN STATE ========================================================= */ #seo-audit-report .seo-card:has( .seo-toggle[aria-expanded="true"] ) { border-color: rgba( 0, 56, 111, 0.20 ); } /* ========================================================= 42. PRINT-SAFE CONTENT ========================================================= */ #seo-audit-report .seo-details, #seo-audit-report .seo-table-wrapper, #seo-audit-report .seo-long-text, #seo-audit-report .seo-code-block { max-width: 100%; } /* ========================================================= 43. TEXT WRAPPING SAFETY ========================================================= */ #seo-audit-report .seo-card, #seo-audit-report .seo-card *, #seo-audit-report .seo-details, #seo-audit-report .seo-details * { overflow-wrap: anywhere; } /* ========================================================= 44. DO NOT BREAK BUTTON LABELS ========================================================= */ #seo-audit-report .seo-toggle, #seo-audit-report .seo-tool-button, #seo-audit-report .seo-report-tool, #seo-audit-report .seo-detail-action { overflow-wrap: normal; word-break: normal; } /* ========================================================= 45. HOVER IMAGE ========================================================= */ #seo-audit-report .seo-image-thumb { transition: transform var(--seo-transition); } #seo-audit-report .seo-image-thumb:hover { transform: scale(1.03); } /* ========================================================= 46. LINK HOVER ========================================================= */ #seo-audit-report .seo-link-url:hover, #seo-audit-report .seo-url-display:hover, #seo-audit-report .seo-canonical-url:hover { color: var(--seo-accent); } /* ========================================================= 47. FOCUS LINK ========================================================= */ #seo-audit-report a:focus-visible { outline: 2px solid var(--seo-accent); outline-offset: 2px; } /* ========================================================= 48. NO DATA ========================================================= */ #seo-audit-report .seo-no-data { display: flex; align-items: center; justify-content: center; min-height: 70px; padding: 14px; background: var(--seo-background-soft); border: 1px dashed var(--seo-border); border-radius: 7px; color: var(--seo-muted); font-size: 11px; text-align: center; } /* ========================================================= 49. REPORT END SPACING ========================================================= */ #seo-audit-report .seo-report-end { height: 1px; margin-top: 8px; } /* ========================================================= END OF PART 2/4 ========================================================= */ /* ========================================================= SEO AUDIT TOOL CLEAN VERSION — PART 3/4 RESPONSIVE DESIGN Breakpoints: - Large desktop - Desktop - Tablet - Mobile - Small mobile IMPORTANT: Everything remains scoped to #seo-audit-report. ========================================================= */ /* ========================================================= 01. LARGE DESKTOP ========================================================= */ @media (min-width: 1200px) { #seo-audit-report { max-width: var(--seo-content-width); } #seo-audit-report .seo-card-header { padding: 18px 22px; } #seo-audit-report .seo-card-preview { padding: 20px 22px; } #seo-audit-report .seo-card-actions { padding: 0 22px 17px; } #seo-audit-report .seo-details { padding: 22px; } } /* ========================================================= 02. STANDARD DESKTOP ========================================================= */ @media (min-width: 993px) and (max-width: 1199px) { #seo-audit-report { max-width: 94%; } #seo-audit-report .seo-heading-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } #seo-audit-report .seo-html-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } #seo-audit-report .seo-image-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); } #seo-audit-report .seo-link-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); } #seo-audit-report .seo-content-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ========================================================= 03. TABLET 769px - 992px ========================================================= */ @media (min-width: 769px) and (max-width: 992px) { #seo-audit-report { width: 100%; max-width: 94%; margin-left: auto; margin-right: auto; font-size: 13px; } /* ----------------------------------------------------- Report Header ----------------------------------------------------- */ #seo-audit-report .seo-report-header { padding: 20px; margin-bottom: 20px; } #seo-audit-report .seo-report-header-main { gap: 18px; } #seo-audit-report .seo-report-title { font-size: 23px; } #seo-audit-report .seo-report-summary { gap: 10px; } #seo-audit-report .seo-report-score { min-width: 82px; padding: 10px 12px; } #seo-audit-report .seo-report-score-value { font-size: 21px; } /* ----------------------------------------------------- Toolbar ----------------------------------------------------- */ #seo-audit-report .seo-report-toolbar { justify-content: flex-start; margin-bottom: 16px; } /* ----------------------------------------------------- Cards ----------------------------------------------------- */ #seo-audit-report .seo-card { margin-bottom: 16px; } #seo-audit-report .seo-card-header { padding: 16px 18px; gap: 14px; } #seo-audit-report .seo-card-title { font-size: 15px; } #seo-audit-report .seo-card-summary { font-size: 11px; } #seo-audit-report .seo-card-preview { padding: 16px 18px; } #seo-audit-report .seo-card-actions { padding: 0 18px 15px; } #seo-audit-report .seo-details { padding: 18px; } #seo-audit-report .seo-card-toolbar { padding: 0 18px 9px; } /* ----------------------------------------------------- Two Column Grids ----------------------------------------------------- */ #seo-audit-report .seo-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #seo-audit-report .seo-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #seo-audit-report .seo-og-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #seo-audit-report .seo-twitter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #seo-audit-report .seo-technical-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #seo-audit-report .seo-robots-box { grid-template-columns: repeat(2, minmax(0, 1fr)); } #seo-audit-report .seo-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ----------------------------------------------------- Three Column Grids ----------------------------------------------------- */ #seo-audit-report .seo-heading-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } #seo-audit-report .seo-html-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #seo-audit-report .seo-schema-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* ----------------------------------------------------- Four Column Grids ----------------------------------------------------- */ #seo-audit-report .seo-image-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } #seo-audit-report .seo-link-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } #seo-audit-report .seo-content-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ----------------------------------------------------- Image Rows ----------------------------------------------------- */ #seo-audit-report .seo-image-row { grid-template-columns: 40px minmax(0, 1fr) auto; } #seo-audit-report .seo-image-thumb { width: 40px; height: 40px; } /* ----------------------------------------------------- Link Rows ----------------------------------------------------- */ #seo-audit-report .seo-link-row { grid-template-columns: minmax(0, 1fr) auto; } /* ----------------------------------------------------- Heading Rows ----------------------------------------------------- */ #seo-audit-report .seo-heading-row { grid-template-columns: 60px minmax(0, 1fr); } /* ----------------------------------------------------- Content Primary ----------------------------------------------------- */ #seo-audit-report .seo-content-primary { gap: 12px; } } /* ========================================================= 04. TABLET PORTRAIT / SMALL TABLET 600px - 768px ========================================================= */ @media (min-width: 600px) and (max-width: 768px) { #seo-audit-report { width: 100%; max-width: 94%; margin-left: auto; margin-right: auto; } /* ----------------------------------------------------- Header ----------------------------------------------------- */ #seo-audit-report .seo-report-header-main { flex-direction: column; align-items: stretch; } #seo-audit-report .seo-report-summary { width: 100%; justify-content: flex-start; } #seo-audit-report .seo-report-score { flex: 0 0 auto; } /* ----------------------------------------------------- Main Grids ----------------------------------------------------- */ #seo-audit-report .seo-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #seo-audit-report .seo-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #seo-audit-report .seo-og-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #seo-audit-report .seo-twitter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #seo-audit-report .seo-technical-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #seo-audit-report .seo-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #seo-audit-report .seo-heading-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #seo-audit-report .seo-html-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #seo-audit-report .seo-schema-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } #seo-audit-report .seo-image-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } #seo-audit-report .seo-link-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } #seo-audit-report .seo-content-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ----------------------------------------------------- Card Header ----------------------------------------------------- */ #seo-audit-report .seo-card-header { align-items: flex-start; } /* ----------------------------------------------------- Canonical ----------------------------------------------------- */ #seo-audit-report .seo-canonical-box { padding: 12px; } /* ----------------------------------------------------- Tables ----------------------------------------------------- */ #seo-audit-report .seo-table { min-width: 600px; } } /* ========================================================= 05. MOBILE Up to 599px ========================================================= */ @media (max-width: 599px) { #seo-audit-report { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; padding-left: 12px; padding-right: 12px; font-size: 13px; } /* ----------------------------------------------------- Report Header ----------------------------------------------------- */ #seo-audit-report .seo-report-header { margin-bottom: 14px; padding: 16px; border-radius: 8px; } #seo-audit-report .seo-report-header-main { display: flex; flex-direction: column; align-items: stretch; gap: 14px; } #seo-audit-report .seo-report-title { font-size: 20px; line-height: 1.25; } #seo-audit-report .seo-report-subtitle { font-size: 11px; } #seo-audit-report .seo-report-url { display: block; width: 100%; font-size: 10px; } /* ----------------------------------------------------- Report Summary ----------------------------------------------------- */ #seo-audit-report .seo-report-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px; } #seo-audit-report .seo-report-score { width: 100%; min-width: 0; padding: 9px; } #seo-audit-report .seo-report-score-label { font-size: 9px; } #seo-audit-report .seo-report-score-value { font-size: 19px; } /* ----------------------------------------------------- Report Toolbar ----------------------------------------------------- */ #seo-audit-report .seo-report-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 7px; margin-bottom: 14px; } #seo-audit-report .seo-report-tool { width: 100%; min-height: 34px; padding: 7px 8px; font-size: 10px; } /* ----------------------------------------------------- Cards ----------------------------------------------------- */ #seo-audit-report .seo-card { margin-bottom: 12px; border-radius: 8px; } #seo-audit-report .seo-card-header { display: flex; flex-direction: column; align-items: stretch; gap: 9px; padding: 13px 14px; } #seo-audit-report .seo-card-title { font-size: 14px; } #seo-audit-report .seo-card-summary { font-size: 10px; } #seo-audit-report .seo-badge { align-self: flex-start; min-height: 22px; padding: 4px 8px; font-size: 9px; } #seo-audit-report .seo-card-preview { padding: 13px 14px; } #seo-audit-report .seo-card-actions { padding: 0 14px 13px; } #seo-audit-report .seo-card-toolbar { justify-content: flex-start; padding: 0 14px 8px; } #seo-audit-report .seo-details { padding: 14px; } /* ----------------------------------------------------- ALL TWO COLUMN GRIDS ----------------------------------------------------- */ #seo-audit-report .seo-preview-grid, #seo-audit-report .seo-meta-grid, #seo-audit-report .seo-og-grid, #seo-audit-report .seo-twitter-grid, #seo-audit-report .seo-technical-grid, #seo-audit-report .seo-robots-box, #seo-audit-report .seo-detail-grid { grid-template-columns: minmax(0, 1fr); } /* ----------------------------------------------------- META ----------------------------------------------------- */ #seo-audit-report .seo-meta-title, #seo-audit-report .seo-meta-description { grid-column: auto; } #seo-audit-report .seo-meta-item { padding: 11px; } #seo-audit-report .seo-meta-item-value { font-size: 12px; } #seo-audit-report .seo-character-info { flex-direction: column; align-items: flex-start; gap: 3px; } /* ----------------------------------------------------- HEADINGS ----------------------------------------------------- */ #seo-audit-report .seo-heading-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #seo-audit-report .seo-heading-item { padding: 11px; } #seo-audit-report .seo-heading-count { font-size: 19px; } #seo-audit-report .seo-heading-row { grid-template-columns: 50px minmax(0, 1fr); gap: 8px; padding: 9px; } #seo-audit-report .seo-heading-level { min-height: 22px; font-size: 9px; } #seo-audit-report .seo-heading-text { font-size: 11px; } /* ----------------------------------------------------- CANONICAL ----------------------------------------------------- */ #seo-audit-report .seo-canonical-box { gap: 9px; padding: 11px; } #seo-audit-report .seo-canonical-icon { width: 27px; height: 27px; flex-basis: 27px; } #seo-audit-report .seo-canonical-url { font-size: 11px; } /* ----------------------------------------------------- ROBOTS ----------------------------------------------------- */ #seo-audit-report .seo-robots-box { grid-template-columns: minmax(0, 1fr); } /* ----------------------------------------------------- HTML ----------------------------------------------------- */ #seo-audit-report .seo-html-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #seo-audit-report .seo-html-item { padding: 10px; } #seo-audit-report .seo-html-value { font-size: 11px; } /* ----------------------------------------------------- SCHEMA ----------------------------------------------------- */ #seo-audit-report .seo-schema-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } #seo-audit-report .seo-schema-stat { padding: 10px; } #seo-audit-report .seo-schema-stat-label { font-size: 9px; } #seo-audit-report .seo-schema-stat-value { font-size: 17px; } /* ----------------------------------------------------- TECHNICAL ----------------------------------------------------- */ #seo-audit-report .seo-technical-item { display: flex; flex-direction: column; gap: 4px; padding: 10px; } #seo-audit-report .seo-technical-value { width: 100%; text-align: left; } /* ----------------------------------------------------- IMAGE SUMMARY ----------------------------------------------------- */ #seo-audit-report .seo-image-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } #seo-audit-report .seo-image-stat { padding: 10px; } #seo-audit-report .seo-image-stat-label { font-size: 9px; } #seo-audit-report .seo-image-stat-value { font-size: 17px; } /* ----------------------------------------------------- IMAGE ROW ----------------------------------------------------- */ #seo-audit-report .seo-image-row { grid-template-columns: 34px minmax(0, 1fr); gap: 8px; } #seo-audit-report .seo-image-thumb { width: 34px; height: 34px; } #seo-audit-report .seo-image-alt-status { grid-column: 2; justify-self: start; } /* ----------------------------------------------------- LINK SUMMARY ----------------------------------------------------- */ #seo-audit-report .seo-link-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } #seo-audit-report .seo-link-stat { padding: 10px; } #seo-audit-report .seo-link-stat-label { font-size: 9px; } #seo-audit-report .seo-link-stat-value { font-size: 17px; } /* ----------------------------------------------------- LINK ROW ----------------------------------------------------- */ #seo-audit-report .seo-link-row { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 9px; } #seo-audit-report .seo-link-status { justify-self: start; } /* ----------------------------------------------------- CONTENT SUMMARY ----------------------------------------------------- */ #seo-audit-report .seo-content-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } #seo-audit-report .seo-content-stat { padding: 10px; } #seo-audit-report .seo-content-stat-label { font-size: 9px; } #seo-audit-report .seo-content-stat-value { font-size: 17px; } /* ----------------------------------------------------- CONTENT PRIMARY ----------------------------------------------------- */ #seo-audit-report .seo-content-primary { flex-direction: column; align-items: flex-start; padding: 11px; } #seo-audit-report .seo-content-word-count strong { font-size: 21px; } /* ----------------------------------------------------- TABLES ----------------------------------------------------- */ #seo-audit-report .seo-table-wrapper { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } #seo-audit-report .seo-table { min-width: 560px; } #seo-audit-report .seo-table th, #seo-audit-report .seo-table td { padding: 8px 9px; font-size: 10px; } /* ----------------------------------------------------- LONG TEXT ----------------------------------------------------- */ #seo-audit-report .seo-long-text { max-height: 240px; padding: 11px; font-size: 11px; } /* ----------------------------------------------------- CODE ----------------------------------------------------- */ #seo-audit-report .seo-code-block { max-height: 280px; padding: 11px; font-size: 10px; } /* ----------------------------------------------------- DETAILS FOOTER ----------------------------------------------------- */ #seo-audit-report .seo-details-footer { align-items: flex-start; flex-direction: column; } #seo-audit-report .seo-detail-action { width: 100%; } /* ----------------------------------------------------- ISSUE ITEMS ----------------------------------------------------- */ #seo-audit-report .seo-issue-item { padding: 9px; } #seo-audit-report .seo-issue-title { font-size: 10px; } #seo-audit-report .seo-issue-description { font-size: 9px; } /* ----------------------------------------------------- TOOL BUTTONS ----------------------------------------------------- */ #seo-audit-report .seo-tool-button { min-height: 26px; padding: 5px 7px; font-size: 9px; } /* ----------------------------------------------------- TOGGLE ----------------------------------------------------- */ #seo-audit-report .seo-toggle { min-height: 28px; padding: 5px 0; font-size: 10px; } /* ----------------------------------------------------- PROGRESS ----------------------------------------------------- */ #seo-audit-report .seo-progress-header { gap: 6px; } #seo-audit-report .seo-progress-label, #seo-audit-report .seo-progress-value { font-size: 9px; } /* ----------------------------------------------------- EMPTY STATE ----------------------------------------------------- */ #seo-audit-report .seo-empty, #seo-audit-report .seo-no-data { min-height: 60px; padding: 12px; font-size: 10px; } /* ----------------------------------------------------- ERROR ----------------------------------------------------- */ #seo-audit-report .seo-audit-error { gap: 10px; padding: 14px; } #seo-audit-report .seo-error-icon { width: 27px; height: 27px; flex-basis: 27px; font-size: 15px; } #seo-audit-report .seo-error-content h3 { font-size: 13px; } #seo-audit-report .seo-error-content p { font-size: 10px; } } /* ========================================================= 06. SMALL MOBILE Up to 420px ========================================================= */ @media (max-width: 420px) { #seo-audit-report { padding-left: 8px; padding-right: 8px; } /* ----------------------------------------------------- Header ----------------------------------------------------- */ #seo-audit-report .seo-report-header { padding: 13px; } #seo-audit-report .seo-report-title { font-size: 18px; } #seo-audit-report .seo-report-subtitle { font-size: 10px; } /* ----------------------------------------------------- Score ----------------------------------------------------- */ #seo-audit-report .seo-report-summary { gap: 6px; } #seo-audit-report .seo-report-score { padding: 8px 6px; } #seo-audit-report .seo-report-score-value { font-size: 17px; } /* ----------------------------------------------------- Toolbar ----------------------------------------------------- */ #seo-audit-report .seo-report-toolbar { grid-template-columns: minmax(0, 1fr); } /* ----------------------------------------------------- Cards ----------------------------------------------------- */ #seo-audit-report .seo-card-header { padding: 12px; } #seo-audit-report .seo-card-preview { padding: 12px; } #seo-audit-report .seo-card-actions { padding: 0 12px 12px; } #seo-audit-report .seo-card-toolbar { padding: 0 12px 8px; } #seo-audit-report .seo-details { padding: 12px; } /* ----------------------------------------------------- Heading Grid ----------------------------------------------------- */ #seo-audit-report .seo-heading-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } /* ----------------------------------------------------- HTML Grid ----------------------------------------------------- */ #seo-audit-report .seo-html-grid { grid-template-columns: minmax(0, 1fr); } /* ----------------------------------------------------- Schema Grid ----------------------------------------------------- */ #seo-audit-report .seo-schema-summary { grid-template-columns: minmax(0, 1fr); } /* ----------------------------------------------------- Image / Link / Content Stats ----------------------------------------------------- */ #seo-audit-report .seo-image-summary, #seo-audit-report .seo-link-summary, #seo-audit-report .seo-content-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ----------------------------------------------------- Tables ----------------------------------------------------- */ #seo-audit-report .seo-table { min-width: 520px; } /* ----------------------------------------------------- Details ----------------------------------------------------- */ #seo-audit-report .seo-detail-grid { grid-template-columns: minmax(0, 1fr); } /* ----------------------------------------------------- Canonical ----------------------------------------------------- */ #seo-audit-report .seo-canonical-box { align-items: flex-start; } /* ----------------------------------------------------- Image Rows ----------------------------------------------------- */ #seo-audit-report .seo-image-row { grid-template-columns: 32px minmax(0, 1fr); } #seo-audit-report .seo-image-thumb { width: 32px; height: 32px; } /* ----------------------------------------------------- Typography ----------------------------------------------------- */ #seo-audit-report .seo-preview-value { font-size: 11px; } #seo-audit-report .seo-detail-item-value { font-size: 11px; } #seo-audit-report .seo-detail-item { padding: 10px; } /* ----------------------------------------------------- Buttons ----------------------------------------------------- */ #seo-audit-report .seo-detail-action { min-height: 32px; } /* ----------------------------------------------------- Messages ----------------------------------------------------- */ #seo-audit-report .seo-success-message, #seo-audit-report .seo-warning-message, #seo-audit-report .seo-danger-message { padding: 9px; font-size: 10px; } } /* ========================================================= 07. VERY SMALL DEVICES Up to 360px ========================================================= */ @media (max-width: 360px) { #seo-audit-report { padding-left: 6px; padding-right: 6px; } #seo-audit-report .seo-report-title { font-size: 17px; } #seo-audit-report .seo-report-summary { grid-template-columns: minmax(0, 1fr); } #seo-audit-report .seo-heading-grid { grid-template-columns: minmax(0, 1fr); } #seo-audit-report .seo-image-summary, #seo-audit-report .seo-link-summary, #seo-audit-report .seo-content-summary { grid-template-columns: minmax(0, 1fr); } #seo-audit-report .seo-card-title { font-size: 13px; } #seo-audit-report .seo-card-summary { font-size: 9px; } #seo-audit-report .seo-table { min-width: 500px; } } /* ========================================================= 08. TOUCH DEVICES ========================================================= */ @media (hover: none) and (pointer: coarse) { #seo-audit-report .seo-toggle, #seo-audit-report .seo-tool-button, #seo-audit-report .seo-report-tool, #seo-audit-report .seo-detail-action { min-height: 32px; } #seo-audit-report .seo-toggle { padding-top: 7px; padding-bottom: 7px; } #seo-audit-report .seo-tool-button { padding-left: 9px; padding-right: 9px; } #seo-audit-report .seo-image-thumb:hover { transform: none; } } /* ========================================================= 09. PREVENT PAGE-LEVEL HORIZONTAL OVERFLOW ========================================================= */ #seo-audit-report .seo-card, #seo-audit-report .seo-report-header, #seo-audit-report .seo-card-preview, #seo-audit-report .seo-details { max-width: 100%; min-width: 0; } /* ========================================================= 10. SAFE FLEX CHILDREN ========================================================= */ #seo-audit-report .seo-report-heading, #seo-audit-report .seo-card-heading, #seo-audit-report .seo-card-actions, #seo-audit-report .seo-details-footer, #seo-audit-report .seo-content-primary { min-width: 0; } /* ========================================================= 11. SAFE GRID CHILDREN ========================================================= */ #seo-audit-report .seo-preview-grid > *, #seo-audit-report .seo-meta-grid > *, #seo-audit-report .seo-og-grid > *, #seo-audit-report .seo-twitter-grid > *, #seo-audit-report .seo-detail-grid > *, #seo-audit-report .seo-heading-grid > *, #seo-audit-report .seo-html-grid > *, #seo-audit-report .seo-schema-summary > *, #seo-audit-report .seo-technical-grid > *, #seo-audit-report .seo-image-summary > *, #seo-audit-report .seo-link-summary > *, #seo-audit-report .seo-content-summary > * { min-width: 0; } /* ========================================================= 12. URL SAFETY ========================================================= */ #seo-audit-report a, #seo-audit-report .seo-url-display, #seo-audit-report .seo-canonical-url, #seo-audit-report .seo-image-url, #seo-audit-report .seo-link-url { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } /* ========================================================= 13. FORM / INPUT SAFETY ========================================================= */ #seo-audit-report input, #seo-audit-report textarea, #seo-audit-report select { max-width: 100%; } /* ========================================================= 14. MOBILE TABLE SCROLLBAR ========================================================= */ @media (max-width: 599px) { #seo-audit-report .seo-table-wrapper::-webkit-scrollbar { height: 5px; } #seo-audit-report .seo-table-wrapper::-webkit-scrollbar-track { background: var(--seo-background-soft); } #seo-audit-report .seo-table-wrapper::-webkit-scrollbar-thumb { background: #B8C3D0; border-radius: 999px; } #seo-audit-report .seo-table-wrapper { scrollbar-width: thin; } } /* ========================================================= 15. MOBILE DETAILS ========================================================= */ @media (max-width: 599px) { #seo-audit-report .seo-details[hidden] { display: none !important; } #seo-audit-report .seo-details.is-open { display: block; } } /* ========================================================= 16. MOBILE STATUS BADGES ========================================================= */ @media (max-width: 599px) { #seo-audit-report .seo-card-header .seo-badge { max-width: 100%; white-space: normal; text-align: center; } } /* ========================================================= 17. MOBILE TOOLBAR SAFETY ========================================================= */ @media (max-width: 599px) { #seo-audit-report .seo-card-toolbar { display: flex; align-items: center; flex-wrap: wrap; } #seo-audit-report .seo-tool-button { flex: 0 0 auto; } } /* ========================================================= 18. MOBILE PRINT CONTAINER SAFETY ========================================================= */ @media (max-width: 599px) { #seo-audit-report .seo-code-block, #seo-audit-report .seo-long-text { width: 100%; max-width: 100%; overflow-x: auto; } } /* ========================================================= END OF PART 3/4 ========================================================= */ /* ========================================================= SEO AUDIT TOOL CLEAN VERSION — PART 4/4 FINALIZATION - Browser safety - Elementor protection - Accessibility - Loading state - Print / PDF styling - Page-break handling - Final responsive protection ========================================================= */ /* ========================================================= 01. FINAL BOX SIZING ========================================================= */ #seo-audit-report, #seo-audit-report *, #seo-audit-report *::before, #seo-audit-report *::after { box-sizing: border-box; } /* ========================================================= 02. IMAGE SAFETY ========================================================= */ #seo-audit-report img { max-width: 100%; height: auto; } /* ========================================================= 03. SVG SAFETY ========================================================= */ #seo-audit-report svg { max-width: 100%; } /* ========================================================= 04. BUTTON RESET ========================================================= */ #seo-audit-report button { font-family: inherit; } /* ========================================================= 05. BUTTON ACCESSIBILITY ========================================================= */ #seo-audit-report button:focus-visible, #seo-audit-report a:focus-visible { outline: 2px solid var(--seo-accent); outline-offset: 3px; } /* ========================================================= 06. DISABLED BUTTON ========================================================= */ #seo-audit-report button:disabled, #seo-audit-report .seo-tool-button.is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ========================================================= 07. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { #seo-audit-report *, #seo-audit-report *::before, #seo-audit-report *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } } /* ========================================================= 08. LOADING STATE ========================================================= */ #seo-audit-report .seo-loading { display: flex; align-items: center; justify-content: center; min-height: 180px; padding: 30px; background: var(--seo-white); border: 1px solid var(--seo-border); border-radius: var(--seo-radius); color: var(--seo-muted); font-size: 13px; text-align: center; } /* ========================================================= 09. LOADING SPINNER ========================================================= */ #seo-audit-report .seo-loading-spinner { width: 22px; height: 22px; margin-right: 9px; border: 2px solid var(--seo-border); border-top-color: var(--seo-primary); border-radius: 50%; animation: seoAuditSpin 0.8s linear infinite; } @keyframes seoAuditSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================= 10. ERROR CONTAINER ========================================================= */ #seo-audit-report .seo-audit-error { display: flex; align-items: flex-start; gap: 12px; padding: 18px; background: rgba( 239, 68, 68, 0.06 ); border: 1px solid rgba( 239, 68, 68, 0.18 ); border-radius: var(--seo-radius); } /* ========================================================= 11. ERROR ICON ========================================================= */ #seo-audit-report .seo-error-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; background: rgba( 239, 68, 68, 0.10 ); border-radius: 50%; color: var(--seo-danger); font-size: 16px; font-weight: 700; } /* ========================================================= 12. ERROR TITLE ========================================================= */ #seo-audit-report .seo-error-content h3 { margin: 0 0 5px; color: var(--seo-text); font-size: 15px; font-weight: 700; } /* ========================================================= 13. ERROR TEXT ========================================================= */ #seo-audit-report .seo-error-content p { margin: 0; color: var(--seo-muted); font-size: 12px; line-height: 1.6; } /* ========================================================= 14. HIDDEN UTILITY ========================================================= */ #seo-audit-report .seo-hidden { display: none !important; } /* ========================================================= 15. SCREEN-READER ONLY ========================================================= */ #seo-audit-report .seo-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect( 0, 0, 0, 0 ); white-space: nowrap; border: 0; } /* ========================================================= 16. FINAL URL PROTECTION ========================================================= */ #seo-audit-report .seo-url-display, #seo-audit-report .seo-canonical-url, #seo-audit-report .seo-image-url, #seo-audit-report .seo-link-url, #seo-audit-report .seo-table td, #seo-audit-report .seo-table th { overflow-wrap: anywhere; } /* ========================================================= 17. FINAL TABLE PROTECTION ========================================================= */ #seo-audit-report .seo-table-wrapper { display: block; width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; } /* ========================================================= 18. TABLE RESPONSIVE SAFETY ========================================================= */ #seo-audit-report .seo-table { width: 100%; border-collapse: collapse; } /* ========================================================= 19. DETAILS OPEN STATE ========================================================= */ #seo-audit-report .seo-details.is-open { display: block; } /* ========================================================= 20. DETAILS CLOSED STATE ========================================================= */ #seo-audit-report .seo-details.is-closed { display: none; } /* ========================================================= 21. TOGGLE ARROW ========================================================= */ #seo-audit-report .seo-toggle-icon { display: inline-flex; align-items: center; justify-content: center; transition: transform var(--seo-transition); } /* ========================================================= 22. TOGGLE OPEN ARROW ========================================================= */ #seo-audit-report .seo-toggle[aria-expanded="true"] .seo-toggle-icon { transform: rotate(180deg); } /* ========================================================= 23. CARD OPEN VISUAL ========================================================= */ #seo-audit-report .seo-card.is-open { border-color: rgba( 0, 56, 111, 0.22 ); } /* ========================================================= 24. CARD HOVER ========================================================= */ @media (hover: hover) { #seo-audit-report .seo-card { transition: border-color var(--seo-transition), box-shadow var(--seo-transition); } #seo-audit-report .seo-card:hover { border-color: rgba( 0, 56, 111, 0.16 ); box-shadow: 0 5px 18px rgba( 28, 34, 36, 0.06 ); } } /* ========================================================= 25. REPORT WIDTH SAFETY ========================================================= */ #seo-audit-report { width: 100%; max-width: var(--seo-content-width); margin-left: auto; margin-right: auto; } /* ========================================================= 26. ELEMENTOR CONTAINER SAFETY ========================================================= */ .elementor-widget-html #seo-audit-report { width: 100%; max-width: var(--seo-content-width); } /* ========================================================= 27. ELEMENTOR HTML WIDGET SAFETY ========================================================= */ .elementor-widget-html #seo-audit-report .seo-card { width: 100%; } /* ========================================================= 28. PREVENT ELEMENTOR TEXT ALIGNMENT ========================================================= */ .elementor-widget-html #seo-audit-report { text-align: left; } /* ========================================================= 29. PREVENT ELEMENTOR IMAGE STYLING ========================================================= */ .elementor-widget-html #seo-audit-report img { border: 0; box-shadow: none; } /* ========================================================= 30. PREVENT ELEMENTOR BUTTON STYLING ========================================================= */ .elementor-widget-html #seo-audit-report button { box-shadow: none; text-shadow: none; } /* ========================================================= 31. PRINT BASE ========================================================= */ @media print { html, body { background: #FFFFFF !important; } body { margin: 0 !important; padding: 0 !important; } #seo-audit-report { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: #FFFFFF !important; color: #1C2224 !important; } #seo-audit-report * { box-shadow: none !important; text-shadow: none !important; } } /* ========================================================= 32. PRINT HIDE INTERACTIVE ELEMENTS ========================================================= */ @media print { #seo-audit-report .seo-report-toolbar, #seo-audit-report .seo-card-toolbar, #seo-audit-report .seo-card-actions, #seo-audit-report .seo-toggle, #seo-audit-report .seo-tool-button, #seo-audit-report .seo-report-tool, #seo-audit-report .seo-detail-action, #seo-audit-report .seo-download-button, #seo-audit-report .seo-print-button { display: none !important; } } /* ========================================================= 33. PRINT HEADER ========================================================= */ @media print { #seo-audit-report .seo-report-header { margin: 0 0 18px !important; padding: 0 0 14px !important; background: #FFFFFF !important; border: 0 !important; border-bottom: 2px solid #00386F !important; border-radius: 0 !important; } #seo-audit-report .seo-report-title { color: #00386F !important; } #seo-audit-report .seo-report-subtitle, #seo-audit-report .seo-report-url { color: #333333 !important; } } /* ========================================================= 34. PRINT CARD ========================================================= */ @media print { #seo-audit-report .seo-card { margin-bottom: 12px !important; background: #FFFFFF !important; border: 1px solid #D5DCE5 !important; border-radius: 5px !important; break-inside: avoid; page-break-inside: avoid; } } /* ========================================================= 35. PRINT CARD HEADER ========================================================= */ @media print { #seo-audit-report .seo-card-header { background: #F5F7FA !important; border-bottom: 1px solid #D5DCE5 !important; } #seo-audit-report .seo-card-title { color: #00386F !important; } #seo-audit-report .seo-card-summary { color: #333333 !important; } } /* ========================================================= 36. PRINT DETAILS ========================================================= */ @media print { #seo-audit-report .seo-details { display: block !important; max-height: none !important; padding: 14px !important; background: #FFFFFF !important; overflow: visible !important; } } /* ========================================================= 37. PRINT PREVIEW ========================================================= */ @media print { #seo-audit-report .seo-card-preview { display: block !important; padding: 12px 14px !important; } } /* ========================================================= 38. PRINT GRID ========================================================= */ @media print { #seo-audit-report .seo-meta-grid, #seo-audit-report .seo-og-grid, #seo-audit-report .seo-twitter-grid, #seo-audit-report .seo-technical-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #seo-audit-report .seo-heading-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } #seo-audit-report .seo-html-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } #seo-audit-report .seo-schema-summary { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } #seo-audit-report .seo-image-summary, #seo-audit-report .seo-link-summary, #seo-audit-report .seo-content-summary { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } /* ========================================================= 39. PRINT TABLE ========================================================= */ @media print { #seo-audit-report .seo-table-wrapper { width: 100% !important; max-width: none !important; overflow: visible !important; } #seo-audit-report .seo-table { width: 100% !important; min-width: 0 !important; font-size: 8px !important; } #seo-audit-report .seo-table th { background: #00386F !important; color: #FFFFFF !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } #seo-audit-report .seo-table th, #seo-audit-report .seo-table td { padding: 5px 6px !important; border: 1px solid #D5DCE5 !important; } } /* ========================================================= 40. PRINT COLORS ========================================================= */ @media print { #seo-audit-report .seo-badge, #seo-audit-report .seo-table-status, #seo-audit-report .seo-content-tag, #seo-audit-report .seo-link-type, #seo-audit-report .seo-schema-type { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ========================================================= 41. PRINT SUCCESS ========================================================= */ @media print { #seo-audit-report .seo-success-message { background: #F0FDF4 !important; border-color: #BBF7D0 !important; color: #166534 !important; } } /* ========================================================= 42. PRINT WARNING ========================================================= */ @media print { #seo-audit-report .seo-warning-message { background: #FFFBEB !important; border-color: #FDE68A !important; color: #92400E !important; } } /* ========================================================= 43. PRINT DANGER ========================================================= */ @media print { #seo-audit-report .seo-danger-message { background: #FEF2F2 !important; border-color: #FECACA !important; color: #991B1B !important; } } /* ========================================================= 44. PRINT PAGE BREAKS ========================================================= */ @media print { #seo-audit-report .seo-card { break-inside: avoid; page-break-inside: avoid; } #seo-audit-report .seo-card-header { break-after: avoid; page-break-after: avoid; } #seo-audit-report h1, #seo-audit-report h2, #seo-audit-report h3, #seo-audit-report h4 { break-after: avoid; page-break-after: avoid; } } /* ========================================================= 45. PRINT LONG CONTENT ========================================================= */ @media print { #seo-audit-report .seo-long-text, #seo-audit-report .seo-code-block { max-height: none !important; overflow: visible !important; white-space: pre-wrap !important; word-break: break-word !important; } } /* ========================================================= 46. PRINT URLS ========================================================= */ @media print { #seo-audit-report a { color: #00386F !important; text-decoration: none !important; } } /* ========================================================= 47. PRINT FOOTER SPACING ========================================================= */ @media print { #seo-audit-report .seo-report-end { display: none !important; } } /* ========================================================= 48. PRINT EMPTY STATE ========================================================= */ @media print { #seo-audit-report .seo-no-data { background: #F5F7FA !important; border-color: #D5DCE5 !important; color: #333333 !important; } } /* ========================================================= 49. PRINT HIDE EMPTY INTERACTIVE STATES ========================================================= */ @media print { #seo-audit-report [hidden] { display: none !important; } } /* ========================================================= 50. PRINT REPORT WIDTH ========================================================= */ @media print { @page { size: A4; margin: 12mm; } } /* ========================================================= 51. FINAL DESKTOP SAFETY ========================================================= */ @media (min-width: 993px) { #seo-audit-report { overflow: visible; } #seo-audit-report .seo-table-wrapper { overflow-x: auto; } } /* ========================================================= 52. FINAL MOBILE SAFETY ========================================================= */ @media (max-width: 599px) { #seo-audit-report { overflow-x: clip; } #seo-audit-report .seo-card { overflow: hidden; } #seo-audit-report .seo-card-preview, #seo-audit-report .seo-details { overflow: hidden; } #seo-audit-report .seo-table-wrapper { overflow-x: auto; overflow-y: hidden; } } /* ========================================================= 53. FINAL TABLET SAFETY ========================================================= */ @media (min-width: 600px) and (max-width: 992px) { #seo-audit-report { overflow-x: clip; } #seo-audit-report .seo-card { overflow: hidden; } } /* ========================================================= 54. HIGH CONTRAST SUPPORT ========================================================= */ @media (forced-colors: active) { #seo-audit-report .seo-card, #seo-audit-report .seo-meta-item, #seo-audit-report .seo-og-item, #seo-audit-report .seo-twitter-item, #seo-audit-report .seo-html-item, #seo-audit-report .seo-technical-item, #seo-audit-report .seo-image-stat, #seo-audit-report .seo-link-stat, #seo-audit-report .seo-content-stat { border: 1px solid CanvasText; } #seo-audit-report button, #seo-audit-report a { forced-color-adjust: auto; } } /* ========================================================= 55. FINAL COLOR REFERENCE ========================================================= These are the approved project colors: Primary #00386F Secondary #333333 Text #1C2224 Accent #F1414F Background #EEEEEE Background2 #E5EBF3 Deep Red #D41121 Success #22C55E Warning #F59E0B Danger #EF4444 The primary/secondary/text/accent/background values should already be defined in Part 1 through CSS variables. ========================================================= */ /* ========================================================= 56. FINAL CSS MARKER ========================================================= */ #seo-audit-report.seo-audit-ready { visibility: visible; } /* ========================================================= END OF SEO AUDIT CSS CLEAN VERSION — PART 4/4 ========================================================= */