/* * Default Theme — app.css * Simple, responsive baseline for the CMS frontend. Plain CSS, no build step. */ :root { --color-text: #1f2937; --color-muted: #6b7280; --color-bg: #ffffff; --color-surface: #f9fafb; --color-border: #e5e7eb; /* Primary accent follows the theme option (--tncms-primary, set inline in the master layout from theme_option('primary_color')). */ --color-accent: var(--tncms-primary, #2563eb); --container: 64rem; /* Minimum breathing room a mega panel keeps from each viewport edge; its width is always clamped to calc(100vw - 2 * this) so a panel can never cause horizontal scrolling (never a 100vw width). */ --mega-gutter: 1.5rem; } *, *::before, *::after { box-sizing: border-box; } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--color-text); background: var(--color-bg); margin: 0; line-height: 1.65; } a { color: var(--color-accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; } /* Header */ .site-header { border-bottom: 1px solid var(--color-border); background: var(--color-surface); } .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; } .site-brand { font-size: 1.35rem; font-weight: 700; color: var(--color-text); } .site-logo { display: block; max-height: 60px; width: auto; } .site-tagline { margin: 0.1rem 0 0; font-size: 0.85rem; opacity: 0.7; } /* Language switcher */ .lang-switcher { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .lang-switcher__link { display: inline-block; padding: 0.15rem 0.5rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; border: 1px solid var(--color-border); border-radius: 0.375rem; color: var(--color-muted); } .lang-switcher__link:hover { text-decoration: none; border-color: var(--color-accent); color: var(--color-accent); } .lang-switcher__link.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } /* POST-form locale switch (session/cookie storefront locale): the form must not disturb the flex row, and the submit button reuses the link styling. */ .lang-switcher__form { display: contents; } button.lang-switcher__link { background: transparent; cursor: pointer; font: inherit; } /* Menus Desktop: top-level items sit in a row; each parent's children live in an absolutely-positioned dropdown. Absolute positioning keeps the panel out of flow, so opening it never shifts the layout. The panel reveals via keyboard focus (:focus-within, always), JS hover intent (.is-open), or — when JS is absent — plain :hover. app.js adds `js` to to switch off the hover fallback once the intent-based version is live. Mobile (<768px): the nav collapses behind a hamburger and submenus become inline accordions driven by their