block/themes-gotham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
themes-gotham/manifest.yaml
Alex Dunmow ff2c30103b fix(gotham): activate bundled display faces — @font-face in theme CSS + preset typography 
The host never consumes bundled_fonts (LoadedPlugin.BundledFonts is dead),
so Antonio/Cormorant rendered as system sans. Declare @font-face against
the served artifact paths (/templates/gotham/fonts/) and set
typography.fontHeading/body/mono (template:gotham:*) on all five presets.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-06 19:33:58 +08:00

246 lines
12 KiB
YAML
Raw Blame History

# Gotham theme — codeless .bnp manifest (WO-TF-018, Wave A).
# Synthesized into manifest.pb by `ninja plugin build` (no plugin.wasm).
#
# Nightlife / private-club identity: cinematic near-black luxe, brass hairline
# accents, letterboxed heroes, tall condensed display type. Utility CSS lives in
# `css.input_css_append` below (host Tailwind pipeline) — colour is always
# hsl(var(--token)) and font-family always var(--font-heading|body|mono, ...).
theme_presets: presets.json
bundled_fonts: fonts.json
master_pages: master_pages.json
required_icon_packs: [lucide, simple-icons]
system_templates:
- key: gotham
title: Gotham
description: "After-dark identity for a nightlife venue or private members' club — cinematic near-black luxe, brass accents and condensed display type."
page_templates:
- system: gotham
key: default
title: Default
description: "Centred near-black page with brass rails, header, main and footer."
slots: [header, main, footer]
- system: gotham
key: landing
title: Marquee Landing
description: "Letterboxed hero, door strip and a closing CTA for the main room."
slots: [hero, main, cta, footer]
- system: gotham
key: article
title: Feature
description: "Narrow editorial column for press, listings and the house journal."
slots: [header, main, aside, footer]
- system: gotham
key: full-width
title: Grand Room
description: "Edge-to-edge gallery layout for the room, lookbooks and galleries."
slots: [header, main, footer]
- system: gotham
key: blog-index
title: The Journal
description: "Blog index with a brass masthead, featured and post-grid slots."
slots: [header, featured, main, footer]
- system: gotham
key: contact
title: Reservations
description: "Contact layout with an optional aside for hours and the door."
slots: [header, main, aside, footer]
- system: gotham
key: auth
title: Members
description: "Centred members' shell with wordmark and a spotlight crest."
slots: [main, footer]
- system: gotham
key: centered
title: Centered
description: "Narrow centred column for documents and single statements."
slots: [header, main, footer]
template_overrides:
# Chrome (4)
- { template: gotham, block: navbar }
- { template: gotham, block: footer }
- { template: gotham, block: utility-bar }
- { template: gotham, block: announcement-bar }
# Marketing (12)
- { template: gotham, block: hero }
- { template: gotham, block: feature-grid }
- { template: gotham, block: rich-section }
- { template: gotham, block: stats }
- { template: gotham, block: testimonial }
- { template: gotham, block: logo-strip }
- { template: gotham, block: pricing }
- { template: gotham, block: team }
- { template: gotham, block: faq }
- { template: gotham, block: timeline }
- { template: gotham, block: cta }
- { template: gotham, block: countdown }
# Primitives (11)
- { template: gotham, block: heading }
- { template: gotham, block: text }
- { template: gotham, block: rich-text }
- { template: gotham, block: image }
- { template: gotham, block: quote }
- { template: gotham, block: divider }
- { template: gotham, block: button }
- { template: gotham, block: card }
- { template: gotham, block: gallery }
- { template: gotham, block: video-embed }
- { template: gotham, block: audio-embed }
# Commerce / local (6)
- { template: gotham, block: menu-list }
- { template: gotham, block: event-list }
- { template: gotham, block: contact-form }
- { template: gotham, block: contact-card }
- { template: gotham, block: hours-location }
- { template: gotham, block: social-links }
# Blog family (12)
- { template: gotham, block: blog-hero }
- { template: gotham, block: featured-posts }
- { template: gotham, block: related-posts }
- { template: gotham, block: popular-posts }
- { template: gotham, block: category-list }
- { template: gotham, block: post-hero }
- { template: gotham, block: post-metadata }
- { template: gotham, block: author-bio }
- { template: gotham, block: author-bio-hero }
- { template: gotham, block: newsletter-signup }
- { template: gotham, block: breadcrumbs }
- { template: gotham, block: sidebar-nav }
# Auth surface (3)
- { template: gotham, block: auth-form }
- { template: gotham, block: password-reset-form }
- { template: gotham, block: auth-status }
# System (1)
- { template: gotham, block: page-suggestions }
email_wrappers:
- gotham
css:
input_css_append: |
/* Gotham theme — cinematic near-black utility CSS.
*
* Colour is always consumed via hsl(var(--token)); font families always
* come from var(--font-heading|body|mono, <fallback>). No literal colours
* except black scrims layered over IMAGES (letterbox effect).
*/
/* Bundled display faces. The host does not yet emit @font-face for
* bundled_fonts (LoadedPlugin.BundledFonts is unconsumed), so the theme
* declares its own faces against the served artifact paths
* (/templates/gotham/fonts/...). Presets set typography.fontHeading/body
* to template:gotham:<Family> so --font-heading/--font-body resolve to
* these families. */
@font-face { font-family: 'Antonio'; src: url('/templates/gotham/fonts/antonio-latin.woff2') format('woff2'); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/templates/gotham/fonts/cormorant-garamond-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/templates/gotham/fonts/cormorant-garamond-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/templates/gotham/fonts/cormorant-garamond-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('/templates/gotham/fonts/cormorant-garamond-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/templates/gotham/fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@layer utilities {
/* reel-rule — brass hairline, 1px ascending to 2px. */
.reel-rule { border: none; border-top: 1px solid hsl(var(--primary)); margin: 0; }
.reel-rule-thick { border: none; border-top: 2px solid hsl(var(--primary)); margin: 0; }
/* reel-frame — thin film frame with brass corner ticks. */
.reel-frame { position: relative; border: 1px solid hsl(var(--border)); padding: 1.25rem 1.5rem; }
.reel-frame::before, .reel-frame::after {
content: ""; position: absolute; width: 14px; height: 14px;
border-color: hsl(var(--primary)); border-style: solid; pointer-events: none;
}
.reel-frame::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.reel-frame::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
/* reel-foil — inset brass glow used on hover / featured states. */
.reel-foil {
box-shadow:
inset 0 0 0 1px hsl(var(--primary)),
inset 0 1px 0 hsl(var(--primary) / 0.5),
inset 0 -1px 0 hsl(var(--primary) / 0.3);
}
/* reel-caps — condensed caps tracking for display headings. */
.reel-caps { text-transform: uppercase; letter-spacing: 0.12em; }
/* reel-underline — brass hairline underline on headings. */
.reel-underline { position: relative; padding-bottom: 0.35em; }
.reel-underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: hsl(var(--primary)); }
/* reel-btn — the invitation. Brass on near-black, inverts on hover. */
.reel-btn {
display: inline-flex; align-items: center; gap: 0.5rem;
border: 1px solid hsl(var(--primary));
background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground));
padding: 0.7rem 1.7rem; border-radius: 2px;
text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; line-height: 1;
transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.reel-btn:hover, .reel-btn:focus-visible {
background-color: transparent; color: hsl(var(--primary));
box-shadow: inset 0 0 0 1px hsl(var(--primary));
}
.reel-btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; }
/* reel-link — brass underline link. */
.reel-link { color: hsl(var(--primary)); text-decoration: none; border-bottom: 1px solid hsl(var(--primary) / 0.5); transition: color 200ms ease, border-color 200ms ease; }
.reel-link:hover, .reel-link:focus-visible { color: hsl(var(--accent)); border-bottom-color: hsl(var(--accent)); }
/* film-grain — 4% film-grain noise, dark surfaces. */
.film-grain { position: relative; isolation: isolate; }
.film-grain::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.04;
background-image:
repeating-radial-gradient(circle at 17% 23%, hsl(var(--foreground)) 0 1px, transparent 1px 3px),
repeating-radial-gradient(circle at 73% 61%, hsl(var(--foreground)) 0 1px, transparent 1px 3px);
mix-blend-mode: overlay;
}
/* spotlight — a radial pool of brass light, hero/crest overlay. */
.spotlight { background-image: radial-gradient(ellipse 60% 55% at 50% 40%, hsl(var(--primary) / 0.16), transparent 70%); }
/* reel-strip — brass double-rule band (crest / marquee accent). */
.reel-strip {
background-image:
linear-gradient(hsl(var(--primary)), hsl(var(--primary))),
linear-gradient(hsl(var(--primary)), hsl(var(--primary)));
background-size: 100% 1px, 100% 1px;
background-position: top, bottom;
background-repeat: no-repeat;
}
/* reel-mat — brass inner-mat around framed media. */
.reel-mat { position: relative; padding: 4px; box-shadow: inset 0 0 0 1px hsl(var(--border)); }
.reel-mat > * { display: block; width: 100%; height: 100%; }
/* reel-dropcap — condensed brass dropcap on first paragraph. */
.reel-dropcap[data-deco-dropcap]::first-letter,
.reel-dropcap[data-reel-dropcap]::first-letter {
font-family: var(--font-heading, "Antonio", "Oswald", "Bebas Neue", sans-serif);
font-size: 3.2em; line-height: 0.9; float: left; padding: 0.02em 0.14em 0 0; color: hsl(var(--primary));
}
/* letterbox-scrim — black cinematic bars over hero imagery (image overlay). */
.letterbox-scrim {
background-image: linear-gradient(to bottom,
hsl(0 0% 0% / 0.78) 0%, hsl(0 0% 0% / 0.15) 16%,
transparent 40%, transparent 60%,
hsl(0 0% 0% / 0.15) 84%, hsl(0 0% 0% / 0.78) 100%);
}
/* reveal — MID-tier scroll reveal. No JS = visible; reduced-motion honoured. */
.reveal { opacity: 1; }
.gotham-js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .4s ease; }
.gotham-js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.gotham-js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
}
/* Raw CSS (outside @layer, JIT-scan-independent) — layout guarantees the
* host Tailwind scan may not reliably emit from theme .ninjatpl files.
* Imageless hero: a compact letterboxed text plate, never a 75vh void. */
@media (max-width: 640px) { .gotham-hero-plate { min-height: 380px; } }
Reference in New Issue View Git Blame Copy Permalink