smacks/flixcooks-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(phase-1): Premium design system, CapitoliumPreloader, IndexSectionIndicator, Recipe Showcase Stage

Browse Source 
- 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:
smacks
2026-05-21 11:52:40 +02:00
parent 025f41fd18
commit 6c00e1a00d
8 changed files with 2145 additions and 1176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
partials/head.php
+26 -3
View File
@@ -11,11 +11,34 @@ $description = $description ?? 'Seasonal recipes, tested tips, and approachable
<title><?php echo e($pageTitle); ?></title>
<link rel="icon" type="image/png" href="/assets/favicon.png">
<link rel="alternate icon" type="image/x-icon" sizes="16x16 32x32" href="/favicon.ico">
<!-- Google Fonts: Playfair Display + Manrope -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Manrope:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Main stylesheet -->
<link rel="stylesheet" href="/assets/style.css">
<!-- Always start light -->
<script>document.documentElement.setAttribute('data-theme','light');</script>
<!-- GSAP + ScrollTrigger (CDN) -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
<!-- Lenis smooth scroll (CDN) -->
<script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1.0.42/bundled/lenis.min.js"></script>
<!-- Set theme instantly to avoid flash -->
<script>
(function(){
var t = localStorage.getItem('fc-theme') || 'light';
document.documentElement.setAttribute('data-theme', t);
})();
</script>
</head>
<body>
<!-- ── AuraMarbleBackground (fixed atmospheric grain layer) ── -->
<div class="bg-marble-container" aria-hidden="true">
<div class="bg-marble-grain"></div>
</div>