Padreug
80597f6e35
Swap the hero wordmark font from Sketch Gothic School (free for personal use only) to Berry Rotunda — a public-domain rotunda/insular face that suits the celtic-knot theme and carries no licensing constraints for commercial/web use. Self-host as woff2/woff and drop the old font files. The SVG clip viewBox auto-fits to the new glyph metrics. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
130 lines
4.4 KiB
CSS
130 lines
4.4 KiB
CSS
@import 'tailwindcss';
|
|
@import 'tw-animate-css';
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/* Self-hosted rotunda used for the hero title ("Berry Rotunda", public
|
|
domain). Only needed to shape the SVG clip glyphs the hero video shows
|
|
through. */
|
|
@font-face {
|
|
font-family: 'Berry Rotunda';
|
|
src:
|
|
url('./assets/fonts/berry-rotunda.woff2') format('woff2'),
|
|
url('./assets/fonts/berry-rotunda.woff') format('woff');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
:root {
|
|
/* 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%);
|
|
--card: hsl(151 80% 10%);
|
|
--card-foreground: hsl(200 32% 94%);
|
|
--popover: hsl(151 80% 10%);
|
|
--popover-foreground: hsl(200 32% 94%);
|
|
--primary: hsl(43 64% 41%);
|
|
--primary-foreground: hsl(151 100% 6%);
|
|
--secondary: hsl(151 65% 12%);
|
|
--secondary-foreground: hsl(200 32% 94%);
|
|
--muted: hsl(151 50% 14%);
|
|
--muted-foreground: hsl(200 15% 72%);
|
|
--accent: hsl(50 65% 50%);
|
|
--accent-foreground: hsl(151 100% 6%);
|
|
--destructive: hsl(0 60% 50%);
|
|
--destructive-foreground: hsl(200 32% 94%);
|
|
--border: hsl(151 50% 18%);
|
|
--input: hsl(151 50% 18%);
|
|
--ring: hsl(43 64% 50%);
|
|
/* Near-black green of the content panel that floats on the tiled bg. */
|
|
--panel: hsl(151 55% 4%);
|
|
/* Flat wash layered over the tiled page background to mute it. Dark green
|
|
rather than pure black so the gutters keep the site's tone. Raise the
|
|
alpha toward 1 for a quieter background, lower it to let the knot show. */
|
|
--bg-overlay: hsl(151 60% 3% / 0.62);
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
.dark {
|
|
--background: hsl(151 100% 6%);
|
|
--foreground: hsl(200 32% 94%);
|
|
--card: hsl(151 80% 8%);
|
|
--card-foreground: hsl(200 32% 94%);
|
|
--popover: hsl(151 80% 8%);
|
|
--popover-foreground: hsl(200 32% 94%);
|
|
--primary: hsl(43 64% 45%);
|
|
--primary-foreground: hsl(151 100% 6%);
|
|
--secondary: hsl(151 65% 10%);
|
|
--secondary-foreground: hsl(200 32% 94%);
|
|
--muted: hsl(151 50% 12%);
|
|
--muted-foreground: hsl(200 15% 70%);
|
|
--accent: hsl(50 65% 52%);
|
|
--accent-foreground: hsl(151 100% 6%);
|
|
--destructive: hsl(0 60% 45%);
|
|
--destructive-foreground: hsl(200 32% 94%);
|
|
--border: hsl(151 50% 15%);
|
|
--input: hsl(151 50% 15%);
|
|
--ring: hsl(43 64% 52%);
|
|
--panel: hsl(151 55% 3%);
|
|
--bg-overlay: hsl(151 60% 2% / 0.66);
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--color-panel: var(--panel);
|
|
--radius-lg: var(--radius);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--font-sans:
|
|
'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-title: 'Berry Rotunda', 'UnifrakturMaguntia', serif;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
/* Celtic-knot tile is the page background; it shows in the gutters
|
|
around the floating content panel (see PageShell). A flat dark wash
|
|
(--bg-overlay) is layered on top to mute it. The home page's fixed
|
|
landscape image sits above this layer, so home is unaffected. */
|
|
background-image:
|
|
linear-gradient(var(--bg-overlay), var(--bg-overlay)),
|
|
url('./assets/section-tile.webp');
|
|
background-repeat: no-repeat, repeat;
|
|
background-position: center top, center top;
|
|
background-size: cover, auto;
|
|
font-family: var(--font-sans);
|
|
font-weight: 300;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
font-family: var(--font-display);
|
|
letter-spacing: 0.02em;
|
|
}
|
|
}
|