409 lines
18 KiB
YAML
409 lines
18 KiB
YAML
# Coffee theme — codeless .bnp manifest (Wave A, WO-TF-013).
|
|
# Synthesized into manifest.pb by `ninja plugin build` (no plugin.wasm).
|
|
theme_presets: presets.json
|
|
bundled_fonts: fonts.json
|
|
master_pages: master_pages.json
|
|
|
|
required_icon_packs:
|
|
- lucide
|
|
- simple-icons
|
|
|
|
system_templates:
|
|
- key: coffee
|
|
title: Coffee
|
|
description: "Warm, hand-crafted cafe and roastery theme — kraft paper, chalkboard menus, doodles and stamps."
|
|
|
|
page_templates:
|
|
- system: coffee
|
|
key: default
|
|
title: Default
|
|
description: "Header + main + footer over warm paper grain."
|
|
slots: [header, main, footer]
|
|
- system: coffee
|
|
key: landing
|
|
title: Landing
|
|
description: "Hero pour, featured menu, story and invitation."
|
|
slots: [hero, menu, story, cta, footer]
|
|
- system: coffee
|
|
key: article
|
|
title: Article
|
|
description: "Narrow narrative column with drop-cap for journal and recipes."
|
|
slots: [header, main, footer]
|
|
- system: coffee
|
|
key: full-width
|
|
title: Full Width
|
|
description: "Edge-to-edge gallery and interior shots."
|
|
slots: [header, main, footer]
|
|
- system: coffee
|
|
key: blog-index
|
|
title: Blog Index
|
|
description: "Blog hero, featured posts and a post grid."
|
|
slots: [header, featured, main, footer]
|
|
- system: coffee
|
|
key: contact
|
|
title: Contact
|
|
description: "Contact form, hours and location."
|
|
slots: [header, main, footer]
|
|
- system: coffee
|
|
key: auth
|
|
title: Auth
|
|
description: "Centered card for login, register and password reset."
|
|
slots: [main, footer]
|
|
|
|
email_wrappers:
|
|
- coffee
|
|
|
|
template_overrides:
|
|
- { template: coffee, block: announcement-bar }
|
|
- { template: coffee, block: audio-embed }
|
|
- { template: coffee, block: auth-form }
|
|
- { template: coffee, block: author-bio }
|
|
- { template: coffee, block: author-bio-hero }
|
|
- { template: coffee, block: auth-status }
|
|
- { template: coffee, block: blog-hero }
|
|
- { template: coffee, block: breadcrumbs }
|
|
- { template: coffee, block: button }
|
|
- { template: coffee, block: card }
|
|
- { template: coffee, block: category-list }
|
|
- { template: coffee, block: contact-card }
|
|
- { template: coffee, block: contact-form }
|
|
- { template: coffee, block: countdown }
|
|
- { template: coffee, block: cta }
|
|
- { template: coffee, block: divider }
|
|
- { template: coffee, block: event-list }
|
|
- { template: coffee, block: faq }
|
|
- { template: coffee, block: featured-posts }
|
|
- { template: coffee, block: feature-grid }
|
|
- { template: coffee, block: footer }
|
|
- { template: coffee, block: gallery }
|
|
- { template: coffee, block: heading }
|
|
- { template: coffee, block: hero }
|
|
- { template: coffee, block: hours-location }
|
|
- { template: coffee, block: image }
|
|
- { template: coffee, block: logo-strip }
|
|
- { template: coffee, block: menu-list }
|
|
- { template: coffee, block: navbar }
|
|
- { template: coffee, block: newsletter-signup }
|
|
- { template: coffee, block: page-suggestions }
|
|
- { template: coffee, block: password-reset-form }
|
|
- { template: coffee, block: popular-posts }
|
|
- { template: coffee, block: post-hero }
|
|
- { template: coffee, block: post-metadata }
|
|
- { template: coffee, block: pricing }
|
|
- { template: coffee, block: quote }
|
|
- { template: coffee, block: related-posts }
|
|
- { template: coffee, block: rich-section }
|
|
- { template: coffee, block: rich-text }
|
|
- { template: coffee, block: sidebar-nav }
|
|
- { template: coffee, block: social-links }
|
|
- { template: coffee, block: stats }
|
|
- { template: coffee, block: team }
|
|
- { template: coffee, block: testimonial }
|
|
- { template: coffee, block: text }
|
|
- { template: coffee, block: timeline }
|
|
- { template: coffee, block: utility-bar }
|
|
- { template: coffee, block: video-embed }
|
|
|
|
css:
|
|
input_css_append: |
|
|
/* Coffee theme styles
|
|
*
|
|
* Dual-mode via the 19 shadcn-style HSL token CSS variables (--background,
|
|
* --foreground, --primary, --accent, --border, --muted, --card, ...) consumed
|
|
* as hsl(var(--token)). No literal colors. Font families resolve ONLY through
|
|
* the BlockNinja font variables (--font-heading, --font-body, --font-mono) with
|
|
* the fallback stacks below — never hardcoded, so the admin font picker works.
|
|
*/
|
|
|
|
:root {
|
|
--coffee-heading-fallback: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
|
|
--coffee-body-fallback: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
--coffee-hand-fallback: "Caveat", "Segoe Print", "Bradley Hand", cursive;
|
|
--coffee-mono-fallback: "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
|
|
}
|
|
|
|
/* --- Paper grain background --------------------------------------------- */
|
|
body.coffee-paper {
|
|
background-color: hsl(var(--background));
|
|
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='paper-grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.13 0 0 0 0 0.09 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23paper-grain)'/%3E%3C/svg%3E");
|
|
background-repeat: repeat;
|
|
}
|
|
|
|
/* --- Type roles --------------------------------------------------------- */
|
|
.coffee-display {
|
|
font-family: var(--font-heading, var(--coffee-heading-fallback));
|
|
font-feature-settings: "liga" 1, "dlig" 1;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.coffee-body {
|
|
font-family: var(--font-body, var(--coffee-body-fallback));
|
|
line-height: 1.65;
|
|
}
|
|
.coffee-mono {
|
|
font-family: var(--font-mono, var(--coffee-mono-fallback));
|
|
}
|
|
/* Hand-drawn accents (badges, stamps, captions). Routed through --font-heading
|
|
* with a Caveat fallback: unassigned it renders Caveat; if the admin sets a
|
|
* heading font the accents follow it (the 3-slot model working as intended). */
|
|
.coffee-hand {
|
|
font-family: var(--font-heading, var(--coffee-hand-fallback));
|
|
letter-spacing: 0.01em;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
/* --- Doodle underline --------------------------------------------------- */
|
|
.coffee-doodle-underline {
|
|
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q 20 2 40 7 T 80 6 T 118 7' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' opacity='0.55'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: 0 100%;
|
|
background-size: 100% 0.5em;
|
|
padding-bottom: 0.18em;
|
|
}
|
|
|
|
/* --- Drop-cap ----------------------------------------------------------- */
|
|
.coffee-dropcap > p:first-of-type::first-letter {
|
|
font-family: var(--font-heading, var(--coffee-heading-fallback));
|
|
font-size: 4em;
|
|
line-height: 0.85;
|
|
float: left;
|
|
padding: 0.05em 0.12em 0 0;
|
|
color: hsl(var(--primary));
|
|
}
|
|
|
|
/* --- Kraft-tag button (stamp press on hover) ---------------------------- */
|
|
.kraft-tag {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.55rem 1.1rem;
|
|
background-color: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.25rem;
|
|
font-family: var(--font-body, var(--coffee-body-fallback));
|
|
font-weight: 500;
|
|
letter-spacing: 0.02em;
|
|
box-shadow: 0 2px 0 hsl(var(--border));
|
|
transition: transform 120ms ease, box-shadow 120ms ease;
|
|
cursor: pointer;
|
|
}
|
|
.kraft-tag:hover {
|
|
transform: translateY(1px) rotate(-1.2deg);
|
|
box-shadow: 0 1px 0 hsl(var(--border));
|
|
}
|
|
.kraft-tag:focus-visible {
|
|
outline: 2px solid hsl(var(--ring));
|
|
outline-offset: 3px;
|
|
}
|
|
.kraft-tag--ghost {
|
|
background-color: transparent;
|
|
color: hsl(var(--primary));
|
|
box-shadow: none;
|
|
border-style: dashed;
|
|
}
|
|
.kraft-tag--ghost:hover {
|
|
background-color: hsl(var(--muted));
|
|
}
|
|
|
|
/* --- Torn-paper edges ---------------------------------------------------
|
|
* The deckled edge is a FIXED ~13px band at the named edge; the rest of the
|
|
* element is masked solid. (The old `mask-size:100% 100%` stretched the 12px
|
|
* torn SVG across the whole element, eating ~40% of tall cards as a transparent
|
|
* wavy cut-out — the source of the hero/featured-pour/footer clipping.) */
|
|
.coffee-torn-top {
|
|
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12 L0 6 Q 5 2 10 5 T 20 4 T 30 6 T 40 3 T 50 5 T 60 4 T 70 5 T 80 3 T 90 5 T 100 4 L100 12 Z' fill='black'/%3E%3C/svg%3E"), linear-gradient(black, black);
|
|
mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12 L0 6 Q 5 2 10 5 T 20 4 T 30 6 T 40 3 T 50 5 T 60 4 T 70 5 T 80 3 T 90 5 T 100 4 L100 12 Z' fill='black'/%3E%3C/svg%3E"), linear-gradient(black, black);
|
|
-webkit-mask-position: top, bottom;
|
|
mask-position: top, bottom;
|
|
-webkit-mask-size: 100% 13px, 100% calc(100% - 12px);
|
|
mask-size: 100% 13px, 100% calc(100% - 12px);
|
|
-webkit-mask-repeat: no-repeat, no-repeat;
|
|
mask-repeat: no-repeat, no-repeat;
|
|
}
|
|
.coffee-torn-bottom {
|
|
-webkit-mask-image: linear-gradient(black, black), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L100 0 L100 6 Q 95 10 90 7 T 80 8 T 70 6 T 60 9 T 50 7 T 40 8 T 30 7 T 20 9 T 10 7 T 0 8 Z' fill='black'/%3E%3C/svg%3E");
|
|
mask-image: linear-gradient(black, black), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L100 0 L100 6 Q 95 10 90 7 T 80 8 T 70 6 T 60 9 T 50 7 T 40 8 T 30 7 T 20 9 T 10 7 T 0 8 Z' fill='black'/%3E%3C/svg%3E");
|
|
-webkit-mask-position: top, bottom;
|
|
mask-position: top, bottom;
|
|
-webkit-mask-size: 100% calc(100% - 12px), 100% 13px;
|
|
mask-size: 100% calc(100% - 12px), 100% 13px;
|
|
-webkit-mask-repeat: no-repeat, no-repeat;
|
|
mask-repeat: no-repeat, no-repeat;
|
|
}
|
|
.coffee-torn-top.coffee-torn-bottom {
|
|
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12 L0 6 Q 5 2 10 5 T 20 4 T 30 6 T 40 3 T 50 5 T 60 4 T 70 5 T 80 3 T 90 5 T 100 4 L100 12 Z' fill='black'/%3E%3C/svg%3E"), linear-gradient(black, black), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L100 0 L100 6 Q 95 10 90 7 T 80 8 T 70 6 T 60 9 T 50 7 T 40 8 T 30 7 T 20 9 T 10 7 T 0 8 Z' fill='black'/%3E%3C/svg%3E");
|
|
mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12 L0 6 Q 5 2 10 5 T 20 4 T 30 6 T 40 3 T 50 5 T 60 4 T 70 5 T 80 3 T 90 5 T 100 4 L100 12 Z' fill='black'/%3E%3C/svg%3E"), linear-gradient(black, black), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L100 0 L100 6 Q 95 10 90 7 T 80 8 T 70 6 T 60 9 T 50 7 T 40 8 T 30 7 T 20 9 T 10 7 T 0 8 Z' fill='black'/%3E%3C/svg%3E");
|
|
-webkit-mask-position: top, center, bottom;
|
|
mask-position: top, center, bottom;
|
|
-webkit-mask-size: 100% 13px, 100% calc(100% - 24px), 100% 13px;
|
|
mask-size: 100% 13px, 100% calc(100% - 24px), 100% 13px;
|
|
-webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
|
|
mask-repeat: no-repeat, no-repeat, no-repeat;
|
|
}
|
|
|
|
/* --- Surfaces ----------------------------------------------------------- */
|
|
.coffee-card {
|
|
background-color: hsl(var(--card));
|
|
color: hsl(var(--card-foreground));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.5rem;
|
|
}
|
|
.coffee-frame {
|
|
border: 1px solid hsl(var(--border));
|
|
background-color: hsl(var(--card));
|
|
}
|
|
.coffee-pencil-rule {
|
|
border-color: hsl(var(--border));
|
|
border-style: solid;
|
|
}
|
|
|
|
/* --- Chalkboard menu panel (inverts foreground/background for a hung board;
|
|
* light mode = dark board + cream chalk, dark mode = light menu paper) --- */
|
|
.coffee-chalkboard {
|
|
position: relative;
|
|
background-color: hsl(var(--foreground));
|
|
color: hsl(var(--background));
|
|
border-radius: 0.5rem;
|
|
box-shadow: inset 0 0 0 3px hsl(var(--background) / 0.12), inset 0 0 0 4px hsl(var(--foreground));
|
|
}
|
|
.coffee-chalk-rule {
|
|
border-color: hsl(var(--background) / 0.28);
|
|
border-style: solid;
|
|
}
|
|
.coffee-chalk-muted {
|
|
color: hsl(var(--background) / 0.72);
|
|
}
|
|
|
|
/* --- Hours: today highlight ---------------------------------------------
|
|
* Applied to the whole <tr> so both cells share one readable band. (Was on the
|
|
* <th> only with accent-foreground text over a 15%-accent tint — light-on-light,
|
|
* unreadable.) accent text over a 12% tint of the same accent reads cleanly. */
|
|
.coffee-hours-today > th,
|
|
.coffee-hours-today > td {
|
|
background-color: hsl(var(--accent) / 0.12);
|
|
}
|
|
.coffee-hours-today > th {
|
|
box-shadow: inset 3px 0 0 hsl(var(--accent));
|
|
padding-left: 0.75rem;
|
|
color: hsl(var(--accent));
|
|
}
|
|
|
|
/* --- Layout helpers ------------------------------------------------------
|
|
* coffee-pour-grid keeps an explicit md 2fr:3fr split — a non-standard grid
|
|
* ratio with no plain Tailwind utility. Single-column base collapses on
|
|
* mobile. (The min-height + standard-column grid helpers that used to live
|
|
* here are now plain Tailwind utilities in the templates, since the host
|
|
* build scans theme .ninjatpl files.) */
|
|
.coffee-pour-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
|
|
|
|
@media (min-width: 768px) {
|
|
.coffee-pour-grid { grid-template-columns: 2fr 3fr; align-items: center; }
|
|
}
|
|
|
|
/* --- Price + spec chips ------------------------------------------------- */
|
|
.coffee-price {
|
|
font-family: var(--font-mono, var(--coffee-mono-fallback));
|
|
font-variant-numeric: tabular-nums;
|
|
color: hsl(var(--accent));
|
|
}
|
|
.coffee-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
padding: 0.3rem 0.7rem;
|
|
border: 1px dashed hsl(var(--border));
|
|
border-radius: 9999px;
|
|
background-color: hsl(var(--muted));
|
|
color: hsl(var(--foreground));
|
|
font-family: var(--font-body, var(--coffee-body-fallback));
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* --- Circular stamp / badge (press on hover) ---------------------------- */
|
|
.coffee-stamp {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 4.25rem;
|
|
height: 4.25rem;
|
|
border-radius: 9999px;
|
|
background-color: hsl(var(--accent));
|
|
color: hsl(var(--accent-foreground));
|
|
border: 2px solid hsl(var(--accent-foreground) / 0.35);
|
|
box-shadow: inset 0 0 0 3px hsl(var(--accent));
|
|
font-family: var(--font-heading, var(--coffee-hand-fallback));
|
|
font-size: 0.95rem;
|
|
text-align: center;
|
|
line-height: 1.05;
|
|
transform: rotate(-6deg);
|
|
transition: transform 140ms ease;
|
|
}
|
|
.coffee-stamp:hover {
|
|
transform: rotate(-6deg) scale(0.94);
|
|
}
|
|
.coffee-stamp-sm {
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
font-size: 1rem;
|
|
transform: rotate(-4deg);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* --- Loyalty punch stamps ----------------------------------------------- */
|
|
.coffee-punch {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
aspect-ratio: 1 / 1;
|
|
border-radius: 9999px;
|
|
border: 2px dashed hsl(var(--border));
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
.coffee-punch-on {
|
|
border-style: solid;
|
|
border-color: hsl(var(--accent));
|
|
background-color: hsl(var(--accent) / 0.15);
|
|
color: hsl(var(--accent));
|
|
transform: rotate(-5deg);
|
|
}
|
|
.coffee-punch-reward {
|
|
border-color: hsl(var(--primary));
|
|
background-color: hsl(var(--primary) / 0.12);
|
|
color: hsl(var(--primary));
|
|
}
|
|
|
|
/* --- Location pin ------------------------------------------------------- */
|
|
.coffee-pin {
|
|
color: hsl(var(--accent));
|
|
}
|
|
|
|
/* --- Doodle divider draw-in --------------------------------------------- */
|
|
.coffee-doodle-draw path,
|
|
.coffee-doodle-draw ellipse,
|
|
.coffee-doodle-draw circle {
|
|
stroke-dasharray: 240;
|
|
stroke-dashoffset: 240;
|
|
animation: coffee-draw 1.4s ease forwards;
|
|
}
|
|
|
|
@keyframes coffee-draw {
|
|
to { stroke-dashoffset: 0; }
|
|
}
|
|
|
|
/* --- Motion safety: static fallback ------------------------------------- */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.kraft-tag,
|
|
.coffee-stamp,
|
|
.coffee-punch-on { transition: none; }
|
|
.kraft-tag:hover,
|
|
.coffee-stamp:hover { transform: none; }
|
|
.coffee-doodle-draw path,
|
|
.coffee-doodle-draw ellipse,
|
|
.coffee-doodle-draw circle {
|
|
stroke-dasharray: none;
|
|
stroke-dashoffset: 0;
|
|
animation: none;
|
|
}
|
|
}
|