/* * Base resets and global typography for the public site. * Scoped to the public layout via body.ub-public — admin remains untouched. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; scroll-behavior: smooth; /* Always show the vertical scrollbar so content doesn't shift horizontally when navigating between short and long pages (mirrors admin app.css). Because of this, the mobile-nav drawer locks scroll on , not (see mobile_nav_controller.js): locking would break overflow propagation and leave the page scrollable behind the drawer. */ overflow-y: scroll; } body.ub-public { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--ub-font-body); font-size: var(--ub-text-md); font-weight: 400; line-height: var(--ub-leading-body); color: var(--ub-color-body); background-color: var(--ub-color-section-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* `clip` (not `hidden`) so position: sticky on the header isn't broken while still preventing horizontal scrollbars from sub-pixel overflow. */ overflow-x: clip; } /* Push footer to the viewport bottom when content is short. */ body.ub-public > main { flex: 1 0 auto; } body.ub-public > .ub-footer { flex-shrink: 0; } /* Heading defaults wrapped in :where() so the rule has 0 specificity — any component class (e.g. .ub-footer__col-title, .ub-services__title) overrides without needing to fight selector weight. */ :where(body.ub-public h1, body.ub-public h2, body.ub-public h3, body.ub-public h4) { margin: 0; font-weight: 600; letter-spacing: var(--ub-tracking-display); line-height: var(--ub-leading-display); color: var(--ub-color-heading); } :where(body.ub-public h1) { font-size: var(--ub-text-4xl); } :where(body.ub-public h2) { font-size: var(--ub-text-4xl); } :where(body.ub-public h3) { font-size: var(--ub-text-3xl); } :where(body.ub-public h4) { font-size: var(--ub-text-2xl); } :where(body.ub-public p) { margin: 0; } /* Глобал холбоос — гарчиг (дээрх :where блок) шиг `:where()`-т ороож 0 specificity болгосон. Тиймээс компонентын класс энгийн `.ub-foo` / `.ub-foo:hover`-ээр, нэмэлт `body.ub-public a.` (0,3,2) prefix-гүйгээр override хийнэ (DESIGN §3.6). rest + hover-ийг ХАМТ :where-т ороосон нь зайлшгүй: тусад нь ороовол rest-ийн өндөр specificity `color: inherit` нь 0-spec hover-ийн өнгийг дараад hover эффект алга болно. */ :where(body.ub-public a:not(.ub-btn)) { color: inherit; text-decoration: none; transition: color var(--ub-transition-fast); } :where(body.ub-public a:not(.ub-btn):hover) { color: var(--ub-color-brand); } /* Anchor-as-button keeps no default link styling */ body.ub-public a.ub-btn { text-decoration: none; } body.ub-public img, body.ub-public svg { display: block; max-width: 100%; height: auto; } :where(body.ub-public button) { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; } body.ub-public ul, body.ub-public ol { margin: 0; padding: 0; list-style: none; } body.ub-public :focus-visible:not(input, textarea, select) { outline: 2px solid var(--ub-color-brand); outline-offset: 2px; border-radius: 2px; } /* Skip-link for keyboard users */ .ub-skip-link { position: absolute; top: -100px; left: 0; padding: 0.75rem 1rem; background: var(--ub-color-accent); color: var(--ub-color-on-dark); font-weight: 600; z-index: 9999; transition: top var(--ub-transition-fast); } .ub-skip-link:focus { top: 0; } /* ============================================================ LAYOUT PRIMITIVES ============================================================ Use these in every public page. Do NOT redefine container, page wrapper, or split layout per-page. */ /* Page wrapper — vertical padding for any non-section page (shop, auth, memorial, account, etc.). Body bg is white; pages with a different bg add `.ub-bg-cream` (or define a new bg utility in this file). */ .ub-page { padding-block: var(--ub-page-padding-y); } /* Container — width-constrained, centred, with consistent gutter padding. Each variant is self-contained: use ONE class, not a base + modifier pair. Use the right width for the page (see CLAUDE.md "Public Frontend Design System"). */ .ub-container, .ub-container--xs, .ub-container--narrow, .ub-container--wide { width: 100%; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); } .ub-container { max-width: var(--ub-container-max); } .ub-container--xs { max-width: var(--ub-container-xs); } .ub-container--narrow { max-width: var(--ub-container-narrow); } .ub-container--wide { max-width: var(--ub-container-wide); } /* Section — vertical padding for a strip on the home / marketing pages. Use `.ub-bg-cream` to switch the background colour. */ .ub-section { padding-block: var(--ub-section-padding-y); position: relative; } /* Sidebar + main split — used by shop list, complex detail, future listing pages. Mobile stacks; desktop becomes 355|1fr → 405|1fr. */ .ub-split { display: grid; grid-template-columns: 1fr; gap: var(--ub-space-3xl); } @media (max-width: 1023px) { .ub-split--sidebar-mobile-bottom > :first-child { order: 2; } .ub-split--sidebar-mobile-bottom > :nth-child(2) { order: 1; } } @media (min-width: 1024px) { .ub-split { grid-template-columns: 355px 1fr; gap: var(--ub-space-5xl); align-items: start; } } @media (min-width: 1280px) { .ub-split { grid-template-columns: 405px 1fr; } } /* Summary-on-right variant — used by cart/checkout where the main form keeps reading order on the left and a narrower sticky summary sits right. */ .ub-split--summary-right { grid-template-columns: 1fr; } @media (min-width: 1024px) { .ub-split--summary-right { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--ub-space-3xl); } } @media (min-width: 1280px) { .ub-split--summary-right { grid-template-columns: minmax(0, 1fr) 360px; } } /* Background utilities — apply on any element (section, hero, container) to override the white body default. */ .ub-bg-cream { background-color: var(--ub-color-section-cream); } /* Soft warm whisper — for alternating sections. */ .ub-bg-soft { background-color: var(--ub-color-section-soft); } /* Cool Apple-style surface — for product / feature sections. */ .ub-bg-cool { background-color: var(--ub-color-section-cool); } /* Dark hero / contrast section. */ .ub-bg-dark { background-color: var(--ub-color-section-dark); color: var(--ub-color-on-dark); } /* Decorative ornament — full-page хээ pattern overlay */ .ub-ornament { position: absolute; pointer-events: none; user-select: none; opacity: 0.1; z-index: 0; } /* Visually hidden but accessible to screen readers */ .ub-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }