/* ═══════════════════════════════════════════════════════════════════════════ YAKA310 STUDIO — terminal design pass (v2) Reference direction: herdr.dev-style developer-tool aesthetic. Mono display type · warm off-white paper · 1px hairlines · terminal mock. Palette easter egg: click the header logo — data-palette on . ═══════════════════════════════════════════════════════════════════════════ */ /* ── Design tokens ────────────────────────────────────────────────────────── */ :root { --bg: #f0eee9; --bg-elevated: #f5f3ee; --ink: #1a1a18; --ink-soft: #3a3a36; --muted: #6b6b66; --muted-2: #8a8a84; --line: #d8d6d0; --line-strong: #c4c2bb; --accent: #4a9eff; /* decorative: dots, borders, tints */ --accent-strong: #1d5cba; /* text-safe on light bg (AA) */ --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent); --green: #2d9f52; --yellow: #b8860b; --red: #c73e3e; /* dark terminal-window tokens (the mock keeps its own dark scheme) */ --term-bg: #1a1d22; --term-sidebar-bg: #15181d; --term-active-bg: #20242c; --term-tab-bg: #20242c; --term-tab-active-bg: #4a9eff; --term-tab-active-text: #0c0c0b; --term-border: #2b3038; --term-text: #c8cdd4; --term-muted: #5a6068; --term-prompt: #4a9eff; --term-cmd: #8ecf7a; --term-str: #e6c060; --term-dim: #6a7078; --radius-lg: 6px; --radius-md: 4px; --radius-sm: 2px; --max: 1160px; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* ── Palette easter egg — editor colour schemes (open-source palettes) ────── */ [data-palette="dark"] { --bg: #0c0c0b; --bg-elevated: #131312; --ink: #f0ece0; --ink-soft: #dedad0; --muted: #8a8a80; --muted-2: #6c6c64; --line: #252522; --line-strong: #2e2e2b; --accent: #4a9eff; --accent-strong: #7ab6ff; --green: #52c97a; --yellow: #e6b84a; --red: #e05a5a; --term-bg: #0c0c0b; --term-sidebar-bg: #131312; --term-active-bg: #191918; --term-tab-bg: #191918; --term-border: #252522; --term-text: #dedad0; --term-muted: #6c6c64; --term-cmd: #52c97a; --term-str: #e6b84a; --term-dim: #8a8a80; } [data-palette="catppuccin"] { --bg: #11111b; --bg-elevated: #181825; --ink: #f5e0dc; --ink-soft: #cdd6f4; --muted: #9399b2; --muted-2: #7c81a0; --line: #313244; --line-strong: #45475a; --accent: #89b4fa; --accent-strong: #a5c5fb; --green: #a6e3a1; --yellow: #f9e2af; --red: #f38ba8; --term-bg: #11111b; --term-sidebar-bg: #181825; --term-active-bg: #1e1e2e; --term-tab-bg: #1e1e2e; --term-tab-active-bg: #89b4fa; --term-border: #313244; --term-text: #cdd6f4; --term-muted: #6c7086; --term-prompt: #89b4fa; --term-cmd: #a6e3a1; --term-str: #f9e2af; --term-dim: #9399b2; } [data-palette="catppuccin-latte"] { --bg: #eff1f5; --bg-elevated: #e6e9ef; --ink: #1e1e2e; --ink-soft: #4c4f69; --muted: #5c5f77; --muted-2: #8c8fa1; --line: #ccd0da; --line-strong: #bcc0cc; --accent: #1e66f5; --accent-strong: #1e5ad9; --green: #40a02b; --yellow: #df8e1d; --red: #d20f39; --term-bg: #24273a; --term-sidebar-bg: #1e2030; --term-active-bg: #2b2f44; --term-tab-bg: #2b2f44; --term-tab-active-bg: #8aadf4; --term-border: #363a4f; --term-text: #cad3f5; --term-muted: #6e738d; --term-prompt: #8aadf4; --term-cmd: #a6da95; --term-str: #eed49f; --term-dim: #8087a2; } [data-palette="tokyo-night"] { --bg: #1a1b26; --bg-elevated: #202331; --ink: #d5dcff; --ink-soft: #c0caf5; --muted: #8a91b8; --muted-2: #565f89; --line: #2f3549; --line-strong: #414868; --accent: #7aa2f7; --accent-strong: #9db6f9; --green: #9ece6a; --yellow: #e0af68; --red: #f7768e; --term-bg: #1a1b26; --term-sidebar-bg: #16161e; --term-active-bg: #24283b; --term-tab-bg: #24283b; --term-tab-active-bg: #7aa2f7; --term-border: #2f3549; --term-text: #c0caf5; --term-muted: #565f89; --term-prompt: #7aa2f7; --term-cmd: #9ece6a; --term-str: #e0af68; --term-dim: #737aa2; } [data-palette="dracula"] { --bg: #282a36; --bg-elevated: #303241; --ink: #ffffff; --ink-soft: #f8f8f2; --muted: #9ba2c4; --muted-2: #6272a4; --line: #44475a; --line-strong: #6272a4; --accent: #bd93f9; --accent-strong: #cfaefb; --green: #50fa7b; --yellow: #f1fa8c; --red: #ff5555; --term-bg: #282a36; --term-sidebar-bg: #21222c; --term-active-bg: #383a4a; --term-tab-bg: #383a4a; --term-tab-active-bg: #bd93f9; --term-border: #44475a; --term-text: #f8f8f2; --term-muted: #6272a4; --term-prompt: #bd93f9; --term-cmd: #50fa7b; --term-str: #f1fa8c; --term-dim: #8a91b4; } [data-palette="nord"] { --bg: #2e3440; --bg-elevated: #343b49; --ink: #ffffff; --ink-soft: #eceff4; --muted: #9aa5bb; --muted-2: #7b879d; --line: #434c5e; --line-strong: #4c566a; --accent: #88c0d0; --accent-strong: #a3d0dd; --green: #a3be8c; --yellow: #ebcb8b; --red: #bf616a; --term-bg: #2e3440; --term-sidebar-bg: #292e39; --term-active-bg: #3b4252; --term-tab-bg: #3b4252; --term-tab-active-bg: #88c0d0; --term-border: #434c5e; --term-text: #eceff4; --term-muted: #7b879d; --term-prompt: #88c0d0; --term-cmd: #a3be8c; --term-str: #ebcb8b; --term-dim: #8792a8; } [data-palette="gruvbox"] { --bg: #282828; --bg-elevated: #32302f; --ink: #fbf1c7; --ink-soft: #ebdbb2; --muted: #a89984; --muted-2: #928374; --line: #504945; --line-strong: #665c54; --accent: #d79921; --accent-strong: #fabd2f; --green: #b8bb26; --yellow: #fabd2f; --red: #fb4934; --term-bg: #282828; --term-sidebar-bg: #1d2021; --term-active-bg: #3c3836; --term-tab-bg: #3c3836; --term-tab-active-bg: #d79921; --term-border: #504945; --term-text: #ebdbb2; --term-muted: #928374; --term-prompt: #d79921; --term-cmd: #b8bb26; --term-str: #fabd2f; --term-dim: #a89984; } [data-palette="gruvbox-light"] { --bg: #fbf1c7; --bg-elevated: #f2e5bc; --ink: #282828; --ink-soft: #3c3836; --muted: #665c54; --muted-2: #928374; --line: #d5c4a1; --line-strong: #bdae93; --accent: #076678; --accent-strong: #076678; --green: #79740e; --yellow: #b57614; --red: #9d0006; --term-bg: #3c3836; --term-sidebar-bg: #32302f; --term-active-bg: #504945; --term-tab-bg: #504945; --term-tab-active-bg: #d79921; --term-border: #504945; --term-text: #ebdbb2; --term-muted: #a89984; --term-prompt: #fabd2f; --term-cmd: #b8bb26; --term-str: #fabd2f; --term-dim: #bdae93; } [data-palette="one-dark"] { --bg: #282c34; --bg-elevated: #2c313a; --ink: #d7dae0; --ink-soft: #abb2bf; --muted: #969daa; --muted-2: #5c6370; --line: #3e4451; --line-strong: #4b5263; --accent: #61afef; --accent-strong: #83c1f3; --green: #98c379; --yellow: #e5c07b; --red: #e06c75; --term-bg: #282c34; --term-sidebar-bg: #21252b; --term-active-bg: #323842; --term-tab-bg: #323842; --term-tab-active-bg: #61afef; --term-border: #3e4451; --term-text: #abb2bf; --term-muted: #5c6370; --term-prompt: #61afef; --term-cmd: #98c379; --term-str: #e5c07b; --term-dim: #7f848e; } [data-palette="solarized"] { --bg: #002b36; --bg-elevated: #073642; --ink: #eee8d5; --ink-soft: #93a1a1; --muted: #839496; --muted-2: #657b83; --line: #164a57; --line-strong: #586e75; --accent: #268bd2; --accent-strong: #4ba3e3; --green: #859900; --yellow: #b58900; --red: #dc322f; --term-bg: #002b36; --term-sidebar-bg: #00252e; --term-active-bg: #0b3d4a; --term-tab-bg: #0b3d4a; --term-tab-active-bg: #268bd2; --term-border: #164a57; --term-text: #93a1a1; --term-muted: #586e75; --term-prompt: #268bd2; --term-cmd: #859900; --term-str: #b58900; --term-dim: #839496; } [data-palette="solarized-light"] { --bg: #fdf6e3; --bg-elevated: #eee8d5; --ink: #073642; --ink-soft: #586e75; --muted: #657b83; --muted-2: #93a1a1; --line: #d6ceb8; --line-strong: #b5ab90; --accent: #268bd2; --accent-strong: #1a6ba3; --green: #859900; --yellow: #b58900; --red: #dc322f; --term-bg: #073642; --term-sidebar-bg: #002b36; --term-active-bg: #0b4354; --term-tab-bg: #0b4354; --term-tab-active-bg: #268bd2; --term-border: #164a57; --term-text: #93a1a1; --term-muted: #586e75; --term-prompt: #268bd2; --term-cmd: #859900; --term-str: #b58900; --term-dim: #839496; } [data-palette="rose-pine"] { --bg: #191724; --bg-elevated: #1f1d2e; --ink: #f4f0ff; --ink-soft: #e0def4; --muted: #908caa; --muted-2: #6e6a86; --line: #312f45; --line-strong: #403d52; --accent: #c4a7e7; --accent-strong: #d3bcee; --green: #9ccfd8; --yellow: #f6c177; --red: #eb6f92; --term-bg: #191724; --term-sidebar-bg: #141220; --term-active-bg: #26233a; --term-tab-bg: #26233a; --term-tab-active-bg: #c4a7e7; --term-border: #312f45; --term-text: #e0def4; --term-muted: #6e6a86; --term-prompt: #c4a7e7; --term-cmd: #9ccfd8; --term-str: #f6c177; --term-dim: #908caa; } [data-palette="rose-pine-dawn"] { --bg: #faf4ed; --bg-elevated: #f2e9e1; --ink: #191724; --ink-soft: #464261; --muted: #797593; --muted-2: #9893a5; --line: #e6ded7; --line-strong: #cec6bf; --accent: #907aa9; --accent-strong: #6a5583; --green: #56949f; --yellow: #ea9d34; --red: #b4637a; --term-bg: #26233a; --term-sidebar-bg: #1f1d2e; --term-active-bg: #312f45; --term-tab-bg: #312f45; --term-tab-active-bg: #c4a7e7; --term-border: #403d52; --term-text: #e0def4; --term-muted: #908caa; --term-prompt: #c4a7e7; --term-cmd: #9ccfd8; --term-str: #f6c177; --term-dim: #908caa; } [data-palette="kanagawa"] { --bg: #1f1f28; --bg-elevated: #252532; --ink: #f3ead3; --ink-soft: #dcd7ba; --muted: #8f8d80; --muted-2: #727169; --line: #363646; --line-strong: #54546d; --accent: #7e9cd8; --accent-strong: #9cb2e2; --green: #76946a; --yellow: #c0a36e; --red: #c34043; --term-bg: #1f1f28; --term-sidebar-bg: #16161d; --term-active-bg: #2a2a37; --term-tab-bg: #2a2a37; --term-tab-active-bg: #7e9cd8; --term-border: #363646; --term-text: #dcd7ba; --term-muted: #727169; --term-prompt: #7e9cd8; --term-cmd: #76946a; --term-str: #c0a36e; --term-dim: #8f8d80; } [data-palette="vesper"] { --bg: #101010; --bg-elevated: #1a1a1a; --ink: #ffffff; --ink-soft: #e0e0e0; --muted: #8f8f8f; --muted-2: #6c6c6c; --line: #282828; --line-strong: #343434; --accent: #ffc799; --accent-strong: #ffd7b3; --green: #99ffe4; --yellow: #ffc799; --red: #ff8080; --term-bg: #101010; --term-sidebar-bg: #0a0a0a; --term-active-bg: #232323; --term-tab-bg: #232323; --term-tab-active-bg: #ffc799; --term-border: #282828; --term-text: #ffffff; --term-muted: #6c6c6c; --term-prompt: #ffc799; --term-cmd: #99ffe4; --term-str: #ffc799; --term-dim: #8f8f8f; } /* ── Base ─────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; scroll-padding-top: 5rem; } body { margin: 0; min-width: 320px; background: var(--bg); } img, video { max-width: 100%; display: block; } button, a { font: inherit; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent-strong); } code, pre, kbd, samp { font-family: var(--mono); } ::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); } :focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: var(--radius-sm); } @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; } } .container { max-width: var(--max); margin: 0 auto; padding-inline: 1.25rem; } /* ── Header ───────────────────────────────────────────────────────────────── */ .preview-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 1px solid var(--line); transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease; } .preview-nav__right { display: flex; align-items: center; gap: 1.25rem; } /* Solid CTA — shared by the header, the hero, and the mobile menu. */ .nav-cta { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.4rem; padding: 0.55rem 1.05rem; border: 1px solid transparent; border-radius: var(--radius-md); background: #fff; color: #0c0c0b; font-family: var(--mono); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; } .nav-cta:hover { color: #0c0c0b; transform: scale(1.05); } .nav-cta:active { transform: scale(0.97); } .nav-cta__arrow { width: 1.05em; height: 1.05em; flex: 0 0 auto; } .nav-cta__arrow path, .nav-hamburger__ico path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Hamburger toggle (mobile only) */ .nav-hamburger { display: none; position: relative; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-elevated); color: var(--ink); cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease; } .nav-hamburger:active { transform: scale(0.9); } .nav-hamburger__ico { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; transition: opacity 0.3s ease, transform 0.3s ease; } .nav-hamburger__ico--menu { opacity: 1; transform: rotate(0) scale(1); } .nav-hamburger__ico--close { opacity: 0; transform: rotate(-90deg) scale(0.5); } .nav-hamburger[aria-expanded="true"] .nav-hamburger__ico--menu { opacity: 0; transform: rotate(90deg) scale(0.5); } .nav-hamburger[aria-expanded="true"] .nav-hamburger__ico--close { opacity: 1; transform: rotate(0) scale(1); } /* Mobile fullscreen overlay menu */ .mobile-menu { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; background: rgba(0, 0, 0, 0.98); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); opacity: 0; visibility: hidden; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .mobile-menu.is-open { opacity: 1; visibility: visible; } .mobile-menu__nav { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; transform: translateY(14px); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .mobile-menu.is-open .mobile-menu__nav { transform: translateY(0); } .mobile-menu__nav a { font-family: var(--mono); font-weight: 500; font-size: 1.875rem; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.9); transition: color 0.15s ease; } .mobile-menu__nav a:hover { color: #fff; } @media (min-width: 721px) { .mobile-menu { display: none; } } .preview-nav__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.85rem; } .preview-nav__label { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--mono); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.04em; color: var(--ink); } .brand-logo { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-elevated); color: var(--ink); font-family: var(--mono); font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: border-color 120ms ease, background 120ms ease, color 120ms ease; } .brand-logo:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); background: var(--accent-soft); color: var(--accent-strong); } .preview-nav__links { display: flex; align-items: center; gap: 1.25rem; color: var(--muted); font-family: var(--mono); font-size: 0.9rem; } .preview-nav__links a { transition: color 0.15s ease; } .preview-nav__links a:hover, .preview-nav__links a[aria-current="page"] { color: var(--accent-strong); } /* palette menu (logo easter egg) */ .logo-menu { position: absolute; top: calc(100% + 0.4rem); left: 1.25rem; z-index: 1000; min-width: 190px; max-height: min(60vh, 480px); overflow-y: auto; padding: 0.35rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--bg-elevated); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16); scrollbar-width: thin; } .logo-menu[hidden] { display: none; } .logo-menu-label { padding: 0.4rem 0.65rem 0.25rem; color: var(--muted); font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: lowercase; user-select: none; } .logo-menu button { display: flex; align-items: center; gap: 0.5rem; width: 100%; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); padding: 0.42rem 0.65rem; font-family: var(--mono); font-size: 0.82rem; font-weight: 600; text-align: left; cursor: pointer; } .logo-menu button:hover { background: var(--accent-soft); color: var(--accent-strong); } .logo-menu button[aria-pressed="true"]::after { content: "✓"; margin-left: auto; font-size: 0.75rem; } .swatch { display: inline-block; width: 0.62rem; height: 0.62rem; flex: 0 0 auto; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.2); } /* ── Type helpers ─────────────────────────────────────────────────────────── */ .h-eyebrow { margin: 0 0 1rem; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); font-family: var(--mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: lowercase; } .h-display { margin: 0; color: var(--ink); font-family: var(--mono); font-weight: 400; letter-spacing: -0.04em; line-height: 1.1; } .h-display em, .cta__h em { font-style: normal; color: var(--accent-strong); } /* ── Compact project overview ────────────────────────────────────────────── */ .hero-video { position: relative; display: flex; overflow: hidden; background: var(--bg); border-bottom: 1px solid var(--line); } .hero-video__content { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; gap: clamp(1.25rem, 2.5vh, 2rem); padding: clamp(6.5rem, 10vw, 8rem) clamp(1.5rem, 5vw, 4rem) clamp(1.75rem, 4vh, 3rem); color: var(--ink); } .hero-video__terminal { width: min(100%, 560px); align-self: flex-start; } .hero-video__badge { display: inline-block; font-family: var(--mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); } .hero-video__bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; } .hero-video__sub { margin: 0; max-width: 32rem; color: var(--ink-soft); font-size: clamp(0.95rem, 1.6vw, 1.1rem); line-height: 1.6; } .hero-video__cta { align-self: flex-start; } /* Staggered entrance for the hero copy */ @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .hv-badge { animation: fadeSlideUp 0.8s ease 0.2s both; } .hv-sub { animation: fadeSlideUp 0.8s ease 0.7s both; } .hv-cta { animation: fadeSlideUp 0.8s ease 0.9s both; } @media (prefers-reduced-motion: reduce) { .hv-badge, .hv-sub, .hv-cta { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ── Terminal mock ────────────────────────────────────────────────────────── */ .term { position: relative; z-index: 1; width: 100%; max-width: 560px; display: grid; grid-template-columns: minmax(148px, 30%) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--term-border); border-radius: var(--radius-lg); background: var(--term-bg); color: var(--term-muted); font-family: var(--mono); font-size: clamp(0.58rem, 1.05vw, 0.72rem); line-height: 1.5; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18); user-select: none; } .term__sidebar { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--term-border); background: var(--term-sidebar-bg); padding-bottom: 0.5rem; } .term__sidebar-title { display: flex; justify-content: space-between; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--term-border); color: var(--term-muted); font-weight: 700; } .term__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.45rem; align-items: start; padding: 0.35rem 0.7rem; color: var(--term-dim); } .term__item.active { background: var(--term-active-bg); } .term__item strong { display: block; overflow: hidden; color: var(--term-text); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; } /* The renamed product must keep all four platform names visible. */ .term .term-product-name { display: block; white-space: normal; overflow-wrap: break-word; overflow: visible; } .term__item small { display: block; overflow: hidden; margin-top: 0.14rem; font-size: 0.92em; white-space: nowrap; text-overflow: ellipsis; } .term__dot { width: 0.42rem; height: 0.42rem; margin-top: 0.34rem; border-radius: 50%; flex: 0 0 auto; } .dot--live { background: var(--term-cmd); } .dot--dev { background: var(--term-str); } .term__item .st--live { color: var(--term-cmd); } .term__item .st--dev { color: var(--term-str); } .term__main { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; } .term__tabs { display: flex; align-items: center; background: var(--term-tab-bg); color: var(--term-muted); border-bottom: 1px solid var(--term-border); } .term__tabs span { padding: 0.3rem 0.85rem; border-right: 1px solid var(--term-border); } .term__tabs span.active { background: var(--term-tab-active-bg); color: var(--term-tab-active-text); font-weight: 800; } .term__pane { min-width: 0; overflow: hidden; padding: 0.8rem 0.9rem 0.9rem; } .term__pane .prompt { color: var(--term-prompt); font-weight: 700; } .term__pane .cmd { color: var(--term-cmd); } .term__pane .str { color: var(--term-str); } .term__pane .dim { color: var(--term-dim); } .term__pane pre { margin: 0.3rem 0 0.8rem; color: var(--term-text); white-space: pre; overflow: hidden; } .cursor { display: inline-block; width: 0.5em; height: 1.1em; background: var(--term-text); vertical-align: -0.18em; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* ── Sections ─────────────────────────────────────────────────────────────── */ .sec { padding-block: 5rem; } .rule-top { border-top: 1px solid var(--line); } .rule-bottom { border-bottom: 1px solid var(--line); } /* ── Services (What we do) ────────────────────────────────────────────────── */ .services .h-display { max-width: 800px; } .services__list { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } .service { display: flex; gap: 0; flex-direction: column; min-height: 220px; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: transparent; } .service__idx { width: fit-content; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-strong); padding: 0.2rem 0.5rem; margin-bottom: 1rem; font-family: var(--mono); font-size: 0.68rem; font-weight: 700; } .service__title { margin: 0; color: var(--ink); font-family: var(--mono); font-weight: 400; font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1.2; } .service__body { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.6; } /* ── Work / case-study browser ────────────────────────────────────────────── */ .cs-layout { display: grid; grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; padding-block: 5rem; } .cs-side { position: sticky; top: 5rem; } .cs-side__head { margin-bottom: 1rem; } .cs-side__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-elevated); } .cs-side__list li + li { border-top: 1px solid var(--line); } .cs-side__list a { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.72rem 0.9rem; font-family: var(--mono); font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); transition: background 120ms ease, color 120ms ease; } .cs-side__list a .num { color: var(--muted); font-size: 0.72rem; font-weight: 700; } .cs-side__list a:hover { background: var(--accent-soft); color: var(--accent-strong); } .cs-side__list a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-strong); box-shadow: inset 2px 0 0 var(--accent); } .cs-side__list a[aria-current="page"] .num { color: var(--accent-strong); } #cs-content { animation: cs-fade 220ms ease; min-width: 0; } .cs-product-title { margin: 0 0 1.5rem; font-family: var(--mono); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: -0.03em; line-height: 1.2; overflow-wrap: break-word; } .cs-release { color: var(--ink-soft); line-height: 1.65; } .cs-release p { margin: 0; } .cs-release p + p { margin-top: 0.5rem; } .cs-release a { display: inline-block; margin-top: 0.65rem; } @keyframes cs-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .cs-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0 0 0.75rem; } .cs-info__cell, .cs-info__cell--wide { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.8rem 0.9rem; background: transparent; } .cs-info dt { margin: 0; color: var(--muted); font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: lowercase; } .cs-info dd { margin: 0.35rem 0 0; color: var(--ink); font-family: var(--mono); font-size: 0.88rem; font-weight: 600; overflow-wrap: anywhere; } .tabular { font-variant-numeric: tabular-nums; } .cs-tech { margin: 0 0 1.5rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-md); background: var(--bg-elevated); } .cs-tech dt { margin-bottom: 0.35rem; } .cs-tech dd { margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.65; } .cs-cover { margin: 0 0 2.5rem; } .cs-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--term-border); border-radius: var(--radius-lg); } .placeholder { display: grid; place-items: center; aspect-ratio: 16 / 9; border: 1px solid var(--term-border); border-radius: var(--radius-lg); background: linear-gradient(var(--term-border) 1px, transparent 1px), linear-gradient(90deg, var(--term-border) 1px, transparent 1px), var(--term-bg); background-size: 32px 32px, 32px 32px, auto; } .placeholder span { padding: 0.3rem 0.7rem; border: 1px solid var(--term-border); border-radius: var(--radius-sm); background: var(--term-bg); color: var(--term-text); font-family: var(--mono); font-size: 0.72rem; } .cs-highlights__head h2 { margin: 0 0 2rem; max-width: 640px; color: var(--ink); font-family: var(--mono); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: -0.03em; line-height: 1.15; } .highlight { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; padding: 1.1rem 0; border-top: 1px solid var(--line); } .highlight__num { border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-strong); padding: 0.2rem 0.5rem; height: fit-content; font-family: var(--mono); font-size: 0.68rem; font-weight: 700; } .highlight__body h3 { margin: 0; color: var(--ink); font-family: var(--mono); font-weight: 400; font-size: 1.1rem; letter-spacing: -0.02em; line-height: 1.25; } .highlight__body p { margin: 0.6rem 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.65; max-width: 62ch; } .highlight__fig { display: none; } /* ── Contact CTA ──────────────────────────────────────────────────────────── */ .cta { padding: 3.5rem clamp(1.25rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: var(--radius-lg); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; } .cta__h { margin: 0; color: var(--ink); font-family: var(--mono); font-weight: 400; font-size: clamp(1.8rem, 4vw, 3.2rem); letter-spacing: -0.04em; line-height: 1.1; } .link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-weight: 600; color: var(--ink); } .link-arrow .arrow { color: var(--accent-strong); transition: transform 120ms ease; } .link-arrow:hover .arrow { transform: translate(2px, -2px); } .hover-underline { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%; transition: background-size 160ms ease; padding-bottom: 2px; } .link-arrow:hover .hover-underline, a:hover > .hover-underline { background-size: 100% 1px; } /* ── Footer ───────────────────────────────────────────────────────────────── */ .footer { border-top: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: 0.85rem; } .footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-block: 1.75rem; } /* ── Responsive ───────────────────────────────────────────────────────────── */ @media (max-width: 960px) { .services__list { grid-template-columns: 1fr; } .service { min-height: 0; } .cs-layout { grid-template-columns: 1fr; gap: 1.75rem; } .cs-side { position: static; } .cta { grid-template-columns: 1fr; align-items: start; } } @media (max-width: 720px) { .sec { padding-block: 3.5rem; } .cs-layout { padding-block: 3.5rem; } .hero-video__content { gap: 1.5rem; } .hero-video__terminal { align-self: center; } /* mobile: collapse the desktop nav into the hamburger overlay */ .preview-nav__links { display: none; } .nav-hamburger { display: grid; } .cs-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-info__cell--wide { grid-column: 1 / -1; } .term { grid-template-columns: 1fr; } .term__sidebar { display: none; } } /* ── Site footer (mirrors src/styles/global.css so both halves of the site end with the same links) ──────────────────────────────────── */ .site-footer { border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; margin-top: 2rem; } .wordmark { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--mono); font-size: 0.9rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } .footer-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3rem 2rem; align-items: start; } .footer-brand { grid-column: 1 / span 5; } .footer-brand .h-display { margin-top: 1.25rem; font-size: clamp(1.3rem, 2.4vw, 1.9rem); max-width: 22ch; line-height: 1.2; } .footer-col { grid-column: span 2; } /* homepage footer has no brand column, so the links start from the left */ .footer-col--contact { grid-column: 1 / span 4; } .footer-col { grid-column: span 3; } .footer-col .h-eyebrow { margin-bottom: 0; } .footer-col ul { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; font-family: var(--mono); } .footer-col ul a:hover { color: var(--accent-strong); } .footer-bottom { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.78rem; font-family: var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; } @media (max-width: 760px) { .footer-brand, .footer-col, .footer-col--contact { grid-column: 1 / -1; } .footer-bottom { flex-direction: column; align-items: flex-start; } } .cs-fullcase { margin: 0 0 2.5rem; font-family: var(--mono); font-size: 0.9rem; } /* this stylesheet has no global list reset, so the footer lists need their own */ .footer-col ul { margin-top: 1rem; padding: 0; list-style: none; } .footer-col ul li { margin: 0; }