/*========================= Table of Contents =========================*/ /* 32 bareBat — shared site components 142 NAV 236 SECTIONS 359 HERO 604 BUTTONS 681 INFORMATION 811 GALLERY 844 MUSIC + AGENDA 950 MOMENTS (Cerimônia/Festa — 2 cards, plain icon rows) 1130 GIFTS 1205 GIFT PIX MODAL 1479 FORMS (shared) 1562 DONATION 1711 RSVP 1750 MESSAGES 1820 FOOTER 1905 NAV — hamburger menu (medium screens and mobile) 1964 MOBILE */ /* CSS Layers — explicit precedence order, independent of file load order. See docs/frontend/css.md. */ @layer core, workspace, site, editor; @layer site { /*========================= bareBat — shared site components =========================*/ /* Scoped under .event-theme — colors from each theme's :root */ html { scroll-behavior: smooth; } /* templates/sites/layouts/base.html doesn't load core/reset.css — zero out only what's needed here (the body's default margin left a strip of the html's background color showing around everything). */ body { margin: 0; } .menu-logo { display: inline-flex; } .menu-logo img { width: 100px; height: auto; } /* `.icon` — used in ~15 public section templates (rsvp, donation, gallery, gifts, footer, etc.), but was only defined in core/components.css, which templates/sites/layouts/base.html does NOT load (only loads sites-base.css + theme). Result: every icon with this class fell back to Arial and showed the icon name as literal text on the real published site. Same definition as core/components.css. */ .event-theme .icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: "Material Symbols Rounded"; font-size: 1.25rem; line-height: 1; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; } .event-theme { background: var(--color-bg); color: var(--color-text); font-family: var( --font-family, "Inter", system-ui, -apple-system, sans-serif ); -webkit-font-smoothing: antialiased; line-height: 1.6; /* No `overflow-x: hidden` here — used to have it, but overflow-x != visible forces overflow-y to `auto` (the usual gotcha, see docs/frontend/css.md), and that alone was enough to break the nav's `position: sticky` on the real published site — even with nothing actually scrolling inside the body, just having overflow != visible on any ancestor already confuses sticky in several browsers. A fix for this only existed inside the editor (`.event-theme` with overflow-x:visible in @layer editor), which never reached the real public site (editor.css doesn't load there). We haven't found any element that genuinely needs this horizontal clipping today — if a specific overflow leak shows up, the fix is to scope overflow-x:hidden to that local element, not here on the whole body. */ /* Container query, not viewport (headings below scale with `cqw` instead of `vw`). `vw` is always relative to the whole window, so in the editor (where the canvas is narrower than the viewport because of the rail/panel) the text stayed at "full" size and wrapped with less room available. `cqw` resolves against the REAL width of the nearest container with container-type — works the same on the published site (canvas ≈ viewport) and adapts correctly inside the editor (narrower canvas). */ container-type: inline-size; /* Derived from --color-hero-bg / --color-text / --color-primary — computed once here (no longer recalculated in JS or in the override template). Since these are custom properties, they inherit from the theme's :root by default; declaring them here overrides that whenever --color-hero-bg (etc.) changes through any path — palette, manual tweak, or the theme itself. */ --nav-bg: color-mix( in srgb, var(--color-hero-bg, var(--color-bg)) 96%, transparent ); --hero-count-bg: color-mix( in srgb, var(--color-hero-bg, var(--color-bg)) 85%, transparent ); --color-text-secondary: color-mix( in srgb, var(--color-text) 65%, transparent ); --color-border: color-mix(in srgb, var(--color-text) 15%, transparent); --color-bg-glow: color-mix(in srgb, var(--color-primary) 12%, transparent); --color-primary-tint: color-mix( in srgb, var(--color-primary) 12%, transparent ); } .event-theme *, .event-theme *::before, .event-theme *::after { margin: 0; padding: 0; box-sizing: border-box; } /*========================= NAV =========================*/ .event-theme nav { position: sticky; top: 0; width: 100%; min-height: var(--c-nav-h); padding: 12px max(24px, 5%); display: flex; align-items: center; /* `center` on purpose — nav-links + nav-actions stay centered as a single group in the bar, not pinned to either edge. */ justify-content: center; /* `flex-wrap: wrap` + `align-content: center` — between ~960px and ~1020px `.nav-links` doesn't fit on one line and wraps internally (its own `flex-wrap`), but without this here the CTA (`.nav-actions`, a sibling item) had vertical `align-items: center` relative to the nav's WHOLE height — centered in the middle of the two link lines, floating disconnected instead of following the wrap. With `