/* ============================================================
THE LOOK (buyer picks one)
1) Choose a look by setting the class on the wrapper below:
class=”mag-root mag-look-gallery” Quiet Gallery
class=”mag-root mag-look-luxe” Soft Luxe
class=”mag-root mag-look-deco” Deco Frame
No look set = Quiet Gallery (the fallback).
2) Optional: override the look’s default two colors and two
fonts with the buyer’s brand by uncommenting these:
============================================================ */
.mag-root {
/* –brand-o: #yourcolor1; */ /* main brand color */
/* –pop-o: #yourcolor2; */ /* accent color */
/* –display-o: “Your Headline Font”, Georgia, serif; */
/* –body-o: “Your Body Font”, system-ui, sans-serif; */
}
/* —- Quiet Gallery = the base look + the fallback palette —- */
.mag-root {
–look-brand: #24304a; –look-brand-deep: #151d30;
–look-pop: #b3663c; –look-pop-soft: #d08a5a;
–look-paper: #f8f5f0; –look-ink: #10131b; –look-body: #4a4e59; –look-muted: #8a8f9c;
–look-panel: #ffffff; –look-quote-bg: transparent;
–look-display: “Libre Caslon Text”, Georgia, serif;
–look-body-font: Archivo, system-ui, -apple-system, sans-serif;
}
.mag-root.mag-look-luxe {
–look-brand: #3c2a23; –look-brand-deep: #241813;
–look-pop: #c1806a; –look-pop-soft: #d89c85;
–look-paper: #faf6f1; –look-ink: #191210; –look-body: #5c4d44; –look-muted: #a08375;
–look-panel: #ffffff; –look-quote-bg: #f2e7de;
–look-display: “Cormorant Garamond”, Georgia, serif;
–look-body-font: Jost, system-ui, -apple-system, sans-serif;
}
.mag-root.mag-look-deco {
–look-brand: #52222c; –look-brand-deep: #34141c;
–look-pop: #c9a15f; –look-pop-soft: #ddb877;
–look-paper: #faf5ee; –look-ink: #171112; –look-body: #4c4143; –look-muted: #a3722e;
–look-panel: #ffffff; –look-quote-bg: #f3ead9;
–look-display: “Playfair Display”, Georgia, serif;
–look-body-font: “Public Sans”, system-ui, -apple-system, sans-serif;
}
/* resolver: buyer override wins, else the look default */
.mag-root {
–mag-brand: var(–brand-o, var(–look-brand));
–mag-pop: var(–pop-o, var(–look-pop));
–mag-display: var(–display-o, var(–look-display));
–mag-body-font: var(–body-o, var(–look-body-font));
}
/* ============================================================
STRUCTURE (shared by every look – do not edit for a reskin)
============================================================ */
.mag-root, .mag-root * { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
.mag-root {
margin: 0; background: var(–look-paper); color: var(–look-ink);
font-family: var(–mag-body-font); line-height: 1.55; overflow-x: hidden;
}
.mag-root img { max-width: 100%; }
.mag-root a { color: inherit; }
.mag-root p, .mag-root h1, .mag-root h2, .mag-root h3, .mag-root h4, .mag-root blockquote { margin: 0; }
.mag-root h1, .mag-root h2, .mag-root h3, .mag-root h4 { font-family: var(–mag-display); font-weight: 700; line-height: 1.08; }
.mag-root .mag-progress { position: fixed; inset: 0 auto auto 0; z-index: 200; width: 0; height: 4px; background: var(–mag-pop); }
.mag-root .mag-topbar {
position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between;
gap: 18px; padding: 13px clamp(18px, 4vw, 48px);
}
.mag-root .mag-masthead { display: flex; align-items: center; gap: 12px; min-width: 180px; font-weight: 700; }
.mag-root .mag-masthead-mark { display: grid; place-items: center; width: 40px; height: 40px; font-family: var(–mag-display); font-weight: 700; }
.mag-root .mag-masthead small { display: block; font-family: var(–mag-body-font); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(–look-muted); }
.mag-root .mag-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 16px; font-family: var(–mag-body-font); font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(–look-muted); }
.mag-root .mag-nav a { text-decoration: none; }
.mag-root .mag-nav a:hover { color: var(–mag-pop); }
.mag-root .mag-cover { position: relative; min-height: calc(100vh – 66px); display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(24px, 4vw, 44px); align-items: end; padding: clamp(40px, 6vw, 64px) clamp(20px, 5vw, 48px); color: var(–look-paper); }
.mag-root .mag-cover h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); margin-bottom: 16px; color: var(–look-paper); }
.mag-root .mag-cover .mag-dek { max-width: 440px; color: rgba(255,255,255,0.8); font-family: var(–mag-body-font); font-size: 1rem; }
.mag-root .mag-cover-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.mag-root .mag-contents { list-style: none; margin: 0; padding: 0; counter-reset: mtoc; }
.mag-root .mag-contents li { counter-increment: mtoc; }
.mag-root .mag-contents a { display: flex; align-items: baseline; gap: 12px; text-decoration: none; }
.mag-root .mag-contents .mag-num { flex: 0 0 auto; }
.mag-root .mag-contents strong { display: block; font-family: var(–mag-body-font); }
.mag-root .mag-contents small { display: block; color: var(–look-muted); font-size: 0.82rem; }
.mag-root .mag-section { scroll-margin-top: 84px; padding: clamp(40px, 6vw, 60px) clamp(20px, 5vw, 48px); }
.mag-root .mag-section-head { max-width: 900px; margin-bottom: 26px; }
.mag-root .mag-label { display: inline-block; font-family: var(–mag-body-font); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(–mag-pop); margin-bottom: 12px; }
.mag-root .mag-section h2 { font-size: clamp(1.8rem, 3.6vw, 3rem); margin-bottom: 12px; }
.mag-root .mag-section p { color: var(–look-body); }
.mag-root .mag-lede { font-family: var(–mag-display); font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.18; color: var(–look-ink); }
.mag-root .mag-two-col, .mag-root .mag-feature, .mag-root .mag-metric-lockup, .mag-root .mag-cta { display: grid; gap: clamp(24px, 4vw, 44px); align-items: start; }
.mag-root .mag-two-col { grid-template-columns: 0.85fr 1.15fr; }
.mag-root .mag-feature { grid-template-columns: 1fr 0.4fr; align-items: center; }
.mag-root .mag-metric-lockup { grid-template-columns: 0.4fr 1fr; align-items: center; }
.mag-root .mag-cta { grid-template-columns: 1fr auto; align-items: center; }
.mag-root .mag-pullquote p { font-family: var(–mag-display); }
.mag-root .mag-pullquote cite { font-style: normal; }
.mag-root .mag-cards { display: grid; gap: clamp(16px, 2.5vw, 28px); }
.mag-root .mag-cards.mag-two { grid-template-columns: repeat(2, 1fr); }
.mag-root .mag-cards.mag-three { grid-template-columns: repeat(3, 1fr); }
.mag-root .mag-cards.mag-four { grid-template-columns: repeat(4, 1fr); }
.mag-root .mag-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.mag-root .mag-card p { font-size: 0.9rem; }
.mag-root .mag-card-quote { font-family: var(–mag-display); font-style: italic; margin-top: 10px; color: var(–look-ink); }
.mag-root .mag-metric strong { display: block; font-family: var(–mag-display); color: var(–mag-pop); line-height: 1; }
.mag-root .mag-metric span { display: block; font-family: var(–mag-body-font); font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(–look-muted); margin-top: 8px; }
.mag-root .mag-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mag-root .mag-checklist li { position: relative; padding-left: 30px; }
.mag-root .mag-prompt-code { font-family: “JetBrains Mono”, ui-monospace, Menlo, monospace; font-size: 0.92rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.mag-root .mag-copy { cursor: pointer; font-family: var(–mag-body-font); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.mag-root .mag-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.mag-root .mag-note strong { display: block; margin-bottom: 6px; }
.mag-root .mag-note { font-size: 0.9rem; }
.mag-root .mag-wows { margin-top: 26px; }
.mag-root .mag-kind-words { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.mag-root .mag-kind-word blockquote { margin: 0 0 8px; font-family: var(–mag-display); font-style: italic; font-size: 1.02rem; line-height: 1.2; }
.mag-root .mag-kind-word cite { font-style: normal; font-size: 0.74rem; font-weight: 600; color: var(–look-muted); }
.mag-root .mag-resource-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mag-root .mag-resource-item strong { display: block; margin-bottom: 3px; }
.mag-root .mag-resource-item { font-size: 0.9rem; color: var(–look-body); }
.mag-root .mag-cta h2 { color: var(–look-paper); }
.mag-root .mag-cta p { color: rgba(255,255,255,0.82); max-width: 640px; }
.mag-root .mag-feature-visual { min-height: 320px; background: linear-gradient(150deg, var(–mag-brand), var(–look-brand-deep)); }
.mag-root footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 24px clamp(20px, 5vw, 48px); color: var(–look-muted); font-family: var(–mag-body-font); font-size: 0.86rem; }
.mag-root .mag-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; cursor: pointer; text-decoration: none; font-family: var(–mag-body-font); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 900px) {
.mag-root .mag-topbar { flex-direction: column; align-items: flex-start; }
.mag-root .mag-nav { width: 100%; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.mag-root .mag-nav a { flex: 0 0 auto; white-space: nowrap; }
.mag-root .mag-cover, .mag-root .mag-two-col, .mag-root .mag-feature, .mag-root .mag-metric-lockup, .mag-root .mag-cta { grid-template-columns: 1fr; }
.mag-root .mag-cards.mag-three, .mag-root .mag-cards.mag-four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.mag-root .mag-cover { min-height: auto; }
.mag-root .mag-cards.mag-two, .mag-root .mag-cards.mag-three, .mag-root .mag-cards.mag-four { grid-template-columns: 1fr; }
}
@media print { .mag-root .mag-topbar, .mag-root .mag-progress { display: none; } .mag-root .mag-card, .mag-root .mag-kind-word { break-inside: avoid; } .mag-root .mag-copy { display: none; } }
/* ============================================================
A. QUIET GALLERY furniture (base) – no boxes, hairlines, ghosts
============================================================ */
.mag-root .mag-topbar { background: var(–look-paper); border-bottom: 1px solid rgba(16,19,27,0.14); }
.mag-root .mag-masthead-mark { background: none; color: var(–mag-brand); border: none; font-size: 1.6rem; }
.mag-root .mag-cover { background: linear-gradient(165deg, var(–look-brand-deep) 0%, var(–mag-brand) 70%, var(–look-brand-deep) 100%); }
.mag-root .mag-cover h1 { font-weight: 400; }
.mag-root .mag-cover-kicker { display: block; color: var(–look-pop-soft); font-family: var(–mag-body-font); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; margin-bottom: 18px; }
.mag-root .mag-cover-card { color: var(–look-paper); }
.mag-root .mag-cover-card h2 { font-family: var(–mag-body-font); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(–look-pop-soft); margin-bottom: 14px; }
.mag-root .mag-contents li { padding: 10px 0; border-top: 1px solid rgba(248,245,240,0.22); }
.mag-root .mag-contents .mag-num { font-family: var(–mag-display); color: var(–look-pop-soft); font-size: 0.85rem; }
.mag-root .mag-contents .mag-num::before { content: “No. ” counter(mtoc); }
.mag-root .mag-contents strong { color: var(–look-paper); }
.mag-root .mag-contents small { color: rgba(248,245,240,0.6); }
.mag-root .mag-section.mag-alt { background: #ffffff; }
.mag-root .mag-section.mag-dark { background: var(–look-brand-deep); color: var(–look-paper); }
.mag-root .mag-section.mag-dark h2, .mag-root .mag-section.mag-dark .mag-lede { color: var(–look-paper); }
.mag-root .mag-section.mag-dark p, .mag-root .mag-section.mag-dark li { color: rgba(248,245,240,0.8); }
.mag-root .mag-section.mag-dark .mag-label { color: var(–look-pop-soft); }
.mag-root .mag-cards.mag-three, .mag-root .mag-cards.mag-four { gap: 40px; }
.mag-root .mag-card { position: relative; padding-top: 18px; border-top: 1px solid rgba(16,19,27,0.28); }
.mag-root .mag-card h3 { font-weight: 700; }
.mag-root .mag-tag { position: static; display: block; margin-bottom: 10px; font-family: var(–mag-body-font); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(–mag-pop); font-style: normal; }
.mag-root .mag-prompt-card .mag-tag, .mag-root .mag-card.mag-side .mag-tag { position: static; font-size: 0.72rem; font-family: var(–mag-body-font); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(–mag-pop); display: block; margin-bottom: 10px; }
.mag-root .mag-pullquote { text-align: center; padding: 8px 20px; }
.mag-root .mag-pullquote::before { content: “\201C”; display: block; font-family: var(–mag-display); font-size: 3.4rem; line-height: 0.6; color: var(–mag-pop); margin-bottom: 12px; }
.mag-root .mag-pullquote p { font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.3; }
.mag-root .mag-pullquote cite { display: block; margin-top: 12px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(–look-muted); }
.mag-root .mag-section.mag-dark .mag-pullquote p { color: var(–look-paper); }
.mag-root .mag-section.mag-dark .mag-pullquote::before { color: var(–look-pop-soft); }
.mag-root .mag-section.mag-dark .mag-pullquote cite { color: rgba(248,245,240,0.6); }
.mag-root .mag-metric { text-align: center; }
.mag-root .mag-metric strong { font-weight: 400; font-size: clamp(3.4rem, 7vw, 4.8rem); }
.mag-root .mag-callout { border-top: 1px solid rgba(16,19,27,0.28); border-left: 3px solid var(–mag-pop); padding: 16px 0 4px 20px; }
.mag-root .mag-callout strong { display: block; font-family: var(–mag-body-font); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(–mag-pop); margin-bottom: 6px; }
.mag-root .mag-section.mag-dark .mag-callout p { color: rgba(248,245,240,0.8); }
.mag-root .mag-checklist li::before { content: “”; position: absolute; left: 0; top: 0.5em; width: 12px; height: 1px; background: var(–mag-pop); }
.mag-root .mag-prompt-card { border-top: 1px solid rgba(16,19,27,0.28); padding-top: 16px; }
.mag-root .mag-prompt-code { background: var(–look-brand-deep); color: var(–look-paper); padding: 16px; margin: 8px 0 14px; }
.mag-root .mag-copy { background: none; border: none; color: var(–mag-pop); padding: 4px 0; letter-spacing: 0.2em; }
.mag-root .mag-note { border-top: 1px solid rgba(16,19,27,0.28); padding-top: 12px; color: var(–look-body); }
.mag-root .mag-note strong { color: var(–look-ink); font-family: var(–mag-body-font); }
.mag-root .mag-kind-word { border-top: 1px solid rgba(16,19,27,0.28); padding-top: 12px; }
.mag-root .mag-resource-item { border-top: 1px solid rgba(16,19,27,0.18); padding-top: 10px; }
.mag-root .mag-resource-item strong { font-family: var(–mag-body-font); color: var(–look-ink); }
.mag-root .mag-section .mag-cta { background: var(–look-brand-deep); padding: clamp(28px, 5vw, 48px); }
.mag-root .mag-button { background: none; color: var(–look-paper); border: 1px solid var(–look-paper); }
.mag-root .mag-button:hover { background: var(–look-paper); color: var(–mag-brand); }
/* Quiet Gallery CONTRAST DIRECTIVE: its panels are borderless (transparent), so
a note or resource panel that lands in a dark band must read LIGHT, following
the band, not keep its own dark text. Scoped to gallery / no-look so it never
reaches the white panels of Luxe or Deco. */
.mag-root:not(.mag-look-luxe):not(.mag-look-deco) .mag-section.mag-dark .mag-note,
.mag-root:not(.mag-look-luxe):not(.mag-look-deco) .mag-section.mag-dark .mag-note strong,
.mag-root:not(.mag-look-luxe):not(.mag-look-deco) .mag-section.mag-dark .mag-resource-item,
.mag-root:not(.mag-look-luxe):not(.mag-look-deco) .mag-section.mag-dark .mag-resource-item strong,
.mag-root:not(.mag-look-luxe):not(.mag-look-deco) .mag-section.mag-dark .mag-resource-item p { color: var(–look-paper); }
/* ============================================================
B. SOFT LUXE furniture – rounded panels, soft shadows, pills
============================================================ */
.mag-root.mag-look-luxe .mag-topbar { background: rgba(250,246,241,0.85); backdrop-filter: blur(12px); border-bottom: none; }
.mag-root.mag-look-luxe .mag-masthead-mark { background: var(–mag-pop); color: var(–look-brand-deep); border-radius: 999px; }
.mag-root.mag-look-luxe .mag-cover { margin: 16px; border-radius: 26px; background: radial-gradient(120% 140% at 15% 0%, color-mix(in srgb, var(–mag-brand) 78%, #fff 4%) 0%, var(–look-brand-deep) 70%); min-height: calc(100vh – 98px); }
.mag-root.mag-look-luxe .mag-cover h1 { font-weight: 600; }
.mag-root.mag-look-luxe .mag-cover-kicker { display: inline-block; background: rgba(216,156,133,0.18); color: var(–look-pop-soft); border-radius: 999px; padding: 6px 16px; font-family: var(–mag-body-font); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 18px; }
.mag-root.mag-look-luxe .mag-cover-card { background: rgba(250,246,241,0.1); backdrop-filter: blur(6px); border-radius: 18px; padding: 22px 24px; color: var(–look-paper); }
.mag-root.mag-look-luxe .mag-cover-card h2 { font-family: var(–mag-body-font); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(–look-pop-soft); margin-bottom: 12px; }
.mag-root.mag-look-luxe .mag-contents li { padding: 6px 0; border-top: none; }
.mag-root.mag-look-luxe .mag-contents .mag-num { display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 999px; background: var(–mag-pop); color: var(–look-brand-deep); font-family: var(–mag-body-font); font-size: 0.72rem; font-weight: 600; }
.mag-root.mag-look-luxe .mag-contents .mag-num::before { content: counter(mtoc, decimal-leading-zero); }
.mag-root.mag-look-luxe .mag-contents strong { color: var(–look-paper); }
.mag-root.mag-look-luxe .mag-contents small { color: rgba(250,246,241,0.62); }
.mag-root.mag-look-luxe .mag-section.mag-alt { background: #f4ece3; }
.mag-root.mag-look-luxe .mag-section.mag-dark { margin: 0 16px; border-radius: 26px; background: var(–mag-brand); color: var(–look-paper); }
.mag-root.mag-look-luxe .mag-section.mag-dark h2, .mag-root.mag-look-luxe .mag-section.mag-dark .mag-lede { color: var(–look-paper); }
.mag-root.mag-look-luxe .mag-section.mag-dark p, .mag-root.mag-look-luxe .mag-section.mag-dark li { color: rgba(250,246,241,0.82); }
.mag-root.mag-look-luxe .mag-section.mag-dark .mag-label { color: var(–look-pop-soft); }
.mag-root.mag-look-luxe .mag-cards.mag-three, .mag-root.mag-look-luxe .mag-cards.mag-four { gap: 18px; }
.mag-root.mag-look-luxe .mag-card { position: static; padding: 24px 22px; border-top: none; background: var(–look-panel); border-radius: 18px; box-shadow: 0 14px 34px rgba(60,42,35,0.1); }
.mag-root.mag-look-luxe .mag-card h3 { font-weight: 700; font-size: 1.3rem; }
.mag-root.mag-look-luxe .mag-tag { position: static; display: inline-block; background: #f2e0d6; color: #8c503a; border-radius: 999px; font-family: var(–mag-body-font); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 12px; margin-bottom: 12px; }
.mag-root.mag-look-luxe .mag-pullquote { text-align: left; background: var(–look-quote-bg); border-radius: 18px; padding: 26px 28px; position: relative; }
.mag-root.mag-look-luxe .mag-pullquote::before { content: “\201C”; position: absolute; top: 6px; left: 18px; font-family: var(–mag-display); font-size: 4rem; line-height: 1; color: rgba(193,128,106,0.5); margin: 0; }
.mag-root.mag-look-luxe .mag-pullquote p { font-weight: 500; font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.55rem); line-height: 1.2; margin: 12px 0 8px 26px; }
.mag-root.mag-look-luxe .mag-pullquote cite { display: block; margin: 0 0 0 26px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(–look-muted); }
.mag-root.mag-look-luxe .mag-section.mag-dark .mag-pullquote { background: rgba(250,246,241,0.08); }
.mag-root.mag-look-luxe .mag-section.mag-dark .mag-pullquote p { color: var(–look-paper); }
.mag-root.mag-look-luxe .mag-section.mag-dark .mag-pullquote cite { color: rgba(250,246,241,0.6); }
.mag-root.mag-look-luxe .mag-metric { background: linear-gradient(150deg, var(–mag-brand), var(–look-brand-deep)); color: var(–look-paper); border-radius: 18px; display: grid; place-items: center; padding: 26px; min-height: 220px; }
.mag-root.mag-look-luxe .mag-metric strong { font-weight: 600; font-size: clamp(2.8rem, 6vw, 3.4rem); color: var(–look-pop-soft); }
.mag-root.mag-look-luxe .mag-metric span { color: rgba(250,246,241,0.7); }
.mag-root.mag-look-luxe .mag-callout { border: none; border-radius: 18px; background: var(–look-quote-bg); padding: 22px 24px; }
.mag-root.mag-look-luxe .mag-callout strong { font-family: var(–mag-body-font); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #8c503a; margin-bottom: 6px; display: block; }
.mag-root.mag-look-luxe .mag-checklist li::before { content: “”; position: absolute; left: 0; top: 0.2em; width: 16px; height: 16px; border-radius: 999px; background: var(–mag-pop); }
.mag-root.mag-look-luxe .mag-prompt-card { border-top: none; padding: 22px; background: var(–look-panel); border-radius: 18px; box-shadow: 0 14px 34px rgba(60,42,35,0.1); }
.mag-root.mag-look-luxe .mag-prompt-code { background: var(–look-brand-deep); color: var(–look-paper); border-radius: 12px; padding: 16px; margin: 6px 0 14px; }
.mag-root.mag-look-luxe .mag-copy { background: var(–mag-pop); color: var(–look-brand-deep); border: none; border-radius: 999px; padding: 8px 18px; letter-spacing: 0.08em; }
.mag-root.mag-look-luxe .mag-note { border-top: none; padding: 16px 18px; background: var(–look-panel); border-radius: 14px; box-shadow: 0 10px 26px rgba(60,42,35,0.08); color: var(–look-body); }
.mag-root.mag-look-luxe .mag-note strong { color: var(–look-ink); font-family: var(–mag-body-font); }
.mag-root.mag-look-luxe .mag-kind-word { border-top: none; padding: 16px 18px; background: var(–look-panel); border-radius: 14px; box-shadow: 0 10px 26px rgba(60,42,35,0.08); }
.mag-root.mag-look-luxe .mag-resource-item { border-top: none; padding: 14px 18px; background: var(–look-panel); border-radius: 12px; box-shadow: 0 8px 20px rgba(60,42,35,0.06); }
.mag-root.mag-look-luxe .mag-resource-item strong { font-family: var(–mag-body-font); color: var(–look-ink); }
.mag-root.mag-look-luxe .mag-section .mag-cta { background: var(–mag-brand); border-radius: 26px; padding: clamp(28px, 5vw, 44px); }
.mag-root.mag-look-luxe .mag-button { background: var(–mag-pop); color: var(–look-brand-deep); border: none; border-radius: 999px; }
.mag-root.mag-look-luxe .mag-button:hover { background: var(–look-pop-soft); color: var(–look-brand-deep); }
/* Luxe CONTRAST DIRECTIVE: a light panel keeps its own dark text even inside a
dark band, so a dark buyer brand can never make a white card render light
text on a light surface. Every light-surfaced piece pairs its background
with ink text at a specificity that beats the dark-band color rules. */
.mag-root.mag-look-luxe .mag-section.mag-dark .mag-card,
.mag-root.mag-look-luxe .mag-section.mag-dark .mag-prompt-card,
.mag-root.mag-look-luxe .mag-section.mag-dark .mag-note,
.mag-root.mag-look-luxe .mag-section.mag-dark .mag-kind-word,
.mag-root.mag-look-luxe .mag-section.mag-dark .mag-resource-item,
.mag-root.mag-look-luxe .mag-section.mag-dark .mag-callout { color: var(–look-ink); }
.mag-root.mag-look-luxe .mag-section.mag-dark .mag-card p,
.mag-root.mag-look-luxe .mag-section.mag-dark .mag-card .mag-card-quote,
.mag-root.mag-look-luxe .mag-section.mag-dark .mag-prompt-card p,
.mag-root.mag-look-luxe .mag-section.mag-dark .mag-resource-item p,
.mag-root.mag-look-luxe .mag-section.mag-dark .mag-callout p,
.mag-root.mag-look-luxe .mag-section.mag-dark .mag-callout li { color: var(–look-ink); }
/* ============================================================
C. DECO FRAME furniture – hairline double frames, centered
============================================================ */
.mag-root.mag-look-deco .mag-topbar { background: var(–look-paper); border-bottom: 1px solid rgba(23,17,18,0.14); }
.mag-root.mag-look-deco .mag-masthead-mark { background: none; color: var(–mag-brand); border: 1px solid var(–mag-pop); border-radius: 999px; }
.mag-root.mag-look-deco .mag-cover { position: relative; background: linear-gradient(118deg, var(–look-brand-deep) 0%, var(–mag-brand) 62%, var(–look-brand-deep) 100%); }
.mag-root.mag-look-deco .mag-cover::after { content: “”; position: absolute; inset: 14px; border: 1px solid rgba(201,161,95,0.5); pointer-events: none; }
.mag-root.mag-look-deco .mag-cover > * { position: relative; z-index: 1; }
.mag-root.mag-look-deco .mag-cover h1 { font-weight: 600; }
.mag-root.mag-look-deco .mag-cover-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(–look-pop-soft); font-family: var(–mag-body-font); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 16px; }
.mag-root.mag-look-deco .mag-cover-kicker::before, .mag-root.mag-look-deco .mag-cover-kicker::after { content: “\2726”; font-size: 0.65rem; }
.mag-root.mag-look-deco .mag-cover-card { position: relative; z-index: 1; background: var(–look-paper); color: var(–look-ink); padding: 24px 26px; box-shadow: 0 0 0 1px var(–look-ink), 0 0 0 4px var(–look-paper), 0 0 0 5px rgba(201,161,95,0.8); }
.mag-root.mag-look-deco .mag-cover-card h2 { text-align: center; font-family: var(–mag-body-font); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(–mag-brand); margin-bottom: 12px; }
.mag-root.mag-look-deco .mag-cover-card h2::after { content: “”; display: block; width: 44px; height: 1px; background: var(–mag-pop); margin: 10px auto 0; }
.mag-root.mag-look-deco .mag-contents li { padding: 8px 0; border-top: 1px dotted rgba(23,17,18,0.3); }
.mag-root.mag-look-deco .mag-contents li:first-child { border-top: none; }
.mag-root.mag-look-deco .mag-contents .mag-num { font-family: var(–mag-display); font-style: italic; color: var(–look-muted); font-size: 0.9rem; }
.mag-root.mag-look-deco .mag-contents .mag-num::before { content: counter(mtoc, upper-roman) “.”; }
.mag-root.mag-look-deco .mag-contents strong { color: var(–look-ink); }
.mag-root.mag-look-deco .mag-contents small { color: rgba(23,17,18,0.55); }
.mag-root.mag-look-deco .mag-section.mag-alt { background: #f3ebdd; }
.mag-root.mag-look-deco .mag-section.mag-dark { position: relative; background: var(–mag-brand); color: var(–look-paper); }
.mag-root.mag-look-deco .mag-section.mag-dark::after { content: “”; position: absolute; inset: 12px; border: 1px solid rgba(201,161,95,0.4); pointer-events: none; }
.mag-root.mag-look-deco .mag-section.mag-dark > * { position: relative; z-index: 1; }
.mag-root.mag-look-deco .mag-section.mag-dark h2, .mag-root.mag-look-deco .mag-section.mag-dark .mag-lede { color: var(–look-paper); }
.mag-root.mag-look-deco .mag-section.mag-dark p, .mag-root.mag-look-deco .mag-section.mag-dark li { color: rgba(250,245,238,0.82); }
.mag-root.mag-look-deco .mag-section.mag-dark .mag-label { color: var(–look-pop-soft); }
.mag-root.mag-look-deco .mag-cards.mag-three, .mag-root.mag-look-deco .mag-cards.mag-four { gap: 20px; }
.mag-root.mag-look-deco .mag-card { position: static; padding: 26px 22px 22px; text-align: center; border-top: none; background: #fff; box-shadow: 0 0 0 1px rgba(23,17,18,0.85), inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(201,161,95,0.75); }
.mag-root.mag-look-deco .mag-card h3 { font-weight: 700; font-size: 1.1rem; }
.mag-root.mag-look-deco .mag-tag { position: static; display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 12px; border: 1px solid var(–mag-pop); border-radius: 999px; background: none; font-family: var(–mag-display); font-style: italic; font-size: 0.85rem; color: var(–look-muted); letter-spacing: 0; text-transform: none; font-weight: 400; }
.mag-root.mag-look-deco .mag-pullquote { display: grid; place-content: center; text-align: center; padding: 26px 30px; background: var(–look-quote-bg); box-shadow: inset 0 0 0 1px rgba(82,34,44,0.35); }
.mag-root.mag-look-deco .mag-pullquote::before { content: none; }
.mag-root.mag-look-deco .mag-pullquote p { font-style: italic; font-weight: 500; font-size: clamp(1.25rem, 2.3vw, 1.45rem); line-height: 1.25; }
.mag-root.mag-look-deco .mag-pullquote cite { display: block; margin-top: 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(–look-muted); }
.mag-root.mag-look-deco .mag-section.mag-dark .mag-pullquote { color: var(–look-ink); }
.mag-root.mag-look-deco .mag-section.mag-dark .mag-pullquote p { color: var(–look-ink); }
.mag-root.mag-look-deco .mag-section.mag-dark .mag-pullquote cite { color: var(–look-muted); }
.mag-root.mag-look-deco .mag-metric { display: grid; place-items: center; text-align: center; padding: 26px; min-height: 220px; background: var(–look-ink); color: var(–look-paper); box-shadow: inset 0 0 0 4px var(–look-ink), inset 0 0 0 5px rgba(201,161,95,0.8); }
.mag-root.mag-look-deco .mag-metric strong { font-weight: 600; font-size: clamp(2.8rem, 6vw, 3.2rem); color: var(–look-pop-soft); }
.mag-root.mag-look-deco .mag-metric span { color: rgba(250,245,238,0.72); }
.mag-root.mag-look-deco .mag-callout { border: none; padding: 22px 26px; text-align: center; background: var(–look-quote-bg); box-shadow: inset 0 0 0 1px rgba(82,34,44,0.35); }
.mag-root.mag-look-deco .mag-callout strong { font-family: var(–mag-body-font); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(–mag-brand); margin-bottom: 8px; display: block; }
.mag-root.mag-look-deco .mag-checklist li::before { content: “\2726”; position: absolute; left: 0; top: 0; color: var(–mag-pop); font-size: 0.7rem; }
.mag-root.mag-look-deco .mag-prompt-card { border-top: none; padding: 24px 22px; text-align: center; background: #fff; box-shadow: 0 0 0 1px rgba(23,17,18,0.85), inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(201,161,95,0.75); }
.mag-root.mag-look-deco .mag-prompt-code { background: var(–look-ink); color: var(–look-paper); padding: 16px; margin: 6px 0 14px; text-align: left; }
.mag-root.mag-look-deco .mag-copy { background: none; border: 1px solid var(–mag-pop); color: var(–mag-brand); padding: 8px 18px; letter-spacing: 0.16em; }
.mag-root.mag-look-deco .mag-note { border-top: none; padding: 18px; text-align: center; background: #fff; box-shadow: inset 0 0 0 1px rgba(23,17,18,0.85), inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(201,161,95,0.6); color: var(–look-body); }
.mag-root.mag-look-deco .mag-note strong { color: var(–look-ink); font-family: var(–mag-body-font); }
.mag-root.mag-look-deco .mag-kind-word { border-top: none; padding: 16px; text-align: center; background: var(–look-quote-bg); box-shadow: inset 0 0 0 1px rgba(82,34,44,0.3); }
.mag-root.mag-look-deco .mag-resource-item { border-top: none; padding: 14px 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(23,17,18,0.75), inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(201,161,95,0.55); }
.mag-root.mag-look-deco .mag-resource-item strong { font-family: var(–mag-body-font); color: var(–look-ink); }
.mag-root.mag-look-deco .mag-section .mag-cta { position: relative; background: var(–look-ink); padding: clamp(30px, 5vw, 48px); box-shadow: inset 0 0 0 4px var(–look-ink), inset 0 0 0 5px rgba(201,161,95,0.7); }
.mag-root.mag-look-deco .mag-button { background: none; color: var(–look-paper); border: 1px solid var(–mag-pop); }
.mag-root.mag-look-deco .mag-button:hover { background: var(–mag-pop); color: var(–look-ink); }
/* Deco CONTRAST DIRECTIVE: same rule as Luxe – every light panel keeps ink text
inside a dark band, so a dark buyer brand can never produce light-on-light. */
.mag-root.mag-look-deco .mag-section.mag-dark .mag-card,
.mag-root.mag-look-deco .mag-section.mag-dark .mag-prompt-card,
.mag-root.mag-look-deco .mag-section.mag-dark .mag-note,
.mag-root.mag-look-deco .mag-section.mag-dark .mag-kind-word,
.mag-root.mag-look-deco .mag-section.mag-dark .mag-resource-item,
.mag-root.mag-look-deco .mag-section.mag-dark .mag-callout { color: var(–look-ink); }
.mag-root.mag-look-deco .mag-section.mag-dark .mag-card p,
.mag-root.mag-look-deco .mag-section.mag-dark .mag-card .mag-card-quote,
.mag-root.mag-look-deco .mag-section.mag-dark .mag-prompt-card p,
.mag-root.mag-look-deco .mag-section.mag-dark .mag-resource-item p,
.mag-root.mag-look-deco .mag-section.mag-dark .mag-callout p,
.mag-root.mag-look-deco .mag-section.mag-dark .mag-callout li { color: var(–look-ink); }
/* COMPLETE NOTES: the second reading layer. Keep the front of the issue
editorial, then place the remaining source depth in these grouped panels. */
.mag-root .mag-complete-notes { display: grid; gap: 12px; margin-top: 28px; }
.mag-root .mag-complete-notes details { border-top: 1px solid var(–look-ink); padding: 18px 0; }
.mag-root .mag-complete-notes summary { cursor: pointer; color: var(–look-ink); font-family: var(–mag-body-font); font-size: 1rem; font-weight: 700; line-height: 1.35; }
.mag-root .mag-complete-notes summary::marker { color: var(–mag-pop); }
.mag-root .mag-complete-notes .mag-complete-body { padding: 18px 0 2px; }
.mag-root .mag-complete-notes .mag-complete-body > :last-child { margin-bottom: 0; }
.mag-root.mag-look-luxe .mag-complete-notes details { border: 0; border-radius: 16px; padding: 18px 20px; background: var(–look-panel); box-shadow: 0 10px 26px rgba(60,42,35,0.08); }
.mag-root.mag-look-deco .mag-complete-notes details { border: 0; padding: 20px 22px; background: #fff; box-shadow: 0 0 0 1px rgba(23,17,18,0.75), inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(201,161,95,0.55); }
.mag-root.mag-look-deco .mag-complete-notes summary { text-align: center; font-family: var(–mag-display); }
Day 1
Day 2
Day 3
Day 4
Share
Guideline
For everyone
Prize draw
Prize draw
Prize draw
Back to top
(function () {
function wire() {
var bar = document.querySelector(“.mag-progress”);
function up() { if (!bar) return; var t = window.scrollY || document.documentElement.scrollTop; var h = document.documentElement.scrollHeight – window.innerHeight; bar.style.width = (h > 0 ? (t / h) * 100 : 0) + “%”; }
window.addEventListener(“scroll”, up, { passive: true }); window.addEventListener(“resize”, up); up();
}
if (document.readyState === “loading”) { document.addEventListener(“DOMContentLoaded”, wire); } else { wire(); }
})();
Snazzy Designs ForeverSeptember 2026
Member workbook
Get It Done Week:
Get It Done Week:
Q4 Prep
A five-day plan for getting your shop, listings, and storefront ready for Q4 without scrambling at the last minute.
The through-line
September is the golden month for a strong Q4.
This week is about preparing your shop and listings for the Q4 rush so the work is done in steady, useful steps rather than at the last minute.
The work stays small because it already has a place on your calendar.
Get It Done Week workbook
Five days, five actions
Your Q4 prep plan.
Work through one focused action each day.
Create your Q4 shop section
Create a shop section, category, collection, or storefront page for products Q4 shoppers should see together. Use a buyer-friendly seasonal, gift-focused, or need-focused name. Add every relevant current listing and lead with the strongest listings if your platform allows it.
Refresh your storefront
Create or update the Q4 assets a visitor sees first: banners, section covers, product thumbnails, and an announcement that points shoppers to the current seasonal collection.
Choose one product gap
Choose one seasonal product, bundle, or refresh. Look at the Q4 section through the buyer’s eyes: what would help them finish their purchase, find a better fit, or get more of what they came for?
Make one conversion fix
Make one change that helps a Q4 visitor move through your shop and buy with less hesitation. Choose the fix that will help shoppers most right now and make it today.
Day 5
Schedule weekly Q4 prep time through December.
Put a recurring Q4-prep block on your calendar. Use it to keep working on your product gap, add listings to the Q4 section, refresh storefront assets, or make the next conversion fix.
Put a recurring Q4-prep block on your calendar each week through December.
Get It Done Week workbook
Set it up
Give the first blocks a job.
Record the day, time, duration, start date, and end date. Then assign a Q4 prep task to the first few blocks.
30-45minutes daily
Keep it realistic
Small, consistent work adds up.
Plan for 30 to 45 minutes each day during the challenge to stay consistent and focused.
Mentioned in this issue
Tools, templates, and support.
Gather what you need before the week begins so you can move straight into the work.
- Selling platform accessEtsy shop login or website credentials.
- Design softwareCanva, Photopea, or the design app you prefer.
- Tuesday TrendsTuesday Trends reports or your favorite product idea lists.
- Organized filesFolders for product ideas, design files, listings, and mockup templates.
- Canva templatesShop banner, section cover, and product thumbnail templates for business use only, not PLR.
Do the week together
Community.
Use the group to get encouragement, ask questions, share progress, and celebrate every step, big or small.
Post your progress
Share photos of your designs, mockups, or listings. You can also share favorite tips, tutorials, or resources that help you stay productive and creative.
Keep it supportive
Be respectful and supportive. Celebrate others’ successes and offer helpful feedback.
A little extra motivation
Prizes.
Complete the feedback form, share your progress, and you will be in the mix.
Get featured
Everyone who completes the feedback form gets featured on the Snazzy Designs Forever email list.
$30 Snazzy Credit
One winner will receive a $30 Snazzy Credit voucher to spend in the shop.
Sponsor Spotlight
One winner will receive a Sponsor Spotlight to the 3,800+ email list, a $47 value. Borrow the audience to grow yours.
30-minute coaching
One winner will receive a 30-minute coaching session by Voxer, email, or Google Meet.
The full workbook
Complete notes
Every remaining useful detail, organized for easy reference.
Day 1: Create and fill your Q4 shop section
Create a shop section, category, collection, or storefront page for products you want Q4 shoppers to see together. Use a name a buyer understands. It can be seasonal, gift-focused, or centered on the kind of product they need.
Examples: Halloween printables, Christmas gifts, Christmas party games, New Year planners, and Black Friday templates.
Do this: Create the relevant section or sections in your selling platform. Give each section a clear customer-facing name. Add every current listing in the correct section. Put the strongest or most relevant listings first when your platform lets you choose the order.
Day 2: Create Q4 shop assets and refresh your storefront
Make the Q4 shop assets you need and refresh the storefront pieces a visitor sees first. Assets may include a shop banner, collection cover, announcement graphic, featured-listing graphic, or other platform visuals. Keep what already suits your Q4 shop, and create or update what needs to match the section built on Day 1.
Do this: Create shop banners, section covers, and product thumbnails for Fall, Halloween, Thanksgiving, Christmas, and New Year. Upload them to your shop.
Shop announcement: Point shoppers to the current seasonal section and tell them what they will find there: “[Seasonal collection name] is here. Shop [what the collection includes] for [the buyer or occasion]. Start here: [link or direction].”
Day 3: Spot one Q4 product gap
Choose one Q4 product gap to act on. It can be a seasonal product, a bundle, or a refresh of something you already sell.
Look at the section or sections you built on Day 1. Think about the buyer browsing it. What would help them finish their purchase, find a better fit, or get more of what they came for?
Record the product, bundle, or refresh you chose. List one or more products. Record the Q4 buyer need it covers. Note what it needs: product files, listing photos, listing title or description, tags, keywords or search terms, price, bundle contents, and anything else.
Day 4: Make one shop conversion fix
Make one change that helps a Q4 visitor move through your shop and buy with less hesitation. Pick the fix that will help shoppers most right now, then make it in your shop today.
Options: Set up an automatic thank-you email and ask for a review; add a related-product link to three seasonal listings; add your best current review as a listing image; or check that the FAQ section is clear and complete.
Day 5: Schedule weekly Q4 prep time through December
Put a recurring Q4-prep block on your calendar each week through December. Use the block to work on the product gap from Day 3, add listings to your Q4 section, refresh storefront assets, or make the next conversion fix.
Set the recurring block: day of the week, time, duration, start date, and end date. Then give the first few blocks a job by recording the date and Q4 prep task.
Before the week: workspace and tools checklist
Have access to your selling platform ready, including your Etsy shop login or website credentials. Have Canva (free or Pro), Photopea, or another design app ready. Keep Tuesday Trends reports or favorite product idea lists handy.
Set up folders on your computer or cloud storage. You can add new workbook tabs and save links inside. Suggested folders: Product Ideas, Design Files, Listings, and Mockup Templates.
Keep seasonal or trending clipart files available for customization. The workbook names CreativeFabrica, DonDaniDoodles, Peaceful Passive Income, and Wellness With Charlene. Have a seasonal listing calendar available for upcoming holidays, sales events, and popular shopping dates.
Other listed resources: “Why is my listing underperforming?” quiz; “How to use keywords on Etsy” blog post; 100 Free Mockup Templates for Printables; Mockups Mastery Course; AI Tools; Pinterest resources Nadalie Bardo and BlogToPin; Canva templates; Testimonials & Reviews (TBD).
Resources for Q4 prep
Canva Templates: Shop Banner, Section Covers, and Product Thumbnail. These are for use in your business only, not PLR.
Community
Join the private group for encouragement, questions, and wins with fellow challengers. Share photos of designs, mockups, or listings. Celebrate every step, big or small. Share favorite tips, tutorials, or resources that help you stay productive and creative.
Community guidelines: Be respectful and supportive. This is a positive space for learning and growth. Celebrate others’ successes and offer helpful feedback.
Prizes
Everyone who completes the feedback form gets featured on the email list. One winner receives a $30 Snazzy Credit voucher to spend in the shop. One prize draw offers a Sponsor Spotlight to the 3,800+ email list, valued at $47, so the winner can borrow the audience to grow theirs. One prize draw offers a 30-minute coaching session, with Voxer, email, or Google Meet as the format.
Start with the first section.
Choose your Q4 shop focus, then let the next five days turn it into a clearer, easier-to-shop storefront.