/* ════════════════════════════════════════════════════════════════════
Movieonomy™ storefront — design tokens + layout
Audience Economy Platform™. Cinematic dark + amber accent.
════════════════════════════════════════════════════════════════════ */
:root {
--bg: #0B0B0E;
--surface: #15151A;
--surface-2: #1F1F25;
--border: #2B2B33;
--border-2: #3A3A45;
--text: #F5F5F7;
--text-2: #D4D4D8;
--muted: #7A7A85;
--accent: #FF6B1A; /* amber-gold — commerce / premium */
--accent-hi: #E5236A;
--hot: #E5524B; /* red-orange — featured / sale */
--ok: #4ADE80;
--ff: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--ff-mono: ui-monospace, 'SF Mono', Menlo, monospace;
--r-sm: 4px;
--r-md: 8px;
--r-lg: 14px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--ff);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* ─── topbar ───────────────────────────────────────────────────── */
.topbar {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 28px;
background: rgba(11, 11, 14, 0.85);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 50;
}
.brand {
font-family: var(--ff);
font-weight: 700; font-size: 18px; letter-spacing: 1.5px;
text-transform: uppercase;
}
.brand .tm {
font-size: 9px; vertical-align: super;
color: var(--accent); letter-spacing: 0;
margin-left: 1px;
}
.brand .of {
display: block; font-size: 9.5px; font-weight: 500;
letter-spacing: 3px; color: var(--muted); margin-top: 2px;
}
.film-switch {
display: flex; gap: 6px;
}
.film-switch button {
background: transparent; color: var(--muted);
border: 1px solid var(--border);
padding: 8px 16px; border-radius: var(--r-sm);
font-family: var(--ff); font-size: 11px; font-weight: 600;
letter-spacing: 1.5px; text-transform: uppercase;
cursor: pointer; transition: all .15s ease;
}
.film-switch button:hover { color: var(--text); border-color: var(--border-2); }
.film-switch button.on {
color: var(--bg); background: var(--accent); border-color: var(--accent);
}
.back {
font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--muted);
padding: 8px 14px; border: 1px solid var(--border);
border-radius: var(--r-sm); transition: all .15s ease;
}
.back:hover { color: var(--text); border-color: var(--accent); }
/* ─── hero ─────────────────────────────────────────────────────── */
.hero {
padding: 56px 28px 32px;
max-width: 1240px; margin: 0 auto;
}
.hero-eye {
font-size: 10px; font-weight: 700; letter-spacing: 5px;
text-transform: uppercase; color: var(--accent);
margin-bottom: 14px;
}
.hero-title {
font-size: clamp(36px, 5vw, 64px); font-weight: 800;
letter-spacing: -1px; line-height: 1; margin: 0 0 14px;
}
.hero-sub {
color: var(--muted); font-size: 14px; margin: 0;
}
/* ─── filters ──────────────────────────────────────────────────── */
.filters {
padding: 0 28px;
max-width: 1240px; margin: 0 auto 32px;
display: flex; flex-wrap: wrap; gap: 8px;
}
.filters button {
background: transparent; color: var(--muted);
border: 1px solid var(--border);
padding: 7px 14px; border-radius: 999px;
font-family: var(--ff); font-size: 11.5px; font-weight: 600;
letter-spacing: 1px; text-transform: uppercase;
cursor: pointer; transition: all .15s ease;
}
.filters button:hover { color: var(--text); border-color: var(--border-2); }
.filters button.on {
color: var(--bg); background: var(--text); border-color: var(--text);
}
/* ─── grid ─────────────────────────────────────────────────────── */
.grid {
padding: 0 28px 64px;
max-width: 1240px; margin: 0 auto;
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 18px;
}
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
overflow: hidden;
transition: border-color .15s ease, transform .15s ease;
display: flex; flex-direction: column;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card-img {
aspect-ratio: 4 / 5;
background: var(--surface-2);
display: flex; align-items: center; justify-content: center;
position: relative;
}
.card-img img { width: 60%; height: 60%; object-fit: contain; opacity: 0.85; }
.badge {
position: absolute; top: 10px; left: 10px;
font-size: 9.5px; font-weight: 800; letter-spacing: 1.5px;
text-transform: uppercase;
padding: 3px 8px; border-radius: 2px;
background: var(--hot); color: #fff;
}
.card-body {
padding: 14px 16px 18px;
display: flex; flex-direction: column; gap: 8px;
}
.card-cat {
font-size: 9.5px; font-weight: 700; letter-spacing: 2px;
text-transform: uppercase; color: var(--accent);
}
.card-name {
margin: 0; font-size: 15.5px; font-weight: 600;
color: var(--text); line-height: 1.25;
}
.card-price { display: flex; gap: 8px; align-items: baseline; margin-top: 4px; }
.card-price .now { font-size: 16px; font-weight: 700; color: var(--text); }
.card-price .was { font-size: 13px; color: var(--muted); text-decoration: line-through; }
/* ─── product detail ───────────────────────────────────────────── */
.product {
max-width: 1100px; margin: 0 auto;
padding: 48px 28px 80px;
display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
}
.product-img {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
aspect-ratio: 1 / 1;
display: flex; align-items: center; justify-content: center;
position: relative;
}
.product-img img { width: 55%; height: 55%; object-fit: contain; }
.product-info { display: flex; flex-direction: column; gap: 14px; }
.product-cat {
font-size: 10px; font-weight: 700; letter-spacing: 3px;
text-transform: uppercase; color: var(--accent);
}
.product-title {
margin: 0; font-size: clamp(28px, 3vw, 40px); font-weight: 800;
letter-spacing: -.5px; line-height: 1.1;
}
.product-price { display: flex; gap: 10px; align-items: baseline; }
.product-price .now { font-size: 26px; font-weight: 700; }
.product-price .was { color: var(--muted); text-decoration: line-through; }
.product-desc { color: var(--text-2); line-height: 1.65; margin: 6px 0 0; }
.product-meta {
display: flex; gap: 18px; flex-wrap: wrap;
color: var(--muted); font-size: 12px; margin-top: 8px;
}
.product-meta code {
font-family: var(--ff-mono); font-size: 11.5px;
color: var(--text-2); background: var(--surface); padding: 2px 6px;
border-radius: 3px; border: 1px solid var(--border);
}
.product-meta .ff {
text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600;
}
.cta {
margin-top: 16px;
background: var(--accent); color: var(--bg);
border: 0; border-radius: var(--r-sm);
padding: 14px 24px;
font-family: var(--ff); font-size: 12.5px; font-weight: 800;
letter-spacing: 2px; text-transform: uppercase;
cursor: pointer; transition: background .15s ease;
}
.cta:hover:not(:disabled) { background: var(--accent-hi); }
.cta:disabled { opacity: 0.45; cursor: not-allowed; }
.back-link {
margin-top: 6px; color: var(--muted); font-size: 12px;
text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600;
}
.back-link:hover { color: var(--accent); }
/* ─── states ───────────────────────────────────────────────────── */
.state {
max-width: 1100px; margin: 0 auto; padding: 96px 28px;
text-align: center; color: var(--muted);
}
.state h2 { color: var(--text); margin: 0 0 8px; font-size: 22px; }
/* ─── footer ───────────────────────────────────────────────────── */
.foot {
border-top: 1px solid var(--border);
padding: 28px;
display: flex; justify-content: space-between; align-items: center;
color: var(--muted); font-size: 12px;
flex-wrap: wrap; gap: 8px;
}
.foot .tm { color: var(--accent); }
/* ─── responsive ───────────────────────────────────────────────── */
@media (max-width: 720px) {
.topbar { padding: 14px 18px; }
.hero { padding: 36px 18px 24px; }
.filters { padding: 0 18px; }
.grid { padding: 0 18px 48px; gap: 12px; }
.product { grid-template-columns: 1fr; gap: 28px; padding: 32px 18px 56px; }
}
/* ════════════════════════════════════════════════════════════════
v1b — cart, checkout, thank-you, badge, toast
════════════════════════════════════════════════════════════════ */
/* ─── topbar-right + cart badge ─────────────────────────────────── */
.topbar-right { display: flex; align-items: center; gap: 10px; }
.cart-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
background: var(--surface-2); color: var(--text);
border: 1px solid var(--border);
border-radius: var(--r-sm);
font-family: var(--ff); font-size: 11px; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase;
transition: border-color .15s ease, color .15s ease;
}
.cart-badge:hover { border-color: var(--accent); color: var(--accent); }
.cart-badge .count {
background: var(--accent); color: var(--bg);
border-radius: 999px;
padding: 1px 8px;
font-size: 10px; font-weight: 800;
}
.cart-badge.empty .count { display: none; }
/* ─── toast ────────────────────────────────────────────────────── */
.mvn-toast {
position: fixed; bottom: 24px; left: 50%;
transform: translateX(-50%) translateY(20px);
background: var(--surface);
color: var(--text);
border: 1px solid var(--accent);
padding: 10px 22px;
border-radius: var(--r-sm);
font-family: var(--ff); font-size: 12.5px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase;
z-index: 9999;
opacity: 0;
transition: opacity .25s ease, transform .25s ease;
pointer-events: none;
box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.mvn-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ─── cart page ────────────────────────────────────────────────── */
.cart-page {
max-width: 1100px; margin: 0 auto;
padding: 48px 28px 80px;
}
.cart-page > h1 {
font-size: clamp(28px, 3vw, 40px); font-weight: 800;
letter-spacing: -.4px; margin: 0 0 22px;
}
.movie-strip {
font-size: 11px; letter-spacing: 2.5px;
text-transform: uppercase; color: var(--muted);
margin-bottom: 18px;
}
.movie-strip strong { color: var(--accent); font-weight: 700; }
.cart-line {
display: grid; grid-template-columns: 80px 1fr auto;
gap: 18px; align-items: center;
padding: 18px 0;
border-bottom: 1px solid var(--border);
}
.cart-line-img {
width: 80px; height: 100px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
display: flex; align-items: center; justify-content: center;
}
.cart-line-img img { width: 60%; height: 60%; object-fit: contain; opacity: .85; }
.cart-line-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cart-line-name { font-size: 15.5px; font-weight: 600; color: var(--text); }
.cart-line-sku {
font-family: var(--ff-mono); font-size: 11.5px;
color: var(--muted);
}
.cart-line-actions { display: flex; align-items: center; gap: 14px; }
.qty-controls {
display: inline-flex; align-items: center;
border: 1px solid var(--border);
border-radius: var(--r-sm);
overflow: hidden;
}
.qty-controls button {
background: transparent; color: var(--text);
border: 0; padding: 6px 12px;
font-size: 15px; cursor: pointer;
transition: background .15s ease;
}
.qty-controls button:hover { background: var(--surface-2); }
.qty-controls .qty {
min-width: 32px; text-align: center;
font-weight: 700; font-size: 14px;
}
.cart-line-total {
font-size: 16px; font-weight: 700;
min-width: 80px; text-align: right;
}
.cart-line-remove {
background: transparent; color: var(--muted);
border: 0; cursor: pointer;
font-family: var(--ff); font-size: 10.5px; font-weight: 600;
letter-spacing: 1.5px; text-transform: uppercase;
}
.cart-line-remove:hover { color: var(--hot); }
.cart-summary {
margin-top: 28px; padding-top: 22px;
border-top: 1px solid var(--border);
display: flex; flex-direction: column; gap: 14px;
align-items: flex-end;
}
.cart-sub {
display: flex; justify-content: space-between;
width: 100%;
font-size: 18px; font-weight: 700;
}
.cart-sub > span:first-child {
color: var(--muted); font-size: 13px; font-weight: 600;
letter-spacing: 2px; text-transform: uppercase;
}
.cart-note { color: var(--muted); font-size: 12px; margin: 0; align-self: flex-end; }
/* ─── checkout ─────────────────────────────────────────────────── */
.checkout {
max-width: 1080px; margin: 0 auto;
padding: 48px 28px 80px;
display: grid; grid-template-columns: 1fr 340px;
gap: 36px;
}
.checkout form { display: flex; flex-direction: column; gap: 18px; }
.cart-recap {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 22px 22px 18px;
align-self: start;
}
.cart-recap-line {
display: flex; justify-content: space-between;
font-size: 13px; padding: 8px 0;
border-bottom: 1px solid var(--border);
}
.cart-recap-line:last-of-type { border-bottom: 0; }
.cart-recap-total {
display: flex; justify-content: space-between;
font-size: 16px; font-weight: 700;
padding-top: 12px; margin-top: 6px;
border-top: 1px solid var(--border);
}
.field-group {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 22px 22px 14px;
}
.field-group > h3 {
margin: 0 0 14px; font-size: 11px; font-weight: 700;
letter-spacing: 2.5px; text-transform: uppercase;
color: var(--accent);
}
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field > label {
font-size: 11px; color: var(--muted); font-weight: 600;
letter-spacing: 1px; text-transform: uppercase;
}
.field input, .field select, .field textarea {
background: var(--surface-2); color: var(--text);
border: 1px solid var(--border); border-radius: var(--r-sm);
padding: 10px 12px;
font-family: var(--ff); font-size: 14px;
outline: none; transition: border-color .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field-row { display: grid; grid-template-columns: 2fr 80px 100px; gap: 10px; margin-bottom: 12px; }
.field-row .field { margin-bottom: 0; }
.radio-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.radio-group label {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
border: 1px solid var(--border); border-radius: var(--r-sm);
cursor: pointer; transition: border-color .15s ease;
font-size: 14px;
}
.radio-group label:hover { border-color: var(--border-2); }
.radio-group label.on { border-color: var(--accent); }
.radio-group input[type="radio"] { accent-color: var(--accent); margin: 0; }
.ff-section { padding-top: 6px; }
.checkout-error {
color: var(--hot);
background: rgba(229,82,75,.06);
border: 1px solid rgba(229,82,75,.3);
border-radius: var(--r-sm);
padding: 10px 14px;
font-size: 13px;
}
.checkout-submit { align-self: flex-end; }
/* ─── thank-you ────────────────────────────────────────────────── */
.thanks {
max-width: 720px; margin: 0 auto;
padding: 64px 28px 96px; text-align: center;
}
.thanks-eye {
font-size: 10px; font-weight: 700; letter-spacing: 5px;
text-transform: uppercase; color: var(--accent);
margin-bottom: 14px;
}
.thanks h1 {
font-size: clamp(32px, 4vw, 52px); font-weight: 800;
letter-spacing: -.5px; margin: 0 0 6px;
}
.thanks .order-no {
font-family: var(--ff-mono); font-size: 16px;
color: var(--text-2); margin-bottom: 8px;
}
.thanks-body {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-md); padding: 8px 24px 16px;
margin: 28px 0; text-align: left;
}
.thanks-section { padding: 16px 0; border-bottom: 1px solid var(--border); }
.thanks-section:last-child { border-bottom: 0; }
.thanks-section h3 {
margin: 0 0 6px; font-size: 10.5px; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase;
color: var(--accent);
}
.thanks-section p { margin: 0; line-height: 1.55; color: var(--text-2); }
.thanks-items { display: flex; flex-direction: column; gap: 6px; }
.thanks-item { display: flex; justify-content: space-between; font-size: 13.5px; }
.thanks-totals {
display: flex; flex-direction: column; gap: 4px;
margin-top: 12px; padding-top: 12px;
border-top: 1px solid var(--border);
}
.thanks-totals > div { display: flex; justify-content: space-between; font-size: 13.5px; }
.thanks-totals > .grand {
font-weight: 800; font-size: 16px;
padding-top: 8px; margin-top: 6px;
border-top: 1px solid var(--border);
}
/* ─── v1b responsive ──────────────────────────────────────────── */
@media (max-width: 760px) {
.topbar-right { gap: 6px; }
.cart-badge { padding: 7px 10px; font-size: 10px; letter-spacing: 1.5px; }
.checkout { grid-template-columns: 1fr; padding: 32px 18px 56px; }
.cart-recap { order: -1; }
.cart-line { grid-template-columns: 60px 1fr; }
.cart-line-actions {
grid-column: 1 / -1;
justify-content: space-between;
padding-top: 6px;
}
.field-row { grid-template-columns: 1fr 1fr 1fr; }
.thanks-body { padding: 6px 18px 14px; }
}
/* ════════════════════════════════════════════════════════════════════
MOVIEONOMY™ MVP SaaS DESIGN SYSTEM
────────────────────────────────────
Marketing surfaces (/, /platform, /mln-integration, /partners,
/analytics, plus the upgraded /store) use the .mvp-* class system.
Existing v1b storefront classes are NOT modified.
Brand: black background · white typography · gold accent (#FF6B1A).
No cream. No beige. No additional colors.
Foil-gradient usage is reserved for:
• key statistics
• CTA buttons
• featured conversion sections
All other gold uses solid #FF6B1A.
Quality bar: Stripe / Shopify / Salesforce / BlackRock / Vercel / Ferrari.
════════════════════════════════════════════════════════════════════ */
:root {
/* Strictly additive — does not redefine existing v1b tokens */
--mvp-bg-deep: #08090C; /* hero / final-cta deeper black */
--mvp-bg: #0B0B0E;
--mvp-surface: #15151A;
--mvp-surface-2: #1F1F25;
--mvp-border: #2B2B33;
--mvp-border-hi: #3A3A45;
--mvp-text: #FFFFFF;
--mvp-text-2: #D4D4D8;
--mvp-muted: #8A8A93;
--mvp-gold: #FF6B1A;
--mvp-gold-hi: #E5236A;
--mvp-gold-deep: #6B2FAF;
--mvp-gold-rule: linear-gradient(to right, transparent 0%, var(--mvp-gold) 50%, transparent 100%);
--mvp-gold-foil: linear-gradient(135deg, #E5236A 0%, #FF6B1A 35%, #6B2FAF 70%, #FF6B1A 100%);
--mvp-nav-h: 72px;
--mvp-container: 1360px;
--mvp-radius-sm: 4px;
--mvp-radius-md: 8px;
--mvp-shadow-lg: 0 30px 80px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(212,162,76,.02);
}
/* ─── Marketing body backdrop ────────────────────────────────────── */
body.mvp { background: var(--mvp-bg); color: var(--mvp-text); }
body.mvp.mvp-no-scroll { overflow: hidden; }
/* ═════════ NAVIGATION ═════════════════════════════════════════════ */
.mvp-nav {
position: sticky; top: 0; z-index: 100;
background: rgba(11, 11, 14, .82);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom: 1px solid rgba(255,255,255,.06);
height: var(--mvp-nav-h);
display: flex; align-items: center;
}
.mvp-nav-inner {
max-width: var(--mvp-container);
width: 100%;
margin: 0 auto;
padding: 0 32px;
display: flex; align-items: center; gap: 32px;
}
.mvp-brand {
display: flex; flex-direction: column; line-height: 1;
text-decoration: none;
}
.mvp-brand-name {
font-family: var(--ff);
font-size: 18px; font-weight: 800;
letter-spacing: 2.4px; text-transform: uppercase;
color: var(--mvp-text);
}
.mvp-brand-name .tm {
font-size: 9px; vertical-align: super;
color: var(--mvp-gold); margin-left: 1px;
letter-spacing: 0;
}
.mvp-brand-tag {
font-size: 9px; font-weight: 600;
letter-spacing: 3.5px; text-transform: uppercase;
color: var(--mvp-gold); margin-top: 3px;
}
.mvp-nav-links {
display: flex; align-items: center; gap: 4px;
margin-left: auto;
}
.mvp-nav-links a {
font-family: var(--ff);
font-size: 13px; font-weight: 500;
color: var(--mvp-text-2);
padding: 8px 14px; border-radius: var(--mvp-radius-sm);
text-decoration: none;
transition: color .15s ease, background .15s ease;
}
.mvp-nav-links a:hover { color: var(--mvp-text); background: rgba(255,255,255,.04); }
.mvp-nav-links a.on { color: var(--mvp-gold); }
/* Nav CTA button — uses foil per modification #3 (CTA buttons reserved) */
.mvp-nav-cta {
font-family: var(--ff);
font-size: 13px; font-weight: 700;
letter-spacing: .3px;
color: var(--mvp-bg-deep);
background: var(--mvp-gold-foil);
padding: 10px 20px; border-radius: var(--mvp-radius-sm);
text-decoration: none;
transition: filter .15s ease, transform .12s ease;
border: 0;
margin-left: 4px;
}
.mvp-nav-cta:hover { filter: brightness(1.1); }
.mvp-nav-cta:active { transform: translateY(1px); }
/* Cart badge inside MVP nav — extends, doesn't replace, the v1b badge */
.mvp-nav .cart-badge {
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.03);
color: var(--mvp-text-2);
font-weight: 700; letter-spacing: 1.8px;
}
.mvp-nav .cart-badge:hover { border-color: var(--mvp-gold); color: var(--mvp-gold); }
.mvp-nav .cart-badge .count { background: var(--mvp-gold); color: var(--mvp-bg-deep); }
/* Hamburger button (visible only on mobile) */
.mvp-nav-burger {
display: none;
margin-left: auto;
background: transparent;
border: 1px solid var(--mvp-border);
color: var(--mvp-text);
width: 40px; height: 40px;
border-radius: var(--mvp-radius-sm);
cursor: pointer;
align-items: center; justify-content: center;
transition: border-color .15s ease;
}
.mvp-nav-burger:hover { border-color: var(--mvp-gold); }
.mvp-nav-burger svg { width: 18px; height: 18px; display: block; }
.mvp-nav-burger .icon-x { display: none; }
.mvp-nav-burger.open .icon-bars { display: none; }
.mvp-nav-burger.open .icon-x { display: block; }
/* ─── Mobile drawer ──────────────────────────────────────────────── */
.mvp-drawer {
position: fixed; inset: 0;
background: rgba(8, 9, 12, .94);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 99;
display: flex; flex-direction: column;
padding: calc(var(--mvp-nav-h) + 24px) 24px 32px;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}
.mvp-drawer.open {
opacity: 1;
pointer-events: auto;
}
.mvp-drawer-links {
display: flex; flex-direction: column; gap: 2px;
}
.mvp-drawer-links a {
font-family: var(--ff);
font-size: 18px; font-weight: 600;
color: var(--mvp-text);
padding: 16px 8px;
border-bottom: 1px solid rgba(255,255,255,.05);
text-decoration: none;
display: flex; align-items: center; justify-content: space-between;
}
.mvp-drawer-links a:hover { color: var(--mvp-gold); }
.mvp-drawer-links a.on { color: var(--mvp-gold); }
.mvp-drawer-links a::after {
content: '→';
color: var(--mvp-muted);
font-size: 14px;
transition: color .15s ease, transform .15s ease;
}
.mvp-drawer-links a:hover::after { color: var(--mvp-gold); transform: translateX(2px); }
/* Drawer CTA — foil per modification #3 (CTA buttons reserved) */
.mvp-drawer-cta {
margin-top: 24px;
font-family: var(--ff);
font-size: 15px; font-weight: 700; letter-spacing: .3px;
color: var(--mvp-bg-deep);
background: var(--mvp-gold-foil);
padding: 16px 20px;
border-radius: var(--mvp-radius-sm);
text-decoration: none;
text-align: center;
transition: filter .15s ease;
}
.mvp-drawer-cta:hover { filter: brightness(1.1); }
.mvp-drawer-foot {
margin-top: auto;
font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
color: var(--mvp-muted);
display: flex; flex-direction: column; gap: 6px;
}
.mvp-drawer-foot .tm { color: var(--mvp-gold); }
/* ═════════ HERO ═══════════════════════════════════════════════════ */
.mvp-hero {
background: var(--mvp-bg-deep);
position: relative;
overflow: hidden;
padding: 120px 0 96px;
/* Modification #2 — cinematic enterprise scale: 88vh + vertically centered */
min-height: 88vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.mvp-hero::before {
/* subtle gold ambient — appears as a slow studio-light wash */
content: '';
position: absolute; inset: -20% -10% auto -10%;
height: 70%;
background: radial-gradient(60% 60% at 50% 0%,
rgba(212,162,76,.10) 0%,
rgba(212,162,76,.03) 30%,
transparent 60%);
pointer-events: none;
}
.mvp-hero-inner {
max-width: var(--mvp-container);
width: 100%;
margin: 0 auto;
padding: 0 32px;
text-align: center;
position: relative;
}
.mvp-hero-eye {
display: inline-flex; align-items: center; gap: 14px;
font-family: var(--ff);
font-size: 11px; font-weight: 700;
letter-spacing: 5px; text-transform: uppercase;
color: var(--mvp-gold);
margin-bottom: 28px;
}
.mvp-hero-eye::before,
.mvp-hero-eye::after {
content: ''; width: 40px; height: 1px;
background: var(--mvp-gold-rule);
}
.mvp-hero-brand {
font-family: var(--ff);
font-size: clamp(34px, 4vw, 56px);
font-weight: 800;
letter-spacing: 4px;
text-transform: uppercase;
margin: 0 0 4px;
color: var(--mvp-text);
}
.mvp-hero-brand .tm { color: var(--mvp-gold); font-size: .35em; vertical-align: super; }
.mvp-hero-net {
font-family: var(--ff);
font-size: 13px; font-weight: 600;
letter-spacing: 6px; text-transform: uppercase;
color: var(--mvp-gold);
margin-bottom: 56px;
}
.mvp-hero-net .tm { font-size: 9px; vertical-align: super; }
.mvp-h1 {
font-family: var(--ff);
font-size: clamp(46px, 6.5vw, 96px);
font-weight: 800;
letter-spacing: -1.5px;
line-height: .96;
color: var(--mvp-text);
margin: 0 0 28px;
max-width: 1100px;
margin-inline: auto;
}
/* Modification #3 — headline accent uses solid gold, not foil */
.mvp-h1 em {
font-style: normal;
color: var(--mvp-gold);
}
.mvp-lede {
font-family: var(--ff);
font-size: clamp(17px, 1.6vw, 21px);
font-weight: 400;
line-height: 1.55;
color: var(--mvp-text-2);
max-width: 760px;
margin: 0 auto 48px;
}
.mvp-cta-pair {
display: inline-flex; flex-wrap: wrap; gap: 12px;
justify-content: center;
}
/* Primary CTA — foil per modification #3 (CTA buttons reserved) */
.mvp-btn-primary {
font-family: var(--ff);
font-size: 14px; font-weight: 700;
letter-spacing: .4px;
color: var(--mvp-bg-deep);
background: var(--mvp-gold-foil);
padding: 16px 32px;
border-radius: var(--mvp-radius-sm);
text-decoration: none;
border: 0; cursor: pointer;
transition: filter .15s ease, transform .12s ease, box-shadow .2s ease;
box-shadow: 0 12px 32px -8px rgba(212,162,76,.35);
}
.mvp-btn-primary:hover { filter: brightness(1.1); box-shadow: 0 16px 40px -8px rgba(212,162,76,.5); }
.mvp-btn-primary:active { transform: translateY(1px); }
.mvp-btn-ghost {
font-family: var(--ff);
font-size: 14px; font-weight: 600;
letter-spacing: .4px;
color: var(--mvp-text);
background: transparent;
border: 1px solid var(--mvp-border-hi);
padding: 16px 32px;
border-radius: var(--mvp-radius-sm);
text-decoration: none;
cursor: pointer;
transition: border-color .15s ease, color .15s ease;
}
.mvp-btn-ghost:hover { border-color: var(--mvp-gold); color: var(--mvp-gold); }
/* Hero variant for subpages (Platform / MLN / Partners / Analytics) */
.mvp-hero.sub {
padding: 88px 0 64px;
min-height: 56vh; /* subpages don't need the full cinematic height */
}
.mvp-hero.sub .mvp-h1 { font-size: clamp(40px, 5.2vw, 72px); }
.mvp-hero.sub .mvp-lede { margin-bottom: 0; }
/* ═════════ SECTION SCAFFOLD ═══════════════════════════════════════ */
.mvp-section {
padding: 112px 0;
position: relative;
}
.mvp-section.tight { padding: 80px 0; }
.mvp-section.dark { background: var(--mvp-bg-deep); }
.mvp-section.surface { background: var(--mvp-surface); }
.mvp-section-inner {
max-width: var(--mvp-container);
margin: 0 auto;
padding: 0 32px;
}
.mvp-section-head {
text-align: center;
margin-bottom: 64px;
}
.mvp-eyebrow {
display: inline-flex; align-items: center; gap: 14px;
font-family: var(--ff);
font-size: 11px; font-weight: 700;
letter-spacing: 5px; text-transform: uppercase;
color: var(--mvp-gold);
margin-bottom: 20px;
}
.mvp-eyebrow::before,
.mvp-eyebrow::after {
content: ''; width: 30px; height: 1px;
background: var(--mvp-gold-rule);
}
.mvp-h2 {
font-family: var(--ff);
font-size: clamp(32px, 4vw, 56px);
font-weight: 700;
letter-spacing: -.8px;
line-height: 1.04;
color: var(--mvp-text);
margin: 0 0 18px;
max-width: 920px;
margin-inline: auto;
}
.mvp-h3 {
font-family: var(--ff);
font-size: 20px;
font-weight: 600;
letter-spacing: -.2px;
color: var(--mvp-text);
margin: 0 0 10px;
}
.mvp-section-sub {
font-family: var(--ff);
font-size: 16px;
line-height: 1.6;
color: var(--mvp-text-2);
max-width: 720px;
margin: 0 auto;
}
/* ═════════ STATS (Why Merchandise Matters) ═══════════════════════ */
.mvp-stat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--mvp-border);
border: 1px solid var(--mvp-border);
border-radius: var(--mvp-radius-md);
overflow: hidden;
}
.mvp-stat {
background: var(--mvp-bg);
padding: 40px 28px;
display: flex; flex-direction: column; gap: 8px;
}
/* Key statistics — foil retained per modification #3 (reserved use) */
.mvp-stat-v {
font-family: var(--ff);
font-size: clamp(36px, 4.2vw, 52px);
font-weight: 800;
letter-spacing: -1.5px;
line-height: 1;
background: var(--mvp-gold-foil);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.mvp-stat-l {
font-family: var(--ff);
font-size: 13px; font-weight: 500;
line-height: 1.5;
color: var(--mvp-text-2);
margin-top: 10px;
}
/* ═════════ FLOW DIAGRAM (Film → Products → Fans → Revenue) ═══════ */
.mvp-flow {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
align-items: stretch;
max-width: 980px;
margin: 0 auto;
}
.mvp-flow-step {
position: relative;
display: flex; flex-direction: column;
align-items: center; text-align: center;
padding: 28px 16px;
}
.mvp-flow-step::after {
content: '→';
position: absolute;
right: -10px; top: 50%;
transform: translateY(-50%);
font-size: 22px; line-height: 1;
color: var(--mvp-gold);
font-family: var(--ff);
font-weight: 300;
}
.mvp-flow-step:last-child::after { content: none; }
.mvp-flow-icon {
width: 64px; height: 64px;
border-radius: 50%;
background: var(--mvp-surface);
border: 1px solid var(--mvp-gold);
display: flex; align-items: center; justify-content: center;
margin-bottom: 16px;
color: var(--mvp-gold);
font-family: var(--ff);
font-size: 20px; font-weight: 700;
}
.mvp-flow-label {
font-family: var(--ff);
font-size: 14px; font-weight: 600;
letter-spacing: 1.5px; text-transform: uppercase;
color: var(--mvp-text);
}
/* MLN integration flow — 5 steps, vertical on mobile */
.mvp-pledge-flow {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
max-width: 1100px;
margin: 0 auto;
}
.mvp-pledge-flow .mvp-flow-step::after { right: -8px; font-size: 18px; }
.mvp-pledge-flow .mvp-flow-icon { width: 56px; height: 56px; font-size: 17px; }
.mvp-pledge-flow .mvp-flow-label { font-size: 12px; letter-spacing: 1.2px; }
/* ═════════ PILLAR / CAPABILITY CARDS ═════════════════════════════ */
.mvp-pillar-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.mvp-pillar {
background: var(--mvp-surface);
border: 1px solid var(--mvp-border);
border-radius: var(--mvp-radius-md);
padding: 36px 28px 32px;
position: relative;
transition: border-color .25s ease, transform .25s ease;
}
.mvp-pillar:hover {
border-color: var(--mvp-gold);
transform: translateY(-3px);
}
.mvp-pillar-num {
position: absolute; top: 24px; right: 28px;
font-family: var(--ff);
font-size: 12px; font-weight: 700;
letter-spacing: 2px;
color: var(--mvp-gold);
}
.mvp-pillar h3 {
font-family: var(--ff);
font-size: 18px; font-weight: 700;
color: var(--mvp-text);
margin: 0 0 10px;
letter-spacing: -.2px;
}
.mvp-pillar p {
font-family: var(--ff);
font-size: 14.5px;
line-height: 1.6;
color: var(--mvp-text-2);
margin: 0;
}
.mvp-pillar-icon {
width: 44px; height: 44px;
border-radius: var(--mvp-radius-sm);
border: 1px solid var(--mvp-gold);
display: flex; align-items: center; justify-content: center;
color: var(--mvp-gold);
margin-bottom: 22px;
}
/* ═════════ ATTRIBUTION GRID (Every Purchase Creates Intelligence) ═ */
.mvp-attr-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
max-width: 1100px;
margin: 0 auto;
}
.mvp-attr {
background: var(--mvp-surface);
border: 1px solid var(--mvp-border);
border-radius: var(--mvp-radius-sm);
padding: 22px 18px;
text-align: left;
position: relative;
transition: border-color .2s ease;
}
.mvp-attr:hover { border-color: var(--mvp-gold); }
.mvp-attr-l {
font-family: var(--ff);
font-size: 10px; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase;
color: var(--mvp-gold);
margin-bottom: 6px;
}
.mvp-attr-v {
font-family: var(--ff);
font-size: 15px; font-weight: 600;
color: var(--mvp-text);
letter-spacing: -.2px;
}
/* ═════════ ABOUT / LONG-COPY BLOCK ═══════════════════════════════ */
.mvp-prose {
max-width: 760px;
margin: 0 auto;
font-family: var(--ff);
font-size: 17px;
line-height: 1.75;
color: var(--mvp-text-2);
}
.mvp-prose p { margin: 0 0 22px; }
.mvp-prose p:last-child { margin-bottom: 0; }
.mvp-prose strong { color: var(--mvp-text); font-weight: 700; }
.mvp-prose em { font-style: normal; color: var(--mvp-gold); font-weight: 600; }
/* ═════════ FEATURED STOREFRONT STRIP ═════════════════════════════ */
.mvp-featured-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
margin-bottom: 36px;
}
.mvp-featured-head .mvp-h2 { text-align: left; margin: 0; max-width: 640px; }
.mvp-featured-cta {
font-family: var(--ff);
font-size: 13px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase;
color: var(--mvp-gold);
text-decoration: none;
padding: 12px 20px;
border: 1px solid var(--mvp-gold);
border-radius: var(--mvp-radius-sm);
transition: background .2s ease, color .2s ease;
white-space: nowrap;
}
.mvp-featured-cta:hover { background: var(--mvp-gold); color: var(--mvp-bg-deep); }
.mvp-featured-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 18px;
}
/* ═════════ FINAL CTA BAND ═════════════════════════════════════════ */
.mvp-cta-band {
background: var(--mvp-bg-deep);
border-top: 1px solid var(--mvp-border);
border-bottom: 1px solid var(--mvp-border);
padding: 96px 0;
position: relative;
overflow: hidden;
text-align: center;
}
.mvp-cta-band::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(50% 60% at 50% 50%,
rgba(212,162,76,.08) 0%,
transparent 60%);
pointer-events: none;
}
.mvp-cta-band .mvp-h2 {
font-size: clamp(36px, 4.4vw, 60px);
margin-bottom: 24px;
}
.mvp-cta-band .mvp-lede {
margin: 0 auto 40px;
}
/* ═════════ FOOTER ═════════════════════════════════════════════════ */
.mvp-footer {
background: var(--mvp-bg-deep);
border-top: 1px solid var(--mvp-border);
padding: 64px 0 32px;
color: var(--mvp-muted);
}
.mvp-footer-inner {
max-width: var(--mvp-container);
margin: 0 auto;
padding: 0 32px;
}
.mvp-footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 56px;
}
.mvp-footer-brand {
display: flex; flex-direction: column;
}
.mvp-footer-brand-name {
font-family: var(--ff);
font-size: 16px; font-weight: 800;
letter-spacing: 2.4px; text-transform: uppercase;
color: var(--mvp-text);
}
.mvp-footer-brand-name .tm { font-size: 9px; vertical-align: super; color: var(--mvp-gold); }
.mvp-footer-brand-tag {
font-family: var(--ff);
font-size: 10px; font-weight: 600;
letter-spacing: 3px; text-transform: uppercase;
color: var(--mvp-gold);
margin-top: 4px;
}
.mvp-footer-brand-line {
font-family: var(--ff);
font-size: 13px;
line-height: 1.6;
color: var(--mvp-text-2);
margin-top: 18px;
max-width: 280px;
}
.mvp-footer-col h4 {
font-family: var(--ff);
font-size: 10px; font-weight: 700;
letter-spacing: 2.5px; text-transform: uppercase;
color: var(--mvp-gold);
margin: 0 0 18px;
}
.mvp-footer-col ul {
list-style: none;
padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 10px;
}
.mvp-footer-col a {
font-family: var(--ff);
font-size: 14px;
color: var(--mvp-text-2);
text-decoration: none;
transition: color .15s ease;
}
.mvp-footer-col a:hover { color: var(--mvp-gold); }
.mvp-footer-bar {
border-top: 1px solid var(--mvp-border);
padding-top: 24px;
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
}
.mvp-footer-bar .copyright {
font-family: var(--ff);
font-size: 12px;
color: var(--mvp-muted);
}
.mvp-footer-bar .legal {
font-family: var(--ff);
font-size: 11px;
letter-spacing: 1px;
color: var(--mvp-muted);
}
.mvp-footer-bar .legal .tm { color: var(--mvp-gold); }
/* ═════════ RESPONSIVE ═════════════════════════════════════════════ */
@media (max-width: 1080px) {
.mvp-pillar-grid { grid-template-columns: repeat(2, 1fr); }
.mvp-attr-grid { grid-template-columns: repeat(3, 1fr); }
.mvp-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
.mvp-footer-brand { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 860px) {
.mvp-nav-links, .mvp-nav-cta { display: none; }
.mvp-nav-burger { display: inline-flex; }
.mvp-stat-grid { grid-template-columns: repeat(2, 1fr); }
.mvp-flow {
grid-template-columns: 1fr;
max-width: 360px;
}
.mvp-flow-step { padding: 16px; flex-direction: row; gap: 16px; }
.mvp-flow-icon { margin: 0; flex: 0 0 56px; }
.mvp-flow-step::after { content: '↓'; right: 50%; top: auto; bottom: -22px; transform: translateX(50%); }
.mvp-pledge-flow { grid-template-columns: 1fr; }
.mvp-pledge-flow .mvp-flow-step::after { content: '↓'; right: 50%; top: auto; bottom: -22px; transform: translateX(50%); }
.mvp-section { padding: 80px 0; }
.mvp-hero { padding: 88px 0 64px; min-height: 80vh; }
.mvp-featured-head { flex-direction: column; align-items: flex-start; }
.mvp-featured-head .mvp-h2 { text-align: left; }
}
@media (max-width: 640px) {
.mvp-nav-inner { padding: 0 18px; gap: 16px; }
.mvp-hero-inner, .mvp-section-inner, .mvp-footer-inner { padding: 0 18px; }
.mvp-pillar-grid { grid-template-columns: 1fr; }
.mvp-attr-grid { grid-template-columns: repeat(2, 1fr); }
.mvp-stat-grid { grid-template-columns: 1fr; }
.mvp-footer-grid { grid-template-columns: 1fr; gap: 36px; }
.mvp-footer-brand { grid-column: auto; }
.mvp-cta-pair { width: 100%; }
.mvp-btn-primary, .mvp-btn-ghost { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.mvp-pillar, .mvp-attr, .mvp-btn-primary, .mvp-drawer {
transition: none !important;
}
}
/* ════════════════════════════════════════════════════════════════════
v1c — Flagship Movie Store engine + Directory styles
Namespaced .flag-* (store engine) and .dir-* (directory).
Reuses --mvp-* tokens; introduces --store-primary / --store-secondary
as fallback custom properties overridden per-store at runtime.
════════════════════════════════════════════════════════════════════ */
:root {
--store-primary: #0F0F12;
--store-secondary: #FF6B1A;
}
/* ── Flagship Hero ────────────────────────────────────────────────── */
.flag-hero {
position: relative;
min-height: 78vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--mvp-bg);
border-bottom: 1px solid rgba(212,162,76,.18);
}
.flag-hero-bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center 30%;
background-repeat: no-repeat;
filter: saturate(.92) brightness(.62);
transform: scale(1.03);
}
.flag-hero-vignette {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 50% 70%, rgba(0,0,0,0) 0%, rgba(15,15,18,.55) 60%, rgba(15,15,18,.95) 100%),
linear-gradient(180deg, rgba(15,15,18,.6) 0%, rgba(15,15,18,0) 35%, rgba(15,15,18,.55) 100%);
}
.flag-hero-inner {
position: relative;
z-index: 1;
max-width: 1080px;
margin: 0 auto;
padding: 120px 24px 100px;
text-align: center;
}
.flag-hero-eye {
font-family: var(--ff);
font-size: 11px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--store-secondary, var(--mvp-gold));
margin-bottom: 28px;
}
.flag-hero-logo {
margin: 0 auto 28px;
max-width: 360px;
}
.flag-hero-logo img { display: block; width: 100%; height: auto; }
.flag-hero-title {
font-family: var(--ff);
font-size: clamp(48px, 8vw, 92px);
font-weight: 700;
letter-spacing: -2.5px;
line-height: 1.02;
color: #fff;
margin: 0 0 22px;
text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.flag-hero-desc {
max-width: 720px;
margin: 0 auto 38px;
color: rgba(255,255,255,.86);
font-size: 17px;
line-height: 1.7;
text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.flag-hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
margin-bottom: 24px;
}
.flag-hero-meta {
font-family: var(--ff);
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(255,255,255,.7);
}
/* Floating cart pill (top-right corner of hero on desktop, inline mobile) */
.store-cart {
position: absolute;
top: 110px;
right: 36px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
border: 1px solid rgba(255,255,255,.22);
border-radius: 999px;
color: #fff;
text-decoration: none;
font-family: var(--ff);
font-size: 11px;
font-weight: 700;
letter-spacing: 2.2px;
text-transform: uppercase;
background: rgba(15,15,18,.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: border-color .15s ease, color .15s ease;
z-index: 2;
}
.store-cart:hover { border-color: var(--store-secondary, var(--mvp-gold)); color: var(--store-secondary, var(--mvp-gold)); }
.store-cart-count {
display: inline-block;
min-width: 22px;
padding: 2px 7px;
border-radius: 999px;
background: var(--store-secondary, var(--mvp-gold));
color: #0F0F12;
font-size: 11px;
letter-spacing: 0;
text-align: center;
}
/* ── Main / sections wrapper ──────────────────────────────────────── */
.flag-main {
max-width: var(--mvp-container, 1360px);
margin: 0 auto;
padding: 24px 24px 80px;
}
.flag-state {
text-align: center;
padding: 96px 16px;
color: var(--mvp-muted, rgba(255,255,255,.55));
font-family: var(--ff);
letter-spacing: 1.4px;
font-size: 13px;
}
.flag-section {
padding: 56px 0 24px;
border-top: 1px solid rgba(212,162,76,.10);
}
.flag-section:first-child { border-top: 0; }
.flag-section-head {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 36px;
}
.flag-section-head .mvp-eyebrow { margin: 0; }
.flag-section-title {
font-family: var(--ff);
font-size: clamp(28px, 3.6vw, 40px);
font-weight: 700;
letter-spacing: -1px;
color: var(--mvp-text, #fff);
margin: 0;
}
/* ── Directory page ───────────────────────────────────────────────── */
.dir-hero {
padding: 120px 24px 56px;
border-bottom: 1px solid rgba(212,162,76,.18);
}
.dir-hero-inner { max-width: var(--mvp-container, 1360px); margin: 0 auto; text-align: center; }
.dir-title {
font-family: var(--ff);
font-size: clamp(44px, 6.5vw, 76px);
font-weight: 700;
letter-spacing: -2px;
color: var(--mvp-text, #fff);
margin: 14px 0 18px;
}
.dir-sub {
max-width: 760px;
margin: 0 auto;
color: var(--mvp-text-2, rgba(255,255,255,.72));
font-size: 17px;
line-height: 1.65;
}
.dir-main {
max-width: var(--mvp-container, 1360px);
margin: 0 auto;
padding: 56px 24px 96px;
}
.dir-state {
text-align: center;
padding: 80px 16px;
color: var(--mvp-muted, rgba(255,255,255,.55));
font-family: var(--ff);
letter-spacing: 1.4px;
font-size: 13px;
}
.dir-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 28px;
}
.dir-card {
display: block;
background: rgba(255,255,255,.02);
border: 1px solid rgba(212,162,76,.18);
border-radius: 16px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.dir-card:hover {
border-color: var(--mvp-gold);
transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.dir-card-poster {
position: relative;
aspect-ratio: 16/10;
background: #0F0F12;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.dir-card-poster img {
width: 100%; height: 100%;
object-fit: cover;
transition: opacity .18s ease;
}
.dir-featured {
position: absolute;
top: 14px; left: 14px;
z-index: 2;
padding: 6px 12px;
font-family: var(--ff);
font-size: 10px;
font-weight: 800;
letter-spacing: 2.4px;
text-transform: uppercase;
color: #0F0F12;
background: var(--mvp-gold);
border-radius: 999px;
}
.dir-card-body { padding: 24px 22px 26px; }
.dir-card-title {
font-family: var(--ff);
font-size: 24px;
font-weight: 700;
letter-spacing: -.5px;
color: var(--mvp-text, #fff);
margin: 8px 0 6px;
}
.dir-card-release {
font-family: var(--ff);
font-size: 11px;
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--mvp-muted, rgba(255,255,255,.55));
margin-bottom: 12px;
}
.dir-card-desc {
color: var(--mvp-text-2, rgba(255,255,255,.72));
font-size: 14.5px;
line-height: 1.6;
margin: 0 0 18px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.dir-card-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 20px;
}
.dir-badge {
font-family: var(--ff);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--mvp-gold);
border: 1px solid rgba(212,162,76,.32);
padding: 5px 10px;
border-radius: 999px;
}
.dir-card-cta {
font-family: var(--ff);
font-size: 12px;
font-weight: 800;
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--mvp-gold);
}
@media (max-width: 720px) {
.flag-hero-inner { padding: 100px 18px 80px; }
.store-cart { position: static; margin: 16px auto 0; display: inline-flex; }
.dir-hero { padding: 96px 18px 40px; }
.dir-main { padding: 40px 18px 72px; }
.dir-grid { gap: 20px; }
}
/* ════════════════════════════════════════════════════════════════════
v1c.2 — Flagship Movie Store v2 (.flag2-*)
Premium IP-destination layout.
Sits on top of .flag-* base layer from 6C — only overrides where the
flagship treatment requires more spacing, larger type, or a different
layout (marquee, VIP, bundle, dealer ribbon, foot CTA).
════════════════════════════════════════════════════════════════════ */
/* ── Band 1 — Cinematic Hero ─────────────────────────────────────── */
.flag2-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--mvp-bg, #0F0F12);
border-bottom: 1px solid rgba(212,162,76,.22);
}
.flag2-hero-bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center 35%;
background-repeat: no-repeat;
filter: saturate(.9) brightness(.58);
transform: scale(1.04);
}
.flag2-hero-grain {
position: absolute; inset: 0;
background-image:
repeating-linear-gradient(0deg,
rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px,
rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px);
mix-blend-mode: overlay;
opacity: .35;
}
.flag2-hero-vignette {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 50% 75%, rgba(0,0,0,0) 0%, rgba(15,15,18,.55) 55%, rgba(15,15,18,.97) 100%),
linear-gradient(180deg, rgba(15,15,18,.7) 0%, rgba(15,15,18,0) 30%, rgba(15,15,18,.5) 100%);
}
.flag2-hero-inner {
position: relative;
z-index: 1;
max-width: 1080px;
margin: 0 auto;
padding: 140px 24px 120px;
text-align: center;
width: 100%;
}
.flag2-eyebrow-pill {
display: inline-block;
padding: 8px 18px;
border: 1px solid rgba(212,162,76,.55);
border-radius: 999px;
font-family: var(--ff);
font-size: 11px;
font-weight: 700;
letter-spacing: 4.5px;
text-transform: uppercase;
color: var(--store-secondary, var(--mvp-gold));
background: rgba(15,15,18,.4);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
margin-bottom: 40px;
}
.flag2-hero-logo {
margin: 0 auto 32px;
max-width: 480px;
}
.flag2-hero-logo img { display: block; width: 100%; height: auto; }
.flag2-hero-title {
font-family: var(--ff);
font-size: clamp(56px, 9vw, 112px);
font-weight: 800;
letter-spacing: -3px;
line-height: .98;
color: #fff;
margin: 0 0 18px;
text-shadow: 0 2px 32px rgba(0,0,0,.55);
}
.flag2-hero-tagline {
font-family: var(--ff);
font-size: clamp(15px, 1.6vw, 18px);
font-weight: 500;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--store-secondary, var(--mvp-gold));
margin: 0 0 30px;
position: relative;
padding: 16px 0;
}
.flag2-hero-tagline::before,
.flag2-hero-tagline::after {
content: '';
position: absolute;
left: 50%;
width: 80px;
height: 1px;
background: var(--store-secondary, var(--mvp-gold));
opacity: .55;
transform: translateX(-50%);
}
.flag2-hero-tagline::before { top: 0; }
.flag2-hero-tagline::after { bottom: 0; }
.flag2-hero-desc {
max-width: 720px;
margin: 0 auto 44px;
color: rgba(255,255,255,.86);
font-size: 17px;
line-height: 1.7;
text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.flag2-hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
margin-bottom: 36px;
}
.flag2-cta-primary { min-width: 200px; }
.flag2-cta-ghost { min-width: 180px; }
.flag2-hero-meta {
font-family: var(--ff);
font-size: 11px;
letter-spacing: 3.5px;
text-transform: uppercase;
color: rgba(255,255,255,.72);
margin-bottom: 10px;
}
.flag2-hero-platform {
font-family: var(--ff);
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: rgba(255,255,255,.5);
}
.flag2-hero-platform strong { color: var(--store-secondary, var(--mvp-gold)); font-weight: 700; }
.flag2-hero-scroll {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: rgba(255,255,255,.55);
font-family: var(--ff);
font-size: 10px;
letter-spacing: 2.5px;
text-transform: uppercase;
}
.flag2-hero-scroll svg { width: 18px; height: 18px; animation: flag2-bob 2.4s ease-in-out infinite; }
@keyframes flag2-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
/* Nav cart pill (replaces hero floating pill) */
.store-cart--nav {
position: static;
margin: 0 4px 0 4px;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* ── Band 2 — The Story ──────────────────────────────────────────── */
.flag2-story {
background: linear-gradient(180deg, rgba(15,15,18,1) 0%, rgba(20,20,26,1) 100%);
padding: 140px 24px 140px;
border-bottom: 1px solid rgba(212,162,76,.10);
}
.flag2-story-inner {
max-width: 920px;
margin: 0 auto;
text-align: center;
}
.flag2-story-h {
font-family: var(--ff);
font-size: clamp(36px, 4.5vw, 56px);
font-weight: 700;
letter-spacing: -1.2px;
line-height: 1.1;
color: var(--mvp-text, #fff);
margin: 14px 0 32px;
}
.flag2-story-body {
font-family: var(--ff);
font-size: clamp(17px, 1.6vw, 20px);
line-height: 1.75;
color: rgba(255,255,255,.82);
margin: 0 auto 40px;
max-width: 800px;
}
.flag2-story-rule {
width: 60px;
height: 1px;
margin: 0 auto 32px;
background: var(--store-secondary, var(--mvp-gold));
opacity: .65;
}
.flag2-story-foot {
font-family: var(--ff);
font-size: 14.5px;
line-height: 1.7;
color: rgba(255,255,255,.6);
max-width: 720px;
margin: 0 auto;
}
/* ── Main band container ─────────────────────────────────────────── */
.flag2-main {
max-width: var(--mvp-container, 1360px);
margin: 0 auto;
padding: 0 24px;
}
.flag2-bands { display: block; }
/* ── Generic band ────────────────────────────────────────────────── */
.flag2-band {
padding: 120px 0 100px;
border-top: 1px solid rgba(212,162,76,.08);
}
.flag2-band:first-child { border-top: 0; padding-top: 130px; }
.flag2-band-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
margin-bottom: 56px;
flex-wrap: wrap;
}
.flag2-band-head-left { max-width: 720px; }
.flag2-eyebrow {
font-family: var(--ff);
font-size: 11px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--store-secondary, var(--mvp-gold));
margin-bottom: 14px;
}
.flag2-band-h {
font-family: var(--ff);
font-size: clamp(36px, 4.2vw, 52px);
font-weight: 700;
letter-spacing: -1.2px;
line-height: 1.05;
color: var(--mvp-text, #fff);
margin: 0 0 16px;
}
.flag2-band-sub {
font-family: var(--ff);
font-size: 16.5px;
line-height: 1.65;
color: rgba(255,255,255,.72);
margin: 0;
}
.flag2-band-cta {
font-family: var(--ff);
font-size: 12px;
font-weight: 800;
letter-spacing: 2.6px;
text-transform: uppercase;
color: var(--store-secondary, var(--mvp-gold));
text-decoration: none;
border-bottom: 1px solid transparent;
padding-bottom: 4px;
transition: border-color .15s ease;
white-space: nowrap;
}
.flag2-band-cta:hover { border-bottom-color: var(--store-secondary, var(--mvp-gold)); }
/* ── Grids ───────────────────────────────────────────────────────── */
.flag2-grid {
display: grid;
gap: 28px;
}
.flag2-grid--1 { grid-template-columns: minmax(0, 1fr); }
.flag2-grid--2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.flag2-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.flag2-grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.flag2-card {
background: rgba(255,255,255,.02);
border: 1px solid rgba(212,162,76,.16);
border-radius: 14px;
overflow: hidden;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.flag2-card:hover {
border-color: var(--store-secondary, var(--mvp-gold));
transform: translateY(-3px);
box-shadow: 0 14px 44px rgba(0,0,0,.4);
}
.flag2-card-img {
position: relative;
aspect-ratio: 1 / 1;
background: #0F0F12;
display: flex; align-items: center; justify-content: center;
padding: 18px;
overflow: hidden;
}
.flag2-card-img img {
max-width: 78%; max-height: 78%;
object-fit: contain;
filter: drop-shadow(0 12px 30px rgba(0,0,0,.45));
}
.flag2-card-body { padding: 22px 22px 24px; flex: 1; }
.flag2-card--hero .flag2-card-img { aspect-ratio: 4 / 3; }
.flag2-card--hero .flag2-card-body { padding: 32px 32px 36px; }
.flag2-card--hero .card-name { font-size: 26px; line-height: 1.15; letter-spacing: -.5px; margin-top: 6px; }
.flag2-card--hero .flag2-card-desc {
color: rgba(255,255,255,.72);
font-size: 15px;
line-height: 1.65;
margin: 14px 0 18px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.flag2-card--hero .flag2-card-cta {
margin-top: 16px;
font-family: var(--ff);
font-size: 12px;
font-weight: 800;
letter-spacing: 2.6px;
text-transform: uppercase;
color: var(--store-secondary, var(--mvp-gold));
}
.flag2-card--side .card-name { font-size: 16px; }
.flag2-card--large .flag2-card-img { aspect-ratio: 16 / 11; }
.flag2-card--large .card-name { font-size: 22px; letter-spacing: -.3px; }
.flag2-save {
position: absolute;
top: 14px; right: 14px;
z-index: 2;
padding: 5px 11px;
font-family: var(--ff);
font-size: 10px;
font-weight: 800;
letter-spacing: 2.2px;
text-transform: uppercase;
color: #0F0F12;
background: var(--store-secondary, var(--mvp-gold));
border-radius: 999px;
}
/* ── Featured Marquee ────────────────────────────────────────────── */
.flag2-marquee {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
gap: 28px;
}
.flag2-marquee-side {
display: grid;
grid-template-rows: repeat(3, 1fr);
gap: 14px;
}
.flag2-marquee-side .flag2-card {
display: grid;
grid-template-columns: 130px 1fr;
}
.flag2-marquee-side .flag2-card-img { aspect-ratio: auto; height: 100%; padding: 12px; }
.flag2-marquee-side .flag2-card-body { padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; }
.flag2-marquee-side .card-cat { font-size: 10px; }
.flag2-marquee-side .card-price { margin-top: 6px; }
@media (max-width: 900px) {
.flag2-marquee { grid-template-columns: 1fr; }
.flag2-marquee-side { grid-template-rows: auto; }
}
/* ── VIP Band ────────────────────────────────────────────────────── */
.flag2-band--vip {
background:
linear-gradient(180deg, rgba(212,162,76,.04) 0%, rgba(212,162,76,0) 100%),
var(--mvp-bg, #0F0F12);
border-top: 1px solid rgba(212,162,76,.32);
border-bottom: 1px solid rgba(212,162,76,.16);
margin: 40px -24px;
padding: 120px 24px;
}
.flag2-vip-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
gap: 28px;
}
.flag2-vip-card {
display: grid;
grid-template-columns: 220px 1fr;
background: rgba(255,255,255,.025);
border: 1px solid rgba(212,162,76,.28);
border-radius: 16px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.flag2-vip-card:hover {
border-color: var(--store-secondary, var(--mvp-gold));
transform: translateY(-2px);
box-shadow: 0 14px 44px rgba(0,0,0,.4);
}
.flag2-vip-img {
background: #0F0F12;
display: flex; align-items: center; justify-content: center;
padding: 22px;
}
.flag2-vip-img img { max-width: 78%; max-height: 78%; object-fit: contain; }
.flag2-vip-body { padding: 28px 28px 26px; display: flex; flex-direction: column; }
.flag2-vip-h {
font-family: var(--ff);
font-size: 22px;
font-weight: 700;
letter-spacing: -.3px;
color: var(--mvp-text, #fff);
margin: 8px 0 12px;
line-height: 1.2;
}
.flag2-vip-desc {
color: rgba(255,255,255,.72);
font-size: 14.5px;
line-height: 1.6;
margin: 0 0 14px;
}
.flag2-vip-perks {
list-style: none;
padding: 0;
margin: 0 0 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.flag2-vip-perks li {
font-family: var(--ff);
font-size: 13px;
color: rgba(255,255,255,.86);
padding-left: 16px;
position: relative;
}
.flag2-vip-perks li::before {
content: '';
position: absolute;
left: 0; top: .55em;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--store-secondary, var(--mvp-gold));
}
.flag2-vip-foot {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-top: auto;
}
.flag2-vip-price {
font-family: var(--ff);
font-size: 22px;
font-weight: 700;
color: #fff;
letter-spacing: -.3px;
}
.flag2-vip-cta {
font-family: var(--ff);
font-size: 11px;
font-weight: 800;
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--store-secondary, var(--mvp-gold));
}
@media (max-width: 720px) {
.flag2-vip-card { grid-template-columns: 1fr; }
.flag2-vip-img { aspect-ratio: 16 / 10; padding: 18px; }
.flag2-band--vip { margin: 0; padding: 80px 18px; }
}
/* ── Bundle Band ─────────────────────────────────────────────────── */
.flag2-band--bundle .flag2-card-img { aspect-ratio: 4 / 3; }
/* ── Dealer Band (foil ribbon) ───────────────────────────────────── */
.flag2-band--dealer {
position: relative;
}
.flag2-dealer-ribbon {
display: inline-block;
padding: 8px 22px;
margin-bottom: 28px;
font-family: var(--ff);
font-size: 10px;
font-weight: 800;
letter-spacing: 4.5px;
color: #0F0F12;
background: linear-gradient(90deg, #6B2FAF 0%, #E5236A 35%, #FF6B1A 65%, #6B2FAF 100%);
border-radius: 4px;
}
/* ── Collectible Band ────────────────────────────────────────────── */
.flag2-band--collectible .flag2-card-img { aspect-ratio: 5 / 6; padding: 24px; }
/* ── Foot CTA ────────────────────────────────────────────────────── */
.flag2-foot-cta {
padding: 140px 24px 160px;
text-align: center;
border-top: 1px solid rgba(212,162,76,.18);
background: linear-gradient(180deg, rgba(15,15,18,1) 0%, rgba(20,20,26,1) 100%);
margin-top: 60px;
}
.flag2-foot-inner { max-width: 760px; margin: 0 auto; }
.flag2-foot-h {
font-family: var(--ff);
font-size: clamp(34px, 4vw, 52px);
font-weight: 700;
letter-spacing: -1.2px;
line-height: 1.1;
color: #fff;
margin: 14px 0 22px;
}
.flag2-foot-sub {
color: rgba(255,255,255,.72);
font-size: 17px;
line-height: 1.7;
margin: 0 auto 38px;
}
.flag2-foot-ctas {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
}
/* ── Responsive overrides ────────────────────────────────────────── */
@media (max-width: 900px) {
.flag2-band { padding: 80px 0 64px; }
.flag2-band:first-child { padding-top: 96px; }
.flag2-band-head { flex-direction: column; align-items: flex-start; gap: 18px; }
.flag2-story { padding: 96px 24px; }
}
@media (max-width: 640px) {
.flag2-hero-inner { padding: 120px 18px 100px; }
.flag2-hero-title { font-size: clamp(48px, 13vw, 76px); letter-spacing: -2px; }
.flag2-hero-tagline { font-size: 12px; letter-spacing: 3px; padding: 12px 0; }
.flag2-hero-tagline::before, .flag2-hero-tagline::after { width: 50px; }
.flag2-hero-logo { max-width: 320px; }
.flag2-hero-ctas { flex-direction: column; align-items: stretch; }
.flag2-cta-primary, .flag2-cta-ghost { width: 100%; }
.flag2-main { padding: 0 18px; }
.flag2-story { padding: 72px 18px; }
.flag2-story-h { font-size: 32px; }
.flag2-band { padding: 64px 0 48px; }
.flag2-band:first-child { padding-top: 80px; }
.flag2-band-h { font-size: 30px; letter-spacing: -.7px; }
.flag2-foot-cta { padding: 88px 18px 96px; margin-top: 32px; }
.store-cart--nav { display: none; }
.flag2-grid { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.flag2-hero-scroll svg { animation: none; }
.flag2-card, .flag2-vip-card, .dir-card { transition: none !important; }
}
/* ════════════════════════════════════════════════════════════════════
v1c.3 — Iron Lilly film palette + Premium 404 + Directory v2
.store-iron-lilly — scoped Iron Lilly red/orange/yellow palette
.dir2-* — premium Movie Store Directory
.flag2-hero--404 — cinematic Store Not Found
════════════════════════════════════════════════════════════════════ */
/* ── Iron Lilly film palette (scoped) ────────────────────────────── */
body.store-iron-lilly {
--il-black-deep: #0A0A0C;
--il-black-rich: #161617;
--il-white: #FFFFFF;
--il-cream: #F4ECE0;
--il-red: #C8281C;
--il-red-deep: #8C1611;
--il-orange: #E8551F;
--il-orange-bright: #FF7833;
--il-yellow: #F5C242;
--il-yellow-warm: #FFD56B;
--il-gold-cinematic:#FF6B1A;
/* Re-bind the engine's runtime tokens to Iron Lilly's palette. */
--store-primary: var(--il-black-deep);
--store-secondary: var(--il-orange);
background: var(--il-black-deep);
}
/* ── Iron Lilly hero overrides ───────────────────────────────────── */
body.store-iron-lilly .flag2-hero {
background: var(--il-black-deep);
border-bottom: 1px solid rgba(232,85,31,.32);
}
body.store-iron-lilly .flag2-hero-bg { filter: saturate(1.05) brightness(.68); }
body.store-iron-lilly .flag2-hero-vignette {
background:
linear-gradient(135deg,
rgba(200,40,28,.42) 0%,
rgba(232,85,31,.22) 35%,
rgba(10,10,12,0) 55%,
rgba(10,10,12,.92) 100%),
radial-gradient(ellipse at 50% 78%, rgba(0,0,0,0) 0%, rgba(10,10,12,.55) 55%, rgba(10,10,12,.97) 100%);
}
body.store-iron-lilly .flag2-eyebrow-pill {
background: linear-gradient(135deg, rgba(200,40,28,.22) 0%, rgba(245,194,66,.08) 100%);
border-color: rgba(245,194,66,.65);
color: var(--il-yellow-warm);
box-shadow: 0 0 24px rgba(200,40,28,.25);
}
body.store-iron-lilly .flag2-hero-logo {
max-width: 540px;
margin-bottom: 26px;
filter: drop-shadow(0 6px 26px rgba(200,40,28,.32)) drop-shadow(0 2px 10px rgba(0,0,0,.6));
}
body.store-iron-lilly .flag2-hero-title {
background: linear-gradient(180deg, #FFFFFF 0%, #FFE9C2 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 40px rgba(200,40,28,.45), 0 2px 28px rgba(0,0,0,.65);
}
body.store-iron-lilly .flag2-hero-tagline {
color: var(--il-yellow-warm);
text-shadow: 0 1px 8px rgba(200,40,28,.45);
}
body.store-iron-lilly .flag2-hero-tagline::before,
body.store-iron-lilly .flag2-hero-tagline::after {
background: linear-gradient(90deg, transparent 0%, var(--il-orange) 50%, transparent 100%);
height: 1.5px;
opacity: .8;
width: 110px;
}
.flag2-hero-truestory {
font-family: 'Georgia', 'Times New Roman', serif;
font-style: italic;
font-size: clamp(16px, 1.6vw, 19px);
font-weight: 500;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--il-cream, rgba(255,255,255,.86));
margin: 0 0 28px;
text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
body.store-iron-lilly .flag2-hero-desc {
color: var(--il-cream);
}
/* Glowing CTAs — Iron Lilly primary */
body.store-iron-lilly .flag2-cta-primary {
background: linear-gradient(135deg, var(--il-red) 0%, var(--il-orange) 100%);
border: 0;
color: var(--il-white);
font-weight: 800;
letter-spacing: 2.4px;
box-shadow:
0 0 0 1px rgba(255,255,255,.08),
0 10px 30px rgba(200,40,28,.45),
0 0 36px rgba(245,194,66,.18);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
body.store-iron-lilly .flag2-cta-primary:hover {
transform: translateY(-2px);
box-shadow:
0 0 0 1px rgba(255,255,255,.14),
0 16px 40px rgba(200,40,28,.55),
0 0 56px rgba(245,194,66,.42);
filter: saturate(1.1);
}
/* Ghost CTAs gain warm yellow outline */
body.store-iron-lilly .flag2-cta-ghost {
border-color: rgba(245,194,66,.55);
color: var(--il-yellow-warm);
transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}
body.store-iron-lilly .flag2-cta-ghost:hover {
border-color: var(--il-yellow);
color: var(--il-white);
background: rgba(232,85,31,.12);
box-shadow: 0 0 24px rgba(245,194,66,.32);
}
/* Release meta becomes Iron Lilly red dot + yellow type */
body.store-iron-lilly .flag2-hero-meta {
color: var(--il-yellow-warm);
font-weight: 700;
}
body.store-iron-lilly .flag2-hero-meta::before {
content: '';
display: inline-block;
width: 7px; height: 7px;
margin-right: 10px;
border-radius: 50%;
background: var(--il-red);
box-shadow: 0 0 12px rgba(200,40,28,.6);
vertical-align: middle;
}
body.store-iron-lilly .flag2-hero-platform strong {
color: var(--il-yellow-warm);
}
/* ── Iron Lilly story band ───────────────────────────────────────── */
body.store-iron-lilly .flag2-story {
background: linear-gradient(180deg, var(--il-black-deep) 0%, var(--il-black-rich) 100%);
border-bottom: 1px solid rgba(232,85,31,.18);
}
body.store-iron-lilly .flag2-story-rule {
background: linear-gradient(90deg, var(--il-red) 0%, var(--il-orange) 50%, var(--il-yellow) 100%);
width: 100px;
height: 2px;
opacity: .9;
box-shadow: 0 0 14px rgba(232,85,31,.45);
}
/* ── Iron Lilly section bands ────────────────────────────────────── */
body.store-iron-lilly .flag2-band {
border-top: 1px solid rgba(232,85,31,.10);
position: relative;
}
body.store-iron-lilly .flag2-band:not(:first-child)::before {
content: '';
position: absolute; top: -1px; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(232,85,31,.35) 50%, transparent 100%);
}
body.store-iron-lilly .flag2-eyebrow {
color: var(--il-orange);
}
body.store-iron-lilly .flag2-band-cta {
color: var(--il-yellow-warm);
}
body.store-iron-lilly .flag2-band-cta:hover { border-bottom-color: var(--il-yellow); }
/* ── Iron Lilly product cards ────────────────────────────────────── */
body.store-iron-lilly .flag2-card {
background: linear-gradient(180deg, rgba(232,85,31,.04) 0%, rgba(10,10,12,.6) 100%);
border: 1px solid rgba(245,194,66,.20);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.04),
0 6px 20px rgba(0,0,0,.4);
}
body.store-iron-lilly .flag2-card:hover {
border-color: var(--il-red);
transform: translateY(-4px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 0 0 1px rgba(245,194,66,.55),
0 22px 60px rgba(200,40,28,.32),
0 0 60px rgba(245,194,66,.12);
}
body.store-iron-lilly .flag2-card-img {
background:
radial-gradient(ellipse at 50% 25%, rgba(232,85,31,.14) 0%, rgba(10,10,12,0) 65%),
var(--il-black-deep);
}
body.store-iron-lilly .badge {
background: var(--il-red);
color: var(--il-white);
box-shadow: 0 0 16px rgba(245,194,66,.4);
}
body.store-iron-lilly .flag2-save {
background: var(--il-yellow);
color: var(--il-black-deep);
box-shadow: 0 0 18px rgba(245,194,66,.55);
}
/* Featured ribbon (red, top-left of card image) — auto applied within featured marquee */
body.store-iron-lilly .flag2-band--featured .flag2-card--hero .flag2-card-img::before {
content: 'FEATURED';
position: absolute;
top: 16px; left: -34px;
z-index: 3;
width: 140px; padding: 6px 0;
background: linear-gradient(135deg, var(--il-red) 0%, var(--il-red-deep) 100%);
color: var(--il-white);
font-family: var(--ff);
font-size: 10px; font-weight: 800; letter-spacing: 3px;
text-align: center;
transform: rotate(-38deg);
box-shadow: 0 4px 14px rgba(0,0,0,.55), 0 0 16px rgba(245,194,66,.25);
}
/* ── Iron Lilly VIP band ─────────────────────────────────────────── */
body.store-iron-lilly .flag2-band--vip {
background:
linear-gradient(180deg, rgba(200,40,28,.06) 0%, rgba(10,10,12,0) 100%),
var(--il-black-deep);
border-top: 1px solid rgba(232,85,31,.45);
border-bottom: 1px solid rgba(245,194,66,.18);
}
body.store-iron-lilly .flag2-vip-card {
background: linear-gradient(180deg, rgba(232,85,31,.05) 0%, rgba(10,10,12,.7) 100%);
border-color: rgba(232,85,31,.35);
}
body.store-iron-lilly .flag2-vip-card:hover {
border-color: var(--il-red);
box-shadow:
0 0 0 1px rgba(245,194,66,.45),
0 20px 56px rgba(200,40,28,.32);
}
body.store-iron-lilly .flag2-vip-perks li::before {
background: var(--il-red);
box-shadow: 0 0 8px rgba(200,40,28,.6);
}
body.store-iron-lilly .flag2-vip-cta { color: var(--il-yellow-warm); }
/* ── Iron Lilly Dealer Exclusives band ───────────────────────────── */
body.store-iron-lilly .flag2-band--dealer {
background: linear-gradient(180deg, rgba(200,40,28,.05) 0%, rgba(10,10,12,0) 100%);
}
body.store-iron-lilly .flag2-dealer-ribbon {
background: linear-gradient(90deg, var(--il-red-deep) 0%, var(--il-red) 50%, var(--il-orange-bright) 100%);
color: var(--il-white);
box-shadow: 0 4px 18px rgba(200,40,28,.45);
}
/* ── Iron Lilly foot CTA — stays Movieonomy gold (corporate continuity) */
/* ════════════════════════════════════════════════════════════════════
Premium "Store Not Found" — flag2-hero--404
════════════════════════════════════════════════════════════════════ */
.flag2-hero--404 {
min-height: 88vh;
background:
radial-gradient(ellipse at 50% 30%, rgba(212,162,76,.12) 0%, rgba(15,15,18,0) 60%),
var(--mvp-bg, #0F0F12);
}
.flag2-hero--404 .flag2-hero-bg { display: none; }
.flag2-hero--404 .flag2-hero-vignette { background: none; }
.flag2-hero--404 .flag2-hero-title {
-webkit-text-fill-color: initial;
color: rgba(255,255,255,.94);
letter-spacing: -2px;
font-size: clamp(48px, 7vw, 88px);
}
.flag2-hero--404 .flag2-hero-tagline {
color: var(--mvp-gold, #FF6B1A);
letter-spacing: 5px;
}
/* ════════════════════════════════════════════════════════════════════
.dir2-* — Premium Movie Store Directory v2
════════════════════════════════════════════════════════════════════ */
.dir2-hero {
padding: 144px 24px 72px;
border-bottom: 1px solid rgba(212,162,76,.18);
background:
radial-gradient(ellipse at 50% 0%, rgba(212,162,76,.08) 0%, rgba(15,15,18,0) 60%),
var(--mvp-bg, #0F0F12);
}
.dir2-hero-inner { max-width: 920px; margin: 0 auto; text-align: center; }
.dir2-title {
font-family: var(--ff);
font-size: clamp(48px, 7vw, 88px);
font-weight: 800;
letter-spacing: -2.5px;
line-height: 1.02;
color: var(--mvp-text, #fff);
margin: 14px 0 22px;
}
.dir2-sub {
max-width: 760px;
margin: 0 auto 30px;
color: var(--mvp-text-2, rgba(255,255,255,.74));
font-size: 17.5px;
line-height: 1.7;
}
.dir2-meta {
font-family: var(--ff);
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--mvp-muted, rgba(255,255,255,.55));
display: inline-flex;
align-items: center;
gap: 12px;
}
.dir2-meta strong { color: var(--mvp-gold, #FF6B1A); font-weight: 800; }
.dir2-meta .dot { color: var(--mvp-gold, #FF6B1A); opacity: .6; }
.dir2-main {
max-width: 1280px;
margin: 0 auto;
padding: 72px 24px 120px;
}
.dir2-state {
text-align: center;
padding: 96px 16px;
color: var(--mvp-muted, rgba(255,255,255,.55));
font-family: var(--ff);
letter-spacing: 1.4px;
font-size: 13px;
}
/* Big, cinematic 16:10 cards — single column at narrow, 2-up wide */
.dir2-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
gap: 36px;
}
@media (min-width: 1100px) {
.dir2-grid { grid-template-columns: repeat(2, 1fr); }
}
.dir2-card {
position: relative;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(15,15,18,.5) 100%);
border: 1px solid rgba(212,162,76,.22);
border-radius: 20px;
overflow: hidden;
transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.dir2-card:hover {
transform: translateY(-6px);
border-color: var(--mvp-gold, #FF6B1A);
box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(212,162,76,.28);
}
.dir2-poster {
position: relative;
aspect-ratio: 16 / 10;
background: #0A0A0C;
overflow: hidden;
}
.dir2-poster-img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .35s ease, opacity .25s ease;
display: block;
}
.dir2-card:hover .dir2-poster-img { transform: scale(1.03); }
.dir2-poster-grad {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(10,10,12,.7) 75%, rgba(10,10,12,.92) 100%);
}
.dir2-ribbons {
position: absolute; top: 18px; left: 18px;
z-index: 3;
display: flex; flex-direction: column; gap: 8px;
align-items: flex-start;
}
.dir2-ribbon {
font-family: var(--ff);
font-size: 10px;
font-weight: 800;
letter-spacing: 2.5px;
padding: 6px 12px;
border-radius: 4px;
}
.dir2-ribbon--featured {
background: linear-gradient(135deg, #C8281C 0%, #E8551F 100%);
color: #FFFFFF;
box-shadow: 0 4px 14px rgba(200,40,28,.4);
}
.dir2-ribbon--official {
background: rgba(10,10,12,.85);
color: var(--mvp-gold, #FF6B1A);
border: 1px solid rgba(212,162,76,.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.dir2-card-logo {
position: absolute;
bottom: 60px; left: 24px;
z-index: 3;
max-width: 240px;
filter: drop-shadow(0 4px 18px rgba(0,0,0,.65));
}
.dir2-card-logo img { width: 100%; height: auto; display: block; }
.dir2-tier {
position: absolute;
bottom: 22px; left: 24px;
z-index: 3;
font-family: var(--ff);
font-size: 11px;
font-weight: 800;
letter-spacing: 3px;
color: var(--mvp-gold, #FF6B1A);
text-shadow: 0 2px 10px rgba(0,0,0,.65);
}
.dir2-card-body {
padding: 32px 30px 34px;
display: flex;
flex-direction: column;
}
.dir2-card-title {
font-family: var(--ff);
font-size: 30px;
font-weight: 800;
letter-spacing: -.7px;
color: var(--mvp-text, #fff);
margin: 10px 0 6px;
line-height: 1.05;
}
.dir2-card-tagline {
font-family: 'Georgia', 'Times New Roman', serif;
font-style: italic;
font-size: 15px;
color: var(--mvp-gold, #FF6B1A);
margin-bottom: 16px;
letter-spacing: .2px;
}
.dir2-card-desc {
color: var(--mvp-text-2, rgba(255,255,255,.74));
font-size: 14.5px;
line-height: 1.65;
margin: 0 0 20px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.dir2-card-badges {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 24px;
}
.dir2-badge {
font-family: var(--ff);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--mvp-gold, #FF6B1A);
border: 1px solid rgba(212,162,76,.35);
padding: 6px 11px;
border-radius: 999px;
}
.dir2-card-cta {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--ff);
font-size: 12px;
font-weight: 800;
letter-spacing: 2.6px;
text-transform: uppercase;
color: var(--mvp-gold, #FF6B1A);
}
.dir2-card-cta-arrow {
display: inline-block;
transition: transform .2s ease;
}
.dir2-card:hover .dir2-card-cta-arrow { transform: translateX(6px); }
/* Iron Lilly special-case directory card — red ribbons, warmer hover */
.dir2-card--iron-lilly {
border-color: rgba(232,85,31,.32);
}
.dir2-card--iron-lilly:hover {
border-color: var(--il-red, #C8281C);
box-shadow:
0 24px 64px rgba(200,40,28,.36),
0 0 0 1px rgba(245,194,66,.42),
0 0 80px rgba(245,194,66,.12);
}
.dir2-card--iron-lilly .dir2-card-tagline { color: var(--il-yellow-warm, #FFD56B); }
.dir2-card--iron-lilly .dir2-tier {
color: var(--il-yellow-warm, #FFD56B);
text-shadow: 0 0 14px rgba(200,40,28,.5);
}
.dir2-card--iron-lilly .dir2-badge {
border-color: rgba(245,194,66,.45);
color: var(--il-yellow-warm, #FFD56B);
}
.dir2-card--iron-lilly .dir2-card-cta {
color: var(--il-yellow-warm, #FFD56B);
}
/* Responsive */
@media (max-width: 720px) {
.dir2-hero { padding: 108px 18px 56px; }
.dir2-title { font-size: clamp(40px, 11vw, 60px); }
.dir2-main { padding: 48px 18px 80px; }
.dir2-grid { grid-template-columns: 1fr; gap: 24px; }
.dir2-card-body { padding: 24px 20px 26px; }
.dir2-card-title { font-size: 26px; }
.dir2-card-logo { max-width: 180px; }
}
/* ════════════════════════════════════════════════════════════════════
v1c.4 — MOVIEONOMY BRAND SYSTEM (logo-aligned)
The Movie Fan Economy
────────────────────────────────────────────────────────────────────
This block redefines every gold/foil token to the new logo-aligned
palette: deep navy text + orange→magenta→purple→blue gradient
accents. Because CSS cascade reads bottom-up for same-specificity
:root declarations, every prior `var(--mvp-gold*)` reference in this
file automatically inherits the new values. No upstream rewrite.
PALETTE (from logo):
Deep Navy #0E1130 primary text on light, dark page base
Pure White #FFFFFF
Orange #FF6B1A "M" left, leading accent
Magenta #E5236A "M" mid, energy
Purple #6B2FAF "M" right, depth
Electric Blue #2D5BFF right edge, modern tech
Light BG #FAFAFE optional light surfaces
════════════════════════════════════════════════════════════════════ */
:root {
/* ── New brand tokens ────────────────────────────────────────── */
--mo-navy: #0E1130;
--mo-navy-2: #1A1D45;
--mo-bg: #0B0D24; /* dark page base — derived from navy */
--mo-bg-2: #14163B;
--mo-orange: #FF6B1A;
--mo-red: #E5236A;
--mo-magenta: #E5236A;
--mo-purple: #6B2FAF;
--mo-blue: #2D5BFF;
--mo-white: #FFFFFF;
--mo-cream: #FAFAFE;
--mo-text: #FFFFFF;
--mo-text-2: rgba(255,255,255,.78);
--mo-text-muted: rgba(255,255,255,.55);
/* Signature MOVIEONOMY gradient (orange → magenta → purple → blue) */
--mo-grad: linear-gradient(135deg, #FF6B1A 0%, #E5236A 33%, #6B2FAF 66%, #2D5BFF 100%);
--mo-grad-soft: linear-gradient(135deg, rgba(255,107,26,.22) 0%, rgba(229,35,106,.18) 33%, rgba(107,47,175,.18) 66%, rgba(45,91,255,.22) 100%);
--mo-grad-line: linear-gradient(90deg, #FF6B1A 0%, #E5236A 33%, #6B2FAF 66%, #2D5BFF 100%);
/* ── Legacy token REMAP — every old gold reference now reads as
brand orange / magenta / blue. This is the entire point of
this block: zero invasive rewrites required upstream. ───── */
--mvp-bg: var(--mo-bg);
--mvp-text: var(--mo-text);
--mvp-text-2: var(--mo-text-2);
--mvp-muted: var(--mo-text-muted);
--mvp-gold: var(--mo-orange);
--mvp-gold-bright: var(--mo-magenta);
--mvp-gold-deep: var(--mo-purple);
--mvp-gold-foil: var(--mo-grad);
/* Store engine runtime vars (used by storefront.html) */
--store-primary: var(--mo-navy);
--store-secondary: var(--mo-orange);
}
/* ── Page background updates ─────────────────────────────────────── */
body.mvp { background: var(--mo-bg); }
/* ── Primary CTA: brand gradient with strong glow ────────────────── */
body.mvp .mvp-btn-primary,
body.mvp .mvp-nav-cta,
body.mvp .mvp-drawer-cta {
background: var(--mo-grad);
border: 0;
color: var(--mo-white);
font-weight: 800;
letter-spacing: 2.4px;
box-shadow:
0 10px 28px rgba(229,35,106,.32),
0 0 32px rgba(45,91,255,.18);
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
text-transform: uppercase;
}
body.mvp .mvp-btn-primary:hover,
body.mvp .mvp-nav-cta:hover,
body.mvp .mvp-drawer-cta:hover {
transform: translateY(-2px);
filter: saturate(1.1) brightness(1.05);
box-shadow:
0 18px 40px rgba(229,35,106,.45),
0 0 56px rgba(45,91,255,.32);
}
/* Ghost CTA — magenta outline + brand text */
body.mvp .mvp-btn-ghost {
border: 1px solid rgba(229,35,106,.5);
color: var(--mo-white);
background: transparent;
transition: border-color .18s ease, background .18s ease, color .18s ease;
}
body.mvp .mvp-btn-ghost:hover {
border-color: var(--mo-blue);
background: rgba(45,91,255,.10);
color: var(--mo-white);
}
/* ── Eyebrow / accents now read as orange instead of gold ────────── */
body.mvp .mvp-eyebrow,
body.mvp .flag2-eyebrow,
body.mvp .flag-section-head .mvp-eyebrow {
color: var(--mo-orange);
letter-spacing: 4px;
}
/* ── Brand wordmark — gradient text + uploaded logo image swap ──── */
body.mvp .mvp-brand { display: flex; align-items: center; gap: 12px; }
body.mvp .mvp-brand-logo {
display: inline-block;
width: 44px; height: 44px;
background:
url('/store/img/mfe-logo.png') center / contain no-repeat,
var(--mo-grad);
border-radius: 10px;
flex: 0 0 auto;
}
body.mvp .mvp-brand-name {
background: var(--mo-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 800;
letter-spacing: 2.4px;
}
body.mvp .mvp-brand-tag {
color: var(--mo-orange);
letter-spacing: 1.5px;
font-weight: 600;
}
/* Nav links — brand-aware focus/hover */
body.mvp .mvp-nav-links a:hover,
body.mvp .mvp-nav-links a.on,
body.mvp .mvp-nav-links a[aria-current="page"] {
color: var(--mo-orange);
}
body.mvp .mvp-nav-links a.on::after,
body.mvp .mvp-nav-links a[aria-current="page"]::after {
background: var(--mo-grad-line);
}
/* ── H1/H2 emphasis switches gold → orange ───────────────────────── */
body.mvp .mvp-h1 em,
body.mvp .mvp-h2 em,
body.mvp .mvp-section em,
body.mvp .mvp-stat-v,
body.mvp .mvp-stat em {
color: var(--mo-orange);
background: var(--mo-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ── Stat / pillar borders → magenta hairlines ───────────────────── */
body.mvp .mvp-pillar,
body.mvp .mvp-attr,
body.mvp .mvp-stat,
body.mvp .card {
border-color: rgba(229,35,106,.18);
}
body.mvp .mvp-pillar:hover,
body.mvp .card:hover {
border-color: var(--mo-orange);
box-shadow:
0 18px 48px rgba(229,35,106,.22),
0 0 0 1px rgba(45,91,255,.28);
}
/* ── Section dividers / CTA bands now use brand gradient ─────────── */
body.mvp .mvp-cta-band {
background:
var(--mo-grad-soft),
radial-gradient(ellipse at 50% 100%, rgba(229,35,106,.18) 0%, rgba(11,13,36,0) 60%),
var(--mo-bg);
}
/* ── Featured/save badges — brand gradient ───────────────────────── */
body.mvp .badge,
body.mvp .dir2-ribbon--featured,
body.mvp .flag2-save {
background: var(--mo-grad);
color: var(--mo-white);
box-shadow: 0 4px 14px rgba(229,35,106,.32);
}
/* ── Footer brand alignment ──────────────────────────────────────── */
body.mvp .mvp-footer { background: linear-gradient(180deg, var(--mo-bg) 0%, #07091B 100%); }
body.mvp .mvp-footer-brand-name {
background: var(--mo-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
body.mvp .mvp-footer-col h4 {
color: var(--mo-orange);
}
body.mvp .mvp-footer-col ul a:hover {
color: var(--mo-orange);
}
body.mvp .mvp-footer-brand-tag { color: var(--mo-magenta); }
/* ── Directory page brand alignment ──────────────────────────────── */
body.mvp .dir2-hero {
background:
radial-gradient(ellipse at 50% 0%, rgba(255,107,26,.12) 0%, rgba(11,13,36,0) 55%),
var(--mo-bg);
}
body.mvp .dir2-card {
border-color: rgba(229,35,106,.22);
background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(11,13,36,.5) 100%);
}
body.mvp .dir2-card:hover {
border-color: var(--mo-orange);
box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(229,35,106,.42);
}
body.mvp .dir2-ribbon--official {
background: rgba(11,13,36,.85);
color: var(--mo-orange);
border: 1px solid rgba(255,107,26,.55);
}
body.mvp .dir2-badge {
border-color: rgba(229,35,106,.32);
color: var(--mo-orange);
}
body.mvp .dir2-card-cta { color: var(--mo-orange); }
body.mvp .dir2-card-tagline { color: var(--mo-magenta); }
body.mvp .dir2-tier { color: var(--mo-orange); }
/* ── Marketing hero / page-hero brand glow ───────────────────────── */
body.mvp .mvp-hero,
body.mvp .page-hero {
background:
radial-gradient(ellipse at 50% 0%, rgba(255,107,26,.10) 0%, rgba(11,13,36,0) 55%),
var(--mo-bg);
border-bottom: 1px solid rgba(229,35,106,.18);
}
body.mvp .mvp-hero-eye,
body.mvp .page-hero .mvp-eyebrow { color: var(--mo-orange); }
body.mvp .mvp-hero-brand {
background: var(--mo-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
body.mvp .mvp-hero-net { color: var(--mo-magenta); }
body.mvp .mvp-proof-strip .dot { color: var(--mo-orange); }
body.mvp .mvp-proof-strip { color: var(--mo-text-2); }
/* ── Featured-storefront block (homepage) — brand cards ──────────── */
body.mvp .mvp-featured-cta { color: var(--mo-orange); }
body.mvp .mvp-featured-cta:hover { color: var(--mo-magenta); }
/* ── Flag2 (Movie Store engine) — brand overrides for non-IL stores ── */
body.mvp .flag2-cta-primary:not(.store-iron-lilly *) {
background: var(--mo-grad);
border: 0;
color: var(--mo-white);
box-shadow:
0 10px 28px rgba(229,35,106,.32),
0 0 36px rgba(45,91,255,.18);
}
body.mvp .flag2-band-cta { color: var(--mo-orange); }
body.mvp .flag2-band-cta:hover { border-bottom-color: var(--mo-magenta); }
/* ── Page-hero variant (platform/partners/etc.) ──────────────────── */
body.mvp .mvp-flow-icon,
body.mvp .mvp-pillar-num {
color: var(--mo-orange);
}
/* ── Mobile nav drawer brand colors ──────────────────────────────── */
body.mvp .mvp-drawer { background: linear-gradient(180deg, var(--mo-bg-2) 0%, var(--mo-bg) 100%); }
body.mvp .mvp-drawer-links a:hover,
body.mvp .mvp-drawer-links a.on { color: var(--mo-orange); }
/* ════════════════════════════════════════════════════════════════════
IRON LILLY OVERRIDE PRESERVATION
Iron Lilly's film palette (red/orange/yellow) was scoped under
body.store-iron-lilly. Those rules remain valid and override the
corporate palette inside the Iron Lilly store. No change needed —
higher specificity (body.store-iron-lilly) beats body.mvp.
════════════════════════════════════════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────
Responsive — logo + brand wordmark stacks on mobile
──────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
body.mvp .mvp-brand-logo { width: 36px; height: 36px; }
}
/* ────────────────────────────────────────────────────────────────────
Brand logo as ::before pseudo-element — no HTML changes required.
Falls back to the brand gradient when the PNG isn't present yet.
──────────────────────────────────────────────────────────────────── */
body.mvp .mvp-brand { display: inline-flex; align-items: center; flex-direction: column; }
body.mvp .mvp-brand-name { display: inline-flex; align-items: center; gap: 10px; }
body.mvp .mvp-brand-name::before {
content: '';
display: inline-block;
width: 30px; height: 30px;
background:
url('/store/img/mfe-logo.png') center / contain no-repeat,
var(--mo-grad);
border-radius: 7px;
flex: 0 0 auto;
}
body.mvp .mvp-footer-brand-name::before {
content: '';
display: inline-block;
width: 28px; height: 28px;
margin-right: 10px;
vertical-align: middle;
background:
url('/store/img/mfe-logo.png') center / contain no-repeat,
var(--mo-grad);
border-radius: 7px;
}
@media (max-width: 640px) {
body.mvp .mvp-brand-name::before { width: 24px; height: 24px; border-radius: 6px; }
}
/* ════════════════════════════════════════════════════════════════════
v1c.5 — Real MOVIEONOMY logo lockup integration
The PNG is 2:1 landscape (1774×887). Display it at sensible
widths in header, hero, and footer.
════════════════════════════════════════════════════════════════════ */
/* ── Header brand: swap pseudo-element square for full lockup ────── */
/* Override v1c.4 pseudo-element to disappear; use the actual logo as
a sibling image rendered in the brand area instead. */
body.mvp .mvp-brand-name::before { display: none; }
/* Re-style the brand block: show the real logo lockup, hide the text
wordmark visually (keep it for screen readers). */
body.mvp .mvp-brand {
display: inline-flex;
align-items: center;
text-decoration: none;
background:
url('/store/img/mfe-logo.png') left center / contain no-repeat;
width: 200px;
height: 50px;
flex: 0 0 auto;
}
body.mvp .mvp-brand-name,
body.mvp .mvp-brand-tag {
/* visually hidden but keep in DOM for accessibility */
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap; border: 0;
}
@media (max-width: 640px) {
body.mvp .mvp-brand { width: 160px; height: 40px; }
}
/* ── Hero — prominent logo lockup centered above the headline ────── */
.mvp-hero-lockup {
display: block;
width: 100%;
max-width: 520px;
margin: 0 auto 32px;
filter: drop-shadow(0 12px 40px rgba(229,35,106,.22)) drop-shadow(0 4px 18px rgba(45,91,255,.18));
}
.mvp-hero-lockup img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 640px) {
.mvp-hero-lockup { max-width: 340px; margin-bottom: 24px; }
}
/* Hide the old text-only brand block in hero when lockup is present */
body.mvp .mvp-hero-lockup ~ .mvp-hero-brand,
body.mvp .mvp-hero-lockup ~ .mvp-hero-net { display: none; }
/* ── Footer brand: real logo lockup ──────────────────────────────── */
body.mvp .mvp-footer-brand-name::before { display: none; }
body.mvp .mvp-footer-brand-name {
display: inline-block;
width: 240px;
height: 60px;
background:
url('/store/img/mfe-logo.png') left center / contain no-repeat;
/* Hide the literal text "MOVIEONOMY™" since the logo image already
contains it. Keep accessible via text-indent off-screen. */
text-indent: -9999px;
overflow: hidden;
white-space: nowrap;
}
body.mvp .mvp-footer-brand-name .tm { display: none; }
/* ── Drawer brand foot lockup ─────────────────────────────────────── */
body.mvp .mvp-drawer-foot {
text-align: center;
padding-top: 16px;
}
body.mvp .mvp-drawer-foot::before {
content: '';
display: block;
width: 160px;
height: 40px;
margin: 0 auto 12px;
background:
url('/store/img/mfe-logo.png') center / contain no-repeat;
}
body.mvp .mvp-drawer-foot > div:first-child { display: none; } /* hide redundant "Movieonomy™" text */
/* ════════════════════════════════════════════════════════════════════
v1c.6 — Pure black backgrounds so the logo PNG's black frame blends
The uploaded logo lockup has a solid #000 background. We match the
surrounding surfaces so it reads as one continuous black canvas
while keeping the brand gradient colors maximally vibrant.
════════════════════════════════════════════════════════════════════ */
:root {
--mo-bg: #000000;
--mo-bg-2: #07071A;
}
body.mvp { background: #000000; }
body.mvp .mvp-hero,
body.mvp .page-hero,
body.mvp .dir2-hero { background-color: #000000; }
body.mvp .mvp-footer { background: linear-gradient(180deg, #000000 0%, #050511 100%); }
body.mvp .mvp-section.surface { background: #050511; }
/* Hero lockup — extra-large, premium cinematic for homepage */
.mvp-hero-lockup {
max-width: 640px;
margin: 0 auto 40px;
filter: drop-shadow(0 16px 60px rgba(229,35,106,.28)) drop-shadow(0 6px 24px rgba(45,91,255,.20));
}
@media (max-width: 640px) {
.mvp-hero-lockup { max-width: 360px; }
}
/* Footer logo — slightly larger, breathing room */
body.mvp .mvp-footer-brand-name {
width: 280px;
height: 70px;
margin-bottom: 12px;
}
@media (max-width: 640px) {
body.mvp .mvp-footer-brand-name { width: 220px; height: 55px; }
}
/* Header brand — keep compact, aligned left */
body.mvp .mvp-brand {
width: 180px;
height: 44px;
}
@media (max-width: 640px) {
body.mvp .mvp-brand { width: 140px; height: 36px; }
}
/* ════════════════════════════════════════════════════════════════════
v1c.7 — Header + footer logo doubled
════════════════════════════════════════════════════════════════════ */
body.mvp .mvp-brand { width: 360px; height: 88px; }
body.mvp .mvp-footer-brand-name { width: 560px; height: 140px; }
@media (max-width: 640px) {
body.mvp .mvp-brand { width: 280px; height: 72px; }
body.mvp .mvp-footer-brand-name { width: 440px; height: 110px; }
}
/* ════════════════════════════════════════════════════════════════════
v1c.8 — Iron Lilly vintage motorcycle aesthetic + size selector
Scoped to body.store-iron-lilly so it never touches Movieonomy
corporate pages.
════════════════════════════════════════════════════════════════════ */
/* ── Vintage display typography for Iron Lilly bands ───────────────── */
body.store-iron-lilly .flag2-band-h,
body.store-iron-lilly .flag2-hero-title,
body.store-iron-lilly .flag2-story-h,
body.store-iron-lilly .flag2-foot-h {
font-family: Georgia, 'Times New Roman', 'Playfair Display', serif;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
}
body.store-iron-lilly .flag2-hero-title {
letter-spacing: 4px;
font-style: normal;
}
body.store-iron-lilly .flag2-band-h {
letter-spacing: 2px;
}
/* Iron Lilly script accent — for headlines em or specific class */
body.store-iron-lilly em,
body.store-iron-lilly .flag2-card-desc em {
font-family: 'Brush Script MT', 'Lucida Handwriting', cursive;
font-style: italic;
color: var(--il-red);
font-weight: 700;
text-transform: none;
letter-spacing: 0;
}
/* ── Distressed cream divider rules between bands ──────────────────── */
body.store-iron-lilly .flag2-band:not(:first-child)::before {
background: linear-gradient(90deg, transparent 0%, #F5C242 25%, #C8281C 50%, #F5C242 75%, transparent 100%);
height: 1.5px;
opacity: .55;
}
/* EST. badge under section headings */
body.store-iron-lilly .flag2-band-head-left::after {
content: 'EST. MMXXVII';
display: inline-block;
margin-top: 8px;
font-family: Georgia, serif;
font-size: 10px;
letter-spacing: 4px;
color: var(--il-yellow-warm);
opacity: .7;
}
/* ── Vintage frame border on cards ─────────────────────────────────── */
body.store-iron-lilly .flag2-card {
border-radius: 6px;
background:
linear-gradient(180deg, rgba(232,85,31,.06) 0%, rgba(10,10,12,.7) 100%);
border: 2px solid rgba(245,194,66,.18);
box-shadow:
inset 0 0 0 1px rgba(200,40,28,.18),
0 8px 22px rgba(0,0,0,.5);
}
body.store-iron-lilly .flag2-card:hover {
border-color: var(--il-orange-bright);
box-shadow:
inset 0 0 0 1px rgba(245,194,66,.7),
0 0 0 1px rgba(200,40,28,.55),
0 22px 60px rgba(200,40,28,.32),
0 0 80px rgba(245,194,66,.12);
}
/* Product card cream backdrop for Iron Lilly photography effect */
body.store-iron-lilly .flag2-card-img {
background:
radial-gradient(ellipse at 50% 20%, rgba(245,194,66,.10) 0%, transparent 60%),
linear-gradient(180deg, #14110F 0%, #0A0A0C 100%);
}
/* ── Iron Lilly hero — add subtle red glow ribbon ──────────────────── */
body.store-iron-lilly .flag2-hero {
background: #000;
}
body.store-iron-lilly .flag2-hero-vignette {
background:
linear-gradient(135deg, rgba(200,40,28,.4) 0%, rgba(232,85,31,.18) 38%, rgba(0,0,0,0) 55%, rgba(0,0,0,.95) 100%),
radial-gradient(ellipse at 50% 78%, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.98) 100%);
}
/* ════════════════════════════════════════════════════════════════════
Size selector — product.html
════════════════════════════════════════════════════════════════════ */
.product-sizes {
margin: 18px 0 22px;
}
.product-sizes-label {
font-family: 'Inter', system-ui, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--mvp-text-2, rgba(255,255,255,.7));
margin-bottom: 12px;
}
.product-sizes-options {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.size-opt {
appearance: none;
border: 1px solid rgba(255,255,255,.22);
background: transparent;
color: var(--mvp-text, #fff);
font-family: 'Inter', system-ui, sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
padding: 12px 18px;
min-width: 56px;
border-radius: 4px;
cursor: pointer;
transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}
.size-opt:hover { border-color: var(--mvp-gold, #FF6B1A); color: var(--mvp-gold, #FF6B1A); }
.size-opt.on {
background: var(--mvp-gold, #FF6B1A);
border-color: var(--mvp-gold, #FF6B1A);
color: #0A0A0C;
}
.size-opt:focus-visible { outline: 2px solid var(--mvp-gold, #FF6B1A); outline-offset: 2px; }
/* ════════════════════════════════════════════════════════════════════
v1c.9, Iron Lilly Harley-Davidson lifestyle aesthetic
Premium motorcycle merchandise store. Scoped to body.store-iron-lilly.
════════════════════════════════════════════════════════════════════ */
body.store-iron-lilly {
/* Refined Iron Lilly palette (D62828 red per brief) */
--il-red: #D62828;
--il-red-deep: #8C1611;
--il-orange: #E8551F;
--il-yellow: #F5C242;
--il-yellow-warm: #FFD56B;
--il-cream: #F4ECE0;
--il-silver: #B5B5B5;
--il-chrome: linear-gradient(180deg, #E6E6E6 0%, #B5B5B5 50%, #6B6B6B 100%);
--il-leather: #3A2418;
background: #000000;
}
/* Page surfaces, true black */
body.store-iron-lilly .flag2-hero,
body.store-iron-lilly .flag2-story,
body.store-iron-lilly .flag2-main,
body.store-iron-lilly .flag2-bands { background: #000000; }
body.store-iron-lilly .flag2-band--vip {
background:
linear-gradient(180deg, rgba(214,40,40,.08) 0%, rgba(0,0,0,0) 100%),
#000000;
}
/* Headlines, vintage serif */
body.store-iron-lilly .flag2-hero-title {
font-family: Georgia, 'Times New Roman', serif;
font-weight: 900;
letter-spacing: 6px;
text-transform: uppercase;
font-size: clamp(48px, 8vw, 96px);
background: linear-gradient(180deg, #FFFFFF 0%, #F4ECE0 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 30px rgba(214,40,40,.45);
}
body.store-iron-lilly .flag2-band-h,
body.store-iron-lilly .flag2-story-h,
body.store-iron-lilly .flag2-foot-h {
font-family: Georgia, serif;
font-weight: 900;
letter-spacing: 3px;
text-transform: uppercase;
}
/* Tagline + truestory line */
body.store-iron-lilly .flag2-hero-tagline {
font-family: Georgia, serif;
font-size: 13px;
letter-spacing: 6px;
color: var(--il-yellow-warm);
}
body.store-iron-lilly .flag2-hero-truestory {
font-style: italic;
color: var(--il-cream);
font-size: clamp(15px, 1.5vw, 18px);
letter-spacing: 3px;
margin: 0 auto 28px;
max-width: 760px;
font-family: Georgia, serif;
}
/* CTAs, red→orange gradient with chrome edge */
body.store-iron-lilly .flag2-cta-primary {
background: linear-gradient(135deg, var(--il-red) 0%, var(--il-orange) 100%);
border: 1px solid var(--il-yellow);
color: #FFFFFF;
font-family: Georgia, serif;
font-weight: 900;
letter-spacing: 3px;
text-transform: uppercase;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
0 0 0 1px rgba(0,0,0,.4),
0 12px 28px rgba(214,40,40,.4),
0 0 36px rgba(245,194,66,.18);
}
body.store-iron-lilly .flag2-cta-primary:hover {
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.32),
0 0 0 1px rgba(245,194,66,.6),
0 18px 40px rgba(214,40,40,.55),
0 0 64px rgba(245,194,66,.42);
}
body.store-iron-lilly .flag2-cta-ghost {
border: 1px solid var(--il-yellow-warm);
color: var(--il-cream);
font-family: Georgia, serif;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}
body.store-iron-lilly .flag2-cta-ghost:hover {
background: rgba(214,40,40,.12);
border-color: var(--il-yellow);
color: #FFFFFF;
box-shadow: 0 0 24px rgba(245,194,66,.32);
}
/* Premium product cards, larger, vintage frame, chrome glow on hover */
body.store-iron-lilly .flag2-grid { gap: 36px; }
body.store-iron-lilly .flag2-grid--4 {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
body.store-iron-lilly .flag2-grid--3 {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
body.store-iron-lilly .flag2-card {
border-radius: 8px;
background:
linear-gradient(180deg, rgba(214,40,40,.05) 0%, rgba(0,0,0,.8) 100%);
border: 2px solid rgba(245,194,66,.22);
box-shadow:
inset 0 0 0 1px rgba(214,40,40,.16),
0 10px 28px rgba(0,0,0,.6);
transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
body.store-iron-lilly .flag2-card:hover {
transform: translateY(-6px);
border-color: var(--il-red);
box-shadow:
inset 0 0 0 1px rgba(245,194,66,.7),
0 0 0 1px rgba(214,40,40,.6),
0 28px 70px rgba(214,40,40,.42),
0 0 100px rgba(245,194,66,.14);
}
/* Larger product image area with cream backdrop for vintage feel */
body.store-iron-lilly .flag2-card-img {
background:
radial-gradient(ellipse at 50% 22%, rgba(232,85,31,.16) 0%, transparent 60%),
linear-gradient(180deg, #14110F 0%, #000000 100%);
aspect-ratio: 1 / 1;
padding: 14px;
}
body.store-iron-lilly .flag2-card-img img {
max-width: 92%; max-height: 92%;
filter: drop-shadow(0 14px 36px rgba(0,0,0,.6)) drop-shadow(0 0 24px rgba(245,194,66,.12));
transition: transform .35s ease;
}
body.store-iron-lilly .flag2-card:hover .flag2-card-img img {
transform: scale(1.04);
}
body.store-iron-lilly .flag2-card-body {
padding: 24px 22px 26px;
font-family: 'Inter', system-ui, sans-serif;
}
body.store-iron-lilly .card-name {
font-family: Georgia, serif;
font-size: 18px;
font-weight: 700;
letter-spacing: -.2px;
color: var(--il-cream);
}
body.store-iron-lilly .card-cat {
font-family: Georgia, serif;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--il-yellow-warm);
}
body.store-iron-lilly .card-price .now {
font-family: Georgia, serif;
font-size: 18px;
font-weight: 900;
color: #FFFFFF;
}
body.store-iron-lilly .card-price .was {
color: var(--il-silver);
}
/* Quick-view affordance, "View" pill appears on hover */
body.store-iron-lilly .flag2-card::after {
content: 'View';
position: absolute;
top: 16px; right: 16px;
z-index: 4;
padding: 5px 11px;
font-family: Georgia, serif;
font-size: 9px;
font-weight: 900;
letter-spacing: 2.5px;
color: #0A0A0C;
background: var(--il-yellow);
border-radius: 3px;
opacity: 0;
transform: translateY(-6px);
transition: opacity .2s ease, transform .2s ease;
pointer-events: none;
}
body.store-iron-lilly .flag2-card { position: relative; }
body.store-iron-lilly .flag2-card:hover::after {
opacity: 1;
transform: translateY(0);
}
/* Featured badge — red ribbon */
body.store-iron-lilly .badge {
background: var(--il-red);
color: #FFFFFF;
font-family: Georgia, serif;
font-weight: 900;
letter-spacing: 2px;
box-shadow: 0 0 18px rgba(214,40,40,.5);
}
/* Section dividers, chrome rule */
body.store-iron-lilly .flag2-band:not(:first-child)::before {
background: linear-gradient(90deg,
transparent 0%,
var(--il-yellow) 25%,
var(--il-red) 50%,
var(--il-yellow) 75%,
transparent 100%);
height: 2px;
opacity: .65;
box-shadow: 0 0 16px rgba(214,40,40,.32);
}
/* EST. MMXXVII stamp under each band heading */
body.store-iron-lilly .flag2-band-head-left::after {
content: 'EST. MMXXVII · IRON LILLY HERITAGE';
display: block;
margin-top: 10px;
font-family: Georgia, serif;
font-size: 10px;
letter-spacing: 4px;
color: var(--il-yellow-warm);
opacity: .65;
text-transform: uppercase;
}
/* Hero gradient overlay, more cinematic motorcycle vibes */
body.store-iron-lilly .flag2-hero-vignette {
background:
linear-gradient(135deg,
rgba(214,40,40,.42) 0%,
rgba(232,85,31,.22) 38%,
rgba(0,0,0,0) 55%,
rgba(0,0,0,.95) 100%),
radial-gradient(ellipse at 50% 78%, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.98) 100%);
}
/* Premium typography for section subhead in IL */
body.store-iron-lilly .flag2-band-sub {
font-family: Georgia, serif;
font-style: italic;
color: var(--il-cream);
font-size: 16px;
}
/* ════════════════════════════════════════════════════════════════════
v1c.10, Iron Lilly Heritage Americana — Lilly's Motorcycle Collection
+ VIP Experience editorial band + final premium polish.
Scoped to body.store-iron-lilly. References Lilly photography via
--lilly-lifestyle-bg CSS variable (set by the engine at runtime).
════════════════════════════════════════════════════════════════════ */
:root { --lilly-lifestyle-bg: url('/store/img/lilly-passenger.png'); }
/* ── LILLY'S MOTORCYCLE COLLECTION band — cinematic lifestyle ──────── */
body.store-iron-lilly .flag2-lifestyle {
position: relative;
min-height: 78vh;
display: flex;
align-items: center;
overflow: hidden;
margin: 80px 0;
border-top: 1px solid rgba(245,194,66,.42);
border-bottom: 1px solid rgba(245,194,66,.42);
}
body.store-iron-lilly .flag2-lifestyle-bg {
position: absolute; inset: 0;
background-image: var(--lilly-lifestyle-bg);
background-size: cover;
background-position: center 30%;
background-repeat: no-repeat;
filter: saturate(.95) brightness(.7);
}
body.store-iron-lilly .flag2-lifestyle-tint {
position: absolute; inset: 0;
background:
linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,.3) 60%, rgba(0,0,0,.85) 100%),
radial-gradient(ellipse at 30% 50%, rgba(214,40,40,.18) 0%, rgba(0,0,0,0) 50%);
}
body.store-iron-lilly .flag2-lifestyle-inner {
position: relative;
z-index: 2;
max-width: var(--mvp-container, 1360px);
margin: 0 auto;
padding: 80px 56px;
width: 100%;
max-width: 720px;
margin-left: 80px;
}
body.store-iron-lilly .flag2-lifestyle-h {
font-family: Georgia, serif;
font-weight: 900;
letter-spacing: 4px;
text-transform: uppercase;
font-size: clamp(36px, 5vw, 64px);
line-height: 1.05;
color: #fff;
margin: 16px 0 28px;
text-shadow: 0 4px 24px rgba(0,0,0,.7);
}
body.store-iron-lilly .flag2-lifestyle-h em {
font-family: 'Brush Script MT', cursive;
font-style: italic;
font-weight: 700;
color: var(--il-red);
text-transform: none;
letter-spacing: 0;
font-size: 1.15em;
}
body.store-iron-lilly .flag2-lifestyle-sub {
font-family: Georgia, serif;
font-style: italic;
font-size: clamp(15px, 1.6vw, 19px);
line-height: 1.7;
color: var(--il-cream);
max-width: 560px;
margin: 0 0 30px;
text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
body.store-iron-lilly .flag2-lifestyle-meta {
font-family: Georgia, serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--il-yellow-warm);
display: inline-flex;
align-items: center;
gap: 14px;
}
body.store-iron-lilly .flag2-lifestyle-meta .dot {
color: var(--il-red);
opacity: .9;
}
@media (max-width: 820px) {
body.store-iron-lilly .flag2-lifestyle { min-height: 56vh; margin: 48px 0; }
body.store-iron-lilly .flag2-lifestyle-inner { padding: 56px 22px; margin-left: 0; }
}
/* ── IRON LILLY VIP EXPERIENCE editorial band ─────────────────────── */
body.store-iron-lilly .flag2-vip-editorial {
padding: 120px 24px 80px;
background:
linear-gradient(180deg, rgba(214,40,40,.06) 0%, rgba(0,0,0,0) 100%),
#000000;
border-top: 2px solid rgba(245,194,66,.32);
position: relative;
}
body.store-iron-lilly .flag2-vip-editorial::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--il-red) 50%, transparent 100%);
box-shadow: 0 0 20px rgba(214,40,40,.45);
}
body.store-iron-lilly .flag2-vip-editorial-inner {
max-width: var(--mvp-container, 1360px);
margin: 0 auto;
}
body.store-iron-lilly .flag2-vip-editorial-h {
font-family: Georgia, serif;
font-weight: 900;
letter-spacing: 3px;
text-transform: uppercase;
font-size: clamp(32px, 4vw, 48px);
color: #fff;
margin: 12px 0 48px;
}
body.store-iron-lilly .flag2-vip-grid-editorial {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 28px;
}
body.store-iron-lilly .flag2-vip-pillar {
padding: 32px 26px 28px;
background:
linear-gradient(180deg, rgba(214,40,40,.08) 0%, rgba(0,0,0,.7) 100%);
border: 1px solid rgba(245,194,66,.32);
border-top-width: 2px;
border-top-color: var(--il-red);
border-radius: 4px;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.store-iron-lilly .flag2-vip-pillar:hover {
transform: translateY(-3px);
border-color: var(--il-yellow);
box-shadow: 0 12px 36px rgba(214,40,40,.32);
}
body.store-iron-lilly .flag2-vip-pillar-num {
font-family: Georgia, serif;
font-size: 32px;
font-weight: 900;
color: var(--il-red);
letter-spacing: 2px;
margin-bottom: 14px;
}
body.store-iron-lilly .flag2-vip-pillar h3 {
font-family: Georgia, serif;
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 16px;
color: #fff;
margin: 0 0 12px;
}
body.store-iron-lilly .flag2-vip-pillar p {
font-family: Georgia, serif;
font-size: 14.5px;
line-height: 1.65;
color: var(--il-cream);
font-style: italic;
margin: 0;
}
/* ── Hero copy refinements ───────────────────────────────────────── */
body.store-iron-lilly .flag2-hero-truestory {
font-family: Georgia, serif;
font-style: italic;
font-size: clamp(15px, 1.6vw, 19px);
line-height: 1.55;
letter-spacing: 2px;
max-width: 640px;
text-transform: none;
}
/* Final polish: heritage cream texture overlay on Iron Lilly section surfaces */
body.store-iron-lilly .flag2-band[class*="band"]:not(.flag2-band--vip):not(.flag2-band--dealer)::after {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background:
repeating-linear-gradient(0deg,
rgba(245,194,66,.012) 0px, rgba(245,194,66,.012) 1px,
transparent 1px, transparent 4px);
mix-blend-mode: overlay;
opacity: .8;
}
body.store-iron-lilly .flag2-band { position: relative; }
/* ════════════════════════════════════════════════════════════════════
v1c.11 — Centered single-store directory layout
Activated when stores.length === 1 (JS adds .dir2-grid--centered)
════════════════════════════════════════════════════════════════════ */
.dir2-grid.dir2-grid--centered {
display: flex !important;
justify-content: center;
max-width: 720px;
margin: 0 auto;
}
.dir2-grid.dir2-grid--centered .dir2-card {
width: 100%;
max-width: 680px;
}
/* ════════════════════════════════════════════════════════════════════
v1c.12 — Iron Lilly brand-true palette (matches IronLilly.com)
Charcoal/black/cream/red. NO warm desert browns, NO sunset gold.
════════════════════════════════════════════════════════════════════ */
body.store-iron-lilly {
--il-charcoal: #0F1014;
--il-charcoal-2: #15171C;
--il-iron: #2A2A2E;
--il-cream: #F4ECE0;
--il-cream-warm: #E8DCC2;
--il-red: #D62828;
--il-red-deep: #8C1611;
--il-rust: #B14418;
--il-leather: #2A1A12;
--il-grease: #1A1A1C;
/* Demote previous warm tokens so any holdover styles render in the
cooler IL palette instead of desert tones. */
--il-orange: #B14418;
--il-orange-bright:#D9582A;
--il-yellow: #D9A84C;
--il-yellow-warm: #E8C275;
--store-secondary:#D62828;
background: var(--il-charcoal);
}
/* Iron Lilly page backgrounds → cool charcoal (NOT pure black; matches IL.com) */
body.store-iron-lilly,
body.store-iron-lilly .flag2-hero,
body.store-iron-lilly .flag2-story,
body.store-iron-lilly .flag2-main,
body.store-iron-lilly .flag2-bands { background: var(--il-charcoal); }
body.store-iron-lilly .flag2-band--vip {
background:
linear-gradient(180deg, rgba(214,40,40,.08) 0%, rgba(15,16,20,0) 100%),
var(--il-charcoal);
}
/* Hero gradient overlay — cool grease/iron tones, no warm desert glow */
body.store-iron-lilly .flag2-hero-vignette {
background:
linear-gradient(135deg,
rgba(214,40,40,.20) 0%,
rgba(177,68,24,.10) 30%,
rgba(0,0,0,0) 50%,
rgba(15,16,20,.96) 100%),
radial-gradient(ellipse at 50% 78%, rgba(0,0,0,0) 0%, rgba(15,16,20,.65) 55%, rgba(15,16,20,.98) 100%);
}
/* CTA pivot to true Iron Lilly red (no orange→red gradient that read as sunset) */
body.store-iron-lilly .flag2-cta-primary {
background: var(--il-red);
border: 1px solid var(--il-cream);
color: var(--il-cream);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
0 0 0 1px rgba(0,0,0,.4),
0 12px 28px rgba(214,40,40,.42);
}
body.store-iron-lilly .flag2-cta-primary:hover {
background: var(--il-red-deep);
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.28),
0 0 0 1px var(--il-cream),
0 18px 38px rgba(214,40,40,.55);
filter: none;
}
body.store-iron-lilly .flag2-cta-ghost {
border-color: var(--il-cream);
color: var(--il-cream);
}
body.store-iron-lilly .flag2-cta-ghost:hover {
background: rgba(244,236,224,.08);
border-color: var(--il-red);
color: var(--il-cream);
box-shadow: 0 0 20px rgba(214,40,40,.32);
}
/* Eyebrows / dividers shift away from gold to cream-on-red */
body.store-iron-lilly .flag2-hero-tagline {
color: var(--il-cream);
letter-spacing: 5px;
}
body.store-iron-lilly .flag2-eyebrow {
color: var(--il-red);
}
body.store-iron-lilly .flag2-band:not(:first-child)::before {
background: linear-gradient(90deg,
transparent 0%,
var(--il-red) 50%,
transparent 100%);
height: 2px;
opacity: .75;
box-shadow: 0 0 14px rgba(214,40,40,.4);
}
/* EST. stamp now reads in cream against red */
body.store-iron-lilly .flag2-band-head-left::after {
color: var(--il-cream);
opacity: .55;
}
/* Cards: iron + leather frame instead of gold stitching */
body.store-iron-lilly .flag2-card {
border: 2px solid var(--il-iron);
background:
linear-gradient(180deg, rgba(214,40,40,.04) 0%, rgba(15,16,20,.85) 100%);
box-shadow:
inset 0 0 0 1px rgba(214,40,40,.18),
0 10px 28px rgba(0,0,0,.7);
}
body.store-iron-lilly .flag2-card:hover {
border-color: var(--il-red);
box-shadow:
inset 0 0 0 1px var(--il-cream),
0 0 0 1px var(--il-red),
0 24px 64px rgba(214,40,40,.42);
}
body.store-iron-lilly .flag2-card-img {
background:
radial-gradient(ellipse at 50% 22%, rgba(214,40,40,.14) 0%, transparent 60%),
linear-gradient(180deg, var(--il-charcoal-2) 0%, var(--il-charcoal) 100%);
}
/* "View" pill: cream-on-red */
body.store-iron-lilly .flag2-card::after {
background: var(--il-cream);
color: var(--il-charcoal);
}
/* Dealer ribbon: deep red — not gold gradient (matches IL.com) */
body.store-iron-lilly .flag2-dealer-ribbon {
background: linear-gradient(90deg, var(--il-red-deep) 0%, var(--il-red) 50%, var(--il-rust) 100%);
color: var(--il-cream);
}
/* Featured ribbon on marquee card — solid red */
body.store-iron-lilly .flag2-band--featured .flag2-card--hero .flag2-card-img::before {
background: var(--il-red);
}
/* ════════════════════════════════════════════════════════════════════
v1c.13 — Iron Lilly BRIGHT split hero + larger product merchandising
Harley-Davidson heritage campaign meets Ralph Lauren Americana meets
premium movie merchandise.
════════════════════════════════════════════════════════════════════ */
/* ── Hero becomes a 2-column split, NOT a full-bleed dark scene ──── */
body.store-iron-lilly .flag2-hero {
min-height: 78vh;
background: linear-gradient(135deg, #0F1014 0%, #15171C 100%);
display: block;
border-bottom: 4px solid var(--il-red);
}
/* Right column: bright hero image, NOT a dark vignette */
body.store-iron-lilly .flag2-hero-bg {
position: absolute;
top: 0; right: 0; bottom: 0;
width: 48%;
background-size: cover;
background-position: center;
filter: none; /* no darkening */
transform: none;
background-color: #F4ECE0; /* fallback cream */
/* Soft red glow on the left edge of the image bleeds into the text column */
border-left: 1px solid rgba(214,40,40,.4);
box-shadow: -20px 0 60px rgba(214,40,40,.18);
}
/* Kill the heavy dark vignette */
body.store-iron-lilly .flag2-hero-vignette,
body.store-iron-lilly .flag2-hero-grain { display: none; }
/* Left column: text on charcoal */
body.store-iron-lilly .flag2-hero-inner {
position: relative;
z-index: 2;
max-width: none;
width: 52%;
padding: 80px 56px 80px 7%;
text-align: left;
margin: 0;
}
/* Text alignment overrides — left-align everything on Iron Lilly hero */
body.store-iron-lilly .flag2-eyebrow-pill {
margin-bottom: 28px;
margin-left: 0;
}
body.store-iron-lilly .flag2-hero-logo {
margin: 0 0 22px;
max-width: 320px;
}
body.store-iron-lilly .flag2-hero-title {
text-align: left;
font-size: clamp(56px, 6.5vw, 96px);
letter-spacing: 5px;
margin: 0 0 16px;
line-height: .95;
background: linear-gradient(180deg, #F4ECE0 0%, #E8DCC2 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: none;
}
body.store-iron-lilly .flag2-hero-tagline {
text-align: left;
margin: 0 0 18px;
padding: 14px 0 0;
color: var(--il-red);
font-weight: 900;
}
body.store-iron-lilly .flag2-hero-tagline::before { display: none; }
body.store-iron-lilly .flag2-hero-tagline::after {
left: 0;
transform: none;
width: 90px;
background: var(--il-red);
opacity: 1;
bottom: -10px;
}
body.store-iron-lilly .flag2-hero-truestory {
text-align: left;
margin: 22px 0 24px;
color: var(--il-cream);
font-style: italic;
font-family: Georgia, serif;
}
body.store-iron-lilly .flag2-hero-desc {
text-align: left;
margin: 0 0 32px;
color: var(--il-cream);
max-width: 460px;
}
body.store-iron-lilly .flag2-hero-ctas {
justify-content: flex-start;
}
body.store-iron-lilly .flag2-hero-meta,
body.store-iron-lilly .flag2-hero-platform {
text-align: left;
}
body.store-iron-lilly .flag2-hero-scroll { display: none; }
/* Mobile: stack image above text */
@media (max-width: 900px) {
body.store-iron-lilly .flag2-hero { min-height: auto; }
body.store-iron-lilly .flag2-hero-bg {
position: relative;
width: 100%;
height: 60vh;
border-left: 0;
border-bottom: 4px solid var(--il-red);
box-shadow: 0 8px 30px rgba(214,40,40,.18);
}
body.store-iron-lilly .flag2-hero-inner {
width: 100%;
padding: 48px 22px;
}
body.store-iron-lilly .flag2-hero-title { font-size: clamp(44px, 12vw, 72px); }
}
/* ── Brighter, larger merchandise grids ──────────────────────────── */
body.store-iron-lilly .flag2-band {
padding: 100px 0 80px;
background: #16181D; /* lighter than pure black for clarity */
}
body.store-iron-lilly .flag2-band:nth-child(even) {
background: #1B1E24;
}
body.store-iron-lilly .flag2-grid--4 {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 32px;
}
body.store-iron-lilly .flag2-grid--3 {
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 36px;
}
/* Card body uses cream for high contrast against product image */
body.store-iron-lilly .flag2-card {
background:
linear-gradient(180deg, #F4ECE0 0%, #E8DCC2 100%);
border: 3px solid #2A2A2E;
border-radius: 6px;
box-shadow:
0 2px 0 #0A0A0C,
0 12px 36px rgba(0,0,0,.55);
}
body.store-iron-lilly .flag2-card:hover {
border-color: var(--il-red);
box-shadow:
0 2px 0 var(--il-red-deep),
inset 0 0 0 1px #F4ECE0,
0 22px 56px rgba(214,40,40,.4);
}
/* Product image well: bright cream-on-white with subtle red tint */
body.store-iron-lilly .flag2-card-img {
background:
radial-gradient(ellipse at 50% 30%, #FFFFFF 0%, #F4ECE0 60%, #E8DCC2 100%);
border-bottom: 2px solid #2A2A2E;
}
body.store-iron-lilly .flag2-card-img img {
max-width: 88%; max-height: 88%;
filter: drop-shadow(0 10px 24px rgba(0,0,0,.18));
}
/* Card body text — dark on cream for sharp clarity */
body.store-iron-lilly .flag2-card-body {
background: #F4ECE0;
}
body.store-iron-lilly .card-name {
color: #0A0A0C;
font-family: Georgia, serif;
font-size: 18px;
font-weight: 800;
letter-spacing: 0;
}
body.store-iron-lilly .card-cat {
color: var(--il-red);
font-weight: 900;
}
body.store-iron-lilly .card-price .now {
color: #0A0A0C;
font-size: 19px;
font-weight: 900;
}
body.store-iron-lilly .card-price .was {
color: #6A6A6A;
}
body.store-iron-lilly .flag2-card-desc {
color: #2A2A2E;
font-style: normal;
}
body.store-iron-lilly .flag2-card--hero .flag2-card-cta {
color: var(--il-red);
font-weight: 900;
}
/* Featured badge → red ribbon on cream card */
body.store-iron-lilly .badge {
background: var(--il-red);
color: #F4ECE0;
}
body.store-iron-lilly .flag2-save {
background: var(--il-red);
color: #F4ECE0;
}
/* Section heads pop on the slightly-lighter background */
body.store-iron-lilly .flag2-band-h {
color: #F4ECE0;
}
body.store-iron-lilly .flag2-band-sub {
color: #E8DCC2;
font-style: normal;
font-family: Georgia, serif;
}
/* ── VIP editorial pillars: cream-faced for clarity ─────────────── */
body.store-iron-lilly .flag2-vip-pillar {
background: linear-gradient(180deg, #F4ECE0 0%, #E8DCC2 100%);
border-top-color: var(--il-red);
}
body.store-iron-lilly .flag2-vip-pillar h3 { color: #0A0A0C; }
body.store-iron-lilly .flag2-vip-pillar p { color: #2A2A2E; font-style: normal; }
body.store-iron-lilly .flag2-vip-pillar-num { color: var(--il-red); }
/* ── Lifestyle band — kept dark but with brighter, sharper text ── */
body.store-iron-lilly .flag2-lifestyle-tint {
background:
linear-gradient(90deg, rgba(15,16,20,.85) 0%, rgba(15,16,20,.5) 35%, rgba(15,16,20,.25) 60%, rgba(15,16,20,.75) 100%);
}
/* ════════════════════════════════════════════════════════════════════
v1c.14 — Iron Lilly master design system (matches uploaded reference)
A.D. Farrow workshop hero · trust strip · 6-card category grid ·
heritage Americana typography · cream + Iron Lilly red.
════════════════════════════════════════════════════════════════════ */
/* ── Hero: full-bleed workshop photo, NO dark filter, NO heavy overlay ── */
body.store-iron-lilly .flag2-hero {
min-height: 88vh;
background: #1A1208;
display: block;
border-bottom: 0;
position: relative;
overflow: hidden;
}
body.store-iron-lilly .flag2-hero-bg {
position: absolute;
inset: 0;
width: 100%;
border-left: 0;
box-shadow: none;
filter: none;
/* Position keeps Lilly visible — center-left of the image stays anchored */
background-position: 65% center;
background-size: cover;
}
body.store-iron-lilly .flag2-hero-vignette,
body.store-iron-lilly .flag2-hero-grain { display: none; }
/* SUBTLE warm-side gradient only on the LEFT 50% so text reads, image untouched on the right */
body.store-iron-lilly .flag2-hero::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(20,12,6,.74) 0%, rgba(20,12,6,.55) 28%, rgba(20,12,6,.18) 45%, rgba(20,12,6,0) 60%);
z-index: 1;
}
/* Hero text column — LEFT, vertically centered */
body.store-iron-lilly .flag2-hero-inner {
position: relative;
z-index: 3;
max-width: none;
width: 56%;
padding: 100px 32px 100px 6%;
text-align: left;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 88vh;
}
body.store-iron-lilly .flag2-eyebrow-pill { display: none; }
body.store-iron-lilly .flag2-hero-logo { display: none; }
/* "IRON LILLY" — massive heritage serif headline */
body.store-iron-lilly .flag2-hero-title {
text-align: left;
font-family: 'Big Caslon', 'Playfair Display', Georgia, 'Times New Roman', serif;
font-weight: 900;
font-size: clamp(72px, 9vw, 156px);
letter-spacing: 4px;
line-height: .92;
margin: 0 0 14px;
color: #F4ECE0;
background: none;
-webkit-text-fill-color: #F4ECE0;
text-shadow:
0 4px 28px rgba(0,0,0,.7),
0 1px 0 rgba(0,0,0,.55);
}
/* "THE TRUE STORY OF LILLY FARROW" — small-caps subhead */
body.store-iron-lilly .flag2-hero-tagline {
text-align: left;
font-family: Georgia, serif;
font-size: clamp(15px, 1.6vw, 19px);
font-weight: 700;
letter-spacing: 4px;
color: #F4ECE0;
text-transform: uppercase;
margin: 0 0 18px;
padding: 0 0 14px 0;
text-shadow: 0 2px 12px rgba(0,0,0,.7);
}
body.store-iron-lilly .flag2-hero-tagline::before { display: none; }
body.store-iron-lilly .flag2-hero-tagline::after {
left: 0;
bottom: 0;
width: 320px;
height: 2px;
background: var(--il-red);
opacity: 1;
transform: none;
}
/* Red Lilly-wing icon centered on the red rule */
body.store-iron-lilly .flag2-hero-tagline {
position: relative;
}
body.store-iron-lilly .flag2-hero-tagline::before {
content: '';
display: none;
}
/* Insert the wing via background on the tagline's bottom border position */
/* True-story line — italic Georgia, 3 lines, large */
body.store-iron-lilly .flag2-hero-truestory {
text-align: left;
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: clamp(18px, 1.9vw, 24px);
line-height: 1.5;
letter-spacing: 0;
color: #F4ECE0;
margin: 28px 0 32px;
max-width: 500px;
text-transform: none;
text-shadow: 0 2px 14px rgba(0,0,0,.6);
}
/* Each phrase ("A fearless woman.") on its own line */
body.store-iron-lilly .flag2-hero-truestory {
white-space: pre-line;
}
/* Hide the generic hero desc and meta (the mockup doesn't show them) */
body.store-iron-lilly .flag2-hero-desc,
body.store-iron-lilly .flag2-hero-meta,
body.store-iron-lilly .flag2-hero-platform,
body.store-iron-lilly .flag2-hero-scroll { display: none; }
/* CTAs — block buttons matching the mockup exactly */
body.store-iron-lilly .flag2-hero-ctas {
justify-content: flex-start;
gap: 14px;
margin-bottom: 0;
}
body.store-iron-lilly .flag2-cta-primary {
background: var(--il-red);
border: 1px solid var(--il-red);
color: #F4ECE0;
font-family: Georgia, serif;
font-weight: 900;
font-size: 13px;
letter-spacing: 3px;
padding: 18px 28px;
border-radius: 0;
min-width: 200px;
text-align: center;
box-shadow: 0 6px 20px rgba(214,40,40,.36);
}
body.store-iron-lilly .flag2-cta-primary:hover {
background: var(--il-red-deep);
border-color: var(--il-cream);
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(214,40,40,.52);
}
body.store-iron-lilly .flag2-cta-ghost {
border: 1.5px solid #F4ECE0;
color: #F4ECE0;
font-family: Georgia, serif;
font-weight: 900;
font-size: 13px;
letter-spacing: 3px;
padding: 18px 28px;
border-radius: 0;
min-width: 180px;
text-align: center;
background: rgba(0,0,0,.18);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
body.store-iron-lilly .flag2-cta-ghost:hover {
background: rgba(244,236,224,.14);
border-color: var(--il-cream);
color: #FFFFFF;
}
/* ── Trust strip — cream bar with 4 columns ───────────────────────── */
.flag2-trust {
background: #F4ECE0;
border-bottom: 1px solid rgba(0,0,0,.08);
}
.flag2-trust-inner {
max-width: 1440px;
margin: 0 auto;
padding: 22px 24px;
display: flex;
align-items: center;
justify-content: space-around;
gap: 12px;
flex-wrap: wrap;
}
.flag2-trust-item {
display: flex;
align-items: center;
gap: 12px;
font-family: Georgia, serif;
font-size: 11px;
font-weight: 900;
letter-spacing: 3px;
text-transform: uppercase;
color: #1A1A1C;
}
.flag2-trust-mark {
display: inline-block;
width: 22px;
height: 22px;
border: 1.5px solid #1A1A1C;
border-radius: 50%;
position: relative;
}
.flag2-trust-mark::after {
content: '';
position: absolute;
inset: 4px;
border: 1px solid #1A1A1C;
border-radius: 50%;
}
.flag2-trust-sep {
width: 1px;
height: 36px;
background: rgba(0,0,0,.18);
}
@media (max-width: 820px) {
.flag2-trust-inner { gap: 18px; flex-direction: column; padding: 22px; }
.flag2-trust-sep { display: none; }
}
/* ── SHOP THE COLLECTION — 6 category cards on cream ──────────────── */
.flag2-shop-collection {
background: #FAF3E6;
padding: 68px 24px 72px;
position: relative;
}
.flag2-shop-collection-head {
max-width: 1440px;
margin: 0 auto 36px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.flag2-shop-h {
font-family: Georgia, 'Big Caslon', serif;
font-weight: 900;
font-size: clamp(28px, 3.4vw, 44px);
letter-spacing: 4px;
margin: 0;
color: #1A1208;
display: flex;
align-items: center;
gap: 14px;
}
.flag2-shop-wing {
display: inline-block;
width: 36px;
height: 22px;
background: var(--il-red, #D62828);
-webkit-mask: radial-gradient(circle at 30% 50%, transparent 12%, black 13%) 0 0/100% 100%;
mask: radial-gradient(circle at 30% 50%, transparent 12%, black 13%) 0 0/100% 100%;
border-radius: 50% 12% 6% 50% / 50% 30% 30% 50%;
transform: rotate(-8deg);
}
.flag2-shop-viewall {
font-family: Georgia, serif;
font-weight: 900;
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--il-red, #D62828);
border: 2px solid var(--il-red, #D62828);
padding: 14px 26px;
text-decoration: none;
transition: background .18s ease, color .18s ease;
background: transparent;
}
.flag2-shop-viewall:hover {
background: var(--il-red, #D62828);
color: #F4ECE0;
}
.flag2-shop-grid {
max-width: 1440px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 14px;
}
@media (max-width: 1100px) { .flag2-shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .flag2-shop-grid { grid-template-columns: repeat(2, 1fr); } }
.flag2-shop-card {
position: relative;
display: block;
aspect-ratio: 5 / 4;
border-radius: 6px;
overflow: hidden;
text-decoration: none;
color: inherit;
background: #1A1208;
transition: transform .22s ease, box-shadow .22s ease;
box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.flag2-shop-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.flag2-shop-card-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-color: #1A1208;
transition: transform .35s ease;
}
.flag2-shop-card:hover .flag2-shop-card-img { transform: scale(1.04); }
.flag2-shop-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.85) 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 18px 16px 16px;
color: #F4ECE0;
}
.flag2-shop-card-title {
font-family: Georgia, serif;
font-weight: 900;
font-size: 17px;
letter-spacing: 1.5px;
text-transform: uppercase;
line-height: 1.15;
margin-bottom: 6px;
text-shadow: 0 2px 10px rgba(0,0,0,.7);
}
.flag2-shop-card-cta {
font-family: Georgia, serif;
font-size: 10px;
font-weight: 900;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--il-red, #D62828);
display: flex;
align-items: center;
gap: 8px;
}
.flag2-shop-card-cta span {
transition: transform .18s ease;
}
.flag2-shop-card:hover .flag2-shop-card-cta span {
transform: translateX(4px);
color: #F4ECE0;
}
/* ── Header (Iron Lilly only) — black bar matching reference ─────── */
body.store-iron-lilly .mvp-nav {
background: #0A0A0C;
border-bottom: 0;
}
body.store-iron-lilly .mvp-nav-inner {
max-width: 1440px;
}
/* Logo lockup in header — cream IRON + red script Lilly */
body.store-iron-lilly .mvp-brand-name { display: none; }
body.store-iron-lilly .mvp-brand-tag { display: none; }
body.store-iron-lilly .mvp-brand {
width: auto;
height: 56px;
background-image: url('/store/img/iron-lilly-logo-cream.png'), url('/store/img/iron-lilly-logo-real.png');
background-position: left center;
background-size: contain;
background-repeat: no-repeat;
padding-left: 180px;
}
/* Nav links — heritage caps */
body.store-iron-lilly .mvp-nav-links a {
font-family: Georgia, serif;
font-weight: 800;
font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: #F4ECE0;
}
body.store-iron-lilly .mvp-nav-links a:hover,
body.store-iron-lilly .mvp-nav-links a.on {
color: var(--il-red);
}
/* Mobile responsive — hero text stays bright + readable */
@media (max-width: 900px) {
body.store-iron-lilly .flag2-hero { min-height: 88vh; }
body.store-iron-lilly .flag2-hero-inner {
width: 100%;
padding: 60px 22px;
}
body.store-iron-lilly .flag2-hero::before {
background: linear-gradient(180deg, rgba(20,12,6,.65) 0%, rgba(20,12,6,.4) 60%, rgba(20,12,6,.85) 100%);
}
body.store-iron-lilly .flag2-hero-bg { background-position: center; }
body.store-iron-lilly .flag2-hero-title {
font-size: clamp(54px, 14vw, 96px);
letter-spacing: 2px;
}
body.store-iron-lilly .flag2-hero-ctas { flex-direction: column; align-items: stretch; }
body.store-iron-lilly .flag2-cta-primary,
body.store-iron-lilly .flag2-cta-ghost { width: 100%; min-width: 0; }
.flag2-shop-collection-head { flex-direction: column; align-items: flex-start; }
}
/* ════════════════════════════════════════════════════════════════════
v1c.15 — Hero crop: anchor TOP so A.D. FARROW sign is visible
════════════════════════════════════════════════════════════════════ */
body.store-iron-lilly .flag2-hero-bg {
background-position: center top !important;
background-size: cover;
}
@media (max-width: 900px) {
body.store-iron-lilly .flag2-hero-bg { background-position: center top !important; }
}
/* ════════════════════════════════════════════════════════════════════
v1c.16 — Iron Lilly Complete Collection (1-60)
Filter chip nav + 6 collection bands
════════════════════════════════════════════════════════════════════ */
/* Filter chip bar — sticky to the merch area */
.flag2-collection-filter {
background: #1A1208;
border-top: 1px solid rgba(214,40,40,.4);
border-bottom: 2px solid #D62828;
padding: 22px 24px;
position: sticky;
top: 0;
z-index: 8;
box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
.flag2-collection-filter-inner {
max-width: 1440px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.flag2-chip {
appearance: none;
background: transparent;
border: 1.5px solid rgba(244,236,224,.45);
color: #F4ECE0;
font-family: Georgia, serif;
font-weight: 800;
font-size: 11px;
letter-spacing: 2.6px;
text-transform: uppercase;
padding: 12px 20px;
border-radius: 0;
cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.flag2-chip:hover {
border-color: #F4ECE0;
background: rgba(244,236,224,.06);
}
.flag2-chip.on {
background: #D62828;
border-color: #D62828;
color: #F4ECE0;
box-shadow: 0 4px 14px rgba(214,40,40,.4);
}
.flag2-chip span {
margin-left: 6px;
font-weight: 700;
opacity: .8;
}
@media (max-width: 720px) {
.flag2-collection-filter { padding: 16px 14px; position: relative; }
.flag2-chip { font-size: 10px; padding: 10px 14px; letter-spacing: 1.8px; }
}
/* Collection bands — Iron Lilly, all 6 share consistent styling */
body.store-iron-lilly .flag2-band--collection {
padding: 80px 24px 70px;
background: #16181D;
border-top: 0;
}
body.store-iron-lilly .flag2-band--collection[data-collection="founders"] { background: linear-gradient(180deg, #1A1208 0%, #14100A 100%); }
body.store-iron-lilly .flag2-band--collection[data-collection="garage"] { background: linear-gradient(180deg, #14100A 0%, #181318 100%); }
body.store-iron-lilly .flag2-band--collection[data-collection="racing"] { background: linear-gradient(180deg, #181318 0%, #1F1010 100%); }
body.store-iron-lilly .flag2-band--collection[data-collection="community"] { background: linear-gradient(180deg, #1F1010 0%, #181812 100%); }
body.store-iron-lilly .flag2-band--collection[data-collection="premium-garage"] { background: linear-gradient(180deg, #181812 0%, #1A1A1F 100%); }
body.store-iron-lilly .flag2-band--collection[data-collection="movie"] { background: linear-gradient(180deg, #1A1A1F 0%, #100A0A 100%); }
body.store-iron-lilly .flag2-band--collection .flag2-grid--4 {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 28px;
}
/* Override product image rules so the new PNG product photos fill cleanly */
body.store-iron-lilly .flag2-band--collection .flag2-card-img {
background: #1A1208;
padding: 0;
aspect-ratio: 4 / 5;
}
body.store-iron-lilly .flag2-band--collection .flag2-card-img img {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
object-fit: cover;
filter: none;
}
/* ════════════════════════════════════════════════════════════════════
v1c.17 — Product card consistency (Iron Lilly Complete Collection)
• Identical card dimensions
• object-fit: contain + flexbox centering for every product photo
• Hats, keychains, wallets, compasses, etc. all visually centered
• No image stretching, no cropping by CSS, no layout shifts
════════════════════════════════════════════════════════════════════ */
body.store-iron-lilly .flag2-band--collection .flag2-grid--4 {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
align-items: stretch;
}
/* Identical card height via flex column stretch */
body.store-iron-lilly .flag2-band--collection .flag2-card {
display: flex;
flex-direction: column;
height: 100%;
}
/* Image container: fixed aspect, centered contain */
body.store-iron-lilly .flag2-band--collection .flag2-card-img {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1 !important;
padding: 18px;
background: #14110A;
border-bottom: 2px solid #2A2A2E;
overflow: hidden;
}
body.store-iron-lilly .flag2-band--collection .flag2-card-img img {
width: 100% !important;
height: 100% !important;
max-width: 100%;
max-height: 100%;
object-fit: contain !important;
object-position: center center !important;
display: block;
margin: 0 auto;
filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
transition: transform .35s ease;
}
body.store-iron-lilly .flag2-band--collection .flag2-card:hover .flag2-card-img img {
transform: scale(1.04);
}
/* Card body fills remaining space so all cards align at the bottom */
body.store-iron-lilly .flag2-band--collection .flag2-card-body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 130px;
padding: 20px 22px 22px;
}
body.store-iron-lilly .flag2-band--collection .card-cat {
font-size: 10px;
letter-spacing: 2px;
margin-bottom: 8px;
}
body.store-iron-lilly .flag2-band--collection .card-name {
font-size: 17px;
line-height: 1.25;
min-height: 42px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
body.store-iron-lilly .flag2-band--collection .card-price {
margin-top: 12px;
}
/* Featured ribbon stays positioned consistently */
body.store-iron-lilly .flag2-band--collection .badge {
position: absolute;
top: 14px;
left: 14px;
z-index: 3;
padding: 6px 12px;
font-family: Georgia, serif;
font-size: 9px;
font-weight: 900;
letter-spacing: 2px;
}
body.store-iron-lilly .flag2-band--collection .flag2-card { position: relative; }
/* Responsive */
@media (max-width: 1100px) {
body.store-iron-lilly .flag2-band--collection .flag2-grid--4 {
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
}
@media (max-width: 740px) {
body.store-iron-lilly .flag2-band--collection .flag2-grid--4 {
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
body.store-iron-lilly .flag2-band--collection .flag2-card-img { padding: 12px; }
body.store-iron-lilly .flag2-band--collection .flag2-card-body { padding: 14px 16px 16px; }
body.store-iron-lilly .flag2-band--collection .card-name { font-size: 14px; min-height: 36px; }
}
@media (max-width: 420px) {
body.store-iron-lilly .flag2-band--collection .flag2-grid--4 {
grid-template-columns: 1fr;
}
}
/* ════════════════════════════════════════════════════════════════════
v1c.18 — Product photo positioning
The PNGs themselves now have the left 15% cropped off at source.
This object-position adds a safety nudge so any future re-uploaded
image is still positioned right-of-center.
════════════════════════════════════════════════════════════════════ */
body.store-iron-lilly .flag2-band--collection .flag2-card-img img {
object-position: 58% center !important;
}
/* ════════════════════════════════════════════════════════════════════
v1c.19 — Iron Lilly hero: replace "IRON LILLY" text with logo SVG
The transparent-background logo image now occupies the wordmark slot.
════════════════════════════════════════════════════════════════════ */
/* Show the logo image (overrides earlier display:none) */
body.store-iron-lilly .flag2-hero-logo {
display: block !important;
margin: 0 0 14px;
max-width: 540px;
width: 100%;
filter: drop-shadow(0 6px 24px rgba(0,0,0,.55));
}
body.store-iron-lilly .flag2-hero-logo img {
display: block;
width: 100%;
height: auto;
max-height: 220px;
object-fit: contain;
background: transparent; /* SVG renders without any background */
}
/* Hide the H1 "IRON LILLY" text wordmark — the logo image IS the wordmark now */
body.store-iron-lilly .flag2-hero-title {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap; border: 0;
}
/* Mobile: scale the logo down */
@media (max-width: 900px) {
body.store-iron-lilly .flag2-hero-logo {
max-width: 400px;
margin: 0 0 12px;
}
body.store-iron-lilly .flag2-hero-logo img { max-height: 160px; }
}
@media (max-width: 540px) {
body.store-iron-lilly .flag2-hero-logo { max-width: 320px; }
body.store-iron-lilly .flag2-hero-logo img { max-height: 130px; }
}
/* ════════════════════════════════════════════════════════════════════
v1c.20 — Hero wordmark fix: revert to typography "IRON LILLY"
The custom logo SVG could not match production quality.
The reference mockup shows IRON LILLY as a massive cream serif
headline with a red rule + wing accent below — restoring that.
════════════════════════════════════════════════════════════════════ */
/* Hide the logo image entirely on Iron Lilly hero */
body.store-iron-lilly .flag2-hero-logo {
display: none !important;
}
/* SHOW the H1 wordmark — reverse v1c.19's visually-hidden treatment */
body.store-iron-lilly .flag2-hero-title {
position: relative !important;
width: auto !important;
height: auto !important;
margin: 0 0 18px !important;
padding: 0 !important;
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
white-space: normal !important;
border: 0 !important;
display: block !important;
/* Premium heritage typography (matches reference mockup exactly) */
font-family: 'Playfair Display','Big Caslon','Times New Roman',Georgia,serif !important;
font-weight: 900 !important;
font-size: clamp(64px, 8.5vw, 144px) !important;
letter-spacing: 4px !important;
line-height: .96 !important;
text-align: left !important;
text-transform: uppercase !important;
background: linear-gradient(180deg, #F8F2E5 0%, #E8DCC2 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-shadow: 0 4px 28px rgba(0,0,0,.7),
0 1px 0 rgba(0,0,0,.55);
}
/* Subtle red wing accent between title and tagline rule */
body.store-iron-lilly .flag2-hero-title::after {
content: '';
display: block;
width: 56px;
height: 18px;
margin: 14px 0 0;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
opacity: .95;
}
@media (max-width: 900px) {
body.store-iron-lilly .flag2-hero-title {
font-size: clamp(48px, 13vw, 88px) !important;
letter-spacing: 2px !important;
}
body.store-iron-lilly .flag2-hero-title::after { width: 40px; height: 14px; margin-top: 10px; }
}
/* ════════════════════════════════════════════════════════════════════
v1c.21 — Hero wordmark in pure white
════════════════════════════════════════════════════════════════════ */
body.store-iron-lilly .flag2-hero-title {
background: none !important;
-webkit-background-clip: unset !important;
background-clip: unset !important;
-webkit-text-fill-color: #FFFFFF !important;
color: #FFFFFF !important;
}
/* ════════════════════════════════════════════════════════════════════
v1c.22 — Collection 1 product photography (clean, centered)
The new official photos are professional e-commerce shots on white
backgrounds — no badges, no overlays, no right-shift needed.
Reverting v1c.18's 58% object-position back to perfect center.
════════════════════════════════════════════════════════════════════ */
body.store-iron-lilly .flag2-band--collection .flag2-card-img {
display: flex !important;
align-items: center !important;
justify-content: center !important;
aspect-ratio: 4 / 5 !important;
padding: 0 !important;
background: #F4ECE0 !important;
border-bottom: 2px solid #2A2A2E;
overflow: hidden;
}
body.store-iron-lilly .flag2-band--collection .flag2-card-img img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center center !important; /* perfect center, no shift */
margin: 0 !important;
filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
transition: transform .35s ease;
}
body.store-iron-lilly .flag2-band--collection .flag2-card:hover .flag2-card-img img {
transform: scale(1.03);
}
/* Card body remains cream + dark text (high contrast) */
body.store-iron-lilly .flag2-band--collection .flag2-card-body {
background: #FAF3E6;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px 22px 22px;
min-height: 140px;
}
/* Mobile / tablet responsive — image container stays a fixed aspect */
@media (max-width: 740px) {
body.store-iron-lilly .flag2-band--collection .flag2-card-img { aspect-ratio: 4 / 5 !important; }
}
/* ════════════════════════════════════════════════════════════════════
v1c.23 — Two surgical removals (Iron Lilly hero + below-hero area)
1. Remove "SHOP THE COLLECTION" 6-card teaser section
2. Remove the small red wing brush stroke under IRON LILLY hero text
No engine/DB changes — products and layout otherwise untouched.
════════════════════════════════════════════════════════════════════ */
/* 1. Hide the SHOP THE COLLECTION cream band (6 category cards) */
.flag2-shop-collection,
body.store-iron-lilly .flag2-shop-collection {
display: none !important;
}
/* 2. Hide the red wing brush stroke (::after on the hero wordmark) */
body.store-iron-lilly .flag2-hero-title::after {
display: none !important;
content: none !important;
background: none !important;
}
/* ════════════════════════════════════════════════════════════════════
v1c.24 — Two more surgical removals (Iron Lilly)
1. "FEATURED COLLECTION / What the studio recommends." band
2. "LILLY'S MOTORCYCLE COLLECTION / A fearless woman..." lifestyle band
No engine/DB changes — products and other bands untouched.
════════════════════════════════════════════════════════════════════ */
body.store-iron-lilly .flag2-band--featured,
body.store-iron-lilly .flag2-lifestyle {
display: none !important;
}
/* ════════════════════════════════════════════════════════════════════
v1c.26 — Disable hover-scale on collection card images.
The container has overflow:hidden, so any transform:scale on hover
was clipping the image edges (visible as "cut off" on touch devices
where hover state can stick). Kills the scale; cards still hover.
════════════════════════════════════════════════════════════════════ */
body.store-iron-lilly .flag2-band--collection .flag2-card:hover .flag2-card-img img,
body.store-iron-lilly .flag2-band--collection .flag2-card .flag2-card-img img {
transform: none !important;
}
/* ════════════════════════════════════════════════════════════════════
v1c.27 — DEFINITIVE "fits inside frame" fix for every collection card.
The card-img container gets internal padding so the photo can never
physically reach the frame edge — and the ![]()
is forced to contain
inside that padded area at all states (rest, hover, focus, tap).
This sits at the END of store.css so it wins the cascade against any
earlier rule (v1c.16/17/18/22/26 etc.). Pure layout — no PNG, DB,
markup, or product changes. Applies to every Iron Lilly card across
all 6 collections: Founders, Garage, Lilly, Racing, Premium Garage,
Movie.
════════════════════════════════════════════════════════════════════ */
/* Container: the cream/white frame should fill 95% of the dark card.
Width 95%, centered horizontally, with only tiny internal padding so the
product photo itself fills the cream area cleanly. */
body.store-iron-lilly .flag2-band--collection .card-img,
body.store-iron-lilly .flag2-band--collection .flag2-card-img,
body.store-iron-lilly .flag2-band--collection .flag2-card .card-img,
body.store-iron-lilly .flag2-band--collection .flag2-card .flag2-card-img {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
aspect-ratio: 4 / 5 !important;
width: 95% !important; /* cream box = 95% of dark card */
margin: 12px auto 0 !important; /* centered horizontally, small top gap */
padding: 6px !important; /* tiny inset so photo never touches frame edge */
background: #F4ECE0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
border-bottom: none !important;
border-radius: 4px !important;
}
/* Image: use max-* not width/height 100%, so contain works against the
PADDED inner-box (not the outer frame). Image always fits.
Covers both .card-img and .flag2-card-img descendants. */
body.store-iron-lilly .flag2-band--collection .card-img img,
body.store-iron-lilly .flag2-band--collection .flag2-card-img img,
body.store-iron-lilly .flag2-band--collection .flag2-card .card-img img,
body.store-iron-lilly .flag2-band--collection .flag2-card .flag2-card-img img,
body.store-iron-lilly .flag2-band--collection .card-img > img,
body.store-iron-lilly .flag2-band--collection .flag2-card-img > img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
display: block !important;
margin: 0 auto !important;
transform: none !important;
transition: none !important;
filter: none !important;
opacity: 1 !important;
}
/* Hover, focus, touch — explicitly suppress every state that could scale */
body.store-iron-lilly .flag2-band--collection .flag2-card:hover .flag2-card-img img,
body.store-iron-lilly .flag2-band--collection .flag2-card:active .flag2-card-img img,
body.store-iron-lilly .flag2-band--collection .flag2-card:focus .flag2-card-img img,
body.store-iron-lilly .flag2-band--collection .flag2-card-img:hover img,
body.store-iron-lilly .flag2-band--collection .flag2-card-img:active img {
transform: none !important;
scale: 1 !important;
filter: none !important;
}
/* Mobile: keep the 95% cream box rule */
@media (max-width: 740px) {
body.store-iron-lilly .flag2-band--collection .card-img,
body.store-iron-lilly .flag2-band--collection .flag2-card-img {
width: 95% !important;
padding: 5px !important;
aspect-ratio: 4 / 5 !important;
}
}
/* Product-detail page (product.html) — cream frame fills 95% too */
body.store-iron-lilly .product-img {
width: 95% !important;
margin: 0 auto !important;
padding: 6px !important;
box-sizing: border-box !important;
overflow: hidden !important;
background: #F4ECE0 !important;
}
body.store-iron-lilly .product-img img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
}
/* ════════════════════════════════════════════════════════════════════
v1c.28 — Homepage featured-product cards (/) get the same treatment.
The homepage uses body.mvp + .mvp-featured-grid > .card > .card-img.
Apply the cream-frame-fills-95% rule there too, with photo centered
and properly sized. Pure CSS — no template/HTML/PNG changes.
════════════════════════════════════════════════════════════════════ */
body.mvp .mvp-featured-grid .card,
.mvp-featured-grid .card {
position: relative !important;
display: flex !important;
flex-direction: column !important;
}
body.mvp .mvp-featured-grid .card-img,
.mvp-featured-grid .card-img {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
aspect-ratio: 1 / 1 !important;
width: 95% !important;
margin: 12px auto 0 !important;
padding: 6px !important;
background: #F4ECE0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
border-radius: 4px !important;
}
body.mvp .mvp-featured-grid .card-img img,
.mvp-featured-grid .card-img img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
display: block !important;
margin: 0 auto !important;
transform: none !important;
opacity: 1 !important;
filter: none !important;
}
/* Mobile homepage cards — same 95% cream box */
@media (max-width: 740px) {
body.mvp .mvp-featured-grid .card-img,
.mvp-featured-grid .card-img {
width: 95% !important;
padding: 5px !important;
aspect-ratio: 1 / 1 !important;
}
}
/* ════════════════════════════════════════════════════════════════════
v1c.29 — Nav brand logo image (replaces the text wordmark in the top
bar across every page). The header now uses an ![]()
with the new MFE gradient mark.
════════════════════════════════════════════════════════════════════ */
/* The nav brand is now a single ![]()
. Force background:none + override
any older rule that drew a small square logo on .mvp-brand-logo. */
img.mvp-brand-logo,
.mvp-brand-logo {
display: block !important;
width: auto !important;
height: 44px !important;
max-width: 240px !important;
max-height: 44px !important;
object-fit: contain !important;
background: none !important;
background-image: none !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.mvp .mvp-brand,
header .mvp-brand,
.mvp-brand {
display: inline-flex !important;
align-items: center !important;
flex-direction: row !important;
gap: 0 !important;
text-decoration: none !important;
/* Kill the legacy v1c.5 background-image lockup on .mvp-brand itself
so the only visible logo is the ![]()
child. */
background: none !important;
background-image: none !important;
width: auto !important;
height: auto !important;
}
/* Kill any leftover text wordmark sitting next to the logo */
body.mvp .mvp-brand .mvp-brand-name,
body.mvp .mvp-brand .mvp-brand-tag,
body.mvp .mvp-brand-name,
body.mvp .mvp-brand-tag {
display: none !important;
}
@media (max-width: 740px) {
img.mvp-brand-logo,
.mvp-brand-logo {
height: 36px !important;
max-height: 36px !important;
max-width: 200px !important;
}
}
/* ════════════════════════════════════════════════════════════════════
v1c.30 — Footer brand logo image (replaces the text wordmark in the
footer across every page). Larger than the nav version since the
footer has more room and the wordmark is a primary brand mark there.
════════════════════════════════════════════════════════════════════ */
.mvp-footer-brand-logo {
display: block;
width: 100%;
max-width: 280px;
height: auto;
margin: 0 0 14px;
}
@media (max-width: 740px) {
.mvp-footer-brand-logo { max-width: 220px; }
}
/* ════════════════════════════════════════════════════════════════════
v1c.31 — Center the nav tabs in the header.
3-column grid: brand left · links centered · CTA right.
Works regardless of how wide the brand logo or CTA button is.
════════════════════════════════════════════════════════════════════ */
.mvp-nav-inner {
display: grid !important;
grid-template-columns: 1fr auto 1fr !important;
align-items: center !important;
gap: 16px !important;
}
.mvp-nav-inner .mvp-brand {
justify-self: start !important;
}
.mvp-nav-inner .mvp-nav-links {
margin-left: 0 !important;
justify-self: center !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
}
.mvp-nav-inner .mvp-nav-cta,
.mvp-nav-inner .mvp-nav-burger,
.mvp-nav-inner .store-cart {
justify-self: end !important;
grid-column: 3 !important;
}
/* Group cart + CTA + burger on the right when more than one exists */
.mvp-nav-inner .mvp-nav-cta + .store-cart,
.mvp-nav-inner .store-cart + .mvp-nav-cta,
.mvp-nav-inner .mvp-nav-cta ~ .mvp-nav-burger {
margin-left: 8px !important;
}
/* ════════════════════════════════════════════════════════════════════
v1c.32 — COMPREHENSIVE RESPONSIVE PASS
Premium-grade mobile across iPhone (320 / 375 / 390 / 414), Android,
tablet (768), and small desktop (1024).
Strategy:
• Keep desktop design intent — only clamp values down at the
documented breakpoints.
• Mobile-first overrides via three media query bands:
A. <= 1024 (small desktop / tablet landscape)
B. <= 768 (tablet portrait / large phone)
C. <= 480 (phone — includes 320/375/390/414)
• Use clamp() for headlines so size is fluid between bands.
• Hide horizontal overflow at root.
• Enforce min touch target = 44px on every ,