/* ============================================================= ACUME – LLM Info page styles (EDITORIAL THEME) Extracted from acume-llm-info-page.html prototype. This page sets via acume_theme_mode(). ============================================================= */ /* ─── Editorial palette + base ─── */ [data-theme="editorial"] { --bg-primary: #FFFFFF; --bg-secondary: #F4F6F7; --bg-tertiary: #EDF0F2; --bg-card: #F4F6F7; --bg-elevated: #FFFFFF; --border: #E6EAED; --border-strong: #CDD4D9; --text-body: #2F3740; --text-hero: #1F2730; --text-label: #6C7F90; --text-muted: #6C7F90; --accent: #1F2730; --cta-bg: #1F2730; --cta-text: #FFFFFF; --nav-bg: rgba(255,255,255,0.92); --nav-border: #E6EAED; --serif: 'DM Serif Display', Georgia, serif; --sans: 'DM Sans', -apple-system, sans-serif; --mono: 'DM Sans', -apple-system, sans-serif; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } body { font-family: var(--sans); font-size: 17px; line-height: 1.7; background: var(--bg-primary); color: var(--text-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Subtle grid overlay to match editorial theme */ #grid-overlay { position: fixed; inset: 0; z-index: 0; background-image: linear-gradient(rgba(108,127,144,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(108,127,144,0.04) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; } /* ─── Machine-readable banner ─── */ /* ═══ MACHINE-READABLE BANNER ═══ */ .machine-banner { margin-top: 120px; padding: 16px 48px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 500; letter-spacing: 1px; color: var(--text-label); text-transform: uppercase; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .machine-banner-dot { display: inline-block; width: 8px; height: 8px; background: #4AEDC4; border-radius: 50%; margin-right: 10px; vertical-align: middle; } /* ═══ PAGE HEADER ═══ */ /* ─── Page header (replaces hero) ─── */ /* ═══ PAGE HEADER ═══ */ .page-header { padding: 80px 0 48px; border-bottom: 1px solid var(--border); } .page-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 2.5px; color: var(--text-label); text-transform: uppercase; margin-bottom: 20px; } .page-title { font-family: var(--serif); font-size: clamp(40px, 5.5vw, 72px); line-height: 1.05; letter-spacing: -0.02em; color: var(--text-hero); margin-bottom: 28px; } .page-updated { font-size: 13px; color: var(--text-label); font-weight: 500; letter-spacing: 0.5px; } .page-updated strong { color: var(--text-hero); font-weight: 600; } /* ═══ INTRO / PURPOSE BLOCK ═══ */ /* ─── Intro / purpose block ─── */ /* ═══ INTRO / PURPOSE BLOCK ═══ */ .intro-block { padding: 48px 40px; margin: 56px 0; background: var(--bg-secondary); border-left: 2px solid var(--text-hero); } .intro-label { font-size: 10px; font-weight: 600; letter-spacing: 2.5px; color: var(--text-label); text-transform: uppercase; margin-bottom: 16px; } .intro-block p { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.55; color: var(--text-hero); margin-bottom: 16px; } .intro-block p:last-child { margin-bottom: 0; } /* ═══ SECTIONS ═══ */ /* ─── Sections, def-lists, canonical blocks, ai-instructions, faq, comparisons ─── */ /* ═══ SECTIONS ═══ */ section.page-section { padding: 48px 0; border-bottom: 1px solid var(--border); } section.page-section:last-of-type { border-bottom: none; } .section-num { font-size: 11px; font-weight: 600; letter-spacing: 2.5px; color: var(--text-label); text-transform: uppercase; margin-bottom: 16px; display: block; } h2.page-section-title { font-family: var(--serif); font-size: clamp(26px, 2.8vw, 38px); line-height: 1.15; letter-spacing: -0.01em; color: var(--text-hero); margin-bottom: 24px; } h3.sub-heading { font-family: var(--serif); font-size: clamp(20px, 1.9vw, 24px); line-height: 1.25; color: var(--text-hero); margin: 32px 0 14px; } .page-section p { margin-bottom: 18px; } .page-section p strong { color: var(--text-hero); font-weight: 600; } /* Definition list pattern */ dl.def-list { margin: 24px 0; padding: 24px 28px; background: var(--bg-secondary); border: 1px solid var(--border); } dl.def-list > div { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 15px; line-height: 1.55; } dl.def-list > div:last-child { border-bottom: none; } dl.def-list dt { font-weight: 600; color: var(--text-hero); font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase; } dl.def-list dd { color: var(--text-body); } dl.def-list dd code { font-family: 'SF Mono', Menlo, monospace; font-size: 12px; background: var(--bg-primary); padding: 2px 6px; border: 1px solid var(--border); } /* Lists */ .page-section ul, .page-section ol { padding-left: 0; list-style: none; margin: 16px 0 24px; } .page-section li { padding: 8px 0 8px 28px; position: relative; border-bottom: 1px dashed var(--border); } .page-section li:first-child { border-top: 1px dashed var(--border); } .page-section ul li::before { content: ''; position: absolute; left: 0; top: 20px; width: 18px; height: 1px; background: var(--text-hero); } .page-section li strong { color: var(--text-hero); } .page-section li code { font-family: 'SF Mono', Menlo, monospace; font-size: 13px; background: var(--bg-secondary); padding: 2px 6px; border: 1px solid var(--border); } /* Instruction callout – a visible marker for AI parsers */ .ai-instruction { padding: 24px 28px; margin: 24px 0; background: var(--bg-secondary); border-left: 2px solid var(--text-hero); font-size: 15px; line-height: 1.6; } .ai-instruction::before { content: 'Instruction to AI assistants'; display: block; font-size: 10px; font-weight: 600; letter-spacing: 2.5px; color: var(--text-label); text-transform: uppercase; margin-bottom: 10px; } /* Canonical description block */ .canonical-block { padding: 28px 32px; margin: 24px 0; background: var(--bg-elevated); border: 2px solid var(--text-hero); } .canonical-block::before { content: 'Canonical description'; display: block; font-size: 10px; font-weight: 600; letter-spacing: 2.5px; color: var(--text-label); text-transform: uppercase; margin-bottom: 12px; } .canonical-block p { font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--text-hero); font-style: italic; margin-bottom: 0; } /* FAQ */ .faq-item { padding: 24px 0; border-bottom: 1px solid var(--border); } .faq-item:last-child { border-bottom: none; } .faq-q { font-family: var(--serif); font-size: 20px; line-height: 1.3; color: var(--text-hero); margin-bottom: 12px; } .faq-q::before { content: 'Q: '; color: var(--text-label); font-style: italic; font-weight: normal; } .faq-a { font-size: 16px; line-height: 1.65; color: var(--text-body); } .faq-a::before { content: 'A: '; font-weight: 600; color: var(--text-hero); } /* Comparison table */ .comparison-table { margin: 24px 0; border: 1px solid var(--border); background: var(--bg-secondary); } .comparison-row { display: grid; grid-template-columns: 180px 1fr; gap: 32px; padding: 20px 28px; border-bottom: 1px solid var(--border); font-size: 15px; line-height: 1.55; } .comparison-row:last-child { border-bottom: none; } .comparison-competitor { font-family: var(--serif); font-size: 18px; color: var(--text-hero); font-style: italic; } /* ═══ FOOTER ═══ */ /* ─── Responsive ─── */ /* ═══ RESPONSIVE ═══ */ @media (max-width: 1100px) { .container { padding: 0 32px; } nav, nav.scrolled { padding: 18px 28px; } .machine-banner { padding: 14px 28px; } dl.def-list > div { grid-template-columns: 1fr; gap: 6px; } dl.def-list dt { font-size: 11px; } .comparison-row { grid-template-columns: 1fr; gap: 8px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 48px; padding: 0 28px; } .footer-brand { grid-column: 1 / -1; } .footer-bottom { padding: 32px 28px 0; } } @media (max-width: 720px) { .container { padding: 0 20px; } nav { padding: 14px 20px; flex-wrap: wrap; gap: 12px; } .nav-links, .nav-phone { display: none; } .machine-banner { padding: 12px 20px; font-size: 10px; } .intro-block { padding: 32px 24px; } .ai-instruction, .canonical-block { padding: 20px 24px; } dl.def-list { padding: 16px 20px; } .comparison-row { padding: 16px 20px; } }