/* * GREEN BADGER — responsive shell foundation (Phase 1). * * A NEW layer, loaded after sections.css. It adds nothing to and removes * nothing from the existing section breakpoints: every rule here is either a * custom property, or scoped to markup that only this file's PHP renders * (.dm-app-bar / .dm-app-nav / .dm-sheet), or lives inside the app-shell * capability query where the desktop design is not in play at all. * * Migrating individual sections onto the tokens below is later work. */ /* ------------------------------------------------------------ tokens */ body.dm-pack-green-badger { /* Brand, unchanged from the v3 system — restated here so the shell does not have to reach into a section stylesheet for them. */ --dm-black: #0b0b0a; --dm-gold: #b89a5b; --dm-cream: #f4f1e8; /* The registration margin invariant: never 0 at any width. The mobile shell's horizontal gutter is the same measure, so chrome and content register against one edge. */ --margin: clamp(16px, 4vw, 96px); --gutter: var(--margin); /* The only four structural breakpoints this system introduces: 768 / 1024 / 1280 / 1600. Recorded as values so future work can read them rather than re-guess. */ --dm-bp-sm: 768px; --dm-bp-md: 1024px; --dm-bp-lg: 1280px; --dm-bp-xl: 1600px; --dm-appbar-h: 56px; --dm-appbar-h-compact: 48px; --dm-appnav-h: 56px; --dm-tap: 44px; /* The announcement is the first band of the fixed top chrome, so its height has to be a number the shell can reserve. 0 unless one is actually rendered — see the :has() rules below. */ --dm-announce-h: 0px; /* WordPress owns the admin bar; the shell only has to start below it. The fixed chrome cannot inherit html's margin-top, so the offset is restated here at the two heights WP itself uses. */ --dm-admin-offset: 0px; --dm-safe-top: env(safe-area-inset-top, 0px); --dm-safe-bottom: env(safe-area-inset-bottom, 0px); --dm-safe-left: env(safe-area-inset-left, 0px); --dm-safe-right: env(safe-area-inset-right, 0px); --dm-hairline: rgba(184, 154, 91, .28); --dm-scrim: rgba(11, 11, 10, .72); } body.dm-pack-green-badger:has(.dm-header-announcement) { --dm-announce-h: var(--dm-header-announcement-height, 36px); } /* Dismissed, or hidden by the pack's own mobile switch: the band is gone, so the reservation has to go with it or the gap comes back as dead space. */ body.dm-pack-green-badger:has(.dm-header-announcement.is-dismissed) { --dm-announce-h: 0px; } @media (max-width: 921px) { body.dm-header-announcement-mobile-hidden.dm-pack-green-badger { --dm-announce-h: 0px; } } body.admin-bar.dm-pack-green-badger { --dm-admin-offset: 32px; } @media (max-width: 782px) { body.admin-bar.dm-pack-green-badger { --dm-admin-offset: 46px; } } /* At 600px WP core stops fixing the admin bar (#wpadminbar goes position:absolute and scrolls away with the page), so a constant offset would leave a 46px orphan band once it has scrolled off. Below 600px the chrome is sticky in real flow (see the ≤600px block further down) and needs no reservation at all. */ @media (max-width: 600px) { body.admin-bar.dm-pack-green-badger { --dm-admin-offset: 0px; } } /* ------------------------------------------------------- shell switch * * Both chromes are always in the DOM — server-rendered, no UA sniffing — and * CSS alone decides which one a device sees. Width and pointer BOTH have to * agree: a coarse pointer at 1024px+ (tablet in landscape) is a desktop-chrome * device, and a fine pointer in a narrow window never gets a bottom nav. */ .dm-app-bar, .dm-app-nav { display: none; } @media (max-width: 1023px) { body.dm-pack-green-badger .dm-app-bar { display: flex; } /* Grid, not flex — .dm-app-nav's own rule (below) reserves the GUIDE button's centre column; this higher-specificity switch has to agree with it or the four real tabs collapse to content width. */ body.dm-pack-green-badger .dm-app-nav { display: grid; } /* The desktop header is the other half of the switch. Astra renders its own mobile header inside this element; the app bar replaces it. */ body.dm-pack-green-badger .site-header, body.dm-pack-green-badger #masthead { display: none; } /* Two other plugins already fix a bar to the bottom of a phone: the generic chrome-extras tab bar and Fruitera's mobile nav. All three are the same idea, and only one of them may exist — under this pack it is the app nav. */ body.dm-pack-green-badger .dm-tabbar { display: none; } /* Fruitera declares its bar `display:grid !important`, so nothing but `!important` can retire it. This is the one place in this file that needs it, and it is a suppression of foreign markup rather than a style of our own that had to shout to be heard. */ body.dm-pack-green-badger .fr-mobile-app-nav { display: none !important; } /* The announcement joins the fixed top chrome instead of standing in flow. * * In flow it was the first child of , so the reservation body makes * for the fixed app bar was inserted ABOVE it — the announcement started * one whole bar-height down from the top (or from the admin bar), which is * the gap. Out of flow there is nothing above it to reserve against: the * band sits at the top, the app bar sits directly under it, and body * reserves the two together. */ body.dm-pack-green-badger .dm-header-announcement { position: fixed; inset: calc(var(--dm-admin-offset) + var(--dm-safe-top)) 0 auto 0; /* Its own 9991 would put it over the bottom sheet (1000). Inside the shell it only ever has to clear the app bar. */ z-index: 901; } body.dm-pack-green-badger .dm-app-bar { top: calc(var(--dm-admin-offset) + var(--dm-safe-top) + var(--dm-announce-h)); } /* The app bar carries the safe-area inset itself when it is the topmost band. With an announcement above it, that band belongs to the announcement — the bar would otherwise reserve the notch a second time. */ body.dm-pack-green-badger:has(.dm-header-announcement:not(.is-dismissed)) .dm-app-bar { height: var(--dm-appbar-h); padding-top: 0; } body.dm-pack-green-badger:has(.dm-header-announcement:not(.is-dismissed)) .dm-app-bar.is-compact { height: var(--dm-appbar-h-compact); } body.dm-pack-green-badger { padding-top: calc(var(--dm-announce-h) + var(--dm-appbar-h) + var(--dm-safe-top)); padding-bottom: calc(var(--dm-appnav-h) + var(--dm-safe-bottom)); } } /* ≤600px: nothing may pin to an admin-bar constant, because WP's own bar is * absolute here and scrolls away. The whole top chrome — announcement + app * bar, wrapped by .dm-app-chrome in the PHP — is ONE sticky flow element: * at scroll 0 it sits naturally below the in-flow admin bar, and once that * bar scrolls off the wrapper pins itself to y=0. Logged-out is the same * code path with the admin bar simply absent from the flow. */ @media (max-width: 600px) { body.dm-pack-green-badger .dm-app-chrome { position: sticky; top: 0; z-index: 901; } body.dm-pack-green-badger .dm-header-announcement { position: relative; inset: auto; } body.dm-pack-green-badger .dm-app-bar { /* Relative, not static: geometrically identical inside the sticky wrapper, but gives the transparent-at-top ::after panel (further down) a box to fill. The fixed-mode top offset (announcement rule above) would otherwise apply as a relative shift — neutralise it. */ position: relative; top: auto; } /* The sticky wrapper occupies its own real flow space, so a computed reservation on top of it would double-count. The bottom nav is still fixed and keeps its reservation. */ body.dm-pack-green-badger { padding-top: 0; } } /* ------------------------------------------------------------ top bar * * Never hides. It only compresses, so the brand mark is on screen at every * scroll position. */ .dm-app-bar { position: fixed; inset: 0 0 auto 0; z-index: 900; align-items: center; gap: 8px; height: calc(var(--dm-appbar-h) + var(--dm-safe-top)); padding: var(--dm-safe-top) calc(var(--gutter) + var(--dm-safe-right)) 0 calc(var(--gutter) + var(--dm-safe-left)); background: var(--dm-black); border-bottom: 1px solid transparent; transition: height 220ms ease, border-color 220ms ease; } .dm-app-bar.is-compact { height: calc(var(--dm-appbar-h-compact) + var(--dm-safe-top)); border-bottom-color: var(--dm-hairline); } .dm-app-bar__brand { display: flex; align-items: center; margin-right: auto; min-height: var(--dm-tap); color: var(--dm-cream); text-decoration: none; } /* The theme and the Fruitera skin both size site logos by their own selectors, and either would win over a plain descendant rule here — so the app bar's mark is sized from the bar itself, which owns the only height that matters. */ body.dm-pack-green-badger .dm-app-bar__brand img, body.dm-pack-green-badger .dm-app-bar__brand svg { display: block; /* Both dimensions are stated. `width:auto` would be the natural way to keep the mark's aspect, but a global `aspect-ratio` further up the cascade collapsed it to a square — `object-fit` restores the true proportions inside a box this file controls outright. */ width: 132px; height: 28px; object-fit: contain; object-position: left center; transition: height 220ms ease; } body.dm-pack-green-badger .dm-app-bar.is-compact .dm-app-bar__brand img, body.dm-pack-green-badger .dm-app-bar.is-compact .dm-app-bar__brand svg { height: 22px; } .dm-app-bar__brand-text { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; letter-spacing: .12em; text-transform: uppercase; } .dm-app-bar__action { position: relative; display: flex; flex: 0 0 var(--dm-tap); align-items: center; justify-content: center; width: var(--dm-tap); height: var(--dm-tap); padding: 0; border: 0; border-radius: 0; background: none; color: var(--dm-cream); text-decoration: none; cursor: pointer; } .dm-app-bar__action .dm-ic { width: 21px; height: 21px; } .dm-app-bar__count { position: absolute; top: 6px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--dm-gold); color: var(--dm-black); font-family: 'Noto Sans JP', system-ui, sans-serif; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } .dm-app-bar__count[data-dm-count="0"] { display: none; } /* ---- Transparent at page top, settled after ~160px of scroll ---------- * * Same mechanism as the desktop header (sections.css, gb-header-settle): * at scroll 0 the bar paints only a soft scrim (::before) so the hero art * shows through, and the solid panel (::after) is faded in by a CSS * scroll-driven animation across the first 160px. No script, no second * scroll listener — the compress-on-scroll JS keeps toggling .is-compact * independently and the two never touch the same property. * * The bar's flat paint is owned by chrome-inversion.css (--dm-bar-bg, * loaded after this file), so two things compose with it here: the * transparent override needs the .dm-app-chrome ancestor to outrank it, * and the settle panel paints var(--dm-bar-bg) — with the same * --dm-chrome-shift transition — so the cream inversion keeps working, * just one layer down. Keyframes are duplicated locally rather than * reusing gb-header-settle so this file stays standalone. */ @keyframes dm-appbar-settle { from { opacity: 0; } to { opacity: 1; } } @keyframes dm-appbar-scrim-lift { from { opacity: 1; } to { opacity: 0; } } @media (max-width: 1023px) { body.dm-pack-green-badger .dm-app-chrome .dm-app-bar { background: transparent; } /* Top-of-page scrim: keeps the brand mark and icons readable over the hero art. Fades out as the settle panel fades in. */ body.dm-pack-green-badger .dm-app-bar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 9, 7, .55) 0%, rgba(7, 9, 7, .2) 100%); opacity: 1; pointer-events: none; } body.dm-pack-green-badger .dm-app-bar::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--dm-bar-bg, var(--dm-black)); opacity: 0; pointer-events: none; transition: background-color var(--dm-chrome-shift, 280ms) ease; } @supports (animation-timeline: scroll()) { body.dm-pack-green-badger .dm-app-bar::before { animation: dm-appbar-scrim-lift linear both; animation-timeline: scroll(root); animation-range: 0 160px; } body.dm-pack-green-badger .dm-app-bar::after { animation: dm-appbar-settle linear both; animation-timeline: scroll(root); animation-range: 0 160px; } } /* Engines without scroll-driven animations get one settled bar — the resting state is the readable one, matching the desktop fallback. */ @supports not (animation-timeline: scroll()) { body.dm-pack-green-badger .dm-app-bar::before { opacity: 0; } body.dm-pack-green-badger .dm-app-bar::after { opacity: 1; } } @media (prefers-reduced-motion: reduce) { body.dm-pack-green-badger .dm-app-bar::before { animation: none; opacity: 0; } body.dm-pack-green-badger .dm-app-bar::after { animation: none; opacity: 1; } } } /* --------------------------------------------------------- bottom nav */ .dm-app-nav { position: fixed; inset: auto 0 0 0; z-index: 900; /* display is set only inside the pointer:coarse switch further up — this rule must NOT declare it, or it would win over that switch's `display:none` on a fine-pointer/desktop viewport regardless of source order (same specificity, this rule comes later). */ /* 5 columns, not 4: the middle one is a dedicated, permanently empty gap the GUIDE button sits over (green-badger-nav-guide.css) — the four real tabs live in columns 1, 2, 4, 5 and never share a column with it. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 74px minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; height: calc(var(--dm-appnav-h) + var(--dm-safe-bottom)); padding: 0 var(--dm-safe-right) var(--dm-safe-bottom) var(--dm-safe-left); background: var(--dm-black); border-top: 1px solid var(--dm-hairline); } /* The active indicator is one grid item that jumps to the active tab's own column — width and position both come for free from the grid instead of a translateX/percentage calc that assumed four equal-width flex columns. */ .dm-app-nav::before { content: ""; grid-column: var(--dm-nav-active-col, 1); grid-row: 1; align-self: start; height: 2px; background: var(--dm-gold); } .dm-app-nav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; color: rgba(244, 241, 232, .5); text-decoration: none; /* The Stamp slot is a