/* ========================================================================== ShareFam — base.css Reset + design tokens + light/dark theming via CSS custom properties. DEV_GUIDE: all sizing in rem only (1rem equals the 16-unit root base). Theme is driven by the `data-theme` attribute on . ========================================================================== */ /* ---------- Modern reset ------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { min-height: 100vh; min-width: 22.5rem; /* 360-unit mobile-first floor */ line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: var(--sf-font-body); background: var(--sf-bg); color: var(--sf-text); transition: background 0.25s ease, color 0.25s ease; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } a { color: var(--sf-accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--sf-font-display); line-height: 1.2; font-weight: 700; } ul, ol { list-style-position: inside; } :focus-visible { outline: 0.1875rem solid var(--sf-focus); outline-offset: 0.125rem; border-radius: 0.25rem; } /* ---------- Design tokens — LIGHT (default) ------------------------------ */ :root, :root[data-theme="light"] { /* Brand */ --sf-accent: #0d9488; /* teal-600 */ --sf-accent-2: #14b8a6; /* teal-500 */ --sf-accent-dark: #0f766e; /* teal-700 */ --sf-accent-soft: rgba(13, 148, 136, 0.1); --sf-accent-ring: rgba(13, 148, 136, 0.35); --sf-on-accent: #ffffff; /* Surfaces */ --sf-bg: #f8fafc; --sf-bg-alt: #f1f5f9; --sf-surface: #ffffff; --sf-surface-2: #f8fafc; --sf-surface-raised: #ffffff; /* Text */ --sf-text: #1e293b; --sf-text-muted: #64748b; --sf-text-faint: #94a3b8; /* Lines */ --sf-border: #e2e8f0; --sf-border-strong: #cbd5e1; /* States */ --sf-focus: #0d9488; --sf-shadow: 0 0.0625rem 0.1875rem rgba(15, 23, 42, 0.08), 0 0.0625rem 0.125rem rgba(15, 23, 42, 0.06); --sf-shadow-lg: 0 1.25rem 2.5rem rgba(15, 23, 42, 0.12); /* Hero gradient */ --sf-hero-from: #f0fdfa; --sf-hero-via: #ffffff; --sf-hero-to: #ecfeff; /* Typography stacks */ --sf-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --sf-font-display: "Playfair Display", Georgia, "Times New Roman", serif; color-scheme: light; } /* ---------- Design tokens — DARK ---------------------------------------- */ :root[data-theme="dark"] { --sf-accent: #2dd4bf; /* brighter teal for dark contrast */ --sf-accent-2: #14b8a6; --sf-accent-dark: #5eead4; --sf-accent-soft: rgba(45, 212, 191, 0.14); --sf-accent-ring: rgba(45, 212, 191, 0.4); --sf-on-accent: #042f2e; --sf-bg: #0a0f1a; --sf-bg-alt: #0d1525; --sf-surface: #111827; --sf-surface-2: #0d1525; --sf-surface-raised: #1e293b; --sf-text: #f1f5f9; --sf-text-muted: #94a3b8; --sf-text-faint: #64748b; --sf-border: #1e293b; --sf-border-strong: #334155; --sf-focus: #2dd4bf; --sf-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.4), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3); --sf-shadow-lg: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.55); --sf-hero-from: #0a0f1a; --sf-hero-via: #0d1525; --sf-hero-to: #0a0f1a; color-scheme: dark; } /* ---------- Shared utility classes -------------------------------------- */ /* Visually-hidden but screen-reader accessible (WCAG) */ .sf-sr-only { position: absolute; width: 0.0625rem; height: 0.0625rem; padding: 0; margin: -0.0625rem; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip-to-content link — appears on keyboard focus */ .sf-skip-link { position: absolute; left: 0.5rem; top: -3rem; z-index: 200; padding: 0.625rem 1rem; background: var(--sf-accent); color: var(--sf-on-accent); border-radius: 0.5rem; font-weight: 600; transition: top 0.2s ease; } .sf-skip-link:focus { top: 0.5rem; text-decoration: none; } /* Page section width container */ .sf-container { width: 100%; max-width: 75rem; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; } /* Generic vertical section rhythm */ .sf-section { padding-top: 4rem; padding-bottom: 4rem; } @media (min-width: 48rem) { .sf-section { padding-top: 6rem; padding-bottom: 6rem; } }