/* epher landing page — light/dark themes via [data-theme] on . Contrast (WCAG 2.2 AA, see docs/accessibility.md): light: text 17.0:1, muted 5.3:1, border 4.5:1 (4.2:1 on panels), button text 8.3:1, ring 5.2:1, links 5.6:1 dark: text 17.0:1, muted 5.2:1, border 3.8:1 (3.1:1 on panels), button text 8.3:1, ring 8.3:1, links 9.5:1 All layout uses logical properties so Arabic (dir="rtl") mirrors it. */ :root { color-scheme: light; --bg: #ffffff; --panel: #f5f5f7; --border: #76767a; --text: #1c1c1e; --muted: #6b6b70; --accent: #ff9f0a; --accent-text: #1c1c1e; --link: #a35200; --ring: #2563eb; --shadow: 0 1px 3px rgb(0 0 0 / 8%), 0 8px 24px rgb(0 0 0 / 6%); } [data-theme="dark"] { color-scheme: dark; --bg: #1c1c1e; --panel: #2c2c2e; --border: #76767a; --text: #ffffff; --muted: #8e8e93; --accent: #ff9f0a; --accent-text: #1c1c1e; --link: #ffb340; --ring: #ff9f0a; --shadow: 0 1px 3px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: auto; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", "Noto Sans Devanagari", sans-serif; line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; width: 100%; max-width: 960px; margin-inline: auto; padding-inline: 1rem; } /* --- focus indicators (WCAG 2.4.7, 1.4.11) ------------------------------ */ :focus { outline: none; } :focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; } /* accent buttons get an inset ring: an outer ring would sit on the dark page background, and an outline of the accent color is invisible against the accent surface itself */ .btn:focus-visible, .icon-btn:focus-visible, select:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--accent-text); } /* --- links --------------------------------------------------------------- */ a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } /* --- skip link (WCAG 2.4.1) ---------------------------------------------- */ .skip-link { position: absolute; top: -10rem; inset-inline-start: 1rem; z-index: 10; padding: 0.625rem 1rem; border-radius: 0 0 10px 10px; background: var(--accent); color: var(--accent-text); font-weight: 600; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus-visible { top: 0; outline: none; } /* --- header -------------------------------------------------------------- */ .site-header { width: 100%; max-width: 960px; margin-inline: auto; padding: 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; } .brand { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; } .brand-icon { border-radius: 8px; } .header-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .gh-link { font-weight: 500; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; /* target size (WCAG 2.5.8) */ height: 44px; border-radius: 10px; border: 2px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; } .icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .icon-btn .icon-sun circle { fill: currentColor; stroke: none; } /* show the icon of the theme the button switches TO */ .icon-sun { display: none; } [data-theme="dark"] .icon-moon { display: none; } [data-theme="dark"] .icon-sun { display: block; } select { padding: 0.5rem 2rem 0.5rem 0.75rem; min-height: 44px; border-radius: 10px; border: 2px solid var(--border); background: var(--panel); color: var(--text); font-size: 1rem; cursor: pointer; } /* --- hero ---------------------------------------------------------------- */ .hero { text-align: center; max-width: 680px; margin-inline: auto; padding: 3rem 0 2rem; } .hero h1 { font-size: clamp(2.5rem, 9vw, 4.25rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; } .tagline { font-size: clamp(1.1rem, 3vw, 1.4rem); font-weight: 600; margin-top: 0.75rem; } .lede { color: var(--muted); font-size: 1.05rem; margin-top: 0.75rem; } .hero-cta { margin-top: 1.5rem; } .hero-cta .btn { display: inline-flex; } /* --- build cards --------------------------------------------------------- */ .builds h2 { font-size: 1.5rem; font-weight: 700; margin: 1.5rem 0 1rem; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; padding-bottom: 2rem; } /* The one-install note spans the card grid and sets the offer: one download per platform, every frontend inside (ADR-0011). */ .one-install { grid-column: 1 / -1; margin: 0; font-size: 1.05rem; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 1rem 1.25rem; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; box-shadow: var(--shadow); } .card h3 { font-size: 1.15rem; font-weight: 700; } .card p { font-size: 0.95rem; } .dl-title { font-size: 0.8rem !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-top: auto; padding-top: 0.5rem; } .dl-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; } .dl-list a { display: flex; align-items: center; min-height: 44px; /* target size (WCAG 2.5.8) */ padding: 0.625rem 0.875rem; border-radius: 10px; background: var(--bg); border: 2px solid var(--border); color: var(--text); font-size: 0.95rem; font-weight: 500; text-decoration: none; } .dl-list a:hover { border-color: var(--link); } /* primary action (PWA launch, download buttons) */ .btn { justify-content: center; background: var(--accent); border-color: transparent; color: var(--accent-text); font-weight: 600; } .btn:hover { border-color: transparent; } .note { color: var(--muted); font-size: 0.85rem !important; } /* --- footer -------------------------------------------------------------- */ .site-footer { width: 100%; max-width: 960px; margin-inline: auto; padding: 1.5rem 1rem 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; } .site-footer .muted { font-size: 0.85rem; } /* --- utilities ----------------------------------------------------------- */ .muted { color: var(--muted); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .skip-link { transition: none; } }