/* Unified style for full-page status screens: 404, access-denied, under-construction. Activated by . */ /* Fill the flex:1 content area and center vertically so these short pages don't leave a big gap above the footer. Higher specificity (body.status-page .site-content) reliably beats main.css. */ body.status-page .site-content { display: flex; flex-direction: column; justify-content: center; } .status-wrap { max-width: 560px; margin: 0 auto; padding: 24px; text-align: center; } .status-img { width: 100%; max-width: 240px; height: auto; margin: 0 auto 24px; display: block; } .status-title { margin: 0 0 12px; font-size: 28px; font-weight: 700; color: var(--text-primary); } .status-title i { color: var(--primary-color); margin-right: 10px; } .status-msg { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); } /* Primary action button (e.g. Back to Home). */ .status-action { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 8px; background: var(--primary-color); color: var(--text-inverse); font-size: 15px; text-decoration: none; transition: opacity 0.15s ease; } .status-action:hover { opacity: 0.9; } /* Info chip (e.g. the visitor's IP address). */ .status-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-elevated); font-size: 14px; color: var(--text-secondary); } .status-chip i { color: var(--primary-color); } .status-chip code { font-family: "Roboto Mono", monospace; font-size: 15px; font-weight: 600; color: var(--text-primary); } .status-hint { margin: 24px 0 0; font-size: 13px; color: var(--text-tertiary); }