/** * Forma template — base styles. * * Layered so that the generated per-element CSS (printed in after this file) * always wins over these defaults without needing !important. */ /* ---------------------------------------------------------------- tokens -- */ :root { --forma-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --forma-font-headings: var(--forma-font-body); --forma-font-size-base: 1rem; --forma-line-height: 1.65; --forma-color-text: #1f2937; --forma-color-heading: #111827; --forma-color-muted: #6b7280; --forma-color-link: #1d4ed8; --forma-color-surface: #ffffff; --forma-color-surface-alt: #f8fafc; --forma-color-surface-dark: #111827; --forma-color-text-on-dark: #ffffff; --forma-color-border: #e5e7eb; --forma-radius: .5rem; --forma-radius-lg: 1rem; --forma-shadow: 0 1px 2px rgba(0, 0, 0, .05); --forma-container: 1320px; --forma-gap: 1.5rem; --forma-header-offset: 0px; } /* * Dark surface, light text — opt in with the "forma-invert" class on any element. * * The default design is light: --forma-color-surface is white, so text must be dark * unless the author paints a dark background on the same element. This helper is the * supported way to do that without bypassing the tokens, and it supplies the pairing * of light text with a dark background that a bare background-color override lacks. */ .forma-invert { background-color: var(--forma-color-surface-dark); color: var(--forma-color-text-on-dark); } .forma-invert :where(h1, h2, h3, h4, h5, h6, .forma-heading) { color: inherit; } .forma-invert a:not(.btn) { color: inherit; } .forma-invert :where(.forma-site-description, .forma-info, .forma-tag, .forma-breadcrumbs ol, .forma-breadcrumbs ul, .forma-error__code) { color: inherit; opacity: .85; } /* ------------------------------------------------------------ structure -- */ html { scroll-behavior: smooth; } body.forma { margin: 0; font-family: var(--forma-font-body); font-size: var(--forma-font-size-base); line-height: var(--forma-line-height); color: var(--forma-color-text); background-color: var(--forma-color-surface); -webkit-text-size-adjust: 100%; } body.forma h1, body.forma h2, body.forma h3, body.forma h4, body.forma h5, body.forma h6, body.forma .forma-heading { font-family: var(--forma-font-headings); color: var(--forma-color-heading); line-height: 1.25; margin-block: 0 .6em; } body.forma a { color: var(--forma-color-link); } body.forma img { max-width: 100%; height: auto; } /* Containers ------------------------------------------------------------- */ .forma-section > .container, .forma-section > .container-fluid { width: 100%; margin-inline: auto; padding-inline: 1rem; } .forma-section > .container { max-width: var(--forma-container); } .forma-full .forma-section > .container { max-width: none; } /* Skip link -------------------------------------------------------------- */ .forma-skip-link { position: absolute; top: 0; left: 0; z-index: 2000; padding: .75rem 1.25rem; background: #fff; color: #111; border: 2px solid currentColor; border-radius: 0 0 var(--forma-radius) 0; transform: translateY(-110%); transition: transform .15s ease-in-out; } .forma-skip-link:focus { transform: translateY(0); } /* ------------------------------------------------------------- elements -- */ /* * Static fallback for a row. The renderer emits a per-element 12-track override * (`#id { ... }`) whenever a row is rendered, and an id beats these class rules, so * this block only matters if a row's HTML ever appears without its generated style. * * It uses the same 12-track model as the renderer: a column's `span` is a share of 12, * and `span 6` is the default two-per-line split. Mixing a `repeat(2)` track list with * `span N` was the bug that made the header stack logo above menu. */ .forma-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); /* A 12-track grid holds 11 gaps, so a wide gutter is counted 11 times. */ column-gap: min(var(--forma-gap), 8%); row-gap: var(--forma-gap); } .forma-column { grid-column: span 6; min-width: 0; display: flex; flex-direction: column; } .forma-text > :last-child, .forma-html > :last-child { margin-bottom: 0; } .forma-image { margin: 0; } .forma-image img { display: block; } .forma-divider { width: 100%; } .forma-divider hr { border: 0; border-top: 1px solid currentColor; } .forma-button { display: inline-block; text-decoration: none; } .forma-button.btn-link { padding-inline: 0; } /* Module positions ------------------------------------------------------- */ .forma-position { min-width: 0; } .forma-position .moduletable:last-child > :last-child { margin-bottom: 0; } /* --------------------------------------------------------------- header -- */ .forma-logo .forma-brand { display: inline-flex; flex-direction: column; text-decoration: none; color: inherit; } .forma-site-title { font-size: 1.3rem; font-weight: 700; line-height: 1.2; } .forma-site-description { font-size: .875rem; color: var(--forma-color-muted); } .forma-logo img { display: block; } .forma-sticky-header .forma-section:first-child { position: sticky; top: 0; z-index: 1030; } /* ------------------------------------------------------- menu behaviour -- */ /* * Joomla 6 mod_menu (_default.php layout) emits exactly this, wrapped in