/* * base.css — Reset + Typography + Base Styles * Appmax Blog child theme | DS v1.1 * Loaded after tokens.css, before components.css */ /* ── Reset ─────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 100%; /* 16px base */ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Override engitech parent body defaults that conflict */ body.appmax-blog-page { font-family: var(--font-sans); background: var(--neutral-50); } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } /* Skip to content — accessibility */ .skip-link { position: absolute; top: -100%; left: var(--space-2); z-index: var(--z-modal); padding: var(--space-1) var(--space-2); background: var(--color-accent); color: var(--white); font-size: var(--text-sm); font-weight: var(--weight-semibold); border-radius: var(--radius-md); transition: top var(--transition-fast); } .skip-link:focus { top: var(--space-2); } /* ── Typography ────────────────────────────────────────────────── */ /* DM Sans + DM Mono via Google Fonts — loaded in via wp_enqueue_style */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text); } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-base); } p { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text); max-width: var(--content-max); } /* Article body typography — inside post content */ .article-body p { font-size: var(--text-lg); line-height: var(--leading-loose); margin-bottom: var(--space-4); } .article-body h2 { font-size: var(--text-3xl); margin-top: var(--space-8); margin-bottom: var(--space-3); } .article-body h3 { font-size: var(--text-2xl); margin-top: var(--space-6); margin-bottom: var(--space-2); } .article-body h4 { font-size: var(--text-xl); margin-top: var(--space-4); margin-bottom: var(--space-2); } .article-body ul, .article-body ol { list-style: initial; padding-left: var(--space-4); margin-bottom: var(--space-4); } .article-body li { font-size: var(--text-lg); line-height: var(--leading-relaxed); margin-bottom: var(--space-1); } .article-body a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition-fast); } .article-body a:hover { color: var(--purple-deep); } .article-body blockquote { border-left: 3px solid var(--color-accent); padding-left: var(--space-4); margin: var(--space-6) 0; font-size: var(--text-xl); font-style: italic; color: var(--color-text-muted); } .article-body code { font-family: var(--font-mono); font-size: 0.875em; background: var(--neutral-100); padding: 0.15em 0.4em; border-radius: var(--radius-sm); color: var(--purple-deep); } .article-body pre { font-family: var(--font-mono); font-size: var(--text-sm); background: var(--neutral-900); color: var(--neutral-200); padding: var(--space-4); border-radius: var(--radius-lg); overflow-x: auto; margin: var(--space-6) 0; line-height: var(--leading-relaxed); } .article-body pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; } .article-body figure { margin: var(--space-6) 0; } .article-body figcaption { font-size: var(--text-sm); color: var(--color-text-faint); text-align: center; margin-top: var(--space-2); } .article-body strong { font-weight: var(--weight-bold); } .article-body em { font-style: italic; } .article-body hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-8) 0; } .article-body table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; font-size: var(--text-sm); } .article-body th, .article-body td { border: 1px solid var(--color-border); padding: var(--space-2) var(--space-3); text-align: left; } .article-body th { background: var(--color-bg-alt); font-weight: var(--weight-semibold); } /* ── Layout utilities ─────────────────────────────────────────── */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-4); } @media (min-width: 768px) { .container { padding-inline: var(--space-6); } } @media (min-width: 1024px) { .container { padding-inline: var(--space-8); } } .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; } /* Focus visible — keyboard navigation */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); } /* ── Google Fonts preconnect hint ────────────────────────────── */ /* Fonts loaded via wp_enqueue_style in functions.php. */ /* DM Sans: weights 400, 500, 600, 700 */ /* DM Mono: weight 400 */