/* Cyclotron — monochrome, the same rule the app follows: no hue anywhere, contrast alone carries the hierarchy. Follows the visitor's system theme until they pick one with the switch, which sets data-theme on . */ :root { color-scheme: light; --bg: #ffffff; --fg: #0a0a0a; --muted: #6b6b6b; --faint: #9a9a9a; --rule: rgba(0, 0, 0, 0.14); --panel: #f5f5f5; --shot-bg: #e8e8e8; --sun: none; --moon: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #000000; --fg: #ffffff; --muted: #949494; --faint: #5c5c5c; --rule: rgba(255, 255, 255, 0.16); --panel: #0f0f0f; --shot-bg: #111111; --sun: block; --moon: none; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #000000; --fg: #ffffff; --muted: #949494; --faint: #5c5c5c; --rule: rgba(255, 255, 255, 0.16); --panel: #0f0f0f; --shot-bg: #111111; --sun: block; --moon: none; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; padding: 0 24px; } .wrap { max-width: 720px; margin: 0 auto; padding: 64px 0 96px; } .wrap--wide { max-width: 940px; } /* ---------- masthead ---------- */ header.top { display: flex; align-items: center; gap: 18px; padding-bottom: 34px; border-bottom: 1px solid var(--rule); } header.top img { width: 76px; height: 76px; border-radius: 17px; display: block; } header.top h1 { margin: 0; font-size: 30px; letter-spacing: -0.02em; font-weight: 700; } header.top p { margin: 3px 0 0; color: var(--muted); font-size: 16px; } /* ---------- hero ---------- */ .hero { text-align: center; padding: 20px 0 8px; } .hero img.icon { width: 116px; height: 116px; border-radius: 26px; display: block; margin: 0 auto 26px; } .hero h1 { margin: 0 0 10px; font-size: 48px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; } .hero .tagline { margin: 0 auto; max-width: 30ch; font-size: 20px; color: var(--muted); line-height: 1.45; } /* ---------- screenshot strip ---------- */ .shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 54px 0 12px; } .shots figure { margin: 0; } .shots picture { display: block; } .shots img { width: 100%; height: auto; display: block; border-radius: 14px; background: var(--shot-bg); border: 1px solid var(--rule); } .shots figcaption { margin-top: 10px; font-size: 13px; color: var(--faint); text-align: center; letter-spacing: 0.02em; } /* ---------- theme switch ---------- */ .theme-toggle { position: fixed; top: 16px; right: 16px; z-index: 10; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--panel); color: var(--muted); cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .theme-toggle:hover { color: var(--fg); } .theme-toggle:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; } .theme-toggle svg { width: 19px; height: 19px; grid-area: 1 / 1; } .theme-toggle .sun { display: var(--sun); } .theme-toggle .moon { display: var(--moon); } /* ---------- sections ---------- */ section { padding-top: 52px; } h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; } h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 30px 0 6px; } p { margin: 0 0 16px; } .lead { font-size: 19px; } .features { display: grid; gap: 26px; grid-template-columns: 1fr 1fr; } .features h3 { margin-top: 0; } .features p { margin: 0; color: var(--muted); font-size: 16px; } .panel { background: var(--panel); border: 1px solid var(--rule); border-radius: 14px; padding: 22px 24px; } .panel p:last-child { margin-bottom: 0; } a { color: var(--fg); text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } /* ---------- faq ---------- */ .faq { border-top: 1px solid var(--rule); } .faq details { border-bottom: 1px solid var(--rule); padding: 16px 0; } .faq summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--faint); font-weight: 400; font-size: 20px; line-height: 1; } .faq details[open] summary::after { content: "–"; } .faq details p { margin: 12px 0 0; color: var(--muted); font-size: 16px; max-width: 62ch; } /* ---------- footer ---------- */ footer { margin-top: 72px; padding-top: 26px; border-top: 1px solid var(--rule); color: var(--faint); font-size: 14px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; } footer a { color: var(--muted); } @media (max-width: 720px) { .wrap { padding: 44px 0 72px; } .theme-toggle { top: 12px; right: 12px; } .hero h1 { font-size: 38px; } .hero .tagline { font-size: 18px; } .shots { grid-template-columns: repeat(2, 1fr); gap: 14px; } .features { grid-template-columns: 1fr; gap: 22px; } }