andre/fitme3070.pt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(navbar): match head slash in the colour of the gym it links to

Browse Source
This commit is contained in:
andre committed 2026-10-26 12:03:30 +00:00
1 parent e7ab661f4c
commit 0bc14f5f72
2 files changed
+9 -10
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

CLAUDE.md
+1 -1
View File
@@ -79,7 +79,7 @@ Since 2026-09-25, one install serves several physical gyms: the `gyms` table, on
folder per gym (`/3070/`, `/<postal-code>/`), content rows carry `gym_id`, and the
backoffice has an "a editar" gym switcher (`admin_gym_id()` /
`admin_gym()` in `config/functions_gyms.php`). `/` and `/home` 301 to the default gym (`is_default`); the other published gyms appear as highlighted buttons (`.gym-switch-btn`) at the right end of the public navbar (`site/includes/navbar.php`). `site/gym_chooser.php` is no longer used.
Each gym has a brand colour (`gyms.brand_color`, `#RRGGBB`, migration `migration_20261013_gym_brand_color.sql`; gym 1 = green `#C2D500`, gym 2 = red): set in Gestão → Ginásios, emitted as `:root` overrides by `gym_brand_css()` in `site/includes/include.php`. New components must use `--fitme-accent*` / `--fitme-on-accent`, never a hard-coded colour; the CrossFit nav pill follows the brand colour too. The public navbar's bottom edge is an always-on, slow (14s) sweep in the brand colour (`.header-section::before/::after`, `nav-sweep`, static with reduced motion). On the home page and the CrossFit page (`$nav_center_logo` set in `site/index.php` / `site/crossfit.php`, shared by `_open.php`; the CrossFit video header no longer prints its own logo, only a `visually-hidden` h1) the header starts taller (desktop >= 992px) with a second, big copy of the logo centred (fixed 52px height, so tall logos like the CrossFit one clear the links) (`.navbar-brand-hero`, `aria-hidden`); once `scrollY >= 40` (script in `navbar.php` toggles `.is-top`) the bar shrinks, the big logo fades out and the 150px left logo fades in (opacity crossfade, no movement). The hero gets `padding-top: 120px` on desktop so its event card clears the tall bar. On desktop the brand is absolute at the left and the links are centred on the full bar width; nav padding and logo width live in CSS, not inline. The other-gym buttons (`.gym-switch`) sit in the **match head**, a glimpse into the other site: painted in the first other gym's brand (`navbar.php` puts `gym_brand_vars()` of `$other_gyms[0]` on `.gym-switch`), its accent as the face with a shadow inside the cut, a 5px strip in THIS site's accent on the slash (`--site-accent`, resolved on `.header-section` before the inline vars swap `--fitme-accent`), and its logo in that gym's on-accent ink (`brightness(0)`, plus `invert(1)` with `.gym-switch--light-ink` when the on-accent is white). Paint is shared; geometry per breakpoint: desktop = absolute block at the right end of the bar (full height, width follows its buttons), left side cut on the brand slash (22px); below 992px = a full-width band across the bottom of the open menu, top edge slashed (18px). 992-1199px: links shrink (`.8125rem`, `--bs-navbar-nav-link-padding-x: .35rem`) so the 3070 menu clears the logo and head. Menu links are `.875rem` bold. Below 992px the open menu fills the screen under the bar (absolute, `100dvh - var(--nav-h)`, `--nav-h` = the header's real height, set by the `navbar.php` script, links/buttons centred, opacity fade; not `position:fixed` because the header's backdrop-filter is its containing block). The bar is liquid glass in Chromium: `backdrop-filter: url(#nav-glass) blur(6px) saturate(180%)` (`#nav-glass` in `include.php`: blurred low-frequency `feTurbulence` -> `feDisplacementMap`, bends the page behind it), gated by `@supports (-webkit-app-region: drag)` (Chromium-only property); Safari/Firefox keep the plain blur. **Brand slash template:** the cut corners of the "in" box are one rule in `style.css` ("Brand slash (template)"): `class="fx-slash"` (both ends) or `fx-slash-start` (left only), size via `--slash` (default 4px); pseudo-elements are added to that rule's selector list. Used by the nav and section-title underlines and the CrossFit pill (`--slash: 8px`, no radius); never paste the polygon again. The hero h1 shadow is soft (`0 1px 3px .3`, `0 2px 18px .18`) and the hero frosted-band blur (`.hero-section .container::before`) is at opacity .8. The hero subtitle (`.hero-text h1 span`, gym `hero_subtitle`) is a block strapline at `.42em` of the h1, tracked out. Logos (`.navbar-brand img`, `.gym-switch-logo`) get the same `#pt-noise` grain filter as h1/h2, and `.hero-event-go`, `.cta-btn`, `.btn-primary` joined the `--noise` button list. Section-title underlines (`.section-title.deco h2:after`) use the same slashed 4px bar as the nav underline. The hero event button text uses `--fitme-on-accent` (white on red). The nav underline (`.nav-link:after`) is a 4px bar 3px under the text with slashed ends (`clip-path`, like the "in" box of the FitMe in logo). The hero event card (`.hero-event`) is square (no radius on card, badge or button), taller (88px min) and has a defocus gradient: `::after` is a `backdrop-filter: blur()` layer masked left->right, sharp on the left and most blurred on the right; the card itself must not get filter/backdrop-filter/opacity/mask or the blur stops reaching the hero photo. Each gym can have a `logo` (same migration, plus `migration_20261026_gym_logo.sql`: the column was added to the 2026-10-13 file after it had already run on dev, so dev had no `logo` column until 2026-10-26 — never edit a migration that has run, add a new one); the header image and the logo are uploaded in Gestão → Ginásios (`gyms_save_image()` → `uploads/gyms/`, validated by content, SVG through `svg_is_safe()`), not typed as paths; `db_gyms_create/update` skip `brand_color`/`logo` while the migration isnLine truncated
Each gym has a brand colour (`gyms.brand_color`, `#RRGGBB`, migration `migration_20261013_gym_brand_color.sql`; gym 1 = green `#C2D500`, gym 2 = red): set in Gestão → Ginásios, emitted as `:root` overrides by `gym_brand_css()` in `site/includes/include.php`. New components must use `--fitme-accent*` / `--fitme-on-accent`, never a hard-coded colour; the CrossFit nav pill follows the brand colour too. The public navbar's bottom edge is an always-on, slow (14s) sweep in the brand colour (`.header-section::before/::after`, `nav-sweep`, static with reduced motion). On the home page and the CrossFit page (`$nav_center_logo` set in `site/index.php` / `site/crossfit.php`, shared by `_open.php`; the CrossFit video header no longer prints its own logo, only a `visually-hidden` h1) the header starts taller (desktop >= 992px) with a second, big copy of the logo centred (fixed 52px height, so tall logos like the CrossFit one clear the links) (`.navbar-brand-hero`, `aria-hidden`); once `scrollY >= 40` (script in `navbar.php` toggles `.is-top`) the bar shrinks, the big logo fades out and the 150px left logo fades in (opacity crossfade, no movement). The hero gets `padding-top: 120px` on desktop so its event card clears the tall bar. On desktop the brand is absolute at the left and the links are centred on the full bar width; nav padding and logo width live in CSS, not inline. The other-gym buttons (`.gym-switch`) sit in the **match head**, a glimpse into the other site: painted in the first other gym's brand (`navbar.php` puts `gym_brand_vars()` of `$other_gyms[0]` on `.gym-switch`), a 5px strip in its accent on the slash, the face a shade darker (`--fitme-accent-dark` to 82% of it mixed with black) with a shadow inside the cut so the strip reads, and its logo in that gym's on-accent ink (`brightness(0)`, plus `invert(1)` with `.gym-switch--light-ink` when the on-accent is white). Paint is shared; geometry per breakpoint: desktop = absolute block at the right end of the bar (full height, width follows its buttons), left side cut on the brand slash (22px); below 992px = a full-width band across the bottom of the open menu, top edge slashed (18px). 992-1199px: links shrink (`.8125rem`, `--bs-navbar-nav-link-padding-x: .35rem`) so the 3070 menu clears the logo and head. Menu links are `.875rem` bold. Below 992px the open menu fills the screen under the bar (absolute, `100dvh - var(--nav-h)`, `--nav-h` = the header's real height, set by the `navbar.php` script, links/buttons centred, opacity fade; not `position:fixed` because the header's backdrop-filter is its containing block). The bar is liquid glass in Chromium: `backdrop-filter: url(#nav-glass) blur(6px) saturate(180%)` (`#nav-glass` in `include.php`: blurred low-frequency `feTurbulence` -> `feDisplacementMap`, bends the page behind it), gated by `@supports (-webkit-app-region: drag)` (Chromium-only property); Safari/Firefox keep the plain blur. **Brand slash template:** the cut corners of the "in" box are one rule in `style.css` ("Brand slash (template)"): `class="fx-slash"` (both ends) or `fx-slash-start` (left only), size via `--slash` (default 4px); pseudo-elements are added to that rule's selector list. Used by the nav and section-title underlines and the CrossFit pill (`--slash: 8px`, no radius); never paste the polygon again. The hero h1 shadow is soft (`0 1px 3px .3`, `0 2px 18px .18`) and the hero frosted-band blur (`.hero-section .container::before`) is at opacity .8. The hero subtitle (`.hero-text h1 span`, gym `hero_subtitle`) is a block strapline at `.42em` of the h1, tracked out. Logos (`.navbar-brand img`, `.gym-switch-logo`) get the same `#pt-noise` grain filter as h1/h2, and `.hero-event-go`, `.cta-btn`, `.btn-primary` joined the `--noise` button list. Section-title underlines (`.section-title.deco h2:after`) use the same slashed 4px bar as the nav underline. The hero event button text uses `--fitme-on-accent` (white on red). The nav underline (`.nav-link:after`) is a 4px bar 3px under the text with slashed ends (`clip-path`, like the "in" box of the FitMe in logo). The hero event card (`.hero-event`) is square (no radius on card, badge or button), taller (88px min) and has a defocus gradient: `::after` is a `backdrop-filter: blur()` layer masked left->right, sharp on the left and most blurred on the right; the card itself must not get filter/backdrop-filter/opacity/mask or the blur stops reaching the hero photo. Each gym can have a `logo` (same migration, plus `migration_20261026_gym_logo.sql`: the column was added to the 2026-10-13 file after it had already run on dev, so dev had no `logo` column until 2026-10-26 — never edit a migration that has run, add a new one); the header image and the logo are uploaded in Gestão → Ginásios (`gyms_save_image()` → `uploads/gyms/`, validated by content, SVG through `svg_is_safe()`), not typed as paths; `db_gyms_create/update` skip `brand_color`/`logo` while the migration isn't applied (`_gyms_cols()`);Line truncated
An unpublished gym 404s publicly but previews for staff.
## Imagens / JPEG XL (2026-10-26)
site/assets/css/style.css
+8 -9
View File
@@ -635,11 +635,10 @@ section[id] {
}
.navbar-brand-hero { display: none; }
/* Match head paint, shared by the desktop bar end and the mobile menu band
(geometry per breakpoint below): the OTHER gym's accent as the face, a strip
in THIS site's accent on the slashed edge, its logo in that gym's on-accent
ink. --site-accent is resolved on the header, before .gym-switch's inline
vars swap --fitme-accent for the other gym's. */
.header-section { --site-accent: var(--fitme-accent); }
(geometry per breakpoint below): everything in the OTHER gym's brand (its
vars are inline on .gym-switch): a strip in its accent on the slashed edge,
a face a shade darker so the strip reads, its logo in that gym's on-accent
ink. */
.header-section .gym-switch::before,
.header-section .gym-switch::after {
content: '';
@@ -648,7 +647,7 @@ section[id] {
z-index: -1;
pointer-events: none;
}
.header-section .gym-switch::before { background: var(--site-accent); }
.header-section .gym-switch::before { background: var(--fitme-accent); }
/* the logo in that gym's on-accent ink (dark on lime, white on red) */
.header-section .gym-switch .gym-switch-btn--logo .gym-switch-logo {
filter: url(#pt-noise) brightness(0) drop-shadow(0 1px 0 rgba(255, 255, 255, .25));
@@ -698,7 +697,7 @@ section[id] {
button, its left side cut on the same slash as the underlines (the bar is
the matchstick, this is the head). It is painted in the OTHER gym's brand
(navbar.php puts its vars on .gym-switch), a glimpse into that site: its
accent as the face, a strip in this site's accent on the cut and a shadow just inside it.
accent strip on the cut, a face a shade darker and a shadow just inside it.
::before = strip, ::after = head. */
.header-section .gym-switch {
--slash: 22px;
@@ -718,7 +717,7 @@ section[id] {
.header-section .gym-switch::after {
background:
radial-gradient(70% 90% at 10% 50%, rgba(0, 0, 0, .28), transparent 70%),
linear-gradient(180deg, var(--fitme-accent), var(--fitme-accent-dark));
linear-gradient(180deg, var(--fitme-accent-dark), color-mix(in srgb, var(--fitme-accent-dark) 82%, #000));
}
.header-section.is-top .navbar-brand { opacity: 0; visibility: hidden; }
.header-section.is-top .navbar-brand-hero { opacity: 1; visibility: visible; }
@@ -772,7 +771,7 @@ section[id] {
.header-section .gym-switch::after {
background:
radial-gradient(90% 80% at 50% 0, rgba(0, 0, 0, .28), transparent 70%),
linear-gradient(180deg, var(--fitme-accent), var(--fitme-accent-dark));
linear-gradient(180deg, var(--fitme-accent-dark), color-mix(in srgb, var(--fitme-accent-dark) 82%, #000));
}
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {