george/floatingflows
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile fixes: hero top spacing, drawer logo color, video poster fallback (iOS autoplay-blocked)

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
George Turkington
2026-06-17 13:36:25 +02:00
parent 2e33398d1f
commit 8e6f3fc49a
2 changed files with 23 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+12
View File
@@ -197,11 +197,23 @@ body.menu-open .drawer { transform: translateY(0); opacity: 1; pointer-events: a
.brand__icon { width: 42px; height: 42px; }
.brand__name { display: flex; flex-direction: column; font-size: 0.95rem; line-height: 1.05; letter-spacing: 0.13em; font-weight: 700; white-space: nowrap; }
.brand__name b { display: block; font-weight: 700; }
/* Push the hero's top cluster down, clear of the nav, with breathing room between lines */
.hero__grid { padding-top: clamp(5rem, 14vh, 7.5rem); }
.hero__eyebrow { margin-bottom: var(--space-xs); }
.hero h1 { margin-top: var(--space-xl); }
/* Over the dark hero video (nav transparent) — light + legible */
.nav:not(.nav--solid) .brand__name { color: var(--color-shell); text-shadow: 0 1px 14px oklch(18% 0.02 54 / 0.6); }
.nav:not(.nav--solid) .brand__name b { color: var(--color-accent-soft); }
.nav:not(.nav--solid) .brand__icon { filter: drop-shadow(0 1px 7px oklch(18% 0.02 54 / 0.6)); }
.nav:not(.nav--solid) .nav__toggle span { background: var(--color-shell); box-shadow: 0 1px 7px oklch(18% 0.02 54 / 0.5); }
/* Menu open: drawer is light cream, so the logo + close icon must be dark (kill the over-video white/shadow) */
body.menu-open .brand__name { color: var(--color-ink) !important; text-shadow: none !important; }
body.menu-open .brand__name b { color: var(--color-accent-deep) !important; }
body.menu-open .brand__icon { filter: none !important; }
body.menu-open .nav__toggle span { background: var(--color-ink) !important; box-shadow: none !important; }
}
/* ============ Contact / social icon buttons ============ */