/* RHT Design System — base/site styles for the static html/ build. * Mirrors assets/design-base.css but with Vuetify scoping (.v-application) * stripped so selectors match a plain . * Loaded after tokens.css so all CSS variables resolve. */ *, *::before, *::after { box-sizing: border-box; } html, body { background: var(--surface-page); } body { font-family: var(--font-sans); color: var(--text-body); -webkit-font-smoothing: antialiased; margin: 0; } a:not(.rht-btn) { color: var(--text-link); text-decoration: none; } a:not(.rht-btn):hover { color: var(--brand-hover); } a.rht-btn { text-decoration: none; } /* ---- Layout primitives ---- */ .rht-container { max-width: var(--container-xl); margin: 0 auto; padding-inline: var(--space-6); width: 100%; } @media (max-width: 600px) { .rht-container { padding-inline: var(--space-4); } } .rht-section { padding-block: var(--section-y); } @media (max-width: 920px) { .rht-section { padding-block: var(--space-16); } } .rht-section--subtle { background: var(--surface-subtle); } .rht-section--inverse { background: var(--ink-950); } .rht-section--inverse, .rht-section--inverse * { color: var(--text-strong); } .rht-section-head { margin-bottom: var(--space-12); } .rht-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--brand); margin-bottom: var(--space-3); } .rht-section-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); color: var(--text-strong); margin: 0 0 var(--space-4); } .rht-section-lead { font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-muted); margin: 0; } /* ---- Header site chrome ---- */ .site-header { position: sticky; top: 0; z-index: var(--z-sticky); background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border-subtle); } .site-header__inner { display: flex; align-items: center; width: 100%; height: 68px; max-width: var(--container-xl); margin: 0 auto; padding-inline: var(--space-6); gap: var(--space-6); } @media (max-width: 600px) { .site-header__inner { padding-inline: var(--space-4); } } .site-header__logo { display: inline-flex; align-items: baseline; height: 32px; text-decoration: none; } .site-header__logo:hover { text-decoration: none; } .site-header__wordmark { display: inline-flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: var(--tracking-tight); line-height: 1; color: var(--text-strong); } .site-header__wordmark-mark { color: var(--brand); } .site-header__wordmark-suffix { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); } .site-header__spacer { flex: 1 1 auto; } .site-nav { display: flex; gap: var(--space-6); margin-left: var(--space-6); font-family: var(--font-sans); font-size: var(--text-base); font-weight: 500; } .site-nav a { color: var(--text-body); text-decoration: none; letter-spacing: 0; transition: color var(--duration-fast) var(--ease-out); } .site-nav a:hover { color: var(--text-strong); } /* ---- Buttons (RHT) ---- */ .rht-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-5); border-radius: var(--radius-md); font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0; line-height: 1; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .rht-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .rht-btn.rht-btn--primary { background: var(--brand); color: var(--on-brand); } .rht-btn.rht-btn--primary:hover { background: var(--brand-hover); color: var(--on-brand); } .rht-btn.rht-btn--primary:active { background: var(--brand-active); transform: translateY(0.5px); } .rht-btn.rht-btn--secondary { background: var(--surface-card); color: var(--text-strong); border-color: var(--border-default); } .rht-btn.rht-btn--secondary:hover { background: var(--surface-subtle); color: var(--text-strong); border-color: var(--border-strong); } .rht-btn.rht-btn--ghost { background: transparent; color: var(--text-strong); } .rht-btn.rht-btn--ghost:hover { background: var(--surface-subtle); color: var(--text-strong); } .rht-btn--lg { height: 48px; padding: 0 var(--space-6); font-size: var(--text-base); } .rht-btn--sm { height: 32px; padding: 0 var(--space-4); font-size: var(--text-xs); } /* ---- Cards (RHT) ---- */ .rht-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-6); transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } .rht-card--interactive:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lg); transform: translateY(-2px); } .rht-card--flat { border-color: var(--border-subtle); } .rht-card--raised { box-shadow: var(--shadow-md); } /* ---- Tags ---- */ .rht-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--surface-subtle); color: var(--text-body); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-wide); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; } }