/* ========================================================================== Our Gallery - collection pages (/our-gallery//) ========================================================================== Shared layout for the five collection story pages. The CONTENT lives in each page's own _elementor_data (built by deploy-our-gallery/); everything here targets the generic .mm-gc-* classes that build emits, so this file is deployed once and is not touched again per collection. Loaded only on those pages - see mm-gallery-collection.php. TWO BREAKPOINT SYSTEMS, DELIBERATELY Page layout 1024 / 767 - what the sibling .mm-gal-* mosaic block uses. The landing page and these pages are one visual set and must break together. Sticky bar 921 / 544 - Astra's own values, copied verbatim at the bottom of this file. "Matching the product page" means matching where it reflows, too. TYPOGRAPHY: no font-family is set ANYWHERE in this file, on purpose. Astra sets Lato for body and h1-h6 site-wide, so inheriting guarantees Lato by construction and it cannot drift. Only size, weight, tracking and case are set here. Per-model colour and focus tokens are injected as custom properties on by the loader, from postmeta. Defaults below keep the page sane if a meta is ever missing. HOW COLUMN WIDTHS ARE SET. Never with the `flex` shorthand - Elementor ships .e-con.e-flex { --flex-basis:auto; --flex-grow:0; --flex-shrink:1; flex: var(--flex-grow) var(--flex-shrink) var(--flex-basis) } at specificity (0,2,0). Feed ITS variables instead - --flex-basis / --flex-grow / --flex-shrink, and --flex-direction for row vs column - and Elementor's own `flex` shorthand does the work, which also means the values still read correctly in the Elementor editor. Custom properties cascade like any other declaration, so a bare `.mm-gc-editorial { --flex-direction: row }` at (0,1,0) STILL loses to that rule. Every selector below that sets one of those four variables is therefore qualified `.e-con.e-flex...`, giving (0,3,0) - deterministic, rather than a (0,2,0) tie decided by enqueue order. Knock-on: once a base rule is qualified, ANY modifier of it must carry the same qualifier or it silently stops applying - `.mm-gc-cap-cell:first-child` at (0,2,0) lost to `.e-con.e-flex.mm-gc-cap-cell` at (0,3,0), which put a divider back on the first capability column. If you add a modifier here, qualify it. FONT WEIGHTS. This site loads Lato in 100, 400 and 700 ONLY (Astra's enqueue: family=Lato:400,100,700). Ask for 300 and the browser snaps to 100 - Lato Thin - which is why a display headline can render as a ghost. Use 400 or 700 here, nothing else. ========================================================================== */ body.mm-gc-page { --mm-gc-bg: #F5F1E8; --mm-gc-accent: #977E55; --mm-gc-accent-ink: #756242; --mm-gc-tint: #DDE6EB; --mm-gc-focus-hero: 50% 50%; --mm-gc-focus-worn: 50% 50%; --mm-gc-focus-signature: 50% 50%; --mm-gc-ink: #16161A; --mm-gc-muted: #6B6B72; --mm-gc-radius: 12px; --mm-gc-gap: 92px; background-color: var(--mm-gc-bg); } /* Astra's boxed article card would paint white over the page ground and add its own padding. The deploy script sets this page's Astra layout meta to page-builder / full-width-container, which is the real fix; these two rules are the belt-and-braces so the page still reads correctly if that meta is ever cleared from the admin. */ .mm-gc-page .ast-separate-container .ast-article-single, .mm-gc-page .ast-separate-container .site-content > .ast-container { background: transparent; padding: 0; box-shadow: none; } /* Width is NOT set here. Elementor already owns it: :is(.elementor-section-wrap,[data-elementor-id])>.e-con { max-width: min(100%, var(--width)) } at (0,2,0), which outranks a plain .mm-gc-root rule. The build sets the container's real Elementor Width setting instead, so the cap stays editable in Layout > Width. */ .mm-gc-root { width: 100%; color: var(--mm-gc-ink); /* Page padding is NOT set here - it is the root container's own Elementor Padding control, set by the build, so it stays adjustable in the editor and does not fight Elementor's own .e-con-full rule at equal specificity. See build_collection_page.py. */ } /* Every section is a flex container; Elementor's own 20px --widgets-spacing is additive on top of child widths and silently wraps the last item onto its own line. The build zeroes it too (so the editor preview matches), but belt-and-braces here. */ .mm-gc-root > .e-con { gap: 0 !important; } .mm-gc-root > .e-con + .e-con { margin-top: var(--mm-gc-gap); } /* Shared eyebrow treatment: every small uppercase label on the page. Reached structurally - a css_classes on a widget is silently dropped by Elementor, so these are "the span-tag heading directly inside section X". */ .mm-gc-crumb .elementor-widget-heading span.elementor-heading-title, .mm-gc-purpose > .elementor-widget-heading span.elementor-heading-title, .mm-gc-capability > .elementor-widget-heading span.elementor-heading-title, .mm-gc-ed > .elementor-widget-heading span.elementor-heading-title, .mm-gc-next-body > .elementor-widget-heading:first-child span.elementor-heading-title { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; line-height: 1.5; } /* --- 00 breadcrumb ------------------------------------------------------- */ .e-con.e-flex.mm-gc-crumb { --flex-direction: row; align-items: baseline; flex-wrap: wrap; padding: 0 !important; } /* The breadcrumb is a LABEL for the page, not a section of it, so it must not take the full inter-section gap. Left to the generic rule above it collected var(--mm-gc-gap) - 92px - plus its own margin, and read as an orphan stranded above the hero. Qualified with `.mm-gc-root >` so it beats that rule outright at (0,3,0) instead of tying at (0,2,0) and being decided by enqueue order. */ .mm-gc-root > .mm-gc-crumb + .e-con { margin-top: 22px; } .mm-gc-crumb .elementor-widget-heading { width: auto !important; } .mm-gc-crumb .elementor-widget-heading span.elementor-heading-title { color: var(--mm-gc-muted); font-weight: 500; } /* The model name carries the weight - it is where you are. "GALLERY" stays quiet, because it is only the way back. */ .mm-gc-crumb .elementor-widget-heading:last-child span.elementor-heading-title { color: var(--mm-gc-ink); font-weight: 700; } .mm-gc-crumb .elementor-widget-heading a { color: inherit; text-decoration: none; } .mm-gc-crumb .elementor-widget-heading a:hover, .mm-gc-crumb .elementor-widget-heading a:focus-visible { color: var(--mm-gc-accent-ink); } /* Separator as CSS, so retyping either label in Elementor cannot lose it. Margins rather than spaces inside content: HTML collapses whitespace between inline elements, which rendered "GALLERY /MIRAGE". */ .mm-gc-crumb .elementor-widget-heading:first-child span.elementor-heading-title::after { content: "/"; margin: 0 0.45em; color: var(--mm-gc-muted); } /* --- 01 campaign hero ---------------------------------------------------- */ .mm-gc-hero { position: relative; border-radius: var(--mm-gc-radius); overflow: hidden; padding: 0 !important; /* So the scroll cue's glyph can scale with the HERO's width rather than the viewport's - the hero is capped at 1120px, so vw would drift. */ container-type: inline-size; } .mm-gc-hero > .elementor-widget-image { width: 100%; } .mm-gc-hero > .elementor-widget-image .elementor-widget-container, .mm-gc-hero > .elementor-widget-image figure, .mm-gc-hero > .elementor-widget-image a { display: block; margin: 0; } .mm-gc-hero > .elementor-widget-image img { display: block; width: 100%; height: auto; /* No fixed height, ever. A fixed height against a fixed source ratio makes the crop change AXIS with viewport width - the "shrinking crop window" that cost four rounds of hand-tuned object-position on the home hero. aspect-ratio + object-fit keeps the crop stable at every width. */ /* --mm-gc-ar-desktop is written onto the by the mu-plugin from the attachment's REAL dimensions, so on desktop the hero is never cropped - it is exactly the shape of whatever artwork is there. The supplied crops are 2.91:1 because they stop above the campaign title the mockup had painted in; drop in a taller text-free photograph and the band grows to match, with no CSS change. 2.18 is only a fallback. */ aspect-ratio: var(--mm-gc-ar-desktop, 2.18); object-fit: cover; object-position: var(--mm-gc-focus-hero); } /* A