/* === General Layout === */ :root { --color-bg: #ffffff; --color-fg: #111111; --color-muted: #666666; --color-border: #e3e6ea; --color-accent: #1e90ff; --color-accent-hover: #0066cc; } /* Dark mode variables. Two selectors so old pages that put `.dark-mode` on (instead of ) still propagate the variables up to , otherwise the html element keeps its default light background and shows through behind a dark body. */ .dark-mode, html:has(body.dark-mode) { --color-bg: #111111; --color-fg: #eeeeee; --color-muted: #aaaaaa; --color-border: #333333; } /* Belt-and-suspenders for browsers without :has() (pre-2022): force to inherit body's dark background when body carries the class. */ @supports not selector(:has(*)) { body.dark-mode { background-color: #111111 !important; color: #eeeeee !important; } } /* Ensure both elements always paint the chosen background — prevents a white html strip leaking out when body's box is shorter than the viewport. */ html, body { min-height: 100%; } html { background-color: var(--color-bg); } html, body { background-color: var(--color-bg); color: var(--color-fg); } body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; padding: 0; line-height: 1.6; } .container { max-width: 960px; margin: 0 auto; padding: 1.5rem; } section { margin-bottom: 2rem; } h1, h2, h3 { margin-top: 0; } a { color: inherit; } /* === Top Navigation === */ .site-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; } .site-nav__brand { font-weight: 600; text-decoration: none; color: inherit; font-size: 1rem; } .site-nav__links { display: flex; gap: 1rem; flex-wrap: wrap; } .site-nav__links a { text-decoration: none; color: inherit; opacity: 0.75; font-size: 0.95rem; } .site-nav__links a:hover, .site-nav__links a[aria-current="page"] { opacity: 1; text-decoration: underline; } .site-nav .toggle-darkmode { background: transparent; border: 1px solid var(--color-border); border-radius: 999px; padding: 0.3rem 0.65rem; cursor: pointer; font-size: 1rem; line-height: 1; color: inherit; } .site-nav .toggle-darkmode:hover { border-color: var(--color-accent); } /* === Banner === */ .banner { background: url('/assets/banner.svg') center/cover no-repeat #0e1428; color: white; text-align: center; padding: 4rem 1rem; border-radius: 8px; position: relative; overflow: hidden; } .banner .overlay { background: linear-gradient(135deg, rgba(242, 112, 156, 0.78), rgba(255, 148, 114, 0.78)); color: white; padding: 2rem; border-radius: 8px; } .dark-mode .banner .overlay { background: linear-gradient(135deg, rgba(20, 20, 30, 0.7), rgba(40, 40, 60, 0.7)); } /* === Buttons === */ .btn { background-color: var(--color-accent); color: white; border: none; border-radius: 5px; padding: 0.5rem 1rem; cursor: pointer; font-size: 1rem; margin: 0.5rem 0; text-decoration: none; display: inline-block; transition: background-color 0.2s ease; } .btn:hover { background-color: var(--color-accent-hover); } .btn:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; } .btn[disabled] { opacity: 0.4; cursor: not-allowed; } .dark-mode .btn { background-color: #2a6fb5; color: white; } .dark-mode .btn:hover { background-color: #3a85d8; } /* === Visitors Link Button === */ .visitors-link { text-align: center; margin-top: 1.5rem; } .visitors-link a { font-size: 0.95rem; color: var(--color-muted); text-decoration: underline; } /* === Table Styles === */ table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.95rem; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } thead { background-color: #f0f4f8; } th, td { padding: 0.75rem; border: 1px solid var(--color-border); text-align: left; } tr:nth-child(even) { background-color: #f9fbfd; } tr:hover { background-color: #eef3f8; } .dark-mode table, .dark-mode .summary-box { background: #222; color: #eee; } .dark-mode thead, .dark-mode th { background-color: #2a2a2a; } .dark-mode tr:nth-child(even) { background-color: #1c1c1c; } .dark-mode tr:hover { background-color: #2a2a2a; } /* === Charts === */ .charts-container { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; margin-top: 2rem; } .chart-box { width: 300px; max-width: 100%; } /* === Map === */ #map { height: 400px; border-radius: 8px; margin-top: 1rem; } /* === Summary Box === */ .summary-box { margin-top: 1.5rem; background: #f9fbfd; padding: 1rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .summary-box ul { padding-left: 1.2rem; list-style-type: disc; } /* === Table Controls === */ .table-controls { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; align-items: center; } .table-controls input[type="text"], .table-controls input[type="date"] { padding: 0.5rem; font-size: 1rem; border: 1px solid #ccc; border-radius: 5px; } /* === Scroll Reveal Animations === Default state is visible so non-JS visitors see content. .js class (added by the inline boot script) enables the animation. */ .animate { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s ease; } .js .animate { opacity: 0; transform: translateY(24px); } .js .animate.visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .js .animate { opacity: 1; transform: none; transition: none; } } /* === Muted text === */ .muted { color: var(--color-muted); font-size: 0.95rem; } /* === Tech Stack === */ .tech-icons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; } .tech-icons span { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem 0.4rem 0.7rem; border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.92rem; background: rgba(0, 0, 0, 0.02); transition: border-color 0.15s ease, background 0.15s ease; } .tech-icons span:hover { border-color: var(--color-accent); background: rgba(30, 144, 255, 0.06); } .tech-ico { width: 18px; height: 18px; color: var(--color-accent); flex-shrink: 0; } .dark-mode .tech-icons span { background: rgba(255, 255, 255, 0.03); } .dark-mode .tech-ico { color: #5fb3ff; } /* === Promo / Section Card === */ .promo-section, .developer-tools { /* alias kept for backwards compat */ padding: 2em 0; border-top: 1px solid var(--color-border); } /* === Tool Grid (photography page + future use) === */ .tool-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 1rem; } .tool-card { padding: 1.25rem; border: 1px solid var(--color-border); border-radius: 8px; background: rgba(0, 0, 0, 0.02); display: flex; flex-direction: column; } .tool-card h3 { margin-bottom: 0.5rem; } .tool-card p { flex: 1; } .dark-mode .tool-card { background: #1a1a1a; } /* === Tool list on /tools index === */ .tool-list { list-style: none; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .tool-list .btn { width: 100%; text-align: center; } /* === Monitoring Graph === */ #monitoring-iframe-wrapper { width: 100%; max-width: 800px; margin: 1rem auto; overflow: hidden; transition: opacity 0.5s ease, max-height 0.5s ease; max-height: 1000px; } #monitoring-iframe-wrapper iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 8px; border: 1px solid var(--color-border); background: #0e0e0e; } #monitoring-iframe-wrapper.graph-hidden { opacity: 0; max-height: 0; pointer-events: none; } /* === JSON Output Styling === */ .json-output { background-color: #f0f4f8; color: #1a1a1a; font-size: 0.95rem; line-height: 1.5; padding: 1rem; border-radius: 8px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; font-family: 'Courier New', monospace; } .dark-mode .json-output { background-color: #1a1a1a; color: #e0e0e0; } /* === Form inputs in dark mode === */ input, textarea, select { background-color: #ffffff; color: #111111; border: 1px solid #ccc; border-radius: 5px; } .dark-mode input, .dark-mode textarea, .dark-mode select { background-color: #1c1c1c; color: #eee; border-color: #444; } /* === Footer === */ footer { text-align: center; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: 0.9rem; } /* === Chat widget (kept for future use) === */ #chat-container.chat-widget { background-color: #f0f0f0; padding: 1rem; border-radius: 10px; max-width: 600px; margin: 2rem auto; box-shadow: 0 0 10px rgba(0,0,0,0.1); font-family: sans-serif; } .dark-mode #chat-container.chat-widget { background-color: #1e1e1e; color: #eee; } .chat-widget h3 { margin-top: 0; font-size: 1.25rem; } .chat-input { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .chat-input input[type="text"] { flex: 1; padding: 0.5rem; border: 1px solid #ccc; border-radius: 5px; } .chat-input button { padding: 0.5rem 1rem; background-color: #0066cc; color: #fff; border: none; border-radius: 5px; cursor: pointer; } .chat-input button:hover { background-color: #0055aa; } .chat-response { margin-top: 1rem; font-style: italic; white-space: pre-wrap; } /* === Responsive tweaks === */ @media (max-width: 600px) { .container { padding: 1rem; } .banner { padding: 2.5rem 1rem; } .site-nav__brand { flex-basis: 100%; } }