@import "./tokens.css"; /* === Reset === */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; min-height: 100%; } body { min-height: 100%; margin: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* === Body & atmosphere === * The base is steel-blue pre-dawn. A radial sunrise warmth bleeds in at the * bottom edge in light mode (very faint at the top in dark mode). Three SVG * mist layers drift on top via the .mist class below. */ body { color: var(--fg); font-family: var(--font-sans); font-size: clamp(1rem, 0.94rem + 0.25vw, 1.0625rem); line-height: 1.65; letter-spacing: 0.005em; background: radial-gradient(ellipse at 80% 110%, var(--bg-warm), transparent 50%), var(--bg-base); position: relative; overflow-x: hidden; } @media (prefers-color-scheme: dark) { body { background: radial-gradient(ellipse at 50% -10%, var(--bg-warm), transparent 55%), var(--bg-base); } } /* === Mist layers (decorative, behind everything) === * Three independently-drifting SVG noise overlays. The HTML drops three * . */ .mist { position: fixed; inset: -10%; pointer-events: none; z-index: 0; mix-blend-mode: screen; opacity: 0.55; will-change: transform; } @media (prefers-color-scheme: dark) { .mist { mix-blend-mode: lighten; opacity: 0.35; } } .mist-a { animation: drift-a 60s ease-in-out infinite; } .mist-b { animation: drift-b 90s ease-in-out infinite; opacity: 0.4; } .mist-c { animation: drift-c 120s ease-in-out infinite; opacity: 0.3; } @media (prefers-color-scheme: dark) { .mist-b { opacity: 0.25; } .mist-c { opacity: 0.2; } } @keyframes drift-a { 0% { transform: translate3d(-5%, 2%, 0); } 50% { transform: translate3d(5%, -3%, 0); } 100% { transform: translate3d(-5%, 2%, 0); } } @keyframes drift-b { 0% { transform: translate3d(3%, -2%, 0); } 50% { transform: translate3d(-4%, 3%, 0); } 100% { transform: translate3d(3%, -2%, 0); } } @keyframes drift-c { 0% { transform: translate3d(-2%, 4%, 0); } 50% { transform: translate3d(4%, -2%, 0); } 100% { transform: translate3d(-2%, 4%, 0); } } /* === Links === */ a { color: var(--accent); text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* === Headings === * h1 has a slow letter-spacing breath (8s). Reduced-motion disables it. */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.2; letter-spacing: -0.012em; margin: 0 0 var(--space-5); } h1 { font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem); animation: breath 8s ease-in-out infinite; } h1 .glow { color: var(--accent); text-shadow: 0 0 24px var(--accent-glow); } h2 { font-size: clamp(1.375rem, 1.2rem + 0.875vw, 1.75rem); margin-top: var(--space-7); } h3 { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); margin-top: var(--space-6); } @keyframes breath { 0%, 100% { letter-spacing: -0.012em; } 50% { letter-spacing: -0.002em; } } @media (prefers-reduced-motion: reduce) { h1 { animation: none; } } p { margin: 0 0 var(--space-4); max-width: 70ch; } /* === Code === */ code, kbd, pre { font-family: var(--font-mono); font-size: 0.95em; } code { background: var(--bg-sunk); padding: 0.1em 0.4em; border-radius: 4px; border: 1px solid var(--border-soft); } pre { background: var(--bg-sunk); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); overflow-x: auto; font-size: 0.875rem; line-height: 1.55; } pre code { background: transparent; padding: 0; border: none; } /* === Skip link === */ .skip-link { position: absolute; top: -100px; left: var(--space-2); z-index: 100; background: var(--bg-elev); color: var(--fg); padding: var(--space-2) var(--space-4); border: 1px solid var(--accent); border-radius: var(--radius); backdrop-filter: blur(8px); } .skip-link:focus-visible { top: var(--space-2); } /* === Visually hidden (for SR-only labels, captions) === */ .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; } /* === Layout === */ .page { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; padding: var(--space-7) var(--space-5) var(--space-9); } /* === Header === */ header.site { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--border-soft); background: var(--bg-elev); backdrop-filter: blur(20px) saturate(120%); -webkit-backdrop-filter: blur(20px) saturate(120%); } header.site .row { max-width: 920px; margin: 0 auto; padding: var(--space-3) var(--space-5); display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; } header.site .brand { display: inline-flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; letter-spacing: 0.005em; text-decoration: none; color: var(--fg); } header.site .brand .ja { font-weight: 400; font-size: 0.9375rem; color: var(--fg-muted); } header.site nav.primary { display: flex; gap: var(--space-3); margin-left: auto; flex-wrap: wrap; } header.site nav.primary a { color: var(--fg-muted); text-decoration: none; font-size: 0.9375rem; padding: var(--space-1) var(--space-3); border-radius: var(--radius); min-height: 44px; display: inline-flex; align-items: center; transition: color 300ms ease, background-color 300ms ease; } header.site nav.primary a:hover { color: var(--fg); } header.site nav.primary a[aria-current="page"] { color: var(--fg); background: var(--accent-soft); } /* === Lede / meta / tag === */ .lede { font-size: 1.0625rem; color: var(--fg-muted); max-width: 36em; margin: 0 0 var(--space-6); } .meta { font-size: 0.8125rem; color: var(--fg-muted); letter-spacing: 0.05em; text-transform: uppercase; font-family: var(--font-mono); } .tag { display: inline-block; font-size: 0.6875rem; font-family: var(--font-mono); padding: 0.15em 0.6em; background: var(--accent-soft); color: var(--accent); border-radius: 4px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--space-2); } /* === Glass card with dew on hover === * Frosted-glass surface, translucent fills, single dew droplet that * appears at the top-right corner on hover. */ .card { position: relative; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); backdrop-filter: blur(20px) saturate(115%); -webkit-backdrop-filter: blur(20px) saturate(115%); overflow: hidden; transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 500ms ease, box-shadow 500ms ease; } .card::before { /* dew droplet */ content: ""; position: absolute; top: 14px; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--dew), transparent 80%); box-shadow: inset 0 0 0 1px var(--dew-rim); opacity: 0; transform: translateY(-4px); transition: opacity 600ms ease, transform 600ms ease; } .card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-md); } .card:hover::before { opacity: 1; transform: translateY(0); } .card h3 { margin-top: 0; } @media (prefers-reduced-motion: reduce) { .card { transition: border-color 200ms; } .card:hover { transform: none; box-shadow: var(--shadow-sm); } .card::before { transition: opacity 200ms; } .card:hover::before { transform: none; } } /* === Grid / cluster === */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--space-4); } .cluster { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; } /* === Tables === */ table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; } th, td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-soft); } th { color: var(--fg-muted); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.02em; } /* === Figures / diagrams === */ figure.diagram { margin: var(--space-5) 0; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); backdrop-filter: blur(12px); overflow-x: auto; } figure.diagram figcaption { margin-top: var(--space-3); font-size: 0.875rem; color: var(--fg-muted); } figure.diagram svg { display: block; max-width: 100%; height: auto; } /* === Screenshot figure === */ .screenshot { margin: var(--space-4) 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--bg-sunk); box-shadow: var(--shadow-sm); } .screenshot img { width: 100%; height: auto; display: block; } /* === Callout === */ .callout { position: relative; border-left: 3px solid var(--accent); background: var(--accent-soft); padding: var(--space-3) var(--space-4); border-radius: 0 var(--radius) var(--radius) 0; margin: var(--space-4) 0; } .callout strong { color: var(--accent); } /* === Screens grid (real-session captures) === */ .screens-grid { display: grid; /* min(Npx, 100%) prevents the fixed 280px min from overflowing viewports < 320px wide (WCAG 1.4.10 Reflow). */ grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--space-4); margin: var(--space-4) 0; } .screens-grid figure { margin: 0; border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); } .screens-grid figure img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--border-soft); } .screens-grid figcaption { padding: var(--space-2) var(--space-3); font-size: 0.85rem; color: var(--fg-muted); line-height: 1.45; } /* === Footer === */ footer.site { position: relative; z-index: 1; border-top: 1px solid var(--border-soft); margin-top: var(--space-9); padding: var(--space-5); text-align: center; color: var(--fg-muted); font-size: 0.875rem; } footer.site a { color: var(--fg-muted); }