feat(phase-1): Premium design system, CapitoliumPreloader, IndexSectionIndicator, Recipe Showcase Stage
- Full CSS rewrite: Warm Ivory/Gold/Steinkohle design tokens, Floema grid, easing library - AuraMarbleBackground: fixed grain texture layer - CapitoliumPreloader: fullscreen counter animation with slide-up exit - LiquidOverlayMenu: fixed hamburger → fullscreen clip-path overlay with SlideUpTextHover nav links - IndexSectionIndicator: fixed left-side section tracker with animated fill line - Recipe Showcase Stage: GSAP ScrollTrigger pinned stage (images enter from right, exit left) with parallax inner-image effect, intro title, progress dots, hint line - LenisSmoothScroll: CDN integration synced with GSAP ticker - CapitoliumRevealButton: scaleY fill reveal on hover for all CTAs - SlideUpTextHover: overlay nav links - UnderlineExpandHover: footer + overlay footer links - head.php: GSAP 3.12.5 + ScrollTrigger + Lenis 1.0.42 CDN; Playfair Display + Manrope fonts - recipe.php: updated to new design system (btn-reveal, pill--gold, Lenis init) - impressum.php / datenschutz.php: migrated to shared head.php partial
This commit is contained in:
+108
-27
@@ -1,32 +1,113 @@
|
||||
<header class="site-header">
|
||||
<div class="site-header__top">
|
||||
<a class="logo" href="/index.php<?php echo $lang === 'de' ? '?lang=de' : ''; ?>">
|
||||
<img class="logo--light" src="/assets/logo-white.png" alt="FlixCooks">
|
||||
<img class="logo--dark" src="/assets/logo-black.png" alt="FlixCooks">
|
||||
</a>
|
||||
<div class="header-actions">
|
||||
<a class="lang-toggle" href="<?php echo e($langSwitchHref ?? '#'); ?>"><?php echo e($langSwitchLabel ?? 'DE/EN'); ?></a>
|
||||
<button class="menu-toggle" type="button" aria-expanded="false" aria-controls="siteNav">
|
||||
<span class="menu-toggle__icon" aria-hidden="true">☰</span>
|
||||
<span class="menu-toggle__label"><?php echo $lang === 'de' ? 'Menü' : 'Menu'; ?></span>
|
||||
</button>
|
||||
<?php
|
||||
// Determine current page for active nav state
|
||||
$currentPage = basename($_SERVER['PHP_SELF'] ?? 'index.php');
|
||||
$langParam = isset($lang) && $lang === 'de' ? '?lang=de' : '';
|
||||
$langParamAmp = isset($lang) && $lang === 'de' ? '&lang=de' : '';
|
||||
?>
|
||||
|
||||
<!-- ── LiquidOverlayMenu ─────────────────────────────────────── -->
|
||||
|
||||
<!-- Fixed Logo (top-left) -->
|
||||
<a class="nav-logo" href="/index.php<?php echo $langParam; ?>" aria-label="FlixCooks – Home">
|
||||
<img class="logo--light" src="/assets/logo-black.png" alt="FlixCooks">
|
||||
<img class="logo--dark" src="/assets/logo-white.png" alt="FlixCooks">
|
||||
</a>
|
||||
|
||||
<!-- Fixed Hamburger Button (top-right) -->
|
||||
<button class="nav-trigger" id="navMenuBtn" type="button" aria-label="<?php echo isset($lang) && $lang === 'de' ? 'Menü öffnen' : 'Open menu'; ?>" aria-expanded="false" aria-controls="navOverlay">
|
||||
<span class="nav-burger-lines" aria-hidden="true">
|
||||
<span class="nav-line nav-line--top"></span>
|
||||
<span class="nav-line nav-line--mid"></span>
|
||||
<span class="nav-line nav-line--bot"></span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<!-- Full-screen Overlay -->
|
||||
<div class="nav-overlay" id="navOverlay" aria-hidden="true" role="dialog" aria-label="Navigation">
|
||||
<div class="nav-overlay-inner">
|
||||
<nav>
|
||||
<ul class="nav-menu-list" role="list">
|
||||
<li>
|
||||
<a href="/index.php<?php echo $langParam; ?>" class="slide-hover-link" <?php echo $currentPage === 'index.php' ? 'aria-current="page"' : ''; ?>>
|
||||
<span class="slide-hover-wrapper">
|
||||
<span class="slide-text-main"><?php echo isset($lang) && $lang === 'de' ? 'Startseite' : 'Home'; ?></span>
|
||||
<span class="slide-text-clone" aria-hidden="true"><?php echo isset($lang) && $lang === 'de' ? 'Startseite' : 'Home'; ?></span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/index.php<?php echo $langParam; ?>#recipes-start" class="slide-hover-link">
|
||||
<span class="slide-hover-wrapper">
|
||||
<span class="slide-text-main"><?php echo isset($lang) && $lang === 'de' ? 'Rezepte' : 'Recipes'; ?></span>
|
||||
<span class="slide-text-clone" aria-hidden="true"><?php echo isset($lang) && $lang === 'de' ? 'Rezepte' : 'Recipes'; ?></span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/impressum.php<?php echo $langParam; ?>" class="slide-hover-link" <?php echo $currentPage === 'impressum.php' ? 'aria-current="page"' : ''; ?>>
|
||||
<span class="slide-hover-wrapper">
|
||||
<span class="slide-text-main"><?php echo isset($lang) && $lang === 'de' ? 'Impressum' : 'Imprint'; ?></span>
|
||||
<span class="slide-text-clone" aria-hidden="true"><?php echo isset($lang) && $lang === 'de' ? 'Impressum' : 'Imprint'; ?></span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Language & Footer links inside overlay -->
|
||||
<div class="nav-overlay-footer">
|
||||
<a href="<?php echo e($langSwitchHref ?? '#'); ?>" class="underline-link">
|
||||
<?php echo isset($lang) && $lang === 'de' ? 'English' : 'Deutsch'; ?>
|
||||
</a>
|
||||
<a href="/datenschutz.php<?php echo $langParam; ?>" class="underline-link">
|
||||
<?php echo isset($lang) && $lang === 'de' ? 'Datenschutz' : 'Privacy'; ?>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<nav id="siteNav" class="site-nav" data-collapsed="true">
|
||||
<a href="/index.php<?php echo $lang === 'de' ? '?lang=de' : ''; ?>"><?php echo e($navHome ?? 'Home'); ?></a>
|
||||
<a href="/index.php<?php echo $lang === 'de' ? '?lang=de' : ''; ?>#latest"><?php echo e($navLatest ?? 'Latest'); ?></a>
|
||||
<a href="/index.php<?php echo $lang === 'de' ? '?lang=de' : ''; ?>#basics"><?php echo e($navBasics ?? 'Basics'); ?></a>
|
||||
</nav>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
const toggle = document.currentScript.previousElementSibling.querySelector('.menu-toggle');
|
||||
const nav = document.getElementById('siteNav');
|
||||
if (!toggle || !nav) return;
|
||||
toggle.addEventListener('click', () => {
|
||||
const isCollapsed = nav.getAttribute('data-collapsed') === 'true';
|
||||
nav.setAttribute('data-collapsed', String(!isCollapsed));
|
||||
toggle.setAttribute('aria-expanded', String(isCollapsed));
|
||||
(function() {
|
||||
var btn = document.getElementById('navMenuBtn');
|
||||
var overlay = document.getElementById('navOverlay');
|
||||
if (!btn || !overlay) return;
|
||||
|
||||
function openMenu() {
|
||||
btn.classList.add('active');
|
||||
overlay.classList.add('open');
|
||||
overlay.setAttribute('aria-hidden', 'false');
|
||||
btn.setAttribute('aria-expanded', 'true');
|
||||
document.body.classList.add('nav-open');
|
||||
}
|
||||
function closeMenu() {
|
||||
btn.classList.remove('active');
|
||||
overlay.classList.remove('open');
|
||||
overlay.setAttribute('aria-hidden', 'true');
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
document.body.classList.remove('nav-open');
|
||||
}
|
||||
|
||||
btn.addEventListener('click', function() {
|
||||
if (btn.classList.contains('active')) {
|
||||
closeMenu();
|
||||
} else {
|
||||
openMenu();
|
||||
}
|
||||
});
|
||||
|
||||
// Close on Escape key
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && overlay.classList.contains('open')) {
|
||||
closeMenu();
|
||||
btn.focus();
|
||||
}
|
||||
});
|
||||
|
||||
// Close on overlay link click
|
||||
overlay.querySelectorAll('a').forEach(function(link) {
|
||||
link.addEventListener('click', function() {
|
||||
closeMenu();
|
||||
});
|
||||
})();
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user