/* MatPilot Help Center — dark theme styles Loaded after /styles.css which provides base tokens. */ /* ── Dark theme overrides ──────────────────────────────────────────────── */ :root { --h-bg: #0d0d0d; --h-surface: #1a1a1a; --h-surface-2: #222222; --h-border: rgba(255,255,255,0.1); --h-ink: #ffffff; --h-ink-dim: rgba(255,255,255,0.7); --h-ink-muted: rgba(255,255,255,0.4); --h-accent: #ff2d78; --h-ink-strong: #ffffff; --h-ink-body: rgba(255,255,255,0.85); --h-hover: rgba(255,255,255,0.06); --h-nav-bg: rgba(13,13,13,0.92); --h-radius: 10px; --h-radius-lg: 14px; } /* ── Light mode ───────────────────────────────────────────────────────────── Tokens only: system preference by default, manual override via data-theme on (set by the nav toggle, persisted in localStorage). */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --h-bg: #fafafa; --h-surface: #ffffff; --h-surface-2: #f1f1f3; --h-border: rgba(0,0,0,0.1); --h-ink: #101011; --h-ink-dim: rgba(0,0,0,0.66); --h-ink-muted: rgba(0,0,0,0.42); --h-ink-strong: #101011; --h-ink-body: rgba(0,0,0,0.78); --h-hover: rgba(0,0,0,0.045); } } :root[data-theme="light"] { --h-bg: #fafafa; --h-surface: #ffffff; --h-surface-2: #f1f1f3; --h-border: rgba(0,0,0,0.1); --h-ink: #101011; --h-ink-dim: rgba(0,0,0,0.66); --h-ink-muted: rgba(0,0,0,0.42); --h-ink-strong: #101011; --h-ink-body: rgba(0,0,0,0.78); --h-hover: rgba(0,0,0,0.045); } /* The nav stays dark in both themes — re-pin the dark token values on the header itself so everything inside it (logo, search, toggle, dropdown) keeps rendering light-on-dark when the page goes light. */ .h-nav { --h-nav-bg: rgba(13,13,13,0.92); --h-surface: #1a1a1a; --h-surface-2: #222222; --h-border: rgba(255,255,255,0.1); --h-ink: #ffffff; --h-ink-dim: rgba(255,255,255,0.7); --h-ink-muted: rgba(255,255,255,0.4); --h-ink-strong: #ffffff; --h-hover: rgba(255,255,255,0.06); } .h-theme-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--h-border); background: none; color: var(--h-ink-dim); cursor: pointer; flex-shrink: 0; } .h-theme-toggle:hover { background: var(--h-hover); } .h-theme-toggle svg { width: 16px; height: 16px; } :root[data-theme="light"] .h-theme-toggle .icon-sun { display: none; } :root:not([data-theme="light"]) .h-theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) .h-theme-toggle .icon-sun { display: none; } :root:not([data-theme="dark"]):not([data-theme="light"]) .h-theme-toggle .icon-moon { display: inline; } } *, *::before, *::after { box-sizing: border-box; } body.help-page { background: var(--h-bg); color: var(--h-ink); font-family: "Inter", -apple-system, "system-ui", sans-serif; margin: 0; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } /* ── Nav ───────────────────────────────────────────────────────────────── */ .h-nav { position: sticky; top: 0; z-index: 100; background: var(--h-nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--h-border); height: 60px; display: flex; align-items: center; padding: 0 24px; gap: 16px; } .h-nav-logo { display: flex; align-items: center; height: 20px; color: var(--h-ink-strong); flex-shrink: 0; } .h-nav-logo svg { height: 100%; width: auto; } .h-nav-faq-link { font-size: 13px; font-weight: 500; color: var(--h-ink-dim); flex-shrink: 0; transition: color 0.15s; } .h-nav-faq-link:hover { color: var(--h-ink); } .h-nav-search { flex: 1; max-width: 380px; position: relative; } .h-nav-search input { width: 100%; background: var(--h-surface); border: 1px solid var(--h-border); border-radius: var(--h-radius); color: var(--h-ink); font-size: 14px; font-family: inherit; padding: 8px 40px 8px 36px; outline: none; cursor: pointer; transition: border-color 0.15s; } .h-nav-search input::placeholder { color: var(--h-ink-muted); } .h-nav-search input:focus { border-color: var(--h-accent); } .h-nav-search .search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--h-ink-muted); pointer-events: none; } .h-nav-search .search-kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--h-ink-muted); background: var(--h-surface-2); border-radius: 4px; padding: 1px 5px; } .h-nav-spacer { flex: 1; } .h-nav-user { position: relative; cursor: pointer; } .h-nav-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--h-accent); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--h-ink-strong); border: 2px solid transparent; transition: border-color 0.15s; } .h-nav-avatar:hover { border-color: var(--h-accent); } .h-nav-dropdown { display: none; position: absolute; right: 0; top: 40px; background: var(--h-surface-2); border: 1px solid var(--h-border); border-radius: var(--h-radius); min-width: 160px; overflow: hidden; z-index: 200; box-shadow: 0 8px 32px rgba(0,0,0,0.4); } .h-nav-dropdown.open { display: block; } .h-nav-dropdown a, .h-nav-dropdown button { display: block; width: 100%; padding: 10px 14px; font-size: 13px; color: var(--h-ink); background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; transition: background 0.1s; } .h-nav-dropdown a:hover, .h-nav-dropdown button:hover { background: var(--h-surface); } .h-btn-signin { font-size: 13px; color: var(--h-ink-dim); background: none; border: 1px solid var(--h-border); border-radius: var(--h-radius); padding: 6px 14px; cursor: pointer; font-family: inherit; white-space: nowrap; transition: border-color 0.15s, color 0.15s; } .h-btn-signin:hover { border-color: var(--h-ink-dim); color: var(--h-ink); } .h-btn-cta { background: var(--h-accent); color: #fff; border: none; border-radius: var(--h-radius); padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; transition: opacity 0.15s; text-decoration: none; display: inline-flex; align-items: center; } .h-btn-cta:hover { opacity: 0.88; } /* ── Main layout ───────────────────────────────────────────────────────── */ .h-main { min-height: calc(100vh - 60px); } /* ── Views ─────────────────────────────────────────────────────────────── */ .h-view { display: none; } .h-view.active { display: block; } /* ── Landing: hero ──────────────────────────────────────────────────────── */ .h-hero { position: relative; padding: 80px 24px 64px; text-align: center; overflow: hidden; } .h-lockup { display: flex; justify-content: center; margin: 0 0 28px; overflow: visible; } .h-lockup .mp-row { display: flex; align-items: center; justify-content: center; gap: 14px; overflow: visible; } .h-lockup .mp-mark { height: clamp(26px, 3.4vw, 34px); width: auto; flex-shrink: 0; overflow: visible; } .h-lockup .mp-draw { fill: var(--h-ink-strong); fill-opacity: 0; stroke: var(--h-ink-strong); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .h-lockup .mp-word-wrap { width: 0; overflow: hidden; flex-shrink: 0; } .h-lockup .mp-word { display: block; overflow: visible; } .h-lockup .mp-word-path { fill: var(--h-ink-strong); } .h-lockup .mp-cursor { fill: var(--h-ink-strong); opacity: 0; } .h-lockup .mp-cursor--on { opacity: 1; animation: h-cursor-blink 0.9s steps(1) infinite; } .h-lockup .mp-cursor--off { opacity: 0; transition: opacity 200ms ease; } @keyframes h-cursor-blink { 50% { opacity: 0; } } .h-hero h1 { font-size: clamp(36px, 6vw, 60px); font-weight: 800; letter-spacing: -1.5px; margin: 0 0 32px; position: relative; } .h-search-wrap { max-width: 600px; margin: 0 auto 48px; position: relative; } .h-search-wrap input { width: 100%; background: var(--h-hover); border: 1.5px solid var(--h-border); border-radius: 12px; color: var(--h-ink); font-size: 16px; font-family: inherit; padding: 16px 56px 16px 48px; outline: none; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .h-search-wrap input::placeholder { color: var(--h-ink-muted); } .h-search-wrap input:focus { border-color: var(--h-accent); background: rgba(255,45,120,0.06); } .h-search-wrap .si { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--h-ink-muted); } .h-search-wrap .sk { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--h-ink-muted); background: var(--h-surface); border-radius: 4px; padding: 2px 6px; } /* Popular chips */ .h-popular { margin: 0 0 64px; } .h-popular h3 { font-size: 14px; color: var(--h-ink-muted); font-weight: 500; margin: 0 0 16px; } .h-popular-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .h-popular-chip { background: var(--h-hover); border: 1px solid var(--h-border); border-radius: 8px; padding: 10px 18px; font-size: 14px; font-weight: 500; cursor: pointer; color: var(--h-ink); transition: border-color 0.15s, background 0.15s; } .h-popular-chip:hover { border-color: var(--h-accent); background: rgba(255,45,120,0.08); } /* FAQ banner (landing page) */ .h-faq-banner-wrap { max-width: 600px; margin: -28px auto 56px; padding: 0 24px; } .h-faq-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--h-surface); border: 1px solid var(--h-border); border-radius: var(--h-radius-lg); padding: 16px 20px; transition: border-color 0.15s, background 0.15s; } .h-faq-banner:hover { border-color: var(--h-accent); background: rgba(255,45,120,0.04); } .h-faq-banner-text { display: flex; flex-direction: column; gap: 2px; } .h-faq-banner-text strong { font-size: 14.5px; font-weight: 700; } .h-faq-banner-text span { font-size: 12.5px; color: var(--h-ink-muted); } .h-faq-banner-arrow { color: var(--h-accent); font-size: 18px; flex-shrink: 0; } /* ── Group piles grid ──────────────────────────────────────────────────── */ .h-groups-section { padding: 0 24px 80px; max-width: 1060px; margin: 0 auto; } .h-groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; } .h-pile-wrap { position: relative; padding-bottom: 12px; cursor: pointer; } /* stack cards behind */ .h-pile-wrap::before, .h-pile-wrap::after { content: ""; position: absolute; inset: 0; bottom: 0; background: var(--h-surface); border: 1px solid var(--h-border); border-radius: var(--h-radius-lg); transition: transform 0.2s; } .h-pile-wrap::before { transform: rotate(-1.5deg) translateY(6px); z-index: 0; } .h-pile-wrap::after { transform: rotate( 1.2deg) translateY(10px); z-index: 0; background: var(--h-surface-2); } .h-pile-wrap:hover::before { transform: rotate(-2.5deg) translateY(8px); } .h-pile-wrap:hover::after { transform: rotate( 2deg) translateY(13px); } .h-pile-card { position: relative; z-index: 1; background: var(--h-surface); border: 1px solid var(--h-border); border-radius: var(--h-radius-lg); padding: 24px; transition: border-color 0.2s, box-shadow 0.2s; } .h-pile-wrap:hover .h-pile-card { border-color: var(--h-accent); box-shadow: 0 0 0 1px var(--h-accent); } .h-pile-icon { width: 44px; height: 44px; background: var(--h-surface-2); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--h-ink); margin-bottom: 14px; } .h-pile-icon svg { width: 22px; height: 22px; } .h-pile-count { float: right; font-size: 12px; color: var(--h-ink-muted); margin-top: 2px; } .h-pile-card h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.3px; } .h-pile-card p { font-size: 13.5px; color: var(--h-ink-dim); margin: 0; line-height: 1.55; } /* ── Group view ────────────────────────────────────────────────────────── */ .h-group-view { padding: 40px 24px 80px; max-width: 1060px; margin: 0 auto; } .h-breadcrumb { font-size: 13px; color: var(--h-ink-muted); margin-bottom: 24px; } .h-breadcrumb span { cursor: pointer; transition: color 0.15s; } .h-breadcrumb span:hover { color: var(--h-accent); } .h-breadcrumb .sep { margin: 0 8px; opacity: 0.4; } .h-group-header { margin-bottom: 40px; } .h-group-header h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -1px; margin: 0 0 10px; } .h-group-header p { font-size: 16px; color: var(--h-ink-dim); margin: 0; } .h-articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .h-article-card { background: var(--h-surface); border: 1px solid var(--h-border); border-radius: var(--h-radius); padding: 20px; cursor: pointer; transition: border-color 0.15s, background 0.15s; position: relative; } .h-article-card:hover { border-color: var(--h-accent); background: rgba(255,45,120,0.04); } .h-article-card.featured { border-color: var(--h-accent); } .h-article-card h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.2px; padding-right: 20px; } .h-article-card p { font-size: 13px; color: var(--h-ink-dim); margin: 0; line-height: 1.5; } .h-article-card .arrow { position: absolute; right: 18px; top: 22px; color: var(--h-accent); opacity: 0; transition: opacity 0.15s, transform 0.15s; font-size: 16px; } .h-article-card:hover .arrow { opacity: 1; transform: translateX(3px); } /* ── Article view ──────────────────────────────────────────────────────── */ .h-article-outer { display: flex; gap: 48px; max-width: 1060px; margin: 0 auto; padding: 40px 24px 80px; align-items: flex-start; } .h-article-body { flex: 1; min-width: 0; } .h-article-sidebar { width: 220px; flex-shrink: 0; position: sticky; top: 80px; } .h-article-body h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -1px; margin: 0 0 16px; } .h-article-meta { display: flex; align-items: center; gap: 10px; background: var(--h-surface); border-radius: 8px; padding: 10px 14px; margin-bottom: 32px; font-size: 13px; color: var(--h-ink-muted); } .h-article-meta .dot { width: 6px; height: 6px; background: var(--h-accent); border-radius: 50%; } /* Markdown rendered content */ .h-prose { font-size: 15.5px; line-height: 1.75; color: var(--h-ink-body); } .h-prose h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; margin: 40px 0 16px; color: var(--h-ink-strong); } .h-prose h3 { font-size: 17px; font-weight: 600; margin: 28px 0 12px; color: var(--h-ink-strong); } .h-prose p { margin: 0 0 18px; } .h-prose a { color: var(--h-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .h-prose a:hover { opacity: 0.8; } .h-prose code { font-family: "SF Mono", "Fira Code", monospace; font-size: 13px; color: var(--h-accent); background: rgba(255,45,120,0.12); border-radius: 4px; padding: 1px 5px; } .h-prose pre { background: #111; border: 1px solid var(--h-border); border-radius: 8px; padding: 16px; overflow-x: auto; margin: 0 0 18px; } .h-prose pre code { background: none; color: var(--h-ink-body); padding: 0; font-size: 13px; } .h-prose blockquote { border-left: 3px solid var(--h-accent); background: rgba(255,45,120,0.08); border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 0 0 18px; color: var(--h-ink-dim); } .h-prose ul, .h-prose ol { padding-left: 22px; margin: 0 0 18px; } .h-prose li { margin-bottom: 6px; } .h-prose img { max-width: 100%; border-radius: 8px; margin: 8px 0; } .h-prose hr { border: none; border-top: 1px solid var(--h-border); margin: 32px 0; } /* Positioned images — inserted by the admin editor as raw
blocks */ .h-img { margin: 0 0 18px; } .h-img img { display: block; width: 100%; max-width: 100%; border-radius: 8px; } /* Tall app screenshots (portrait phone/tablet captures) would fill the column at 640px wide × ~1400px tall — cap the rendered height so the article stays readable, and let width follow the aspect ratio. */ .h-img img { max-height: 560px; width: auto; margin-left: auto; margin-right: auto; } .h-img figcaption { font-size: 12.5px; color: var(--h-ink-muted); margin-top: 6px; text-align: center; } .h-img--center { max-width: 640px; margin-left: auto; margin-right: auto; } .h-img--full { width: 100%; } .h-img--left, .h-img--right { width: min(360px, 46%); } .h-img--left { float: left; margin: 4px 24px 18px 0; } .h-img--right { float: right; margin: 4px 0 18px 24px; } .h-prose::after { content: ""; display: block; clear: both; } /* Device frame — every article screenshot renders inside an iPhone-style shell (added by frameScreenshots() in index.html). Portrait captures get the full phone: dark bezel, screen-radius corners and a dynamic-island pill; wide (landscape/tablet/desktop) captures keep the same bezel minus the island. */ .h-frame { position: relative; display: block; width: fit-content; margin: 0 auto; padding: 10px; background: #0b0b0f; border-radius: 38px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.12), 0 14px 34px rgba(0,0,0,0.30); } .h-frame img, .h-img .h-frame img, .h-prose .h-frame img { border-radius: 28px; margin: 0; display: block; } .h-frame--phone::before { content: ""; position: absolute; z-index: 2; top: 19px; left: 50%; transform: translateX(-50%); width: 26%; max-width: 96px; height: 20px; background: #000; border-radius: 20px; } .h-frame--wide { border-radius: 24px; } .h-frame--wide img { border-radius: 14px; } .h-img .h-frame { margin-bottom: 2px; } /* Intro note — the article's scene-setting hook, boxed so it reads as an aside */ .h-note { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 22px; padding: 14px 16px; background: var(--h-surface); border: 1px solid var(--h-border); border-left: 3px solid var(--h-accent); border-radius: var(--h-radius); color: var(--h-ink-dim); font-size: 14.5px; line-height: 1.6; } .h-note::before { content: "◆"; color: var(--h-accent); font-size: 11px; line-height: 1.9; } /* Placeholder box — [placeholder: caption] shortcode, pre-processed before markdown parsing */ .h-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 160px; margin: 0 0 18px; border: 1.5px dashed var(--h-border); border-radius: 10px; color: var(--h-ink-muted); background: var(--h-hover); } .h-placeholder svg { width: 30px; height: 30px; opacity: 0.5; } .h-placeholder span { font-size: 12.5px; } @media (max-width: 640px) { .h-img--left, .h-img--right { float: none; width: 100%; margin: 0 0 18px; } } /* TOC sidebar */ .h-toc h4 { font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--h-ink-muted); margin: 0 0 12px; } .h-toc ul { list-style: none; padding: 0; margin: 0; } .h-toc li { margin-bottom: 2px; } .h-toc a { font-size: 13px; color: var(--h-ink-muted); display: block; padding: 4px 8px; border-left: 2px solid transparent; transition: color 0.1s, border-color 0.1s; text-decoration: none; } .h-toc a:hover { color: var(--h-ink); } .h-toc a.active { color: var(--h-accent); border-left-color: var(--h-accent); } .h-toc li.h3-item a { padding-left: 18px; font-size: 12px; } /* ── Reactions ─────────────────────────────────────────────────────────── */ .h-reactions { margin-top: 48px; padding: 20px 24px; background: var(--h-surface); border: 1px solid var(--h-border); border-radius: var(--h-radius); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .h-reactions p { margin: 0; font-size: 14px; font-weight: 500; flex: 1; } .h-reaction-btns { display: flex; gap: 8px; } .h-reaction-btn { background: var(--h-surface-2); border: 1px solid var(--h-border); border-radius: 8px; padding: 8px 14px; font-size: 20px; cursor: pointer; transition: border-color 0.15s, transform 0.1s, background 0.15s; position: relative; } .h-reaction-btn:hover { border-color: var(--h-accent); transform: scale(1.08); } .h-reaction-btn.selected { border-color: var(--h-accent); background: rgba(255,45,120,0.08); } .h-reaction-btn:disabled { opacity: 0.5; cursor: default; transform: none; } .h-reaction-thanks { font-size: 14px; color: var(--h-ink-dim); animation: fadeIn 0.3s ease; } /* Confetti animation */ .h-confetti { position: relative; display: inline-block; } .h-confetti-piece { position: absolute; width: 6px; height: 6px; border-radius: 50%; animation: confettiBurst 0.7s ease-out forwards; pointer-events: none; } @keyframes confettiBurst { 0% { transform: translate(0,0) scale(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.5); opacity: 0; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* Related docs */ .h-related { margin-top: 40px; } .h-related h3 { font-size: 15px; font-weight: 600; margin: 0 0 14px; } .h-related-grid { display: flex; flex-wrap: wrap; gap: 10px; } .h-related-chip { border: 1px solid var(--h-accent); border-radius: 8px; padding: 10px 16px; font-size: 13px; cursor: pointer; color: var(--h-ink); transition: background 0.15s; } .h-related-chip:hover { background: rgba(255,45,120,0.08); } /* ── Contact form ──────────────────────────────────────────────────────── */ .h-contact-view { max-width: 640px; margin: 0 auto; padding: 48px 24px 80px; } .h-contact-view h1 { font-size: 32px; font-weight: 800; letter-spacing: -1px; margin: 0 0 8px; } .h-contact-view .sub { font-size: 15px; color: var(--h-ink-dim); margin: 0 0 36px; } .h-form-field { margin-bottom: 18px; } .h-form-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--h-ink-dim); } .h-form-field input, .h-form-field textarea, .h-form-field select { width: 100%; background: var(--h-surface); border: 1px solid var(--h-border); border-radius: var(--h-radius); color: var(--h-ink); font-size: 14px; font-family: inherit; padding: 12px 14px; outline: none; transition: border-color 0.15s; } .h-form-field input:focus, .h-form-field textarea:focus { border-color: var(--h-accent); } .h-form-field input::placeholder, .h-form-field textarea::placeholder { color: var(--h-ink-muted); } .h-form-field textarea { resize: vertical; min-height: 120px; } .h-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .h-ai-suggestions { background: var(--h-surface); border: 1px solid var(--h-border); border-radius: var(--h-radius); padding: 16px; margin-bottom: 18px; display: none; } .h-ai-suggestions.visible { display: block; } .h-ai-suggestions h4 { font-size: 12px; font-weight: 600; color: var(--h-ink-muted); text-transform: uppercase; letter-spacing: 0.6px; margin: 0 0 12px; } .h-ai-suggestion { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--h-border); cursor: pointer; transition: color 0.15s; font-size: 13.5px; } .h-ai-suggestion:first-of-type { border-top: none; padding-top: 0; } .h-ai-suggestion:hover { color: var(--h-accent); } .h-ai-suggestion .ai-arrow { color: var(--h-accent); font-size: 11px; } .h-btn-submit { width: 100%; background: var(--h-accent); color: #fff; border: none; border-radius: var(--h-radius); padding: 14px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; transition: opacity 0.15s; } .h-btn-submit:hover { opacity: 0.88; } .h-btn-submit:disabled { opacity: 0.5; cursor: default; } .h-form-success { text-align: center; padding: 48px 24px; display: none; } .h-form-success.visible { display: block; } .h-form-success .icon { font-size: 40px; margin-bottom: 16px; } .h-form-success h2 { font-size: 24px; font-weight: 700; margin: 0 0 8px; } .h-form-success p { color: var(--h-ink-dim); margin: 0; } /* ── Login modal ───────────────────────────────────────────────────────── */ .h-modal-backdrop { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); align-items: center; justify-content: center; } .h-modal-backdrop.open { display: flex; } .h-modal { background: var(--h-surface); border: 1px solid var(--h-border); border-radius: var(--h-radius-lg); padding: 32px; width: 100%; max-width: 380px; margin: 16px; box-shadow: 0 24px 80px rgba(0,0,0,0.5); } .h-modal-logo { height: 18px; color: var(--h-ink-strong); margin-bottom: 24px; } .h-modal-logo svg { height: 100%; width: auto; } .h-modal h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; } .h-modal .sub { font-size: 13px; color: var(--h-ink-muted); margin: 0 0 24px; } .h-modal-close { position: absolute; right: 0; top: 0; /* relative to .h-modal */ background: none; border: none; color: var(--h-ink-muted); cursor: pointer; font-size: 18px; padding: 8px 12px; } .h-modal { position: relative; } .h-modal-field { margin-bottom: 14px; } .h-modal-field label { display: block; font-size: 12px; font-weight: 600; color: var(--h-ink-dim); margin-bottom: 6px; } .h-modal-field input { width: 100%; background: var(--h-surface-2); border: 1px solid var(--h-border); border-radius: 8px; color: var(--h-ink); font-size: 14px; font-family: inherit; padding: 11px 13px; outline: none; transition: border-color 0.15s; } .h-modal-field input:focus { border-color: var(--h-accent); } .h-modal-error { font-size: 13px; color: var(--h-accent); min-height: 18px; margin: 0 0 12px; } .h-modal-btn { width: 100%; background: var(--h-ink); color: var(--h-bg); border: none; border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: opacity 0.15s; display: flex; align-items: center; justify-content: center; gap: 8px; } .h-modal-btn:hover { opacity: 0.85; } .h-modal-btn:disabled { opacity: 0.5; cursor: default; } /* OAuth branded buttons */ .h-oauth-btn { width: 100%; border: none; border-radius: 8px; padding: 11px 14px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 10px; transition: opacity 0.15s; margin-bottom: 10px; } .h-oauth-btn:hover { opacity: 0.88; } .h-oauth-apple { background: #000; color: #fff; border: 1px solid rgba(255,255,255,0.15); } .h-oauth-google { background: #fff; color: #3c4043; } .h-or-divider { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; color: var(--h-ink-muted); font-size: 12px; } .h-or-divider::before, .h-or-divider::after { content: ''; flex: 1; height: 1px; background: var(--h-border); } /* ── Sad reaction modal ────────────────────────────────────────────────── */ .h-neg-modal { background: var(--h-surface-2); border: 1px solid var(--h-border); border-radius: var(--h-radius-lg); padding: 28px; max-width: 400px; margin: 16px; box-shadow: 0 24px 80px rgba(0,0,0,0.5); } .h-neg-modal h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; } .h-neg-modal p { font-size: 14px; color: var(--h-ink-dim); margin: 0 0 16px; } .h-neg-modal textarea { width: 100%; background: var(--h-surface); border: 1px solid var(--h-border); border-radius: 8px; color: var(--h-ink); font-size: 14px; font-family: inherit; padding: 11px 13px; outline: none; resize: vertical; min-height: 90px; margin-bottom: 14px; } .h-neg-modal .btns { display: flex; gap: 10px; } .h-neg-modal .btns button { flex: 1; padding: 10px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; border: 1px solid var(--h-border); transition: background 0.15s; } .h-neg-modal .btns .primary { background: var(--h-accent); color: #fff; border-color: var(--h-accent); } .h-neg-modal .btns .secondary { background: none; color: var(--h-ink-dim); } /* ── Cookie banner ─────────────────────────────────────────────────────── */ .h-cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 300; background: rgba(26,26,26,0.97); border-top: 1px solid var(--h-border); padding: 16px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; backdrop-filter: blur(8px); } .h-cookie-banner p { margin: 0; font-size: 14px; color: var(--h-ink-dim); flex: 1; min-width: 240px; } .h-cookie-banner a { color: var(--h-accent); text-decoration: underline; } .h-cookie-banner .btns { display: flex; gap: 10px; } .h-cookie-banner .btn-manage { background: none; border: 1px solid var(--h-border); color: var(--h-ink-dim); border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: border-color 0.15s; } .h-cookie-banner .btn-manage:hover { border-color: var(--h-ink-dim); } .h-cookie-banner .btn-accept { background: var(--h-accent); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; } .h-cookie-modal { background: var(--h-surface-2); border: 1px solid var(--h-border); border-radius: var(--h-radius-lg); padding: 28px; max-width: 440px; margin: 16px; box-shadow: 0 24px 80px rgba(0,0,0,0.5); } .h-cookie-modal h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; } .h-cookie-modal .sub { font-size: 13px; color: var(--h-ink-dim); margin: 0 0 20px; } .h-toggle-row { display: flex; align-items: flex-start; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--h-border); gap: 16px; } .h-toggle-row:first-of-type { border-top: none; } .h-toggle-info strong { font-size: 14px; font-weight: 600; display: block; margin-bottom: 3px; } .h-toggle-info span { font-size: 12px; color: var(--h-ink-muted); } .h-toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; } .h-toggle input { opacity: 0; width: 0; height: 0; position: absolute; } .h-toggle-slider { position: absolute; inset: 0; background: var(--h-border); border-radius: 11px; cursor: pointer; transition: background 0.2s; } .h-toggle-slider::after { content: ""; position: absolute; width: 16px; height: 16px; background: #fff; border-radius: 50%; left: 3px; top: 3px; transition: transform 0.2s; } .h-toggle input:checked + .h-toggle-slider { background: var(--h-accent); } .h-toggle input:checked + .h-toggle-slider::after { transform: translateX(18px); } .h-toggle input:disabled + .h-toggle-slider { opacity: 0.5; cursor: default; } .h-cookie-save { width: 100%; margin-top: 20px; background: var(--h-accent); color: #fff; border: none; border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; } /* ── Misc ───────────────────────────────────────────────────────────────── */ .h-loading { display: flex; align-items: center; justify-content: center; min-height: 200px; color: var(--h-ink-muted); font-size: 14px; } .h-empty { text-align: center; padding: 64px 24px; color: var(--h-ink-muted); font-size: 14px; } .h-search-results { max-width: 1060px; margin: 0 auto; padding: 32px 24px; } .h-search-results h2 { font-size: 20px; font-weight: 700; margin: 0 0 24px; } .h-search-results mark, .h-cmdk mark { background: rgba(255,45,120,0.28); color: var(--h-ink-strong); border-radius: 3px; padding: 0 1px; } /* ── FAQ page ──────────────────────────────────────────────────────────── */ .h-faq-view { max-width: 760px; margin: 0 auto; padding: 40px 24px 80px; } .h-faq-view h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -1px; margin: 0 0 10px; } .h-faq-sub { font-size: 15px; color: var(--h-ink-dim); margin: 0 0 32px; } .h-faq-sub a { color: var(--h-accent); text-decoration: underline; } .h-faq-tabs { display: flex; gap: 8px; margin: 0 0 28px; flex-wrap: wrap; } .h-faq-tab { background: var(--h-surface); border: 1px solid var(--h-border); color: var(--h-ink-dim); border-radius: 999px; padding: 9px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: border-color 0.15s, background 0.15s, color 0.15s; } .h-faq-tab:hover { color: var(--h-ink); } .h-faq-tab.active { background: var(--h-accent); border-color: var(--h-accent); color: #fff; } .h-faq-list { display: flex; flex-direction: column; gap: 8px; } .h-faq-item { background: var(--h-surface); border: 1px solid var(--h-border); border-radius: var(--h-radius); overflow: hidden; } .h-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: none; border: none; color: var(--h-ink); text-align: left; font-family: inherit; font-size: 14.5px; font-weight: 600; padding: 16px 18px; cursor: pointer; } .h-faq-chev { flex-shrink: 0; color: var(--h-ink-muted); transition: transform 0.2s; } .h-faq-item.open .h-faq-chev { transform: rotate(180deg); color: var(--h-accent); } .h-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease, padding 0.25s ease; } .h-faq-item.open .h-faq-a { max-height: 240px; padding: 0 18px 18px; } .h-faq-a p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--h-ink-dim); } /* ── Search command palette ───────────────────────────────────────────── */ .h-cmdk-backdrop { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); align-items: flex-start; justify-content: center; padding: 12vh 20px 20px; } .h-cmdk-backdrop.open { display: flex; } .h-cmdk { width: 100%; max-width: 620px; max-height: 70vh; background: var(--h-surface-2); border: 1px solid var(--h-border); border-radius: var(--h-radius-lg); box-shadow: 0 24px 80px rgba(0,0,0,0.55); display: flex; flex-direction: column; overflow: hidden; } .h-cmdk-input-row { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--h-border); color: var(--h-ink-muted); flex-shrink: 0; } #cmdk-input { flex: 1; background: none; border: none; outline: none; color: var(--h-ink); font-size: 16px; font-family: inherit; } #cmdk-input::placeholder { color: var(--h-ink-muted); } .h-cmdk-close { background: none; border: none; color: var(--h-ink-muted); width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; font-family: inherit; transition: background 0.15s, color 0.15s; } .h-cmdk-close:hover { background: var(--h-surface); color: var(--h-ink); } .h-cmdk-results { overflow-y: auto; padding: 8px; flex: 1; } .h-cmdk-section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--h-ink-muted); padding: 10px 10px 6px; } .h-cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 8px; cursor: pointer; } .h-cmdk-item.active { background: rgba(255,45,120,0.1); } .h-cmdk-item-icon { width: 30px; height: 30px; flex-shrink: 0; border-radius: 7px; background: var(--h-surface); display: flex; align-items: center; justify-content: center; color: var(--h-ink-dim); } .h-cmdk-item-icon svg { width: 15px; height: 15px; } .h-cmdk-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .h-cmdk-item-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .h-cmdk-item-excerpt { font-size: 12.5px; color: var(--h-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .h-cmdk-item-group { flex-shrink: 0; font-size: 11px; color: var(--h-ink-muted); background: var(--h-surface); border-radius: 999px; padding: 3px 9px; } .h-cmdk-seeall { color: var(--h-accent); font-size: 13px; font-weight: 600; justify-content: center; } .h-cmdk-empty { padding: 40px 20px; text-align: center; color: var(--h-ink-muted); font-size: 13.5px; } .h-cmdk-empty a { color: var(--h-accent); text-decoration: underline; } .h-cmdk-footer { display: flex; gap: 18px; padding: 10px 16px; border-top: 1px solid var(--h-border); font-size: 11.5px; color: var(--h-ink-muted); flex-shrink: 0; } .h-cmdk-footer kbd { display: inline-block; background: var(--h-surface); border: 1px solid var(--h-border); border-radius: 4px; padding: 1px 5px; font-family: inherit; font-size: 10.5px; margin-right: 2px; } /* Keyboard hints (arrow keys, Enter, Esc, ⌘K) are meaningless without a physical keyboard. Hide them for touch input regardless of viewport size (a tablet in landscape is still "wide" but still has no keyboard) AND at the same narrow-viewport breakpoint where the palette itself goes full-screen — a small window is presenting as a mobile layout either way, whether or not it happens to report a coarse pointer. */ @media (hover: none), (pointer: coarse), (max-width: 760px) { .h-cmdk-footer, .search-kbd, .sk { display: none; } } @media (max-width: 760px) { .h-article-outer { flex-direction: column; } .h-article-sidebar { width: 100%; position: static; } .h-form-row { grid-template-columns: 1fr; } .h-nav-search { display: none; } .h-nav-label { display: none; } .h-nav-faq-link { display: none; } .h-btn-cta-nav { display: none; } .h-cmdk-backdrop { padding: 0; } .h-cmdk { max-width: none; max-height: none; height: 100%; border-radius: 0; } .h-faq-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; } .h-faq-tab { flex-shrink: 0; white-space: nowrap; } } @media (max-width: 500px) { .h-hero { padding: 60px 16px 48px; } .h-pile-wrap::before, .h-pile-wrap::after { display: none; } }