/* ========================================================= 322v — minimal personal site ========================================================= */ :root { color-scheme: dark; --bg: #0a0a0a; --bg-soft: #111111; --bg-card: #0f0f0f; --border: #262626; --border-strong: #404040; --text: #fafafa; --text-soft: #d4d4d4; --text-dim: #a3a3a3; --accent: #fafafa; --link: #fafafa; --link-hover: #a3a3a3; /* Status label colors (dark) */ --label-resolved: #4ade80; --label-resolved-bg: #052e16; --label-monitoring: #60a5fa; --label-monitoring-bg: #0c1e3d; --label-identified: #fb923c; --label-identified-bg: #2a1407; --label-investigating: #f87171; --label-investigating-bg: #2a0a0a; --label-update: #a3a3a3; --label-update-bg: #1a1a1a; --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Arabic", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace; } /* Light theme — opt-in via [data-theme="light"] on */ html[data-theme="light"] { color-scheme: light; --bg: #ffffff; --bg-soft: #fafafa; --bg-card: #ffffff; --border: #e5e5e5; --border-strong: #d4d4d4; --text: #0a0a0a; --text-soft: #525252; --text-dim: #737373; --accent: #0a0a0a; --link: #0a0a0a; --link-hover: #525252; --label-resolved: #16a34a; --label-resolved-bg: #f0fdf4; --label-monitoring: #2563eb; --label-monitoring-bg: #eff6ff; --label-identified: #ea580c; --label-identified-bg: #fff7ed; --label-investigating: #dc2626; --label-investigating-bg: #fef2f2; --label-update: #525252; --label-update-bg: #f5f5f5; } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-base); font-size: 16px; line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* RTL adjustments */ html[dir="rtl"] body { font-family: "Noto Sans Arabic", var(--font-base); } a { color: var(--link); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--link-hover); } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* ── Layout ───────────────────────────────────── */ .wrap { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 24px; } .site-header { border-bottom: 1px solid var(--border); padding: 20px 0; } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: var(--text); } .brand:hover { color: var(--text); } .nav { display: flex; align-items: center; gap: 8px; } .nav-link { font-size: 14px; color: var(--text-soft); padding: 6px 10px; border-radius: 6px; } .nav-link:hover { color: var(--text); background: var(--bg-soft); } .lang-toggle, .theme-toggle { font-family: var(--font-mono); font-size: 13px; background: transparent; border: 1px solid var(--border); color: var(--text-soft); padding: 6px 10px; border-radius: 6px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; min-width: 38px; display: inline-flex; align-items: center; justify-content: center; } .lang-toggle:hover, .theme-toggle:hover { border-color: var(--border-strong); color: var(--text); background: var(--bg-soft); } .lang-toggle:focus-visible, .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html[data-theme="light"] .theme-toggle .icon-sun { display: block; } html[data-theme="light"] .theme-toggle .icon-moon { display: none; } main { flex: 1 0 auto; padding: 64px 0; } .site-footer { border-top: 1px solid var(--border); padding: 24px 0; color: var(--text-dim); font-size: 13px; text-align: center; } /* ── Home (hero) ───────────────────────────────── */ .hero h1 { font-size: 44px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 16px; } .hero .bio { font-size: 17px; color: var(--text-soft); margin-bottom: 32px; max-width: 560px; } .socials { display: flex; gap: 8px; flex-wrap: wrap; } .social-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; font-weight: 500; transition: border-color 0.15s ease, background 0.15s ease; } .social-link:hover { border-color: var(--border-strong); background: var(--bg-soft); color: var(--text); } .social-link svg { width: 18px; height: 18px; flex-shrink: 0; } /* ── About section ─────────────────────────────── */ .about { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--border); } .about-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 16px; } .about p { font-size: 16px; color: var(--text-soft); margin-bottom: 4px; line-height: 1.7; } .about p:last-child { margin-bottom: 0; } /* ── Status page ───────────────────────────────── */ .page-title { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; } .page-subtitle { color: var(--text-soft); font-size: 15px; margin-bottom: 40px; } .status-overall { border: 1px solid var(--border); background: var(--bg-soft); border-radius: 10px; padding: 16px 18px; margin-bottom: 32px; display: flex; align-items: center; gap: 12px; font-size: 15px; } .status-overall .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .status-overall.ok .dot { background: var(--label-resolved); } .status-overall.active .dot { background: var(--label-investigating); } .day-group { margin-bottom: 40px; } .day-group .day-header { font-size: 18px; font-weight: 600; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 20px; color: var(--text); } .incident { margin-bottom: 28px; } .incident-title { font-size: 17px; font-weight: 600; color: var(--label-identified); margin-bottom: 14px; } .incident.resolved .incident-title { color: var(--label-resolved); } .incident.monitoring .incident-title { color: var(--label-monitoring); } .incident.investigating .incident-title { color: var(--label-investigating); } .incident.update .incident-title { color: var(--text); } .update { padding: 4px 0 14px; } .update-label { font-weight: 700; font-size: 14px; margin-inline-end: 6px; } .update-label.resolved { color: var(--label-resolved); } .update-label.monitoring { color: var(--label-monitoring); } .update-label.identified { color: var(--label-identified); } .update-label.investigating { color: var(--label-investigating); } .update-label.update { color: var(--text); } .update-text { font-size: 15px; color: var(--text); line-height: 1.65; } .update-time { display: block; font-size: 13px; color: var(--text-dim); margin-top: 6px; font-variant-numeric: tabular-nums; } .empty-state { text-align: center; padding: 60px 20px; color: var(--text-dim); border: 1px dashed var(--border); border-radius: 10px; } .empty-state .big { font-size: 36px; margin-bottom: 12px; } .load-error { border: 1px solid var(--label-investigating); background: var(--label-investigating-bg); color: var(--label-investigating); padding: 14px 18px; border-radius: 8px; font-size: 14px; } /* ── 404 ───────────────────────────────────────── */ .notfound { text-align: center; padding: 80px 20px; } .notfound .code { font-family: var(--font-mono); font-size: 64px; font-weight: 700; color: var(--text); letter-spacing: -0.04em; margin-bottom: 8px; } .notfound p { color: var(--text-soft); margin-bottom: 24px; } .notfound-joke { font-family: var(--font-mono); color: var(--text-dim); font-size: 14px; font-style: italic; margin-top: -12px; } .notfound a { display: inline-block; padding: 10px 18px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; } .notfound a:hover { border-color: var(--border-strong); background: var(--bg-soft); } /* ── Utilities ─────────────────────────────────── */ .seo-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* hide language-specific texts before JS resolves */ html:not([data-lang-ready]) [data-ar], html:not([data-lang-ready]) [data-en] { visibility: hidden; } /* ── Responsive ────────────────────────────────── */ @media (max-width: 540px) { .hero h1 { font-size: 34px; } .hero .bio { font-size: 16px; } main { padding: 40px 0; } .page-title { font-size: 26px; } .nav-link { display: none; } }