/* ===================================================================== ai.yhile.com — global.css Plain CSS, no build step. All theme values live in section 1. Colors, fonts, nav height and radii mirror yhile.com's stylesheet. ===================================================================== */ /* --------------------------------------------------------------------- 1. THEME VARIABLES (edit here — the rest of the file only uses these) --------------------------------------------------------------------- */ :root { /* Colors — light (default) */ --bg: #ffffff; --text: #111111; --text-secondary: #444444; /* body copy on cards/descriptions (yhile --faq-body) */ --text-muted: #888888; /* labels and fine print only: too light for long text */ --text-faint: #aaaaaa; --nav-bg: #000000; --nav-text: #ffffff; --nav-link: #aaaaaa; --nav-link-hover: #ffffff; --border: #e5e5e5; --border-light: #eeeeee; --border-faint: #f0f0f0; --card-bg: #ffffff; --card-hover-border: #000000; --card-shadow: rgba(0, 0, 0, 0.06); --surface: #f7f7f7; /* code blocks, image placeholders, output boxes */ --btn-bg: #111111; --btn-text: #ffffff; --btn-hover-bg: #333333; --focus: #111111; /* keyboard focus ring */ /* Fonts (no web fonts: system stacks only, same as yhile.com) */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-serif: Georgia, 'Times New Roman', serif; /* research posts only */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; /* Layout */ --radius: 8px; --nav-height: 56px; --model-nav-height: 44px; --content-width: 960px; --paper-width: 720px; --gutter: 40px; /* left/right padding of the two navs */ --page-pad: 24px; /* left/right padding of page content */ } /* Dark mode — follows the OS setting (same approach as yhile.com). Add data-theme="dark" or "light" on to force one. Keep the two dark blocks below identical. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #121212; --text: #f0f0f0; --text-secondary: #bbbbbb; --text-muted: #999999; --text-faint: #777777; --nav-bg: #0a0a0a; --nav-text: #ffffff; --nav-link: #999999; --nav-link-hover: #ffffff; --border: #2c2c2c; --border-light: #262626; --border-faint: #202020; --card-bg: #1a1a1a; --card-hover-border: #ffffff; --card-shadow: rgba(0, 0, 0, 0.4); --surface: #1a1a1a; --btn-bg: #ffffff; --btn-text: #111111; --btn-hover-bg: #dddddd; --focus: #f0f0f0; } } :root[data-theme="dark"] { --bg: #121212; --text: #f0f0f0; --text-secondary: #bbbbbb; --text-muted: #999999; --text-faint: #777777; --nav-bg: #0a0a0a; --nav-text: #ffffff; --nav-link: #999999; --nav-link-hover: #ffffff; --border: #2c2c2c; --border-light: #262626; --border-faint: #202020; --card-bg: #1a1a1a; --card-hover-border: #ffffff; --card-shadow: rgba(0, 0, 0, 0.4); --surface: #1a1a1a; --btn-bg: #ffffff; --btn-text: #111111; --btn-hover-bg: #dddddd; --focus: #f0f0f0; } /* --------------------------------------------------------------------- 2. BASE --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font-sans); font-size: 16px; line-height: 1.6; background: var(--bg); color: var(--text); transition: background-color 0.2s ease, color 0.2s ease; } main { flex: 1 0 auto; width: 100%; } main:focus { outline: none; } /* skip-link target */ [hidden] { display: none !important; } img, svg { max-width: 100%; height: auto; } img { display: block; } a { color: inherit; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; } a:hover { text-decoration-color: currentColor; } a, button, input, textarea, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; } h1, h2, h3 { line-height: 1.25; } code, pre { font-family: var(--font-mono); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 8px 14px; border-radius: var(--radius); background: var(--btn-bg); color: var(--btn-text); text-decoration: none; } .skip-link:focus { top: 8px; } .container { width: 100%; max-width: var(--content-width); margin: 0 auto; padding: 0 var(--page-pad); } .page { padding-top: 40px; } .section { margin-top: 48px; } .section > h2, .section-head h2 { margin: 0 0 14px; font-size: 22px; letter-spacing: -0.02em; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .section-head h2 { margin: 0; } .section-link { font-size: 14px; color: var(--text-secondary); } .empty { color: var(--text-muted); font-size: 14px; margin: 0; } /* --------------------------------------------------------------------- 3. NAVIGATION (markup is injected by /js/nav.js) --------------------------------------------------------------------- */ /* 3a. Primary nav — black bar, same look as yhile.com */ .primary-nav { background: var(--nav-bg); color: var(--nav-text); } .primary-nav-inner { min-height: var(--nav-height); padding: 0 var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; } .primary-nav :focus-visible { outline-color: var(--nav-text); } .brand { color: var(--nav-text); font-size: 20px; font-weight: 600; letter-spacing: -0.5px; text-decoration: none; } .primary-links { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; } .primary-links a { display: inline-block; white-space: nowrap; padding: 8px 0; color: var(--nav-link); font-size: 14px; text-decoration: none; transition: color 0.15s; } .primary-links a:hover, .primary-links a[aria-current] { color: var(--nav-link-hover); } /* 3a-2. No-JavaScript fallback nav (written by build-seo.js inside