padreug/chateaudufaune.ariege.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(home/hero): blackletter wordmark title with video clipped through letters

Browse source 
Replace the script-font title with the brand blackletter ("Sketch Gothic
School", self-hosted) rendered as SVG text that clips a looping
forest/cloud video, so the texture drifts through the letterforms. The
viewBox auto-fits the measured glyph box (one line at any width, ~92vw),
with a gold drop-shadow for the engraved edge. Plain <h1> kept for SEO.

Video re-encoded to ~3.1MB with a light poster.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Padreug 2026-06-14 18:20:24 +02:00
commit ee5b927ba2
6 changed files with 106 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/style.css
View file

@ -3,8 +3,20 @@
@custom-variant dark (&:is(.dark *));
/* Self-hosted blackletter used for the hero title ("Sketch Gothic School").
Only needed to shape the SVG clip glyphs the hero video shows through. */
@font-face {
font-family: 'Sketch Gothic School';
src:
url('./assets/fonts/sketch-gothic-school.woff2') format('woff2'),
url('./assets/fonts/sketch-gothic-school.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root {
/* Wix-inspired palette: deep forest green dominant background, cream
/* Brand palette: deep forest green dominant background, cream
foreground, gold (Aboreto/calligraphic spirit) for CTAs and accents. */
--background: hsl(151 100% 8%);
--foreground: hsl(200 32% 94%);
@ -86,6 +98,7 @@
'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-display: 'Aboreto', 'Cormorant Garamond', Georgia, serif;
--font-script: 'Tangerine', 'Allura', cursive;
--font-blackletter: 'Sketch Gothic School', 'UnifrakturMaguntia', serif;
}
@layer base {