block/themes-art-deco
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
themes-art-deco/manifest.yaml
Alex Dunmow 03c49a9a83 feat(art-deco): Wave A supper-club theme — 49 overrides, 7 templates, seed 
WO-TF-011: dress the fine-dining / supper-club persona (gilded symmetry,
ziggurat frames, sunbursts, hairline gold rules; champagne/ivory light,
gold-on-lacquer dark) against the frozen Wave-0 builtin schemas.

Overrides (templates/overrides/art-deco/): all 49 mandatory builtin keys,
each re-skinned from the builtin default with every content field, provider
field, custom tag ({% img %}/{% button %}/{% form %}/{% signup_form %}/
{% auth_form %} wiring) and JS (navbar drawer, gallery lightbox, countdown,
stats count-up, video/audio facade, announcement dismiss) preserved verbatim.
Auth trio reproduces the untouchable /api/auth/* endpoints and field names;
captcha widget injected from _captcha_widget. manifest.yaml declares all 49.

Page templates: added blog-index, contact, auth (now 7 total) in Deco chrome.

Blocks rework (spec D5): footer/hero(marquee)/gallery/divider/pull-quote theme
blocks deleted — folded into overrides of the builtin keys. Kept persona
furniture reservation + menu; added private_dining + chef_signature (4 blocks).

Presets: 4 dual-mode (mode "both"), all 19 tokens, light AND dark tuned.
Fonts: bundle Cinzel + Cormorant Garamond (OFL) as Latin woff2 subsets in
assets/fonts/ (license recorded in OFL.txt); all font-family via var().
Email wrapper themed. required_icon_packs=["lucide"] + RECOMMENDED_ICONS.md.

Seed (demo): home/about/blog(3 posts)/contact/login pages in supper-club voice;
contact-form targets seeded contact_submissions data table; row_inserted
workflow emails admins.

Verified: ninja plugin build (codeless), verify, archive-check, and
check-safety all exit 0. Visual quality UNVERIFIED until Wave B.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-05 10:51:02 +08:00

324 lines
12 KiB
YAML
Raw Blame History

# Art Deco theme — codeless .bnp manifest (WO-WZ-021 Phase B).
# Synthesized into manifest.pb by `ninja plugin build` (no plugin.wasm).
theme_presets: presets.json
bundled_fonts: fonts.json
master_pages: master_pages.json
system_templates:
- key: art-deco
title: Art Deco
description: "Luxury Art Deco theme with champagne gold gradients, jet black, ivory and geometric fan motifs for hotels, fine dining, weddings and jewellers."
page_templates:
- system: art-deco
key: default
title: Default
description: "Centered symmetric layout with gold rule header and footer."
slots: [header, main, footer]
- system: art-deco
key: landing
title: Marquee Landing
description: "Wide hero with sunburst overlay, reservation strip, CTA."
slots: [marquee, main, cta, footer]
- system: art-deco
key: article
title: Editorial
description: "Narrow editorial column for press, menus and stories."
slots: [header, main, aside, footer]
- system: art-deco
key: full-width
title: Grand Ballroom
description: "Edge-to-edge gallery layout for venues and lookbooks."
slots: [header, main, footer]
- system: art-deco
key: blog-index
title: Editorial Index
description: "Blog index with gilded masthead, featured and post-grid slots."
slots: [header, featured, main, footer]
- system: art-deco
key: contact
title: Reservations
description: "Contact layout with optional aside for hours and location."
slots: [header, main, aside, footer]
- system: art-deco
key: auth
title: Members
description: "Centred auth shell with wordmark and sunburst crest."
slots: [main, footer]
template_overrides:
# Chrome
- { template: art-deco, block: navbar }
- { template: art-deco, block: footer }
- { template: art-deco, block: utility-bar }
- { template: art-deco, block: announcement-bar }
# Marketing
- { template: art-deco, block: hero }
- { template: art-deco, block: feature-grid }
- { template: art-deco, block: rich-section }
- { template: art-deco, block: stats }
- { template: art-deco, block: testimonial }
- { template: art-deco, block: logo-strip }
- { template: art-deco, block: pricing }
- { template: art-deco, block: team }
- { template: art-deco, block: faq }
- { template: art-deco, block: timeline }
- { template: art-deco, block: cta }
- { template: art-deco, block: countdown }
# Primitives
- { template: art-deco, block: heading }
- { template: art-deco, block: text }
- { template: art-deco, block: rich-text }
- { template: art-deco, block: image }
- { template: art-deco, block: quote }
- { template: art-deco, block: divider }
- { template: art-deco, block: button }
- { template: art-deco, block: card }
- { template: art-deco, block: gallery }
- { template: art-deco, block: video-embed }
- { template: art-deco, block: audio-embed }
# Commerce / local
- { template: art-deco, block: menu-list }
- { template: art-deco, block: event-list }
- { template: art-deco, block: contact-form }
- { template: art-deco, block: contact-card }
- { template: art-deco, block: hours-location }
- { template: art-deco, block: social-links }
# Blog family
- { template: art-deco, block: blog-hero }
- { template: art-deco, block: featured-posts }
- { template: art-deco, block: related-posts }
- { template: art-deco, block: popular-posts }
- { template: art-deco, block: category-list }
- { template: art-deco, block: post-hero }
- { template: art-deco, block: post-metadata }
- { template: art-deco, block: author-bio }
- { template: art-deco, block: author-bio-hero }
- { template: art-deco, block: newsletter-signup }
- { template: art-deco, block: breadcrumbs }
- { template: art-deco, block: sidebar-nav }
# Auth surface
- { template: art-deco, block: auth-form }
- { template: art-deco, block: password-reset-form }
- { template: art-deco, block: auth-status }
# System
- { template: art-deco, block: page-suggestions }
email_wrappers:
- art-deco
css:
input_css_append: |
/* Art Deco theme — utility CSS for foil, frames, fans and grain.
*
* Color is always consumed via hsl(var(--token)) — the tokens carry HSL triples.
* Font families always come from var(--font-heading|body|mono, <fallback>).
*/
@layer utilities {
/* deco-rule — hairline gold rule, 1px ascending to 2px on accent lines. */
.deco-rule {
border: none;
border-top: 1px solid hsl(var(--primary));
margin: 0;
}
.deco-rule-thick {
border: none;
border-top: 2px solid hsl(var(--primary));
margin: 0;
}
/* deco-frame — stepped ziggurat frame, layered borders + clipped corners. */
.deco-frame {
position: relative;
border: 1px solid hsl(var(--primary));
padding: 1.25rem;
}
.deco-frame::before,
.deco-frame::after {
content: "";
position: absolute;
left: -6px;
right: -6px;
height: 4px;
background: hsl(var(--primary));
opacity: 0.85;
}
.deco-frame::before { top: -6px; }
.deco-frame::after { bottom: -6px; }
/* deco-step — stepped corner mask suitable for image frames. */
.deco-step {
position: relative;
padding: 4px;
background:
linear-gradient(hsl(var(--primary)), hsl(var(--primary))) top left / 14px 1px no-repeat,
linear-gradient(hsl(var(--primary)), hsl(var(--primary))) top left / 1px 14px no-repeat,
linear-gradient(hsl(var(--primary)), hsl(var(--primary))) top right / 14px 1px no-repeat,
linear-gradient(hsl(var(--primary)), hsl(var(--primary))) top right / 1px 14px no-repeat,
linear-gradient(hsl(var(--primary)), hsl(var(--primary))) bottom left / 14px 1px no-repeat,
linear-gradient(hsl(var(--primary)), hsl(var(--primary))) bottom left / 1px 14px no-repeat,
linear-gradient(hsl(var(--primary)), hsl(var(--primary))) bottom right / 14px 1px no-repeat,
linear-gradient(hsl(var(--primary)), hsl(var(--primary))) bottom right / 1px 14px no-repeat;
}
.deco-step > * {
display: block;
width: 100%;
height: 100%;
}
/* deco-grain — 3% film-grain noise, dark surfaces only. */
.deco-grain {
position: relative;
isolation: isolate;
}
.deco-grain::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.03;
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;
}
/* deco-foil — inset gold "stamp" shadow used on hover states. */
.deco-foil {
box-shadow:
inset 0 0 0 1px hsl(var(--primary)),
inset 0 1px 0 hsl(var(--primary) / 0.6),
inset 0 -1px 0 hsl(var(--primary) / 0.3);
}
/* deco-sunburst — conic-gradient sunburst rays. Used by divider_fan & marquee_hero. */
.deco-sunburst {
background-image:
conic-gradient(
from 180deg at 50% 100%,
transparent 0deg,
hsl(var(--primary) / 0.7) 5deg,
transparent 10deg,
transparent 20deg,
hsl(var(--primary) / 0.55) 25deg,
transparent 30deg,
transparent 40deg,
hsl(var(--primary) / 0.7) 45deg,
transparent 50deg,
transparent 60deg,
hsl(var(--primary) / 0.55) 65deg,
transparent 70deg,
transparent 80deg,
hsl(var(--primary) / 0.7) 85deg,
transparent 90deg,
transparent 100deg,
hsl(var(--primary) / 0.55) 105deg,
transparent 110deg,
transparent 120deg,
hsl(var(--primary) / 0.7) 125deg,
transparent 130deg,
transparent 140deg,
hsl(var(--primary) / 0.55) 145deg,
transparent 150deg,
transparent 160deg,
hsl(var(--primary) / 0.7) 165deg,
transparent 170deg,
transparent 180deg
);
}
/* deco-scallop — scalloped fan crest via radial gradient. */
.deco-scallop {
background-image:
radial-gradient(circle at 50% 100%, hsl(var(--primary) / 0.7) 0 2px, transparent 3px),
repeating-linear-gradient(
to right,
transparent 0,
transparent 12px,
hsl(var(--primary) / 0.55) 12px,
hsl(var(--primary) / 0.55) 13px,
transparent 13px,
transparent 24px
);
}
/* deco-ziggurat — stepped ziggurat divider stripes. */
.deco-ziggurat {
background-image:
linear-gradient(to bottom, transparent 0 30%, hsl(var(--primary)) 30% 32%, transparent 32% 50%, hsl(var(--primary)) 50% 52%, transparent 52% 70%, hsl(var(--primary)) 70% 72%, transparent 72% 100%);
}
/* deco-caps — caps tracking helper for Italiana display headings. */
.deco-caps {
text-transform: uppercase;
letter-spacing: 0.18em;
}
/* deco-dropcap — classical italic dropcap on first paragraph. */
.deco-dropcap[data-deco-dropcap]::first-letter {
font-family: var(--font-body, "Cormorant Garamond", "Cormorant", Georgia, serif);
font-style: italic;
font-size: 3.2em;
line-height: 0.95;
float: left;
padding: 0.05em 0.12em 0 0;
color: hsl(var(--primary));
}
/* deco-underline — hairline gold underline on headings. */
.deco-underline {
position: relative;
padding-bottom: 0.35em;
}
.deco-underline::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: hsl(var(--primary));
}
/* deco-pill — black pill button base for the button override. */
.deco-pill {
border-radius: 9999px;
border-width: 1px;
border-style: solid;
border-color: hsl(var(--primary));
background-color: hsl(var(--foreground));
color: hsl(var(--background));
padding: 0.65rem 1.6rem;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.85rem;
transition: box-shadow 200ms ease, background-color 200ms ease;
}
.deco-pill:hover,
.deco-pill:focus-visible {
box-shadow:
inset 0 0 0 1px hsl(var(--primary)),
inset 0 1px 0 hsl(var(--primary) / 0.6),
inset 0 -1px 0 hsl(var(--primary) / 0.4);
}
.deco-pill:focus-visible {
outline: 2px solid hsl(var(--ring));
outline-offset: 3px;
}
/* deco-link — gold underline link state. */
.deco-link {
color: hsl(var(--primary));
text-decoration: none;
border-bottom: 1px solid hsl(var(--primary));
transition: color 200ms ease, border-color 200ms ease;
}
.deco-link:hover,
.deco-link:focus-visible {
color: hsl(var(--accent));
border-bottom-color: hsl(var(--accent));
}
}
Reference in New Issue View Git Blame Copy Permalink