/* Mogi landing page. * * Tokens are lifted verbatim from the app's design system * (frontend/src/style.css) so the site and the app read as one product: * "washi paper" light by default, "indigo night" dark. The app writes its * theme to ; a static page has no toggle, so here dark mode * follows the OS via prefers-color-scheme (with data-theme still honoured in * case a toggle is ever added). */ /* ───────────────────────────── LIGHT (default) ───────────────────────── */ :root { --background: #f6f0e6; --surface: #fffcf6; --surface-container-low: #fbf6ec; --surface-container: #ede3d6; --surface-container-high: #e4d8c7; --level-1-bg: #fffcf6; --level-1-border: #e2d6c4; --on-surface: #23264a; --on-surface-variant: #5b5f7c; --outline-variant: #c7baa6; --primary: #2c2f5a; --primary-container: #2c2f5a; --primary-container-hover: #3a3d6e; --on-primary: #ede3d6; --secondary: #5f7639; --warning: #d89a2e; --font-display: "Shippori Mincho", Georgia, "Times New Roman", serif; --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "Courier New", monospace; --shadow: 0 1px 2px rgba(35, 38, 74, 0.06), 0 8px 24px rgba(35, 38, 74, 0.06); /* Translucent backing for the sticky header (a alpha'd --background). */ --header-bg: rgba(246, 240, 230, 0.82); /* The header's total footprint, hairline rule included. Pinned rather than left to font metrics so the hero can subtract it and land exactly on the fold. See .header-inner. */ --header-h: 4.25rem; } /* ───────────────────────────── DARK ──────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --background: #111330; --surface: #111330; --surface-container-low: #1a1d3a; --surface-container: #24274c; --surface-container-high: #2c2f5a; --level-1-bg: #1a1d3a; --level-1-border: #333764; --on-surface: #ede3d6; --on-surface-variant: #b4afc2; --outline-variant: #4a4e78; --primary: #8e93e0; --primary-container: #8e93e0; --primary-container-hover: #9da1e8; --on-primary: #14162a; --secondary: #a0ba76; --warning: #edb94a; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35); --header-bg: rgba(17, 19, 48, 0.82); } } /* ───────────────────────────── Reset ─────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--background); color: var(--on-surface); font-family: var(--font-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } a { color: inherit; } code { font-family: var(--font-mono); font-size: 0.88em; background: var(--surface-container); border-radius: 5px; padding: 0.15em 0.42em; } /* ───────────────────────────── Header ────────────────────────────────── */ /* Sticky so the section nav stays reachable down a long page. The border is added by JS (.scrolled) only once content passes under it — at the very top a hairline floating over the hero looks like a mistake. */ .site-header { position: sticky; top: 0; z-index: 20; background: var(--header-bg); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.2s ease; } .site-header.scrolled { border-bottom-color: var(--level-1-border); } /* The bar spans the window so its blur is full-bleed; the contents inside stay aligned with the page's own column. Height comes from --header-h instead of vertical padding: the hero sizes itself to "the viewport minus the header", so that number has to be known up front rather than falling out of whatever the wordmark's line box is. Less the 1px rule on .site-header, which is part of the same footprint. */ .header-inner { max-width: 68rem; margin: 0 auto; min-height: calc(var(--header-h) - 1px); padding: 0 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .header-inner > * { flex: 0 0 auto; } /* Anchored headings would otherwise land under the sticky bar. */ :target, main section[id] { scroll-margin-top: calc(var(--header-h) + 0.5rem); } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ───────────────────────────── Section nav ───────────────────────────── */ .section-nav { display: flex; align-items: center; gap: 0.35rem; min-width: 0; overflow-x: auto; scrollbar-width: none; /* the bar scrolls on narrow screens; hide the track */ } .section-nav::-webkit-scrollbar { display: none; } .section-nav a { position: relative; text-decoration: none; white-space: nowrap; font-size: 0.92rem; color: var(--on-surface-variant); padding: 0.4rem 0.8rem; border-radius: 999px; transition: color 0.15s ease, background 0.15s ease; } .section-nav a:hover { color: var(--on-surface); background: var(--surface-container); } /* Set by the IntersectionObserver in index.html. */ .section-nav a[aria-current="true"] { color: var(--on-surface); font-weight: 500; } .section-nav a[aria-current="true"]::after { content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.05rem; height: 2px; border-radius: 2px; background: var(--secondary); } .section-nav a:focus-visible, .wordmark:focus-visible, .header-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Under ~62rem the four labels crowd the wordmark and the GitHub pill, so drop the pill first (the footer still links out) and let the nav take the room. */ @media (max-width: 62rem) { .header-link { display: none; } } @media (max-width: 34rem) { .wordmark span { display: none; /* keep the mark, drop the word */ } .header-inner { padding-inline: 1rem; gap: 0.5rem; justify-content: flex-start; } /* With the GitHub pill gone, space-between would shove the nav hard against the right edge. Let it own the remaining width and scroll inside itself. */ .section-nav { flex: 1 1 auto; justify-content: space-between; } .section-nav a { padding-inline: 0.5rem; font-size: 0.85rem; } } .wordmark { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; text-decoration: none; letter-spacing: 0.01em; } .wordmark img { border-radius: 7px; } .header-link { color: var(--on-surface-variant); text-decoration: none; font-size: 0.95rem; padding: 0.4rem 0.9rem; border: 1px solid var(--outline-variant); border-radius: 999px; transition: color 0.15s ease, border-color 0.15s ease; } .header-link:hover { color: var(--on-surface); border-color: var(--on-surface-variant); } /* ───────────────────────────── Hero ──────────────────────────────────── */ /* The hero owns the whole first screen: it fills the viewport below the header and centres its contents there. Anything less and the next section peeks up from below the fold, which reads as the page having started scrolled. svh (not vh) because on mobile 100vh is the *expanded* viewport — measured with the browser toolbar hidden — so vh alone pushes the hero's bottom under the toolbar on load. min-height, not height, so a short window (landscape phone) lets the hero grow rather than clipping the headline. */ .hero { max-width: 48rem; margin: 0 auto; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; padding: 4rem 1.5rem; text-align: center; } .kicker { font-family: var(--font-display); color: var(--secondary); letter-spacing: 0.28em; font-size: 0.85rem; margin: 0 0 1.6rem; } .hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.18; letter-spacing: -0.015em; margin: 0 0 1.5rem; } .lede { font-size: clamp(1.05rem, 2.2vw, 1.2rem); color: var(--on-surface-variant); margin: 0 auto; max-width: 34rem; } .cta { margin-top: 2.75rem; } .btn-primary { display: inline-block; background: var(--primary-container); color: var(--on-primary); font-weight: 600; font-size: 1.02rem; text-decoration: none; padding: 0.95rem 2.4rem; border-radius: 999px; box-shadow: var(--shadow); transition: background 0.15s ease, transform 0.15s ease; } .btn-primary:hover { background: var(--primary-container-hover); transform: translateY(-1px); } .cta-meta { margin: 0.9rem 0 0; font-size: 0.88rem; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; } /* ───────────────────────────── Bands ─────────────────────────────────── */ .band { max-width: 62rem; margin: 0 auto; padding: 4.5rem 1.5rem; } .band.alt { max-width: none; background: var(--surface-container-low); border-block: 1px solid var(--level-1-border); } .band.alt > * { max-width: 62rem; margin-inline: auto; } .band h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3.6vw, 2.2rem); letter-spacing: -0.01em; margin: 0 0 1rem; } .section-lede { color: var(--on-surface-variant); max-width: 40rem; margin: 0 0 3rem; } /* ───────────────────────────── Steps ─────────────────────────────────── */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .step-num { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 999px; background: var(--primary-container); color: var(--on-primary); font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; margin-bottom: 1rem; } .steps h3, .card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; margin: 0 0 0.5rem; } .steps p, .card p { margin: 0; color: var(--on-surface-variant); font-size: 0.97rem; } /* ───────────────────────────── Cards ─────────────────────────────────── */ /* Four cards: auto-fit would wrap them 3 + 1 and orphan the last one, so pin to two columns once there's room and let them stack below that. */ .grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 2.5rem; } @media (min-width: 46rem) { .grid { grid-template-columns: repeat(2, 1fr); } } .card { background: var(--level-1-bg); border: 1px solid var(--level-1-border); border-radius: 16px; padding: 1.6rem; } /* ───────────────────────────── Install ───────────────────────────────── */ .install { margin: 2.5rem 0 0; padding-left: 1.3rem; max-width: 42rem; } .install > li { margin-bottom: 1.1rem; padding-left: 0.4rem; } .install > li::marker { font-family: var(--font-display); font-weight: 600; color: var(--on-surface-variant); } /* Reassurance, not a warning — hence the brand accent rather than --warning. */ .callout { margin-top: 0.9rem; background: var(--surface-container-low); border: 1px solid var(--level-1-border); border-left: 3px solid var(--primary); border-radius: 12px; padding: 1.1rem 1.25rem; } .callout p { margin: 0; font-size: 0.94rem; color: var(--on-surface-variant); } .note { margin-top: 2.5rem; font-size: 0.94rem; color: var(--on-surface-variant); max-width: 42rem; } /* ───────────────────────────── Keys ──────────────────────────────────── */ /* A single column rather than the feature grid: each entry is a short set of setup instructions, so line length matters more than filling the width. */ .keys { display: grid; gap: 1rem; max-width: 46rem; } .key { background: var(--level-1-bg); border: 1px solid var(--level-1-border); border-radius: 16px; padding: 1.4rem 1.6rem; } .key-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 0.55rem; } .key h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; margin: 0; } .key p { margin: 0; color: var(--on-surface-variant); font-size: 0.97rem; } .key a { color: inherit; text-decoration-color: var(--outline-variant); text-underline-offset: 3px; } .key a:hover { color: var(--on-surface); } .badge { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--outline-variant); color: var(--on-surface-variant); white-space: nowrap; } .badge-req { background: var(--primary-container); border-color: var(--primary-container); color: var(--on-primary); } /* Walkthroughs are collapsed by default: most visitors just want the link, and three expanded step lists would bury the rest of the page.
gives us this natively — keyboard-accessible, no JavaScript, and it still prints. */ .key details { margin-top: 0.9rem; border-top: 1px solid var(--level-1-border); padding-top: 0.9rem; } .key summary { cursor: pointer; font-size: 0.9rem; font-weight: 500; color: var(--on-surface); list-style: none; display: flex; align-items: center; gap: 0.45rem; } .key summary::-webkit-details-marker { display: none; } /* Custom disclosure triangle that rotates when open. */ .key summary::before { content: ""; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.15s ease; } .key details[open] summary::before { transform: rotate(90deg); } .key summary:hover { color: var(--primary); } .key summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; } .key details ol { margin: 1rem 0 0; padding-left: 1.25rem; color: var(--on-surface-variant); font-size: 0.94rem; } .key details li { margin-bottom: 0.55rem; padding-left: 0.2rem; } .key details li::marker { color: var(--outline-variant); } .details-note { margin: 1rem 0 0 !important; padding-top: 0.8rem; border-top: 1px solid var(--level-1-border); font-size: 0.89rem !important; } /* ───────────────────────────── Footer ────────────────────────────────── */ .site-footer { border-top: 1px solid var(--level-1-border); padding: 2.5rem 1.5rem 3.5rem; text-align: center; color: var(--on-surface-variant); font-size: 0.92rem; } .site-footer p { margin: 0; } .site-footer a { color: var(--on-surface-variant); text-decoration-color: var(--outline-variant); text-underline-offset: 3px; } .site-footer a:hover { color: var(--on-surface); } .site-footer span { margin: 0 0.55rem; opacity: 0.5; } .colophon { margin-top: 0.8rem !important; font-family: var(--font-display); opacity: 0.75; } /* ───────────────────────────── Motion ────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } .btn-primary:hover { transform: none; } }