/* base.css — shared typography + layout primitives for Node web pages. Scoped to body.layout-default so it only affects pages using the node layout (and matches what samtale already sets for itself). Per design-system.md: reset + typography + base element styles + primitives. Logical properties for RTL. */ body.layout-default { font-family: var(--font-family, system-ui, sans-serif); color: var(--color-text, #4a4540); background: var(--color-bg-soft, #f7f4ee); } body.layout-default h1, body.layout-default h2, body.layout-default h3 { font-family: var(--font-display, Georgia, serif); color: var(--color-text-strong, #1d1d1b); } body.layout-default a { color: inherit; } /* ===== Accessibility primitives (accessibility.md) ===== */ /* Screen-reader-only text. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Visible focus ring (≥ 2 px, ≥ 3:1 on the cream surface). */ :focus-visible { outline: 2px solid var(--focus-ring, #7d5f1c); outline-offset: 2px; } /* Skip link (WCAG 2.4.1 bypass blocks) — first element in , hidden until keyboard-focused, then floats above the fixed nav. */ .skip-link { position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 10000; padding: 10px 16px; background: var(--color-bg, #fff); color: var(--text-strong, #3d342a); border: 2px solid var(--focus-ring, #7d5f1c); border-radius: var(--radius-default, 8px); font-weight: 600; text-decoration: none; transform: translateY(-200%); } .skip-link:focus-visible { transform: none; } /* Respect reduced-motion across all node pages. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* page-header primitive (hero + compact) — kept for pages that opt in. */ .page-header { font-family: var(--font-family, system-ui, sans-serif); } .page-header .ph-hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-3, 12px); padding-block: var(--space-8, 32px) var(--space-6, 24px); text-align: center; } .page-header .ph-hero-logo { width: 96px; height: 96px; object-fit: contain; } .page-header .ph-hero-title { font-size: var(--font-size-xl, 28px); margin: 0; } .page-header .ph-compact { display: flex; align-items: center; gap: var(--space-3, 12px); padding: var(--space-2, 8px) var(--space-4, 16px); border-block-end: 1px solid var(--color-border, #e5e0d5); } .page-header .ph-compact-title { font-size: 18px; margin: 0; } /* Nav login button (node pages only — the logged-out nav state). The .nav-new__btn--* classes in nav_bar_styles.css are sized for the user menu; this resets them for inline navbar use. */ .nav-new__login { display: inline-flex; align-items: center; width: auto; padding: 6px 18px; border-radius: var(--radius-pill, 999px); text-decoration: none; white-space: nowrap; } /* Shared hero page head (partials/page_head.ejs) — logo + title + lead. */ .page-head { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: var(--space-4) var(--space-6); } .page-head-logo { width: clamp(150px, 16vw, 210px); height: auto; } .page-head-title { font-size: var(--font-size-xl); color: var(--color-text-strong); margin: var(--space-3) 0 0; letter-spacing: 0.01em; } .page-head-lead { color: var(--color-text-muted); margin: var(--space-1) 0 0; } /* Staggered section reveal — pair with `animation: spraki-rise ...` in page CSS. Globally disabled by the prefers-reduced-motion block above. */ @keyframes spraki-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }