/* cuandu status — site shell, per the cuandu design language. Themes: Arctic (light) / Nautical (dark), switched via data-theme on . */ /* ---- Webfonts: Hyperreadable (UI) + Space Grotesk (wordmark), self-hosted ---- */ @font-face { font-family: 'Hyperreadable'; src: url('/static/fonts/Hyperreadable-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Hyperreadable'; src: url('/static/fonts/Hyperreadable-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Hyperreadable'; src: url('/static/fonts/Hyperreadable-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Hyperreadable'; src: url('/static/fonts/Hyperreadable-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('/static/fonts/SpaceGrotesk-Variable.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; } /* ---- Tokens: Arctic Light ---- */ :root { color-scheme: light; --color-primary: #3A7099; --color-primary-fill: #3A7099; --color-primary-fill-hover: #255A7A; --color-bg: #FFFFFF; --color-header-bg: #FAF9F5; --color-surface-accent: #D6EDFA; --color-list-bg: #f1f8fe; --color-border: #C0CDD6; --color-hover: #DEEAF2; --color-text: #0F1D28; --color-text-secondary: #374853; --color-footer-bg: #194461; --color-colophon-bg: #3B7099; --color-focus-ring: rgba(58, 112, 153, 0.15); --color-wordmark: var(--color-text); --color-footer-text: #F0F6F8; --color-footer-link: #FFFFFF; --color-footer-link-hover: #D6EDFA; --color-success: #268466; --color-error: #C94A4A; --color-warning-text: #92400E; --shadow-header: 0 1px 12px rgba(42, 90, 122, 0.08); /* Status classes: op = success, planned = info, maint = warning, inc = error, done = neutral. Alerts (overall banner): tinted bg + status text + border. */ --alert-op-bg: #E0F5EE; --alert-op-text: #1A6B54; --alert-op-border: #B8E5D8; --alert-planned-bg: #E5F0F7; --alert-planned-text: #2A6085; --alert-planned-border: #C8D9E3; --alert-maint-bg: #FDF6E3; --alert-maint-text: #7A5A1A; --alert-maint-border: #F0DEB0; --alert-inc-bg: #F9E5E5; --alert-inc-text: #8B3A3A; --alert-inc-border: #E8C4C4; /* Badges: solid in light, white text on top. */ --badge-op-bg: #3D7A47; --badge-op-text: #FFFFFF; --badge-planned-bg: #3A7099; --badge-planned-text: #FFFFFF; --badge-maint-bg: #9A7B1C; --badge-maint-text: #FFFFFF; --badge-inc-bg: #A83A3A; --badge-inc-text: #FFFFFF; --badge-done-bg: #546E7A; --badge-done-text: #FFFFFF; /* Availability-strip day bars (solid blocks). */ --day-op: #3D7A47; --day-inc: #A83A3A; --day-mit: #9A7B1C; --day-maint: #3A7099; } /* ---- Tokens: Nautical Dark ---- */ :root[data-theme="dark"] { color-scheme: dark; --color-primary: #7AA0C0; --color-primary-fill: #3A5570; --color-primary-fill-hover: #4A6580; --color-bg: #141C24; --color-header-bg: #1A1F27; --color-surface-accent: #1E2A35; --color-list-bg: #0c151d; --color-border: #2A3A48; --color-hover: #283848; --color-text: #F0F4F8; --color-text-secondary: #98AAB8; --color-footer-bg: #0a1f30; --color-colophon-bg: #0A1018; --color-focus-ring: rgba(122, 160, 192, 0.15); --color-success: #5BC9A0; --color-error: #E07070; --color-warning-text: #FCD34D; --shadow-header: 0 1px 12px rgba(0, 0, 0, 0.20); --alert-op-bg: #1A3D32; --alert-op-text: #5DDBB8; --alert-op-border: #1F4A3D; --alert-planned-bg: #1F3348; --alert-planned-text: #9dd0eb; --alert-planned-border: #2A4258; --alert-maint-bg: #1A1A1A; --alert-maint-text: #f5e2a4; --alert-maint-border: #B45309; --alert-inc-bg: #2A1A1A; --alert-inc-text: #E07070; --alert-inc-border: #4A2525; /* Badges go neon in dark: ~15% tint fill, bright same-hue text. */ --badge-op-bg: color-mix(in srgb, #5DDBB8 15%, transparent); --badge-op-text: #5DDBB8; --badge-planned-bg: color-mix(in srgb, #5DB8E8 15%, transparent); --badge-planned-text: #5DB8E8; --badge-maint-bg: color-mix(in srgb, #FCD34D 15%, transparent); --badge-maint-text: #FCD34D; --badge-inc-bg: color-mix(in srgb, #E07070 15%, transparent); --badge-inc-text: #E07070; --badge-done-bg: color-mix(in srgb, #999999 15%, transparent); --badge-done-text: #999999; /* Day bars stay solid in dark, in the bright status hues. */ --day-op: #2E8E6E; --day-inc: #C05555; --day-mit: #B08A2E; --day-maint: #3A6C94; } /* No-JS fallback: follow the OS when no explicit theme was resolved. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --color-primary: #7AA0C0; --color-primary-fill: #3A5570; --color-primary-fill-hover: #4A6580; --color-bg: #141C24; --color-header-bg: #1A1F27; --color-surface-accent: #1E2A35; --color-list-bg: #0c151d; --color-border: #2A3A48; --color-hover: #283848; --color-text: #F0F4F8; --color-text-secondary: #98AAB8; --color-footer-bg: #0a1f30; --color-colophon-bg: #0A1018; --color-focus-ring: rgba(122, 160, 192, 0.15); --color-success: #5BC9A0; --color-error: #E07070; --color-warning-text: #FCD34D; --shadow-header: 0 1px 12px rgba(0, 0, 0, 0.20); --alert-op-bg: #1A3D32; --alert-op-text: #5DDBB8; --alert-op-border: #1F4A3D; --alert-planned-bg: #1F3348; --alert-planned-text: #9dd0eb; --alert-planned-border: #2A4258; --alert-maint-bg: #1A1A1A; --alert-maint-text: #f5e2a4; --alert-maint-border: #B45309; --alert-inc-bg: #2A1A1A; --alert-inc-text: #E07070; --alert-inc-border: #4A2525; --badge-op-bg: color-mix(in srgb, #5DDBB8 15%, transparent); --badge-op-text: #5DDBB8; --badge-planned-bg: color-mix(in srgb, #5DB8E8 15%, transparent); --badge-planned-text: #5DB8E8; --badge-maint-bg: color-mix(in srgb, #FCD34D 15%, transparent); --badge-maint-text: #FCD34D; --badge-inc-bg: color-mix(in srgb, #E07070 15%, transparent); --badge-inc-text: #E07070; --badge-done-bg: color-mix(in srgb, #999999 15%, transparent); --badge-done-text: #999999; --day-op: #2E8E6E; --day-inc: #C05555; --day-mit: #B08A2E; --day-maint: #3A6C94; } } /* ---- Base ---- */ * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; font-family: 'Hyperreadable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 1rem; line-height: 1.6; font-variant-ligatures: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; color: var(--color-text); } /* Short pages: the content area grows, not the blue footer band. */ main { flex: 1; background: var(--color-bg); } .container { max-width: 60rem; margin-inline: auto; padding-inline: 1.5rem; } /* Links are always underlined; navigation menus, the lockup, and buttons are the exceptions (per the design language's link rule). */ a { color: var(--color-primary); text-decoration: underline; } a:focus-visible, button:focus-visible, select:focus-visible { outline: none; border-radius: 0.25rem; box-shadow: 0 0 0 3px var(--color-focus-ring), 0 0 0 1px var(--color-primary); } .muted { color: var(--color-text-secondary); } /* ---- Header — sticky cream chrome with the lockup ---- */ .site-header { position: sticky; top: 0; z-index: 10002; background: var(--color-header-bg); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-header); } .header-inner { height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .wordmark { display: inline-flex; align-items: center; gap: 0.4em; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: 1.5rem; letter-spacing: -0.015em; text-decoration: none; } .wordmark .seal { height: 1.55em; width: auto; flex: none; } .wordmark .brand { color: var(--color-wordmark); } .wordmark .brand-label { font-weight: 400; color: var(--color-text); } .site-nav { display: flex; align-items: center; gap: 0.25rem; } .site-nav a { display: inline-block; padding: 0.375rem 0.875rem; border-radius: 0.5rem; font-weight: 500; color: var(--color-text); text-decoration: none; transition: background-color 0.15s; } @media (hover: hover) { .site-nav a:not(.active):hover { background: oklch(from var(--color-primary-fill) l c h / 0.3); } } .site-nav a.active { background: var(--color-primary-fill); color: #fff; } /* Hamburger (mobile only) — animates to an X. */ .menu-btn { display: none; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .menu-btn span { display: block; width: 1.375rem; height: 2px; border-radius: 1px; background: var(--color-text); transition: transform 0.2s, opacity 0.2s; } .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Fullscreen overlay menu on the deep arctic blue (shared with the footer). */ .mobile-menu { position: fixed; inset: 0; z-index: 10001; background: var(--color-footer-bg); padding-top: 4rem; } .mobile-menu nav { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding-bottom: env(safe-area-inset-bottom); } .mobile-menu a { font-size: 1.5rem; font-weight: 500; color: #FFFFFF; text-decoration: none; } .mobile-menu a.active { text-decoration: underline; text-underline-offset: 0.375rem; } /* ---- Page structure — paper on water ---- */ .page-section-header { background: var(--color-list-bg); } .page-header { min-height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 0.5rem; } .page-header h1 { margin: 0; font-size: 1.25rem; font-weight: 500; } .page-header-actions { font-size: 1rem; } .page-section-hero { background: var(--color-list-bg); padding-block: 1rem 2rem; } .page-section-hero h1 { margin: 0; font-size: 2rem; font-weight: 500; line-height: 1.25; } .hero-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .crumbs { margin: 0.5rem 0 1.25rem; } .page-section { background: var(--color-bg); padding-block: 2rem 2.5rem; } section.section-divider { border-top: 1px solid var(--color-border); margin-top: 2rem; padding-top: 1.5rem; } h2 { font-size: 1.5rem; font-weight: 500; margin: 0 0 1rem; } h3 { font-size: 1rem; font-weight: 600; margin: 0; } /* ---- Overall banner (alert) ---- */ .alert { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.25rem; border: 1px solid; border-radius: 0.5rem; font-weight: 600; margin-bottom: 2rem; } .alert .dot { width: 0.65em; height: 0.65em; border-radius: 50%; background: currentColor; flex: none; } .alert-note { font-weight: 400; } /* Marker on German pages when a text is only available in English. */ .lang-note { display: inline-block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.5; color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: 0.25rem; padding: 0 0.375rem; white-space: nowrap; } .alert.st-op { background: var(--alert-op-bg); color: var(--alert-op-text); border-color: var(--alert-op-border); } .alert.st-planned { background: var(--alert-planned-bg); color: var(--alert-planned-text); border-color: var(--alert-planned-border); } .alert.st-maint, .alert.st-mit { background: var(--alert-maint-bg); color: var(--alert-maint-text); border-color: var(--alert-maint-border); } .alert.st-inc { background: var(--alert-inc-bg); color: var(--alert-inc-text); border-color: var(--alert-inc-border); } /* ---- Badges — solid in light, neon in dark ---- */ .badge { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.5; white-space: nowrap; vertical-align: middle; } .badge.st-op { background: var(--badge-op-bg); color: var(--badge-op-text); } .badge.st-planned { background: var(--badge-planned-bg); color: var(--badge-planned-text); } .badge.st-maint, .badge.st-mit { background: var(--badge-maint-bg); color: var(--badge-maint-text); } .badge.st-inc { background: var(--badge-inc-bg); color: var(--badge-inc-text); } .badge.st-done { background: var(--badge-done-bg); color: var(--badge-done-text); } /* ---- Event cards — section-card treatment ---- */ article.event { background: var(--color-list-bg); border: 1px solid var(--color-border); border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 1rem; } article.event:last-child { margin-bottom: 0; } article.event > header { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; } article.event > header a { color: inherit; font-weight: 600; } .meta { color: var(--color-text-secondary); margin: 0.3rem 0 0; } .meta strong { font-weight: 600; color: var(--color-text); } .meta.warn { color: var(--color-warning-text); font-weight: 600; } /* ---- Markdown bodies ---- */ .desc > :first-child { margin-top: 0.5rem; } .desc > :last-child { margin-bottom: 0; } .page-section > .container > .desc > :first-child { margin-top: 0; } .desc h1, .desc h2, .desc h3 { font-size: 1.125rem; font-weight: 600; margin: 1rem 0 0.375rem; border: 0; padding: 0; } .desc pre { background: var(--color-surface-accent); padding: 0.75rem 1rem; border-radius: 0.5rem; overflow-x: auto; font-size: 0.875rem; } .desc code { font-family: 'SF Mono', Menlo, Monaco, 'Courier New', monospace; background: var(--color-surface-accent); padding: 0.1em 0.3em; border-radius: 0.25rem; font-size: 0.9em; } .desc pre code { background: none; padding: 0; } .desc blockquote { margin: 0.6rem 0; padding-left: 1rem; border-left: 3px solid var(--color-border); color: var(--color-text-secondary); } .desc table { border-collapse: collapse; } .desc th, .desc td { border: 1px solid var(--color-border); padding: 0.375rem 0.75rem; } .desc th { background: var(--color-surface-accent); } /* ---- Latest update on a card / update timeline ---- */ .latest { border-top: 1px dashed var(--color-border); margin-top: 1rem; padding-top: 0.75rem; } .lbl { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); } /* Event timeline: a vertical line through one dot per entry. Filled dots have happened, hollow dots are pending; the completion milestone is the one place status color appears (state, per the design language). */ ol.timeline { list-style: none; margin: 0; padding: 0; position: relative; } ol.timeline::before { content: ""; position: absolute; left: 0.3125rem; top: 0.625rem; bottom: 0.625rem; width: 2px; background: var(--color-border); } ol.timeline > li { position: relative; padding-left: 1.75rem; margin: 1.25rem 0; } ol.timeline > li:first-child { margin-top: 0; } ol.timeline > li:last-child { margin-bottom: 0; } ol.timeline > li::before { content: ""; position: absolute; left: 0; top: 0.25rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; box-sizing: border-box; background: var(--color-bg); border: 2px solid var(--color-text-secondary); } ol.timeline > li.milestone::before { background: var(--color-text-secondary); } ol.timeline > li.milestone.pending::before { background: var(--color-bg); } ol.timeline > li.milestone.ok::before { background: var(--color-success); border-color: var(--color-success); } ol.timeline > li.milestone.mit::before { background: var(--color-warning-text); border-color: var(--color-warning-text); } ol.timeline > li.milestone.mit.pending::before { background: var(--color-bg); } ol.timeline > li.pm::before, ol.timeline > li.cl::before { background: var(--color-primary); border-color: var(--color-primary); } ol.timeline .lbl .off { text-transform: none; } ol.timeline > li.milestone .lbl { color: var(--color-text); } ol.timeline > li.milestone.ok .lbl { color: var(--color-success); } ol.timeline > li.milestone.mit .lbl { color: var(--color-warning-text); } ol.timeline > li.pm .desc, ol.timeline > li.cl .desc { background: var(--color-surface-accent); padding: 0.875rem 1.25rem; border-radius: 0.5rem; margin-top: 0.5rem; } ol.timeline > li.pm .desc > :first-child, ol.timeline > li.cl .desc > :first-child { margin-top: 0; } /* ---- Services ---- */ .cat { border: 1px solid var(--color-border); border-radius: 0.5rem; margin-bottom: 1rem; overflow: hidden; } .cat:last-child { margin-bottom: 0; } .cat-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.625rem 1rem; background: var(--color-surface-accent); border-bottom: 2px solid var(--color-border); } ul.svc { list-style: none; margin: 0; padding: 0; } ul.svc li { display: flex; align-items: center; gap: 1rem; padding: 0.625rem 1rem; border-top: 1px solid var(--color-border); } ul.svc li:first-child { border-top: 0; } .svc-name { flex: 0 1 auto; } /* Availability strips: one solid bar per day, newest right. */ .avail { display: flex; gap: 2px; flex: 1 1 auto; max-width: 18rem; height: 1.125rem; margin-left: auto; } .day { border-radius: 1px; background: var(--day-op); } .avail .day { flex: 1 1 0; min-width: 2px; } .day.d-inc { background: var(--day-inc); } .day.d-mit { background: var(--day-mit); } .day.d-maint { background: var(--day-maint); } @media (hover: hover) { .avail .day:hover { opacity: 0.7; } } .uptime { white-space: nowrap; } .avail-legend { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; margin: 1rem 0 0; } .avail-legend .day { width: 0.625rem; height: 0.625rem; flex: none; } .avail-legend .day:not(:first-child) { margin-left: 0.5rem; } /* ---- History rows ---- */ .hist-group { margin: 1.25rem 0 0.25rem; } .hist-group:first-of-type { margin-top: 0; } .histrow { display: flex; justify-content: space-between; gap: 0.5rem 1rem; align-items: baseline; margin: 0.5rem 0; flex-wrap: wrap; } /* ---- Changelog category filter ---- */ .chlog-filters { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 1rem 0 0; } .chlog-filters a { padding: 0.125rem 0.625rem; border: 1px solid var(--color-border); border-radius: 999px; text-decoration: none; color: var(--color-text-secondary); } .chlog-filters a.active { background: var(--color-primary-fill); border-color: var(--color-primary-fill); color: #fff; } /* ---- Footer — on the blue ---- */ .site-footer { /* The page ground blue lives only here, not on the body: an unstyled canvas keeps the browser's overscroll area neutral. */ background: var(--color-footer-bg); color: var(--color-footer-text); text-align: center; padding: 1.25rem 1rem; } .site-footer a { color: var(--color-footer-link); text-decoration: underline; } .lang-switch a.active { font-weight: 600; text-decoration: none; } @media (hover: hover) { .site-footer a:hover { color: var(--color-footer-link-hover); } } .site-footer p { margin: 0.375rem 0; } .footer-controls { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; } .site-footer select { appearance: none; -webkit-appearance: none; font: inherit; color: var(--color-footer-text); background-color: rgba(255, 255, 255, 0.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0F6F8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1rem; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 0.375rem; padding: 0.25rem 2rem 0.25rem 0.625rem; max-width: 16rem; cursor: pointer; } .site-footer select option { color: initial; background: initial; } #theme-toggle { font: inherit; color: var(--color-footer-link); background: none; border: 0; padding: 0.25rem 0.25rem; cursor: pointer; } @media (hover: hover) { #theme-toggle:hover { color: var(--color-footer-link-hover); text-decoration: underline; } } /* ---- Colophon — the real footer below the settings footer ---- */ .site-colophon { background: var(--color-colophon-bg); color: var(--color-footer-text); text-align: center; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); } .site-colophon p { margin: 0; } .site-colophon a { color: var(--color-footer-link); text-decoration: underline; } @media (hover: hover) { .site-colophon a:hover { color: var(--color-footer-link-hover); } } /* ---- Mobile ---- */ @media (max-width: 768px) { .container { padding-inline: 1rem; } .site-nav { display: none; } .menu-btn { display: flex; } .page-section-hero h1 { font-size: 1.5rem; } article.event { padding: 1rem; } article.event > header { flex-wrap: wrap; } } @media (max-width: 640px) { ul.svc li { flex-wrap: wrap; row-gap: 0.375rem; } .svc-name { flex: 1 1 auto; } .avail { order: 5; flex-basis: 100%; max-width: none; margin-left: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }