/** * Delta base CSS — the theme floor, not the site look. * * Ships in the theme package and loads in every design-system mode. Sites * cannot edit it; a theme update overwrites it. It holds only what Delta needs * to work: the reset, the page frame, the nav reset, a focus outline, the skip * link and Soft Navigation. Colours, type and spacing belong to the design * system's site.css. * * The reset, page frame, nav reset, focus outline and fallback styles are in * @layer delta.base, so any unlayered CSS (site.css, templates, plugins) wins * over them without extra specificity. The skip link and Soft Navigation rules * stay unlayered on purpose: a site rule such as `a { position: relative }` * must not reveal the hidden skip link. */ @layer delta.base { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; } /* No browser block margins on text elements, like every modern reset. Spacing between them belongs to the design system (the seed's site.css sets it from the scale; a custom system brings its own) and, on pages with no template, to the fallback section below. margin-block only, so definition lists keep their indent. Zero specificity, so any rule wins. */ :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, pre, table) { margin-block: 0; } img, svg, video { max-width: 100%; height: auto; display: block; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* Page frame: footer at the bottom on short pages. */ .delta-site { min-height: 100vh; display: flex; flex-direction: column; } .delta-main { flex: 1; } ul.delta-nav, ul.delta-nav ul { list-style: none; margin: 0; padding: 0; } } /* Skip to content — hidden until keyboard focus */ .delta-skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .delta-skip-link:focus, .delta-skip-link:focus-visible { position: fixed; top: 1rem; left: 1rem; z-index: 100000; width: auto; height: auto; margin: 0; padding: 0.75rem 1rem; overflow: visible; clip: auto; white-space: normal; /* Always readable: the browser's page colours as a pair (a design system may paint and leave transparent). The font comes from the active design system. */ background-color: Canvas; color: CanvasText; font: inherit; text-decoration: none; border: 1px solid currentColor; border-radius: 4px; } /* Soft navigation */ html.is-soft-nav { cursor: progress; } html.is-soft-nav .delta-main { opacity: 0.72; transition: opacity 0.12s ease; } @media (prefers-reduced-motion: reduce) { html.is-soft-nav .delta-main { transition: none; } } .delta-soft-nav-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Fallback pages: only while no Delta template covers a route (header, footer or content). The PHP prints .delta-fallback there; templated routes never do. WordPress output only: padding, pagination, comments. Nothing WooCommerce. Spacing is raw; colour and type come from the active design system. Do not author the delta-fallback class in templates or site.css. */ @layer delta.base { .delta-fallback { padding: 2rem clamp(1rem, 4vw, 2rem); } /* Native content with no template around it needs a plain rhythm. Same shape as the seed's (space above, between siblings), so a design system's own rhythm replaces these values instead of adding to them. */ .delta-fallback :where(p, ul, ol, dl, pre, blockquote, figure, table) + :where(p, ul, ol, dl, pre, blockquote, figure, table) { margin-block-start: 1em; } .delta-fallback :where(h1, h2, h3, h4, h5, h6) + :where(p, ul, ol, dl, pre, blockquote, figure, table) { margin-block-start: .5em; } .delta-fallback :where(p, ul, ol, dl, pre, blockquote, figure, table) + :where(h1, h2, h3, h4, h5, h6) { margin-block-start: 1.5em; } /* Pagination (blog, archive, search, comments) */ .delta-fallback .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-block-start: 2rem; } .delta-fallback .nav-links .page-numbers { color: inherit; text-decoration: none; padding: .35em .75em; border-radius: 3px; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); } .delta-fallback .nav-links a.page-numbers:hover { border-color: currentColor; } .delta-fallback .nav-links .page-numbers.current { background: color-mix(in srgb, currentColor 8%, transparent); font-weight: 600; } .delta-fallback .nav-links .page-numbers.dots { border: 0; } /* Comments (theme comments.php) */ .delta-fallback .comment { margin-block-start: 1.5rem; } .delta-fallback .comment > p:first-child { font-weight: 600; } .delta-fallback .comment > p:first-child time { font-weight: 400; font-size: .875em; opacity: .7; } /* Replies: with 'style' => 'div', WordPress nests a reply .comment inside its parent (no .children wrapper). */ .delta-fallback .comment .comment { padding-inline-start: clamp(1rem, 4vw, 2.5rem); border-inline-start: 1px solid color-mix(in srgb, currentColor 15%, transparent); } .delta-fallback .comment > p { margin-block: 0 .5rem; } .delta-fallback .comment-reply-link { display: inline-block; font-size: .875em; color: inherit; text-decoration: none; padding: .2em .7em; border-radius: 3px; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); } .delta-fallback .comment-reply-link:hover { border-color: currentColor; } .delta-fallback .comment-respond { margin-block-start: 2.5rem; } .delta-fallback .comment-reply-title { margin-block-end: .75rem; } .delta-fallback .comment-form > p + p { margin-block-start: 1rem; } .delta-fallback .comment-form label { display: block; font-size: .875em; opacity: .8; margin-block-end: .35rem; } .delta-fallback .comment-form input[type="text"], .delta-fallback .comment-form input[type="email"], .delta-fallback .comment-form input[type="url"], .delta-fallback .comment-form textarea { width: 100%; max-width: 32rem; font: inherit; color: inherit; background: transparent; padding: .6rem 1rem; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: 3px; } .delta-fallback .comment-form textarea { max-width: none; } .delta-fallback .comment-form .comment-form-cookies-consent { display: flex; align-items: baseline; gap: .5rem; } .delta-fallback .comment-form .comment-form-cookies-consent label { margin: 0; } .delta-fallback .comment-form input[type="submit"] { font: inherit; font-weight: 600; cursor: pointer; border-radius: 3px; padding: .6rem 1rem; background: transparent; color: inherit; border: 1px solid currentColor; } .delta-fallback .comment-form input[type="submit"]:hover { background: color-mix(in srgb, currentColor 8%, transparent); } }