/* Electra Apps Studio — manifesto page. Same token system and editorial-minimal language as the studio's apps (atlas-red.com, open-deck.org): serif display, a three-block theme system (auto via media query; data-theme="light|dark" forces a mode, restored before first paint by /theme-boot.js). Retinted to Electra's violet/indigo identity. */ /* Display face for the wordmark + hero title: Marcellus, an inscriptional roman (OFL). Self-hosted — single weight (400), no italic, so accents use colour rather than a synthesised slant. Body/lede stay on the system serif. */ @font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/marcellus-latin-400-normal.woff2') format('woff2'); } /* Logotype face for the wordmark: Questrial, a light geometric sans (OFL), self-hosted, single weight. */ @font-face { font-family: 'Questrial'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/questrial-latin-400-normal.woff2') format('woff2'); } :root { color-scheme: light; --bg: #f5f4fb; --surface: #ffffff; --fg: #1a1826; --muted: #6b6780; --accent: #6944d6; --on-accent: #ffffff; --border: #e7e3f2; --edge: #c4bddb; --shadow: 0 8px 28px rgba(26, 24, 38, 0.1); --display: 'Marcellus', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; --logo: 'Questrial', -apple-system, 'Segoe UI', Roboto, sans-serif; --serif: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif; --mono: ui-monospace, 'SF Mono', Menlo, monospace; --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --grid: color-mix(in srgb, var(--edge) 24%, transparent); --ink: color-mix(in srgb, var(--fg) 84%, var(--muted)); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --bg: #14131d; --surface: #1d1b29; --fg: #eae7f2; --muted: #9b97ad; --accent: #a98bfb; --on-accent: #14131d; --border: #2f2c40; --edge: #433e58; --shadow: 0 8px 28px rgba(0, 0, 0, 0.45); } } :root[data-theme='dark'] { color-scheme: dark; --bg: #14131d; --surface: #1d1b29; --fg: #eae7f2; --muted: #9b97ad; --accent: #a98bfb; --on-accent: #14131d; --border: #2f2c40; --edge: #433e58; --shadow: 0 8px 28px rgba(0, 0, 0, 0.45); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scrollbar-gutter: stable; } [hidden] { display: none !important; } body { background: var(--bg); /* a clean ground with a single soft halo behind the hero — no grid */ background-image: radial-gradient(900px 520px at 50% -8%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%); background-repeat: no-repeat; color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .visually-hidden { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } a { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---- nav ---- */ .nav { max-width: 1100px; margin: 0 auto; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--logo); font-weight: 400; font-size: 22px; letter-spacing: 0.005em; color: var(--fg); text-transform: lowercase; } .wm-name { color: var(--accent); } .wm-rest { color: var(--fg); } .nav-side { display: flex; align-items: center; gap: 16px; } .theme-toggle { color: var(--fg); cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; } .theme-toggle:hover { border-color: var(--edge); } /* one icon at a time, driven by the forced theme on (none = auto) */ .theme-toggle svg { display: none; } :root:not([data-theme]) .ti-auto { display: block; } :root[data-theme='light'] .ti-light { display: block; } :root[data-theme='dark'] .ti-dark { display: block; } /* ---- manifesto ---- */ .manifesto { max-width: 820px; margin: 0 auto; padding: 64px 24px 8px; } .m-head { text-align: center; } .m-title { font-family: var(--display); font-weight: 400; font-size: clamp(42px, 6.2vw, 68px); line-height: 1.08; letter-spacing: 0; } /* Marcellus has no italic — the accent word carries colour, upright. */ .m-title em { color: var(--accent); font-style: normal; } .m-lede { font-family: var(--serif); font-size: clamp(19px, 2.4vw, 23px); line-height: 1.5; color: var(--muted); max-width: 30ch; margin: 22px auto 0; } .m-lede strong { color: var(--fg); font-weight: 400; } /* the manifesto body: a readable single column, left-aligned for reading */ .m-body { max-width: 34em; margin: 56px auto 0; font-family: var(--serif); font-size: clamp(18px, 2.1vw, 20px); line-height: 1.72; color: var(--ink); } .m-body p { margin-bottom: 1.15em; } .m-body p:last-child { margin-bottom: 0; } .m-body em { color: var(--accent); font-style: italic; } .m-body strong { color: var(--fg); font-weight: 600; } .m-rule { width: 52px; height: 2px; margin: 44px auto; border: 0; background: color-mix(in srgb, var(--accent) 55%, transparent); } /* ---- proof: the studio's first application, stated quietly ---- */ .proof { border-top: 1px solid var(--border); margin-top: 80px; } .proof-inner { max-width: 640px; margin: 0 auto; padding: 60px 24px 4px; text-align: center; } .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; } .proof-line { font-family: var(--serif); font-size: clamp(21px, 3vw, 27px); line-height: 1.4; color: var(--fg); } .proof-line em { color: var(--accent); font-style: italic; } .proof-sub { color: var(--muted); margin: 12px auto 0; max-width: 46ch; } .proof-link { display: inline-block; margin-top: 22px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em; text-decoration: none; font-weight: 600; } .proof-link:hover { text-decoration: underline; } /* ---- footer ---- */ .footer { border-top: 1px solid var(--border); max-width: 1100px; margin: 88px auto 0; padding: 40px 24px 56px; text-align: center; } .footer-links { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 16px; } .footer-links a { color: var(--muted); text-decoration: none; } .footer-links a:hover { color: var(--accent); } .footer-dot { opacity: 0.5; margin: 0 10px; } .footer-meta { font-family: var(--mono); font-size: 12px; color: var(--muted); }