/* ========================================================================== cTerm site — design system -------------------------------------------------------------------------- Catppuccin tokens (Mocha = dark default, Latte = light) exposed as CSS custom properties on `:root` and `:root[data-theme="latte"]`. The theme toggle in script.js just flips the data-theme attribute on , and every component reads from var(--token). Brand direction: terminal-as-aesthetic. Sapphire→teal accents (Catppuccin sapphire/teal members) replace the default blue, with a `--accent-glow` token used for phosphor-style headings. IBM Plex Mono is the display face, Inter the body. ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap"); :root { /* Catppuccin Mocha (dark) — default */ --bg-base: #1e1e2e; --bg-mantle: #181825; --bg-crust: #11111b; --bg-card: #313244; --bg-card-hover: #45475a; --border: #45475a; --border-strong: #585b70; --text-main: #cdd6f4; --text-secondary:#bac2de; --text-muted: #a6adc8; --text-faint: #6c7086; --accent: #74c7ec; /* sapphire — cTerm primary signature */ --accent-strong: #94e2d5; /* teal — hover/active brighter shade */ --accent-glow: rgba(116, 199, 236, 0.40); /* phosphor halo on display headings */ --accent-warm: #fab387; /* peach — "filter active" automation feel */ --accent-warn: #f9e2af; /* yellow */ --accent-good: #a6e3a1; /* green */ --accent-bad: #f38ba8; /* red */ --shadow: rgba(0, 0, 0, 0.40); /* Layout / typography */ --container-w: 1100px; --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --gap-1: 4px; --gap-2: 8px; --gap-3: 12px; --gap-4: 16px; --gap-5: 24px; --gap-6: 32px; --gap-8: 48px; --gap-10: 64px; --font-sans: "Inter", "Pretendard", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "IBM Plex Mono", ui-monospace, "JetBrains Mono", "Cascadia Code", Consolas, monospace; --font-mono: ui-monospace, "JetBrains Mono", "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace; } :root[data-theme="latte"] { /* Catppuccin Latte (light) */ --bg-base: #eff1f5; --bg-mantle: #e6e9ef; --bg-crust: #dce0e8; --bg-card: #ffffff; --bg-card-hover: #e6e9ef; --border: #bcc0cc; --border-strong: #9ca0b0; --text-main: #4c4f69; --text-secondary:#5c5f77; --text-muted: #6c6f85; --text-faint: #8c8fa1; --accent: #209fb5; /* sapphire (latte) */ --accent-strong: #179299; /* teal (latte) */ --accent-glow: rgba(32, 159, 181, 0.18); /* dialed back for light bg */ --accent-warm: #fe640b; --accent-warn: #df8e1d; --accent-good: #40a02b; --accent-bad: #d20f39; --shadow: rgba(76, 79, 105, 0.18); } /* ---------- reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg-base); color: var(--text-main); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } main { flex: 1; } a { color: var(--accent); text-decoration: none; transition: color 120ms ease; } a:hover { color: var(--accent-strong); text-decoration: underline; } h1, h2, h3, h4 { margin: 0 0 var(--gap-3); line-height: 1.25; font-weight: 700; color: var(--text-main); } /* Display headings use IBM Plex Mono — tabular-figured monospace lends a terminal weight to the largest titles. h3/h4 stay sans for readability. */ h1, h2 { font-family: var(--font-display); font-feature-settings: "tnum", "ss01"; font-weight: 600; } h1 { font-size: 2.25rem; letter-spacing: -0.02em; } h2 { font-size: 1.5rem; letter-spacing: -0.01em; } h3 { font-size: 1.15rem; } p { margin: 0 0 var(--gap-3); color: var(--text-secondary); } code, pre { font-family: var(--font-mono); font-size: 0.92em; } code { background: var(--bg-mantle); border: 1px solid var(--border); padding: 1px 5px; border-radius: var(--radius-sm); color: var(--accent-warm); } pre { background: var(--bg-mantle); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--gap-3) var(--gap-4); overflow-x: auto; margin: var(--gap-3) 0; } pre code { background: transparent; border: none; padding: 0; color: var(--text-main); } hr { border: none; border-top: 1px solid var(--border); margin: var(--gap-6) 0; } table { width: 100%; border-collapse: collapse; margin: var(--gap-3) 0; font-size: 0.95em; } th, td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; } th { background: var(--bg-mantle); color: var(--text-main); font-weight: 600; } /* ---------- container ---------- */ .container { width: 100%; max-width: var(--container-w); margin: 0 auto; padding: 0 var(--gap-5); } /* ---------- header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg-base) 92%, transparent); backdrop-filter: saturate(180%) blur(8px); -webkit-backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--border); } .nav { display: flex; align-items: center; gap: var(--gap-5); height: 56px; } .nav-brand { display: flex; align-items: center; gap: var(--gap-2); font-weight: 700; font-size: 1.05rem; color: var(--text-main); letter-spacing: -0.01em; } .nav-brand:hover { text-decoration: none; color: var(--text-main); } .nav-brand .logo { width: 28px; height: 28px; border: 1.5px solid var(--accent); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; color: var(--accent); box-shadow: inset 0 0 0 1px transparent, 0 0 12px var(--accent-glow); transition: box-shadow 200ms ease, transform 200ms ease; } .nav-brand:hover .logo { box-shadow: inset 0 0 0 1px var(--accent), 0 0 20px var(--accent-glow); transform: translateY(-1px); } .nav-links { display: flex; gap: var(--gap-4); margin-left: var(--gap-3); } .nav-links a { color: var(--text-secondary); font-size: 0.95rem; font-weight: 500; padding: 6px 4px; border-bottom: 2px solid transparent; transition: color 120ms ease, border-color 120ms ease; } .nav-links a:hover { color: var(--text-main); text-decoration: none; } .nav-links a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); } .nav-actions { margin-left: auto; display: flex; align-items: center; gap: var(--gap-2); } .icon-btn { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--radius-sm); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: all 120ms ease; } .icon-btn:hover { border-color: var(--accent); color: var(--accent); } .lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .lang-switch button { background: transparent; border: none; color: var(--text-secondary); padding: 4px 10px; font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: var(--font-mono); transition: all 120ms ease; } .lang-switch button:hover { color: var(--text-main); } .lang-switch button[aria-pressed="true"] { background: var(--accent); color: var(--bg-base); } .nav-toggle { display: none; background: transparent; border: 1px solid var(--border); color: var(--text-main); width: 36px; height: 32px; border-radius: var(--radius-sm); cursor: pointer; font-size: 1.1rem; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: var(--gap-2); padding: 10px 18px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-main); font-family: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 150ms ease; } .btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } .btn-primary { background: var(--accent); color: var(--bg-base); border-color: var(--accent); } .btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--bg-base); } .btn-warm { background: var(--accent-warm); color: var(--bg-base); border-color: var(--accent-warm); } .btn-warm:hover { background: var(--accent-warm); border-color: var(--accent-warm); color: var(--bg-base); filter: brightness(1.08); } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-mantle); margin-top: var(--gap-10); } .site-footer .container { padding-top: var(--gap-6); padding-bottom: var(--gap-6); display: flex; flex-wrap: wrap; gap: var(--gap-5); justify-content: space-between; align-items: center; } .footer-meta { color: var(--text-faint); font-size: 0.85rem; } .footer-links { display: flex; gap: var(--gap-4); font-size: 0.9rem; } .footer-links a { color: var(--text-secondary); } .section { padding: var(--gap-8) 0; } .section-tight { padding: var(--gap-6) 0; } .placeholder { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: var(--gap-5); color: var(--text-muted); text-align: center; font-family: var(--font-mono); font-size: 0.9rem; } /* ---------- hero ---------- */ .hero { padding: var(--gap-10) 0 var(--gap-8); position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 20% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), radial-gradient(ellipse 50% 50% at 90% 30%, color-mix(in srgb, var(--accent-warm) 12%, transparent), transparent 60%); pointer-events: none; z-index: 0; } .hero > .container { position: relative; z-index: 1; } .eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 4px 10px; border-radius: 999px; margin-bottom: var(--gap-4); } .hero h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); letter-spacing: -0.02em; margin-bottom: var(--gap-3); /* Phosphor halo — purely visual, the dark theme reads it as a soft glow, latte mode dials it down via the lighter --accent-glow value. */ text-shadow: 0 0 24px var(--accent-glow); } .hero .lede { font-size: 1.15rem; color: var(--text-secondary); max-width: 640px; margin-bottom: var(--gap-5); } /* The title's emphasis line takes the brand cyan + halo. Peach is reserved for "automation fired" surfaces (filter toast badge, FILTER button). */ .hero .accent-text { color: var(--accent); font-style: normal; text-shadow: 0 0 28px var(--accent-glow); } .hero-cta { display: flex; flex-wrap: wrap; gap: var(--gap-3); margin-top: var(--gap-3); } .hero-meta { display: flex; gap: var(--gap-4); flex-wrap: wrap; margin-top: var(--gap-4); color: var(--text-faint); font-size: 0.85rem; font-family: var(--font-mono); } .hero-meta span { display: inline-flex; align-items: center; gap: 6px; } .hero-meta .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent-good); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-good) 60%, transparent); animation: pulse-dot 2.4s ease-out infinite; } @keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-good) 50%, transparent); } 70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent-good) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-good) 0%, transparent); } } @media (prefers-reduced-motion: reduce) { .hero-meta .dot { animation: none; } } /* Hero "fake terminal" preview */ .hero-preview { margin-top: var(--gap-6); background: var(--bg-mantle); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 18px 40px -20px var(--shadow); overflow: hidden; font-family: var(--font-mono); } .hero-preview .titlebar { display: flex; align-items: center; gap: var(--gap-2); padding: 8px 14px; background: var(--bg-crust); border-bottom: 1px solid var(--border); font-size: 0.78rem; color: var(--text-muted); } .hero-preview .titlebar .dots { display: inline-flex; gap: 6px; margin-right: var(--gap-2); } .hero-preview .titlebar .dots i { width: 11px; height: 11px; border-radius: 999px; background: var(--border-strong); display: inline-block; } .hero-preview .titlebar .dots i:nth-child(1) { background: var(--accent-bad); } .hero-preview .titlebar .dots i:nth-child(2) { background: var(--accent-warn); } .hero-preview .titlebar .dots i:nth-child(3) { background: var(--accent-good); } .hero-preview .body { padding: var(--gap-4) var(--gap-5); font-size: 0.92rem; line-height: 1.65; color: var(--text-main); background: var(--bg-base); } .hero-preview .prompt { color: var(--accent); } .hero-preview .cmd { color: var(--text-main); } .hero-preview .out { color: var(--text-muted); display: block; } .hero-preview .ok { color: var(--accent-good); } .hero-preview .warn { color: var(--accent-warm); } .hero-preview .toast { margin-top: var(--gap-3); border: 1px solid var(--accent-warm); background: color-mix(in srgb, var(--accent-warm) 10%, transparent); color: var(--text-main); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 0.85rem; display: flex; gap: 10px; align-items: flex-start; } .hero-preview .toast .badge { font-family: var(--font-display); font-size: 0.7rem; background: var(--accent-warm); color: var(--bg-base); padding: 1px 6px; border-radius: 4px; font-weight: 600; letter-spacing: 0.05em; flex-shrink: 0; } /* ----- live hero demo: staggered CSS entrance + caret + toast slide-in --- */ .hero-preview-live .body > .line, .hero-preview-live .body > .toast { opacity: 0; transform: translateY(4px); animation: hp-line-in 320ms cubic-bezier(.2,.7,.3,1) forwards; } /* Stagger each line by 180ms after a small initial pause. The toast lands right after the WARN line; the trailing caret prompt comes last. */ .hero-preview-live .body > .line:nth-of-type(1) { animation-delay: .15s; } .hero-preview-live .body > .line:nth-of-type(2) { animation-delay: .35s; } .hero-preview-live .body > .line:nth-of-type(3) { animation-delay: .50s; } .hero-preview-live .body > .line:nth-of-type(4) { animation-delay: .65s; } .hero-preview-live .body > .line:nth-of-type(5) { animation-delay: .80s; } .hero-preview-live .body > .line:nth-of-type(6) { animation-delay: 1.10s; } .hero-preview-live .body > .line:nth-of-type(7) { animation-delay: 1.35s; } .hero-preview-live .body > .line:nth-of-type(8) { animation-delay: 1.55s; } .hero-preview-live .body > .toast { animation: hp-toast-in 600ms cubic-bezier(.16,1,.3,1) forwards; animation-delay: 1.85s; transform: translate(12px, 0); /* Faint inset glow + subtle outer accent rim once landed */ box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-warm) 30%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--accent-warm) 60%, transparent); } .hero-preview-live .body > .line.trailing { animation-delay: 2.40s; } @keyframes hp-line-in { to { opacity: 1; transform: translateY(0); } } @keyframes hp-toast-in { 0% { opacity: 0; transform: translate(12px, 0) scale(0.985); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } .hero-preview-live .caret { display: inline-block; width: 7px; height: 1em; background: var(--accent); vertical-align: text-bottom; margin-left: 6px; /* Begin blinking only after the prompt has landed (matches trailing delay). */ animation: hp-caret 1.05s steps(2) infinite; animation-delay: 2.95s; box-shadow: 0 0 8px var(--accent-glow); } @keyframes hp-caret { 50% { background: transparent; box-shadow: none; } } @media (prefers-reduced-motion: reduce) { .hero-preview-live .body > .line, .hero-preview-live .body > .toast { animation: none; opacity: 1; transform: none; } .hero-preview-live .caret { animation: none; } } /* ---------- scroll-in entrance (added by script.js initScrollIn) ---------- */ .scroll-in { opacity: 0; transform: translateY(14px); /* Stagger via --idx (set by script.js) — gives the grid a quick wave. */ transition: opacity 480ms ease calc(40ms * var(--idx, 0)), transform 480ms cubic-bezier(.2,.7,.3,1) calc(40ms * var(--idx, 0)); } .scroll-in.in-view { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .scroll-in, .scroll-in.in-view { opacity: 1; transform: none; transition: none; } } /* ---------- features grid ---------- */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap-4); } .feature { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--gap-4) var(--gap-4) var(--gap-5); transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; } .feature:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 12px 32px -16px var(--accent-glow); } .feature .icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-family: var(--font-mono); font-weight: 700; font-size: 1rem; margin-bottom: var(--gap-3); } .feature h3 { font-size: 1.05rem; margin-bottom: 6px; } .feature p { margin: 0; color: var(--text-secondary); font-size: 0.93rem; line-height: 1.55; } .feature.warm .icon { background: color-mix(in srgb, var(--accent-warm) 14%, transparent); color: var(--accent-warm); } /* ---------- shells row ---------- */ .shells { display: flex; gap: var(--gap-3); flex-wrap: wrap; margin-top: var(--gap-4); } .shell-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-family: var(--font-display); font-size: 0.82rem; color: var(--text-main); font-feature-settings: "tnum"; transition: border-color 150ms ease, color 150ms ease; } .shell-chip:hover { border-color: var(--accent); color: var(--accent); } /* ---------- download / system req ---------- */ .download-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap-5); align-items: start; } .download-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--gap-5); } .download-card .meta { display: flex; flex-wrap: wrap; gap: var(--gap-3); margin-top: var(--gap-3); color: var(--text-muted); font-size: 0.85rem; font-family: var(--font-mono); } .requirements { background: var(--bg-mantle); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--gap-4) var(--gap-5); } .requirements ul { margin: 0; padding-left: 1.2em; color: var(--text-secondary); } .requirements li { margin: 4px 0; } .verify-note { margin-top: var(--gap-4); font-size: 0.85rem; color: var(--text-muted); } .verify-note code { display: block; margin-top: var(--gap-2); padding: var(--gap-2) var(--gap-3); font-size: 0.82rem; white-space: pre-wrap; } /* ---------- FAQ ---------- */ .faq details { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--gap-3) var(--gap-4); margin-bottom: var(--gap-2); } .faq summary { cursor: pointer; font-weight: 600; font-size: 1rem; color: var(--text-main); list-style: none; display: flex; justify-content: space-between; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--text-muted); margin-left: var(--gap-3); transition: transform 150ms ease; } .faq details[open] summary::after { transform: rotate(45deg); color: var(--accent); } .faq details[open] summary { color: var(--accent); } .faq details p { margin: var(--gap-3) 0 0; color: var(--text-secondary); } /* ---------- docs hub ---------- */ .doc-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap-4); margin-top: var(--gap-5); } .doc-card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--gap-4) var(--gap-4) var(--gap-5); color: var(--text-main); transition: border-color 150ms ease, transform 150ms ease; } .doc-card:hover { border-color: var(--accent); text-decoration: none; color: var(--text-main); transform: translateY(-2px); } .doc-card .label { display: inline-block; font-size: 0.7rem; font-family: var(--font-mono); color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; } .doc-card h3 { font-size: 1.05rem; margin-bottom: 6px; color: var(--text-main); } .doc-card p { margin: 0; color: var(--text-secondary); font-size: 0.92rem; } .doc-card.coming-soon { border-style: dashed; opacity: 0.7; cursor: default; } .doc-card.coming-soon:hover { border-color: var(--border-strong); transform: none; } /* ---------- docs page (rendered MD) ---------- */ .docs-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--gap-6); align-items: start; } .docs-toc { position: sticky; top: 72px; font-size: 0.9rem; max-height: calc(100vh - 96px); overflow-y: auto; padding-right: var(--gap-3); border-right: 1px solid var(--border); } .docs-toc h4 { /* paint() in docs-render.js replaces this with the doc's H1 text. The uppercase tracking gives it a section-label feel even when long. */ font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0; text-transform: none; color: var(--text-main); margin: 0 0 var(--gap-3); padding-bottom: var(--gap-2); border-bottom: 1px solid var(--border); line-height: 1.35; } .docs-toc ol { list-style: none; padding: 0; margin: 0; } .docs-toc ol li { margin: 0; } .docs-toc ol li.toc-h3 { padding-left: var(--gap-3); font-size: 0.85rem; } .docs-toc a { display: block; padding: 4px 6px; color: var(--text-secondary); border-radius: var(--radius-sm); text-decoration: none; border-left: 2px solid transparent; transition: color 120ms ease, border-color 120ms ease; } .docs-toc a:hover { color: var(--text-main); } .docs-toc a.active { color: var(--accent); border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: 0 0 16px -4px var(--accent-glow); } .docs-content { min-width: 0; font-size: 1rem; line-height: 1.7; } .docs-content h1 { font-size: 2rem; margin-top: 0; margin-bottom: var(--gap-4); } .docs-content h2 { font-size: 1.4rem; margin-top: var(--gap-6); margin-bottom: var(--gap-3); padding-top: var(--gap-3); border-top: 1px solid var(--border); } .docs-content h3 { font-size: 1.1rem; margin-top: var(--gap-5); margin-bottom: var(--gap-2); } .docs-content h4 { font-size: 0.95rem; margin-top: var(--gap-4); margin-bottom: var(--gap-2); color: var(--accent-warm); } .docs-content blockquote { border-left: 3px solid var(--accent); margin: var(--gap-3) 0; padding: 4px var(--gap-4); color: var(--text-secondary); background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .docs-content ul, .docs-content ol { padding-left: 1.4em; } .docs-content li { margin: 4px 0; } .docs-content table { font-size: 0.92rem; } .docs-loading { padding: var(--gap-5); text-align: center; color: var(--text-muted); font-family: var(--font-mono); } /* ---------- responsive (extends earlier block) ---------- */ @media (max-width: 960px) { .download-grid { grid-template-columns: 1fr; } .docs-layout { grid-template-columns: 1fr; } .docs-toc { position: static; border-right: none; border-bottom: 1px solid var(--border); max-height: none; padding-right: 0; padding-bottom: var(--gap-3); margin-bottom: var(--gap-3); } } /* ---------- responsive ---------- */ @media (max-width: 720px) { .nav-links { position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; background: var(--bg-mantle); border-bottom: 1px solid var(--border); padding: var(--gap-3) var(--gap-5); gap: var(--gap-2); margin-left: 0; display: none; } .nav-links[data-open="true"] { display: flex; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; } h1 { font-size: 1.75rem; } h2 { font-size: 1.25rem; } .container { padding: 0 var(--gap-4); } } /* ========================================================================== LogInspector re-skin (overrides the Catppuccin accents above). Brand: gold (#ffc24b) "L"/"Ins" on a dark base; the app icon is a brown square with a black border and a gold L — mirrored in .nav-brand .logo. ========================================================================== */ :root { --accent: #ffc24b; /* gold — LogInspector signature */ --accent-strong: #ffd56b; /* brighter gold for hover */ --accent-glow: rgba(255, 194, 75, 0.36); --accent-warm: #ffc24b; --brand-brown: #4a3424; --brand-gold: #ffc24b; } :root[data-theme="latte"] { --accent: #b9791a; /* darker amber so it reads on light bg */ --accent-strong: #9a6411; --accent-glow: rgba(185, 121, 26, 0.18); --accent-warm: #b9791a; } /* Brand mark = the app icon: brown square, black border, gold L */ .nav-brand .logo { background: var(--brand-brown); border: 2px solid #000; color: var(--brand-gold); font-weight: 800; box-shadow: none; } .nav-brand:hover .logo { box-shadow: 0 0 14px var(--accent-glow); } /* "LIns" gold highlight inside brand/word text */ .hl { color: var(--brand-gold); } /* primary button: gold fill, dark ink */ .btn-primary { background: var(--accent); border-color: transparent; color: #2a1c0e; } .btn-primary:hover { background: var(--accent-strong); color: #2a1c0e; } /* large hero brand mark */ .brandmark { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 16px; background: var(--brand-brown); border: 4px solid #000; color: var(--brand-gold); font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: 1; margin-bottom: var(--gap-4); }