@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&family=Open+Sans:wght@300;400&display=swap'); /* Fix: CSS root selector should be :root, not ::root */ :root { /* Brand Colors from tailwind.config.ts */ --color-primary: #142D4C; /* brand.navy */ --color-secondary: #4EA8DE; /* brand.blue */ --color-accent: #5aa8a6; /* brand.turquoise */ --color-neutral-dark: #2E3A46; /* brand.charcoal */ --color-neutral-light: #F4F7FA;/* brand.lightgray */ --color-white: #FFFFFF; /* brand.white */ /* Status Colors */ --color-status-ok: #30a46c; /* green.9 */ --color-status-disruption: #DC2626; /* brand-red */ --color-status-maintenance: #FFBF00; /* brand.orange */ /* Tokens */ --radius: 8px; /* match app radius 0.5rem */ --border-color: #e6e9ee; /* subtle border (light) */ --muted-border: #f3f4f6; /* extra subtle */ /* Typography */ --font-heading: 'Poppins', 'Vazirmatn', sans-serif; --font-body: 'Open Sans', 'Vazirmatn', sans-serif; } /* Dark theme variable overrides via .dark on */ html.dark { --color-neutral-light: #1f2a37; /* page background */ --color-neutral-dark: #e5e7eb; /* text color */ --color-white: #273244; /* surfaces */ --border-color: #334155; /* borders */ } body { font-family: var(--font-body); background-color: var(--color-neutral-light); color: var(--color-neutral-dark); margin: 0; line-height: 1.6; min-height: 100dvh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .header { background-color: var(--color-white); padding: 1rem 2rem; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; } .logo-container { display: flex; align-items: center; } .logo-container a { display: inline-flex; align-items: center; } .logo { height: 40px; margin-left: 1rem; } h1 { font-family: var(--font-heading); font-size: 1.5rem; /* 24px */ font-weight: 600; margin: 0; color: var(--color-primary); } main { max-width: 900px; margin: 2rem auto; padding: 0 1rem; } .overall-status { padding: 1.5rem; border-radius: var(--radius); text-align: center; font-size: 1.1rem; font-weight: 600; font-family: var(--font-heading); margin-bottom: 2rem; background-color: var(--color-status-ok); color: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .overall-status.status-disruption { background-color: var(--color-status-disruption); } .overall-status.status-maintenance { background-color: var(--color-status-maintenance); color: var(--color-neutral-dark); } .services-section, .history-section, .incidents-section { background-color: var(--color-white); border: 1px solid var(--border-color); border-radius: var(--radius); margin-bottom: 2rem; padding: 1.25rem 1.5rem; } h2 { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; margin-top: 0; margin-bottom: 1rem; border-bottom: 1px solid var(--muted-border); padding-bottom: 0.5rem; color: var(--color-primary); } .service-item { display: flex; justify-content: space-between; align-items: center; padding: 0.875rem 0; border-bottom: 1px solid var(--muted-border); } .service-item:last-child { border-bottom: none; } .service-name { font-weight: 400; } .service-status { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; } .status-indicator { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); } .status-indicator.status-ok { background-color: var(--color-status-ok); } .status-indicator.status-disruption { background-color: var(--color-status-disruption); } .status-indicator.status-maintenance { background-color: var(--color-status-maintenance); } .incident-item { padding: 1rem 0; border-bottom: 1px solid var(--muted-border); } .incident-item:last-child { border-bottom: none; } .incident-item h4 { font-family: var(--font-heading); font-size: 1rem; margin: 0 0 0.25rem 0; } .incident-item p { margin: 0; font-size: 0.9rem; } .incident-item small { font-size: 0.8rem; font-weight: 300; color: #6f6f6f; /* slate.11 */ } .main-history-chart { min-height: 200px; } .footer { text-align: center; padding: 1.5rem; color: #6f6f6f; /* slate.11 */ font-size: 0.9rem; border-top: 1px solid var(--border-color); } .footer a { color: var(--color-secondary); text-decoration: none; font-weight: 500; outline: none; } .footer a:hover { text-decoration: underline; } .footer a:focus-visible { outline: 2px dashed var(--color-secondary); outline-offset: 3px; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* Dark mode via system preference */ @media (prefers-color-scheme: dark) { body { background-color: #1f2a37; color: #e5e7eb; } .header { background-color: #273244; border-bottom-color: #334155; } .services-section, .history-section, .incidents-section { background-color: #273244; border-color: #334155; } h1, h2 { color: #e5e7eb; } .overall-status { box-shadow: 0 1px 2px rgba(0,0,0,0.25); } .incident-item small { color: #94a3b8; } .footer { border-top-color: #334155; color: #94a3b8; } .footer a { color: #7dd3fc; } } /* Dark mode via class toggle */ .dark body { background-color: #1f2a37; color: #e5e7eb; } .dark .header { background-color: #273244; border-bottom-color: #334155; } .dark .services-section, .dark .history-section, .dark .incidents-section { background-color: #273244; border-color: #334155; } .dark h1, .dark h2 { color: #e5e7eb; } .dark .overall-status { box-shadow: 0 1px 2px rgba(0,0,0,0.25); } .dark .incident-item small { color: #94a3b8; } .dark .footer { border-top-color: #334155; color: #94a3b8; } .dark .footer a { color: #7dd3fc; } .dark .theme-toggle { background: #273244; border-color: #334155; color: #e5e7eb; } /* Force light mode when user chooses it, even if system prefers dark */ .light body { background-color: var(--color-neutral-light); color: var(--color-neutral-dark); } .light .header { background-color: var(--color-white); border-bottom-color: var(--border-color); } .light .services-section, .light .history-section, .light .incidents-section { background-color: var(--color-white); border-color: var(--border-color); } .light h1, .light h2 { color: var(--color-primary); } .light .overall-status { box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .light .incident-item small { color: #6f6f6f; } .light .footer { border-top-color: var(--border-color); color: #6f6f6f; } .light .footer a { color: var(--color-secondary); } .light .theme-toggle { background: var(--color-white); border-color: var(--border-color); color: var(--color-neutral-dark); } /* Theme toggle visual enhancements */ .theme-toggle { margin-right: auto; margin-left: 0.5rem; display: inline-flex; align-items: center; gap: 0.5rem; background: var(--color-white); border: 1px solid var(--border-color); border-radius: 9999px; padding: 0.35rem 0.75rem; font-size: 0.85rem; color: var(--color-neutral-dark); cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.04); transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; } .theme-toggle:hover { border-color: rgba(78,168,222,0.45); box-shadow: 0 2px 6px rgba(0,0,0,0.06); transform: translateY(-1px); } .theme-toggle:active { transform: translateY(0); } .theme-toggle:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; } .theme-toggle .icon { width: 16px; height: 16px; display: inline-block; } .theme-toggle .icon svg { width: 16px; height: 16px; display: block; } .theme-toggle .icon-moon { display: none; } .dark .theme-toggle .icon-sun { display: none; } .dark .theme-toggle .icon-moon { display: inline-block; } /* Compact size when icon-only */ .theme-toggle.icon-only { padding: 0.35rem; } @media (max-width: 768px) { .header { flex-direction: column; padding: 1rem; } h1 { margin-top: 0.5rem; font-size: 1.25rem; } main { margin-top: 1rem; } } /* Accessibility helpers */ .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; }