/* * DOT MATRIX CONSOLIDATED STYLESHEET * ================================= * * Page body classes: * page-signal * page-about * page-keeper * * Environment body classes: * environment-local * environment-hosted * * Change only the environment class on to switch backgrounds. */ /* ================================================================ 1. DESIGN TOKENS AND ENVIRONMENTS ================================================================ */ :root { color-scheme: dark; --dm-background-local: #000000; --dm-background-hosted: #001938; --dm-page-background: var(--dm-background-local); --dm-white: #ffffff; --dm-grey-aaa: #aaaaaa; --dm-grey-888: #888888; --dm-grey-777: #777777; --dm-grey-666: #666666; --dm-border-14: rgba(255, 255, 255, 0.14); --dm-border-15: rgba(255, 255, 255, 0.15); --dm-border-16: rgba(255, 255, 255, 0.16); --dm-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } body.environment-local { --dm-page-background: var(--dm-background-local); } body.environment-hosted { --dm-page-background: var(--dm-background-hosted); } /* ================================================================ 2. SHARED DOCUMENT BASE ================================================================ */ html { margin: 0; padding: 0; width: 100%; min-height: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100%; background: var(--dm-page-background); color: var(--dm-white); font-family: var(--dm-font-family); } /* ================================================================ 3. SHARED ABOUT / KEEPER COMPONENTS ================================================================ */ body.page-about, body.page-keeper { box-sizing: border-box; } body.page-about .page-shell, body.page-keeper .page-shell { margin: 0 auto; } body.page-about .page-header, body.page-keeper .page-header { text-align: center; } body.page-about .page-title, body.page-keeper .page-title { margin: 0; color: var(--dm-white); font-weight: 200; text-transform: uppercase; } body.page-about .page-rule, body.page-keeper .page-rule { width: 220px; border: 0; } body.page-about .page-label, body.page-keeper .page-label { margin: 0; font-size: 0.74rem; letter-spacing: 4px; text-transform: uppercase; } body.page-about .page-footer, body.page-keeper .page-footer { text-align: center; } body.page-about .return-link, body.page-keeper .return-link { text-decoration: none; text-transform: uppercase; } body.page-about .return-link:hover, body.page-about .return-link:focus-visible, body.page-keeper .return-link:hover, body.page-keeper .return-link:focus-visible { color: var(--dm-white); } /* ================================================================ 4. MAIN SIGNAL PAGE ================================================================ */ body.page-signal { overflow-x: hidden; overflow-y: auto; } body.page-signal .signal-container { position: relative; z-index: 2; box-sizing: border-box; width: 100%; min-height: 100vh; padding: 30px; text-align: center; backdrop-filter: blur(1px); } /* * Original Dot Matrix display remains at the visual centre. */ body.page-signal .signal-core { position: absolute; top: 40%; left: 50%; display: flex; flex-direction: column; align-items: center; width: min(520px, calc(100vw - 36px)); transform: translate(-50%, -50%); } body.page-signal h1 { margin: 0 0 25px; font-size: 4rem; font-weight: 200; letter-spacing: 8px; } /* * Pure CSS pulsing dot. * It belongs to the inception panel rather than the browser viewport, * keeping it aligned when the surrounding layout changes. */ body.page-signal .bg-dot-layer { position: relative; width: 12px; height: 12px; margin: 0 auto 42px; background-color: var(--dm-white); border-radius: 50%; pointer-events: none; box-shadow: 0 0 26px 5px rgba(255, 255, 255, 0.45); animation: dm-signal-pulse 4s ease-in-out infinite; will-change: transform, opacity; } body.page-signal .inception-panel { width: 320px; margin-top: 5px; padding-top: 25px; border-top: 1px solid var(--dm-border-15); } body.page-signal .inception-title { margin-bottom: 18px; color: var(--dm-grey-666); font-size: 0.8rem; font-weight: 400; letter-spacing: 4px; text-transform: uppercase; } body.page-signal .inception-date { margin-bottom: 15px; color: var(--dm-grey-aaa); font-size: 1.1rem; font-weight: 300; letter-spacing: 2px; } body.page-signal .inception-counter { color: var(--dm-white); font-size: 1.2rem; font-weight: 300; letter-spacing: 2px; white-space: nowrap; } /* * Machine and Signal Keeper status panels. * They remain visually secondary to the central signal. */ body.page-signal .status-zone { position: absolute; bottom: clamp(24px, 6vh, 100px); left: 50%; width: min(960px, calc(100vw - 48px)); transform: translateX(-50%); } body.page-signal .heartbeat-zone { display: flex; justify-content: center; gap: 42px; width: 100%; } body.page-signal .heartbeat-panel { box-sizing: border-box; width: min(420px, calc(50vw - 42px)); padding-top: 16px; border-top: 1px solid var(--dm-border-15); } body.page-signal .heartbeat-title { margin-bottom: 10px; color: var(--dm-grey-666); font-size: 0.72rem; font-weight: 400; letter-spacing: 4px; text-transform: uppercase; } body.page-signal .heartbeat-state { margin-bottom: 7px; color: var(--dm-white); font-size: 0.95rem; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; } body.page-signal .heartbeat-detail, body.page-signal .heartbeat-meta { color: var(--dm-grey-777); font-size: 0.72rem; font-weight: 300; letter-spacing: 2px; line-height: 1.7; text-transform: uppercase; } body.page-signal .heartbeat-detail { white-space: pre-line; } body.page-signal .heartbeat-panel[data-state="current"] .heartbeat-state, body.page-signal .heartbeat-panel[data-state="attested"] .heartbeat-state { text-shadow: 0 0 12px rgba(255, 255, 255, 0.35); } body.page-signal .heartbeat-panel[data-state="delayed"] .heartbeat-state, body.page-signal .heartbeat-panel[data-state="due"] .heartbeat-state { color: var(--dm-grey-aaa); } body.page-signal .heartbeat-panel[data-state="silent"] .heartbeat-state, body.page-signal .heartbeat-panel[data-state="not-started"] .heartbeat-state, body.page-signal .heartbeat-panel[data-state="not-attested"] .heartbeat-state, body.page-signal .heartbeat-panel[data-state="unavailable"] .heartbeat-state, body.page-signal .heartbeat-panel[data-state="clock-error"] .heartbeat-state { color: var(--dm-grey-888); } body.page-signal .local-time-panel { display: flex; flex-direction: column; align-items: center; width: 240px; margin: 18px auto 0; padding-top: 10px; border-top: 1px solid var(--dm-border-15); } body.page-signal .date-display { margin: 0; color: var(--dm-grey-888); font-size: 1rem; font-weight: 200; letter-spacing: 3px; text-transform: uppercase; } body.page-signal .clock-display { margin: 7px 0 0; color: var(--dm-white); font-size: 1rem; font-weight: 200; letter-spacing: 4px; text-shadow: 0 0 10px rgba(255, 255, 255, 0.2); } /* * About-page navigation. * The icon is an inline SVG, so no separate image file is required. */ body.page-signal .about-navigation { margin: 14px 0 0; text-align: center; } body.page-signal .about-icon-link { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--dm-grey-777); text-decoration: none; transition: color 220ms ease, transform 220ms ease, filter 220ms ease; } body.page-signal .about-icon { display: block; width: 100%; height: 100%; overflow: visible; } body.page-signal .about-icon-link:hover, body.page-signal .about-icon-link:focus-visible { color: var(--dm-white); transform: scale(1.08); filter: drop-shadow( 0 0 10px rgba(255, 255, 255, 0.35) ); } body.page-signal .about-icon-link:focus-visible { border-radius: 50%; outline: 1px solid rgba(255, 255, 255, 0.7); outline-offset: 7px; } body.page-signal.is-hidden .bg-dot-layer { animation-play-state: paused; } @keyframes dm-signal-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0.4; transform: scale(0.8); } } @media (prefers-reduced-motion: reduce) { body.page-signal .bg-dot-layer { animation: none; opacity: 1; transform: none; box-shadow: 0 0 20px 4px rgba(255, 255, 255, 0.4); } body.page-signal .about-icon-link { transition: none; } body.page-signal .about-icon-link:hover, body.page-signal .about-icon-link:focus-visible { transform: none; } } /* * Short, wide laptop screens use normal document flow. * This prevents the independently positioned signal and status * sections from overlapping when vertical space is limited. */ @media (max-height: 940px) and (min-width: 821px) { body.page-signal .signal-container { display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 32px 30px 20px; } body.page-signal .signal-core { position: static; top: auto; left: auto; margin: auto 0 34px; transform: none; } body.page-signal .status-zone { position: static; bottom: auto; left: auto; width: min(960px, calc(100vw - 48px)); transform: none; } } /* * Narrow screens stack the heartbeat panels and allow scrolling * so the central signal remains readable. */ @media (max-width: 820px) { body.page-signal .signal-container { min-height: 1020px; } body.page-signal .signal-core { top: 340px; } body.page-signal .status-zone { bottom: 24px; width: calc(100vw - 36px); } body.page-signal .heartbeat-zone { flex-direction: column; align-items: center; gap: 24px; } body.page-signal .heartbeat-panel { width: min(440px, calc(100vw - 36px)); } body.page-signal .local-time-panel { margin-top: 22px; } } @media (max-width: 480px) { body.page-signal .signal-container { padding: 24px 18px; } body.page-signal .signal-core { width: calc(100vw - 36px); } body.page-signal h1 { margin-bottom: 15px; font-size: 2.8rem; letter-spacing: 4px; } body.page-signal .clock-display { font-size: 1rem; letter-spacing: 2px; } body.page-signal .date-display { margin-bottom: 25px; font-size: 0.9rem; letter-spacing: 2px; } body.page-signal .inception-date { font-size: 0.9rem; } body.page-signal .inception-counter { font-size: 1rem; letter-spacing: 1px; } body.page-signal .inception-panel { width: min(260px, 100%); } body.page-signal .about-icon-link { width: 34px; height: 34px; } body.page-signal .heartbeat-title { letter-spacing: 3px; } body.page-signal .heartbeat-detail, body.page-signal .heartbeat-meta { font-size: 0.68rem; letter-spacing: 1.3px; } } /* ================================================================ 5. ABOUT / README PAGE ================================================================ */ body.page-about { padding: 0 22px; } body.page-about .page-shell { width: min(780px, 100%); padding: 86px 0 72px; } body.page-about .page-header { margin-bottom: 72px; } body.page-about .page-title { font-size: clamp(2.8rem, 8vw, 4.4rem); letter-spacing: 9px; } body.page-about .page-title-link { display: inline-block; color: inherit; text-decoration: none; transition: text-shadow 250ms ease, letter-spacing 250ms ease, opacity 250ms ease; } body.page-about .page-title-link:hover, body.page-about .page-title-link:focus-visible { opacity: 0.92; letter-spacing: 10px; text-shadow: 0 0 10px rgba(255, 255, 255, 0.65), 0 0 28px rgba(255, 255, 255, 0.35); } body.page-about .page-rule { margin: 28px auto 20px; border-top: 1px solid var(--dm-border-16); } body.page-about .page-label { color: var(--dm-grey-666); font-weight: 400; } body.page-about .page-dot { width: 9px; height: 9px; margin: 22px auto 0; background-color: var(--dm-white); border-radius: 50%; box-shadow: 0 0 20px 4px rgba(255, 255, 255, 0.38); animation: dm-about-pulse 4s ease-in-out infinite; } body.page-about .readme-content { color: var(--dm-grey-aaa); } body.page-about .readme-content > :first-child { margin-top: 0; } body.page-about .readme-content h2 { margin: 68px 0 24px; padding-bottom: 12px; border-bottom: 1px solid var(--dm-border-14); color: var(--dm-white); font-size: 1.28rem; font-weight: 300; letter-spacing: 3px; line-height: 1.35; text-transform: uppercase; } body.page-about .readme-content h3 { margin: 42px 0 16px; color: #d0d0d0; font-size: 1rem; font-weight: 400; letter-spacing: 2px; line-height: 1.4; } body.page-about .readme-content h4, body.page-about .readme-content h5, body.page-about .readme-content h6 { margin: 34px 0 14px; color: #bdbdbd; font-size: 0.95rem; font-weight: 400; letter-spacing: 1.5px; } body.page-about .readme-content p, body.page-about .readme-content li { color: var(--dm-grey-aaa); font-size: 1rem; font-weight: 300; line-height: 1.85; } body.page-about .readme-content p { margin: 0 0 22px; } body.page-about .readme-content ul, body.page-about .readme-content ol { margin: 0 0 28px; padding-left: 1.55rem; } body.page-about .readme-content li { margin: 0.38rem 0; padding-left: 0.15rem; } body.page-about .readme-content strong { color: #dddddd; font-weight: 500; } body.page-about .readme-content em { color: #c8c8c8; } body.page-about .readme-content blockquote { margin: 30px 0; padding: 6px 0 6px 22px; border-left: 1px solid rgba(255, 255, 255, 0.28); } body.page-about .readme-content blockquote p { margin: 0; color: #c3c3c3; } body.page-about .readme-content code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; } body.page-about .readme-content :not(pre) > code { padding: 0.13rem 0.36rem; background-color: #0a0a0a; color: #d3d3d3; font-size: 0.9em; } body.page-about .readme-content pre { overflow-x: auto; margin: 26px 0 30px; padding: 20px; border: 1px solid rgba(255, 255, 255, 0.12); background-color: #070707; color: #cccccc; font-size: 0.88rem; line-height: 1.6; tab-size: 4; } body.page-about .readme-content a { color: var(--dm-white); text-decoration-color: var(--dm-grey-666); text-underline-offset: 4px; } body.page-about .readme-content a:hover, body.page-about .readme-content a:focus-visible { text-decoration-color: var(--dm-white); } body.page-about .readme-content hr { margin: 52px 0; border: 0; border-top: 1px solid var(--dm-border-14); } body.page-about .loading, body.page-about .error { margin: 0; color: var(--dm-grey-777); font-size: 0.76rem; letter-spacing: 3px; text-align: center; text-transform: uppercase; } body.page-about .page-footer { margin-top: 76px; padding-top: 28px; border-top: 1px solid var(--dm-border-14); } body.page-about .return-link { color: var(--dm-grey-888); font-size: 0.74rem; font-weight: 400; letter-spacing: 4px; transition: color 160ms ease; } @keyframes dm-about-pulse { 0% { opacity: 0.4; transform: scale(0.82); } 50% { opacity: 1; transform: scale(1.28); } 100% { opacity: 0.4; transform: scale(0.82); } } @media (prefers-reduced-motion: reduce) { body.page-about .page-dot { animation: none; opacity: 1; transform: none; } } @media (max-width: 560px) { body.page-about { padding: 0 18px; } body.page-about .page-shell { padding: 58px 0 54px; } body.page-about .page-header { margin-bottom: 56px; } body.page-about .page-rule { width: 180px; } body.page-about .page-label { letter-spacing: 3px; } body.page-about .readme-content h2 { margin-top: 54px; font-size: 1.08rem; letter-spacing: 2px; } body.page-about .readme-content p, body.page-about .readme-content li { font-size: 0.96rem; line-height: 1.78; } body.page-about .readme-content pre { padding: 16px; font-size: 0.8rem; } body.page-about .return-link { letter-spacing: 3px; } } /* ================================================================ 6. SIGNAL KEEPER FORM ================================================================ */ body.page-keeper { padding: 48px 22px 72px; } body.page-keeper .page-shell { width: min(680px, 100%); } body.page-keeper .page-header { margin-bottom: 54px; } body.page-keeper .page-title { font-size: clamp(2.6rem, 8vw, 4.2rem); letter-spacing: 8px; } body.page-keeper .page-rule { margin: 26px auto 18px; border-top: 1px solid rgba(255, 255, 255, 0.18); } body.page-keeper .page-label { color: #8090a7; } body.page-keeper .panel { padding: 28px 0; border-top: 1px solid var(--dm-border-16); } body.page-keeper .panel-title { margin: 0 0 22px; color: #d9e1eb; font-size: 0.8rem; font-weight: 400; letter-spacing: 4px; text-transform: uppercase; } body.page-keeper .status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; } body.page-keeper .status-label { display: block; margin-bottom: 6px; color: #73839a; font-size: 0.68rem; letter-spacing: 2px; text-transform: uppercase; } body.page-keeper .status-value { color: #d8e0ea; font-size: 0.95rem; font-weight: 300; letter-spacing: 1px; overflow-wrap: anywhere; } body.page-keeper .statement { margin: 0 0 28px; color: #e1e7ee; font-size: 1.06rem; font-weight: 300; line-height: 1.85; } body.page-keeper .instruction { margin: 0 0 14px; color: #8796aa; font-size: 0.78rem; letter-spacing: 2px; line-height: 1.7; text-transform: uppercase; } body.page-keeper .confirmation-input { box-sizing: border-box; width: 100%; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(0, 0, 0, 0.16); color: var(--dm-white); font: inherit; letter-spacing: 3px; text-transform: uppercase; outline: none; } body.page-keeper .confirmation-input:focus { border-color: rgba(255, 255, 255, 0.72); box-shadow: 0 0 18px rgba(255, 255, 255, 0.08); } body.page-keeper .submit-button { width: 100%; margin-top: 18px; padding: 14px 18px; border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; color: #dce4ed; font: inherit; font-size: 0.76rem; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; transition: color 180ms ease, border-color 180ms ease, background 180ms ease; } body.page-keeper .submit-button:hover, body.page-keeper .submit-button:focus-visible { border-color: var(--dm-white); background: rgba(255, 255, 255, 0.07); color: var(--dm-white); } body.page-keeper .message { margin: 0 0 34px; padding: 18px 20px; border: 1px solid rgba(255, 255, 255, 0.2); color: #dce4ed; line-height: 1.7; } body.page-keeper .message-success { border-color: rgba(190, 230, 208, 0.45); } body.page-keeper .message-error { border-color: rgba(235, 183, 183, 0.5); } body.page-keeper .message-notice { border-color: rgba(219, 213, 169, 0.45); } body.page-keeper .message-title { margin: 0 0 10px; font-size: 0.78rem; letter-spacing: 3px; text-transform: uppercase; } body.page-keeper .message p { margin: 5px 0; color: #aeb9c8; font-size: 0.9rem; } body.page-keeper .page-footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--dm-border-16); } body.page-keeper .return-link { color: #8090a7; font-size: 0.72rem; letter-spacing: 4px; } /* ================================================================ 7. SHARED RESPONSIVE COMPONENT RULES ================================================================ */ @media (max-width: 560px) { body.page-about .page-title, body.page-keeper .page-title { letter-spacing: 5px; } body.page-keeper { padding: 36px 18px 54px; } body.page-keeper .status-grid { grid-template-columns: 1fr; } }