324 lines
12 KiB
YAML
324 lines
12 KiB
YAML
# 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));
|
|
}
|
|
}
|