From bfbd04a2d39f0bf64bf5d74c7808aa352b8ba98f Mon Sep 17 00:00:00 2001 From: andre Date: Mon, 26 Oct 2026 11:23:28 +0000 Subject: [PATCH] feat(site): centred home logo that docks on scroll, slashed nav underline, square defocused hero event --- site/_open.php | 3 +- site/assets/css/style.css | 69 +++++++++++++++++++++++++++++---------- site/includes/navbar.php | 17 ++++++++-- site/index.php | 1 + 4 files changed, 68 insertions(+), 22 deletions(-) diff --git a/site/_open.php b/site/_open.php index 166b668..7861c64 100644 --- a/site/_open.php +++ b/site/_open.php @@ -16,7 +16,8 @@ $GLOBALS['_gym'] = $gym; $info = site_info($pdo, (int) $gym['id']); $navbar = site_navbar($gym); $current_uri_2 = $current_uri_2 ?? ''; -$GLOBALS['_view_shared'] = compact('info', 'navbar', 'current_uri_2', 'gym'); +$nav_center_logo = $nav_center_logo ?? false; // index.php: big centred logo (navbar.php) +$GLOBALS['_view_shared'] = compact('info', 'navbar', 'current_uri_2', 'gym', 'nav_center_logo'); echo view('include'); // renders view('seo') inside echo view('navbar'); diff --git a/site/assets/css/style.css b/site/assets/css/style.css index 7021fec..c1c45c6 100644 --- a/site/assets/css/style.css +++ b/site/assets/css/style.css @@ -365,14 +365,17 @@ section[id] { position: relative; } +/* Underline: a short bar with slashed ends (top-left and bottom-right cut, like + the "in" box of the FitMe in logo), tucked right under the text. */ .nav-link:after { content: ''; position: absolute; - bottom: -2px; - left: 0; - width: 100%; - height: 2px; + bottom: 3px; + left: var(--bs-navbar-nav-link-padding-x, .5rem); + right: var(--bs-navbar-nav-link-padding-x, .5rem); + height: 4px; background: var(--fitme-accent); + clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); transform: scaleX(0); transform-origin: left; transition: transform var(--fitme-transition); @@ -590,6 +593,25 @@ section[id] { to { background-position: 150% 0; } } +/* Brand logo: 150px in the bar. On the home page (.has-center-logo) it starts + bigger on its own centred row (.is-top) and docks back on scroll (navbar.php). */ +.navbar-brand img { + width: 150px; + height: auto; + transition: width .35s ease; +} +@media (min-width: 992px) { + .header-section.is-top .navbar { flex-wrap: wrap; } + .header-section.is-top .navbar-brand { + flex: 0 0 100%; + display: flex; + justify-content: center; + margin: 0; + padding: 14px 1rem 0 0; /* 1rem offsets the nav's left padding: true centre */ + } + .header-section.is-top .navbar-brand img { width: 240px; } +} + @media (prefers-reduced-motion: reduce) { .header-section::before, .header-section::after { animation: none; } } @@ -3247,19 +3269,33 @@ h3.contact-title { align-items: center; gap: 16px; width: min(640px, 92vw); - padding: 12px 14px 12px 18px; - background: rgba(11, 11, 13, .55); + min-height: 88px; + padding: 18px 18px 18px 22px; + background: linear-gradient(90deg, rgba(11, 11, 13, .62), rgba(11, 11, 13, .42)); border: 1.5px solid rgba(var(--fitme-accent-rgb), .55); - border-radius: 999px; - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); text-decoration: none; text-align: left; animation: hero-event-glow 2.8s ease-in-out infinite; transition: transform var(--fitme-transition), box-shadow var(--fitme-transition), border-color var(--fitme-transition); } -/* The event's own image as a frosted (blurred + darkened) backdrop inside the - pill — only when --ev-img is set; otherwise the translucent dark bg shows. */ +/* Defocus gradient: ::after blurs whatever is behind it (the event image in + ::before, or the hero photo through the translucent bg), masked so the left is + sharp and the right most out of focus. .hero-event itself must not get + filter/backdrop-filter/opacity/mask, or it becomes the backdrop root and the + blur stops reaching the hero photo. */ +.hero-event::after { + content: ''; + position: absolute; + inset: 0; + z-index: 0; + pointer-events: none; + -webkit-backdrop-filter: blur(14px); + backdrop-filter: blur(14px); + -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 90%); + mask-image: linear-gradient(90deg, transparent 10%, #000 90%); +} +/* The event's own image as a darkened backdrop inside the card, only when + --ev-img is set; otherwise the translucent dark bg shows. */ .hero-event.has-img::before { content: ''; position: absolute; @@ -3268,11 +3304,11 @@ h3.contact-title { background-image: var(--ev-img); background-size: cover; background-position: center; - filter: blur(6px) saturate(1.15) brightness(.5); - transform: scale(1.18); /* hide the blur's transparent edges */ + filter: saturate(1.15) brightness(.5); + transform: scale(1.04); transition: transform var(--fitme-transition); } -.hero-event.has-img:hover::before { transform: scale(1.24); } +.hero-event.has-img:hover::before { transform: scale(1.1); } /* Keep the content above the image layer. */ .hero-event > * { position: relative; z-index: 1; } @keyframes hero-event-glow { @@ -3296,7 +3332,6 @@ h3.contact-title { text-transform: uppercase; color: var(--fitme-accent); background: rgba(var(--fitme-accent-rgb), .14); - border-radius: 999px; } .hero-event-text { flex: 1 1 auto; @@ -3331,7 +3366,6 @@ h3.contact-title { white-space: nowrap; color: var(--fitme-dark); background: var(--ev-accent); - border-radius: 999px; } .hero-event-go i { transition: transform var(--fitme-transition); } .hero-event:hover .hero-event-go i { transform: translateX(4px); } @@ -3341,9 +3375,8 @@ h3.contact-title { flex-wrap: wrap; justify-content: center; text-align: center; - border-radius: 18px; gap: 10px; - padding: 14px; + padding: 18px 14px; } .hero-event-text { flex-basis: 100%; align-items: center; } .hero-event-title, .hero-event-sub { white-space: normal; } diff --git a/site/includes/navbar.php b/site/includes/navbar.php index f29e0d7..defa519 100644 --- a/site/includes/navbar.php +++ b/site/includes/navbar.php @@ -9,14 +9,17 @@ else } $logo = base_url($logo_rel); $logo_dims = svg_img_dims_attr(dirname(__DIR__, 2) . '/' . $logo_rel); +// Home page: the logo starts big and centred over the hero (.is-top) and docks +// back to the left of the bar once the page scrolls (script below). +$center_logo = !empty($nav_center_logo); ?> -
+