/* Aerzeit site styles. Colors match the iOS app's dark-mode palette exactly (extracted from ios/Aerzeit/Assets.xcassets/*.colorset dark-appearance values) -- the app is forced dark-mode, so this is what users actually see. */ :root { --navy: #1B263B; --navy-secondary: #2C3E50; --teal: #1FB9E8; --coral: #FF9575; --text-secondary: #95A8B8; --text-primary: #F2F5F7; } * { box-sizing: border-box; } body { margin: 0; background: var(--navy); color: var(--text-primary); font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 1.6; } .site-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--navy-secondary); } .wordmark { font-size: 1.4rem; font-weight: 700; color: var(--teal); text-decoration: none; } .site-header nav { display: flex; gap: 1.5rem; } .site-header nav a { color: var(--text-secondary); text-decoration: none; font-size: 0.95rem; } .site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--teal); } /* Hamburger toggle -- hidden on desktop, shown below the mobile breakpoint. Mirrors synavistra/synavistra's nav-toggle pattern (mask-image icons, .js progressive enhancement) so both sites behave the same way. */ .nav-toggle { display: none; background: none; border: none; padding: 0.5rem; cursor: pointer; color: var(--teal); } .nav-toggle-open, .nav-toggle-close { display: inline-block; width: 24px; height: 24px; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .nav-toggle-open { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z%22%2F%3E%3C%2Fsvg%3E"); } .nav-toggle-close { display: none; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m256-200-56-56%20224-224-224-224%2056-56%20224%20224%20224-224%2056%2056-224%20224%20224%20224-56%2056-224-224-224%20224Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m256-200-56-56%20224-224-224-224%2056-56%20224%20224%20224-224%2056%2056-224%20224%20224%20224-56%2056-224-224-224%20224Z%22%2F%3E%3C%2Fsvg%3E"); } .nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle-close { display: inline-block; } @media (max-width: 768px) { .site-header { flex-wrap: wrap; } .nav-toggle { display: block; } .site-header nav { flex-basis: 100%; flex-direction: column; gap: 0; margin-top: 1rem; } /* No-JS fallback: nav stays visible (stacked). Once nav.js runs, it adds .js to and collapses the nav until the toggle is clicked. */ .js .site-header nav { display: none; } .js .site-header nav.is-active { display: flex; } .site-header nav a { padding: 0.75rem 0; border-top: 1px solid var(--navy-secondary); font-size: 1rem; } } .site-main { max-width: 720px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; } .site-main h1 { color: var(--text-primary); font-size: 2rem; margin-bottom: 0.5rem; } .site-main h2 { color: var(--teal); font-size: 1.3rem; margin-top: 2.5rem; } .site-main p { color: var(--text-secondary); } .site-main a { color: var(--coral); } .card { background: var(--navy-secondary); border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0; } .list-arrows { list-style: none; padding: 0; } /* Logical (inline-start) properties, not physical left, so the custom list markers land on the correct side under dir="rtl" locales; the arrow glyph itself is direction-semantic and flips via the [dir="rtl"] override below (the ✗ glyph is symmetric and needs no flip). */ .list-arrows li { padding: 0.4rem 0; padding-inline-start: 1.25rem; position: relative; } .list-arrows li::before { content: "\2192"; position: absolute; inset-inline-start: 0; color: var(--teal); } [dir="rtl"] .list-arrows li::before { content: "\2190"; } .list-x { list-style: none; padding: 0; } .list-x li { padding: 0.4rem 0; padding-inline-start: 1.25rem; position: relative; color: var(--text-secondary); } .list-x li::before { content: "\2717"; position: absolute; inset-inline-start: 0; color: var(--coral); } /* Small, secondary-toned disclaimer on translated pages: "this translation is provided for convenience; the English version is authoritative". */ .authoritative-note { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--navy-secondary); color: var(--text-secondary); font-size: 0.85rem; } .site-footer { max-width: 720px; margin: 0 auto; padding: 1.5rem; border-top: 1px solid var(--navy-secondary); } .site-footer p { color: var(--text-secondary); font-size: 0.85rem; }