diff --git a/assets/base.css b/assets/base.css index c8c0d4cbde1..499690842d5 100644 --- a/assets/base.css +++ b/assets/base.css @@ -3595,3 +3595,186 @@ details-disclosure > details { transform: translateX(100%) scaleX(0); } } + +/* ============================================================ + GK MOLTEN BUTTONS - site-wide premium restyle (v2) + Root cause of v1 defects: Dawn draws the button border via + .button::after, its hover shadow via .button::before, and the + label color via the --color-button-text variable. v2 explicitly + neutralizes those pseudo-elements and forces the dark label, + then repurposes ::before as the shimmer sheen so it does not + fight Dawn. Tertiary (icon/link/close) buttons are left alone. + All Dawn classes, data-attrs, ARIA and checkout JS are untouched. + ============================================================ */ + +/* -- DEFECT 2: kill Dawn's ::after border ring on skinned buttons -- */ +.button:not(.button--tertiary)::after, +.shopify-challenge__button::after, +.customer button:not(.button--tertiary)::after, +button.shopify-payment-button__button--unbranded::after { + content: none !important; + border: none !important; + box-shadow: none !important; +} + +/* -- DEFECT 3 + shimmer: reset Dawn's ::before shadow, repurpose as sheen -- */ +.button:not(.button--tertiary)::before, +.shopify-challenge__button::before, +.customer button:not(.button--tertiary)::before, +button.shopify-payment-button__button--unbranded::before { + content: '' !important; + box-shadow: none !important; + top: 0 !important; + right: auto !important; + bottom: 0 !important; + left: 0 !important; + width: 32% !important; + height: 100% !important; + z-index: 0 !important; + border-radius: 0 !important; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent) !important; + transform: translateX(-150%) skewX(-20deg); + opacity: 0; + pointer-events: none !important; +} + +/* -- Shared: positioning + clip so the sheen stays inside the button -- */ +.button:not(.button--tertiary), +.shopify-challenge__button, +.customer button:not(.button--tertiary), +button.shopify-payment-button__button--unbranded { + position: relative; + overflow: hidden; + border: none !important; + border-radius: 10px; + padding: 15px 32px; + font-weight: 800; + letter-spacing: 2.5px; + text-transform: uppercase; + transition: transform 0.15s ease, filter 0.25s ease; +} + +/* keep any wrapped label above the sheen layer */ +.button:not(.button--tertiary) > *, +.shopify-challenge__button > *, +.customer button:not(.button--tertiary) > *, +button.shopify-payment-button__button--unbranded > * { + position: relative; + z-index: 1; +} + +/* -- PRIMARY - molten orange body + DEFECT 1 dark label -- */ +.button:not(.button--tertiary):not(.button--secondary), +.shopify-challenge__button, +.customer button:not(.button--tertiary):not(.button--secondary), +button.shopify-payment-button__button--unbranded { + color: #1f0f02 !important; + background: linear-gradient(180deg, #ffc879 0%, #e8893a 50%, #c8601a 100%) !important; + box-shadow: + 0 1px 0 rgba(255, 240, 220, 0.7) inset, + 0 -4px 10px rgba(120, 48, 0, 0.55) inset, + 0 0 0 1px rgba(255, 180, 110, 0.35), + 0 12px 28px -8px rgba(232, 137, 58, 0.55), + 0 3px 6px rgba(0, 0, 0, 0.6) !important; +} + +/* force dark label on any inner span / label node (DEFECT 1) */ +.button:not(.button--tertiary):not(.button--secondary) span, +.button:not(.button--tertiary):not(.button--secondary) .button-label, +.shopify-challenge__button span, +.customer button:not(.button--tertiary):not(.button--secondary) span, +button.shopify-payment-button__button--unbranded span { + color: #1f0f02 !important; +} + +/* -- Hover / active / focus (primary + payment) -- */ +.button:not(.button--tertiary):not(.button--secondary):hover, +.shopify-challenge__button:hover, +.customer button:not(.button--tertiary):not(.button--secondary):hover, +button.shopify-payment-button__button--unbranded:hover { + transform: translateY(-2px); + filter: brightness(1.05); +} + +.button:not(.button--tertiary):active, +.shopify-challenge__button:active, +.customer button:not(.button--tertiary):active, +button.shopify-payment-button__button--unbranded:active { + transform: translateY(1px); + filter: brightness(0.97); +} + +.button:not(.button--tertiary):focus-visible, +.shopify-challenge__button:focus-visible, +.customer button:not(.button--tertiary):focus-visible, +button.shopify-payment-button__button--unbranded:focus-visible { + outline: 2px solid #f0a060 !important; + outline-offset: 3px; +} + +/* trigger the sheen sweep on hover */ +.button:not(.button--tertiary):hover::before, +.shopify-challenge__button:hover::before, +.customer button:not(.button--tertiary):hover::before, +button.shopify-payment-button__button--unbranded:hover::before { + opacity: 1; + animation: gkShimmer 1.15s ease-out; +} + +/* -- SECONDARY - dark glass, white label -- */ +.button--secondary { + color: #fff !important; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)) !important; + border: 1px solid rgba(200, 96, 26, 0.5) !important; + box-shadow: + 0 1px 0 rgba(255, 255, 255, 0.12) inset, + 0 8px 20px -8px rgba(0, 0, 0, 0.8) !important; + filter: none; +} + +.button--secondary span, +.button--secondary .button-label { + color: #fff !important; +} + +.button--secondary:hover { + border-color: #C8601A !important; + background: linear-gradient(180deg, rgba(200, 96, 26, 0.18), rgba(200, 96, 26, 0.04)) !important; + transform: translateY(-2px); + filter: none; +} + +/* -- Disabled - keep Dawn opacity, kill motion -- */ +.button:disabled, +.button[aria-disabled='true'], +.button.disabled, +.customer button:disabled, +.customer button[aria-disabled='true'], +button.shopify-payment-button__button--unbranded:disabled { + transform: none !important; + filter: none !important; +} + +/* -- Shimmer keyframe -- */ +@keyframes gkShimmer { + 0% { transform: translateX(-150%) skewX(-20deg); } + 55%, 100% { transform: translateX(280%) skewX(-20deg); } +} + +/* -- Reduced motion -- */ +@media (prefers-reduced-motion: reduce) { + .button:not(.button--tertiary)::before, + .shopify-challenge__button::before, + .customer button:not(.button--tertiary)::before, + button.shopify-payment-button__button--unbranded::before { + display: none !important; + } + .button:not(.button--tertiary):hover, + .button--secondary:hover, + .shopify-challenge__button:hover, + .customer button:not(.button--tertiary):hover, + button.shopify-payment-button__button--unbranded:hover { + transform: none; + } +} +/* -- End GK Molten Buttons v2 -- */ diff --git a/assets/custom-greg-koch.css b/assets/custom-greg-koch.css new file mode 100644 index 00000000000..149a640f66b --- /dev/null +++ b/assets/custom-greg-koch.css @@ -0,0 +1,469 @@ +/* ============================================ + GREG KOCH - CUSTOM DESIGN SYSTEM + ============================================ + Colors: + Background: #0D0D0D + Cards/surfaces: #141414 + Borders: #272727 + Primary accent: #E8690A (orange) + Body text: #E8E8E8 + Muted text: #777777 + Fonts: + Headlines: Bebas Neue + Body: DM Sans + Labels/eyebrow: DM Mono + ============================================ */ + +/* --- CSS Custom Properties --- */ +:root { + --gk-bg: #0D0D0D; + --gk-card: #141414; + --gk-border: #272727; + --gk-accent: #E8690A; + --gk-text: #E8E8E8; + --gk-muted: #777777; + --gk-white: #FFFFFF; + --gk-font-heading: 'Bebas Neue', sans-serif; + --gk-font-body: 'DM Sans', sans-serif; + --gk-font-label: 'DM Mono', monospace; +} + +/* --- Global Font Overrides --- */ +body, +.shopify-section, +input, +textarea, +select { + font-family: var(--gk-font-body) !important; + color: var(--gk-text); +} + +h1, h2, h3, h4, h5, h6, +.h0, .h1, .h2, .h3, .h4, .h5, +.hN, +[class*="heading"], +.banner__heading, +.title, +.featured-collection__title, +.rich-text__heading { + font-family: var(--gk-font-heading) !important; + text-transform: uppercase; + letter-spacing: 1px; + color: var(--gk-text); +} + +/* Eyebrow / Label text */ +.gk-eyebrow, +.gk-label, +.caption, +.caption-with-letter-spacing { + font-family: var(--gk-font-label) !important; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.75rem; + color: var(--gk-accent); +} + +/* --- Background Overrides --- */ +body, +body.gradient { + background-color: var(--gk-bg) !important; + color: var(--gk-text) !important; +} + +/* Override Dawn color scheme backgrounds */ +.color-scheme-1, +.color-scheme--scheme-1, +[class*="color-scheme-1"] { + background-color: var(--gk-bg) !important; + color: var(--gk-text) !important; +} + +/* --- Button Overrides --- */ +.button, +.shopify-challenge__button, +.customer button, +button.button, +a.button, +.btn, +.shopify-payment-button .shopify-payment-button__button--unbranded { + font-family: var(--gk-font-body) !important; + text-transform: uppercase; + letter-spacing: 2px; + border-radius: 0 !important; + font-weight: 500; + font-size: 0.85rem; + padding: 12px 32px; + transition: all 0.3s ease; + cursor: pointer; +} + +/* Primary Button */ +.button--primary, +.button:not(.button--secondary):not(.button--tertiary), +.shopify-payment-button .shopify-payment-button__button--unbranded { + background-color: var(--gk-accent) !important; + color: var(--gk-white) !important; + border: 2px solid var(--gk-accent) !important; +} + +.button--primary:hover, +.button:not(.button--secondary):not(.button--tertiary):hover, +.shopify-payment-button .shopify-payment-button__button--unbranded:hover { + background-color: transparent !important; + color: var(--gk-accent) !important; + border-color: var(--gk-accent) !important; +} + +/* Secondary Button */ +.button--secondary { + background-color: transparent !important; + color: var(--gk-accent) !important; + border: 2px solid var(--gk-accent) !important; +} + +.button--secondary:hover { + background-color: var(--gk-accent) !important; + color: var(--gk-white) !important; +} + +/* Tertiary / Text Button */ +.button--tertiary { + color: var(--gk-accent) !important; + text-decoration-color: var(--gk-accent) !important; + padding: 0; + letter-spacing: 2px; + text-transform: uppercase; + font-family: var(--gk-font-body) !important; +} + +/* Remove Dawn's default button border-radius */ +.button, +.button::after, +.button::before { + border-radius: 0 !important; +} + +/* --- Card Styles --- */ +.card, +.card-wrapper, +.product-card-wrapper .card, +.card--card, +.card--standard { + background-color: var(--gk-card) !important; + border: 1px solid var(--gk-border) !important; + border-radius: 0 !important; +} + +.card__content, +.card__information { + color: var(--gk-text); +} + +.card__heading, +.card__heading a { + color: var(--gk-text) !important; + font-family: var(--gk-font-heading) !important; +} + +/* Product prices in Bebas Neue orange */ +.price-item, +.price-item--regular, +.price-item--sale, +.price .money, +.card .price { + font-family: var(--gk-font-heading) !important; + color: var(--gk-accent) !important; + font-size: 1.2rem; +} + +/* --- Header Styles --- */ +.section-header, +.header-wrapper, +.header { + background-color: var(--gk-bg) !important; + border-bottom: 1px solid var(--gk-border) !important; +} + +.header__heading-link, +.header__heading a { + color: var(--gk-text) !important; +} + +/* Navigation links */ +.header__menu-item, +.header__menu-item span, +.list-menu__item--link, +.header__active-menu-item { + font-family: var(--gk-font-body) !important; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.8rem; + font-weight: 500; + color: var(--gk-text) !important; + transition: color 0.3s ease; +} + +.header__menu-item:hover, +.header__menu-item:hover span, +.list-menu__item--link:hover { + color: var(--gk-accent) !important; +} + +/* Header icons */ +.header__icon, +.header__icon svg, +.header__icon path { + color: var(--gk-text) !important; +} + +.header__icon:hover { + color: var(--gk-accent) !important; +} + +/* Mobile menu drawer */ +.menu-drawer, +.menu-drawer__inner-container { + background-color: var(--gk-bg) !important; + color: var(--gk-text) !important; +} + +.menu-drawer__menu-item, +.menu-drawer__menu-item span { + color: var(--gk-text) !important; + font-family: var(--gk-font-body) !important; + text-transform: uppercase; + letter-spacing: 2px; +} + +/* --- Footer Styles --- */ +.footer, +.section-footer, +.footer-block { + background-color: var(--gk-bg) !important; + border-top: 1px solid var(--gk-border) !important; + color: var(--gk-text) !important; +} + +.footer-block__heading, +.footer__content-top { + color: var(--gk-text) !important; + font-family: var(--gk-font-heading) !important; +} + +.footer a, +.footer-block a { + color: var(--gk-muted) !important; + transition: color 0.3s ease; +} + +.footer a:hover, +.footer-block a:hover { + color: var(--gk-accent) !important; +} + +/* Footer newsletter input */ +.footer .newsletter-form__field-wrapper input, +.footer .field__input { + background-color: var(--gk-card) !important; + border: 1px solid var(--gk-border) !important; + color: var(--gk-text) !important; + border-radius: 0 !important; +} + +.footer .newsletter-form__button, +.footer .field__button { + background-color: var(--gk-accent) !important; + color: var(--gk-white) !important; + border-radius: 0 !important; +} + +/* --- Announcement Bar --- */ +.announcement-bar { + background-color: var(--gk-accent) !important; + color: var(--gk-white) !important; +} + +.announcement-bar__message, +.announcement-bar__link { + color: var(--gk-white) !important; + font-family: var(--gk-font-label) !important; + letter-spacing: 2px; + text-transform: uppercase; + font-size: 0.75rem; +} + +/* --- Form Inputs --- */ +input[type="text"], +input[type="email"], +input[type="tel"], +input[type="password"], +input[type="number"], +input[type="search"], +textarea, +select, +.field__input { + background-color: var(--gk-card) !important; + border: 1px solid var(--gk-border) !important; + color: var(--gk-text) !important; + border-radius: 0 !important; + font-family: var(--gk-font-body) !important; +} + +input::placeholder, +textarea::placeholder, +.field__input::placeholder { + color: var(--gk-muted) !important; +} + +.field__label { + color: var(--gk-muted) !important; +} + +/* --- Image Banner / Hero Overrides --- */ +.banner { + background-color: var(--gk-bg); +} + +.banner__heading { + font-family: var(--gk-font-heading) !important; + text-transform: uppercase; + letter-spacing: 2px; +} + +.banner__text { + color: var(--gk-text); +} + +/* --- Collection / Product Grid --- */ +.collection { + background-color: var(--gk-bg); +} + +.collection__title { + font-family: var(--gk-font-heading) !important; + color: var(--gk-text) !important; +} + +/* --- Rich Text Sections --- */ +.rich-text-wrapper, +.rich-text { + background-color: var(--gk-bg); + color: var(--gk-text); +} + +/* --- Muted Text --- */ +.gk-muted, +.subtitle, +.rte p, +small { + color: var(--gk-muted); +} + +/* --- Link Styles --- */ +a { + color: var(--gk-accent); + transition: color 0.3s ease; +} + +a:hover { + color: var(--gk-text); +} + +/* --- Scrollbar --- */ +::-webkit-scrollbar { + width: 6px; +} + +::-webkit-scrollbar-track { + background: var(--gk-bg); +} + +::-webkit-scrollbar-thumb { + background: var(--gk-border); + border-radius: 0; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--gk-accent); +} + +/* --- Cart Drawer --- */ +.cart-drawer, +.drawer { + background-color: var(--gk-bg) !important; + color: var(--gk-text) !important; + border-left: 1px solid var(--gk-border) !important; +} + +/* --- Predictive Search --- */ +.predictive-search, +.predictive-search__results-groups-wrapper { + background-color: var(--gk-card) !important; + border: 1px solid var(--gk-border) !important; + color: var(--gk-text) !important; +} + +/* --- Badge Overrides --- */ +.badge { + background-color: var(--gk-accent) !important; + color: var(--gk-white) !important; + border-radius: 0 !important; + font-family: var(--gk-font-label) !important; + text-transform: uppercase; + letter-spacing: 1px; +} + +/* --- Selection / Highlight --- */ +::selection { + background-color: var(--gk-accent); + color: var(--gk-white); +} + +/* --- Global Section Spacing --- */ +.section-padding { + padding-top: 48px; + padding-bottom: 48px; +} + +/* --- Responsive --- */ +@media screen and (max-width: 749px) { + .button, + .shopify-challenge__button { + padding: 10px 24px; + font-size: 0.8rem; + } + + h1, .h0, .h1 { + font-size: 2.5rem; + } +} + +/* --- Utility Classes --- */ +.gk-bg-accent { + background-color: var(--gk-accent) !important; +} + +.gk-bg-card { + background-color: var(--gk-card) !important; +} + +.gk-text-accent { + color: var(--gk-accent) !important; +} + +.gk-text-muted { + color: var(--gk-muted) !important; +} + +.gk-border { + border: 1px solid var(--gk-border) !important; +} + +.gk-font-heading { + font-family: var(--gk-font-heading) !important; +} + +.gk-font-label { + font-family: var(--gk-font-label) !important; +} diff --git a/assets/gristle-vault.css b/assets/gristle-vault.css new file mode 100644 index 00000000000..8653525e619 --- /dev/null +++ b/assets/gristle-vault.css @@ -0,0 +1,599 @@ +/* ============================================================ + THE GRISTLE VAULT — scoped to .gristle-vault + Naked page: dark medieval stone, drifting smoke, + swing-open vault door intro, two-column video sessions. + ============================================================ */ + +.gv-body { background: #0b0907; } + +.gristle-vault { + --gv-orange: #e8690a; + --gv-font-heading: "Bebas Neue", sans-serif; + --gv-font-body: "DM Sans", sans-serif; + --gv-stone-dark: #0e0b08; + --gv-mortar: #1c1510; + --gv-text: #e8e8e8; + --gv-muted: #8a8178; + position: relative; + min-height: 100vh; + overflow: hidden; + color: var(--gv-text); + font-family: var(--gv-font-body); + /* Dark ashlar stone wall — staggered blocks, rough mortar */ + background-color: var(--gv-stone-dark); + background-image: + radial-gradient(circle at 30% 20%, rgba(40, 30, 20, 0.18), transparent 60%), + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120'%3E%3Crect width='160' height='120' fill='%230e0b08'/%3E%3Cg fill='none' stroke='%231c1510' stroke-width='2'%3E%3Crect x='1' y='1' width='96' height='38'/%3E%3Crect x='99' y='1' width='60' height='38'/%3E%3Crect x='1' y='41' width='52' height='38'/%3E%3Crect x='55' y='41' width='104' height='38'/%3E%3Crect x='1' y='81' width='96' height='38'/%3E%3Crect x='99' y='81' width='60' height='38'/%3E%3C/g%3E%3Cg fill='%23120e0a'%3E%3Crect x='3' y='3' width='92' height='34'/%3E%3Crect x='101' y='3' width='56' height='34'/%3E%3Crect x='3' y='43' width='48' height='34'/%3E%3Crect x='57' y='43' width='100' height='34'/%3E%3Crect x='3' y='83' width='92' height='34'/%3E%3Crect x='101' y='83' width='56' height='34'/%3E%3C/g%3E%3Cg fill='%23161009'%3E%3Crect x='101' y='3' width='56' height='34'/%3E%3Crect x='3' y='43' width='48' height='34'/%3E%3Crect x='3' y='83' width='92' height='34'/%3E%3C/g%3E%3C/svg%3E"); + background-size: auto, 320px 240px; +} + +/* Vignette to keep edges dark and deep */ +.gristle-vault::after { + content: ""; + position: fixed; + inset: 0; + pointer-events: none; + z-index: 2; + background: radial-gradient(ellipse at 50% 35%, transparent 40%, rgba(0, 0, 0, 0.55) 100%); +} + +/* ——— Atmosphere: smoke + torchlight ——— */ +.gv-atmosphere { + position: fixed; + inset: 0; + pointer-events: none; + z-index: 1; + overflow: hidden; +} + +.gv-torchlight { + position: absolute; + top: -10%; + left: 50%; + width: 900px; + height: 700px; + transform: translateX(-50%); + background: radial-gradient(ellipse at center, rgba(232, 105, 10, 0.10) 0%, rgba(232, 105, 10, 0.03) 35%, transparent 70%); + animation: gvFlicker 6s ease-in-out infinite; +} + +@keyframes gvFlicker { + 0%, 100% { opacity: 0.85; } + 45% { opacity: 1; } + 60% { opacity: 0.7; } + 75% { opacity: 0.95; } +} + +.gv-smoke { + position: absolute; + bottom: -25%; + width: 60vw; + height: 60vw; + max-width: 720px; + max-height: 720px; + border-radius: 50%; + filter: blur(60px); + opacity: 0; + background: radial-gradient(circle, rgba(60, 48, 38, 0.45) 0%, rgba(20, 16, 12, 0.2) 45%, transparent 70%); +} + +.gv-smoke--1 { left: 8%; animation: gvDrift 26s ease-in-out infinite; } +.gv-smoke--2 { left: 42%; width: 75vw; animation: gvDrift 34s ease-in-out 6s infinite; } +.gv-smoke--3 { left: 70%; animation: gvDrift 30s ease-in-out 12s infinite; } + +@keyframes gvDrift { + 0% { transform: translateY(0) scale(1); opacity: 0; } + 20% { opacity: 0.5; } + 80% { opacity: 0.35; } + 100% { transform: translateY(-120vh) scale(1.6); opacity: 0; } +} + +/* ——— Embers rising slowly ——— */ +.gv-ember { + position: absolute; + bottom: -20px; + width: 4px; + height: 4px; + border-radius: 50%; + background: #e8690a; + box-shadow: 0 0 8px 2px rgba(232, 105, 10, 0.6); + opacity: 0; +} +.gv-ember--1 { left: 18%; animation: gvEmber 11s ease-in 0s infinite; } +.gv-ember--2 { left: 34%; animation: gvEmber 14s ease-in 2.5s infinite; } +.gv-ember--3 { left: 50%; animation: gvEmber 12s ease-in 5s infinite; } +.gv-ember--4 { left: 63%; animation: gvEmber 15s ease-in 1.5s infinite; } +.gv-ember--5 { left: 78%; animation: gvEmber 13s ease-in 4s infinite; } +.gv-ember--6 { left: 88%; animation: gvEmber 16s ease-in 6.5s infinite; } + +@keyframes gvEmber { + 0% { transform: translate(0, 0) scale(1); opacity: 0; } + 10% { opacity: 0.9; } + 70% { opacity: 0.7; } + 100% { transform: translate(24px, -88vh) scale(0.4); opacity: 0; } +} + +/* ============================================================ + VAULT DOOR INTRO + ============================================================ */ +.gv-vault-intro { + position: fixed; + inset: 0; + z-index: 100; + display: flex; + align-items: center; + justify-content: center; + pointer-events: none; + background: + radial-gradient(ellipse at 50% 40%, rgba(232, 105, 10, 0.1), transparent 55%), + #040302; + animation: gvIntroExit 0.9s ease 3.6s forwards; +} + +@keyframes gvIntroExit { + to { opacity: 0; visibility: hidden; } +} + +.gv-vault-frame { + position: relative; + width: 100%; + height: 100%; + perspective: 1600px; + perspective-origin: 50% 45%; +} + +/* iron door halves */ +.gv-door { + position: absolute; + top: 0; + width: 50%; + height: 100%; + background: + linear-gradient(180deg, rgba(255,255,255,0.05), transparent 12%), + repeating-linear-gradient(0deg, #1a1510, #1a1510 38px, #221a12 39px, #1a1510 40px), + #15110c; + box-shadow: + inset 0 0 160px rgba(0, 0, 0, 0.92), + 0 0 40px rgba(0, 0, 0, 0.9); +} + +.gv-door--left { + left: 0; + transform-origin: left center; + border-right: 2px solid #07050300; + animation: gvOpenLeft 2s cubic-bezier(0.45, 0, 0.2, 1) 1.5s forwards; +} + +.gv-door--right { + right: 0; + transform-origin: right center; + animation: gvOpenRight 2s cubic-bezier(0.45, 0, 0.2, 1) 1.5s forwards; +} + +@keyframes gvOpenLeft { + from { transform: rotateY(0deg); } + to { transform: rotateY(-115deg); } +} +@keyframes gvOpenRight { + from { transform: rotateY(0deg); } + to { transform: rotateY(115deg); } +} + +/* inset panel border on each door */ +.gv-door::before { + content: ""; + position: absolute; + inset: 28px; + border: 2px solid #2a1e12; + box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6); +} + +.gv-door-seam { + position: absolute; + top: 0; + bottom: 0; + width: 6px; + background: linear-gradient(90deg, transparent, rgba(0,0,0,0.7), transparent); +} +.gv-door--left .gv-door-seam { right: -3px; } +.gv-door--right .gv-door-seam { left: -3px; } + +/* rivets */ +.gv-rivet { + position: absolute; + width: 16px; + height: 16px; + border-radius: 50%; + background: radial-gradient(circle at 35% 30%, #5a4632, #1a120c 70%); + box-shadow: 0 1px 2px rgba(0,0,0,0.8); +} +.gv-rivet--1 { top: 44px; left: 44px; } +.gv-rivet--2 { top: 44px; right: 44px; } +.gv-rivet--3 { bottom: 44px; left: 44px; } +.gv-rivet--4 { bottom: 44px; right: 44px; } + +/* central locking wheel */ +.gv-wheel { + position: absolute; + top: 50%; + left: 50%; + width: 150px; + height: 150px; + margin: -75px 0 0 -75px; + border-radius: 50%; + border: 10px solid #241a10; + background: radial-gradient(circle at 40% 35%, #2c2014, #14100a 75%); + box-shadow: 0 0 0 6px #0f0b07, inset 0 0 30px rgba(0,0,0,0.8); + z-index: 3; + animation: + gvWheelSpin 1.2s cubic-bezier(0.5, 0, 0.2, 1) 0.6s forwards, + gvWheelFade 0.6s ease 1.6s forwards; +} + +@keyframes gvWheelSpin { to { transform: rotate(160deg); } } +@keyframes gvWheelFade { to { opacity: 0; } } + +.gv-wheel-spoke { + position: absolute; + top: 50%; + left: 50%; + width: 168px; + height: 12px; + margin: -6px 0 0 -84px; + background: linear-gradient(90deg, #2c2014, #3a2a18, #2c2014); + border-radius: 6px; +} +.gv-wheel-spoke:nth-child(1) { transform: rotate(0deg); } +.gv-wheel-spoke:nth-child(2) { transform: rotate(60deg); } +.gv-wheel-spoke:nth-child(3) { transform: rotate(120deg); } +.gv-wheel-hub { + position: absolute; + top: 50%; + left: 50%; + width: 44px; + height: 44px; + margin: -22px 0 0 -22px; + border-radius: 50%; + background: radial-gradient(circle at 40% 35%, #3a2a18, #100b07); + box-shadow: inset 0 0 12px rgba(0,0,0,0.9); +} + +/* emblem mounted above the wheel */ +.gv-emblem { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + margin-top: -150px; + z-index: 4; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + opacity: 0; + animation: + gvEmblemIn 0.8s ease 0.2s forwards, + gvEmblemOut 0.6s ease 1.7s forwards; +} + +@keyframes gvEmblemIn { from { opacity: 0; transform: translate(-50%, -42%); } to { opacity: 1; transform: translate(-50%, -50%); } } +@keyframes gvEmblemOut { to { opacity: 0; transform: translate(-50%, -58%) scale(1.06); } } + +.gv-emblem-eyebrow { + font-family: var(--gv-font-body); + font-size: 12px; + letter-spacing: 0.5em; + text-transform: uppercase; + color: var(--gv-muted); + margin-bottom: 4px; + padding-left: 0.5em; +} +.gv-emblem-title { + font-family: var(--gv-font-heading); + font-size: clamp(3.5rem, 13vw, 9rem); + line-height: 0.86; + letter-spacing: 0.04em; + color: var(--gv-text); + text-shadow: 0 2px 30px rgba(232, 105, 10, 0.25); +} +.gv-emblem-title--accent { + color: var(--gv-orange); + text-shadow: 0 0 40px rgba(232, 105, 10, 0.55); +} +.gv-emblem-rule { + width: 120px; + height: 2px; + margin-top: 18px; + background: linear-gradient(90deg, transparent, var(--gv-orange), transparent); +} + +/* ============================================================ + CONTENT + ============================================================ */ +.gv-inner { + position: relative; + z-index: 3; + max-width: 1080px; + margin: 0 auto; + padding: 0 24px 120px; +} + +.gv-eyebrow { + font-family: var(--gv-font-body); + font-size: 13px; + letter-spacing: 0.28em; + text-transform: uppercase; + color: var(--gv-orange); + margin: 0; +} + +/* ——— Hero ——— */ +.gv-hero { + position: relative; + text-align: center; + padding: 13vh 0 9vh; + opacity: 0; + animation: gvRise 0.9s ease 3s forwards; +} + +/* warm glow + fog focused right behind the logo */ +.gv-hero::before { + content: ""; + position: absolute; + top: 38%; + left: 50%; + width: min(900px, 86vw); + height: 420px; + transform: translate(-50%, -50%); + background: radial-gradient(ellipse at center, rgba(232, 105, 10, 0.18) 0%, rgba(232, 105, 10, 0.06) 40%, transparent 72%); + filter: blur(8px); + z-index: 0; + pointer-events: none; +} +.gv-hero > * { position: relative; z-index: 1; } + +@keyframes gvRise { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } +} + +/* ——— Logo ——— */ +.gv-hero-logo { + display: block; + width: 78vw; + max-width: 1000px; + height: auto; + margin: 18px auto 0; + /* straight-on, no transforms, no crop */ + opacity: 0; + transform: scale(0.98); + animation: gvLogoIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 3.05s forwards; + filter: drop-shadow(0 6px 40px rgba(232, 105, 10, 0.22)); +} +@keyframes gvLogoIn { + from { opacity: 0; transform: scale(0.98); } + to { opacity: 1; transform: scale(1); } +} + +.gv-hero-sub { + font-family: var(--gv-font-heading); + font-size: clamp(1.3rem, 3.5vw, 2rem); + letter-spacing: 0.22em; + text-transform: uppercase; + color: var(--gv-orange); + margin: 24px 0 0; +} +.gv-hero-body { + max-width: 680px; + margin: 22px auto 0; + font-size: 1.35rem; + line-height: 1.75; + color: var(--gv-text); + opacity: 0.85; +} + +.gv-scroll-cue { + display: block; + width: 1px; + height: 44px; + margin: 40px auto 0; + background: linear-gradient(180deg, var(--gv-orange), transparent); + animation: gvCue 2s ease-in-out infinite; +} +@keyframes gvCue { 0%,100% { opacity: 0.3; transform: scaleY(0.7); } 50% { opacity: 1; transform: scaleY(1); } } + +/* ——— Sessions (two-column rows) ——— */ +.gv-sessions { + display: flex; + flex-direction: column; + gap: 88px; +} + +.gv-session { + display: grid; + grid-template-columns: 1.15fr 1fr; + gap: 48px; + align-items: center; +} +.gv-session:nth-child(even) .gv-session-media { order: 2; } + +.gv-session-media { position: relative; } + +.gv-session-no { + position: absolute; + top: -38px; + left: -10px; + font-family: var(--gv-font-heading); + font-size: 5.5rem; + line-height: 1; + color: rgba(232, 105, 10, 0.14); + z-index: 0; + pointer-events: none; +} + +.gv-embed { + position: relative; + z-index: 1; + padding-top: 56.25%; + background: #000; + border: 1px solid rgba(232, 105, 10, 0.18); + box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); + transition: border-color 0.25s ease, box-shadow 0.25s ease; +} +.gv-session:hover .gv-embed { + border-color: rgba(232, 105, 10, 0.5); + box-shadow: 0 24px 70px rgba(232, 105, 10, 0.12); +} +.gv-embed iframe, +.gv-embed-empty { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + border: 0; +} +.gv-embed-empty { + display: flex; + align-items: center; + justify-content: center; + color: var(--gv-muted); + font-size: 0.85rem; + text-align: center; + padding: 20px; +} + +.gv-session-tag { margin-bottom: 14px; } +.gv-session-label { + display: block; + font-family: var(--gv-font-body); + font-size: 13px; + letter-spacing: 0.24em; + text-transform: uppercase; + color: var(--gv-orange); + margin-bottom: 8px; +} +.gv-session-title { + font-family: var(--gv-font-heading); + font-weight: var(--font-heading-weight, 400); + font-size: clamp(1.8rem, 4vw, 2.8rem); + line-height: 1.02; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--gv-text); + margin: 0 0 16px; +} +.gv-session-desc { + font-size: 1.35rem; + line-height: 1.8; + color: #d8d4cf; + margin: 0; +} + +/* ——— PDF Guide ——— */ +.gv-guide { + margin-top: 110px; + padding: 56px 48px; + background: linear-gradient(180deg, #100c08, #0a0806); + border: 1px solid rgba(232, 105, 10, 0.22); + border-top: 2px solid var(--gv-orange); + display: flex; + align-items: center; + gap: 32px; + box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); +} +.gv-guide-scroll { flex-shrink: 0; } +.gv-guide-copy { flex: 1; min-width: 0; } +.gv-guide-copy .gv-eyebrow { margin-bottom: 12px; } +.gv-guide-title { + font-family: var(--gv-font-heading); + font-weight: var(--font-heading-weight, 400); + font-size: clamp(2.4rem, 5vw, 3.4rem); + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--gv-text); + margin: 0 0 14px; +} +.gv-guide-desc { + font-size: 1.5rem; + line-height: 1.7; + color: #d8d4cf; + margin: 0; + max-width: 600px; +} + +/* CTA: arrow pointing at the download button */ +.gv-guide-cta { + flex-shrink: 0; + display: flex; + align-items: center; + gap: 8px; +} +.gv-guide-arrow { + flex-shrink: 0; + animation: gvNudge 1.4s ease-in-out infinite; +} +@keyframes gvNudge { + 0%, 100% { transform: translateX(0); opacity: 0.7; } + 50% { transform: translateX(8px); opacity: 1; } +} +.gv-guide-btn { + flex-shrink: 0; + white-space: nowrap; + font-size: 1.15rem; + padding: 1.4rem 2.4rem; +} + +/* Belt-and-suspenders: hide store-wide signup popups on the Vault page */ +.klaviyo-form, +[class*="kl-private"], +[class*="klaviyo"], +[data-testid="POPUP"], +.newsletter-popup, +.pop-up, +.popup, +#PopupModal { + display: none !important; +} + +/* ============================================================ + RESPONSIVE + ============================================================ */ +/* Tablet logo width */ +@media screen and (min-width: 750px) and (max-width: 989px) { + .gv-hero-logo { width: 86vw; } +} + +@media screen and (max-width: 749px) { + .gv-inner { padding: 0 18px 80px; } + .gv-hero { padding: 11vh 0 7vh; } + .gv-hero-logo { width: 94vw; margin-top: 14px; } + + .gv-sessions { gap: 64px; } + .gv-session { + grid-template-columns: 1fr; + gap: 22px; + } + .gv-session:nth-child(even) .gv-session-media { order: 0; } + .gv-session-no { top: -30px; font-size: 4rem; } + + .gv-guide { + flex-direction: column; + text-align: center; + padding: 40px 24px; + gap: 22px; + } + .gv-guide-desc { margin: 0 auto; } + + .gv-wheel { width: 110px; height: 110px; margin: -55px 0 0 -55px; } + .gv-wheel-spoke { width: 124px; margin-left: -62px; } + .gv-emblem { margin-top: -120px; } +} + +/* Accessibility: respect reduced motion — skip the theatrics */ +@media (prefers-reduced-motion: reduce) { + .gv-vault-intro { display: none; } + .gv-smoke, .gv-torchlight, .gv-scroll-cue, .gv-ember { animation: none; } + .gv-ember { opacity: 0; } + .gv-hero { opacity: 1; animation: none; } + .gv-hero-logo { opacity: 1; transform: none; animation: none; } +} diff --git a/assets/vault-optin.css b/assets/vault-optin.css new file mode 100644 index 00000000000..8e0e1c1c968 --- /dev/null +++ b/assets/vault-optin.css @@ -0,0 +1,1176 @@ +/* ============================================================ + Gristle Vault opt-in page — shared styles + Premium private-archive aesthetic: charcoal metal, warm + tube-amp orange glow, collectible lesson emblems. Loaded once + by layout/vault-optin.liquid; every vault-* section renders + inside the .vopt wrapper and inherits these tokens. + + Layout rule: ONE centered wrapper width for every major + section so the whole page shares a single visual center. + ============================================================ */ + +.vopt { + --vopt-bg: #0d0d0d; + --vopt-card: #161616; + --vopt-card-border: #242424; + --vopt-card-dark: #181818; + --vopt-card-dark-border: #2a2a2a; + --vopt-accent: #c8601a; + --vopt-accent-bright: #e8853a; + --vopt-head: #f4efe6; + --vopt-text: #e8e2d9; + --vopt-muted: #a89e90; + --vopt-dim: #6a6358; + --vopt-vdim: #4a4540; + --vopt-display: "Bebas Neue", "Inter", sans-serif; + --vopt-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + --vopt-w: 1180px; + --vopt-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='24' viewBox='0 0 160 24'%3E%3Cg fill='%23c8601a'%3E%3Crect x='2' y='9' width='2' height='6' rx='1'/%3E%3Crect x='8' y='6' width='2' height='12' rx='1'/%3E%3Crect x='14' y='3' width='2' height='18' rx='1'/%3E%3Crect x='20' y='8' width='2' height='8' rx='1'/%3E%3Crect x='26' y='5' width='2' height='14' rx='1'/%3E%3Crect x='32' y='10' width='2' height='4' rx='1'/%3E%3Crect x='38' y='7' width='2' height='10' rx='1'/%3E%3Crect x='44' y='2' width='2' height='20' rx='1'/%3E%3Crect x='50' y='8' width='2' height='8' rx='1'/%3E%3Crect x='56' y='5' width='2' height='14' rx='1'/%3E%3Crect x='62' y='9' width='2' height='6' rx='1'/%3E%3Crect x='68' y='6' width='2' height='12' rx='1'/%3E%3Crect x='74' y='4' width='2' height='16' rx='1'/%3E%3Crect x='80' y='9' width='2' height='6' rx='1'/%3E%3Crect x='86' y='6' width='2' height='12' rx='1'/%3E%3Crect x='92' y='3' width='2' height='18' rx='1'/%3E%3Crect x='98' y='8' width='2' height='8' rx='1'/%3E%3Crect x='104' y='5' width='2' height='14' rx='1'/%3E%3Crect x='110' y='10' width='2' height='4' rx='1'/%3E%3Crect x='116' y='7' width='2' height='10' rx='1'/%3E%3Crect x='122' y='4' width='2' height='16' rx='1'/%3E%3Crect x='128' y='8' width='2' height='8' rx='1'/%3E%3Crect x='134' y='6' width='2' height='12' rx='1'/%3E%3Crect x='140' y='9' width='2' height='6' rx='1'/%3E%3Crect x='146' y='5' width='2' height='14' rx='1'/%3E%3Crect x='152' y='8' width='2' height='8' rx='1'/%3E%3C/g%3E%3C/svg%3E"); + + width: 100%; + color: var(--vopt-text); + font-family: var(--vopt-body); + font-size: 16px; + line-height: 1.6; + overflow-x: hidden; + background-color: var(--vopt-bg); + background-image: + radial-gradient(1100px 620px at 82% -8%, rgba(200, 96, 26, 0.12), transparent 60%), + radial-gradient(820px 620px at -8% 22%, rgba(200, 96, 26, 0.06), transparent 55%), + radial-gradient(900px 700px at 60% 108%, rgba(200, 96, 26, 0.05), transparent 60%); +} + +.vopt *, +.vopt *::before, +.vopt *::after { box-sizing: border-box; } + +.vopt img { max-width: 100%; height: auto; display: block; } + +/* ——— ONE centered wrapper for every section ——— */ +.vopt-wrap, +.vopt-wrap--wide { + width: min(100% - 32px, var(--vopt-w)); + margin-inline: auto; +} + +.vopt-eyebrow { + margin: 0; + font-family: var(--vopt-body); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--vopt-accent-bright); +} + +.vopt-accent-text { color: var(--vopt-accent); } + +.vopt-h2 { + margin: 12px 0 0; + font-family: var(--vopt-display); + font-weight: 400; + font-size: 46px; + line-height: 0.95; + letter-spacing: 0.01em; + text-transform: uppercase; + color: var(--vopt-head); +} + +/* ——— Buttons (pill CTA) ——— */ +.vopt-btn { + display: block; + width: 100%; + border: 0; + border-radius: 40px; + background: linear-gradient(180deg, #d4701f 0%, #c8601a 55%, #b3530f 100%); + color: #ffffff; + font-family: var(--vopt-display); + font-weight: 400; + font-size: 23px; + line-height: 1; + letter-spacing: 0.05em; + text-transform: uppercase; + padding: 18px 26px; + cursor: pointer; + text-align: center; + text-decoration: none; + box-shadow: 0 8px 26px rgba(200, 96, 26, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18); + -webkit-appearance: none; + appearance: none; + transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; +} + +.vopt-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 12px 34px rgba(200, 96, 26, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.2); } +.vopt-btn:focus-visible { outline: 2px solid #f4efe6; outline-offset: 3px; } + +.vopt-btn--inline { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto; padding: 18px 38px; } + +/* ——— Lesson emblems ——— */ +.vopt-emblem { display: inline-flex; } +.vopt-emblem svg { + width: 54px; + height: 54px; + display: block; + filter: drop-shadow(0 0 8px rgba(200, 96, 26, 0.4)); +} + +/* ——— Vault-seam dividers (amp panel line) ——— */ +.vopt-divider { + position: relative; + width: min(100% - 32px, var(--vopt-w)); + margin-inline: auto; +} + +.vopt-divider hr { + border: 0; + height: 2px; + margin: 0; + background: + linear-gradient(90deg, transparent, rgba(42, 42, 42, 0.95) 12%, rgba(42, 42, 42, 0.95) 88%, transparent), + linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.04)); +} + +.vopt-divider::after { + content: ""; + position: absolute; + left: 50%; + top: 50%; + width: 7px; + height: 7px; + transform: translate(-50%, -50%) rotate(45deg); + background: var(--vopt-accent); + box-shadow: 0 0 12px rgba(200, 96, 26, 0.6); +} + +/* =========================================================== + 1. HERO — cinematic, balanced two column + =========================================================== */ +.vopt-hero { padding-block: 64px 48px; } + +.vopt-hero-grid { + display: grid; + grid-template-columns: 1.02fr 0.98fr; + gap: 48px; + align-items: center; +} + +.vopt-hero-copy { min-width: 0; } + +.vopt-kicker { + margin: 0; + font-family: var(--vopt-body); + font-size: 12px; + font-weight: 600; + letter-spacing: 0.22em; + line-height: 1.5; + text-transform: uppercase; + color: var(--vopt-accent-bright); +} + +.vopt-h1 { + margin: 16px 0 0; + font-family: var(--vopt-display); + font-weight: 400; + font-size: clamp(54px, 6.4vw, 90px); + line-height: 0.85; + letter-spacing: 0.005em; + text-transform: uppercase; + color: var(--vopt-head); +} + +.vopt-hero-value { + margin: 20px 0 0; + font-family: var(--vopt-display); + font-size: 26px; + letter-spacing: 0.04em; + line-height: 1.1; + text-transform: uppercase; + color: var(--vopt-head); +} + +.vopt-hero-value .vopt-accent-text { color: var(--vopt-accent-bright); } + +.vopt-hero-lead { + margin: 22px 0 0; + max-width: 540px; + font-size: 17px; + font-weight: 600; + line-height: 1.45; + color: var(--vopt-head); +} + +.vopt-hero-pain { + margin: 12px 0 0; + max-width: 540px; + font-size: 15px; + line-height: 1.65; + color: var(--vopt-muted); +} + +.vopt-hero-cta { margin: 30px 0 0; } + +.vopt-hero-micro { + margin: 13px 0 0; + font-size: 11px; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--vopt-dim); +} + +/* ——— Hero vault-preview: contained display panel ——— */ +.vopt-hero-visual { + position: relative; + min-height: 430px; + border-radius: 18px; + border: 1px solid #2a2018; + background: linear-gradient(180deg, #181818 0%, #101010 100%); + box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03); + overflow: hidden; +} + +.vopt-hero-glow { + position: absolute; + top: -25%; + left: -10%; + right: -10%; + height: 70%; + background: radial-gradient(closest-side, rgba(200, 96, 26, 0.32), transparent 72%); + pointer-events: none; +} + +.vopt-vault { position: absolute; inset: 0; } + +.vopt-vault-tile { + position: absolute; + width: 232px; + border-radius: 14px; + background: linear-gradient(158deg, #1f1f1f 0%, #161616 58%, #121212 100%); + border: 1px solid #2f2f2f; + box-shadow: 0 16px 38px rgba(0, 0, 0, 0.55); + overflow: hidden; +} + +.vopt-vault-tile--back1 { top: 8%; left: 6%; transform: rotate(-7deg); opacity: 0.8; } +.vopt-vault-tile--back2 { top: 5%; right: 6%; transform: rotate(6deg); opacity: 0.78; } +.vopt-vault-tile--front { bottom: 7%; left: 50%; transform: translateX(-50%); z-index: 2; box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(200, 96, 26, 0.18); } + +.vopt-tile-thumb { + position: relative; + height: 124px; + display: flex; + align-items: center; + justify-content: center; + background: + radial-gradient(circle at 50% 44%, rgba(200, 96, 26, 0.18), transparent 66%), + repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 26px), + #131313; +} + +.vopt-tile-tag { + position: absolute; + top: 10px; + left: 10px; + font-family: var(--vopt-display); + font-size: 13px; + letter-spacing: 0.06em; + color: var(--vopt-accent-bright); + background: rgba(20, 11, 4, 0.85); + border: 1px solid #3a2410; + border-radius: 5px; + padding: 2px 8px; +} + +.vopt-tile-meta { + font-family: var(--vopt-display); + font-size: 17px; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--vopt-text); + padding: 11px 14px; + border-top: 1px solid #242424; +} + +/* glowing play marker (hero tiles only) */ +.vopt-play { + position: relative; + width: 50px; + height: 50px; + border-radius: 50%; + background: radial-gradient(circle at 50% 34%, #ec8a3a, #b8540e); + box-shadow: 0 0 0 6px rgba(200, 96, 26, 0.12), 0 0 22px rgba(200, 96, 26, 0.5); + flex: 0 0 auto; +} + +.vopt-play::after { + content: ""; + position: absolute; + top: 50%; + left: 54%; + transform: translate(-50%, -50%); + width: 0; + height: 0; + border-left: 14px solid #120a04; + border-top: 9px solid transparent; + border-bottom: 9px solid transparent; +} + +.vopt-play--sm { width: 42px; height: 42px; } +.vopt-play--sm::after { border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px; } + +.vopt-wave { + position: absolute; + left: 12px; + right: 12px; + bottom: 10px; + height: 16px; + background-image: var(--vopt-wave); + background-repeat: repeat-x; + background-size: auto 100%; + opacity: 0.5; +} + +/* PDF tile in the hero — sealed file, secondary */ +.vopt-pdf-chip { + position: absolute; + right: 16px; + bottom: 16px; + z-index: 3; + display: flex; + align-items: center; + gap: 9px; + background: linear-gradient(160deg, #1d140a, #160f06); + border: 1px solid #38240f; + border-left: 3px solid var(--vopt-accent); + border-radius: 9px; + padding: 8px 11px; + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); +} + +.vopt-pdf-chip .vopt-emblem svg { width: 26px; height: 26px; } + +.vopt-pdf-chip-label { + font-family: var(--vopt-display); + font-size: 16px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: var(--vopt-text); + line-height: 1; +} + +.vopt-pdf-chip-label small { + display: block; + font-family: var(--vopt-body); + font-size: 8px; + letter-spacing: 0.14em; + color: var(--vopt-dim); +} + +/* =========================================================== + 2. FORM — premium vault access panel + =========================================================== */ +.vopt-split { + display: grid; + grid-template-columns: 0.88fr 1.12fr; + gap: 24px; + padding-block: 8px; + align-items: stretch; +} + +.vopt-card { + background: var(--vopt-card); + border: 1px solid var(--vopt-card-border); + border-radius: 14px; +} + +.vopt-photo-card { overflow: hidden; display: flex; flex-direction: column; } + +.vopt-photo-well { + position: relative; + flex: 1 1 auto; + min-height: 280px; + background: #141414; + overflow: hidden; +} + +.vopt-photo-well img { width: 100%; height: 100%; object-fit: cover; display: block; } + +.vopt-photo-placeholder { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 10px; + padding: 20px; + text-align: center; + color: var(--vopt-vdim); +} + +.vopt-photo-placeholder i { font-size: 34px; color: #3a3530; } + +.vopt-photo-placeholder span { + font-size: 10px; + letter-spacing: 0.08em; + text-transform: uppercase; + color: #4a4540; +} + +.vopt-stats { + display: grid; + grid-template-columns: repeat(4, 1fr); + border-top: 1px solid var(--vopt-card-border); + background: linear-gradient(180deg, #181818, #141414); +} + +.vopt-stat { + display: flex; + flex-direction: column; + align-items: center; + gap: 2px; + padding: 18px 4px; + text-align: center; +} + +.vopt-stat + .vopt-stat { border-left: 1px solid #202020; } + +.vopt-stat-num { + font-family: var(--vopt-display); + font-size: 36px; + line-height: 1; + color: var(--vopt-accent-bright); +} + +.vopt-stat-label { + font-size: 9px; + letter-spacing: 0.14em; + text-transform: uppercase; + color: #6a635a; +} + +/* The opt-in panel */ +.vopt-form-card { + position: relative; + padding: 36px 32px; + border: 1px solid #3a2712; + border-radius: 16px; + background: linear-gradient(180deg, rgba(28, 24, 20, 0.94), rgba(16, 16, 16, 0.97)); + box-shadow: 0 0 0 1px rgba(200, 96, 26, 0.1), 0 30px 70px rgba(0, 0, 0, 0.55); + overflow: hidden; +} + +.vopt-form-card::before { + content: ""; + position: absolute; + top: -45%; + left: 0; + right: 0; + height: 55%; + background: radial-gradient(closest-side, rgba(200, 96, 26, 0.22), transparent 72%); + pointer-events: none; +} + +.vopt-form-card > * { position: relative; z-index: 1; } + +.vopt-form-eyebrow { + margin: 0 0 7px; + font-size: 11px; + font-weight: 600; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--vopt-accent-bright); +} + +.vopt-form-heading { + margin: 0; + font-family: var(--vopt-display); + font-weight: 400; + font-size: 44px; + line-height: 0.94; + letter-spacing: 0.01em; + text-transform: uppercase; + color: var(--vopt-head); +} + +.vopt-form-note { + margin: 8px 0 20px; + font-size: 14px; + color: var(--vopt-muted); +} + +.vopt-form { margin: 0; } + +.vopt-field-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; + margin-bottom: 12px; +} + +.vopt-input { + width: 100%; + background: #100f0e; + border: 1px solid #3a322a; + border-radius: 9px; + color: var(--vopt-text); + font-family: var(--vopt-body); + font-size: 16px; + padding: 15px 16px; + -webkit-appearance: none; + appearance: none; + transition: border-color 0.15s ease, box-shadow 0.15s ease; +} + +.vopt-input::placeholder { color: #5a5045; } +.vopt-input:focus { outline: none; border-color: var(--vopt-accent); box-shadow: 0 0 0 3px rgba(200, 96, 26, 0.16); } +.vopt-input:last-of-type { margin-bottom: 18px; } + +.vopt-consent { + margin: 14px 0 0; + font-size: 10px; + line-height: 1.55; + color: #6a5f53; +} + +.vopt-consent p { margin: 0; } + +.vopt-error { + margin: 10px 0 0; + font-size: 12px; + color: #d2693a; +} + +.vopt-success { + font-family: var(--vopt-display); + font-weight: 400; + font-size: 24px; + letter-spacing: 0.02em; + text-align: center; + color: var(--vopt-accent-bright); + padding: 56px 10px; +} + +/* =========================================================== + 3. BRIDGE — pain to desire + =========================================================== */ +.vopt-bridge { padding-block: 62px; text-align: center; } + +.vopt-bridge-h { + margin: 12px auto 0; + max-width: 760px; + font-family: var(--vopt-display); + font-weight: 400; + font-size: clamp(34px, 4.6vw, 54px); + line-height: 0.96; + letter-spacing: 0.01em; + text-transform: uppercase; + color: var(--vopt-head); +} + +.vopt-bridge-sub { + margin: 20px auto 0; + max-width: 660px; + font-size: 16px; + line-height: 1.7; + color: var(--vopt-muted); +} + +.vopt-bridge-cols { + display: grid; + grid-template-columns: 1fr auto 1fr; + gap: 22px; + align-items: stretch; + max-width: 880px; + margin: 34px auto 0; + text-align: left; +} + +.vopt-bridge-side { + border: 1px solid var(--vopt-card-border); + border-radius: 14px; + padding: 22px 24px; + background: linear-gradient(180deg, #151515, #121212); +} + +.vopt-bridge-side h4 { + margin: 0 0 12px; + font-family: var(--vopt-display); + font-size: 20px; + letter-spacing: 0.05em; + text-transform: uppercase; +} + +.vopt-bridge-side ul { margin: 0; padding: 0; list-style: none; } +.vopt-bridge-side li { font-size: 14px; line-height: 1.5; color: var(--vopt-muted); padding: 7px 0 7px 22px; position: relative; } +.vopt-bridge-side li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 6px; height: 6px; border-radius: 50%; } + +.vopt-bridge-side--pain { border-color: #2a2320; } +.vopt-bridge-side--pain h4 { color: #8a8076; } +.vopt-bridge-side--pain li::before { background: #4a4540; } + +.vopt-bridge-side--gain { border-color: #3a2410; background: linear-gradient(180deg, #1b140c, #140e07); box-shadow: inset 0 0 50px rgba(200, 96, 26, 0.06); } +.vopt-bridge-side--gain h4 { color: var(--vopt-accent-bright); } +.vopt-bridge-side--gain li { color: var(--vopt-text); } +.vopt-bridge-side--gain li::before { background: var(--vopt-accent); box-shadow: 0 0 8px rgba(200, 96, 26, 0.6); } + +.vopt-bridge-arrow { + display: flex; + align-items: center; + font-family: var(--vopt-display); + font-size: 34px; + color: var(--vopt-accent); +} + +.vopt-bridge-foot { + margin: 32px 0 0; + font-family: var(--vopt-display); + font-size: 26px; + letter-spacing: 0.03em; + text-transform: uppercase; + color: var(--vopt-head); +} + +/* =========================================================== + 4. LETTER — personal invite (warm card) + =========================================================== */ +.vopt-letter { padding-block: 56px; } + +.vopt-letter-card { + position: relative; + border: 1px solid #2c2118; + border-radius: 18px; + padding: 44px 42px; + background: linear-gradient(180deg, #19150f 0%, #121110 100%); + overflow: hidden; +} + +.vopt-letter-card::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, #c8601a, #e8853a 40%, transparent); +} + +.vopt-letter-grid { + display: grid; + grid-template-columns: 250px minmax(0, 1fr); + gap: 40px; + margin-top: 26px; + align-items: start; +} + +.vopt-letter-photo { width: 250px; } + +.vopt-letter-well { + position: relative; + width: 250px; + aspect-ratio: 4 / 5; + background: var(--vopt-card-dark); + border: 1px solid #3a2410; + border-radius: 14px; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 0 0 1px rgba(200, 96, 26, 0.08), 0 18px 44px rgba(0, 0, 0, 0.5); +} + +.vopt-letter-well img { width: 100%; height: 100%; object-fit: cover; } +.vopt-letter-well i { font-size: 34px; color: #3a3530; } + +.vopt-letter-caption { + margin: 14px 0 0; + font-family: var(--vopt-display); + font-size: 20px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: var(--vopt-text); + text-align: center; +} + +.vopt-letter-caption small { + display: block; + font-family: var(--vopt-body); + font-size: 10px; + letter-spacing: 0.12em; + color: var(--vopt-dim); +} + +.vopt-letter-copy { max-width: 640px; } + +.vopt-letter-lead { + margin: 0 0 16px; + font-family: var(--vopt-display); + font-size: 44px; + line-height: 0.98; + letter-spacing: 0.01em; + text-transform: uppercase; + color: var(--vopt-accent-bright); +} + +.vopt-letter-copy p { + margin: 0 0 14px; + font-size: 15px; + line-height: 1.78; + color: var(--vopt-muted); +} + +.vopt-letter-copy p:last-child { margin-bottom: 0; } + +.vopt-letter-copy strong, +.vopt-bold { color: var(--vopt-text); font-weight: 600; } +.vopt-letter-copy em, +.vopt-orange { color: var(--vopt-accent-bright); font-style: normal; font-weight: 600; } + +.vopt-pullquote { + margin: 30px 0 0; + border-left: 3px solid var(--vopt-accent); + background: linear-gradient(180deg, #1d1d1d, #161616); + border-radius: 0 12px 12px 0; + padding: 22px 24px; + box-shadow: inset 0 0 50px rgba(200, 96, 26, 0.06); +} + +.vopt-pullquote span { display: block; font-family: var(--vopt-display); font-size: 28px; line-height: 1.05; letter-spacing: 0.01em; } +.vopt-pullquote .vopt-pq-1 { color: #ffffff; } +.vopt-pullquote .vopt-pq-2 { color: var(--vopt-accent-bright); } + +/* =========================================================== + 5. STASH — collectible archive cards + =========================================================== */ +.vopt-stash { padding-block: 56px; } + +.vopt-section-sub { + margin: 16px 0 0; + max-width: 620px; + font-size: 15px; + line-height: 1.65; + color: var(--vopt-muted); +} + +.vopt-grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 18px; + margin-top: 30px; +} + +.vopt-card-item { + position: relative; + grid-column: span 2; + background: linear-gradient(162deg, #1c1c1c 0%, #151515 60%, #121212 100%); + border: 1px solid #272727; + border-radius: 14px; + overflow: hidden; + display: flex; + flex-direction: column; + box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4); + transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; +} + +.vopt-card-item::before { + content: ""; + position: absolute; + inset: 0; + border-radius: 14px; + pointer-events: none; + box-shadow: inset 0 0 0 1px rgba(200, 96, 26, 0.05); +} + +.vopt-card-item:hover { + transform: translateY(-5px); + border-color: #43300f; + box-shadow: 0 18px 38px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(200, 96, 26, 0.25), 0 0 30px rgba(200, 96, 26, 0.14); +} + +.vopt-card-item[data-w="third"] { grid-column: span 2; } +.vopt-card-item[data-w="half"] { grid-column: span 3; } +.vopt-card-item[data-w="full"] { grid-column: span 6; } +.vopt-card-item--wide { grid-column: span 3; } + +.vopt-card-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + padding: 11px 14px; + background: linear-gradient(180deg, #2a190a 0%, #1c1107 100%); + border-bottom: 1px solid #3a2510; + box-shadow: inset 0 1px 0 rgba(255, 200, 150, 0.1); +} + +.vopt-card-free { + font-family: var(--vopt-display); + font-size: 17px; + letter-spacing: 0.08em; + color: var(--vopt-accent-bright); +} + +.vopt-card-rivet { + width: 9px; + height: 9px; + border-radius: 50%; + background: radial-gradient(circle at 35% 30%, #6a5238, #2a1c0e); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(120, 90, 50, 0.25); +} + +.vopt-card-well { + position: relative; + height: 124px; + overflow: hidden; + background: + radial-gradient(circle at 50% 46%, rgba(200, 96, 26, 0.18), transparent 64%), + repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 24px), + #141414; +} + +/* layered hero composition: unique scene art behind the central play head */ +.vopt-scene-art { + position: absolute; + inset: 0; + display: block; + z-index: 0; +} + +.vopt-scene-art svg { width: 100%; height: 100%; display: block; } + +.vopt-card-well .vopt-play { + position: absolute; + top: 47%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 2; + width: 48px; + height: 48px; + transition: transform 0.22s ease, box-shadow 0.22s ease; +} + +.vopt-card-well .vopt-play::after { border-left-width: 13px; border-top-width: 9px; border-bottom-width: 9px; } + +.vopt-card-well .vopt-wave { + left: 0; + right: 0; + bottom: 9px; + height: 18px; + z-index: 1; + background-repeat: no-repeat; + background-position: center bottom; + background-size: 100% 100%; + opacity: 0.62; +} + +.vopt-card-item:hover .vopt-card-well .vopt-play { + transform: translate(-50%, -50%) scale(1.08); + box-shadow: 0 0 0 7px rgba(200, 96, 26, 0.14), 0 0 30px rgba(200, 96, 26, 0.65); +} + +.vopt-card-item:hover .vopt-scene-art { filter: brightness(1.12); } +.vopt-card-item:hover .vopt-card-well .vopt-wave { opacity: 0.8; } + +/* idle motion that reinforces a few identities (kept subtle) */ +.vopt-scene-art--pick .vopt-streak { animation: vopt-streak 3.4s ease-in-out infinite; } +.vopt-scene-art--outside .vopt-escape { animation: vopt-float 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } +.vopt-scene-art--clinic .vopt-rings { animation: vopt-pulse 3.2s ease-in-out infinite; } + +@keyframes vopt-streak { 0%, 100% { transform: translateX(0); opacity: 0.9; } 50% { transform: translateX(4px); opacity: 0.6; } } +@keyframes vopt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } +@keyframes vopt-pulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.5; } } + +@media (prefers-reduced-motion: reduce) { + .vopt-scene-art--pick .vopt-streak, + .vopt-scene-art--outside .vopt-escape, + .vopt-scene-art--clinic .vopt-rings { animation: none; } + .vopt-card-well .vopt-play { transition: none; } +} + +/* ——— Per-lesson waveform identities (generated) ——— */ +.vopt-wave--pick { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='24' viewBox='0 0 560 24' fill='%23e8853a'%3E%3Crect x='3.0' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='9.1' y='2.77' width='2' height='18.47' rx='1'/%3E%3Crect x='15.2' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='21.3' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='27.4' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='33.5' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='39.6' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='45.7' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='51.8' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='57.9' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='64.0' y='2.23' width='2' height='19.55' rx='1'/%3E%3Crect x='70.1' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='76.2' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='82.3' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='88.4' y='2.97' width='2' height='18.07' rx='1'/%3E%3Crect x='94.5' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='100.6' y='3.73' width='2' height='16.53' rx='1'/%3E%3Crect x='106.7' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='112.8' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='118.9' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='125.0' y='1.03' width='2' height='21.95' rx='1'/%3E%3Crect x='131.1' y='3.34' width='2' height='17.33' rx='1'/%3E%3Crect x='137.2' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='143.3' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='149.4' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='155.5' y='3.51' width='2' height='16.99' rx='1'/%3E%3Crect x='161.6' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='167.7' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='173.8' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='179.9' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='186.0' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='192.1' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='198.2' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='204.3' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='210.4' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='216.5' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='222.6' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='228.7' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='234.8' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='240.9' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='247.0' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='253.1' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='259.2' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='265.3' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='271.4' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='277.5' y='2.70' width='2' height='18.60' rx='1'/%3E%3Crect x='283.6' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='289.7' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='295.8' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='301.9' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='308.0' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='314.1' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='320.2' y='1.18' width='2' height='21.65' rx='1'/%3E%3Crect x='326.3' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='332.4' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='338.5' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='344.6' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='350.7' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='356.8' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='362.9' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='369.0' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='375.1' y='2.45' width='2' height='19.09' rx='1'/%3E%3Crect x='381.2' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='387.3' y='1.20' width='2' height='21.60' rx='1'/%3E%3Crect x='393.4' y='4.44' width='2' height='15.12' rx='1'/%3E%3Crect x='399.5' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='405.6' y='4.12' width='2' height='15.77' rx='1'/%3E%3Crect x='411.7' y='3.48' width='2' height='17.03' rx='1'/%3E%3Crect x='417.8' y='2.65' width='2' height='18.69' rx='1'/%3E%3Crect x='423.9' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='430.0' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='436.1' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='442.2' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='448.3' y='3.30' width='2' height='17.40' rx='1'/%3E%3Crect x='454.4' y='3.61' width='2' height='16.77' rx='1'/%3E%3Crect x='460.5' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='466.6' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='472.7' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='478.8' y='3.11' width='2' height='17.78' rx='1'/%3E%3Crect x='484.9' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='491.0' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='497.1' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='503.2' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='509.3' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='515.4' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='521.5' y='9.00' width='2' height='6.00' rx='1'/%3E%3Crect x='527.6' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='533.7' y='9.50' width='2' height='5.00' rx='1'/%3E%3Crect x='539.8' y='3.45' width='2' height='17.09' rx='1'/%3E%3Crect x='545.9' y='10.00' width='2' height='4.00' rx='1'/%3E%3C/svg%3E"); } +.vopt-wave--travis { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='24' viewBox='0 0 560 24' fill='%23e8853a'%3E%3Crect x='5.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='17.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3Crect x='29.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='41.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3Crect x='53.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='65.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3Crect x='77.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='89.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3Crect x='101.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='113.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3Crect x='125.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='137.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3Crect x='149.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='161.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3Crect x='173.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='185.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3Crect x='197.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='209.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3Crect x='221.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='233.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3Crect x='245.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='257.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3Crect x='269.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='281.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3Crect x='293.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='305.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3Crect x='317.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='329.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3Crect x='341.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='353.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3Crect x='365.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='377.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3Crect x='389.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='401.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3Crect x='413.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='425.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3Crect x='437.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='449.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3Crect x='461.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='473.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3Crect x='485.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='497.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3Crect x='509.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='521.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3Crect x='533.0' y='3.50' width='2' height='17.00' rx='1'/%3E%3Crect x='545.0' y='8.50' width='2' height='7.00' rx='1'/%3E%3C/svg%3E"); } +.vopt-wave--chords { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='24' viewBox='0 0 560 24' fill='%23e8853a'%3E%3Crect x='8.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='15.0' y='4.00' width='2' height='16.00' rx='1'/%3E%3Crect x='22.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='41.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='48.0' y='4.00' width='2' height='16.00' rx='1'/%3E%3Crect x='55.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='74.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='81.0' y='4.00' width='2' height='16.00' rx='1'/%3E%3Crect x='88.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='107.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='114.0' y='4.00' width='2' height='16.00' rx='1'/%3E%3Crect x='121.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='140.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='147.0' y='4.00' width='2' height='16.00' rx='1'/%3E%3Crect x='154.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='173.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='180.0' y='4.00' width='2' height='16.00' rx='1'/%3E%3Crect x='187.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='206.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='213.0' y='4.00' width='2' height='16.00' rx='1'/%3E%3Crect x='220.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='239.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='246.0' y='4.00' width='2' height='16.00' rx='1'/%3E%3Crect x='253.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='272.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='279.0' y='4.00' width='2' height='16.00' rx='1'/%3E%3Crect x='286.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='305.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='312.0' y='4.00' width='2' height='16.00' rx='1'/%3E%3Crect x='319.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='338.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='345.0' y='4.00' width='2' height='16.00' rx='1'/%3E%3Crect x='352.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='371.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='378.0' y='4.00' width='2' height='16.00' rx='1'/%3E%3Crect x='385.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='404.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='411.0' y='4.00' width='2' height='16.00' rx='1'/%3E%3Crect x='418.0' y='6.50' width='2' height='11.00' rx='1'/%3E%3C/svg%3E"); } +.vopt-wave--outside { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='24' viewBox='0 0 560 24' fill='%23e8853a'%3E%3Crect x='4.0' y='8.70' width='2' height='6.59' rx='1'/%3E%3Crect x='15.4' y='3.43' width='2' height='17.14' rx='1'/%3E%3Crect x='26.8' y='3.49' width='2' height='17.03' rx='1'/%3E%3Crect x='38.2' y='9.85' width='2' height='4.30' rx='1'/%3E%3Crect x='49.6' y='3.65' width='2' height='16.70' rx='1'/%3E%3Crect x='61.0' y='6.69' width='2' height='10.61' rx='1'/%3E%3Crect x='72.4' y='9.11' width='2' height='5.79' rx='1'/%3E%3Crect x='83.8' y='6.21' width='2' height='11.58' rx='1'/%3E%3Crect x='95.2' y='8.41' width='2' height='7.17' rx='1'/%3E%3Crect x='106.6' y='9.81' width='2' height='4.37' rx='1'/%3E%3Crect x='118.0' y='8.84' width='2' height='6.32' rx='1'/%3E%3Crect x='129.4' y='9.53' width='2' height='4.94' rx='1'/%3E%3Crect x='140.8' y='6.74' width='2' height='10.53' rx='1'/%3E%3Crect x='152.2' y='7.67' width='2' height='8.65' rx='1'/%3E%3Crect x='163.6' y='8.51' width='2' height='6.98' rx='1'/%3E%3Crect x='175.0' y='4.09' width='2' height='15.82' rx='1'/%3E%3Crect x='186.4' y='7.28' width='2' height='9.44' rx='1'/%3E%3Crect x='197.8' y='8.74' width='2' height='6.51' rx='1'/%3E%3Crect x='209.2' y='8.19' width='2' height='7.63' rx='1'/%3E%3Crect x='220.6' y='6.82' width='2' height='10.36' rx='1'/%3E%3Crect x='232.0' y='9.02' width='2' height='5.95' rx='1'/%3E%3Crect x='243.4' y='7.90' width='2' height='8.20' rx='1'/%3E%3Crect x='254.8' y='7.08' width='2' height='9.84' rx='1'/%3E%3Crect x='266.2' y='3.66' width='2' height='16.67' rx='1'/%3E%3Crect x='277.6' y='6.97' width='2' height='10.06' rx='1'/%3E%3Crect x='289.0' y='3.16' width='2' height='17.67' rx='1'/%3E%3Crect x='300.4' y='6.94' width='2' height='10.12' rx='1'/%3E%3Crect x='311.8' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='323.2' y='7.22' width='2' height='9.56' rx='1'/%3E%3Crect x='334.6' y='7.68' width='2' height='8.64' rx='1'/%3E%3Crect x='346.0' y='0.50' width='2' height='23.00' rx='1'/%3E%3Crect x='357.4' y='8.10' width='2' height='7.79' rx='1'/%3E%3Crect x='368.8' y='9.76' width='2' height='4.49' rx='1'/%3E%3Crect x='380.2' y='7.41' width='2' height='9.18' rx='1'/%3E%3Crect x='391.6' y='6.71' width='2' height='10.58' rx='1'/%3E%3Crect x='403.0' y='8.46' width='2' height='7.09' rx='1'/%3E%3Crect x='414.4' y='9.91' width='2' height='4.18' rx='1'/%3E%3Crect x='425.8' y='4.38' width='2' height='15.24' rx='1'/%3E%3Crect x='437.2' y='6.93' width='2' height='10.15' rx='1'/%3E%3Crect x='448.6' y='9.01' width='2' height='5.98' rx='1'/%3E%3Crect x='460.0' y='3.60' width='2' height='16.80' rx='1'/%3E%3Crect x='471.4' y='7.80' width='2' height='8.40' rx='1'/%3E%3Crect x='482.8' y='6.72' width='2' height='10.55' rx='1'/%3E%3Crect x='494.2' y='8.89' width='2' height='6.23' rx='1'/%3E%3Crect x='505.6' y='8.56' width='2' height='6.87' rx='1'/%3E%3Crect x='517.0' y='6.17' width='2' height='11.66' rx='1'/%3E%3Crect x='528.4' y='9.30' width='2' height='5.41' rx='1'/%3E%3Crect x='539.8' y='9.07' width='2' height='5.87' rx='1'/%3E%3C/svg%3E"); } +.vopt-wave--tone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='24' viewBox='0 0 560 24' fill='%23e8853a'%3E%3Crect x='4.0' y='7.25' width='2' height='9.50' rx='1'/%3E%3Crect x='11.9' y='6.48' width='2' height='11.04' rx='1'/%3E%3Crect x='19.8' y='5.80' width='2' height='12.39' rx='1'/%3E%3Crect x='27.7' y='5.30' width='2' height='13.41' rx='1'/%3E%3Crect x='35.6' y='5.01' width='2' height='13.98' rx='1'/%3E%3Crect x='43.5' y='4.95' width='2' height='14.09' rx='1'/%3E%3Crect x='51.4' y='5.11' width='2' height='13.78' rx='1'/%3E%3Crect x='59.3' y='5.43' width='2' height='13.14' rx='1'/%3E%3Crect x='67.2' y='5.83' width='2' height='12.34' rx='1'/%3E%3Crect x='75.1' y='6.24' width='2' height='11.51' rx='1'/%3E%3Crect x='83.0' y='6.59' width='2' height='10.81' rx='1'/%3E%3Crect x='90.9' y='6.83' width='2' height='10.33' rx='1'/%3E%3Crect x='98.8' y='6.94' width='2' height='10.11' rx='1'/%3E%3Crect x='106.7' y='6.94' width='2' height='10.12' rx='1'/%3E%3Crect x='114.6' y='6.86' width='2' height='10.28' rx='1'/%3E%3Crect x='122.5' y='6.77' width='2' height='10.47' rx='1'/%3E%3Crect x='130.4' y='6.73' width='2' height='10.54' rx='1'/%3E%3Crect x='138.3' y='6.80' width='2' height='10.40' rx='1'/%3E%3Crect x='146.2' y='7.02' width='2' height='9.95' rx='1'/%3E%3Crect x='154.1' y='7.40' width='2' height='9.20' rx='1'/%3E%3Crect x='162.0' y='7.91' width='2' height='8.18' rx='1'/%3E%3Crect x='169.9' y='8.49' width='2' height='7.03' rx='1'/%3E%3Crect x='177.8' y='9.06' width='2' height='5.89' rx='1'/%3E%3Crect x='185.7' y='9.53' width='2' height='4.93' rx='1'/%3E%3Crect x='193.6' y='9.84' width='2' height='4.32' rx='1'/%3E%3Crect x='201.5' y='9.92' width='2' height='4.16' rx='1'/%3E%3Crect x='209.4' y='9.75' width='2' height='4.50' rx='1'/%3E%3Crect x='217.3' y='9.34' width='2' height='5.32' rx='1'/%3E%3Crect x='225.2' y='8.74' width='2' height='6.53' rx='1'/%3E%3Crect x='233.1' y='8.02' width='2' height='7.96' rx='1'/%3E%3Crect x='241.0' y='7.28' width='2' height='9.44' rx='1'/%3E%3Crect x='248.9' y='6.60' width='2' height='10.79' rx='1'/%3E%3Crect x='256.8' y='6.07' width='2' height='11.86' rx='1'/%3E%3Crect x='264.7' y='5.73' width='2' height='12.55' rx='1'/%3E%3Crect x='272.6' y='5.59' width='2' height='12.83' rx='1'/%3E%3Crect x='280.5' y='5.63' width='2' height='12.74' rx='1'/%3E%3Crect x='288.4' y='5.81' width='2' height='12.39' rx='1'/%3E%3Crect x='296.3' y='6.05' width='2' height='11.91' rx='1'/%3E%3Crect x='304.2' y='6.28' width='2' height='11.43' rx='1'/%3E%3Crect x='312.1' y='6.45' width='2' height='11.10' rx='1'/%3E%3Crect x='320.0' y='6.51' width='2' height='10.98' rx='1'/%3E%3Crect x='327.9' y='6.46' width='2' height='11.08' rx='1'/%3E%3Crect x='335.8' y='6.31' width='2' height='11.38' rx='1'/%3E%3Crect x='343.7' y='6.12' width='2' height='11.76' rx='1'/%3E%3Crect x='351.6' y='5.95' width='2' height='12.10' rx='1'/%3E%3Crect x='359.5' y='5.87' width='2' height='12.25' rx='1'/%3E%3Crect x='367.4' y='5.95' width='2' height='12.11' rx='1'/%3E%3Crect x='375.3' y='6.21' width='2' height='11.59' rx='1'/%3E%3Crect x='383.2' y='6.65' width='2' height='10.69' rx='1'/%3E%3Crect x='391.1' y='7.26' width='2' height='9.49' rx='1'/%3E%3Crect x='399.0' y='7.95' width='2' height='8.09' rx='1'/%3E%3Crect x='406.9' y='8.66' width='2' height='6.69' rx='1'/%3E%3Crect x='414.8' y='9.28' width='2' height='5.44' rx='1'/%3E%3Crect x='422.7' y='9.73' width='2' height='4.53' rx='1'/%3E%3Crect x='430.6' y='9.96' width='2' height='4.07' rx='1'/%3E%3Crect x='438.5' y='9.94' width='2' height='4.12' rx='1'/%3E%3Crect x='446.4' y='9.67' width='2' height='4.66' rx='1'/%3E%3Crect x='454.3' y='9.20' width='2' height='5.60' rx='1'/%3E%3Crect x='462.2' y='8.61' width='2' height='6.79' rx='1'/%3E%3Crect x='470.1' y='7.97' width='2' height='8.07' rx='1'/%3E%3Crect x='478.0' y='7.37' width='2' height='9.25' rx='1'/%3E%3Crect x='485.9' y='6.89' width='2' height='10.21' rx='1'/%3E%3Crect x='493.8' y='6.57' width='2' height='10.86' rx='1'/%3E%3Crect x='501.7' y='6.42' width='2' height='11.16' rx='1'/%3E%3Crect x='509.6' y='6.41' width='2' height='11.18' rx='1'/%3E%3Crect x='517.5' y='6.50' width='2' height='11.00' rx='1'/%3E%3Crect x='525.4' y='6.62' width='2' height='10.75' rx='1'/%3E%3Crect x='533.3' y='6.71' width='2' height='10.58' rx='1'/%3E%3Crect x='541.2' y='6.71' width='2' height='10.58' rx='1'/%3E%3Crect x='549.1' y='6.59' width='2' height='10.83' rx='1'/%3E%3C/svg%3E"); } +.vopt-wave--blues { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='24' viewBox='0 0 560 24' fill='%23e8853a'%3E%3Crect x='4.0' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='13.2' y='9.37' width='2' height='5.27' rx='1'/%3E%3Crect x='22.4' y='8.36' width='2' height='7.28' rx='1'/%3E%3Crect x='31.6' y='7.19' width='2' height='9.63' rx='1'/%3E%3Crect x='40.8' y='5.96' width='2' height='12.08' rx='1'/%3E%3Crect x='50.0' y='4.77' width='2' height='14.46' rx='1'/%3E%3Crect x='59.2' y='3.68' width='2' height='16.64' rx='1'/%3E%3Crect x='68.4' y='2.77' width='2' height='18.46' rx='1'/%3E%3Crect x='77.6' y='2.08' width='2' height='19.85' rx='1'/%3E%3Crect x='86.8' y='1.65' width='2' height='20.71' rx='1'/%3E%3Crect x='96.0' y='1.50' width='2' height='21.00' rx='1'/%3E%3Crect x='105.2' y='1.65' width='2' height='20.71' rx='1'/%3E%3Crect x='114.4' y='2.08' width='2' height='19.85' rx='1'/%3E%3Crect x='123.6' y='2.77' width='2' height='18.46' rx='1'/%3E%3Crect x='132.8' y='3.68' width='2' height='16.64' rx='1'/%3E%3Crect x='142.0' y='4.77' width='2' height='14.46' rx='1'/%3E%3Crect x='151.2' y='5.96' width='2' height='12.08' rx='1'/%3E%3Crect x='160.4' y='7.19' width='2' height='9.63' rx='1'/%3E%3Crect x='169.6' y='8.36' width='2' height='7.28' rx='1'/%3E%3Crect x='178.8' y='9.37' width='2' height='5.27' rx='1'/%3E%3Crect x='188.0' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='197.2' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='206.4' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='215.6' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='224.8' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='234.0' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='243.2' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='252.4' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='261.6' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='270.8' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='280.0' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='289.2' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='298.4' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='307.6' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='316.8' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='326.0' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='335.2' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='344.4' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='353.6' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='362.8' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='372.0' y='10.00' width='2' height='4.00' rx='1'/%3E%3Crect x='381.2' y='9.37' width='2' height='5.27' rx='1'/%3E%3Crect x='390.4' y='8.36' width='2' height='7.28' rx='1'/%3E%3Crect x='399.6' y='7.19' width='2' height='9.63' rx='1'/%3E%3Crect x='408.8' y='5.96' width='2' height='12.08' rx='1'/%3E%3Crect x='418.0' y='4.77' width='2' height='14.46' rx='1'/%3E%3Crect x='427.2' y='3.68' width='2' height='16.64' rx='1'/%3E%3Crect x='436.4' y='2.77' width='2' height='18.46' rx='1'/%3E%3Crect x='445.6' y='2.08' width='2' height='19.85' rx='1'/%3E%3Crect x='454.8' y='1.65' width='2' height='20.71' rx='1'/%3E%3Crect x='464.0' y='1.50' width='2' height='21.00' rx='1'/%3E%3Crect x='473.2' y='1.65' width='2' height='20.71' rx='1'/%3E%3Crect x='482.4' y='2.08' width='2' height='19.85' rx='1'/%3E%3Crect x='491.6' y='2.77' width='2' height='18.46' rx='1'/%3E%3Crect x='500.8' y='3.68' width='2' height='16.64' rx='1'/%3E%3Crect x='510.0' y='4.77' width='2' height='14.46' rx='1'/%3E%3Crect x='519.2' y='5.96' width='2' height='12.08' rx='1'/%3E%3Crect x='528.4' y='7.19' width='2' height='9.63' rx='1'/%3E%3Crect x='537.6' y='8.36' width='2' height='7.28' rx='1'/%3E%3Crect x='546.8' y='9.37' width='2' height='5.27' rx='1'/%3E%3C/svg%3E"); } +.vopt-wave--song { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='24' viewBox='0 0 560 24' fill='%23e8853a'%3E%3Crect x='6.0' y='4.88' width='2' height='14.25' rx='1'/%3E%3Crect x='13.0' y='5.75' width='2' height='12.49' rx='1'/%3E%3Crect x='20.0' y='5.43' width='2' height='13.13' rx='1'/%3E%3Crect x='27.0' y='4.88' width='2' height='14.24' rx='1'/%3E%3Crect x='34.0' y='7.46' width='2' height='9.08' rx='1'/%3E%3Crect x='41.0' y='5.96' width='2' height='12.09' rx='1'/%3E%3Crect x='48.0' y='4.88' width='2' height='14.24' rx='1'/%3E%3Crect x='55.0' y='5.01' width='2' height='13.98' rx='1'/%3E%3Crect x='82.0' y='7.84' width='2' height='8.32' rx='1'/%3E%3Crect x='89.0' y='5.74' width='2' height='12.52' rx='1'/%3E%3Crect x='96.0' y='5.96' width='2' height='12.08' rx='1'/%3E%3Crect x='103.0' y='6.58' width='2' height='10.83' rx='1'/%3E%3Crect x='110.0' y='7.64' width='2' height='8.73' rx='1'/%3E%3Crect x='117.0' y='5.33' width='2' height='13.34' rx='1'/%3E%3Crect x='124.0' y='5.27' width='2' height='13.46' rx='1'/%3E%3Crect x='131.0' y='6.45' width='2' height='11.10' rx='1'/%3E%3Crect x='158.0' y='4.67' width='2' height='14.67' rx='1'/%3E%3Crect x='165.0' y='7.94' width='2' height='8.12' rx='1'/%3E%3Crect x='172.0' y='8.41' width='2' height='7.19' rx='1'/%3E%3Crect x='179.0' y='4.51' width='2' height='14.99' rx='1'/%3E%3Crect x='186.0' y='7.76' width='2' height='8.47' rx='1'/%3E%3Crect x='193.0' y='8.02' width='2' height='7.96' rx='1'/%3E%3Crect x='200.0' y='5.89' width='2' height='12.21' rx='1'/%3E%3Crect x='207.0' y='7.12' width='2' height='9.77' rx='1'/%3E%3Crect x='234.0' y='4.80' width='2' height='14.40' rx='1'/%3E%3Crect x='241.0' y='4.71' width='2' height='14.59' rx='1'/%3E%3Crect x='248.0' y='4.93' width='2' height='14.14' rx='1'/%3E%3Crect x='255.0' y='8.17' width='2' height='7.67' rx='1'/%3E%3Crect x='262.0' y='6.13' width='2' height='11.74' rx='1'/%3E%3Crect x='269.0' y='6.81' width='2' height='10.39' rx='1'/%3E%3Crect x='276.0' y='6.38' width='2' height='11.24' rx='1'/%3E%3Crect x='283.0' y='7.98' width='2' height='8.04' rx='1'/%3E%3Crect x='68.0' y='2' width='1.6' height='20' rx='0.8' fill-opacity='0.55'/%3E%3Crect x='144.0' y='2' width='1.6' height='20' rx='0.8' fill-opacity='0.55'/%3E%3Crect x='220.0' y='2' width='1.6' height='20' rx='0.8' fill-opacity='0.55'/%3E%3C/svg%3E"); } +.vopt-wave--clinic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='24' viewBox='0 0 560 24' fill='%23e8853a'%3E%3Crect x='4.0' y='7.08' width='2' height='9.84' rx='1'/%3E%3Crect x='10.0' y='5.09' width='2' height='13.82' rx='1'/%3E%3Crect x='16.0' y='2.43' width='2' height='19.14' rx='1'/%3E%3Crect x='22.0' y='3.19' width='2' height='17.63' rx='1'/%3E%3Crect x='28.0' y='1.53' width='2' height='20.95' rx='1'/%3E%3Crect x='34.0' y='3.33' width='2' height='17.34' rx='1'/%3E%3Crect x='40.0' y='4.80' width='2' height='14.39' rx='1'/%3E%3Crect x='46.0' y='7.64' width='2' height='8.73' rx='1'/%3E%3Crect x='56.0' y='7.86' width='2' height='8.28' rx='1'/%3E%3Crect x='62.0' y='6.43' width='2' height='11.15' rx='1'/%3E%3Crect x='68.0' y='6.76' width='2' height='10.48' rx='1'/%3E%3Crect x='74.0' y='6.09' width='2' height='11.83' rx='1'/%3E%3Crect x='80.0' y='7.75' width='2' height='8.50' rx='1'/%3E%3Crect x='90.0' y='7.60' width='2' height='8.79' rx='1'/%3E%3Crect x='96.0' y='5.18' width='2' height='13.64' rx='1'/%3E%3Crect x='102.0' y='5.08' width='2' height='13.84' rx='1'/%3E%3Crect x='108.0' y='4.47' width='2' height='15.06' rx='1'/%3E%3Crect x='114.0' y='2.50' width='2' height='19.00' rx='1'/%3E%3Crect x='120.0' y='3.98' width='2' height='16.04' rx='1'/%3E%3Crect x='126.0' y='5.26' width='2' height='13.48' rx='1'/%3E%3Crect x='132.0' y='7.84' width='2' height='8.31' rx='1'/%3E%3Crect x='142.0' y='6.83' width='2' height='10.35' rx='1'/%3E%3Crect x='148.0' y='4.76' width='2' height='14.47' rx='1'/%3E%3Crect x='154.0' y='3.61' width='2' height='16.79' rx='1'/%3E%3Crect x='160.0' y='4.84' width='2' height='14.32' rx='1'/%3E%3Crect x='166.0' y='7.21' width='2' height='9.57' rx='1'/%3E%3Crect x='176.0' y='9.02' width='2' height='5.97' rx='1'/%3E%3Crect x='182.0' y='7.74' width='2' height='8.51' rx='1'/%3E%3Crect x='188.0' y='7.10' width='2' height='9.81' rx='1'/%3E%3Crect x='194.0' y='7.10' width='2' height='9.80' rx='1'/%3E%3Crect x='200.0' y='6.13' width='2' height='11.74' rx='1'/%3E%3Crect x='206.0' y='6.74' width='2' height='10.52' rx='1'/%3E%3Crect x='212.0' y='7.00' width='2' height='9.99' rx='1'/%3E%3Crect x='218.0' y='7.32' width='2' height='9.35' rx='1'/%3E%3Crect x='224.0' y='8.25' width='2' height='7.50' rx='1'/%3E%3Crect x='230.0' y='9.11' width='2' height='5.79' rx='1'/%3E%3Crect x='240.0' y='7.44' width='2' height='9.12' rx='1'/%3E%3Crect x='246.0' y='6.17' width='2' height='11.66' rx='1'/%3E%3Crect x='252.0' y='4.77' width='2' height='14.45' rx='1'/%3E%3Crect x='258.0' y='6.27' width='2' height='11.46' rx='1'/%3E%3Crect x='264.0' y='8.10' width='2' height='7.80' rx='1'/%3E%3Crect x='274.0' y='8.18' width='2' height='7.63' rx='1'/%3E%3Crect x='280.0' y='6.55' width='2' height='10.91' rx='1'/%3E%3Crect x='286.0' y='5.71' width='2' height='12.57' rx='1'/%3E%3Crect x='292.0' y='3.97' width='2' height='16.05' rx='1'/%3E%3Crect x='298.0' y='2.22' width='2' height='19.57' rx='1'/%3E%3Crect x='304.0' y='4.10' width='2' height='15.80' rx='1'/%3E%3Crect x='310.0' y='3.32' width='2' height='17.36' rx='1'/%3E%3Crect x='316.0' y='5.72' width='2' height='12.56' rx='1'/%3E%3Crect x='322.0' y='6.35' width='2' height='11.31' rx='1'/%3E%3Crect x='328.0' y='8.08' width='2' height='7.84' rx='1'/%3E%3Crect x='338.0' y='7.47' width='2' height='9.06' rx='1'/%3E%3Crect x='344.0' y='4.68' width='2' height='14.65' rx='1'/%3E%3Crect x='350.0' y='5.06' width='2' height='13.88' rx='1'/%3E%3Crect x='356.0' y='4.83' width='2' height='14.34' rx='1'/%3E%3Crect x='362.0' y='7.54' width='2' height='8.91' rx='1'/%3E%3Crect x='372.0' y='8.08' width='2' height='7.84' rx='1'/%3E%3Crect x='378.0' y='6.56' width='2' height='10.88' rx='1'/%3E%3Crect x='384.0' y='6.49' width='2' height='11.03' rx='1'/%3E%3Crect x='390.0' y='6.54' width='2' height='10.93' rx='1'/%3E%3Crect x='396.0' y='8.59' width='2' height='6.83' rx='1'/%3E%3Crect x='406.0' y='8.13' width='2' height='7.74' rx='1'/%3E%3Crect x='412.0' y='7.07' width='2' height='9.87' rx='1'/%3E%3Crect x='418.0' y='5.72' width='2' height='12.56' rx='1'/%3E%3Crect x='424.0' y='4.24' width='2' height='15.53' rx='1'/%3E%3Crect x='430.0' y='4.70' width='2' height='14.59' rx='1'/%3E%3Crect x='436.0' y='3.35' width='2' height='17.31' rx='1'/%3E%3Crect x='442.0' y='3.43' width='2' height='17.14' rx='1'/%3E%3Crect x='448.0' y='5.31' width='2' height='13.39' rx='1'/%3E%3Crect x='454.0' y='7.03' width='2' height='9.95' rx='1'/%3E%3Crect x='460.0' y='8.36' width='2' height='7.27' rx='1'/%3E%3Crect x='470.0' y='6.37' width='2' height='11.26' rx='1'/%3E%3Crect x='476.0' y='3.95' width='2' height='16.10' rx='1'/%3E%3Crect x='482.0' y='2.85' width='2' height='18.29' rx='1'/%3E%3Crect x='488.0' y='6.22' width='2' height='11.56' rx='1'/%3E%3Crect x='498.0' y='8.42' width='2' height='7.16' rx='1'/%3E%3Crect x='504.0' y='7.29' width='2' height='9.42' rx='1'/%3E%3Crect x='510.0' y='6.33' width='2' height='11.34' rx='1'/%3E%3Crect x='516.0' y='4.93' width='2' height='14.15' rx='1'/%3E%3Crect x='522.0' y='4.26' width='2' height='15.47' rx='1'/%3E%3Crect x='528.0' y='5.33' width='2' height='13.35' rx='1'/%3E%3Crect x='534.0' y='4.89' width='2' height='14.21' rx='1'/%3E%3Crect x='540.0' y='5.87' width='2' height='12.27' rx='1'/%3E%3Crect x='546.0' y='6.91' width='2' height='10.19' rx='1'/%3E%3Crect x='552.0' y='8.55' width='2' height='6.91' rx='1'/%3E%3C/svg%3E"); } + +.vopt-card-body { padding: 16px 15px 17px; } + +.vopt-card-title { + margin: 0 0 8px; + font-size: 13px; + font-weight: 700; + line-height: 1.25; + letter-spacing: 0.02em; + text-transform: uppercase; + color: var(--vopt-head); +} + +.vopt-card-desc { + margin: 0; + font-size: 12px; + line-height: 1.6; + color: #9a9080; +} + +/* PDF callout — supportive, sealed reference notes */ +.vopt-pdf { + display: flex; + align-items: center; + gap: 18px; + margin-top: 26px; + background: linear-gradient(160deg, #1a130b, #140e07); + border: 1px solid #38240f; + border-left: 3px solid var(--vopt-accent); + border-radius: 14px; + padding: 20px 22px; +} + +.vopt-pdf-badge { + flex: 0 0 auto; + display: flex; + align-items: center; + justify-content: center; + width: 56px; + height: 56px; + border-radius: 12px; + background: rgba(200, 96, 26, 0.1); + border: 1px solid #3a2410; +} + +.vopt-pdf-badge .vopt-emblem svg { width: 36px; height: 36px; } + +.vopt-pdf-kicker { + margin: 0 0 3px; + font-size: 9px; + font-weight: 700; + letter-spacing: 0.22em; + text-transform: uppercase; + color: var(--vopt-accent-bright); +} + +.vopt-pdf-title { + margin: 0 0 5px; + font-size: 14px; + font-weight: 700; + letter-spacing: 0.02em; + text-transform: uppercase; + color: var(--vopt-text); +} + +.vopt-pdf-desc { + margin: 0; + font-size: 12px; + line-height: 1.6; + color: var(--vopt-muted); +} + +/* =========================================================== + 6. CTA repeat block — wide and dramatic + =========================================================== */ +.vopt-cta-section { padding-block: 48px; } + +.vopt-cta-block { + position: relative; + border: 1px solid #3a2712; + border-radius: 18px; + padding: 48px 32px; + text-align: center; + overflow: hidden; + background: + radial-gradient(700px 260px at 50% -10%, rgba(200, 96, 26, 0.16), transparent 70%), + linear-gradient(180deg, #1b1b1b, #141414); + box-shadow: 0 0 0 1px rgba(200, 96, 26, 0.1), 0 26px 60px rgba(0, 0, 0, 0.45); +} + +.vopt-cta-h { + margin: 0 auto; + max-width: 760px; + font-family: var(--vopt-display); + font-weight: 400; + font-size: clamp(32px, 4.4vw, 50px); + line-height: 0.98; + letter-spacing: 0.01em; + text-transform: uppercase; + color: var(--vopt-head); +} + +.vopt-cta-sub { + margin: 14px auto 26px; + max-width: 520px; + font-size: 15px; + color: var(--vopt-muted); +} + +.vopt-cta-block .vopt-btn { max-width: 480px; margin: 0 auto; } + +.vopt-cta-consent { + margin: 16px 0 0; + font-size: 11px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: var(--vopt-dim); +} + +/* =========================================================== + 7. FAQ + =========================================================== */ +.vopt-faq { padding-block: 56px; } +.vopt-faq-h { font-size: 40px; } +.vopt-faq-list { margin-top: 26px; max-width: 920px; } + +.vopt-faq-item { + border-top: 1px solid #232323; + padding: 20px 0; +} + +.vopt-faq-q { + display: flex; + align-items: flex-start; + gap: 12px; + margin: 0; + font-size: 16px; + font-weight: 700; + line-height: 1.4; + color: var(--vopt-head); +} + +.vopt-faq-q i { color: var(--vopt-accent-bright); font-size: 18px; flex: 0 0 auto; line-height: 1.4; } + +.vopt-faq-a { + margin: 10px 0 0 30px; + max-width: 760px; + font-size: 14px; + line-height: 1.7; + color: var(--vopt-muted); +} + +/* =========================================================== + 8. P.S. + =========================================================== */ +.vopt-ps-wrap { padding-block: 8px; } + +.vopt-ps { + position: relative; + background: linear-gradient(180deg, #161616, #131313); + border: 1px solid #242424; + border-radius: 16px; + padding: 30px 30px; + margin: 28px 0; +} + +.vopt-ps-label { + margin: 0 0 8px; + font-size: 10px; + font-weight: 600; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--vopt-accent-bright); +} + +.vopt-ps-body { + max-width: 880px; + font-size: 14px; + line-height: 1.8; + color: #8a8076; +} + +.vopt-ps-body p { margin: 0; } +.vopt-ps-body p + p { margin-top: 10px; } +.vopt-ps-body strong { color: #d8cfc0; font-weight: 600; } + +/* =========================================================== + 9. Final CTA + =========================================================== */ +.vopt-final { padding-block: 36px 60px; text-align: center; } +.vopt-final .vopt-btn { max-width: 540px; margin: 0 auto; } + +.vopt-final-consent { + margin: 16px 0 0; + text-align: center; + font-size: 11px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: var(--vopt-dim); +} + +/* ——— Klaviyo native form overrides (defensive, dark theme) ——— */ +.klaviyo-form input, +.klaviyo-form input[type="text"], +.klaviyo-form input[type="email"], +.klaviyo-form input[type="tel"] { + background: #100f0e !important; + border: 1px solid #3a322a !important; + color: #e8e2d9 !important; + border-radius: 9px !important; + font-family: "Inter", sans-serif !important; + padding: 15px 16px !important; +} + +.klaviyo-form button[type="submit"], +.klaviyo-form button { + background: #c8601a !important; + color: #ffffff !important; + border: 0 !important; + border-radius: 40px !important; + font-family: "Bebas Neue", sans-serif !important; + text-transform: uppercase !important; +} + +/* =========================================================== + Tablet + =========================================================== */ +@media (max-width: 900px) { + .vopt-hero-grid { grid-template-columns: 1fr; gap: 36px; } + .vopt-hero-visual { min-height: 360px; } + .vopt-hero-lead, + .vopt-hero-pain { max-width: none; } + .vopt-split { grid-template-columns: 1fr; } + .vopt-bridge-cols { grid-template-columns: 1fr; max-width: 520px; } + .vopt-bridge-arrow { justify-content: center; transform: rotate(90deg); } +} + +/* =========================================================== + Mobile + =========================================================== */ +@media (max-width: 600px) { + .vopt-hero { padding-block: 40px 28px; } + .vopt-hero-cta .vopt-btn--inline { width: 100%; } + .vopt-hero-value { font-size: 22px; } + .vopt-hero-visual { min-height: 320px; } + .vopt-vault-tile { width: 190px; } + .vopt-vault-tile--back1 { left: 2%; } + .vopt-vault-tile--back2 { right: 2%; } + + .vopt-h2 { font-size: 36px; } + .vopt-faq-h { font-size: 32px; } + .vopt-form-heading { font-size: 36px; } + .vopt-form-card { padding: 26px 20px; } + + .vopt-letter-card { padding: 26px 20px; } + .vopt-letter-grid { grid-template-columns: 1fr; gap: 22px; justify-items: center; } + .vopt-letter-photo, + .vopt-letter-well { width: 100%; max-width: 260px; } + .vopt-letter-copy { max-width: none; } + .vopt-letter-lead { font-size: 36px; text-align: center; } + + .vopt-grid { grid-template-columns: 1fr; } + .vopt-grid .vopt-card-item, + .vopt-grid .vopt-card-item[data-w="third"], + .vopt-grid .vopt-card-item[data-w="half"], + .vopt-grid .vopt-card-item[data-w="full"], + .vopt-card-item--wide { grid-column: auto; } + + .vopt-letter, + .vopt-stash, + .vopt-faq, + .vopt-bridge, + .vopt-cta-section { padding-block: 34px; } + + .vopt-cta-block { padding: 30px 18px; } + .vopt-ps { padding: 20px; } + .vopt-final { padding-block: 24px 44px; } + .vopt-ps { margin: 18px 0; } +} diff --git a/config/settings_data.json b/config/settings_data.json index 0f7a06db992..7ef93306c4f 100644 --- a/config/settings_data.json +++ b/config/settings_data.json @@ -1,62 +1,262 @@ +/* + * ------------------------------------------------------------ + * IMPORTANT: The contents of this file are auto-generated. + * + * This file may be updated by the Shopify admin theme editor + * or related systems. Please exercise caution as any changes + * made to this file may be overwritten. + * ------------------------------------------------------------ + */ { - "current": "Default", + "current": { + "logo_width": 90, + "type_header_font": "assistant_n4", + "heading_scale": 100, + "type_body_font": "assistant_n4", + "body_scale": 100, + "page_width": 1200, + "spacing_sections": 0, + "spacing_grid_horizontal": 8, + "spacing_grid_vertical": 8, + "buttons_border_thickness": 2, + "buttons_border_opacity": 100, + "buttons_radius": 0, + "buttons_shadow_opacity": 0, + "buttons_shadow_horizontal_offset": 0, + "buttons_shadow_vertical_offset": 0, + "buttons_shadow_blur": 0, + "variant_pills_border_thickness": 1, + "variant_pills_border_opacity": 55, + "variant_pills_radius": 0, + "variant_pills_shadow_opacity": 0, + "variant_pills_shadow_horizontal_offset": 0, + "variant_pills_shadow_vertical_offset": 0, + "variant_pills_shadow_blur": 0, + "inputs_border_thickness": 1, + "inputs_border_opacity": 55, + "inputs_radius": 0, + "inputs_shadow_opacity": 0, + "inputs_shadow_horizontal_offset": 0, + "inputs_shadow_vertical_offset": 0, + "inputs_shadow_blur": 0, + "card_style": "standard", + "card_image_padding": 0, + "card_text_alignment": "left", + "card_color_scheme": "scheme-2", + "card_border_thickness": 1, + "card_border_opacity": 100, + "card_corner_radius": 0, + "card_shadow_opacity": 0, + "card_shadow_horizontal_offset": 0, + "card_shadow_vertical_offset": 0, + "card_shadow_blur": 0, + "collection_card_style": "standard", + "collection_card_image_padding": 0, + "collection_card_text_alignment": "left", + "collection_card_color_scheme": "scheme-2", + "collection_card_border_thickness": 1, + "collection_card_border_opacity": 100, + "collection_card_corner_radius": 0, + "collection_card_shadow_opacity": 0, + "collection_card_shadow_horizontal_offset": 0, + "collection_card_shadow_vertical_offset": 0, + "collection_card_shadow_blur": 0, + "blog_card_style": "standard", + "blog_card_image_padding": 0, + "blog_card_text_alignment": "left", + "blog_card_color_scheme": "scheme-2", + "blog_card_border_thickness": 1, + "blog_card_border_opacity": 100, + "blog_card_corner_radius": 0, + "blog_card_shadow_opacity": 0, + "blog_card_shadow_horizontal_offset": 0, + "blog_card_shadow_vertical_offset": 0, + "blog_card_shadow_blur": 0, + "text_boxes_border_thickness": 0, + "text_boxes_border_opacity": 10, + "text_boxes_radius": 0, + "text_boxes_shadow_opacity": 0, + "text_boxes_shadow_horizontal_offset": 0, + "text_boxes_shadow_vertical_offset": 0, + "text_boxes_shadow_blur": 0, + "media_border_thickness": 0, + "media_border_opacity": 0, + "media_radius": 0, + "media_shadow_opacity": 0, + "media_shadow_horizontal_offset": 0, + "media_shadow_vertical_offset": 0, + "media_shadow_blur": 0, + "popup_border_thickness": 1, + "popup_border_opacity": 10, + "popup_corner_radius": 0, + "popup_shadow_opacity": 5, + "popup_shadow_horizontal_offset": 0, + "popup_shadow_vertical_offset": 4, + "popup_shadow_blur": 5, + "drawer_border_thickness": 1, + "drawer_border_opacity": 10, + "drawer_shadow_opacity": 0, + "drawer_shadow_horizontal_offset": 0, + "drawer_shadow_vertical_offset": 0, + "drawer_shadow_blur": 0, + "badge_position": "bottom left", + "badge_corner_radius": 0, + "sale_badge_color_scheme": "scheme-4", + "sold_out_badge_color_scheme": "scheme-5", + "social_facebook_link": "", + "social_instagram_link": "", + "social_youtube_link": "", + "social_tiktok_link": "", + "social_twitter_link": "", + "social_snapchat_link": "", + "social_pinterest_link": "", + "social_tumblr_link": "", + "social_vimeo_link": "", + "predictive_search_enabled": true, + "predictive_search_show_vendor": false, + "predictive_search_show_price": true, + "currency_code_enabled": true, + "cart_type": "drawer", + "show_vendor": false, + "show_cart_note": false, + "cart_drawer_collection": "", + "sections": { + "main-password-header": { + "type": "main-password-header", + "settings": { + "color_scheme": "scheme-1" + } + }, + "main-password-footer": { + "type": "main-password-footer", + "settings": { + "color_scheme": "scheme-1" + } + } + }, + "content_for_index": [], + "blocks": { + "855628211100114053": { + "type": "shopify://apps/klaviyo-email-marketing-sms/blocks/klaviyo-onsite-embed/2632fe16-c075-4321-a88b-50b567f42507", + "disabled": false, + "settings": {} + } + }, + "color_schemes": { + "scheme-1": { + "settings": { + "background": "#0D0D0D", + "background_gradient": "", + "text": "#E8E8E8", + "button": "#E8690A", + "button_label": "#FFFFFF", + "secondary_button_label": "#E8690A", + "shadow": "#000000" + } + }, + "scheme-2": { + "settings": { + "background": "#141414", + "background_gradient": "", + "text": "#E8E8E8", + "button": "#E8690A", + "button_label": "#FFFFFF", + "secondary_button_label": "#E8690A", + "shadow": "#000000" + } + }, + "scheme-3": { + "settings": { + "background": "#0D0D0D", + "background_gradient": "", + "text": "#FFFFFF", + "button": "#E8690A", + "button_label": "#FFFFFF", + "secondary_button_label": "#E8E8E8", + "shadow": "#000000" + } + }, + "scheme-4": { + "settings": { + "background": "#E8690A", + "background_gradient": "", + "text": "#FFFFFF", + "button": "#0D0D0D", + "button_label": "#FFFFFF", + "secondary_button_label": "#FFFFFF", + "shadow": "#000000" + } + }, + "scheme-5": { + "settings": { + "background": "#272727", + "background_gradient": "", + "text": "#E8E8E8", + "button": "#E8690A", + "button_label": "#FFFFFF", + "secondary_button_label": "#E8690A", + "shadow": "#000000" + } + } + } + }, "presets": { "Default": { "logo_width": 90, "color_schemes": { "scheme-1": { "settings": { - "background": "#FFFFFF", + "background": "#0D0D0D", "background_gradient": "", - "text": "#121212", - "button": "#121212", + "text": "#E8E8E8", + "button": "#E8690A", "button_label": "#FFFFFF", - "secondary_button_label": "#121212", - "shadow": "#121212" + "secondary_button_label": "#E8690A", + "shadow": "#000000" } }, "scheme-2": { "settings": { - "background": "#F3F3F3", + "background": "#141414", "background_gradient": "", - "text": "#121212", - "button": "#121212", - "button_label": "#F3F3F3", - "secondary_button_label": "#121212", - "shadow": "#121212" + "text": "#E8E8E8", + "button": "#E8690A", + "button_label": "#FFFFFF", + "secondary_button_label": "#E8690A", + "shadow": "#000000" } }, "scheme-3": { "settings": { - "background": "#242833", + "background": "#0D0D0D", "background_gradient": "", "text": "#FFFFFF", - "button": "#FFFFFF", - "button_label": "#000000", - "secondary_button_label": "#FFFFFF", - "shadow": "#121212" + "button": "#E8690A", + "button_label": "#FFFFFF", + "secondary_button_label": "#E8E8E8", + "shadow": "#000000" } }, "scheme-4": { "settings": { - "background": "#121212", + "background": "#E8690A", "background_gradient": "", "text": "#FFFFFF", - "button": "#FFFFFF", - "button_label": "#121212", + "button": "#0D0D0D", + "button_label": "#FFFFFF", "secondary_button_label": "#FFFFFF", - "shadow": "#121212" + "shadow": "#000000" } }, "scheme-5": { "settings": { - "background": "#334FB4", + "background": "#272727", "background_gradient": "", - "text": "#FFFFFF", - "button": "#FFFFFF", - "button_label": "#334FB4", - "secondary_button_label": "#FFFFFF", - "shadow": "#121212" + "text": "#E8E8E8", + "button": "#E8690A", + "button_label": "#FFFFFF", + "secondary_button_label": "#E8690A", + "shadow": "#000000" } } }, @@ -68,74 +268,74 @@ "spacing_sections": 0, "spacing_grid_horizontal": 8, "spacing_grid_vertical": 8, - "buttons_border_thickness": 1, + "buttons_border_thickness": 2, "buttons_border_opacity": 100, "buttons_radius": 0, "buttons_shadow_opacity": 0, "buttons_shadow_horizontal_offset": 0, - "buttons_shadow_vertical_offset": 4, - "buttons_shadow_blur": 5, + "buttons_shadow_vertical_offset": 0, + "buttons_shadow_blur": 0, "variant_pills_border_thickness": 1, "variant_pills_border_opacity": 55, - "variant_pills_radius": 40, + "variant_pills_radius": 0, "variant_pills_shadow_opacity": 0, "variant_pills_shadow_horizontal_offset": 0, - "variant_pills_shadow_vertical_offset": 4, - "variant_pills_shadow_blur": 5, + "variant_pills_shadow_vertical_offset": 0, + "variant_pills_shadow_blur": 0, "inputs_border_thickness": 1, "inputs_border_opacity": 55, "inputs_radius": 0, "inputs_shadow_opacity": 0, "inputs_shadow_horizontal_offset": 0, - "inputs_shadow_vertical_offset": 4, - "inputs_shadow_blur": 5, + "inputs_shadow_vertical_offset": 0, + "inputs_shadow_blur": 0, "card_style": "standard", "card_image_padding": 0, "card_text_alignment": "left", "card_color_scheme": "scheme-2", - "card_border_thickness": 0, - "card_border_opacity": 10, + "card_border_thickness": 1, + "card_border_opacity": 100, "card_corner_radius": 0, "card_shadow_opacity": 0, "card_shadow_horizontal_offset": 0, - "card_shadow_vertical_offset": 4, - "card_shadow_blur": 5, + "card_shadow_vertical_offset": 0, + "card_shadow_blur": 0, "collection_card_style": "standard", "collection_card_image_padding": 0, "collection_card_text_alignment": "left", "collection_card_color_scheme": "scheme-2", - "collection_card_border_thickness": 0, - "collection_card_border_opacity": 10, + "collection_card_border_thickness": 1, + "collection_card_border_opacity": 100, "collection_card_corner_radius": 0, "collection_card_shadow_opacity": 0, "collection_card_shadow_horizontal_offset": 0, - "collection_card_shadow_vertical_offset": 4, - "collection_card_shadow_blur": 5, + "collection_card_shadow_vertical_offset": 0, + "collection_card_shadow_blur": 0, "blog_card_style": "standard", "blog_card_image_padding": 0, "blog_card_text_alignment": "left", "blog_card_color_scheme": "scheme-2", - "blog_card_border_thickness": 0, - "blog_card_border_opacity": 10, + "blog_card_border_thickness": 1, + "blog_card_border_opacity": 100, "blog_card_corner_radius": 0, "blog_card_shadow_opacity": 0, "blog_card_shadow_horizontal_offset": 0, - "blog_card_shadow_vertical_offset": 4, - "blog_card_shadow_blur": 5, + "blog_card_shadow_vertical_offset": 0, + "blog_card_shadow_blur": 0, "text_boxes_border_thickness": 0, "text_boxes_border_opacity": 10, "text_boxes_radius": 0, "text_boxes_shadow_opacity": 0, "text_boxes_shadow_horizontal_offset": 0, - "text_boxes_shadow_vertical_offset": 4, - "text_boxes_shadow_blur": 5, - "media_border_thickness": 1, - "media_border_opacity": 5, + "text_boxes_shadow_vertical_offset": 0, + "text_boxes_shadow_blur": 0, + "media_border_thickness": 0, + "media_border_opacity": 0, "media_radius": 0, "media_shadow_opacity": 0, "media_shadow_horizontal_offset": 0, - "media_shadow_vertical_offset": 4, - "media_shadow_blur": 5, + "media_shadow_vertical_offset": 0, + "media_shadow_blur": 0, "popup_border_thickness": 1, "popup_border_opacity": 10, "popup_corner_radius": 0, @@ -147,12 +347,12 @@ "drawer_border_opacity": 10, "drawer_shadow_opacity": 0, "drawer_shadow_horizontal_offset": 0, - "drawer_shadow_vertical_offset": 4, - "drawer_shadow_blur": 5, + "drawer_shadow_vertical_offset": 0, + "drawer_shadow_blur": 0, "badge_position": "bottom left", - "badge_corner_radius": 40, - "sale_badge_color_scheme": "scheme-5", - "sold_out_badge_color_scheme": "scheme-3", + "badge_corner_radius": 0, + "sale_badge_color_scheme": "scheme-4", + "sold_out_badge_color_scheme": "scheme-5", "social_twitter_link": "", "social_facebook_link": "", "social_pinterest_link": "", @@ -164,9 +364,9 @@ "social_vimeo_link": "", "predictive_search_enabled": true, "predictive_search_show_vendor": false, - "predictive_search_show_price": false, + "predictive_search_show_price": true, "currency_code_enabled": true, - "cart_type": "notification", + "cart_type": "drawer", "show_vendor": false, "show_cart_note": false, "cart_drawer_collection": "", diff --git a/config/settings_schema.json b/config/settings_schema.json index bcaab5b5d2a..82d4b3d3efc 100644 --- a/config/settings_schema.json +++ b/config/settings_schema.json @@ -1451,5 +1451,16 @@ "default": "scheme-1" } ] + }, + { + "name": "GK Tour Dates", + "settings": [ + { + "type": "textarea", + "id": "gk_tour_dates_data", + "label": "Tour dates (one per line)", + "info": "Format: YYYY-MM-DD | Descriptor (optional) | Venue | City | State | Ticket URL (optional) | sold_out true/false (optional). Example: 2026-04-22 | support for Paul Gilbert | Barnato | Omaha | NE | https://tickets.com | false" + } + ] } ] diff --git a/layout/theme.liquid b/layout/theme.liquid index 70db635823b..5e21f065207 100644 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -15,6 +15,11 @@ {%- endunless -%} + + + + + {{ page_title }} {%- if current_tags %} – tagged "{{ current_tags | join: ', ' }}"{% endif -%} @@ -256,6 +261,7 @@ {% endstyle %} {{ 'base.css' | asset_url | stylesheet_tag }} + {{ 'custom-greg-koch.css' | asset_url | stylesheet_tag }} <link rel="stylesheet" href="{{ 'component-cart-items.css' | asset_url }}" media="print" onload="this.media='all'"> {%- if settings.cart_type == 'drawer' -%} diff --git a/layout/vault-optin.liquid b/layout/vault-optin.liquid new file mode 100644 index 00000000000..2ec175f89f1 --- /dev/null +++ b/layout/vault-optin.liquid @@ -0,0 +1,69 @@ +<!doctype html> +<html class="js" lang="{{ request.locale.iso_code }}"> + <head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <meta name="theme-color" content="#0d0d0d"> + <meta name="robots" content="noindex, nofollow"> + <link rel="canonical" href="{{ canonical_url }}"> + + {%- if settings.favicon != blank -%} + <link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}"> + {%- endif -%} + + <title>{{ page_title }} + + {% render 'meta-tags' %} + + {{ content_for_header }} + + {%- comment -%} Fonts + icons + shared styles for the naked vault opt-in page {%- endcomment -%} + + + + + {{ 'vault-optin.css' | asset_url | stylesheet_tag }} + + {%- comment -%} + Naked conversion layout. No Dawn header, footer, navigation, drawers or + page padding. The page chrome lives entirely inside the sections. + {%- endcomment -%} + {% style %} + *, + *::before, + *::after { box-sizing: border-box; } + + html { + height: 100%; + -webkit-text-size-adjust: 100%; + } + + body { + min-height: 100%; + margin: 0; + padding: 0; + background-color: #0d0d0d; + color: #e8e2d9; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + img { max-width: 100%; height: auto; display: block; } + + a { color: inherit; } + {% endstyle %} + + + +
+
+ {{ content_for_layout }} +
+
+ + diff --git a/layout/vault.liquid b/layout/vault.liquid new file mode 100644 index 00000000000..c6d21009b56 --- /dev/null +++ b/layout/vault.liquid @@ -0,0 +1,113 @@ + + + + + + + + + + + {%- if settings.favicon != blank -%} + + {%- endif -%} + + + + + + {{ page_title }} – {{ shop.name }} + + {% render 'meta-tags' %} + + + + + + {{ content_for_header }} + + {%- liquid + assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold' + assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic' + assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic' + %} + + {% style %} + {{ settings.type_body_font | font_face: font_display: 'swap' }} + {{ body_font_bold | font_face: font_display: 'swap' }} + {{ body_font_italic | font_face: font_display: 'swap' }} + {{ body_font_bold_italic | font_face: font_display: 'swap' }} + {{ settings.type_header_font | font_face: font_display: 'swap' }} + + :root { + --font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }}; + --font-body-style: {{ settings.type_body_font.style }}; + --font-body-weight: {{ settings.type_body_font.weight }}; + --font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }}; + + --font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }}; + --font-heading-style: {{ settings.type_header_font.style }}; + --font-heading-weight: {{ settings.type_header_font.weight }}; + + --font-body-scale: {{ settings.body_scale | divided_by: 100.0 }}; + --font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }}; + + --page-width: {{ settings.page_width | divided_by: 10 }}rem; + + --buttons-radius: {{ settings.buttons_radius }}px; + --buttons-radius-outset: {% if settings.buttons_radius > 0 %}{{ settings.buttons_radius | plus: settings.buttons_border_thickness }}{% else %}0{% endif %}px; + --buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px; + --buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }}; + --buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }}; + --buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %}; + --buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px; + --buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px; + --buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px; + --buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px; + + --color-button: 232, 105, 10; + --color-button-text: 13, 13, 13; + --color-foreground: 232, 232, 232; + --color-background: 11, 9, 7; + } + + *, + *::before, + *::after { box-sizing: inherit; } + + html { + box-sizing: border-box; + font-size: calc(var(--font-body-scale) * 62.5%); + height: 100%; + } + + body { + min-height: 100%; + margin: 0; + font-size: 1.6rem; + letter-spacing: 0.06rem; + line-height: calc(1 + 0.8 / var(--font-body-scale)); + font-family: var(--font-body-family); + font-style: var(--font-body-style); + font-weight: var(--font-body-weight); + background-color: #0b0907; + color: rgb(var(--color-foreground)); + } + {% endstyle %} + + {{ 'base.css' | asset_url | stylesheet_tag }} + {{ 'gristle-vault.css' | asset_url | stylesheet_tag }} + + + + + +
+ {{ content_for_layout }} +
+ + diff --git a/sections/footer-group.json b/sections/footer-group.json index a9263d9b541..dcfb84d669e 100644 --- a/sections/footer-group.json +++ b/sections/footer-group.json @@ -1,3 +1,12 @@ +/* + * ------------------------------------------------------------ + * IMPORTANT: The contents of this file are auto-generated. + * + * This file may be updated by the Shopify admin theme editor + * or related systems. Please exercise caution as any changes + * made to this file may be overwritten. + * ------------------------------------------------------------ + */ { "name": "t:sections.footer.name", "type": "footer", @@ -18,24 +27,17 @@ "heading": "Info", "menu": "footer" } - }, - "footer-2": { - "type": "text", - "settings": { - "heading": "Our mission", - "subtext": "

Share contact information, store details, and brand content with your customers.<\/p>" - } } }, "block_order": [ "footer-0", - "footer-1", - "footer-2" + "footer-1" ], "settings": { "color_scheme": "scheme-1", "newsletter_enable": true, "newsletter_heading": "Subscribe to our emails", + "enable_follow_on_shop": true, "show_social": true, "enable_country_selector": false, "enable_language_selector": false, diff --git a/sections/gk-about-feature.liquid b/sections/gk-about-feature.liquid new file mode 100644 index 00000000000..3ba5966c314 --- /dev/null +++ b/sections/gk-about-feature.liquid @@ -0,0 +1,365 @@ +{%- comment -%} + GK About Feature Section + - Old site layout: Title + large centered image + credit + - New site motion: depth slide image + staggered text reveal + - Self-contained CSS + JS, scoped to section.id +{%- endcomment -%} + +{%- assign eyebrow = section.settings.eyebrow | strip -%} +{%- assign subheading = section.settings.subheading | strip -%} +{%- assign button_label = section.settings.button_label | strip -%} + +

+
+ {%- if eyebrow != blank and eyebrow != '.' -%} +
{{ eyebrow }}
+ {%- endif -%} + + {%- if section.settings.heading != blank -%} +

{{ section.settings.heading }}

+ {%- endif -%} + + {%- if section.settings.image != blank -%} +
+
+ {%- liquid + assign img = section.settings.image + assign img_h = img.width | divided_by: img.aspect_ratio + -%} + {{ + img + | image_url: width: 2400 + | image_tag: + width: img.width, + height: img_h, + loading: 'lazy', + widths: '600, 900, 1200, 1600, 2000, 2400', + sizes: '(min-width: 990px) 1100px, (min-width: 750px) 90vw, 92vw', + class: 'gk-about__img' + }} +
+ + {%- if section.settings.photo_credit != blank and section.settings.photo_credit != '.' -%} +
+ {{ section.settings.photo_credit }} +
+ {%- endif -%} +
+ {%- endif -%} + +
+ {%- if subheading != blank and subheading != '.' -%} +

{{ subheading }}

+ {%- endif -%} + + {%- if section.settings.body != blank -%} +
+ {{ section.settings.body }} +
+ {%- endif -%} + + {%- if button_label != blank and button_label != '.' -%} +
+ + {{ button_label | escape }} + +
+ {%- endif -%} +
+
+ + + + +
+ +{% schema %} +{ + "name": "GK About Feature", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "checkbox", + "id": "enable_animation", + "default": true, + "label": "Enable fly-in animation" + }, + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow (optional)", + "default": "." + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "About Greg" + }, + { + "type": "image_picker", + "id": "image", + "label": "Main image" + }, + { + "type": "text", + "id": "photo_credit", + "label": "Photo credit (optional)", + "default": "above photo credit: ©2025CJFoeckler" + }, + { + "type": "text", + "id": "subheading", + "label": "Subheading (optional)", + "default": "." + }, + { + "type": "richtext", + "id": "body", + "label": "Body text", + "default": "

Add your updated About copy here. This is editable in the theme editor.

" + }, + { + "type": "text", + "id": "button_label", + "label": "Button label (optional)", + "default": "." + }, + { + "type": "url", + "id": "button_link", + "label": "Button link" + }, + { + "type": "color", + "id": "accent", + "label": "Accent color", + "default": "#E8690A" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 120, + "step": 4, + "unit": "px", + "label": "Padding top", + "default": 40 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 120, + "step": 4, + "unit": "px", + "label": "Padding bottom", + "default": 52 + } + ], + "presets": [ + { + "name": "GK About Feature" + } + ] +} +{% endschema %} \ No newline at end of file diff --git a/sections/gk-about-gallery.liquid b/sections/gk-about-gallery.liquid new file mode 100644 index 00000000000..042a1bb17bb --- /dev/null +++ b/sections/gk-about-gallery.liquid @@ -0,0 +1,483 @@ +{%- comment -%} + GK About Gallery Section + - Old site layout: heading + main image + credit + 4 small thumbnails directly under hero + - Thumbnails + hero open fullscreen modal (lightbox) + - Premium motion: depth slide + stagger + - Scoped CSS/JS + NOTE: We treat "." as empty for optional text fields. +{%- endcomment -%} + +{%- liquid + assign eyebrow_val = section.settings.eyebrow | strip + assign credit_val = section.settings.main_credit | strip + assign body_val = section.settings.body +-%} + +
+
+ + {%- if eyebrow_val != blank and eyebrow_val != '.' -%} +
{{ section.settings.eyebrow }}
+ {%- endif -%} + + {%- if section.settings.heading != blank -%} +

{{ section.settings.heading }}

+ {%- endif -%} + + {%- if section.settings.main_image != blank -%} +
+ + + {%- if credit_val != blank and credit_val != '.' -%} +
+ {{ section.settings.main_credit }} +
+ {%- endif -%} +
+ {%- endif -%} + + {%- comment -%} Thumbnails (directly under hero, before body) {%- endcomment -%} + {%- liquid + assign has_thumbs = false + if section.settings.thumb_1 != blank or section.settings.thumb_2 != blank or section.settings.thumb_3 != blank or section.settings.thumb_4 != blank + assign has_thumbs = true + endif + -%} + + {%- if has_thumbs -%} +
+ {%- for i in (1..4) -%} + {%- liquid + assign img_key = 'thumb_' | append: i + assign alt_key = 'thumb_alt_' | append: i + + assign t = section.settings[img_key] + assign alt_override = section.settings[alt_key] | strip + + if t != blank + assign full = t | image_url: width: 2800 + assign alt = t.alt + if alt_override != blank and alt_override != '.' + assign alt = alt_override + endif + endif + -%} + + {%- if t != blank -%} + + {%- endif -%} + {%- endfor -%} +
+ {%- endif -%} + + {%- if body_val != blank -%} +
+ {{ section.settings.body }} +
+ {%- endif -%} + +
+ + {%- comment -%} Modal (scoped) {%- endcomment -%} + + + + + +
+ +{% schema %} +{ + "name": "GK About Gallery", + "tag": "section", + "class": "section", + "settings": [ + { "type": "checkbox", "id": "enable_animation", "default": true, "label": "Enable fly-in animation" }, + { "type": "text", "id": "eyebrow", "label": "Eyebrow (optional)", "default": "." }, + { "type": "text", "id": "heading", "label": "Heading", "default": "About the Koch Marshall Trio" }, + { "type": "image_picker", "id": "main_image", "label": "Main image" }, + { "type": "text", "id": "main_credit", "label": "Main photo credit (optional)", "default": "above photo credit: ©2025CJFoeckler" }, + + { "type": "header", "content": "Thumbnail images (click to expand)" }, + { "type": "image_picker", "id": "thumb_1", "label": "Thumbnail 1" }, + { "type": "text", "id": "thumb_alt_1", "label": "Alt text override 1 (optional)", "default": "." }, + { "type": "image_picker", "id": "thumb_2", "label": "Thumbnail 2" }, + { "type": "text", "id": "thumb_alt_2", "label": "Alt text override 2 (optional)", "default": "." }, + { "type": "image_picker", "id": "thumb_3", "label": "Thumbnail 3" }, + { "type": "text", "id": "thumb_alt_3", "label": "Alt text override 3 (optional)", "default": "." }, + { "type": "image_picker", "id": "thumb_4", "label": "Thumbnail 4" }, + { "type": "text", "id": "thumb_alt_4", "label": "Alt text override 4 (optional)", "default": "." }, + + { "type": "richtext", "id": "body", "label": "Body text", "default": "

Add your updated copy here. This is editable in the theme editor.

" }, + { "type": "color", "id": "accent", "label": "Accent color", "default": "#E8690A" }, + { "type": "range", "id": "padding_top", "min": 0, "max": 140, "step": 4, "unit": "px", "label": "Padding top", "default": 44 }, + { "type": "range", "id": "padding_bottom", "min": 0, "max": 140, "step": 4, "unit": "px", "label": "Padding bottom", "default": 52 } + ], + "presets": [{ "name": "GK About Gallery" }] +} +{% endschema %} \ No newline at end of file diff --git a/sections/gk-about-page.liquid b/sections/gk-about-page.liquid new file mode 100644 index 00000000000..1d0b0735853 --- /dev/null +++ b/sections/gk-about-page.liquid @@ -0,0 +1,446 @@ +{%- style -%} + .gk-about { + background-color: {{ section.settings.bg_color }}; + padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px; + } + + .gk-about__inner { + max-width: var(--page-width); + margin: 0 auto; + padding: 0 24px; + } + + .gk-about__header { + text-align: center; + margin-bottom: 48px; + } + + .gk-about__eyebrow { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 3px; + font-size: 0.75rem; + color: #E8690A; + margin-bottom: 12px; + display: block; + } + + .gk-about__heading { + font-family: 'Bebas Neue', sans-serif; + font-size: clamp(2.5rem, 6vw, 4.5rem); + color: #E8E8E8; + text-transform: uppercase; + letter-spacing: 2px; + margin: 0; + } + + /* Editorial Layout */ + .gk-about__editorial { + display: grid; + grid-template-columns: {{ section.settings.image_width }}fr {{ section.settings.text_width }}fr; + gap: 48px; + align-items: start; + margin-bottom: 48px; + } + + .gk-about__editorial--reversed { + direction: rtl; + } + + .gk-about__editorial--reversed > * { + direction: ltr; + } + + .gk-about__image { + width: 100%; + overflow: hidden; + } + + .gk-about__image img { + width: 100%; + height: auto; + object-fit: cover; + display: block; + } + + .gk-about__text { + padding-top: 16px; + } + + .gk-about__text-eyebrow { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 3px; + font-size: 0.7rem; + color: #E8690A; + margin-bottom: 16px; + display: block; + } + + .gk-about__text-heading { + font-family: 'Bebas Neue', sans-serif; + font-size: clamp(1.5rem, 3vw, 2.5rem); + color: #E8E8E8; + text-transform: uppercase; + letter-spacing: 1px; + margin: 0 0 20px 0; + } + + .gk-about__text-body { + font-family: 'DM Sans', sans-serif; + color: #B0B0B0; + font-size: 1rem; + line-height: 1.8; + } + + .gk-about__text-body p { + margin: 0 0 16px 0; + } + + .gk-about__text-body p:last-child { + margin-bottom: 0; + } + + /* Stat bar */ + .gk-about__stats { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 24px; + padding: 40px 0; + border-top: 1px solid #272727; + border-bottom: 1px solid #272727; + margin: 48px 0; + } + + .gk-about__stat { + text-align: center; + } + + .gk-about__stat-number { + font-family: 'Bebas Neue', sans-serif; + font-size: 2.5rem; + color: #E8690A; + display: block; + line-height: 1; + margin-bottom: 4px; + } + + .gk-about__stat-label { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.65rem; + color: #777777; + } + + @media screen and (max-width: 749px) { + .gk-about__editorial { + grid-template-columns: 1fr; + } + + .gk-about__editorial--reversed { + direction: ltr; + } + } +{%- endstyle -%} + +
+
+ {%- if section.settings.show_header -%} +
+ {%- if section.settings.eyebrow != blank -%} + {{ section.settings.eyebrow }} + {%- endif -%} + {%- if section.settings.heading != blank -%} +

{{ section.settings.heading }}

+ {%- endif -%} +
+ {%- endif -%} + + {%- for block in section.blocks -%} + {%- case block.type -%} + {%- when 'editorial_block' -%} +
+ {%- if block.settings.image != blank -%} +
+ {{ block.settings.image | image_url: width: 900 | image_tag: + loading: 'lazy', + sizes: '(max-width: 749px) 100vw, 50vw', + widths: '375, 550, 750, 900' + }} +
+ {%- endif -%} +
+ {%- if block.settings.eyebrow != blank -%} + {{ block.settings.eyebrow }} + {%- endif -%} + {%- if block.settings.heading != blank -%} +

{{ block.settings.heading }}

+ {%- endif -%} + {%- if block.settings.body != blank -%} +
{{ block.settings.body }}
+ {%- endif -%} +
+
+ + {%- when 'stats_bar' -%} +
+ {%- if block.settings.stat_1_number != blank -%} +
+ {{ block.settings.stat_1_number }} + {{ block.settings.stat_1_label }} +
+ {%- endif -%} + {%- if block.settings.stat_2_number != blank -%} +
+ {{ block.settings.stat_2_number }} + {{ block.settings.stat_2_label }} +
+ {%- endif -%} + {%- if block.settings.stat_3_number != blank -%} +
+ {{ block.settings.stat_3_number }} + {{ block.settings.stat_3_label }} +
+ {%- endif -%} + {%- if block.settings.stat_4_number != blank -%} +
+ {{ block.settings.stat_4_number }} + {{ block.settings.stat_4_label }} +
+ {%- endif -%} +
+ + {%- when 'richtext' -%} +
+ {%- if block.settings.eyebrow != blank -%} + {{ block.settings.eyebrow }} + {%- endif -%} + {%- if block.settings.heading != blank -%} +

{{ block.settings.heading }}

+ {%- endif -%} + {%- if block.settings.body != blank -%} +
{{ block.settings.body }}
+ {%- endif -%} +
+ {%- endcase -%} + {%- endfor -%} +
+
+ +{% schema %} +{ + "name": "GK About Page", + "tag": "section", + "class": "gk-about-section", + "settings": [ + { + "type": "color", + "id": "bg_color", + "label": "Background Color", + "default": "#0D0D0D" + }, + { + "type": "checkbox", + "id": "show_header", + "label": "Show Page Header", + "default": true + }, + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow Text", + "default": "The Gristleman" + }, + { + "type": "text", + "id": "heading", + "label": "Page Heading", + "default": "ABOUT GREG KOCH" + }, + { + "type": "select", + "id": "image_width", + "label": "Image Column Width", + "default": "1", + "options": [ + { "value": "1", "label": "Equal" }, + { "value": "2", "label": "Image Wider" } + ] + }, + { + "type": "select", + "id": "text_width", + "label": "Text Column Width", + "default": "1", + "options": [ + { "value": "1", "label": "Equal" }, + { "value": "2", "label": "Text Wider" } + ] + }, + { + "type": "range", + "id": "padding_top", + "label": "Padding Top", + "min": 0, + "max": 100, + "step": 4, + "default": 60, + "unit": "px" + }, + { + "type": "range", + "id": "padding_bottom", + "label": "Padding Bottom", + "min": 0, + "max": 100, + "step": 4, + "default": 60, + "unit": "px" + } + ], + "blocks": [ + { + "type": "editorial_block", + "name": "Image + Text Block", + "settings": [ + { + "type": "image_picker", + "id": "image", + "label": "Image" + }, + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow Text" + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "The Story" + }, + { + "type": "richtext", + "id": "body", + "label": "Body Text", + "default": "

Greg Koch is a guitar fiend from Milwaukee, Wisconsin. Known for his unique blend of blues, rock, country, and jazz, Koch has been unleashing his brand of musical mayhem for decades.

A Reverend Guitars and Fishman artist, Koch is equally at home shredding on stage, recording in the studio, or teaching his trademark techniques to students around the world.

" + }, + { + "type": "checkbox", + "id": "reverse_layout", + "label": "Reverse Layout (text left, image right)", + "default": false + } + ] + }, + { + "type": "stats_bar", + "name": "Stats Bar", + "limit": 1, + "settings": [ + { + "type": "text", + "id": "stat_1_number", + "label": "Stat 1 Number", + "default": "30+" + }, + { + "type": "text", + "id": "stat_1_label", + "label": "Stat 1 Label", + "default": "Years Playing" + }, + { + "type": "text", + "id": "stat_2_number", + "label": "Stat 2 Number", + "default": "20+" + }, + { + "type": "text", + "id": "stat_2_label", + "label": "Stat 2 Label", + "default": "Albums Released" + }, + { + "type": "text", + "id": "stat_3_number", + "label": "Stat 3 Number", + "default": "1000+" + }, + { + "type": "text", + "id": "stat_3_label", + "label": "Stat 3 Label", + "default": "Shows Played" + }, + { + "type": "text", + "id": "stat_4_number", + "label": "Stat 4 Number", + "default": "50+" + }, + { + "type": "text", + "id": "stat_4_label", + "label": "Stat 4 Label", + "default": "Courses Published" + } + ] + }, + { + "type": "richtext", + "name": "Rich Text Block", + "settings": [ + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow Text" + }, + { + "type": "text", + "id": "heading", + "label": "Heading" + }, + { + "type": "richtext", + "id": "body", + "label": "Body Text", + "default": "

Additional bio content goes here.

" + }, + { + "type": "checkbox", + "id": "center", + "label": "Center Text", + "default": false + } + ] + } + ], + "presets": [ + { + "name": "GK About Page", + "blocks": [ + { + "type": "editorial_block", + "settings": { + "heading": "The Story", + "reverse_layout": false + } + }, + { + "type": "stats_bar" + }, + { + "type": "editorial_block", + "settings": { + "heading": "The Gear", + "reverse_layout": true + } + } + ] + } + ] +} +{% endschema %} diff --git a/sections/gk-bandsintown-home.liquid b/sections/gk-bandsintown-home.liquid new file mode 100644 index 00000000000..665d725619e --- /dev/null +++ b/sections/gk-bandsintown-home.liquid @@ -0,0 +1,658 @@ +{% comment %} + GK Bandsintown – Home Strip + Official Bandsintown widget for Greg Koch, restyled to match dark glass aesthetic. + Shows N events initially; each "Show More" click reveals reveal_step more. + + MERCHANT: Theme Editor › this section › Bandsintown › Artist name + Display settings › Events shown on load / Events revealed per click +{% endcomment %} + +{%- liquid + assign bit_artist = section.settings.artist_name + assign bit_initial_visible = section.settings.initial_visible_count + assign bit_reveal_step = section.settings.reveal_step + assign bit_more_label = section.settings.show_more_label | default: 'SHOW MORE DATES' + assign bit_uid = section.id | prepend: 'gkbit-home-' +-%} + + + +
+
+ + {%- if section.settings.eyebrow != blank -%} +
{{ section.settings.eyebrow }}
+ {%- endif -%} + {%- if section.settings.heading != blank -%} +

{{ section.settings.heading }}

+ {%- endif -%} + {%- if section.settings.subtext != blank -%} +

{{ section.settings.subtext }}

+ {%- endif -%} + + {%- if request.design_mode -%} +
+ ⓘ  Theme Editor: Bandsintown events load live. Click "View" or open the published site to see them. +
+ {%- endif -%} + +
+ {%- comment -%} + Official Bandsintown anchor-initializer. BIT script below finds this element + and replaces it with the rendered widget (event list + ticket links). + {%- endcomment -%} + +
Check back soon for upcoming dates.
+
+ +
+
+ +{%- comment -%} + Load / re-trigger Bandsintown widget script. + On initial page load BIT isn't loaded yet, so we inject it. + On Shopify theme-editor re-render (save / setting change) the section HTML + is replaced but window globals survive — so we must remove the old + + + +{% schema %} +{ + "name": "GK Bandsintown (Home)", + "settings": [ + { + "type": "header", + "content": "Header text" + }, + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow", + "default": "On Tour" + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "LIVE DATES" + }, + { + "type": "text", + "id": "subtext", + "label": "Subtext", + "default": "Catch Greg live on the road." + }, + { + "type": "header", + "content": "Bandsintown" + }, + { + "type": "text", + "id": "artist_name", + "label": "Artist name", + "info": "Must match your Bandsintown artist page exactly, e.g. Greg Koch", + "default": "Greg Koch" + }, + { + "type": "header", + "content": "Display settings" + }, + { + "type": "range", + "id": "initial_visible_count", + "label": "Events shown on load", + "min": 1, + "max": 20, + "step": 1, + "default": 3 + }, + { + "type": "range", + "id": "reveal_step", + "label": "Events revealed per click", + "min": 1, + "max": 20, + "step": 1, + "default": 3 + }, + { + "type": "text", + "id": "show_more_label", + "label": "Show more button label", + "default": "SHOW MORE DATES" + }, + { + "type": "header", + "content": "Style" + }, + { + "type": "color", + "id": "bg_color", + "label": "Background color", + "default": "#0D0D0D" + }, + { + "type": "range", + "id": "max_width", + "label": "Max content width (px)", + "min": 600, + "max": 1400, + "step": 20, + "default": 900 + }, + { + "type": "range", + "id": "padding_top", + "label": "Padding top", + "min": 0, + "max": 120, + "step": 4, + "default": 64 + }, + { + "type": "range", + "id": "padding_bottom", + "label": "Padding bottom", + "min": 0, + "max": 120, + "step": 4, + "default": 64 + } + ], + "presets": [ + { + "name": "GK Bandsintown (Home)" + } + ] +} +{% endschema %} diff --git a/sections/gk-bandsintown-page.liquid b/sections/gk-bandsintown-page.liquid new file mode 100644 index 00000000000..eb1ec4e4909 --- /dev/null +++ b/sections/gk-bandsintown-page.liquid @@ -0,0 +1,667 @@ +{% comment %} + GK Bandsintown – Dates Page (full listing) + Official Bandsintown widget for Greg Koch, restyled to match dark glass aesthetic. + Shows N events initially; each "Show More" click reveals reveal_step more. + + MERCHANT: Theme Editor › this section › Bandsintown › Artist name + Display settings › Events shown on load / Events revealed per click +{% endcomment %} + +{%- liquid + assign bit_artist = section.settings.artist_name + assign bit_initial_visible = section.settings.initial_visible_count + assign bit_reveal_step = section.settings.reveal_step + assign bit_more_label = section.settings.show_more_label | default: 'SHOW MORE DATES' + assign bit_uid = section.id | prepend: 'gkbit-page-' +-%} + + + +
+
+ + {%- if section.settings.eyebrow != blank -%} +
{{ section.settings.eyebrow }}
+ {%- endif -%} + {%- if section.settings.heading != blank -%} +

{{ section.settings.heading }}

+ {%- endif -%} + {%- if section.settings.subtext != blank -%} +

{{ section.settings.subtext }}

+ {%- endif -%} + + {%- if request.design_mode -%} +
+ ⓘ  Theme Editor: Bandsintown events load live. Click "View" or open the published site to see them. +
+ {%- endif -%} + +
+ {%- comment -%} + Official Bandsintown anchor-initializer. BIT script below finds this element + and replaces it with the rendered widget (event list + ticket links). + {%- endcomment -%} + +
Check back soon for upcoming dates.
+
+ +
+
+ +{%- comment -%} + Load / re-trigger Bandsintown widget script. + On initial page load BIT isn't loaded yet, so we inject it. + On Shopify theme-editor re-render (save / setting change) the section HTML + is replaced but window globals survive — so we must remove the old + + + +{% schema %} +{ + "name": "GK Bandsintown (Page)", + "settings": [ + { + "type": "header", + "content": "Header text" + }, + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow", + "default": "Tour Dates" + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "TOUR DATES" + }, + { + "type": "text", + "id": "subtext", + "label": "Subtext", + "default": "All upcoming live dates below. Tickets available at each show." + }, + { + "type": "header", + "content": "Bandsintown" + }, + { + "type": "text", + "id": "artist_name", + "label": "Artist name", + "info": "Must match your Bandsintown artist page exactly, e.g. Greg Koch", + "default": "Greg Koch" + }, + { + "type": "header", + "content": "Display settings" + }, + { + "type": "range", + "id": "initial_visible_count", + "label": "Events shown on load", + "min": 1, + "max": 30, + "step": 1, + "default": 10 + }, + { + "type": "range", + "id": "reveal_step", + "label": "Events revealed per click", + "min": 1, + "max": 30, + "step": 1, + "default": 5 + }, + { + "type": "text", + "id": "show_more_label", + "label": "Show more button label", + "default": "SHOW MORE DATES" + }, + { + "type": "header", + "content": "Style" + }, + { + "type": "color", + "id": "bg_color", + "label": "Background color", + "default": "#0D0D0D" + }, + { + "type": "range", + "id": "max_width", + "label": "Max content width (px)", + "min": 600, + "max": 1400, + "step": 20, + "default": 1100 + }, + { + "type": "range", + "id": "padding_top", + "label": "Padding top", + "min": 0, + "max": 120, + "step": 4, + "default": 64 + }, + { + "type": "range", + "id": "padding_bottom", + "label": "Padding bottom", + "min": 0, + "max": 120, + "step": 4, + "default": 64 + } + ], + "presets": [ + { + "name": "GK Bandsintown (Page)" + } + ] +} +{% endschema %} diff --git a/sections/gk-contact-page.liquid b/sections/gk-contact-page.liquid new file mode 100644 index 00000000000..70b647db3fd --- /dev/null +++ b/sections/gk-contact-page.liquid @@ -0,0 +1,449 @@ +{%- style -%} + .gk-contact { + background-color: {{ section.settings.bg_color }}; + padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px; + } + + .gk-contact__inner { + max-width: {{ section.settings.form_width }}px; + margin: 0 auto; + padding: 0 24px; + } + + .gk-contact__header { + text-align: center; + margin-bottom: 48px; + } + + .gk-contact__eyebrow { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 3px; + font-size: 0.75rem; + color: #E8690A; + margin-bottom: 12px; + display: block; + } + + .gk-contact__heading { + font-family: 'Bebas Neue', sans-serif; + font-size: clamp(2.5rem, 6vw, 4.5rem); + color: #E8E8E8; + text-transform: uppercase; + letter-spacing: 2px; + margin: 0 0 12px 0; + } + + .gk-contact__subtext { + font-family: 'DM Sans', sans-serif; + color: #777777; + font-size: 1.1rem; + max-width: 500px; + margin: 0 auto; + line-height: 1.6; + } + + .gk-contact__form { + background-color: #141414; + border: 1px solid #272727; + padding: 40px; + } + + .gk-contact__field { + margin-bottom: 24px; + } + + .gk-contact__field label { + display: block; + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.7rem; + color: #777777; + margin-bottom: 8px; + } + + .gk-contact__field input, + .gk-contact__field textarea { + width: 100%; + background-color: #0D0D0D; + border: 1px solid #272727; + color: #E8E8E8; + font-family: 'DM Sans', sans-serif; + font-size: 1rem; + padding: 14px 16px; + border-radius: 0; + outline: none; + transition: border-color 0.3s ease; + box-sizing: border-box; + } + + .gk-contact__field input:focus, + .gk-contact__field textarea:focus { + border-color: #E8690A; + } + + .gk-contact__field input::placeholder, + .gk-contact__field textarea::placeholder { + color: #555555; + } + + .gk-contact__field textarea { + min-height: 160px; + resize: vertical; + } + + .gk-contact__submit { + font-family: 'DM Sans', sans-serif; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.85rem; + font-weight: 500; + padding: 14px 48px; + border-radius: 0; + background-color: #E8690A; + color: #FFFFFF; + border: 2px solid #E8690A; + cursor: pointer; + transition: all 0.3s ease; + display: inline-block; + width: {{ section.settings.button_width }}; + } + + .gk-contact__submit:hover { + background-color: transparent; + color: #E8690A; + } + + .gk-contact__info { + margin-top: 48px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 32px; + } + + .gk-contact__info-item { + text-align: center; + } + + .gk-contact__info-label { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.7rem; + color: #E8690A; + margin-bottom: 8px; + display: block; + } + + .gk-contact__info-value { + font-family: 'DM Sans', sans-serif; + color: #E8E8E8; + font-size: 0.95rem; + } + + .gk-contact__info-value a { + color: #E8E8E8; + text-decoration: none; + transition: color 0.3s ease; + } + + .gk-contact__info-value a:hover { + color: #E8690A; + } + + @media screen and (max-width: 749px) { + .gk-contact__form { + padding: 24px; + } + } +{%- endstyle -%} + +
+
+
+ {%- if section.settings.eyebrow != blank -%} + {{ section.settings.eyebrow }} + {%- endif -%} + {%- if section.settings.heading != blank -%} +

{{ section.settings.heading }}

+ {%- endif -%} + {%- if section.settings.subtext != blank -%} +

{{ section.settings.subtext }}

+ {%- endif -%} +
+ +
+ {%- form 'contact', id: 'ContactForm' -%} + {%- if form.posted_successfully? -%} +
+

{{ section.settings.success_message }}

+
+ {%- endif -%} + + {%- if form.errors -%} +
+

{{ form.errors | default_errors }}

+
+ {%- endif -%} + +
+ + +
+ +
+ + +
+ + {%- if section.settings.show_phone -%} +
+ + +
+ {%- endif -%} + +
+ + +
+ +
+ +
+ {%- endform -%} +
+ + {%- assign has_info = false -%} + {%- for block in section.blocks -%} + {%- if block.type == 'info_item' -%} + {%- assign has_info = true -%} + {%- break -%} + {%- endif -%} + {%- endfor -%} + + {%- if has_info -%} +
+ {%- for block in section.blocks -%} + {%- if block.type == 'info_item' -%} +
+ {{ block.settings.label }} + + {%- if block.settings.link != blank -%} + {{ block.settings.value }} + {%- else -%} + {{ block.settings.value }} + {%- endif -%} + +
+ {%- endif -%} + {%- endfor -%} +
+ {%- endif -%} +
+
+ +{% schema %} +{ + "name": "GK Contact Page", + "tag": "section", + "class": "gk-contact-section", + "settings": [ + { + "type": "color", + "id": "bg_color", + "label": "Background Color", + "default": "#0D0D0D" + }, + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow Text", + "default": "Get in Touch" + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "CONTACT" + }, + { + "type": "textarea", + "id": "subtext", + "label": "Subtext", + "default": "For booking, press, lessons, or general inquiries." + }, + { + "type": "text", + "id": "name_label", + "label": "Name Field Label", + "default": "Name" + }, + { + "type": "text", + "id": "name_placeholder", + "label": "Name Placeholder", + "default": "Your name" + }, + { + "type": "text", + "id": "email_label", + "label": "Email Field Label", + "default": "Email" + }, + { + "type": "text", + "id": "email_placeholder", + "label": "Email Placeholder", + "default": "your@email.com" + }, + { + "type": "checkbox", + "id": "show_phone", + "label": "Show Phone Field", + "default": false + }, + { + "type": "text", + "id": "phone_label", + "label": "Phone Field Label", + "default": "Phone" + }, + { + "type": "text", + "id": "phone_placeholder", + "label": "Phone Placeholder", + "default": "Your phone number" + }, + { + "type": "text", + "id": "message_label", + "label": "Message Field Label", + "default": "Message" + }, + { + "type": "text", + "id": "message_placeholder", + "label": "Message Placeholder", + "default": "What's on your mind?" + }, + { + "type": "text", + "id": "submit_label", + "label": "Submit Button Label", + "default": "SEND MESSAGE" + }, + { + "type": "text", + "id": "success_message", + "label": "Success Message", + "default": "Thanks for reaching out! We'll get back to you soon." + }, + { + "type": "select", + "id": "button_alignment", + "label": "Button Alignment", + "default": "left", + "options": [ + { "value": "left", "label": "Left" }, + { "value": "center", "label": "Center" }, + { "value": "right", "label": "Right" } + ] + }, + { + "type": "select", + "id": "button_width", + "label": "Button Width", + "default": "auto", + "options": [ + { "value": "auto", "label": "Auto" }, + { "value": "100%", "label": "Full Width" } + ] + }, + { + "type": "range", + "id": "form_width", + "label": "Form Max Width", + "min": 500, + "max": 1000, + "step": 50, + "default": 700, + "unit": "px" + }, + { + "type": "range", + "id": "padding_top", + "label": "Padding Top", + "min": 0, + "max": 100, + "step": 4, + "default": 60, + "unit": "px" + }, + { + "type": "range", + "id": "padding_bottom", + "label": "Padding Bottom", + "min": 0, + "max": 100, + "step": 4, + "default": 60, + "unit": "px" + } + ], + "blocks": [ + { + "type": "info_item", + "name": "Contact Info", + "settings": [ + { + "type": "text", + "id": "label", + "label": "Label", + "default": "Email" + }, + { + "type": "text", + "id": "value", + "label": "Value", + "default": "info@gregkoch.com" + }, + { + "type": "url", + "id": "link", + "label": "Link (optional)" + } + ] + } + ], + "presets": [ + { + "name": "GK Contact Page", + "blocks": [ + { + "type": "info_item", + "settings": { + "label": "General", + "value": "info@gregkoch.com" + } + }, + { + "type": "info_item", + "settings": { + "label": "Booking", + "value": "booking@gregkoch.com" + } + }, + { + "type": "info_item", + "settings": { + "label": "Press", + "value": "press@gregkoch.com" + } + } + ] + } + ] +} +{% endschema %} diff --git a/sections/gk-dates-page.liquid b/sections/gk-dates-page.liquid new file mode 100644 index 00000000000..3fb30267517 --- /dev/null +++ b/sections/gk-dates-page.liquid @@ -0,0 +1,425 @@ +{% comment %} + GK Tour Dates (DATES PAGE) + - Uses shared snippet as the single source of truth + - Keeps your exact "gk-date" glass card styling + JS reveal +{% endcomment %} + +{% liquid + assign today_ymd = 'now' | date: '%Y-%m-%d' + assign today_midnight_ts = today_ymd | date: '%s' | plus: 0 +%} + +{%- capture upcoming_count_capture -%} + {%- render 'gk-tour-dates-shared', + mode: 'count' + -%} +{%- endcapture -%} +{%- assign upcoming_count = upcoming_count_capture | strip | plus: 0 -%} + +
+
+ + {% if section.settings.eyebrow != blank %} +
{{ section.settings.eyebrow }}
+ {% endif %} + + {% if section.settings.heading != blank %} +

{{ section.settings.heading }}

+ {% endif %} + + {% if section.settings.subtext != blank %} +
{{ section.settings.subtext }}
+ {% endif %} + +
+ {%- render 'gk-tour-dates-shared', + mode: 'render', + row_prefix: 'gk-date', + visible_count: section.settings.visible_count, + use_hidden_class: true + -%} +
+ + {% if upcoming_count == 0 %} +
+ {{ section.settings.empty_text }} +
+ {% endif %} + + {% if upcoming_count > section.settings.visible_count %} +
+ + + + + {% if section.settings.view_all_url != blank %} + + {{ section.settings.view_all_label }} + + {% endif %} +
+ {% elsif section.settings.view_all_url != blank %} +
+ + {{ section.settings.view_all_label }} + +
+ {% endif %} + +
+
+ + + + + +{% schema %} +{ + "name": "GK Dates Page", + "settings": [ + { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Tour Dates" }, + { "type": "text", "id": "heading", "label": "Heading", "default": "GREG KOCH DATES" }, + { "type": "text", "id": "subtext", "label": "Subtext", "default": "See upcoming dates below." }, + { "type": "text", "id": "empty_text", "label": "Empty state text", "default": "No upcoming dates. Check back soon." }, + + { + "type": "select", + "id": "text_align", + "label": "Text alignment", + "default": "left", + "options": [ + { "value": "left", "label": "Left" }, + { "value": "center", "label": "Center" }, + { "value": "right", "label": "Right" } + ] + }, + + { "type": "range", "id": "visible_count", "label": "Visible dates", "min": 1, "max": 20, "step": 1, "default": 10 }, + { "type": "range", "id": "reveal_step", "label": "Reveal step", "min": 1, "max": 20, "step": 1, "default": 10 }, + + { "type": "text", "id": "show_more_label", "label": "Show more label", "default": "Show more dates" }, + { "type": "text", "id": "show_less_label", "label": "Show less label", "default": "Show fewer dates" }, + { "type": "text", "id": "view_all_label", "label": "View all label", "default": "View all dates" }, + { "type": "url", "id": "view_all_url", "label": "View all URL" }, + + { "type": "range", "id": "padding_top", "label": "Padding top", "min": 0, "max": 120, "step": 4, "default": 64 }, + { "type": "range", "id": "padding_bottom", "label": "Padding bottom", "min": 0, "max": 120, "step": 4, "default": 64 }, + + { "type": "color", "id": "bg_color", "label": "Background color", "default": "#0D0D0D" }, + { "type": "color", "id": "accent_color", "label": "Accent color", "default": "#E8690A" } + ], + "presets": [ + { "name": "GK Dates Page" } + ] +} +{% endschema %} \ No newline at end of file diff --git a/sections/gk-featured-gristle.liquid b/sections/gk-featured-gristle.liquid new file mode 100644 index 00000000000..107734f3c8c --- /dev/null +++ b/sections/gk-featured-gristle.liquid @@ -0,0 +1,357 @@ +{%- style -%} + .gk-featured-gristle { + background-color: {{ section.settings.bg_color }}; + padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px; + } + + .gk-featured-gristle__inner { + max-width: var(--page-width); + margin: 0 auto; + padding: 0 24px; + } + + .gk-featured-gristle__header { + text-align: {{ section.settings.text_alignment }}; + margin-bottom: 40px; + } + + .gk-featured-gristle__eyebrow { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 3px; + font-size: 0.75rem; + color: #E8690A; + margin-bottom: 12px; + display: block; + } + + .gk-featured-gristle__heading { + font-family: 'Bebas Neue', sans-serif; + font-size: clamp(2rem, 5vw, 3.5rem); + color: #E8E8E8; + text-transform: uppercase; + letter-spacing: 2px; + margin: 0 0 8px 0; + } + + .gk-featured-gristle__subtext { + font-family: 'DM Sans', sans-serif; + color: #777777; + font-size: 1rem; + max-width: 600px; + {% if section.settings.text_alignment == 'center' %} + margin-left: auto; + margin-right: auto; + {% endif %} + } + + .gk-featured-gristle__grid { + display: grid; + grid-template-columns: repeat({{ section.settings.columns_desktop }}, 1fr); + gap: 24px; + } + + .gk-featured-gristle__card { + background-color: #141414; + border: 1px solid #272727; + overflow: hidden; + transition: all 0.3s ease; + text-decoration: none; + display: block; + } + + .gk-featured-gristle__card:hover { + border-color: #E8690A; + transform: translateY(-4px); + } + + .gk-featured-gristle__card-image { + width: 100%; + aspect-ratio: {{ section.settings.image_ratio }}; + overflow: hidden; + } + + .gk-featured-gristle__card-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.5s ease; + } + + .gk-featured-gristle__card:hover .gk-featured-gristle__card-image img { + transform: scale(1.05); + } + + .gk-featured-gristle__card-content { + padding: 24px; + } + + .gk-featured-gristle__card-label { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.7rem; + color: #E8690A; + margin-bottom: 8px; + display: block; + } + + .gk-featured-gristle__card-title { + font-family: 'Bebas Neue', sans-serif; + font-size: 1.5rem; + color: #E8E8E8; + margin: 0 0 8px 0; + text-transform: uppercase; + letter-spacing: 1px; + } + + .gk-featured-gristle__card-desc { + font-family: 'DM Sans', sans-serif; + color: #777777; + font-size: 0.9rem; + line-height: 1.6; + margin: 0 0 16px 0; + } + + .gk-featured-gristle__card-btn { + font-family: 'DM Sans', sans-serif; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.75rem; + font-weight: 500; + color: #E8690A; + text-decoration: none; + border-bottom: 1px solid #E8690A; + padding-bottom: 2px; + transition: color 0.3s ease; + } + + .gk-featured-gristle__card-btn:hover { + color: #E8E8E8; + border-color: #E8E8E8; + } + + @media screen and (max-width: 989px) { + .gk-featured-gristle__grid { + grid-template-columns: repeat(2, 1fr); + } + } + + @media screen and (max-width: 749px) { + .gk-featured-gristle__grid { + grid-template-columns: 1fr; + } + } +{%- endstyle -%} + + + +{% schema %} +{ + "name": "GK Featured Gristle", + "tag": "section", + "class": "gk-featured-gristle-section", + "settings": [ + { + "type": "color", + "id": "bg_color", + "label": "Background Color", + "default": "#0D0D0D" + }, + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow Text", + "default": "Learn from the Gristleman" + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "FEATURED GRISTLE" + }, + { + "type": "text", + "id": "subtext", + "label": "Subtext", + "default": "Lessons, courses, and on-demand content from Greg Koch." + }, + { + "type": "select", + "id": "text_alignment", + "label": "Text Alignment", + "default": "center", + "options": [ + { "value": "left", "label": "Left" }, + { "value": "center", "label": "Center" }, + { "value": "right", "label": "Right" } + ] + }, + { + "type": "select", + "id": "columns_desktop", + "label": "Desktop Columns", + "default": "3", + "options": [ + { "value": "2", "label": "2 Columns" }, + { "value": "3", "label": "3 Columns" }, + { "value": "4", "label": "4 Columns" } + ] + }, + { + "type": "select", + "id": "image_ratio", + "label": "Image Ratio", + "default": "16/9", + "options": [ + { "value": "1/1", "label": "Square" }, + { "value": "4/3", "label": "4:3" }, + { "value": "16/9", "label": "16:9" }, + { "value": "3/2", "label": "3:2" } + ] + }, + { + "type": "range", + "id": "padding_top", + "label": "Padding Top", + "min": 0, + "max": 100, + "step": 4, + "default": 60, + "unit": "px" + }, + { + "type": "range", + "id": "padding_bottom", + "label": "Padding Bottom", + "min": 0, + "max": 100, + "step": 4, + "default": 60, + "unit": "px" + } + ], + "blocks": [ + { + "type": "card", + "name": "Feature Card", + "settings": [ + { + "type": "image_picker", + "id": "image", + "label": "Card Image" + }, + { + "type": "text", + "id": "label", + "label": "Category Label", + "default": "Lessons" + }, + { + "type": "text", + "id": "title", + "label": "Card Title", + "default": "Virtual Lessons" + }, + { + "type": "textarea", + "id": "description", + "label": "Description", + "default": "One-on-one virtual guitar lessons with Greg Koch via Zoom." + }, + { + "type": "text", + "id": "button_label", + "label": "Button Label", + "default": "LEARN MORE" + }, + { + "type": "url", + "id": "link", + "label": "Card Link" + } + ] + } + ], + "presets": [ + { + "name": "GK Featured Gristle", + "blocks": [ + { + "type": "card", + "settings": { + "label": "Lessons", + "title": "Virtual Lessons", + "description": "One-on-one virtual guitar lessons with Greg Koch via Zoom.", + "button_label": "BOOK NOW" + } + }, + { + "type": "card", + "settings": { + "label": "On Demand", + "title": "On-Demand Courses", + "description": "Self-paced video courses covering technique, tone, and more.", + "button_label": "BROWSE COURSES" + } + }, + { + "type": "card", + "settings": { + "label": "TrueFire", + "title": "TrueFire Courses", + "description": "Full-length instructional courses on the TrueFire platform.", + "button_label": "VIEW ON TRUEFIRE" + } + } + ] + } + ] +} +{% endschema %} diff --git a/sections/gk-hero.liquid b/sections/gk-hero.liquid new file mode 100644 index 00000000000..ae381de8eb6 --- /dev/null +++ b/sections/gk-hero.liquid @@ -0,0 +1,403 @@ +{%- style -%} + .gk-hero { + position: relative; + width: 100%; + min-height: {{ section.settings.hero_height }}vh; + display: flex; + align-items: {{ section.settings.content_position }}; + justify-content: center; + overflow: hidden; + background-color: #0D0D0D; + } + + .gk-hero__media { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + } + + .gk-hero__media img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: {{ section.settings.image_position }}; + } + + .gk-hero__overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient( + to {{ section.settings.gradient_direction }}, + rgba(13, 13, 13, {{ section.settings.overlay_opacity | divided_by: 100.0 }}) 0%, + rgba(13, 13, 13, {{ section.settings.overlay_end_opacity | divided_by: 100.0 }}) 100% + ); + z-index: 2; + } + + .gk-hero__content { + position: relative; + z-index: 3; + text-align: {{ section.settings.text_alignment }}; + max-width: {{ section.settings.content_width }}px; + padding: 60px 24px; + width: 100%; + } + + .gk-hero__eyebrow { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 3px; + font-size: 0.8rem; + color: #E8690A; + margin-bottom: 16px; + display: block; + } + + .gk-hero__heading { + font-family: 'Bebas Neue', sans-serif; + font-size: clamp(3rem, 8vw, {{ section.settings.heading_size }}rem); + line-height: 0.95; + color: #E8E8E8; + margin: 0 0 16px 0; + text-transform: uppercase; + letter-spacing: 2px; + } + + .gk-hero__subheading { + font-family: 'DM Sans', sans-serif; + font-size: 1.1rem; + color: #777777; + margin-bottom: 32px; + line-height: 1.6; + max-width: 600px; + {% if section.settings.text_alignment == 'center' %} + margin-left: auto; + margin-right: auto; + {% endif %} + } + + .gk-hero__buttons { + display: flex; + gap: 16px; + flex-wrap: wrap; + {% if section.settings.text_alignment == 'center' %} + justify-content: center; + {% endif %} + } + + .gk-hero__btn { + font-family: 'DM Sans', sans-serif; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.85rem; + font-weight: 500; + padding: 14px 36px; + border-radius: 0; + text-decoration: none; + display: inline-block; + transition: all 0.3s ease; + cursor: pointer; + } + + .gk-hero__btn--primary { + background-color: #E8690A; + color: #FFFFFF; + border: 2px solid #E8690A; + } + + .gk-hero__btn--primary:hover { + background-color: transparent; + color: #E8690A; + } + + .gk-hero__btn--secondary { + background-color: transparent; + color: #E8690A; + border: 2px solid #E8690A; + } + + .gk-hero__btn--secondary:hover { + background-color: #E8690A; + color: #FFFFFF; + } + + @media screen and (max-width: 749px) { + .gk-hero { + min-height: {{ section.settings.mobile_height }}vh; + } + + .gk-hero__heading { + font-size: clamp(2.5rem, 10vw, 4rem); + } + + .gk-hero__buttons { + flex-direction: column; + align-items: {% if section.settings.text_alignment == 'center' %}center{% else %}flex-start{% endif %}; + } + + .gk-hero__btn { + width: auto; + } + } +{%- endstyle -%} + +
+ {%- if section.settings.image != blank -%} +
+ {{ section.settings.image | image_url: width: 2000 | image_tag: + loading: 'eager', + sizes: '100vw', + widths: '375, 750, 1100, 1500, 2000', + alt: section.settings.image.alt | default: section.settings.heading + }} +
+ {%- else -%} +
+ {%- endif -%} + +
+ +
+ {%- for block in section.blocks -%} + {%- case block.type -%} + {%- when 'eyebrow' -%} + {%- if block.settings.text != blank -%} + {{ block.settings.text }} + {%- endif -%} + + {%- when 'heading' -%} + {%- if block.settings.heading != blank -%} +

{{ block.settings.heading }}

+ {%- endif -%} + + {%- when 'subheading' -%} + {%- if block.settings.text != blank -%} +

{{ block.settings.text }}

+ {%- endif -%} + + {%- when 'buttons' -%} +
+ {%- if block.settings.button_label_1 != blank -%} + + {{ block.settings.button_label_1 }} + + {%- endif -%} + {%- if block.settings.button_label_2 != blank -%} + + {{ block.settings.button_label_2 }} + + {%- endif -%} +
+ {%- endcase -%} + {%- endfor -%} +
+
+ +{% schema %} +{ + "name": "GK Hero", + "tag": "section", + "class": "gk-hero-section", + "settings": [ + { + "type": "image_picker", + "id": "image", + "label": "Hero Image" + }, + { + "type": "select", + "id": "image_position", + "label": "Image Position", + "default": "center center", + "options": [ + { "value": "top center", "label": "Top" }, + { "value": "center center", "label": "Center" }, + { "value": "bottom center", "label": "Bottom" }, + { "value": "left center", "label": "Left" }, + { "value": "right center", "label": "Right" } + ] + }, + { + "type": "range", + "id": "hero_height", + "label": "Hero Height (vh)", + "min": 50, + "max": 100, + "step": 5, + "default": 100, + "unit": "vh" + }, + { + "type": "range", + "id": "mobile_height", + "label": "Mobile Height (vh)", + "min": 50, + "max": 100, + "step": 5, + "default": 85, + "unit": "vh" + }, + { + "type": "range", + "id": "overlay_opacity", + "label": "Overlay Start Opacity", + "min": 0, + "max": 100, + "step": 5, + "default": 30, + "unit": "%" + }, + { + "type": "range", + "id": "overlay_end_opacity", + "label": "Overlay End Opacity", + "min": 0, + "max": 100, + "step": 5, + "default": 85, + "unit": "%" + }, + { + "type": "select", + "id": "gradient_direction", + "label": "Gradient Direction", + "default": "bottom", + "options": [ + { "value": "top", "label": "Top" }, + { "value": "bottom", "label": "Bottom" }, + { "value": "left", "label": "Left" }, + { "value": "right", "label": "Right" } + ] + }, + { + "type": "select", + "id": "content_position", + "label": "Content Vertical Position", + "default": "flex-end", + "options": [ + { "value": "flex-start", "label": "Top" }, + { "value": "center", "label": "Middle" }, + { "value": "flex-end", "label": "Bottom" } + ] + }, + { + "type": "select", + "id": "text_alignment", + "label": "Text Alignment", + "default": "left", + "options": [ + { "value": "left", "label": "Left" }, + { "value": "center", "label": "Center" }, + { "value": "right", "label": "Right" } + ] + }, + { + "type": "range", + "id": "content_width", + "label": "Content Max Width", + "min": 600, + "max": 1400, + "step": 50, + "default": 800, + "unit": "px" + }, + { + "type": "range", + "id": "heading_size", + "label": "Heading Size", + "min": 4, + "max": 12, + "step": 1, + "default": 7, + "unit": "rem" + } + ], + "blocks": [ + { + "type": "eyebrow", + "name": "Eyebrow Text", + "limit": 1, + "settings": [ + { + "type": "text", + "id": "text", + "label": "Eyebrow Text", + "default": "Guitar Fiend • Gristle King" + } + ] + }, + { + "type": "heading", + "name": "Heading", + "limit": 1, + "settings": [ + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "GREG KOCH" + } + ] + }, + { + "type": "subheading", + "name": "Subheading", + "limit": 1, + "settings": [ + { + "type": "text", + "id": "text", + "label": "Subheading Text", + "default": "Unleashing his own brand of musical mayhem from Milwaukee, WI." + } + ] + }, + { + "type": "buttons", + "name": "Buttons", + "limit": 1, + "settings": [ + { + "type": "text", + "id": "button_label_1", + "label": "Primary Button Label", + "default": "SHOP THE GRISTLE" + }, + { + "type": "url", + "id": "button_link_1", + "label": "Primary Button Link" + }, + { + "type": "text", + "id": "button_label_2", + "label": "Secondary Button Label", + "default": "TOUR DATES" + }, + { + "type": "url", + "id": "button_link_2", + "label": "Secondary Button Link" + } + ] + } + ], + "presets": [ + { + "name": "GK Hero", + "blocks": [ + { "type": "eyebrow" }, + { "type": "heading" }, + { "type": "subheading" }, + { "type": "buttons" } + ] + } + ] +} +{% endschema %} diff --git a/sections/gk-lessons-page.liquid b/sections/gk-lessons-page.liquid new file mode 100644 index 00000000000..a4d34cb64c5 --- /dev/null +++ b/sections/gk-lessons-page.liquid @@ -0,0 +1,405 @@ +{%- style -%} + .gk-lessons { + background-color: {{ section.settings.bg_color }}; + padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px; + } + + .gk-lessons__inner { + max-width: var(--page-width); + margin: 0 auto; + padding: 0 24px; + } + + .gk-lessons__header { + text-align: center; + margin-bottom: 48px; + } + + .gk-lessons__eyebrow { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 3px; + font-size: 0.75rem; + color: #E8690A; + margin-bottom: 12px; + display: block; + } + + .gk-lessons__heading { + font-family: 'Bebas Neue', sans-serif; + font-size: clamp(2.5rem, 6vw, 4.5rem); + color: #E8E8E8; + text-transform: uppercase; + letter-spacing: 2px; + margin: 0 0 12px 0; + } + + .gk-lessons__subtext { + font-family: 'DM Sans', sans-serif; + color: #777777; + font-size: 1.1rem; + max-width: 700px; + margin: 0 auto; + line-height: 1.6; + } + + .gk-lessons__grid { + display: grid; + grid-template-columns: repeat({{ section.settings.columns }}, 1fr); + gap: 32px; + margin-bottom: 48px; + } + + .gk-lessons__card { + background-color: #141414; + border: 1px solid #272727; + overflow: hidden; + transition: all 0.3s ease; + display: flex; + flex-direction: column; + } + + .gk-lessons__card:hover { + border-color: #E8690A; + transform: translateY(-4px); + } + + .gk-lessons__card-image { + width: 100%; + aspect-ratio: 16/9; + overflow: hidden; + } + + .gk-lessons__card-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.5s ease; + } + + .gk-lessons__card:hover .gk-lessons__card-image img { + transform: scale(1.05); + } + + .gk-lessons__card-content { + padding: 28px; + flex: 1; + display: flex; + flex-direction: column; + } + + .gk-lessons__card-label { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.7rem; + color: #E8690A; + margin-bottom: 12px; + display: block; + } + + .gk-lessons__card-title { + font-family: 'Bebas Neue', sans-serif; + font-size: 1.8rem; + color: #E8E8E8; + margin: 0 0 12px 0; + text-transform: uppercase; + letter-spacing: 1px; + } + + .gk-lessons__card-desc { + font-family: 'DM Sans', sans-serif; + color: #777777; + font-size: 0.95rem; + line-height: 1.7; + margin: 0 0 20px 0; + flex: 1; + } + + .gk-lessons__card-price { + font-family: 'Bebas Neue', sans-serif; + font-size: 1.5rem; + color: #E8690A; + margin-bottom: 20px; + } + + .gk-lessons__card-btn { + display: inline-block; + font-family: 'DM Sans', sans-serif; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.8rem; + font-weight: 500; + padding: 12px 28px; + border-radius: 0; + text-decoration: none; + background-color: #E8690A; + color: #FFFFFF; + border: 2px solid #E8690A; + transition: all 0.3s ease; + text-align: center; + align-self: flex-start; + } + + .gk-lessons__card-btn:hover { + background-color: transparent; + color: #E8690A; + } + + /* Feature list within card */ + .gk-lessons__features { + list-style: none; + padding: 0; + margin: 0 0 20px 0; + } + + .gk-lessons__features li { + font-family: 'DM Sans', sans-serif; + color: #E8E8E8; + font-size: 0.9rem; + padding: 6px 0; + border-bottom: 1px solid #272727; + display: flex; + align-items: center; + gap: 8px; + } + + .gk-lessons__features li:last-child { + border-bottom: none; + } + + .gk-lessons__features li::before { + content: "→"; + color: #E8690A; + font-weight: bold; + } + + @media screen and (max-width: 989px) { + .gk-lessons__grid { + grid-template-columns: repeat(2, 1fr); + } + } + + @media screen and (max-width: 749px) { + .gk-lessons__grid { + grid-template-columns: 1fr; + } + } +{%- endstyle -%} + +
+
+
+ {%- if section.settings.eyebrow != blank -%} + {{ section.settings.eyebrow }} + {%- endif -%} + {%- if section.settings.heading != blank -%} +

{{ section.settings.heading }}

+ {%- endif -%} + {%- if section.settings.subtext != blank -%} +

{{ section.settings.subtext }}

+ {%- endif -%} +
+ + {%- if section.blocks.size > 0 -%} +
+ {%- for block in section.blocks -%} +
+ {%- if block.settings.image != blank -%} +
+ {{ block.settings.image | image_url: width: 800 | image_tag: + loading: 'lazy', + sizes: '(max-width: 749px) 100vw, (max-width: 989px) 50vw, 33vw', + widths: '375, 550, 750, 800' + }} +
+ {%- endif -%} +
+ {%- if block.settings.label != blank -%} + {{ block.settings.label }} + {%- endif -%} + {%- if block.settings.title != blank -%} +

{{ block.settings.title }}

+ {%- endif -%} + {%- if block.settings.description != blank -%} +

{{ block.settings.description }}

+ {%- endif -%} + + {%- if block.settings.features != blank -%} +
    + {%- assign features = block.settings.features | split: "|" -%} + {%- for feature in features -%} +
  • {{ feature | strip }}
    • + {%- endfor -%} +
+ {%- endif -%} + + {%- if block.settings.price != blank -%} +
{{ block.settings.price }}
+ {%- endif -%} + + {%- if block.settings.button_label != blank -%} + {{ block.settings.button_label }} + {%- endif -%} +
+
+ {%- endfor -%} +
+ {%- endif -%} +
+
+ +{% schema %} +{ + "name": "GK Lessons Page", + "tag": "section", + "class": "gk-lessons-section", + "settings": [ + { + "type": "color", + "id": "bg_color", + "label": "Background Color", + "default": "#0D0D0D" + }, + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow Text", + "default": "Learn from the Gristleman" + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "LESSONS" + }, + { + "type": "textarea", + "id": "subtext", + "label": "Subtext", + "default": "Level up your playing with virtual lessons, on-demand courses, and deep-dive instructional content from Greg Koch." + }, + { + "type": "select", + "id": "columns", + "label": "Desktop Columns", + "default": "3", + "options": [ + { "value": "2", "label": "2 Columns" }, + { "value": "3", "label": "3 Columns" } + ] + }, + { + "type": "range", + "id": "padding_top", + "label": "Padding Top", + "min": 0, + "max": 100, + "step": 4, + "default": 60, + "unit": "px" + }, + { + "type": "range", + "id": "padding_bottom", + "label": "Padding Bottom", + "min": 0, + "max": 100, + "step": 4, + "default": 60, + "unit": "px" + } + ], + "blocks": [ + { + "type": "lesson_card", + "name": "Lesson Card", + "settings": [ + { + "type": "image_picker", + "id": "image", + "label": "Card Image" + }, + { + "type": "text", + "id": "label", + "label": "Category Label", + "default": "Lessons" + }, + { + "type": "text", + "id": "title", + "label": "Title", + "default": "Virtual Lessons" + }, + { + "type": "textarea", + "id": "description", + "label": "Description", + "default": "One-on-one virtual guitar lessons with Greg Koch." + }, + { + "type": "text", + "id": "features", + "label": "Feature List (pipe-separated)", + "info": "Separate features with | character, e.g. 60 min sessions|All skill levels|Zoom video call", + "default": "60 min sessions|All skill levels|Personalized instruction" + }, + { + "type": "text", + "id": "price", + "label": "Price Display" + }, + { + "type": "text", + "id": "button_label", + "label": "Button Label", + "default": "BOOK NOW" + }, + { + "type": "url", + "id": "button_link", + "label": "Button Link" + } + ] + } + ], + "presets": [ + { + "name": "GK Lessons Page", + "blocks": [ + { + "type": "lesson_card", + "settings": { + "label": "Private", + "title": "Virtual Lessons", + "description": "One-on-one virtual guitar lessons with Greg Koch via Zoom. All skill levels welcome.", + "features": "60 minute sessions|All skill levels|Personalized instruction|Zoom video call", + "button_label": "BOOK A LESSON" + } + }, + { + "type": "lesson_card", + "settings": { + "label": "On Demand", + "title": "On-Demand Courses", + "description": "Self-paced video courses covering technique, tone, and the gristle approach to guitar.", + "features": "Watch at your own pace|HD video lessons|Downloadable tabs|Lifetime access", + "button_label": "BROWSE COURSES" + } + }, + { + "type": "lesson_card", + "settings": { + "label": "TrueFire", + "title": "TrueFire Courses", + "description": "Full-length instructional courses available on the TrueFire platform.", + "features": "Professional production|Interactive tabs|Loop & slow down tools|Mobile app access", + "button_label": "VIEW ON TRUEFIRE" + } + } + ] + } + ] +} +{% endschema %} diff --git a/sections/gk-press-hero.liquid b/sections/gk-press-hero.liquid new file mode 100644 index 00000000000..339e8298799 --- /dev/null +++ b/sections/gk-press-hero.liquid @@ -0,0 +1,476 @@ +{%- style -%} + /* ── GK Press Hero (scoped under .gk-press-hero) ────────── */ + .gk-press-hero { + background-color: #0D0D0D; + padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px; + position: relative; + overflow: hidden; + } + + /* Soft radial glow behind the title area (matches mockup proportions) */ + .gk-press-hero::before { + content: ''; + position: absolute; + top: 4%; + left: 50%; + transform: translateX(-50%); + width: 560px; + height: 320px; + background: radial-gradient(ellipse at center, rgba(200, 96, 26, 0.16) 0%, transparent 65%); + pointer-events: none; + z-index: 0; + } + + /* Bottom hairline fade */ + .gk-press-hero::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(to right, transparent, rgba(200, 96, 26, 0.3), transparent); + z-index: 1; + } + + .gk-press-hero__inner { + max-width: var(--page-width); + margin: 0 auto; + padding: 0 24px; + position: relative; + z-index: 2; + } + + .gk-press-hero__content { + text-align: center; + max-width: 800px; + margin: 0 auto; + } + + /* Kicker - "IN THE PRESS" */ + .gk-press-hero__eyebrow { + display: block; + color: #C8601A; + font-size: 10px; + font-weight: 800; + letter-spacing: 6px; + text-transform: uppercase; + margin-bottom: 18px; + } + + /* Headline - "PRESS & MEDIA" with orange ampersand */ + .gk-press-hero__heading { + font-size: clamp(2.6rem, 8vw, 3.75rem); + font-weight: 900; + color: #FFFFFF; + text-transform: uppercase; + letter-spacing: -2px; + margin: 0 0 4px; + line-height: 0.92; + } + + .gk-press-hero__heading .gk-ph-amp { + color: #C8601A; + } + + /* Divider: hairlines + 45deg diamond */ + .gk-press-hero__divider { + display: flex; + align-items: center; + justify-content: center; + gap: 14px; + margin: 22px auto; + width: auto; + } + + .gk-press-hero__divider-line { + flex: 0 0 80px; + width: 80px; + height: 1px; + background: linear-gradient(to right, transparent, rgba(200, 96, 26, 0.6)); + } + + .gk-press-hero__divider-line:last-child { + background: linear-gradient(to right, rgba(200, 96, 26, 0.6), transparent); + } + + .gk-press-hero__divider-dot { + width: 7px; + height: 7px; + background-color: #C8601A; + transform: rotate(45deg); + flex-shrink: 0; + box-shadow: 0 0 12px rgba(200, 96, 26, 0.85), 0 0 24px rgba(200, 96, 26, 0.35); + } + + /* Lede paragraph (small, mixed-case, matches mockup) */ + .gk-press-hero__subheading { + font-family: 'DM Sans', system-ui, -apple-system, sans-serif; + font-size: 13px; + font-weight: 400; + text-transform: none; + letter-spacing: 0.3px; + color: rgba(255, 255, 255, 0.55); + line-height: 1.7; + margin: 0 auto 28px; + max-width: 560px; + } + + /* Optional second paragraph */ + .gk-press-hero__intro { + font-family: 'DM Sans', system-ui, -apple-system, sans-serif; + font-size: 12px; + font-weight: 400; + text-transform: none; + letter-spacing: 0.3px; + color: rgba(255, 255, 255, 0.38); + line-height: 1.7; + max-width: 520px; + margin: -14px auto 28px; + } + + /* ── Press Kit CTA - uses .button (molten orange from base.css) ── */ + .gk-press-hero__cta { + margin: 0 auto 8px; + } + + /* Press Kit button - exact molten match to the mockup .b3 */ + .gk-press-hero__kit-btn { + position: relative; + display: inline-flex; + align-items: center; + gap: 10px; + overflow: hidden; + text-decoration: none; + border: none !important; + border-radius: 10px; + padding: 15px 30px !important; + min-width: 0; + min-height: 0; + font-weight: 800; + font-size: 12px !important; + letter-spacing: 2.5px !important; + text-transform: uppercase; + color: #1a0e04 !important; + background: linear-gradient(180deg, #f0a85a 0%, #c8601a 60%, #a8490d 100%) !important; + box-shadow: + 0 1px 0 rgba(255, 255, 255, 0.5) inset, + 0 -3px 8px rgba(100, 40, 0, 0.5) inset, + 0 10px 24px -8px rgba(200, 96, 26, 0.75), + 0 3px 6px rgba(0, 0, 0, 0.6) !important; + transition: transform 0.15s ease, filter 0.25s ease; + } + + .gk-press-hero__kit-btn:hover { + transform: translateY(-2px); + filter: brightness(1.04); + } + + .gk-press-hero__kit-btn svg { + width: 14px; + height: 14px; + fill: #1a0e04; + flex-shrink: 0; + position: relative; + z-index: 1; + } + + /* ── Featured In ── */ + .gk-press-hero__featured-in { + margin-top: 52px; + padding-top: 36px; + border-top: 1px solid rgba(255, 255, 255, 0.07); + } + + .gk-press-hero__featured-in-label { + text-transform: uppercase; + letter-spacing: 4px; + font-size: 10px; + font-weight: 700; + color: rgba(255, 255, 255, 0.3); + display: block; + margin-bottom: 20px; + } + + /* Cards grid: 3-up desktop, 2-up tablet/mobile */ + .gk-press-hero__pub-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 12px; + max-width: 680px; + margin: 0 auto; + } + + /* Each publication card */ + .gk-press-hero__pub-card { + position: relative; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); + border: 1px solid rgba(255, 255, 255, 0.09); + border-radius: 10px; + padding: 20px 14px; + text-align: center; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); + text-transform: uppercase; + letter-spacing: 2px; + font-size: 11px; + font-weight: 700; + color: rgba(255, 255, 255, 0.6); + transition: border-color 200ms ease, color 200ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1); + overflow: hidden; + } + + /* Top-edge highlight hairline */ + .gk-press-hero__pub-card::after { + content: ''; + position: absolute; + top: 0; + left: 14%; + right: 14%; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent); + pointer-events: none; + } + + .gk-press-hero__pub-card:hover { + border-color: rgba(200, 96, 26, 0.5); + color: #f0a060; + transform: translateY(-2px); + } + + /* ── Responsive ── */ + @media screen and (max-width: 989px) { + .gk-press-hero::before { + width: 600px; + height: 380px; + } + } + + @media screen and (max-width: 749px) { + .gk-press-hero__heading { + font-size: clamp(2.2rem, 12vw, 3.2rem); + letter-spacing: 1px; + } + .gk-press-hero__pub-grid { + grid-template-columns: repeat(2, 1fr); + } + .gk-press-hero__divider { + width: 200px; + } + } + + /* ── Reduced motion ── */ + @media (prefers-reduced-motion: reduce) { + .gk-press-hero__pub-card:hover { + transform: none; + } + } +{%- endstyle -%} + +
+
+
+ + {%- if section.settings.eyebrow != blank -%} + {{ section.settings.eyebrow | escape }} + {%- endif -%} + + {%- if section.settings.heading != blank -%} + {%- comment -%} Color the literal "&" in the heading orange - escape first, then wrap the entity. {%- endcomment -%} + {%- assign heading_safe = section.settings.heading | escape -%} + {%- assign heading_html = heading_safe | replace: '&', '&' -%} +

{{ heading_html }}

+ {%- endif -%} + + + + {%- if section.settings.subheading != blank -%} +

{{ section.settings.subheading | escape }}

+ {%- endif -%} + + {%- if section.settings.intro_text != blank -%} +

{{ section.settings.intro_text | escape }}

+ {%- endif -%} + + {%- if section.settings.press_kit_url != blank -%} +
+ + + {{ section.settings.press_kit_label | default: 'Download Press Kit' | escape }} + +
+ {%- endif -%} + + {%- if section.settings.show_featured_in -%} + {%- assign has_pubs = false -%} + {%- if section.settings.pub_1 != blank or section.settings.pub_2 != blank or section.settings.pub_3 != blank or section.settings.pub_4 != blank or section.settings.pub_5 != blank or section.settings.pub_6 != blank -%} + {%- assign has_pubs = true -%} + {%- endif -%} + + {%- if has_pubs -%} +
+ Featured In +
+ {%- if section.settings.pub_1 != blank -%} +
{{ section.settings.pub_1 | escape }}
+ {%- endif -%} + {%- if section.settings.pub_2 != blank -%} +
{{ section.settings.pub_2 | escape }}
+ {%- endif -%} + {%- if section.settings.pub_3 != blank -%} +
{{ section.settings.pub_3 | escape }}
+ {%- endif -%} + {%- if section.settings.pub_4 != blank -%} +
{{ section.settings.pub_4 | escape }}
+ {%- endif -%} + {%- if section.settings.pub_5 != blank -%} +
{{ section.settings.pub_5 | escape }}
+ {%- endif -%} + {%- if section.settings.pub_6 != blank -%} +
{{ section.settings.pub_6 | escape }}
+ {%- endif -%} +
+
+ {%- endif -%} + {%- endif -%} + +
+
+
+ +{% schema %} +{ + "name": "GK Press Hero", + "tag": "section", + "class": "gk-press-hero-section", + "settings": [ + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow / Kicker", + "default": "In the Press" + }, + { + "type": "text", + "id": "heading", + "label": "Headline", + "default": "Press & Media", + "info": "The '&' character will automatically render in orange." + }, + { + "type": "textarea", + "id": "subheading", + "label": "Lede Paragraph", + "default": "Greg Koch has been featured in leading guitar publications, interviews, and music media outlets around the world." + }, + { + "type": "textarea", + "id": "intro_text", + "label": "Intro Paragraph (optional)", + "info": "Optional second line of supporting copy beneath the lede." + }, + { + "type": "header", + "content": "Press Kit Download" + }, + { + "type": "url", + "id": "press_kit_url", + "label": "Press Kit File URL", + "info": "Upload your press kit PDF to Files in Shopify admin, then paste the URL here. Leave blank to hide the button." + }, + { + "type": "text", + "id": "press_kit_label", + "label": "Button Label", + "default": "Download Press Kit" + }, + { + "type": "header", + "content": "Featured In" + }, + { + "type": "checkbox", + "id": "show_featured_in", + "label": "Show Featured In", + "default": true + }, + { + "type": "text", + "id": "pub_1", + "label": "Publication 1", + "default": "Relix" + }, + { + "type": "text", + "id": "pub_2", + "label": "Publication 2", + "default": "Vintage Guitar" + }, + { + "type": "text", + "id": "pub_3", + "label": "Publication 3", + "default": "Guitar Player" + }, + { + "type": "text", + "id": "pub_4", + "label": "Publication 4", + "default": "Premier Guitar" + }, + { + "type": "text", + "id": "pub_5", + "label": "Publication 5", + "default": "Guitar World" + }, + { + "type": "text", + "id": "pub_6", + "label": "Publication 6", + "default": "Palm Beach Arts" + }, + { + "type": "header", + "content": "Spacing" + }, + { + "type": "range", + "id": "padding_top", + "label": "Padding Top", + "min": 40, + "max": 160, + "step": 8, + "default": 96, + "unit": "px" + }, + { + "type": "range", + "id": "padding_bottom", + "label": "Padding Bottom", + "min": 40, + "max": 160, + "step": 8, + "default": 96, + "unit": "px" + } + ], + "presets": [ + { + "name": "GK Press Hero" + } + ] +} +{% endschema %} diff --git a/sections/gk-press-media.liquid b/sections/gk-press-media.liquid new file mode 100644 index 00000000000..480a7655fa0 --- /dev/null +++ b/sections/gk-press-media.liquid @@ -0,0 +1,417 @@ +{%- style -%} + .gk-press-media { + background-color: #0D0D0D; + padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px; + } + + .gk-press-media__inner { + max-width: var(--page-width); + margin: 0 auto; + padding: 0 24px; + } + + /* ── Shared section header ── */ + .gk-press-media__section-eyebrow { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 3px; + font-size: 0.72rem; + color: #E8690A; + margin-bottom: 12px; + display: block; + } + + .gk-press-media__section-heading { + font-family: 'Bebas Neue', sans-serif; + font-size: clamp(1.8rem, 4vw, 2.8rem); + color: #E8E8E8; + text-transform: uppercase; + letter-spacing: 2px; + margin: 0 0 14px 0; + line-height: 1; + } + + .gk-press-media__section-desc { + font-family: 'DM Sans', sans-serif; + color: #777777; + font-size: 1rem; + line-height: 1.72; + max-width: 700px; + margin: 0; + } + + /* ── Video block ── */ + .gk-press-media__video-wrap { + margin-bottom: {{ section.settings.section_gap }}px; + } + + .gk-press-media__video-header { + margin-bottom: 28px; + } + + .gk-press-media__video-container { + position: relative; + width: 100%; + padding-bottom: 56.25%; + background-color: #111111; + border: 1px solid #272727; + overflow: hidden; + } + + .gk-press-media__video-container iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; + display: block; + } + + /* ── Divider between video and articles ── */ + .gk-press-media__section-divider { + height: 1px; + background: linear-gradient(to right, transparent, #272727, transparent); + margin-bottom: {{ section.settings.section_gap }}px; + } + + /* ── Articles header ── */ + .gk-press-media__articles-header { + margin-bottom: 32px; + } + + /* ── Article grid ── */ + .gk-press-media__grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; + } + + .gk-press-media__card { + background-color: #141414; + border: 1px solid #272727; + padding: 32px; + display: flex; + flex-direction: column; + text-decoration: none; + transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; + position: relative; + } + + .gk-press-media__card::before { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(135deg, rgba(232, 105, 10, 0.03) 0%, transparent 60%); + opacity: 0; + transition: opacity 150ms ease; + pointer-events: none; + } + + .gk-press-media__card:hover { + border-color: rgba(232, 105, 10, 0.5); + box-shadow: 0 8px 32px rgba(232, 105, 10, 0.10), 0 2px 8px rgba(0, 0, 0, 0.4); + transform: translateY(-2px); + } + + .gk-press-media__card:hover::before { + opacity: 1; + } + + .gk-press-media__card-pub { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.75rem; + color: #E8690A; + margin-bottom: 14px; + display: block; + } + + .gk-press-media__card-title { + font-family: 'Bebas Neue', sans-serif; + font-size: 1.5rem; + color: #E8E8E8; + letter-spacing: 1px; + line-height: 1.2; + margin: 0 0 14px 0; + } + + .gk-press-media__card-desc { + font-family: 'DM Sans', sans-serif; + color: #777777; + font-size: 1rem; + line-height: 1.68; + margin: 0; + flex: 1; + } + + .gk-press-media__card-cta { + font-family: 'DM Sans', sans-serif; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.78rem; + font-weight: 500; + color: #E8690A; + text-decoration: none; + border-bottom: 1px solid transparent; + transition: border-color 150ms ease; + display: inline-block; + margin-top: 24px; + } + + .gk-press-media__card:hover .gk-press-media__card-cta { + border-bottom-color: #E8690A; + } + + @media screen and (max-width: 989px) { + .gk-press-media__grid { + grid-template-columns: repeat(2, 1fr); + } + } + + @media screen and (max-width: 749px) { + .gk-press-media__grid { + grid-template-columns: 1fr; + } + + .gk-press-media__card { + padding: 24px; + } + } +{%- endstyle -%} + +{%- liquid + assign video_url = section.settings.video_url + if video_url contains 'youtu.be/' + assign video_id = video_url | split: 'youtu.be/' | last | split: '?' | first + elsif video_url contains 'v=' + assign video_id = video_url | split: 'v=' | last | split: '&' | first + else + assign video_id = video_url + endif +-%} + +
+
+ + {%- if video_id != blank -%} +
+
+ {%- if section.settings.video_eyebrow != blank -%} + {{ section.settings.video_eyebrow }} + {%- endif -%} + {%- if section.settings.video_heading != blank -%} +

{{ section.settings.video_heading }}

+ {%- endif -%} + {%- if section.settings.video_description != blank -%} +

{{ section.settings.video_description }}

+ {%- endif -%} +
+
+ +
+
+ {%- endif -%} + + {%- if section.blocks.size > 0 -%} + {%- if video_id != blank -%} +
+ {%- endif -%} + +
+ {%- if section.settings.articles_eyebrow != blank -%} + {{ section.settings.articles_eyebrow }} + {%- endif -%} + {%- if section.settings.articles_heading != blank -%} +

{{ section.settings.articles_heading }}

+ {%- endif -%} +
+ +
+ {%- for block in section.blocks -%} + {%- if block.type == 'article_card' -%} + + {%- if block.settings.publication != blank -%} + {{ block.settings.publication }} + {%- endif -%} + {%- if block.settings.title != blank -%} +

{{ block.settings.title }}

+ {%- endif -%} + {%- if block.settings.description != blank -%} +

{{ block.settings.description }}

+ {%- endif -%} + Read Article → + + {%- endif -%} + {%- endfor -%} +
+ {%- endif -%} + +
+
+ +{% schema %} +{ + "name": "GK Press Media", + "tag": "section", + "class": "gk-press-media-section", + "settings": [ + { + "type": "header", + "content": "Featured Video" + }, + { + "type": "text", + "id": "video_eyebrow", + "label": "Video Eyebrow", + "default": "Featured Interview" + }, + { + "type": "text", + "id": "video_heading", + "label": "Video Heading", + "default": "Greg Koch Interview with Rick Beato" + }, + { + "type": "textarea", + "id": "video_description", + "label": "Video Description", + "default": "Legendary guitar educator and YouTube creator Rick Beato sits down with Greg Koch for a wide-ranging conversation about tone, technique, and the pursuit of musical truth." + }, + { + "type": "text", + "id": "video_url", + "label": "YouTube Video URL", + "default": "https://www.youtube.com/watch?v=oLOg9ZLiHtg", + "info": "Paste the full YouTube URL (e.g. https://www.youtube.com/watch?v=...). Leave blank to hide the video block." + }, + { + "type": "header", + "content": "Article Grid" + }, + { + "type": "text", + "id": "articles_eyebrow", + "label": "Articles Eyebrow", + "default": "In the Press" + }, + { + "type": "text", + "id": "articles_heading", + "label": "Articles Heading", + "default": "Featured Coverage" + }, + { + "type": "header", + "content": "Spacing" + }, + { + "type": "range", + "id": "section_gap", + "label": "Gap Between Video & Articles", + "min": 32, + "max": 120, + "step": 8, + "default": 64, + "unit": "px" + }, + { + "type": "range", + "id": "padding_top", + "label": "Padding Top", + "min": 0, + "max": 120, + "step": 8, + "default": 64, + "unit": "px" + }, + { + "type": "range", + "id": "padding_bottom", + "label": "Padding Bottom", + "min": 0, + "max": 120, + "step": 8, + "default": 64, + "unit": "px" + } + ], + "blocks": [ + { + "type": "article_card", + "name": "Article Card", + "settings": [ + { + "type": "text", + "id": "publication", + "label": "Publication Name", + "default": "Publication Name" + }, + { + "type": "text", + "id": "title", + "label": "Article Title", + "default": "Article Title" + }, + { + "type": "textarea", + "id": "description", + "label": "Short Description", + "default": "A brief description of the article and what makes it worth reading." + }, + { + "type": "url", + "id": "url", + "label": "Article URL" + } + ] + } + ], + "presets": [ + { + "name": "GK Press Media", + "blocks": [ + { + "type": "article_card", + "settings": { + "publication": "Relix Magazine", + "title": "All Blues: Greg Koch Connects with Devon Allman and Revisits His Record Collection", + "description": "A deep dive into Greg Koch's influences, record collection, and connection with Devon Allman.", + "url": "https://relix.com/articles/detail/all-blues-greg-koch-connects-with-devon-allman-and-revisits-his-record-collection/" + } + }, + { + "type": "article_card", + "settings": { + "publication": "Vintage Guitar Magazine", + "title": "Greg Koch Feature Interview", + "description": "Vintage Guitar Magazine explores Greg Koch's career, tone philosophy, and unique playing style.", + "url": "https://www.vintageguitar.com/88432/greg-koch-3/" + } + }, + { + "type": "article_card", + "settings": { + "publication": "Palm Beach Arts Paper", + "title": "The Best Guitarist Working Today? That Might Be Greg Koch", + "description": "A feature exploring Greg Koch's reputation as one of the most dynamic guitarists performing today.", + "url": "https://palmbeachartspaper.com/the-best-guitarist-working-today-that-might-be-greg-koch/" + } + } + ] + } + ] +} +{% endschema %} diff --git a/sections/gk-press-page.liquid b/sections/gk-press-page.liquid new file mode 100644 index 00000000000..fc16f845f0f --- /dev/null +++ b/sections/gk-press-page.liquid @@ -0,0 +1,360 @@ +{%- style -%} + .gk-press { + background-color: {{ section.settings.bg_color }}; + padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px; + } + + .gk-press__inner { + max-width: var(--page-width); + margin: 0 auto; + padding: 0 24px; + } + + .gk-press__header { + text-align: center; + margin-bottom: 48px; + } + + .gk-press__eyebrow { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 3px; + font-size: 0.75rem; + color: #E8690A; + margin-bottom: 12px; + display: block; + } + + .gk-press__heading { + font-family: 'Bebas Neue', sans-serif; + font-size: clamp(2.5rem, 6vw, 4.5rem); + color: #E8E8E8; + text-transform: uppercase; + letter-spacing: 2px; + margin: 0 0 12px 0; + } + + .gk-press__subtext { + font-family: 'DM Sans', sans-serif; + color: #777777; + font-size: 1.1rem; + max-width: 600px; + margin: 0 auto; + line-height: 1.6; + } + + .gk-press__grid { + display: grid; + grid-template-columns: repeat({{ section.settings.columns }}, 1fr); + gap: 24px; + } + + .gk-press__card { + background-color: #141414; + border: 1px solid #272727; + padding: 32px; + display: flex; + flex-direction: column; + transition: all 0.3s ease; + } + + .gk-press__card:hover { + border-color: #E8690A; + } + + .gk-press__quote { + font-family: 'DM Sans', sans-serif; + font-size: 1.05rem; + font-style: italic; + color: #E8E8E8; + line-height: 1.7; + margin: 0 0 20px 0; + flex: 1; + position: relative; + padding-left: 20px; + border-left: 3px solid #E8690A; + } + + .gk-press__source { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.7rem; + color: #E8690A; + margin-bottom: 4px; + display: block; + } + + .gk-press__author { + font-family: 'DM Sans', sans-serif; + color: #777777; + font-size: 0.85rem; + } + + .gk-press__card-link { + display: inline-block; + font-family: 'DM Sans', sans-serif; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.7rem; + font-weight: 500; + color: #E8690A; + text-decoration: none; + margin-top: 16px; + border-bottom: 1px solid transparent; + transition: border-color 0.3s ease; + } + + .gk-press__card-link:hover { + border-bottom-color: #E8690A; + } + + /* Featured press - large quote */ + .gk-press__featured { + grid-column: 1 / -1; + text-align: center; + padding: 60px 48px; + background-color: #141414; + border: 1px solid #272727; + margin-bottom: 24px; + } + + .gk-press__featured .gk-press__quote { + border-left: none; + padding-left: 0; + font-size: 1.4rem; + max-width: 800px; + margin: 0 auto 24px; + } + + .gk-press__featured .gk-press__quote::before { + content: """; + font-family: 'Bebas Neue', sans-serif; + font-size: 4rem; + color: #E8690A; + display: block; + line-height: 1; + margin-bottom: 12px; + font-style: normal; + } + + @media screen and (max-width: 989px) { + .gk-press__grid { + grid-template-columns: repeat(2, 1fr); + } + } + + @media screen and (max-width: 749px) { + .gk-press__grid { + grid-template-columns: 1fr; + } + + .gk-press__featured { + padding: 40px 24px; + } + } +{%- endstyle -%} + +
+
+
+ {%- if section.settings.eyebrow != blank -%} + {{ section.settings.eyebrow }} + {%- endif -%} + {%- if section.settings.heading != blank -%} +

{{ section.settings.heading }}

+ {%- endif -%} + {%- if section.settings.subtext != blank -%} +

{{ section.settings.subtext }}

+ {%- endif -%} +
+ + {%- if section.blocks.size > 0 -%} +
+ {%- for block in section.blocks -%} + {%- if block.type == 'featured_quote' -%} +
+ {%- if block.settings.quote != blank -%} +
{{ block.settings.quote }}
+ {%- endif -%} + {%- if block.settings.source != blank -%} + {{ block.settings.source }} + {%- endif -%} + {%- if block.settings.author != blank -%} + {{ block.settings.author }} + {%- endif -%} +
+ {%- elsif block.type == 'press_quote' -%} +
+ {%- if block.settings.quote != blank -%} +
{{ block.settings.quote }}
+ {%- endif -%} + {%- if block.settings.source != blank -%} + {{ block.settings.source }} + {%- endif -%} + {%- if block.settings.author != blank -%} + {{ block.settings.author }} + {%- endif -%} + {%- if block.settings.link != blank -%} + READ ARTICLE → + {%- endif -%} +
+ {%- endif -%} + {%- endfor -%} +
+ {%- endif -%} +
+
+ +{% schema %} +{ + "name": "GK Press Page", + "tag": "section", + "class": "gk-press-section", + "settings": [ + { + "type": "color", + "id": "bg_color", + "label": "Background Color", + "default": "#0D0D0D" + }, + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow Text", + "default": "In the Press" + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "PRESS" + }, + { + "type": "textarea", + "id": "subtext", + "label": "Subtext", + "default": "What they're saying about the Gristleman." + }, + { + "type": "select", + "id": "columns", + "label": "Desktop Columns", + "default": "3", + "options": [ + { "value": "2", "label": "2 Columns" }, + { "value": "3", "label": "3 Columns" } + ] + }, + { + "type": "range", + "id": "padding_top", + "label": "Padding Top", + "min": 0, + "max": 100, + "step": 4, + "default": 60, + "unit": "px" + }, + { + "type": "range", + "id": "padding_bottom", + "label": "Padding Bottom", + "min": 0, + "max": 100, + "step": 4, + "default": 60, + "unit": "px" + } + ], + "blocks": [ + { + "type": "featured_quote", + "name": "Featured Quote", + "limit": 1, + "settings": [ + { + "type": "textarea", + "id": "quote", + "label": "Quote Text", + "default": "Greg Koch is one of the most creative and entertaining guitarists on the planet." + }, + { + "type": "text", + "id": "source", + "label": "Publication / Source", + "default": "Guitar Player Magazine" + }, + { + "type": "text", + "id": "author", + "label": "Author (optional)" + } + ] + }, + { + "type": "press_quote", + "name": "Press Quote", + "settings": [ + { + "type": "textarea", + "id": "quote", + "label": "Quote Text", + "default": "A remarkable display of technique and feel." + }, + { + "type": "text", + "id": "source", + "label": "Publication / Source", + "default": "Premier Guitar" + }, + { + "type": "text", + "id": "author", + "label": "Author (optional)" + }, + { + "type": "url", + "id": "link", + "label": "Article Link" + } + ] + } + ], + "presets": [ + { + "name": "GK Press Page", + "blocks": [ + { + "type": "featured_quote", + "settings": { + "quote": "Greg Koch is one of the most creative and entertaining guitarists on the planet.", + "source": "Guitar Player Magazine" + } + }, + { + "type": "press_quote", + "settings": { + "quote": "A remarkable display of technique and feel that is entirely his own.", + "source": "Premier Guitar" + } + }, + { + "type": "press_quote", + "settings": { + "quote": "Koch channels the spirit of Hendrix, SRV, and Danny Gatton through his own unique lens.", + "source": "Vintage Guitar Magazine" + } + }, + { + "type": "press_quote", + "settings": { + "quote": "Milwaukee's best-kept secret, unleashing gristle on an unsuspecting world.", + "source": "Guitar World" + } + } + ] + } + ] +} +{% endschema %} diff --git a/sections/gk-press-quotes.liquid b/sections/gk-press-quotes.liquid new file mode 100644 index 00000000000..a91be505544 --- /dev/null +++ b/sections/gk-press-quotes.liquid @@ -0,0 +1,328 @@ +{%- style -%} + .gk-press-quotes { + background-color: #0D0D0D; + padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px; + position: relative; + overflow: hidden; + } + + .gk-press-quotes::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 700px; + height: 400px; + background: radial-gradient(ellipse at center, rgba(232, 105, 10, 0.04) 0%, transparent 70%); + pointer-events: none; + z-index: 0; + } + + .gk-press-quotes__inner { + max-width: var(--page-width); + margin: 0 auto; + padding: 0 24px; + position: relative; + z-index: 1; + } + + /* ── Section header ── */ + .gk-press-quotes__header { + text-align: center; + margin-bottom: 64px; + } + + .gk-press-quotes__eyebrow { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 4px; + font-size: 0.82rem; + color: #E8690A; + margin-bottom: 16px; + display: block; + } + + .gk-press-quotes__heading { + font-family: 'Bebas Neue', sans-serif; + font-size: clamp(2rem, 5vw, 3.2rem); + color: #E8E8E8; + text-transform: uppercase; + letter-spacing: 3px; + margin: 0; + line-height: 1; + } + + /* ── Quote list ── */ + .gk-press-quotes__list { + display: flex; + flex-direction: column; + gap: 0; + max-width: 900px; + margin: 0 auto; + } + + /* ── Individual quote block ── */ + .gk-press-quotes__item { + padding: 52px 48px; + text-align: center; + position: relative; + border-bottom: 1px solid #1C1C1C; + transition: background-color 150ms ease; + } + + .gk-press-quotes__item:first-child { + border-top: 1px solid #1C1C1C; + } + + .gk-press-quotes__item:hover { + background-color: rgba(232, 105, 10, 0.02); + } + + /* Large decorative quote mark */ + .gk-press-quotes__mark { + font-family: 'Bebas Neue', sans-serif; + font-size: 3.5rem; + color: #E8690A; + line-height: 1; + display: block; + margin-bottom: 4px; + text-shadow: 0 0 20px rgba(232, 105, 10, 0.35); + font-style: normal; + user-select: none; + } + + /* Quote text */ + .gk-press-quotes__text { + font-family: 'DM Sans', sans-serif; + font-size: clamp(1.25rem, 2.5vw, 1.7rem); + font-style: italic; + color: #E8E8E8; + line-height: 1.55; + margin: 0 0 28px 0; + letter-spacing: 0.01em; + } + + .gk-press-quotes__item--emphasis .gk-press-quotes__text { + font-size: clamp(1.45rem, 3vw, 2rem); + color: #F0F0F0; + } + + /* Orange accent rule */ + .gk-press-quotes__rule { + width: 40px; + height: 2px; + background-color: #E8690A; + margin: 0 auto 20px; + box-shadow: 0 0 8px rgba(232, 105, 10, 0.5); + } + + /* Attribution */ + .gk-press-quotes__attribution { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + } + + .gk-press-quotes__author { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 3px; + font-size: 0.8rem; + color: #E8690A; + display: block; + } + + .gk-press-quotes__source { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.7rem; + color: #555555; + display: block; + } + + @media screen and (max-width: 749px) { + .gk-press-quotes__item { + padding: 40px 24px; + } + + .gk-press-quotes__text { + font-size: clamp(1.1rem, 5vw, 1.4rem); + } + + .gk-press-quotes__item--emphasis .gk-press-quotes__text { + font-size: clamp(1.2rem, 5.5vw, 1.55rem); + } + + .gk-press-quotes__mark { + font-size: 2.8rem; + } + } +{%- endstyle -%} + +
+
+ + {%- if section.settings.show_header and section.settings.heading != blank -%} +
+ {%- if section.settings.eyebrow != blank -%} + {{ section.settings.eyebrow }} + {%- endif -%} +

{{ section.settings.heading }}

+
+ {%- endif -%} + + {%- if section.blocks.size > 0 -%} +
+ {%- for block in section.blocks -%} + {%- if block.type == 'quote_block' -%} +
+ + + + {%- if block.settings.quote != blank -%} +
+ {{ block.settings.quote }} +
+ {%- endif -%} + +
+ +
+ {%- if block.settings.attribution != blank -%} + {{ block.settings.attribution }} + {%- endif -%} + {%- if block.settings.source != blank -%} + {{ block.settings.source }} + {%- endif -%} +
+ +
+ {%- endif -%} + {%- endfor -%} +
+ {%- endif -%} + +
+
+ +{% schema %} +{ + "name": "GK Press Quotes", + "tag": "section", + "class": "gk-press-quotes-section", + "settings": [ + { + "type": "checkbox", + "id": "show_header", + "label": "Show Section Header", + "default": true + }, + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow Text", + "default": "What They're Saying" + }, + { + "type": "text", + "id": "heading", + "label": "Section Heading", + "default": "Press Praise" + }, + { + "type": "header", + "content": "Spacing" + }, + { + "type": "range", + "id": "padding_top", + "label": "Padding Top", + "min": 0, + "max": 120, + "step": 8, + "default": 64, + "unit": "px" + }, + { + "type": "range", + "id": "padding_bottom", + "label": "Padding Bottom", + "min": 0, + "max": 120, + "step": 8, + "default": 64, + "unit": "px" + } + ], + "blocks": [ + { + "type": "quote_block", + "name": "Press Quote", + "settings": [ + { + "type": "textarea", + "id": "quote", + "label": "Quote Text", + "default": "Enter quote text here.", + "info": "The spoken or published quote — do not include quotation marks." + }, + { + "type": "text", + "id": "attribution", + "label": "Attribution (publication or person)", + "default": "Publication Name" + }, + { + "type": "text", + "id": "source", + "label": "Source Label (optional)", + "info": "Optional secondary line below attribution — e.g. an article title or date." + }, + { + "type": "checkbox", + "id": "emphasis", + "label": "Emphasis (larger text)", + "default": false, + "info": "Makes this quote slightly larger — useful for a standout or hero quote." + } + ] + } + ], + "presets": [ + { + "name": "GK Press Quotes", + "blocks": [ + { + "type": "quote_block", + "settings": { + "quote": "The best guitarist working today.", + "attribution": "Palm Beach Arts Paper", + "emphasis": true + } + }, + { + "type": "quote_block", + "settings": { + "quote": "A master of tone, groove, and musical personality.", + "attribution": "Vintage Guitar Magazine", + "emphasis": false + } + }, + { + "type": "quote_block", + "settings": { + "quote": "Add Joe Bonamassa quote here — enter the approved wording in the theme editor.", + "attribution": "Joe Bonamassa", + "emphasis": false + } + } + ] + } + ] +} +{% endschema %} diff --git a/sections/gk-shop-categories.liquid b/sections/gk-shop-categories.liquid new file mode 100644 index 00000000000..5b07760618b --- /dev/null +++ b/sections/gk-shop-categories.liquid @@ -0,0 +1,882 @@ +{% comment %} + GK Shop Categories (Shop Landing Section) — Premium animated rebuild + - Glassmorphism cards on near-black, single burnt-orange accent (#C8601A) + - Animated inline SVG icon per category (CSS only, GPU friendly) + - Staggered fade-up on load, resting "breathing" glow, rich hover state + - Live item count from the linked collection (hidden gracefully when none) + - Repeatable blocks: collection, title, description, icon, featured + - All motion respects prefers-reduced-motion + - Scoped CSS only (prefix: .gk-shop) so nothing leaks into other Dawn sections + + AUTO-SCROLL (preserved): + - If a collection URL ends with #products we smooth-scroll to the product grid. + - Example: /collections/cds#products +{% endcomment %} + +{%- assign accent = '#C8601A' -%} + +
+
+
+ {% if section.settings.kicker != blank %} +
{{ section.settings.kicker | escape }}
+ {% endif %} + + {% if section.settings.heading != blank %} +

{{ section.settings.heading | escape }}

+ {% endif %} + + {% if section.settings.subheading != blank %} +
{{ section.settings.subheading }}
+ {% endif %} +
+ + {%- comment -%} + Count UNIQUE category blocks (by title, falling back to collection handle) + so the row divider lands correctly and a duplicate tile can never inflate + the layout into an orphan wrap. + {%- endcomment -%} + {%- assign cat_total = 0 -%} + {%- assign seen_count = '' -%} + {%- for block in section.blocks -%} + {%- if block.type == 'category' -%} + {%- assign ckey = block.settings.title | default: '' | downcase | strip -%} + {%- if ckey == blank and block.settings.collection != blank -%}{%- assign ckey = block.settings.collection.handle -%}{%- endif -%} + {%- assign ckey = '[' | append: ckey | append: ']' -%} + {%- unless seen_count contains ckey -%} + {%- assign cat_total = cat_total | plus: 1 -%} + {%- assign seen_count = seen_count | append: ckey -%} + {%- endunless -%} + {%- endif -%} + {%- endfor -%} + +
+ {%- assign rendered = 0 -%} + {%- assign seen = '' -%} + + {% for block in section.blocks %} + {% if block.type == 'category' %} + {%- comment -%} Skip a tile whose title (or collection) already rendered. {%- endcomment -%} + {%- assign dkey = block.settings.title | default: '' | downcase | strip -%} + {%- if dkey == blank and block.settings.collection != blank -%}{%- assign dkey = block.settings.collection.handle -%}{%- endif -%} + {%- assign dkey = '[' | append: dkey | append: ']' -%} + {%- if seen contains dkey -%}{%- continue -%}{%- endif -%} + {%- assign seen = seen | append: dkey -%} + + {%- assign rendered = rendered | plus: 1 -%} + {%- assign col = block.settings.collection -%} + {%- if col != blank -%} + {%- assign card_url = col.url | append: '#products' -%} + {%- else -%} + {%- assign card_url = '#' -%} + {%- endif -%} + + {%- comment -%} Wider cards on the second row (cards 5+). {%- endcomment -%} + {%- assign card_mod = '' -%} + {%- if rendered > 4 -%}{%- assign card_mod = 'gk-shop__card--wide' -%}{%- endif -%} + + + {% if block.settings.featured %} + + {% endif %} + +
+ + +
+ {{ block.settings.title | escape }} + {% if col != blank %} + {{ col.products_count }} items + {% endif %} +
+ + {%- comment -%} Use the block description, or fall back by icon so it is never blank. {%- endcomment -%} + {%- assign desc = block.settings.description -%} + {%- if desc == blank -%} + {%- case icon_key -%} + {%- when 'new' -%}{%- assign desc = 'Latest drops and fresh arrivals.' -%} + {%- when 'cds' -%}{%- assign desc = 'Studio albums and live records.' -%} + {%- when 'vinyl' -%}{%- assign desc = 'Wax. Analog. Real.' -%} + {%- when 'merch' -%}{%- assign desc = 'Wear the gristle.' -%} + {%- when 'gear' -%}{%- assign desc = 'Pickups, pedals, tone tools.' -%} + {%- when 'books' -%}{%- assign desc = 'Learn from the Gristleman.' -%} + {%- when 'dvds' -%}{%- assign desc = 'Classic guitar instruction.' -%} + {%- endcase -%} + {%- endif -%} + {% if desc != blank %} +

{{ desc | escape }}

+ {% endif %} +
+ +
+ + Explore + +
+ + + {%- if rendered == 4 and cat_total > 4 -%} + + {%- endif -%} + {% endif %} + {% endfor %} + + {% if cat_total == 0 %} +
+
No categories assigned yet.
+
+ Open Theme Editor, then GK Shop Categories, and add category blocks with a collection for each tile. +
+
+ {% endif %} +
+
+ + {% style %} + /* ========================================================= + GK SHOP CATEGORIES (fully scoped under .gk-shop) + Single accent: {{ accent }} + ========================================================= */ + .gk-shop { + --gk-accent: {{ accent }}; + --gk-accent-soft: rgba(200, 96, 26, 0.6); + --gk-accent-glow: rgba(200, 96, 26, 0.28); + --gk-hi: #f0a060; + --gk-card: rgba(255, 255, 255, 0.038); + --gk-card-line: rgba(255, 255, 255, 0.08); + position: relative; + padding: clamp(44px, 6vw, 84px) 0; + background: transparent; + color: #f4f4f5; + } + + .gk-shop__wrap { + width: min(1200px, calc(100% - 48px)); + margin: 0 auto; + } + + .gk-shop__hero { + margin-bottom: clamp(26px, 3.4vw, 44px); + } + + .gk-shop__kicker { + letter-spacing: 0.18em; + text-transform: uppercase; + font-size: 12px; + font-weight: 800; + color: var(--gk-accent); + margin-bottom: 12px; + } + + .gk-shop__heading { + margin: 0; + line-height: 0.95; + font-weight: 900; + letter-spacing: -0.02em; + text-transform: uppercase; + font-size: clamp(44px, 8vw, 86px); + } + + .gk-shop__subheading { + margin-top: 14px; + max-width: 60ch; + opacity: 0.82; + font-size: 16px; + line-height: 1.55; + } + + .gk-shop__grid { + display: grid; + gap: 18px; + grid-template-columns: repeat(12, 1fr); + align-items: stretch; + } + + /* Row divider (full width thin gradient line between the two rows) */ + .gk-shop__divider { + grid-column: 1 / -1; + height: 1px; + margin: 6px 0; + background: linear-gradient( + 90deg, + transparent, + rgba(200, 96, 26, 0.55) 22%, + rgba(240, 160, 96, 0.65) 50%, + rgba(200, 96, 26, 0.55) 78%, + transparent + ); + opacity: 0.7; + } + + /* ---- Card ---- */ + .gk-shop__card { + grid-column: span 3; /* 4-up on desktop */ + position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; + min-height: 230px; + border-radius: 12px; + padding: 20px 20px 18px; + text-decoration: none; + color: inherit; + isolation: isolate; + overflow: hidden; + + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 22%), + rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.12); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + box-shadow: + 0 10px 30px -12px rgba(0, 0, 0, 0.8), + inset 0 1px 0 rgba(255, 255, 255, 0.07); + + transition: + transform 220ms cubic-bezier(0.22, 1, 0.36, 1), + border-color 220ms ease, + box-shadow 220ms ease; + will-change: transform; + + /* load-in */ + opacity: 0; + transform: translateY(16px); + animation: gk-fadeUp 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards; + animation-delay: var(--gk-delay, 0ms); + } + + .gk-shop__card--wide { + grid-column: span 4; /* 3-up second row */ + } + + /* Corner orange glow that sweeps in from top-left on hover */ + .gk-shop__card::before { + content: ""; + position: absolute; + inset: 0; + z-index: -1; + background: radial-gradient( + 420px 260px at 0% 0%, + var(--gk-accent-glow), + transparent 60% + ); + opacity: 0; + transform: translate(-12px, -12px); + transition: opacity 260ms ease, transform 260ms ease; + pointer-events: none; + } + + /* Crisp highlight line across the top edge for resting depth */ + .gk-shop__card::after { + content: ""; + position: absolute; + top: 0; + left: 14%; + right: 14%; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); + pointer-events: none; + } + + .gk-shop__card.is-featured { + border-top: 2px solid var(--gk-accent); + } + + .gk-shop__badge { + position: absolute; + top: 12px; + right: 12px; + z-index: 2; + font-size: 10px; + font-weight: 900; + letter-spacing: 0.12em; + text-transform: uppercase; + color: #120a04; + background: var(--gk-accent); + padding: 4px 8px; + border-radius: 999px; + box-shadow: 0 0 16px rgba(200, 96, 26, 0.5); + } + + /* ---- Icon tile ---- */ + .gk-shop__iconTile { + position: relative; + width: 56px; + height: 56px; + border-radius: 12px; + display: grid; + place-items: center; + margin-bottom: 16px; + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--gk-card-line); + overflow: hidden; + color: var(--gk-accent); + } + + /* breathing glow behind the icon (alive at rest) */ + .gk-shop__iconGlow { + position: absolute; + inset: 0; + border-radius: inherit; + background: radial-gradient(circle at 50% 50%, var(--gk-accent-glow), transparent 68%); + opacity: 0.45; /* always-on warm anchor, even at rest / reduced motion */ + transform: scale(0.85); + animation: gk-breathe 4s ease-in-out infinite; + transition: filter 220ms ease; + pointer-events: none; + } + + /* hover raises the icon glow (filter is not animated, so it always applies) */ + .gk-shop__card:hover .gk-shop__iconGlow { + filter: brightness(1.7) saturate(1.15); + } + + /* light sheen wipe across the tile on hover */ + .gk-shop__sheen { + position: absolute; + top: 0; + left: -120%; + width: 80%; + height: 100%; + background: linear-gradient( + 100deg, + transparent, + rgba(255, 255, 255, 0.22), + transparent + ); + transform: skewX(-18deg); + pointer-events: none; + } + + .gk-shop__iconTile svg { + position: relative; + width: 30px; + height: 30px; + overflow: visible; + } + + /* ---- Title row + count ---- */ + .gk-shop__titleRow { + display: flex; + align-items: baseline; + justify-content: space-between; + gap: 10px; + } + + .gk-shop__title { + font-weight: 900; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 17px; + line-height: 1.1; + } + + .gk-shop__count { + flex: 0 0 auto; + font-size: 11px; + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--gk-hi); + opacity: 0.85; + white-space: nowrap; + } + + .gk-shop__desc { + margin: 10px 0 0; + opacity: 0.7; + font-size: 13px; + line-height: 1.5; + } + + /* ---- CTA ---- */ + .gk-shop__cta { + margin-top: 18px; + display: flex; + align-items: center; + gap: 10px; + padding-top: 14px; + border-top: 1px solid var(--gk-card-line); + } + + .gk-shop__pip { + width: 8px; + height: 8px; + border-radius: 999px; + background: var(--gk-accent); + box-shadow: 0 0 16px rgba(200, 96, 26, 0.6); + flex: 0 0 auto; + transition: transform 220ms ease; + } + + .gk-shop__ctaText { + font-size: 12px; + letter-spacing: 0.12em; + text-transform: uppercase; + font-weight: 800; + } + + .gk-shop__arrow { + margin-left: auto; + display: inline-flex; + color: var(--gk-accent); + transform: translateX(0); + transition: transform 220ms ease; + } + + /* ---- Hover / focus states ---- */ + .gk-shop__card:hover { + transform: translateY(-4px); + border-color: var(--gk-accent-soft); + box-shadow: + 0 18px 44px rgba(0, 0, 0, 0.5), + 0 0 30px rgba(200, 96, 26, 0.16), + inset 0 1px 0 rgba(255, 255, 255, 0.06); + } + + .gk-shop__card:hover::before { + opacity: 1; + transform: translate(0, 0); + } + + .gk-shop__card:hover .gk-shop__sheen { + animation: gk-sheen 850ms ease; + } + + .gk-shop__card:hover .gk-shop__arrow { + transform: translateX(4px); + } + + .gk-shop__card:hover .gk-shop__pip { + transform: scale(1.45); + } + + .gk-shop__card:focus-visible { + outline: none; + border-color: var(--gk-accent); + box-shadow: + 0 0 0 3px rgba(200, 96, 26, 0.35), + 0 18px 44px rgba(0, 0, 0, 0.5); + } + + /* ---- Empty state ---- */ + .gk-shop__empty { + grid-column: 1 / -1; + border-radius: 12px; + padding: 20px; + background: var(--gk-card); + border: 1px solid var(--gk-card-line); + } + .gk-shop__emptyTitle { + font-weight: 900; + text-transform: uppercase; + letter-spacing: 0.04em; + margin-bottom: 6px; + } + .gk-shop__emptyText { + opacity: 0.78; + font-size: 14px; + line-height: 1.5; + } + + /* ========================================================= + ICON ANIMATIONS (continuous, subtle) + ========================================================= */ + .gk-ico { color: var(--gk-accent); } + .gk-ico [stroke] { stroke: var(--gk-accent); } + + /* NEW star floats */ + .gk-ico__star { transform-box: fill-box; transform-origin: center; animation: gk-float 4s ease-in-out infinite; } + + /* CD disc spins */ + .gk-ico__cdDisc { transform-box: fill-box; transform-origin: center; animation: gk-spin 6s linear infinite; } + + /* Vinyl disc spins, tonearm sways */ + .gk-ico__vinylDisc { transform-box: fill-box; transform-origin: center; animation: gk-spin 8s linear infinite; } + .gk-ico__vinylArm { transform-box: fill-box; transform-origin: top right; animation: gk-sway 5s ease-in-out infinite; } + + /* Merch shirt floats */ + .gk-ico__shirt { transform-box: fill-box; transform-origin: center; animation: gk-float 4.5s ease-in-out infinite; } + + /* Book cover flips open/closed */ + .gk-ico__bookCover { transform-box: fill-box; transform-origin: left center; animation: gk-flip 5s ease-in-out infinite; } + + /* DVD rings pulse */ + .gk-ico__dvdRings { animation: gk-pulse 3.2s ease-in-out infinite; } + + /* Guitar gently rocks, strings vibrate */ + .gk-ico__guitar { transform-box: fill-box; transform-origin: center; animation: gk-rock 6s ease-in-out infinite; } + .gk-ico__strings { transform-box: fill-box; transform-origin: center; animation: gk-vibe 0.18s ease-in-out infinite; } + + @keyframes gk-fadeUp { + to { opacity: 1; transform: translateY(0); } + } + @keyframes gk-breathe { + 0%, 100% { opacity: 0.35; transform: scale(0.82); } + 50% { opacity: 0.7; transform: scale(1.04); } + } + @keyframes gk-sheen { + 0% { left: -120%; } + 100% { left: 140%; } + } + @keyframes gk-float { + 0%, 100% { transform: translateY(1.2px); } + 50% { transform: translateY(-1.6px); } + } + @keyframes gk-spin { + to { transform: rotate(360deg); } + } + @keyframes gk-sway { + 0%, 100% { transform: rotate(-6deg); } + 50% { transform: rotate(4deg); } + } + @keyframes gk-flip { + 0%, 18% { transform: rotateY(0deg); } + 50% { transform: rotateY(-150deg); } + 82%, 100%{ transform: rotateY(0deg); } + } + @keyframes gk-pulse { + 0%, 100% { opacity: 0.35; } + 50% { opacity: 1; } + } + @keyframes gk-rock { + 0%, 100% { transform: rotate(-2.2deg); } + 50% { transform: rotate(2.2deg); } + } + @keyframes gk-vibe { + 0%, 100% { transform: scaleY(1); } + 50% { transform: scaleY(1.12); } + } + + /* ========================================================= + RESPONSIVE + ========================================================= */ + @media (max-width: 980px) { + .gk-shop__card, + .gk-shop__card--wide { grid-column: span 6; } /* 2-up tablet */ + .gk-shop__divider { display: none; } + } + @media (max-width: 560px) { + .gk-shop__wrap { width: calc(100% - 28px); } + .gk-shop__card, + .gk-shop__card--wide { grid-column: span 12; } /* 1-up mobile */ + .gk-shop__heading { font-size: clamp(38px, 12vw, 60px); } + } + + /* ========================================================= + REDUCED MOTION — kill all animation/transition + ========================================================= */ + @media (prefers-reduced-motion: reduce) { + .gk-shop__card { + opacity: 1 !important; + transform: none !important; + animation: none !important; + transition: none !important; + } + .gk-shop__card::before { transition: none !important; } + .gk-shop__iconGlow, + .gk-shop__sheen, + .gk-ico__star, + .gk-ico__cdDisc, + .gk-ico__vinylDisc, + .gk-ico__vinylArm, + .gk-ico__shirt, + .gk-ico__bookCover, + .gk-ico__dvdRings, + .gk-ico__guitar, + .gk-ico__strings { + animation: none !important; + } + .gk-shop__card:hover .gk-shop__sheen { animation: none !important; } + .gk-shop__pip, + .gk-shop__arrow { transition: none !important; } + } + {% endstyle %} + + +
+ +{% schema %} +{ + "name": "GK Shop Categories", + "tag": "section", + "settings": [ + { + "type": "text", + "id": "kicker", + "label": "Kicker", + "default": "Browse the goods" + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "The Gristle Shop" + }, + { + "type": "richtext", + "id": "subheading", + "label": "Subheading", + "default": "

Records. Gear. Tools of tone. Wear the sound.

" + } + ], + "blocks": [ + { + "type": "category", + "name": "Category tile", + "settings": [ + { + "type": "collection", + "id": "collection", + "label": "Collection", + "info": "Drives the link and the live item count." + }, + { + "type": "text", + "id": "title", + "label": "Title" + }, + { + "type": "text", + "id": "description", + "label": "Description" + }, + { + "type": "select", + "id": "icon", + "label": "Icon", + "info": "Auto picks the icon from the tile title.", + "options": [ + { "value": "auto", "label": "Auto (from title)" }, + { "value": "new", "label": "New (star)" }, + { "value": "cds", "label": "CDs (jewel case)" }, + { "value": "vinyl", "label": "Vinyl (turntable)" }, + { "value": "merch", "label": "Merch (t-shirt)" }, + { "value": "gear", "label": "Gear (guitar)" }, + { "value": "books", "label": "Instructional Books" }, + { "value": "dvds", "label": "DVDs (disc case)" } + ], + "default": "auto" + }, + { + "type": "checkbox", + "id": "featured", + "label": "Featured (New treatment + top accent line)", + "default": false + } + ] + } + ], + "max_blocks": 12, + "presets": [ + { + "name": "GK Shop Categories", + "blocks": [ + { "type": "category", "settings": { "title": "NEW!", "description": "Latest drops and fresh arrivals.", "icon": "new", "featured": true } }, + { "type": "category", "settings": { "title": "CDs", "description": "Studio albums and live records.", "icon": "cds" } }, + { "type": "category", "settings": { "title": "Vinyl", "description": "Wax. Analog. Real.", "icon": "vinyl" } }, + { "type": "category", "settings": { "title": "Merch", "description": "Wear the gristle.", "icon": "merch" } }, + { "type": "category", "settings": { "title": "Gear", "description": "Pickups, pedals, tone tools.", "icon": "gear" } }, + { "type": "category", "settings": { "title": "Instructional Books", "description": "Learn from the Gristleman.", "icon": "books" } }, + { "type": "category", "settings": { "title": "DVDs", "description": "Classic guitar instruction.", "icon": "dvds" } } + ] + } + ] +} +{% endschema %} diff --git a/sections/gk-sponsor-logos.liquid b/sections/gk-sponsor-logos.liquid new file mode 100644 index 00000000000..f9053b755d4 --- /dev/null +++ b/sections/gk-sponsor-logos.liquid @@ -0,0 +1,275 @@ +{%- style -%} + .gk-sponsors { + background-color: {{ section.settings.bg_color }}; + padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px; + {% if section.settings.show_top_border %} + border-top: 1px solid #272727; + {% endif %} + {% if section.settings.show_bottom_border %} + border-bottom: 1px solid #272727; + {% endif %} + } + + .gk-sponsors__inner { + max-width: var(--page-width); + margin: 0 auto; + padding: 0 24px; + } + + .gk-sponsors__header { + text-align: center; + margin-bottom: 40px; + } + + .gk-sponsors__eyebrow { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 3px; + font-size: 0.75rem; + color: #E8690A; + margin-bottom: 12px; + display: block; + } + + .gk-sponsors__heading { + font-family: 'Bebas Neue', sans-serif; + font-size: clamp(1.5rem, 3vw, 2.5rem); + color: #E8E8E8; + text-transform: uppercase; + letter-spacing: 2px; + margin: 0; + } + + .gk-sponsors__grid { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: {{ section.settings.logo_gap }}px; + } + + .gk-sponsors__item { + display: flex; + align-items: center; + justify-content: center; + width: {{ section.settings.logo_width }}px; + height: {{ section.settings.logo_height }}px; + padding: 16px; + transition: all 0.4s ease; + } + + .gk-sponsors__item img { + max-width: 100%; + max-height: 100%; + object-fit: contain; + filter: grayscale(100%) brightness(0.6); + opacity: 0.5; + transition: all 0.4s ease; + } + + .gk-sponsors__item:hover img { + filter: grayscale(0%) brightness(1); + opacity: 1; + } + + /* Orange tint on hover variant */ + .gk-sponsors--orange-hover .gk-sponsors__item:hover img { + filter: grayscale(0%) brightness(1) sepia(1) saturate(5) hue-rotate(-10deg); + opacity: 1; + } + + .gk-sponsors__item a { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + } + + @media screen and (max-width: 749px) { + .gk-sponsors__grid { + gap: 24px; + } + + .gk-sponsors__item { + width: calc(50% - 24px); + height: auto; + padding: 12px; + } + } +{%- endstyle -%} + +
+
+ {%- if section.settings.eyebrow != blank or section.settings.heading != blank -%} +
+ {%- if section.settings.eyebrow != blank -%} + {{ section.settings.eyebrow }} + {%- endif -%} + {%- if section.settings.heading != blank -%} +

{{ section.settings.heading }}

+ {%- endif -%} +
+ {%- endif -%} + + {%- if section.blocks.size > 0 -%} +
+ {%- for block in section.blocks -%} +
+ {%- if block.settings.logo != blank -%} + {%- if block.settings.link != blank -%} + + {{ block.settings.logo | image_url: width: 300 | image_tag: + loading: 'lazy', + alt: block.settings.name + }} + + {%- else -%} + {{ block.settings.logo | image_url: width: 300 | image_tag: + loading: 'lazy', + alt: block.settings.name + }} + {%- endif -%} + {%- else -%} + {{ block.settings.name }} + {%- endif -%} +
+ {%- endfor -%} +
+ {%- endif -%} +
+
+ +{% schema %} +{ + "name": "GK Sponsor Logos", + "tag": "section", + "class": "gk-sponsors-section", + "settings": [ + { + "type": "color", + "id": "bg_color", + "label": "Background Color", + "default": "#0D0D0D" + }, + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow Text", + "default": "Proud Partners" + }, + { + "type": "text", + "id": "heading", + "label": "Heading" + }, + { + "type": "checkbox", + "id": "orange_hover", + "label": "Orange Tint on Hover", + "default": true, + "info": "Logos turn orange-tinted on hover instead of full color" + }, + { + "type": "range", + "id": "logo_width", + "label": "Logo Width", + "min": 80, + "max": 250, + "step": 10, + "default": 150, + "unit": "px" + }, + { + "type": "range", + "id": "logo_height", + "label": "Logo Height", + "min": 40, + "max": 150, + "step": 5, + "default": 70, + "unit": "px" + }, + { + "type": "range", + "id": "logo_gap", + "label": "Gap Between Logos", + "min": 16, + "max": 80, + "step": 4, + "default": 40, + "unit": "px" + }, + { + "type": "checkbox", + "id": "show_top_border", + "label": "Show Top Border", + "default": true + }, + { + "type": "checkbox", + "id": "show_bottom_border", + "label": "Show Bottom Border", + "default": true + }, + { + "type": "range", + "id": "padding_top", + "label": "Padding Top", + "min": 0, + "max": 100, + "step": 4, + "default": 48, + "unit": "px" + }, + { + "type": "range", + "id": "padding_bottom", + "label": "Padding Bottom", + "min": 0, + "max": 100, + "step": 4, + "default": 48, + "unit": "px" + } + ], + "blocks": [ + { + "type": "logo", + "name": "Sponsor Logo", + "settings": [ + { + "type": "text", + "id": "name", + "label": "Sponsor Name", + "default": "Sponsor" + }, + { + "type": "image_picker", + "id": "logo", + "label": "Logo Image", + "info": "Upload a white or transparent PNG logo" + }, + { + "type": "url", + "id": "link", + "label": "Sponsor Website" + } + ] + } + ], + "presets": [ + { + "name": "GK Sponsor Logos", + "blocks": [ + { "type": "logo", "settings": { "name": "JAM Pedals" } }, + { "type": "logo", "settings": { "name": "Fishman" } }, + { "type": "logo", "settings": { "name": "Reverend" } }, + { "type": "logo", "settings": { "name": "Tone King" } }, + { "type": "logo", "settings": { "name": "D'Addario" } }, + { "type": "logo", "settings": { "name": "Dunlop" } } + ] + } + ] +} +{% endschema %} diff --git a/sections/gk-sponsors.liquid b/sections/gk-sponsors.liquid new file mode 100644 index 00000000000..10852eb5308 --- /dev/null +++ b/sections/gk-sponsors.liquid @@ -0,0 +1,262 @@ +{%- comment -%} + GK Sponsors + - Big logos in one row (desktop), no boxes + - Always-on subtle orange glow, stronger on hover + - "Logo boost" scales logo inside bounds (fixes padded PNGs) +{%- endcomment -%} + +{%- liquid + assign heading_val = section.settings.heading | strip + assign subheading_val = section.settings.subheading | strip +-%} + +
+
+ + {%- if heading_val != blank and heading_val != '.' -%} +

{{ heading_val }}

+ {%- endif -%} + + {%- if subheading_val != blank and subheading_val != '.' -%} +
{{ subheading_val }}
+ {%- endif -%} + + + +
+ + +
+ +{% schema %} +{ + "name": "GK Sponsors", + "tag": "section", + "class": "section", + "settings": [ + { "type": "text", "id": "heading", "label": "Heading", "default": "Sponsors" }, + { "type": "text", "id": "subheading", "label": "Subheading (optional)", "default": "." }, + + { "type": "color", "id": "accent", "label": "Accent color", "default": "#E8690A" }, + + { "type": "range", "id": "columns_desktop", "min": 3, "max": 8, "step": 1, "unit": "col", "label": "Columns (desktop)", "default": 5 }, + { "type": "range", "id": "columns_tablet", "min": 2, "max": 6, "step": 1, "unit": "col", "label": "Columns (tablet)", "default": 4 }, + { "type": "range", "id": "columns_mobile", "min": 2, "max": 4, "step": 1, "unit": "col", "label": "Columns (mobile)", "default": 2 }, + + { "type": "range", "id": "gap", "min": 6, "max": 32, "step": 1, "unit": "px", "label": "Gap", "default": 12 }, + + { "type": "range", "id": "logo_height", "min": 30, "max": 160, "step": 2, "unit": "px", "label": "Logo height", "default": 120 }, + { "type": "range", "id": "logo_boost", "min": 100, "max": 200, "step": 5, "unit": "%", "label": "Logo boost (fix padded PNGs)", "default": 160 }, + + { "type": "range", "id": "hover_scale", "min": 100, "max": 130, "step": 1, "unit": "%", "label": "Hover scale", "default": 110 }, + { "type": "range", "id": "glow_strength", "min": 60, "max": 160, "step": 2, "unit": "%", "label": "Glow strength", "default": 110 }, + + { "type": "range", "id": "padding_top", "min": 0, "max": 140, "step": 4, "unit": "px", "label": "Padding top", "default": 44 }, + { "type": "range", "id": "padding_bottom", "min": 0, "max": 140, "step": 4, "unit": "px", "label": "Padding bottom", "default": 44 } + ], + "blocks": [ + { + "type": "sponsor", + "name": "Sponsor", + "settings": [ + { "type": "image_picker", "id": "logo", "label": "Logo" }, + { "type": "text", "id": "label", "label": "Label (optional)", "default": "." }, + { "type": "url", "id": "url", "label": "Sponsor URL" }, + { "type": "checkbox", "id": "open_new", "label": "Open in new tab", "default": true }, + { "type": "checkbox", "id": "nofollow", "label": "Add nofollow", "default": false } + ] + } + ], + "presets": [ + { + "name": "GK Sponsors", + "blocks": [ + { "type": "sponsor" }, + { "type": "sponsor" }, + { "type": "sponsor" }, + { "type": "sponsor" }, + { "type": "sponsor" } + ] + } + ] +} +{% endschema %} \ No newline at end of file diff --git a/sections/gk-spotify-embed.liquid b/sections/gk-spotify-embed.liquid new file mode 100644 index 00000000000..2a889c906f5 --- /dev/null +++ b/sections/gk-spotify-embed.liquid @@ -0,0 +1,362 @@ +{%- comment -%} + GK Spotify Embed + - Premium metallic / Spotify-grey device frame + - Micro orange accent (rim + hover), not an orange wash + - NOTE: Spotify iframe UI itself cannot be styled (cross-domain) +{%- endcomment -%} + +{%- liquid + assign eyebrow_val = section.settings.eyebrow | strip + assign heading_val = section.settings.heading | strip + assign subheading_val = section.settings.subheading | strip + assign embed_src = section.settings.embed_src | strip + assign open_url = section.settings.open_url | strip +-%} + +
+
+ + {%- if eyebrow_val != blank and eyebrow_val != '.' -%} +
{{ eyebrow_val }}
+ {%- endif -%} + + {%- if heading_val != blank -%} +
+

{{ heading_val }}

+ + {%- if section.settings.show_open_button and open_url != blank -%} + + Open on Spotify + + {%- endif -%} +
+ {%- endif -%} + + {%- if subheading_val != blank and subheading_val != '.' -%} +
{{ subheading_val }}
+ {%- endif -%} + + {%- if embed_src != blank -%} +
+
+ +
+
+ {%- endif -%} + +
+ + + + +
+ +{% schema %} +{ + "name": "GK Spotify Embed", + "tag": "section", + "class": "section", + "settings": [ + { "type": "checkbox", "id": "enable_animation", "default": true, "label": "Enable fly-in animation" }, + + { "type": "text", "id": "eyebrow", "label": "Eyebrow (optional)", "default": "." }, + { "type": "text", "id": "heading", "label": "Heading", "default": "Listen on Spotify" }, + { "type": "text", "id": "subheading", "label": "Subheading (optional)", "default": "." }, + + { + "type": "text", + "id": "embed_src", + "label": "Spotify embed src URL", + "default": "https://open.spotify.com/embed/artist/5Y6wPwVr2krTASRASpMLsC?utm_source=generator" + }, + { + "type": "text", + "id": "open_url", + "label": "Open on Spotify URL (optional)", + "default": "https://open.spotify.com/artist/5Y6wPwVr2krTASRASpMLsC" + }, + { "type": "checkbox", "id": "show_open_button", "default": true, "label": "Show \"Open on Spotify\" button" }, + + { "type": "range", "id": "height", "min": 280, "max": 560, "step": 4, "unit": "px", "label": "Embed height", "default": 352 }, + + { "type": "color", "id": "accent", "label": "Accent color", "default": "#E8690A" }, + + { "type": "range", "id": "padding_top", "min": 0, "max": 140, "step": 4, "unit": "px", "label": "Padding top", "default": 44 }, + { "type": "range", "id": "padding_bottom", "min": 0, "max": 140, "step": 4, "unit": "px", "label": "Padding bottom", "default": 52 } + ], + "presets": [ + { "name": "GK Spotify Embed" } + ] +} +{% endschema %} \ No newline at end of file diff --git a/sections/gk-stream-follow.liquid b/sections/gk-stream-follow.liquid new file mode 100644 index 00000000000..88bc17cdc32 --- /dev/null +++ b/sections/gk-stream-follow.liquid @@ -0,0 +1,398 @@ +{% comment %} + GK Stream + Follow (Modern — dark premium / burnt-orange redesign) + 4 fixed columns: Stream Greg / Stream KMT / Podcast / Watch Greg Live + - platform_link blocks get assigned to a column via dropdown + - follow_link blocks render as buttons under FOLLOW + Aesthetic only: all hrefs come from block.settings.url (unchanged). +{% endcomment %} + +
+
+ {% if section.settings.eyebrow != blank %} +

{{ section.settings.eyebrow }}

+ {% endif %} + + {% if section.settings.heading != blank %} +

{{ section.settings.heading }}

+ {% endif %} + + {% if section.settings.subtext != blank %} +

{{ section.settings.subtext }}

+ {% endif %} + + {% assign col_keys = "stream_greg,stream_kmt,podcast,watch_live" | split: "," %} + +
+ {% for col in col_keys %} +
+
+ {% case col %} + {% when "stream_greg" %}{{ section.settings.col_1_title }} + {% when "stream_kmt" %}{{ section.settings.col_2_title }} + {% when "podcast" %}{{ section.settings.col_3_title }} + {% when "watch_live" %}{{ section.settings.col_4_title }} + {% endcase %} +
+ + {% assign has_any = false %} + + {% for block in section.blocks %} + {% if block.type == "platform_link" and block.settings.column == col %} + {% assign has_any = true %} + + + {% if section.settings.show_icons and block.settings.icon != blank %} + + {% endif %} + {{ block.settings.label }} + + + + {% endif %} + {% endfor %} + + {% if has_any == false %} +
+ {{ section.settings.empty_column_text }} +
+ {% endif %} +
+ {% endfor %} +
+ + {% assign has_follow = false %} + {% for block in section.blocks %} + {% if block.type == "follow_link" %} + {% assign has_follow = true %} + {% endif %} + {% endfor %} + + {% if has_follow %} +
+ + {% if section.settings.follow_heading != blank %} +
{{ section.settings.follow_heading }}
+ {% endif %} + +
+ {% for block in section.blocks %} + {% if block.type == "follow_link" %} + + {% if block.settings.icon != blank %} + {{ block.settings.label | escape }} + {% endif %} + {{ block.settings.label }} + + {% endif %} + {% endfor %} +
+ {% endif %} +
+
+ + + +{% schema %} +{ + "name": "GK Stream + Follow", + "settings": [ + { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "LISTEN & CONNECT" }, + { "type": "text", "id": "heading", "label": "Heading", "default": "STREAM + FOLLOW" }, + { "type": "text", "id": "subtext", "label": "Subtext", "default": "Find Greg Koch on every platform." }, + + { "type": "text", "id": "col_1_title", "label": "Column 1 title", "default": "STREAM GREG" }, + { "type": "text", "id": "col_2_title", "label": "Column 2 title", "default": "STREAM KMT" }, + { "type": "text", "id": "col_3_title", "label": "Column 3 title", "default": "PODCAST" }, + { "type": "text", "id": "col_4_title", "label": "Column 4 title", "default": "WATCH GREG LIVE" }, + + { "type": "text", "id": "follow_heading", "label": "Follow heading", "default": "FOLLOW" }, + + { "type": "checkbox", "id": "show_icons", "label": "Show link icons", "default": false }, + { "type": "checkbox", "id": "show_dividers", "label": "Show divider line", "default": true }, + + { "type": "text", "id": "empty_column_text", "label": "Empty column text", "default": "Add links for this column in the section blocks." }, + + { "type": "range", "id": "pad_y", "min": 20, "max": 120, "step": 4, "unit": "px", "label": "Vertical padding", "default": 72 }, + + { "type": "color", "id": "bg_color", "label": "Background color", "default": "#0D0D0D" }, + { "type": "color", "id": "text_color", "label": "Text color", "default": "#FFFFFF" } + ], + "blocks": [ + { + "type": "platform_link", + "name": "Platform link", + "settings": [ + { + "type": "select", + "id": "column", + "label": "Column", + "default": "stream_greg", + "options": [ + { "value": "stream_greg", "label": "Stream Greg" }, + { "value": "stream_kmt", "label": "Stream KMT" }, + { "value": "podcast", "label": "Podcast" }, + { "value": "watch_live", "label": "Watch Greg Live" } + ] + }, + { "type": "text", "id": "label", "label": "Link label", "default": "Spotify" }, + { "type": "url", "id": "url", "label": "Link URL" }, + { "type": "image_picker", "id": "icon", "label": "Optional icon" } + ] + }, + { + "type": "follow_link", + "name": "Follow link", + "settings": [ + { "type": "text", "id": "label", "label": "Label", "default": "Instagram" }, + { "type": "url", "id": "url", "label": "URL" }, + { "type": "image_picker", "id": "icon", "label": "Icon" } + ] + } + ], + "presets": [ + { + "name": "GK Stream + Follow", + "blocks": [ + { "type": "platform_link" }, + { "type": "platform_link" }, + { "type": "platform_link" }, + { "type": "follow_link" }, + { "type": "follow_link" } + ] + } + ] +} +{% endschema %} diff --git a/sections/gk-tour-dates-home.liquid b/sections/gk-tour-dates-home.liquid new file mode 100644 index 00000000000..c899aac167d --- /dev/null +++ b/sections/gk-tour-dates-home.liquid @@ -0,0 +1,337 @@ +{% comment %} + GK Tour Dates (HOME) + - Reads dates from snippets/gk-tour-dates-shared.liquid (single source of truth) + - Keeps the SAME glass row design + reveal button behavior + - Shows first N, reveal more by button +{% endcomment %} + +{% liquid + assign initial_visible = section.settings.initial_visible | default: 3 + assign reveal_step = section.settings.reveal_step | default: 3 +%} + +
+
+ + {% if section.settings.eyebrow != blank %} +
{{ section.settings.eyebrow }}
+ {% endif %} + + {% if section.settings.heading != blank %} +

{{ section.settings.heading }}

+ {% endif %} + + {% if section.settings.subtext != blank %} +
{{ section.settings.subtext }}
+ {% endif %} + +
+ {%- comment -%} + Render shared dates using the HOME markup/classes: + .gk-date-row, .gk-date-row__date, .gk-date-row__details, .gk-date-row__cta + {%- endcomment -%} + + {% render 'gk-tour-dates-shared', + mode: 'render_home', + section_id: section.id + %} +
+ + {% capture _gk_total %} + {% render 'gk-tour-dates-shared', mode: 'count' %} + {% endcapture %} + {% assign total_rows = _gk_total | strip | plus: 0 %} + + {% if total_rows == 0 %} +
+ {{ section.settings.empty_text }} +
+ {% endif %} + + {% if total_rows > initial_visible %} +
+ +
+ {% endif %} + +
+ + {% if total_rows > initial_visible %} + + {% endif %} +
+ +{% style %} +.gk-tour-dates { + --bg: {{ section.settings.bg_color }}; + --text: #FFFFFF; + --line: rgba(255,255,255,0.12); + --muted: rgba(255,255,255,0.72); + --accent: #E8690A; + + background: var(--bg); + color: var(--text); + padding: {{ section.settings.padding_top }}px 20px {{ section.settings.padding_bottom }}px; +} + +.gk-tour-dates__inner { + max-width: 1100px; + margin: 0 auto; +} + +.gk-tour-dates__eyebrow { + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + text-transform: uppercase; + letter-spacing: 0.16em; + font-size: 12px; + color: rgba(255,255,255,0.62); + margin-bottom: 10px; + text-align: {{ section.settings.text_align }}; +} + +.gk-tour-dates__heading { + margin: 0 0 8px 0; + font-family: "Bebas Neue", sans-serif; + font-weight: 400; + letter-spacing: 0.03em; + line-height: 1; + font-size: clamp(44px, 6vw, 76px); + text-align: {{ section.settings.text_align }}; +} + +.gk-tour-dates__subtext { + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + font-size: 16px; + color: var(--muted); + margin-bottom: 22px; + text-align: {{ section.settings.text_align }}; + max-width: 70ch; +} + +.gk-tour-dates__list { + display: flex; + flex-direction: column; + gap: 10px; +} + +/* glass row card + orange undertone hover */ +.gk-date-row { + display: grid; + grid-template-columns: minmax(160px, 220px) 1fr auto; + gap: 16px; + align-items: center; + + padding: 14px 16px; + border: 1px solid var(--line); + border-radius: 14px; + + background: rgba(0,0,0,0.22); + box-shadow: 0 18px 40px rgba(0,0,0,0.28); + + transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; +} + +.gk-date-row:hover { + transform: translateY(-1px); + border-color: rgba(232,105,10,0.35); + background: linear-gradient(180deg, rgba(232,105,10,0.14), rgba(0,0,0,0.18)); +} + +.gk-date-row__date { + font-family: "Bebas Neue", sans-serif; + font-weight: 400; + letter-spacing: 0.02em; + color: var(--accent); + font-size: 28px; + line-height: 1; +} + +.gk-date-row__details { + display: flex; + flex-direction: column; + gap: 4px; + min-width: 0; +} + +.gk-date-row__venue { + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + font-size: 18px; + line-height: 1.2; + color: #FFFFFF; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.gk-date-row__descriptor { + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + font-size: 12px; + font-style: italic; + color: rgba(255,255,255,0.50); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.gk-date-row__city { + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 12px; + letter-spacing: 0.10em; + text-transform: uppercase; + color: rgba(255,255,255,0.72); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.gk-date-row__cta { + display: flex; + justify-content: flex-end; +} + +/* CTA styles more like your modern system */ +.gk-date-row__btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 10px 14px; + border-radius: 999px; + background: var(--accent); + color: #0D0D0D; + text-decoration: none; + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 12px; + letter-spacing: 0.10em; + text-transform: uppercase; + border: 1px solid var(--accent); + transition: transform 140ms ease, opacity 140ms ease; +} + +.gk-date-row__btn:hover { opacity: 0.92; transform: translateY(-1px); } +.gk-date-row__btn:active { transform: translateY(0); } + +.gk-date-row__soldout { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 10px 14px; + border-radius: 999px; + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 12px; + letter-spacing: 0.10em; + text-transform: uppercase; + color: rgba(255,255,255,0.55); + border: 1px solid rgba(255,255,255,0.18); + background: rgba(0,0,0,0.18); +} + +/* show more */ +.gk-tour-dates__more-wrap { + margin-top: 16px; + display: flex; + justify-content: {{ section.settings.text_align }}; +} + +.gk-tour-dates__more { + appearance: none; + border: 1px solid rgba(255,255,255,0.16); + background: rgba(0,0,0,0.22); + color: rgba(255,255,255,0.88); + border-radius: 999px; + padding: 12px 16px; + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 12px; + letter-spacing: 0.10em; + text-transform: uppercase; + cursor: pointer; + transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; +} + +.gk-tour-dates__more:hover { + transform: translateY(-1px); + border-color: rgba(232,105,10,0.30); + background: rgba(0,0,0,0.34); +} + +.gk-tour-dates__empty { + margin-top: 18px; + padding: 16px 0; + border-top: 1px solid var(--line); + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + font-size: 16px; + color: var(--muted); +} + +@media (max-width: 720px) { + .gk-date-row { + grid-template-columns: 1fr; + gap: 10px; + } + .gk-date-row__cta { justify-content: flex-start; } + .gk-date-row__date { font-size: 30px; } +} +{% endstyle %} + +{% schema %} +{ + "name": "GK Tour Dates Home", + "settings": [ + { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Tour Dates" }, + { "type": "text", "id": "heading", "label": "Heading", "default": "GREG KOCH DATES" }, + { "type": "text", "id": "subtext", "label": "Subtext", "default": "See upcoming dates below." }, + { "type": "text", "id": "empty_text", "label": "Empty state text", "default": "No upcoming dates. Check back soon." }, + + { "type": "text", "id": "more_label", "label": "Show more button label", "default": "Show more dates" }, + { "type": "range", "id": "initial_visible", "label": "Initially visible dates", "min": 1, "max": 20, "step": 1, "default": 3 }, + { "type": "range", "id": "reveal_step", "label": "Reveal step (per click)", "min": 1, "max": 20, "step": 1, "default": 3 }, + + { + "type": "select", + "id": "text_align", + "label": "Text alignment", + "default": "left", + "options": [ + { "value": "left", "label": "Left" }, + { "value": "center", "label": "Center" }, + { "value": "right", "label": "Right" } + ] + }, + + { "type": "color", "id": "bg_color", "label": "Background color", "default": "#0D0D0D" }, + { "type": "range", "id": "padding_top", "label": "Padding top", "min": 0, "max": 120, "step": 4, "default": 64 }, + { "type": "range", "id": "padding_bottom", "label": "Padding bottom", "min": 0, "max": 120, "step": 4, "default": 64 } + ], + "presets": [ + { "name": "GK Tour Dates Home" } + ] +} +{% endschema %} \ No newline at end of file diff --git a/sections/gk-tour-dates-page.liquid b/sections/gk-tour-dates-page.liquid new file mode 100644 index 00000000000..2da57ff6692 --- /dev/null +++ b/sections/gk-tour-dates-page.liquid @@ -0,0 +1,432 @@ +{% comment %} + GK Tour Dates (PAGE) + - Pulls rows from snippets/gk-tour-dates-shared.liquid (single source of truth) + - Keeps the SAME glass style + show more/show fewer UI + - visible_count controls how many show initially + - reveal_step controls how many are added per click +{% endcomment %} + +{% liquid + assign upcoming_count = 0 +%} + +
+
+ + {% if section.settings.eyebrow != blank %} +
{{ section.settings.eyebrow }}
+ {% endif %} + + {% if section.settings.heading != blank %} +

{{ section.settings.heading }}

+ {% endif %} + + {% if section.settings.subtext != blank %} +
{{ section.settings.subtext }}
+ {% endif %} + +
+ {%- comment -%} + Render shared dates using the PAGE markup/classes: + .gk-date, .gk-date__date, .gk-date__details, .gk-date__cta + Must include: + - data-date-row on each row + - is-hidden class for rows beyond visible_count + {%- endcomment -%} + + {% render 'gk-tour-dates-shared', + mode: 'render_page', + visible_count: section.settings.visible_count + %} +
+ + {% capture _gk_total %} + {% render 'gk-tour-dates-shared', mode: 'count' %} + {% endcapture %} + {% assign total_rows = _gk_total | strip | plus: 0 %} + + {% if total_rows == 0 %} +
+ {{ section.settings.empty_text }} +
+ {% endif %} + + {% if total_rows > section.settings.visible_count %} +
+ + + + + {% if section.settings.view_all_url != blank %} + + {{ section.settings.view_all_label }} + + {% endif %} +
+ {% elsif section.settings.view_all_url != blank %} +
+ + {{ section.settings.view_all_label }} + +
+ {% endif %} + +
+
+ + + + + +{% schema %} +{ + "name": "GK Tour Dates (Page)", + "settings": [ + { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Tour Dates" }, + { "type": "text", "id": "heading", "label": "Heading", "default": "GREG KOCH DATES" }, + { "type": "text", "id": "subtext", "label": "Subtext", "default": "See upcoming dates below." }, + + { "type": "text", "id": "empty_text", "label": "Empty state text", "default": "No upcoming dates. Check back soon." }, + + { + "type": "select", + "id": "text_align", + "label": "Text alignment", + "default": "left", + "options": [ + { "value": "left", "label": "Left" }, + { "value": "center", "label": "Center" }, + { "value": "right", "label": "Right" } + ] + }, + + { "type": "range", "id": "visible_count", "label": "Visible dates", "min": 1, "max": 20, "step": 1, "default": 10 }, + { "type": "range", "id": "reveal_step", "label": "Reveal step", "min": 1, "max": 20, "step": 1, "default": 10 }, + + { "type": "text", "id": "show_more_label", "label": "Show more label", "default": "Show more dates" }, + { "type": "text", "id": "show_less_label", "label": "Show less label", "default": "Show fewer dates" }, + { "type": "text", "id": "view_all_label", "label": "View all label", "default": "View all dates" }, + { "type": "url", "id": "view_all_url", "label": "View all URL" }, + + { "type": "range", "id": "padding_top", "label": "Padding top", "min": 0, "max": 120, "step": 4, "default": 64 }, + { "type": "range", "id": "padding_bottom", "label": "Padding bottom", "min": 0, "max": 120, "step": 4, "default": 64 }, + + { "type": "color", "id": "bg_color", "label": "Background color", "default": "#0D0D0D" }, + { "type": "color", "id": "accent_color", "label": "Accent color", "default": "#E8690A" } + ], + "presets": [ + { "name": "GK Tour Dates (Page)" } + ] +} +{% endschema %} \ No newline at end of file diff --git a/sections/gk-tour-dates-shared.liquid b/sections/gk-tour-dates-shared.liquid new file mode 100644 index 00000000000..c6dd1448379 --- /dev/null +++ b/sections/gk-tour-dates-shared.liquid @@ -0,0 +1,795 @@ +{% comment %} + GK Tour Dates — shared static section (rendered once in layout/theme.liquid). + Blocks hold ALL date data; editing here updates both homepage and dates page. + + Template detection sets render mode: + template.name == 'index' → home style (.gk-tour-dates / .gk-date-row), initial 3 + template.suffix == 'dates' → page style (.gk-dates / .gk-date), initial 10 +{% endcomment %} + +{%- liquid + assign today_ymd = 'now' | date: '%Y-%m-%d' + assign today_midnight_ts = today_ymd | date: '%s' | plus: 0 + + if template.name == 'index' + assign is_home = true + assign initial_visible = 3 + assign reveal_step = 3 + else + assign is_home = false + assign initial_visible = 10 + assign reveal_step = 10 + endif +-%} + +{%- comment -%}Pre-count upcoming dates for show-more threshold{%- endcomment -%} +{%- assign upcoming_count = 0 -%} +{%- for block in section.blocks -%} + {%- if block.type == 'date' -%} + {%- assign _raw = block.settings.date | strip -%} + {%- if _raw != blank -%} + {%- assign _ts = _raw | date: '%s' | plus: 0 -%} + {%- if _ts == 0 or _ts >= today_midnight_ts -%} + {%- assign upcoming_count = upcoming_count | plus: 1 -%} + {%- endif -%} + {%- endif -%} + {%- endif -%} +{%- endfor -%} + +{%- if is_home -%} + + {%- comment -%}─── HOME STYLE ──────────────────────────────────────────────{%- endcomment -%} +
+
+ + {% if section.settings.eyebrow != blank %} +
{{ section.settings.eyebrow }}
+ {% endif %} + + {% if section.settings.heading != blank %} +

{{ section.settings.heading }}

+ {% endif %} + + {% if section.settings.subtext != blank %} +
{{ section.settings.subtext }}
+ {% endif %} + +
+ {%- assign render_index = 0 -%} + {%- for block in section.blocks -%} + {%- if block.type == 'date' -%} + {%- assign raw_date = block.settings.date | strip -%} + {%- if raw_date != blank -%} + {%- assign show_ts = raw_date | date: '%s' | plus: 0 -%} + {%- assign is_upcoming = false -%} + {%- if show_ts == 0 or show_ts >= today_midnight_ts -%} + {%- assign is_upcoming = true -%} + {%- endif -%} + {%- if is_upcoming -%} + {%- assign display_date = raw_date | date: '%B %-d, %Y' -%} + {%- if display_date == blank -%}{%- assign display_date = raw_date -%}{%- endif -%} + {%- assign _bv = block.settings.venue | default: '' -%} + {%- assign _bd = block.settings.descriptor | default: '' -%} + {%- assign _bc = block.settings.city | default: '' -%} + {%- assign _bs = block.settings.state | default: '' -%} + {%- if _bc != blank and _bs != blank -%} + {%- assign _bcity = _bc | append: ', ' | append: _bs -%} + {%- elsif _bc != blank -%} + {%- assign _bcity = _bc -%} + {%- else -%} + {%- assign _bcity = _bs -%} + {%- endif -%} + {%- assign _bu = block.settings.ticket_url | default: '' -%} + {%- assign _sold = block.settings.sold_out -%} +
+
{{ display_date }}
+
+ {%- if _bv != blank -%}
{{ _bv }}
{%- endif -%} + {%- if _bd != blank -%}
{{ _bd }}
{%- endif -%} + {%- if _bcity != blank -%}
{{ _bcity }}
{%- endif -%} +
+
+ {%- if _sold -%} + SOLD OUT + {%- elsif _bu != blank -%} + GET TICKETS + {%- else -%} + TBA + {%- endif -%} +
+
+ {%- assign render_index = render_index | plus: 1 -%} + {%- endif -%} + {%- endif -%} + {%- endif -%} + {%- endfor -%} +
+ + {% if upcoming_count == 0 %} +
{{ section.settings.empty_text }}
+ {% endif %} + + {% if upcoming_count > initial_visible %} +
+ +
+ {% endif %} + +
+ + {% if upcoming_count > initial_visible %} + + {% endif %} +
+ +{%- else -%} + + {%- comment -%}─── DATES PAGE STYLE ────────────────────────────────────────{%- endcomment -%} +
+
+ + {% if section.settings.eyebrow != blank %} +
{{ section.settings.eyebrow }}
+ {% endif %} + + {% if section.settings.heading != blank %} +

{{ section.settings.heading }}

+ {% endif %} + + {% if section.settings.subtext != blank %} +
{{ section.settings.subtext }}
+ {% endif %} + +
+ {%- assign render_index = 0 -%} + {%- for block in section.blocks -%} + {%- if block.type == 'date' -%} + {%- assign raw_date = block.settings.date | strip -%} + {%- if raw_date != blank -%} + {%- assign show_ts = raw_date | date: '%s' | plus: 0 -%} + {%- assign is_upcoming = false -%} + {%- if show_ts == 0 or show_ts >= today_midnight_ts -%} + {%- assign is_upcoming = true -%} + {%- endif -%} + {%- if is_upcoming -%} + {%- assign display_date = raw_date | date: '%B %-d, %Y' -%} + {%- if display_date == blank -%}{%- assign display_date = raw_date -%}{%- endif -%} + {%- assign _bv = block.settings.venue | default: '' -%} + {%- assign _bd = block.settings.descriptor | default: '' -%} + {%- assign _bc = block.settings.city | default: '' -%} + {%- assign _bs = block.settings.state | default: '' -%} + {%- if _bc != blank and _bs != blank -%} + {%- assign _bcity = _bc | append: ', ' | append: _bs -%} + {%- elsif _bc != blank -%} + {%- assign _bcity = _bc -%} + {%- else -%} + {%- assign _bcity = _bs -%} + {%- endif -%} + {%- assign _bu = block.settings.ticket_url | default: '' -%} + {%- assign _sold = block.settings.sold_out -%} + {%- assign extra_class = '' -%} + {%- if render_index >= initial_visible -%} + {%- assign extra_class = ' is-hidden' -%} + {%- endif -%} +
+
{{ display_date }}
+
+ {%- if _bv != blank -%}
{{ _bv }}
{%- endif -%} + {%- if _bd != blank -%}
{{ _bd }}
{%- endif -%} + {%- if _bcity != blank -%}
{{ _bcity }}
{%- endif -%} +
+
+ {%- if _sold -%} + SOLD OUT + {%- elsif _bu != blank -%} + GET TICKETS + {%- else -%} + TBA + {%- endif -%} +
+
+ {%- assign render_index = render_index | plus: 1 -%} + {%- endif -%} + {%- endif -%} + {%- endif -%} + {%- endfor -%} +
+ + {% if upcoming_count == 0 %} +
{{ section.settings.empty_text }}
+ {% endif %} + + {% if upcoming_count > initial_visible %} +
+ + + {% if section.settings.view_all_url != blank %} + {{ section.settings.view_all_label }} + {% endif %} +
+ {% elsif section.settings.view_all_url != blank %} +
+ {{ section.settings.view_all_label }} +
+ {% endif %} + +
+
+ + + +{%- endif -%} + +{% style %} +/* ── HOME STYLE (index template) ─────────────────────────── */ +.gk-tour-dates { + --bg: {{ section.settings.bg_color }}; + --text: #FFFFFF; + --line: rgba(255,255,255,0.12); + --muted: rgba(255,255,255,0.72); + --accent: #E8690A; + + background: var(--bg); + color: var(--text); + padding: {{ section.settings.padding_top }}px 20px {{ section.settings.padding_bottom }}px; +} + +.gk-tour-dates__inner { + max-width: 1100px; + margin: 0 auto; +} + +.gk-tour-dates__eyebrow { + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + text-transform: uppercase; + letter-spacing: 0.16em; + font-size: 12px; + color: rgba(255,255,255,0.62); + margin-bottom: 10px; + text-align: {{ section.settings.text_align }}; +} + +.gk-tour-dates__heading { + margin: 0 0 8px 0; + font-family: "Bebas Neue", sans-serif; + font-weight: 400; + letter-spacing: 0.03em; + line-height: 1; + font-size: clamp(44px, 6vw, 76px); + text-align: {{ section.settings.text_align }}; +} + +.gk-tour-dates__subtext { + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + font-size: 16px; + color: var(--muted); + margin-bottom: 22px; + text-align: {{ section.settings.text_align }}; + max-width: 70ch; +} + +.gk-tour-dates__list { + display: flex; + flex-direction: column; + gap: 10px; +} + +.gk-date-row { + display: grid; + grid-template-columns: minmax(160px, 220px) 1fr auto; + gap: 16px; + align-items: center; + padding: 14px 16px; + border: 1px solid var(--line); + border-radius: 14px; + background: rgba(0,0,0,0.22); + box-shadow: 0 18px 40px rgba(0,0,0,0.28); + transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; +} + +.gk-date-row:hover { + transform: translateY(-1px); + border-color: rgba(232,105,10,0.35); + background: linear-gradient(180deg, rgba(232,105,10,0.14), rgba(0,0,0,0.18)); +} + +.gk-date-row__date { + font-family: "Bebas Neue", sans-serif; + font-weight: 400; + letter-spacing: 0.02em; + color: var(--accent); + font-size: 28px; + line-height: 1; +} + +.gk-date-row__details { + display: flex; + flex-direction: column; + gap: 4px; + min-width: 0; +} + +.gk-date-row__venue { + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + font-size: 18px; + line-height: 1.2; + color: #FFFFFF; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.gk-date-row__descriptor { + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + font-size: 12px; + font-style: italic; + color: rgba(255,255,255,0.50); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.gk-date-row__city { + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 12px; + letter-spacing: 0.10em; + text-transform: uppercase; + color: rgba(255,255,255,0.72); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.gk-date-row__cta { + display: flex; + justify-content: flex-end; +} + +.gk-date-row__btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 10px 14px; + border-radius: 999px; + background: var(--accent); + color: #0D0D0D; + text-decoration: none; + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 12px; + letter-spacing: 0.10em; + text-transform: uppercase; + border: 1px solid var(--accent); + transition: transform 140ms ease, opacity 140ms ease; +} + +.gk-date-row__btn:hover { opacity: 0.92; transform: translateY(-1px); } +.gk-date-row__btn:active { transform: translateY(0); } + +.gk-date-row__soldout { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 10px 14px; + border-radius: 999px; + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 12px; + letter-spacing: 0.10em; + text-transform: uppercase; + color: rgba(255,255,255,0.55); + border: 1px solid rgba(255,255,255,0.18); + background: rgba(0,0,0,0.18); +} + +.gk-tour-dates__more-wrap { + margin-top: 16px; + display: flex; + justify-content: {{ section.settings.text_align }}; +} + +.gk-tour-dates__more { + appearance: none; + border: 1px solid rgba(255,255,255,0.16); + background: rgba(0,0,0,0.22); + color: rgba(255,255,255,0.88); + border-radius: 999px; + padding: 12px 16px; + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 12px; + letter-spacing: 0.10em; + text-transform: uppercase; + cursor: pointer; + transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; +} + +.gk-tour-dates__more:hover { + transform: translateY(-1px); + border-color: rgba(232,105,10,0.30); + background: rgba(0,0,0,0.34); +} + +.gk-tour-dates__empty { + margin-top: 18px; + padding: 16px 0; + border-top: 1px solid var(--line); + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + font-size: 16px; + color: var(--muted); +} + +@media (max-width: 720px) { + .gk-date-row { + grid-template-columns: 1fr; + gap: 10px; + } + .gk-date-row__cta { justify-content: flex-start; } + .gk-date-row__date { font-size: 30px; } +} + +/* ── DATES PAGE STYLE (page.dates template) ───────────────── */ +.gk-dates { + --bg: {{ section.settings.bg_color }}; + --text: #fff; + --muted: rgba(255,255,255,0.72); + --line: rgba(255,255,255,0.10); + --ring: rgba(255,255,255,0.12); + --accent: {{ section.settings.accent_color }}; + --accentGlow: rgba(232,105,10,0.22); + --accentGlowStrong: rgba(232,105,10,0.35); + + background: var(--bg); + color: var(--text); + padding: {{ section.settings.padding_top }}px 20px {{ section.settings.padding_bottom }}px; +} + +.gk-dates__inner { max-width: 1100px; margin: 0 auto; } + +.gk-dates__eyebrow { + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + text-transform: uppercase; + letter-spacing: 0.16em; + font-size: 12px; + color: rgba(255,255,255,0.62); + margin-bottom: 10px; + text-align: {{ section.settings.text_align }}; +} + +.gk-dates__heading { + margin: 0; + font-family: "Bebas Neue", sans-serif; + font-weight: 400; + letter-spacing: 0.03em; + line-height: 1; + font-size: clamp(44px, 6vw, 76px); + text-align: {{ section.settings.text_align }}; +} + +.gk-dates__subtext { + margin-top: 10px; + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + color: var(--muted); + font-size: 16px; + line-height: 1.4; + max-width: 60ch; + text-align: {{ section.settings.text_align }}; +} + +.gk-dates__list { + margin-top: 26px; + display: flex; + flex-direction: column; + gap: 12px; +} + +.gk-date { + position: relative; + display: grid; + grid-template-columns: minmax(170px, 240px) 1fr auto; + gap: 16px; + align-items: center; + padding: 18px 18px; + border-radius: 18px; + border: 1px solid var(--ring); + background: + radial-gradient(1200px 200px at 20% 0%, rgba(255,255,255,0.06), transparent 50%), + linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); + box-shadow: 0 18px 42px rgba(0,0,0,0.32); + transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; +} + +.gk-date::before { + content: ""; + position: absolute; + inset: 0; + border-radius: 18px; + pointer-events: none; + opacity: 0; + transition: opacity 160ms ease; + background: + radial-gradient(800px 160px at 20% 50%, var(--accentGlowStrong), transparent 65%), + linear-gradient(90deg, rgba(232,105,10,0.10), rgba(232,105,10,0.00) 55%); +} + +.gk-date:hover { + transform: translateY(-1px); + border-color: rgba(232,105,10,0.45); + box-shadow: + 0 22px 58px rgba(0,0,0,0.40), + 0 0 0 1px rgba(232,105,10,0.18) inset; +} + +.gk-date:hover::before { opacity: 1; } +.gk-date.is-hidden { display: none; } + +.gk-date__date { + font-family: "Bebas Neue", sans-serif; + font-weight: 400; + letter-spacing: 0.02em; + color: var(--accent); + font-size: 34px; + line-height: 1; + white-space: nowrap; +} + +.gk-date__details { min-width: 0; display: flex; flex-direction: column; gap: 4px; } + +.gk-date__venue { + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + font-size: 20px; + line-height: 1.2; + color: #fff; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.gk-date__descriptor { + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + font-size: 13px; + font-style: italic; + color: rgba(255,255,255,0.50); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.gk-date__city { + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 13px; + letter-spacing: 0.10em; + text-transform: uppercase; + color: rgba(255,255,255,0.70); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.gk-date__cta { display: flex; justify-content: flex-end; } + +.gk-date__pill { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 44px; + padding: 10px 18px; + border-radius: 999px; + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 12px; + letter-spacing: 0.12em; + text-transform: uppercase; + text-decoration: none; + border: 1px solid rgba(255,255,255,0.16); + background: rgba(0,0,0,0.20); + color: rgba(255,255,255,0.86); + transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; +} + +.gk-date__pill--accent { + background: rgba(232,105,10,0.90); + border-color: rgba(232,105,10,0.90); + color: #0D0D0D; +} + +.gk-date__pill:hover { + transform: translateY(-1px); + border-color: rgba(255,255,255,0.26); + background: rgba(0,0,0,0.28); +} + +.gk-date__pill--accent:hover { + background: rgba(232,105,10,0.98); + border-color: rgba(232,105,10,0.98); + box-shadow: 0 10px 26px rgba(232,105,10,0.28); +} + +.gk-date__pill:focus-visible, +.gk-dates__btn:focus-visible { + outline: 2px solid rgba(232,105,10,0.75); + outline-offset: 3px; +} + +.gk-dates__empty { + margin-top: 18px; + padding: 16px 0; + border-top: 1px solid var(--line); + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + font-size: 16px; + color: var(--muted); +} + +.gk-dates__controls { + margin-top: 18px; + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.gk-dates__btn { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 44px; + padding: 10px 16px; + border-radius: 999px; + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 12px; + letter-spacing: 0.12em; + text-transform: uppercase; + border: 1px solid rgba(255,255,255,0.16); + background: rgba(232,105,10,0.90); + color: #0D0D0D; + text-decoration: none; + transition: transform 140ms ease, opacity 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; +} + +.gk-dates__btn:hover { + transform: translateY(-1px); + opacity: 0.96; + box-shadow: 0 10px 26px rgba(232,105,10,0.20); +} + +.gk-dates__btn:active { transform: translateY(0); } + +.gk-dates__btn--ghost { + background: rgba(0,0,0,0.22); + color: rgba(255,255,255,0.86); + border-color: rgba(255,255,255,0.16); + box-shadow: none; +} + +.gk-dates__btn--ghost:hover { + background: rgba(0,0,0,0.30); + border-color: rgba(255,255,255,0.26); + box-shadow: none; +} + +@media (max-width: 820px) { + .gk-date { + grid-template-columns: 1fr; + gap: 10px; + padding: 16px; + } + .gk-date__cta { justify-content: flex-start; } + .gk-date__date { font-size: 32px; } +} +{% endstyle %} + +{% schema %} +{ + "name": "GK Tour Dates", + "settings": [ + { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Tour Dates" }, + { "type": "text", "id": "heading", "label": "Heading", "default": "GREG KOCH DATES" }, + { "type": "text", "id": "subtext", "label": "Subtext", "default": "See upcoming dates below." }, + { "type": "text", "id": "empty_text", "label": "Empty state text", "default": "No upcoming dates. Check back soon." }, + { "type": "text", "id": "more_label", "label": "Show more label (homepage)", "default": "Show more dates" }, + { "type": "text", "id": "show_more_label", "label": "Show more label (dates page)", "default": "Show more dates" }, + { "type": "text", "id": "show_less_label", "label": "Show fewer label (dates page)", "default": "Show fewer dates" }, + { "type": "text", "id": "view_all_label", "label": "View all label", "default": "View all dates" }, + { "type": "url", "id": "view_all_url", "label": "View all URL" }, + { + "type": "select", "id": "text_align", "label": "Text alignment", "default": "left", + "options": [ + { "value": "left", "label": "Left" }, + { "value": "center", "label": "Center" }, + { "value": "right", "label": "Right" } + ] + }, + { "type": "color", "id": "bg_color", "label": "Background color", "default": "#0D0D0D" }, + { "type": "color", "id": "accent_color", "label": "Accent color", "default": "#E8690A" }, + { "type": "range", "id": "padding_top", "label": "Padding top", "min": 0, "max": 120, "step": 4, "default": 64 }, + { "type": "range", "id": "padding_bottom", "label": "Padding bottom", "min": 0, "max": 120, "step": 4, "default": 64 } + ], + "blocks": [ + { + "type": "date", + "name": "Tour Date", + "settings": [ + { + "type": "text", + "id": "date", + "label": "Date", + "info": "Use YYYY-MM-DD format for reliable sorting/filtering. Example: 2026-04-22" + }, + { + "type": "text", + "id": "descriptor", + "label": "Descriptor (optional)", + "info": "Shown in italics under venue. Example: support for Paul Gilbert" + }, + { "type": "text", "id": "venue", "label": "Venue" }, + { "type": "text", "id": "city", "label": "City" }, + { "type": "text", "id": "state", "label": "State / Region" }, + { "type": "url", "id": "ticket_url", "label": "Ticket URL (leave blank for TBA)" }, + { "type": "checkbox", "id": "sold_out", "label": "Sold out", "default": false } + ] + } + ], + "presets": [ + { "name": "GK Tour Dates" } + ] +} +{% endschema %} diff --git a/sections/gk-tour-dates-slot.liquid b/sections/gk-tour-dates-slot.liquid new file mode 100644 index 00000000000..f926c6cd5f2 --- /dev/null +++ b/sections/gk-tour-dates-slot.liquid @@ -0,0 +1,14 @@ +
+ +{% schema %} +{ + "name": "GK Tour Dates (slot)", + "settings": [ + { + "type": "paragraph", + "content": "This section only marks the position of the tour dates on the page. To add, edit, or reorder dates, scroll down in the sidebar and click the GK Tour Dates section — that is where the date blocks live." + } + ], + "presets": [{ "name": "GK Tour Dates (slot)" }] +} +{% endschema %} diff --git a/sections/gk-tour-dates.liquid b/sections/gk-tour-dates.liquid new file mode 100644 index 00000000000..83cf2e814ad --- /dev/null +++ b/sections/gk-tour-dates.liquid @@ -0,0 +1,880 @@ +{% comment %} + GK Tour Dates — unified section (ONE instance, shared block data) + ───────────────────────────────────────────────────────────────── + This section lives in layout/theme.liquid as a STATIC section so + the same instance (same blocks / same dates) renders on both: + • template = index → home variant (gk-date-row classes) + • template = page/dates → page variant (gk-date classes) + + All block editing happens in ONE place in the Theme Editor. + The section detects the current template and adapts: + - visible rows before "show more" + - CSS class namespace (gk-date-row vs gk-date) + - CTA / reveal behaviour + + Block type: show + show_date — parseable date string, e.g. "April 22, 2026" + venue_name — venue name + city_state — "City, ST" + descriptor — optional sub-line, e.g. "support for Paul Gilbert" + ticket_url — leave blank → TBA + is_sold_out — check for SOLD OUT + + Date logic: + • Blocks are sorted ascending by show_date + • Past dates are filtered out automatically + • Unparseable dates are kept visible (safe fallback) +{% endcomment %} + +{%- liquid + assign today_ymd = 'now' | date: '%Y-%m-%d' + assign today_ts = today_ymd | date: '%s' | plus: 0 + + comment + Detect which visual variant to use based on current template. + index template → home variant (gk-date-row) + page.dates template → page variant (gk-date) + endcomment + + if template.name == 'index' + assign is_home = true + assign row_prefix = 'gk-date-row' + assign apply_hidden = false + assign initial_visible = section.settings.home_visible_count | default: 3 + assign reveal_step = section.settings.home_reveal_step | default: 3 + else + assign is_home = false + assign row_prefix = 'gk-date' + assign apply_hidden = true + assign initial_visible = section.settings.page_visible_count | default: 10 + assign reveal_step = section.settings.page_reveal_step | default: 10 + endif +-%} + +{%- comment -%} + ── STEP 1: Build a sortable key list of UPCOMING block indices ── + Sort key = "YYYYMMDD_blockIndex" → lexicographic sort is date-correct. + Unparseable dates get key "99999999_..." so they sort to the end + and stay visible (safe fallback). +{%- endcomment -%} +{%- assign _pairs = '' -%} +{%- for block in section.blocks -%} + {%- if block.type == 'show' -%} + {%- assign _raw = block.settings.show_date | default: '' | strip -%} + {%- assign _show_ts = _raw | date: '%s' | plus: 0 -%} + {%- assign _keep = true -%} + + {%- comment -%} Only hide dates we can CONFIRM are in the past (valid year ≥ 2020 + before today) {%- endcomment -%} + {%- if _raw == blank -%} + {%- assign _has_other = block.settings.venue_name | default: '' | append: block.settings.city_state | default: '' | strip -%} + {%- if _has_other == blank -%} + {%- assign _keep = false -%} + {%- endif -%} + {%- elsif _show_ts != 0 -%} + {%- assign _parsed_year = _raw | date: '%Y' | plus: 0 -%} + {%- if _parsed_year >= 2020 and _show_ts < today_ts -%} + {%- assign _keep = false -%} + {%- endif -%} + {%- endif -%} + + {%- if _keep -%} + {%- assign _sort_key = _raw | date: '%Y%m%d' -%} + {%- if _sort_key == blank -%} + {%- assign _sort_key = '99999999' -%} + {%- else -%} + {%- assign _sk_year = _sort_key | slice: 0, 4 | plus: 0 -%} + {%- if _sk_year < 2020 -%}{%- assign _sort_key = '99999999' -%}{%- endif -%} + {%- endif -%} + {%- assign _pairs = _pairs | append: _sort_key | append: '_' | append: forloop.index0 | append: '|' -%} + {%- endif -%} + {%- endif -%} +{%- endfor -%} + +{%- assign _sorted_pairs = _pairs | split: '|' | sort -%} + +{%- comment -%} Count upcoming dates for show-more logic {%- endcomment -%} +{%- assign upcoming_count = 0 -%} +{%- for _p in _sorted_pairs -%} + {%- if _p != blank -%}{%- assign upcoming_count = upcoming_count | plus: 1 -%}{%- endif -%} +{%- endfor -%} + +{%- comment -%}── FALLBACK: no blocks yet → count from snippet (settings textarea / hardcoded list) ──{%- endcomment -%} +{%- if section.blocks.size == 0 -%} + {%- capture _fc -%}{%- render 'gk-tour-dates-shared', mode: 'count' -%}{%- endcapture -%} + {%- assign upcoming_count = _fc | strip | plus: 0 -%} +{%- endif -%} + +{%- comment -%} Shared section wrapper class {%- endcomment -%} +{%- if is_home -%} + {%- assign wrapper_class = 'gk-tour-dates gk-tour-dates--reveal' -%} + {%- assign inner_class = 'gk-tour-dates__inner' -%} + {%- assign eyebrow_class = 'gk-tour-dates__eyebrow' -%} + {%- assign heading_class = 'gk-tour-dates__heading' -%} + {%- assign subtext_class = 'gk-tour-dates__subtext' -%} + {%- assign list_class = 'gk-tour-dates__list' -%} + {%- assign empty_class = 'gk-tour-dates__empty' -%} +{%- else -%} + {%- assign wrapper_class = 'gk-dates' -%} + {%- assign inner_class = 'gk-dates__inner' -%} + {%- assign eyebrow_class = 'gk-dates__eyebrow' -%} + {%- assign heading_class = 'gk-dates__heading' -%} + {%- assign subtext_class = 'gk-dates__subtext' -%} + {%- assign list_class = 'gk-dates__list' -%} + {%- assign empty_class = 'gk-dates__empty' -%} +{%- endif -%} + +
+
+ + {%- if section.settings.eyebrow != blank -%} +
{{ section.settings.eyebrow }}
+ {%- endif -%} + + {%- if section.settings.heading != blank -%} +

{{ section.settings.heading }}

+ {%- endif -%} + + {%- if section.settings.subtext != blank -%} +
{{ section.settings.subtext }}
+ {%- endif -%} + +
+ {%- if section.blocks.size == 0 -%} + {%- comment -%}── FALLBACK: render from snippet until blocks are populated ──{%- endcomment -%} + {%- if is_home -%} + {%- render 'gk-tour-dates-shared', mode: 'render_home' -%} + {%- else -%} + {%- render 'gk-tour-dates-shared', mode: 'render', row_prefix: 'gk-date', visible_count: initial_visible, use_hidden_class: true -%} + {%- endif -%} + {%- else -%} + {%- assign render_idx = 0 -%} + {%- for _pair in _sorted_pairs -%} + {%- if _pair != blank -%} + {%- assign _block_idx = _pair | split: '_' | last | plus: 0 -%} + {%- assign _b = section.blocks[_block_idx] -%} + + {%- assign show_date = _b.settings.show_date | default: '' | strip -%} + {%- assign venue_name = _b.settings.venue_name | default: '' | strip -%} + {%- assign city_state = _b.settings.city_state | default: '' | strip -%} + {%- assign descriptor = _b.settings.descriptor | default: '' | strip -%} + {%- assign ticket_url = _b.settings.ticket_url | default: '' | strip -%} + {%- assign is_sold_out = _b.settings.is_sold_out -%} + + {%- assign extra_class = '' -%} + {%- if apply_hidden and render_idx >= initial_visible -%} + {%- assign extra_class = ' is-hidden' -%} + {%- endif -%} + +
+
{{ show_date }}
+ +
+ {%- if venue_name != blank -%} +
{{ venue_name }}
+ {%- endif -%} + {%- if descriptor != blank -%} +
{{ descriptor }}
+ {%- endif -%} + {%- if city_state != blank -%} +
{{ city_state }}
+ {%- endif -%} +
+ +
+ {%- if is_sold_out -%} + {%- if is_home -%} + SOLD OUT + {%- else -%} + SOLD OUT + {%- endif -%} + {%- elsif ticket_url != blank -%} + {%- if is_home -%} + GET TICKETS + {%- else -%} + GET TICKETS + {%- endif -%} + {%- else -%} + {%- if is_home -%} + TBA + {%- else -%} + TBA + {%- endif -%} + {%- endif -%} +
+
+ + {%- assign render_idx = render_idx | plus: 1 -%} + {%- endif -%} + {%- endfor -%} + {%- endif -%} +
+ + {%- if upcoming_count == 0 -%} +
{{ section.settings.empty_text }}
+ {%- endif -%} + + {%- comment -%} ── Controls ── {%- endcomment -%} + {%- if is_home -%} + {%- if upcoming_count > initial_visible -%} +
+ +
+ {%- endif -%} + {%- else -%} + {%- if upcoming_count > initial_visible -%} +
+ + + {%- if section.settings.view_all_url != blank -%} + + {{ section.settings.view_all_label }} + + {%- endif -%} +
+ {%- elsif section.settings.view_all_url != blank -%} +
+ + {{ section.settings.view_all_label }} + +
+ {%- endif -%} + {%- endif -%} + +
+
+ +{%- comment -%} ── JavaScript ── {%- endcomment -%} +{%- if is_home and upcoming_count > initial_visible -%} + +{%- elsif is_home == false and upcoming_count > initial_visible -%} + +{%- endif -%} + +{% style %} +/* ─── HOME VARIANT: .gk-tour-dates + .gk-date-row ─────────────────── */ +.gk-tour-dates { + --bg: {{ section.settings.bg_color }}; + --text: #FFFFFF; + --line: rgba(255,255,255,0.12); + --muted: rgba(255,255,255,0.72); + --accent: {{ section.settings.accent_color }}; + + background: var(--bg); + color: var(--text); + padding: {{ section.settings.padding_top }}px 20px {{ section.settings.padding_bottom }}px; +} + +.gk-tour-dates__inner { + max-width: 1100px; + margin: 0 auto; +} + +.gk-tour-dates__eyebrow { + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + text-transform: uppercase; + letter-spacing: 0.16em; + font-size: 12px; + color: rgba(255,255,255,0.62); + margin-bottom: 10px; + text-align: {{ section.settings.text_align }}; +} + +.gk-tour-dates__heading { + margin: 0 0 8px 0; + font-family: "Bebas Neue", sans-serif; + font-weight: 400; + letter-spacing: 0.03em; + line-height: 1; + font-size: clamp(44px, 6vw, 76px); + text-align: {{ section.settings.text_align }}; +} + +.gk-tour-dates__subtext { + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + font-size: 16px; + color: var(--muted); + margin-bottom: 22px; + text-align: {{ section.settings.text_align }}; + max-width: 70ch; +} + +.gk-tour-dates__list { + display: flex; + flex-direction: column; + gap: 10px; +} + +.gk-date-row { + display: grid; + grid-template-columns: minmax(160px, 220px) 1fr auto; + gap: 16px; + align-items: center; + padding: 14px 16px; + border: 1px solid var(--line); + border-radius: 14px; + background: rgba(0,0,0,0.22); + box-shadow: 0 18px 40px rgba(0,0,0,0.28); + transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; +} + +.gk-date-row:hover { + transform: translateY(-1px); + border-color: rgba(232,105,10,0.35); + background: linear-gradient(180deg, rgba(232,105,10,0.14), rgba(0,0,0,0.18)); +} + +.gk-date-row__date { + font-family: "Bebas Neue", sans-serif; + font-weight: 400; + letter-spacing: 0.02em; + color: var(--accent); + font-size: 28px; + line-height: 1; +} + +.gk-date-row__details { + display: flex; + flex-direction: column; + gap: 4px; + min-width: 0; +} + +.gk-date-row__venue { + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + font-size: 18px; + line-height: 1.2; + color: #FFFFFF; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.gk-date-row__descriptor { + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + font-size: 12px; + font-style: italic; + color: rgba(255,255,255,0.50); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.gk-date-row__city { + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 12px; + letter-spacing: 0.10em; + text-transform: uppercase; + color: rgba(255,255,255,0.72); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.gk-date-row__cta { + display: flex; + justify-content: flex-end; +} + +.gk-date-row__btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 10px 14px; + border-radius: 999px; + background: var(--accent); + color: #0D0D0D; + text-decoration: none; + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 12px; + letter-spacing: 0.10em; + text-transform: uppercase; + border: 1px solid var(--accent); + transition: transform 140ms ease, opacity 140ms ease; +} + +.gk-date-row__btn:hover { opacity: 0.92; transform: translateY(-1px); } +.gk-date-row__btn:active { transform: translateY(0); } + +.gk-date-row__soldout { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 10px 14px; + border-radius: 999px; + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 12px; + letter-spacing: 0.10em; + text-transform: uppercase; + color: rgba(255,255,255,0.55); + border: 1px solid rgba(255,255,255,0.18); + background: rgba(0,0,0,0.18); +} + +.gk-tour-dates__more-wrap { + margin-top: 16px; + display: flex; + justify-content: {{ section.settings.text_align }}; +} + +.gk-tour-dates__more { + appearance: none; + border: 1px solid rgba(255,255,255,0.16); + background: rgba(0,0,0,0.22); + color: rgba(255,255,255,0.88); + border-radius: 999px; + padding: 12px 16px; + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 12px; + letter-spacing: 0.10em; + text-transform: uppercase; + cursor: pointer; + transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; +} + +.gk-tour-dates__more:hover { + transform: translateY(-1px); + border-color: rgba(232,105,10,0.30); + background: rgba(0,0,0,0.34); +} + +.gk-tour-dates__empty { + margin-top: 18px; + padding: 16px 0; + border-top: 1px solid var(--line); + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + font-size: 16px; + color: var(--muted); +} + +@media (max-width: 720px) { + .gk-date-row { + grid-template-columns: 1fr; + gap: 10px; + } + .gk-date-row__cta { justify-content: flex-start; } + .gk-date-row__date { font-size: 30px; } +} + +/* ─── PAGE VARIANT: .gk-dates + .gk-date ──────────────────────────── */ +.gk-dates { + --bg: {{ section.settings.bg_color }}; + --text: #fff; + --muted: rgba(255,255,255,0.72); + --line: rgba(255,255,255,0.10); + --ring: rgba(255,255,255,0.12); + --accent: {{ section.settings.accent_color }}; + --accentGlow: rgba(232,105,10,0.22); + --accentGlowStrong:rgba(232,105,10,0.35); + + background: var(--bg); + color: var(--text); + padding: {{ section.settings.padding_top }}px 20px {{ section.settings.padding_bottom }}px; +} + +.gk-dates__inner { max-width: 1100px; margin: 0 auto; } + +.gk-dates__eyebrow { + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + text-transform: uppercase; + letter-spacing: 0.16em; + font-size: 12px; + color: rgba(255,255,255,0.62); + margin-bottom: 10px; + text-align: {{ section.settings.text_align }}; +} + +.gk-dates__heading { + margin: 0; + font-family: "Bebas Neue", sans-serif; + font-weight: 400; + letter-spacing: 0.03em; + line-height: 1; + font-size: clamp(44px, 6vw, 76px); + text-align: {{ section.settings.text_align }}; +} + +.gk-dates__subtext { + margin-top: 10px; + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + color: var(--muted); + font-size: 16px; + line-height: 1.4; + max-width: 60ch; + text-align: {{ section.settings.text_align }}; +} + +.gk-dates__list { + margin-top: 26px; + display: flex; + flex-direction: column; + gap: 12px; +} + +.gk-date { + position: relative; + display: grid; + grid-template-columns: minmax(170px, 240px) 1fr auto; + gap: 16px; + align-items: center; + padding: 18px 18px; + border-radius: 18px; + border: 1px solid var(--ring); + background: + radial-gradient(1200px 200px at 20% 0%, rgba(255,255,255,0.06), transparent 50%), + linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); + box-shadow: 0 18px 42px rgba(0,0,0,0.32); + transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; +} + +.gk-date::before { + content: ""; + position: absolute; + inset: 0; + border-radius: 18px; + pointer-events: none; + opacity: 0; + transition: opacity 160ms ease; + background: + radial-gradient(800px 160px at 20% 50%, var(--accentGlowStrong), transparent 65%), + linear-gradient(90deg, rgba(232,105,10,0.10), rgba(232,105,10,0.00) 55%); +} + +.gk-date:hover { + transform: translateY(-1px); + border-color: rgba(232,105,10,0.45); + box-shadow: + 0 22px 58px rgba(0,0,0,0.40), + 0 0 0 1px rgba(232,105,10,0.18) inset; +} + +.gk-date:hover::before { opacity: 1; } +.gk-date.is-hidden { display: none; } + +.gk-date__date { + font-family: "Bebas Neue", sans-serif; + font-weight: 400; + letter-spacing: 0.02em; + color: var(--accent); + font-size: 34px; + line-height: 1; + white-space: nowrap; +} + +.gk-date__details { min-width: 0; display: flex; flex-direction: column; gap: 4px; } + +.gk-date__venue { + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + font-size: 20px; + line-height: 1.2; + color: #fff; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.gk-date__descriptor { + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + font-size: 13px; + font-style: italic; + color: rgba(255,255,255,0.50); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.gk-date__city { + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 13px; + letter-spacing: 0.10em; + text-transform: uppercase; + color: rgba(255,255,255,0.70); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.gk-date__cta { display: flex; justify-content: flex-end; } + +.gk-date__pill { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 44px; + padding: 10px 18px; + border-radius: 999px; + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 12px; + letter-spacing: 0.12em; + text-transform: uppercase; + text-decoration: none; + border: 1px solid rgba(255,255,255,0.16); + background: rgba(0,0,0,0.20); + color: rgba(255,255,255,0.86); + transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; +} + +.gk-date__pill--accent { + background: rgba(232,105,10,0.90); + border-color: rgba(232,105,10,0.90); + color: #0D0D0D; +} + +.gk-date__pill--muted { } + +.gk-date__pill:hover { + transform: translateY(-1px); + border-color: rgba(255,255,255,0.26); + background: rgba(0,0,0,0.28); +} + +.gk-date__pill--accent:hover { + background: rgba(232,105,10,0.98); + border-color: rgba(232,105,10,0.98); + box-shadow: 0 10px 26px rgba(232,105,10,0.28); +} + +.gk-date__pill:focus-visible, +.gk-dates__btn:focus-visible { + outline: 2px solid rgba(232,105,10,0.75); + outline-offset: 3px; +} + +.gk-dates__empty { + margin-top: 18px; + padding: 16px 0; + border-top: 1px solid var(--line); + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + font-size: 16px; + color: var(--muted); +} + +.gk-dates__controls { + margin-top: 18px; + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.gk-dates__btn { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 44px; + padding: 10px 16px; + border-radius: 999px; + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 12px; + letter-spacing: 0.12em; + text-transform: uppercase; + border: 1px solid rgba(255,255,255,0.16); + background: rgba(232,105,10,0.90); + color: #0D0D0D; + text-decoration: none; + transition: transform 140ms ease, opacity 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; +} + +.gk-dates__btn:hover { transform: translateY(-1px); opacity: 0.96; box-shadow: 0 10px 26px rgba(232,105,10,0.20); } +.gk-dates__btn:active { transform: translateY(0); } + +.gk-dates__btn--ghost { + background: rgba(0,0,0,0.22); + color: rgba(255,255,255,0.86); + border-color: rgba(255,255,255,0.16); + box-shadow: none; +} + +.gk-dates__btn--ghost:hover { + background: rgba(0,0,0,0.30); + border-color: rgba(255,255,255,0.26); + box-shadow: none; +} + +@media (max-width: 820px) { + .gk-date { + grid-template-columns: 1fr; + gap: 10px; + padding: 16px; + } + .gk-date__cta { justify-content: flex-start; } + .gk-date__date { font-size: 32px; } +} +{% endstyle %} + +{% schema %} +{ + "name": "GK Tour Dates", + "blocks": [ + { + "type": "show", + "name": "Show", + "settings": [ + { + "type": "text", + "id": "show_date", + "label": "Date", + "info": "IMPORTANT: Include the full year — e.g. February 28, 2026. Dates without a year may not display correctly. Past dates are hidden automatically." + }, + { + "type": "text", + "id": "venue_name", + "label": "Venue" + }, + { + "type": "text", + "id": "city_state", + "label": "City, State", + "info": "e.g. Omaha, NE" + }, + { + "type": "text", + "id": "descriptor", + "label": "Descriptor (optional)", + "info": "e.g. support for Paul Gilbert — renders in italic under the venue name" + }, + { + "type": "url", + "id": "ticket_url", + "label": "Ticket URL", + "info": "Leave blank to show TBA" + }, + { + "type": "checkbox", + "id": "is_sold_out", + "label": "Sold out", + "default": false + } + ] + } + ], + "settings": [ + { + "type": "header", + "content": "Header text" + }, + { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Tour Dates" }, + { "type": "text", "id": "heading", "label": "Heading", "default": "GREG KOCH DATES" }, + { "type": "text", "id": "subtext", "label": "Subtext", "default": "See upcoming dates below." }, + { "type": "text", "id": "empty_text", "label": "Empty state text", "default": "No upcoming dates. Check back soon." }, + { + "type": "select", + "id": "text_align", + "label": "Text alignment", + "default": "left", + "options": [ + { "value": "left", "label": "Left" }, + { "value": "center", "label": "Center" }, + { "value": "right", "label": "Right" } + ] + }, + { + "type": "header", + "content": "Homepage settings" + }, + { "type": "range", "id": "home_visible_count", "label": "Initially visible (homepage)", "min": 1, "max": 20, "step": 1, "default": 3 }, + { "type": "range", "id": "home_reveal_step", "label": "Reveal step (homepage)", "min": 1, "max": 20, "step": 1, "default": 3 }, + { "type": "text", "id": "home_more_label", "label": "Show more button label", "default": "Show more dates" }, + { + "type": "header", + "content": "Dates page settings" + }, + { "type": "range", "id": "page_visible_count", "label": "Initially visible (dates page)", "min": 1, "max": 30, "step": 1, "default": 10 }, + { "type": "range", "id": "page_reveal_step", "label": "Reveal step (dates page)", "min": 1, "max": 30, "step": 1, "default": 10 }, + { "type": "text", "id": "page_more_label", "label": "Show more label", "default": "Show more dates" }, + { "type": "text", "id": "page_less_label", "label": "Show fewer label", "default": "Show fewer dates" }, + { "type": "text", "id": "view_all_label", "label": "View all label", "default": "View all dates" }, + { "type": "url", "id": "view_all_url", "label": "View all URL" }, + { + "type": "header", + "content": "Style" + }, + { "type": "color", "id": "bg_color", "label": "Background color", "default": "#0D0D0D" }, + { "type": "color", "id": "accent_color", "label": "Accent color", "default": "#E8690A" }, + { "type": "range", "id": "padding_top", "label": "Padding top", "min": 0, "max": 120, "step": 4, "default": 64 }, + { "type": "range", "id": "padding_bottom", "label": "Padding bottom", "min": 0, "max": 120, "step": 4, "default": 64 } + ], + "presets": [ + { "name": "GK Tour Dates" } + ] +} +{% endschema %} diff --git a/sections/gk-vault-optin.liquid b/sections/gk-vault-optin.liquid new file mode 100644 index 00000000000..06d426cda71 --- /dev/null +++ b/sections/gk-vault-optin.liquid @@ -0,0 +1,1155 @@ +{% comment %} + GK Vault Opt-in (Landing Page) - premium dark/orange rebuild + - Matches the GK Shop + Press design system exactly: + single burnt-orange accent (#C8601A), highlight (#f0a060), near-black text on + orange molten buttons, glass card depth (gradient bg + 1px top-edge highlight + + soft shadow), kicker labels, bold condensed all-caps headings. + - Sections: Hero / Opt-in form (photo + Klaviyo form) / What's inside grid. + - Greg photo is an image_picker so it is swappable in the Shopify theme editor. + - Form submits to Klaviyo via the client subscriptions API (Option A) so fields + stay theme-editable and submissions land in Greg's Vault list. + - All motion respects prefers-reduced-motion. Scoped under .gk-vault only. +{% endcomment %} + +{%- assign accent = '#C8601A' -%} + +{%- comment -%} Color the highlight phrase inside the headline orange. {%- endcomment -%} +{%- assign heading_safe = section.settings.heading | escape -%} +{%- if section.settings.highlight_text != blank -%} + {%- assign hl_safe = section.settings.highlight_text | escape -%} + {%- capture hl_span -%}{{ hl_safe }}{%- endcapture -%} + {%- assign heading_html = heading_safe | replace: hl_safe, hl_span -%} +{%- else -%} + {%- assign heading_html = heading_safe -%} +{%- endif -%} + +
+ {% comment %} ============ HERO ============ {% endcomment %} +
+ +
+ + + + {% if section.settings.kicker != blank %} +
{{ section.settings.kicker | escape }}
+ {% endif %} + + {% if section.settings.heading != blank %} +

{{ heading_html }}

+ {% endif %} + + {% if section.settings.subhead != blank %} +

{{ section.settings.subhead | escape }}

+ {% endif %} + + {% if section.settings.italic_line != blank %} +

{{ section.settings.italic_line | escape }}

+ {% endif %} + +
+
+ {{ section.settings.stat_1_num | escape }} + {{ section.settings.stat_1_label | escape }} +
+
+ {{ section.settings.stat_2_num | escape }} + {{ section.settings.stat_2_label | escape }} +
+
+ {{ section.settings.stat_3_num | escape }} + {{ section.settings.stat_3_label | escape }} +
+
+
+
+ + {% comment %} ============ OPT-IN FORM ============ {% endcomment %} +
+
+ +
+ {% if section.settings.greg_photo != blank %} +
+ {{ + section.settings.greg_photo + | image_url: width: 1200 + | image_tag: + loading: 'lazy', + sizes: '(max-width: 880px) 100vw, 480px', + widths: '480, 640, 800, 1000, 1200', + class: 'gk-vault__photo', + alt: section.settings.greg_photo.alt | default: 'Greg Koch' + }} +
+ {% else %} +
+ {{ 'image' | placeholder_svg_tag: 'gk-vault__photo placeholder-svg' }} +
+ {% endif %} +
+ +
+ + + {% if section.settings.form_kicker != blank %} +
{{ section.settings.form_kicker | escape }}
+ {% endif %} + {% if section.settings.form_heading != blank %} +

{{ section.settings.form_heading | escape }}

+ {% endif %} + +
+
+
+ + +
+
+ + +
+
+ +
+ + +
+ + + + + + +
+ + +
+ +
+
+ + {% comment %} ============ WHAT'S INSIDE ============ {% endcomment %} + {%- assign vault_blocks = section.blocks | where: 'type', 'vault_item' -%} + {%- if section.settings.inside_heading != blank or vault_blocks.size > 0 -%} +
+
+ {% if section.settings.inside_kicker != blank %} +
{{ section.settings.inside_kicker | escape }}
+ {% endif %} + {% if section.settings.inside_heading != blank %} +

{{ section.settings.inside_heading | escape }}

+ {% endif %} + {% if section.settings.inside_intro != blank %} +

{{ section.settings.inside_intro | escape }}

+ {% endif %} +
+ + {%- if vault_blocks.size > 0 -%} +
+ {%- for block in section.blocks -%} + {%- if block.type == 'vault_item' -%} +
+ + {% if block.settings.bonus %} + Bonus + {% endif %} + {% if block.settings.title != blank %} +

{{ block.settings.title | escape }}

+ {% endif %} + {% if block.settings.description != blank %} +

{{ block.settings.description | escape }}

+ {% endif %} +
+ {%- endif -%} + {%- endfor -%} +
+ {%- endif -%} + + {% if section.settings.closing_line != blank %} + {%- assign closing_safe = section.settings.closing_line | escape -%} + {%- if section.settings.closing_highlight != blank -%} + {%- assign chl = section.settings.closing_highlight | escape -%} + {%- capture chl_span -%}{{ chl }}{%- endcapture -%} + {%- assign closing_html = closing_safe | replace: chl, chl_span -%} + {%- else -%} + {%- assign closing_html = closing_safe -%} + {%- endif -%} +

{{ closing_html }}

+ {% endif %} +
+ {%- endif -%} + + {% style %} + /* ========================================================= + GK VAULT OPT-IN (scoped under .gk-vault) + Single accent: {{ accent }} + ========================================================= */ + .gk-vault { + --gk-accent: {{ accent }}; + --gk-accent-soft: rgba(200, 96, 26, 0.6); + --gk-accent-glow: rgba(200, 96, 26, 0.28); + --gk-hi: #f0a060; + --gk-card-line: rgba(255, 255, 255, 0.12); + position: relative; + background: #0D0D0D; + color: #f4f4f5; + overflow: hidden; + } + + .gk-vault__wrap { + width: min(1140px, calc(100% - 48px)); + margin: 0 auto; + } + + /* ---- Hero ---- */ + .gk-vault__hero { + position: relative; + padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 64px); + text-align: center; + } + + .gk-vault__hero-glow { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: min(720px, 90%); + height: 440px; + background: radial-gradient(ellipse at center, rgba(200, 96, 26, 0.20) 0%, transparent 66%); + pointer-events: none; + z-index: 0; + } + + .gk-vault__hero-inner { + position: relative; + z-index: 1; + } + + .gk-vault__vaultTile { + position: relative; + width: 72px; + height: 72px; + margin: 0 auto 22px; + border-radius: 16px; + display: grid; + place-items: center; + color: var(--gk-accent); + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 60%), + rgba(200, 96, 26, 0.08); + border: 1px solid rgba(200, 96, 26, 0.35); + box-shadow: + 0 10px 30px -12px rgba(0, 0, 0, 0.8), + inset 0 1px 0 rgba(255, 255, 255, 0.12), + 0 0 28px rgba(200, 96, 26, 0.22); + overflow: hidden; + } + + .gk-vault__vaultGlow { + position: absolute; + inset: 0; + border-radius: inherit; + background: radial-gradient(circle at 50% 45%, var(--gk-accent-glow), transparent 68%); + opacity: 0.5; + transform: scale(0.85); + animation: gkv-breathe 4s ease-in-out infinite; + pointer-events: none; + } + + .gk-vault__vaultIco { + position: relative; + width: 36px; + height: 36px; + } + + .gk-vault__kicker { + letter-spacing: 0.22em; + text-transform: uppercase; + font-size: 12px; + font-weight: 800; + color: var(--gk-accent); + margin-bottom: 14px; + } + + .gk-vault__heading { + margin: 0 auto; + max-width: 16ch; + line-height: 0.95; + font-weight: 900; + letter-spacing: -0.02em; + text-transform: uppercase; + font-size: clamp(40px, 7vw, 78px); + color: #ffffff; + } + + .gk-vault__hl { color: var(--gk-accent); } + + .gk-vault__subhead { + margin: 18px auto 0; + max-width: 52ch; + font-size: clamp(16px, 2.2vw, 19px); + line-height: 1.55; + opacity: 0.85; + } + + .gk-vault__italic { + margin: 12px auto 0; + max-width: 52ch; + font-style: italic; + font-size: 15px; + line-height: 1.55; + color: var(--gk-hi); + opacity: 0.85; + } + + /* Stat row: 3 cells split by hairlines */ + .gk-vault__stats { + margin: clamp(30px, 4vw, 46px) auto 0; + max-width: 620px; + display: grid; + grid-template-columns: repeat(3, 1fr); + border: 1px solid var(--gk-card-line); + border-radius: 14px; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); + box-shadow: + 0 10px 30px -12px rgba(0, 0, 0, 0.8), + inset 0 1px 0 rgba(255, 255, 255, 0.07); + overflow: hidden; + } + + .gk-vault__stat { + padding: 22px 14px; + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + } + + .gk-vault__stat + .gk-vault__stat { + border-left: 1px solid var(--gk-card-line); + } + + .gk-vault__statNum { + font-size: clamp(28px, 5vw, 40px); + font-weight: 900; + line-height: 1; + color: var(--gk-accent); + } + + .gk-vault__statLabel { + font-size: 11px; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; + opacity: 0.7; + } + + /* ---- Opt-in (two-column) ---- */ + .gk-vault__optin { + display: grid; + grid-template-columns: 0.9fr 1.1fr; + gap: clamp(20px, 3vw, 40px); + align-items: stretch; + padding: clamp(20px, 3vw, 36px) 0 clamp(44px, 6vw, 80px); + } + + .gk-vault__photoCol { display: flex; } + + .gk-vault__photoFrame { + position: relative; + width: 100%; + border-radius: 16px; + overflow: hidden; + border: 1px solid var(--gk-card-line); + box-shadow: + 0 18px 44px -16px rgba(0, 0, 0, 0.8), + inset 0 1px 0 rgba(255, 255, 255, 0.08); + background: rgba(255, 255, 255, 0.03); + } + + .gk-vault__photoFrame::after { + content: ""; + position: absolute; + top: 0; + left: 14%; + right: 14%; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); + pointer-events: none; + z-index: 2; + } + + .gk-vault__photo { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } + + .gk-vault__photoFrame--empty .gk-vault__photo { + aspect-ratio: 4 / 5; + background: rgba(255, 255, 255, 0.04); + } + + /* Form glass card */ + .gk-vault__formCard { + position: relative; + border-radius: 16px; + padding: clamp(24px, 3vw, 40px); + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 22%), + rgba(255, 255, 255, 0.04); + border: 1px solid var(--gk-card-line); + box-shadow: + 0 18px 44px -16px rgba(0, 0, 0, 0.8), + inset 0 1px 0 rgba(255, 255, 255, 0.07); + overflow: hidden; + } + + .gk-vault__formEdge { + position: absolute; + top: 0; + left: 14%; + right: 14%; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); + pointer-events: none; + } + + .gk-vault__formKicker { + letter-spacing: 0.18em; + text-transform: uppercase; + font-size: 11px; + font-weight: 800; + color: var(--gk-accent); + margin-bottom: 10px; + } + + .gk-vault__formHeading { + margin: 0 0 22px; + font-size: clamp(24px, 3.4vw, 34px); + font-weight: 900; + line-height: 1.02; + letter-spacing: -0.01em; + text-transform: uppercase; + } + + .gk-vault__row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 14px; + } + + .gk-vault__field { margin-bottom: 16px; } + + .gk-vault__field label { + display: block; + font-size: 11px; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.6); + margin-bottom: 8px; + } + + .gk-vault__req { color: var(--gk-accent); } + + .gk-vault__field input { + width: 100%; + box-sizing: border-box; + background: rgba(0, 0, 0, 0.35); + border: 1px solid rgba(255, 255, 255, 0.14); + border-radius: 10px; + color: #f4f4f5; + font-size: 16px; + padding: 13px 14px; + outline: none; + transition: border-color 0.2s ease, box-shadow 0.2s ease; + } + + .gk-vault__field input::placeholder { color: rgba(255, 255, 255, 0.32); } + + .gk-vault__field input:focus { + border-color: var(--gk-accent); + box-shadow: 0 0 0 3px rgba(200, 96, 26, 0.28); + } + + .gk-vault__field input.gk-vault--invalid { + border-color: #e0563f; + box-shadow: 0 0 0 3px rgba(224, 86, 63, 0.25); + } + + /* Consent checkbox */ + .gk-vault__consent { + display: flex; + align-items: flex-start; + gap: 12px; + margin: 4px 0 22px; + cursor: pointer; + font-size: 13px; + line-height: 1.5; + color: rgba(255, 255, 255, 0.72); + } + + .gk-vault__consent input { + position: absolute; + opacity: 0; + width: 0; + height: 0; + } + + .gk-vault__consentBox { + flex: 0 0 auto; + width: 20px; + height: 20px; + margin-top: 1px; + border-radius: 6px; + border: 1px solid rgba(255, 255, 255, 0.28); + background: rgba(0, 0, 0, 0.35); + display: grid; + place-items: center; + transition: border-color 0.2s ease, background 0.2s ease; + } + + .gk-vault__consentBox::after { + content: ""; + width: 10px; + height: 6px; + border-left: 2px solid #1a0e04; + border-bottom: 2px solid #1a0e04; + transform: rotate(-45deg) scale(0); + transform-origin: center; + transition: transform 0.18s ease; + margin-top: -2px; + } + + .gk-vault__consent input:checked + .gk-vault__consentBox { + background: var(--gk-accent); + border-color: var(--gk-accent); + } + + .gk-vault__consent input:checked + .gk-vault__consentBox::after { + transform: rotate(-45deg) scale(1); + } + + .gk-vault__consent input:focus-visible + .gk-vault__consentBox { + box-shadow: 0 0 0 3px rgba(200, 96, 26, 0.35); + } + + /* Molten primary submit button + hover shimmer */ + .gk-vault__submit { + position: relative; + width: 100%; + overflow: hidden; + border: none; + border-radius: 12px; + padding: 17px 28px; + cursor: pointer; + font-weight: 800; + font-size: 13px; + letter-spacing: 2.5px; + text-transform: uppercase; + color: #1a0e04; + background: linear-gradient(180deg, #f0a85a 0%, #c8601a 60%, #a8490d 100%); + box-shadow: + 0 1px 0 rgba(255, 255, 255, 0.5) inset, + 0 -3px 8px rgba(100, 40, 0, 0.5) inset, + 0 10px 24px -8px rgba(200, 96, 26, 0.75), + 0 3px 6px rgba(0, 0, 0, 0.6); + transition: transform 0.15s ease, filter 0.25s ease; + } + + .gk-vault__submit:hover { + transform: translateY(-2px); + filter: brightness(1.04); + } + + .gk-vault__submit:focus-visible { + outline: none; + box-shadow: + 0 0 0 3px rgba(200, 96, 26, 0.45), + 0 10px 24px -8px rgba(200, 96, 26, 0.75); + } + + .gk-vault__submit[disabled] { + opacity: 0.7; + cursor: progress; + transform: none; + } + + .gk-vault__submitLabel { position: relative; z-index: 1; } + + .gk-vault__submitSheen { + position: absolute; + top: 0; + left: -120%; + width: 80%; + height: 100%; + background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent); + transform: skewX(-18deg); + pointer-events: none; + } + + .gk-vault__submit:hover .gk-vault__submitSheen { + animation: gkv-sheen 850ms ease; + } + + .gk-vault__formMsg { + margin: 14px 0 0; + font-size: 13px; + line-height: 1.5; + color: #e0563f; + } + + /* Success state */ + .gk-vault__success { + text-align: center; + padding: 16px 0; + } + + .gk-vault__successIco { + width: 56px; + height: 56px; + margin: 0 auto 16px; + border-radius: 50%; + display: grid; + place-items: center; + color: var(--gk-accent); + background: rgba(200, 96, 26, 0.12); + border: 1px solid rgba(200, 96, 26, 0.4); + } + + .gk-vault__successIco svg { width: 28px; height: 28px; } + + .gk-vault__successText { + margin: 0; + font-size: 17px; + font-weight: 700; + line-height: 1.5; + } + + /* ---- What's inside ---- */ + .gk-vault__inside { + padding-bottom: clamp(56px, 8vw, 104px); + } + + .gk-vault__insideHead { + max-width: 720px; + margin: 0 0 clamp(26px, 3.4vw, 40px); + } + + .gk-vault__insideHeading { + margin: 0 0 14px; + font-weight: 900; + letter-spacing: -0.02em; + text-transform: uppercase; + line-height: 0.96; + font-size: clamp(32px, 5.5vw, 56px); + } + + .gk-vault__insideIntro { + margin: 0; + max-width: 62ch; + opacity: 0.82; + font-size: 16px; + line-height: 1.6; + } + + .gk-vault__grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 18px; + } + + .gk-vault__card { + position: relative; + grid-column: span 1; + border-radius: 12px; + padding: 24px 24px 22px; + isolation: isolate; + overflow: hidden; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 22%), + rgba(255, 255, 255, 0.04); + border: 1px solid var(--gk-card-line); + box-shadow: + 0 10px 30px -12px rgba(0, 0, 0, 0.8), + inset 0 1px 0 rgba(255, 255, 255, 0.07); + transition: + transform 220ms cubic-bezier(0.22, 1, 0.36, 1), + border-color 220ms ease, + box-shadow 220ms ease; + opacity: 0; + transform: translateY(16px); + animation: gkv-fadeUp 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards; + animation-delay: var(--gk-delay, 0ms); + } + + .gk-vault__cardEdge { + position: absolute; + top: 0; + left: 14%; + right: 14%; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); + pointer-events: none; + } + + .gk-vault__card:hover { + transform: translateY(-4px); + border-color: var(--gk-accent-soft); + box-shadow: + 0 18px 44px rgba(0, 0, 0, 0.5), + 0 0 30px rgba(200, 96, 26, 0.16), + inset 0 1px 0 rgba(255, 255, 255, 0.06); + } + + /* Bonus card: full width, orange accent */ + .gk-vault__card--bonus { + grid-column: 1 / -1; + border-color: rgba(200, 96, 26, 0.45); + border-top: 2px solid var(--gk-accent); + background: + linear-gradient(180deg, rgba(200, 96, 26, 0.14), rgba(200, 96, 26, 0.03) 40%), + rgba(255, 255, 255, 0.04); + } + + .gk-vault__cardBadge { + display: inline-block; + margin-bottom: 12px; + font-size: 10px; + font-weight: 900; + letter-spacing: 0.14em; + text-transform: uppercase; + color: #1a0e04; + background: var(--gk-accent); + padding: 4px 10px; + border-radius: 999px; + box-shadow: 0 0 16px rgba(200, 96, 26, 0.5); + } + + .gk-vault__cardTitle { + margin: 0 0 10px; + font-size: 18px; + font-weight: 900; + text-transform: uppercase; + letter-spacing: 0.04em; + line-height: 1.12; + color: #ffffff; + } + + .gk-vault__card--bonus .gk-vault__cardTitle { color: var(--gk-hi); } + + .gk-vault__cardDesc { + margin: 0; + font-size: 14px; + line-height: 1.6; + opacity: 0.78; + } + + .gk-vault__closing { + margin: clamp(30px, 4vw, 48px) auto 0; + max-width: 60ch; + text-align: center; + font-size: clamp(17px, 2.4vw, 22px); + font-weight: 700; + line-height: 1.5; + } + + /* ========================================================= + RESPONSIVE + ========================================================= */ + @media (max-width: 880px) { + .gk-vault__optin { + grid-template-columns: 1fr; /* photo stacks above form */ + } + .gk-vault__photoFrame { aspect-ratio: 16 / 11; } + .gk-vault__grid { + grid-template-columns: 1fr; /* cards 1-up */ + } + } + + @media (max-width: 480px) { + .gk-vault__wrap { width: calc(100% - 28px); } + .gk-vault__row { grid-template-columns: 1fr; } + .gk-vault__stat { padding: 18px 8px; } + } + + /* ========================================================= + ANIMATIONS + ========================================================= */ + @keyframes gkv-fadeUp { to { opacity: 1; transform: translateY(0); } } + @keyframes gkv-breathe { + 0%, 100% { opacity: 0.4; transform: scale(0.82); } + 50% { opacity: 0.7; transform: scale(1.04); } + } + @keyframes gkv-sheen { + 0% { left: -120%; } + 100% { left: 140%; } + } + + /* ========================================================= + REDUCED MOTION + ========================================================= */ + @media (prefers-reduced-motion: reduce) { + .gk-vault__card { + opacity: 1 !important; + transform: none !important; + animation: none !important; + transition: none !important; + } + .gk-vault__card:hover { transform: none; } + .gk-vault__vaultGlow { animation: none !important; } + .gk-vault__submit:hover { transform: none; } + .gk-vault__submit:hover .gk-vault__submitSheen { animation: none !important; } + } + {% endstyle %} + + +
+ +{% schema %} +{ + "name": "GK Vault Opt-in", + "tag": "section", + "class": "gk-vault-section", + "settings": [ + { + "type": "header", + "content": "Hero" + }, + { + "type": "text", + "id": "kicker", + "label": "Kicker", + "default": "The Gristle Vault" + }, + { + "type": "text", + "id": "heading", + "label": "Headline", + "default": "Access the Gristle Vault" + }, + { + "type": "text", + "id": "highlight_text", + "label": "Headline phrase in orange", + "info": "This exact text inside the headline renders in the accent orange.", + "default": "Gristle Vault" + }, + { + "type": "textarea", + "id": "subhead", + "label": "Subhead", + "default": "8 videos. 4+ hours. One PDF that ties it all together. All of it free." + }, + { + "type": "text", + "id": "italic_line", + "label": "Italic line", + "default": "Every secret Greg probably shouldn't have shared." + }, + { + "type": "header", + "content": "Stat Row" + }, + { + "type": "text", + "id": "stat_1_num", + "label": "Stat 1 number", + "default": "8" + }, + { + "type": "text", + "id": "stat_1_label", + "label": "Stat 1 label", + "default": "Video Lessons" + }, + { + "type": "text", + "id": "stat_2_num", + "label": "Stat 2 number", + "default": "4+" + }, + { + "type": "text", + "id": "stat_2_label", + "label": "Stat 2 label", + "default": "Hours" + }, + { + "type": "text", + "id": "stat_3_num", + "label": "Stat 3 number", + "default": "1" + }, + { + "type": "text", + "id": "stat_3_label", + "label": "Stat 3 label", + "default": "Master PDF" + }, + { + "type": "header", + "content": "Opt-in Form" + }, + { + "type": "image_picker", + "id": "greg_photo", + "label": "Greg photo", + "info": "Swappable here in the theme editor. Shown left of the form on desktop, above it on mobile." + }, + { + "type": "text", + "id": "form_kicker", + "label": "Form kicker", + "default": "Free Instant Access" + }, + { + "type": "text", + "id": "form_heading", + "label": "Form heading", + "default": "Get the Vault" + }, + { + "type": "text", + "id": "consent_label", + "label": "Consent checkbox label", + "default": "I agree to receiving marketing and promotional materials from Greg Koch." + }, + { + "type": "text", + "id": "submit_label", + "label": "Submit button label", + "default": "GET INSTANT ACCESS" + }, + { + "type": "text", + "id": "success_message", + "label": "Success message", + "default": "Check your email for vault access." + }, + { + "type": "header", + "content": "Klaviyo Connection" + }, + { + "type": "text", + "id": "klaviyo_api_key", + "label": "Klaviyo public API key (company ID)", + "default": "XBDmgJ" + }, + { + "type": "text", + "id": "klaviyo_list_id", + "label": "Klaviyo Vault list ID", + "info": "Find this in Klaviyo under Lists & Segments. Paste the Vault list ID here.", + "default": "REPLACE_WITH_VAULT_LIST_ID" + }, + { + "type": "header", + "content": "What's Inside" + }, + { + "type": "text", + "id": "inside_kicker", + "label": "Section kicker", + "default": "The Full Stash" + }, + { + "type": "text", + "id": "inside_heading", + "label": "Section heading", + "default": "What's Inside the Vault" + }, + { + "type": "textarea", + "id": "inside_intro", + "label": "Intro paragraph", + "default": "Not one throwaway lesson. A full stash of Greg's core techniques, tone ideas, harmonic concepts, gear breakdowns, and real-world playing insights from multiple full-length sessions." + }, + { + "type": "text", + "id": "closing_line", + "label": "Closing line", + "default": "Total value: 4+ hours of instruction, 8 sessions, 1 reference guide. All free." + }, + { + "type": "text", + "id": "closing_highlight", + "label": "Closing phrase in orange", + "default": "All free." + } + ], + "blocks": [ + { + "type": "vault_item", + "name": "Vault item", + "settings": [ + { + "type": "text", + "id": "title", + "label": "Title", + "default": "Chicken Picking Masterclass" + }, + { + "type": "textarea", + "id": "description", + "label": "Description", + "default": "The complete breakdown of Greg's most requested technique, from the thumb-and-finger foundation to full hybrid picking integration." + }, + { + "type": "checkbox", + "id": "bonus", + "label": "Bonus item (full-width orange accent)", + "default": false + } + ] + } + ], + "max_blocks": 16, + "presets": [ + { + "name": "GK Vault Opt-in", + "blocks": [ + { "type": "vault_item", "settings": { "title": "Chicken Picking Masterclass", "description": "The complete breakdown of Greg's most requested technique, from the thumb-and-finger foundation to full hybrid picking integration." } }, + { "type": "vault_item", "settings": { "title": "Travis Picking Deep Dive", "description": "How Greg learned it with a flat pick instead of a thumb pick, and how to build the boom-chuck foundation without rushing." } }, + { "type": "vault_item", "settings": { "title": "Chord Vocabulary Breakdown", "description": "The James Burton ninth bend, Robben Ford chord melody, artificial harmonics, the Allan Holdsworth minor 11th, the Steely Dan sus chord." } }, + { "type": "vault_item", "settings": { "title": "Outside Playing & Harmonic Color", "description": "Pentatonic substitutions, chromatic approaches, diminished arpeggios, the tritone sub, and the Mahavishnu scale." } }, + { "type": "vault_item", "settings": { "title": "Tone & Gear Rundown", "description": "The full live rig: Reverend signature guitars, Fishman Fluence pickups, the Tone King Royalist, and every pedal on the board." } }, + { "type": "vault_item", "settings": { "title": "Blues Soloing Concepts", "description": "Playing over changes, the Jeff Beck whammy and harmonic techniques, self-accompanied blues, the Allman Brothers approach." } }, + { "type": "vault_item", "settings": { "title": "Song Breakdown: Tonus Diabolicus", "description": "Note-for-note construction of a signature composition and where every idea came from." } }, + { "type": "vault_item", "settings": { "title": "Song Breakdown: Spank It", "description": "The 1988 riff that became a cornerstone, with exact right-hand mechanics." } }, + { "type": "vault_item", "settings": { "title": "The Gristle Vault Master Reference PDF", "description": "A 12-page compiled reference covering every technique, concept, voicing, gear spec, and principle from all 8 videos. Built to keep open while you watch.", "bonus": true } } + ] + } + ] +} +{% endschema %} diff --git a/sections/gristle-vault.liquid b/sections/gristle-vault.liquid new file mode 100644 index 00000000000..34f48869af0 --- /dev/null +++ b/sections/gristle-vault.liquid @@ -0,0 +1,374 @@ +
+ + {%- comment -%} ——— Vault door intro (pure CSS swing-open) ——— {%- endcomment -%} + + + {%- comment -%} ——— Atmosphere: stone wall + drifting smoke + torchlight ——— {%- endcomment -%} + + +
+ + {%- comment -%} ——— Hero ——— {%- endcomment -%} +
+

Members Only · The Vault Is Open

+ + {%- if section.settings.hero_logo != blank -%} + + {%- else -%} + + {%- endif -%} + + {% if section.settings.subheading != blank %} +

{{ section.settings.subheading }}

+ {% endif %} + {% if section.settings.body_text != blank %} +

{{ section.settings.body_text }}

+ {% endif %} + +
+ + {%- comment -%} ——— Sessions ——— {%- endcomment -%} + {%- assign video_blocks = section.blocks | where: 'type', 'video' -%} + {% if video_blocks.size > 0 %} +
+ {% for block in video_blocks %} + {%- assign video_id = block.settings.youtube_url | split: 'v=' | last | split: '&' | first -%} + {% if block.settings.youtube_url contains 'youtu.be' %} + {%- assign video_id = block.settings.youtube_url | split: 'youtu.be/' | last | split: '?' | first -%} + {% endif %} + +
+
+ {{ forloop.index | prepend: '0' | slice: -2, 2 }} +
+ {% if video_id != blank %} + + {% else %} +
Paste a YouTube URL in the theme editor
+ {% endif %} +
+
+ +
+ {% if block.settings.video_tag != blank %} +

{{ block.settings.video_tag }}

+ {% endif %} +

+ Session {{ forloop.index }} + {{ block.settings.video_title }} +

+ {% if block.settings.video_description != blank %} +

{{ block.settings.video_description }}

+ {% endif %} +
+
+ {% endfor %} +
+ {% endif %} + + {%- comment -%} ——— PDF guide ——— {%- endcomment -%} + {%- assign pdf_blocks = section.blocks | where: 'type', 'pdf' -%} + {% for block in pdf_blocks %} +
+ +
+

The Reference Document

+ {% if block.settings.pdf_title != blank %} +

{{ block.settings.pdf_title }}

+ {% endif %} + {% if block.settings.pdf_description != blank %} +

{{ block.settings.pdf_description }}

+ {% endif %} +
+ {% if block.settings.pdf_url != blank %} +
+ + + Gristle Vault Guide + +
+ {% endif %} +
+ {% endfor %} + +
+
+ + + +{% schema %} +{ + "name": "Gristle Vault", + "settings": [ + { + "type": "image_picker", + "id": "hero_logo", + "label": "Hero Logo", + "info": "Wide Gristle Vault logo. Falls back to the gristle-vault-logo-wide.png theme asset if left blank." + }, + { + "type": "text", + "id": "heading", + "label": "Heading (logo alt text)", + "default": "The Gristle Vault" + }, + { + "type": "text", + "id": "subheading", + "label": "Subheading", + "default": "Technique. Tone. Theory." + }, + { + "type": "textarea", + "id": "body_text", + "label": "Body Text", + "default": "Eight sessions of real guitar knowledge. The kind that takes decades to collect — phrasing, tone, theory, and the slightly-wrong choices that make a player impossible to copy." + } + ], + "blocks": [ + { + "type": "video", + "name": "Video Session", + "limit": 8, + "settings": [ + { + "type": "text", + "id": "youtube_url", + "label": "YouTube URL", + "info": "Paste the full YouTube URL (e.g. https://www.youtube.com/watch?v=...)" + }, + { "type": "text", "id": "video_title", "label": "Video Title" }, + { "type": "textarea", "id": "video_description", "label": "Video Description" }, + { "type": "text", "id": "video_tag", "label": "Tag (e.g. Rhythm · Phrasing)" } + ] + }, + { + "type": "pdf", + "name": "PDF Guide", + "limit": 1, + "settings": [ + { + "type": "text", + "id": "pdf_title", + "label": "PDF Title", + "default": "The Gristle Vault Master Guide" + }, + { + "type": "textarea", + "id": "pdf_description", + "label": "PDF Description", + "default": "Every concept from all eight sessions in one reference document. Techniques, tones, and theory from a lifetime of playing." + }, + { + "type": "text", + "id": "pdf_url", + "label": "PDF URL", + "info": "Upload the PDF to Shopify Files and paste the CDN URL here.", + "default": "https://cdn.shopify.com/s/files/1/0976/0210/9761/files/gristle_vault_guide.pdf?v=1782747864" + } + ] + } + ], + "presets": [ + { + "name": "Gristle Vault", + "blocks": [ + { + "type": "video", + "settings": { + "youtube_url": "https://www.youtube.com/watch?v=q3tf2NnffAs", + "video_title": "Rhythm, Groove and the C9", + "video_description": "Core rhythm approach through a blues progression. How to phrase, leave space, and make it sound like a conversation.", + "video_tag": "Rhythm · Phrasing" + } + }, + { + "type": "video", + "settings": { + "youtube_url": "https://www.youtube.com/watch?v=LBHZn4yqqa0", + "video_title": "One Guitar, Full Band", + "video_description": "Solo arrangements combining rhythm, bass movement, and lead lines simultaneously.", + "video_tag": "Solo Guitar · Arrangement" + } + }, + { + "type": "video", + "settings": { + "youtube_url": "https://www.youtube.com/watch?v=BmCQbpYT-T8", + "video_title": "Clinic: Gear, Chord Techniques and Tonus Diabolicus", + "video_description": "James Burton, Robben Ford, the Mahavishnu scale, hybrid picking reps.", + "video_tag": "Clinic · Tone · Theory" + } + }, + { + "type": "video", + "settings": { + "youtube_url": "https://www.youtube.com/watch?v=oPiIXRel65U", + "video_title": "Jeff Beck and The Grip", + "video_description": "Hybrid picking mechanics, pinch harmonics, whammy tricks. The slightly wrong choices that made Beck impossible to copy.", + "video_tag": "Technique · Influence" + } + }, + { + "type": "video", + "settings": { + "youtube_url": "https://www.youtube.com/watch?v=Y_SlPtbsnSI", + "video_title": "Chicken and Travis Picking Deep Dive", + "video_description": "Both techniques, both methods. The muted note is where both live or die.", + "video_tag": "Right Hand · Country · Fingerstyle" + } + }, + { + "type": "video", + "settings": { + "youtube_url": "https://www.youtube.com/watch?v=H4bPfA9CVzI", + "video_title": "Harmonic Color and Weaponized Open Strings", + "video_description": "Chromatic approaches, pentatonic swaps, diminished arpeggios. The slightly wrong open string can be the best note in the room.", + "video_tag": "Harmony · Outside Playing" + } + }, + { + "type": "video", + "settings": { + "youtube_url": "https://www.youtube.com/watch?v=nCEhYhFhS0E", + "video_title": "Live Rig Breakdown: Italian Tour", + "video_description": "Reverend signatures, Fishman Fluence, Tone King Royalist. A simple, well-chosen rig beats a complicated one every time.", + "video_tag": "Gear · Tone" + } + }, + { + "type": "video", + "settings": { + "youtube_url": "https://www.youtube.com/watch?v=M2EE6kbKFtE", + "video_title": "Spank It: The 1988 Riff Decoded", + "video_description": "A cornerstone riff broken down completely. Two fingers alternating on adjacent strings. Sounds wild — it isn't.", + "video_tag": "Riff Breakdown · Technique" + } + }, + { + "type": "pdf", + "settings": { + "pdf_title": "The Gristle Vault Master Guide", + "pdf_description": "Every concept from all eight sessions in one reference document. Techniques, tones, and theory from a lifetime of playing.", + "pdf_url": "https://cdn.shopify.com/s/files/1/0976/0210/9761/files/gristle_vault_guide.pdf?v=1782747864" + } + } + ] + } + ] +} +{% endschema %} diff --git a/sections/header-group.json b/sections/header-group.json index a9ac3a08a0d..2f4bd6c99fe 100644 --- a/sections/header-group.json +++ b/sections/header-group.json @@ -1,3 +1,12 @@ +/* + * ------------------------------------------------------------ + * IMPORTANT: The contents of this file are auto-generated. + * + * This file may be updated by the Shopify admin theme editor + * or related systems. Please exercise caution as any changes + * made to this file may be overwritten. + * ------------------------------------------------------------ + */ { "name": "t:sections.header.name", "type": "header", @@ -8,32 +17,31 @@ "announcement-bar-0": { "type": "announcement", "settings": { - "text": "Welcome to our store", - "text_alignment": "center", - "color_scheme": "scheme-1", + "text": "Welcome to the Gristle — Greg Koch Official Store", "link": "" } } }, "block_order": [ "announcement-bar-0" - ] + ], + "settings": {} }, "header": { "type": "header", "settings": { - "color_scheme": "scheme-1", "logo_position": "middle-left", + "mobile_logo_position": "center", "menu": "main-menu", "menu_type_desktop": "dropdown", "sticky_header_type": "on-scroll-up", - "show_line_separator": true, - "enable_country_selector": true, - "enable_language_selector": true, - "mobile_logo_position": "center", + "show_line_separator": false, + "color_scheme": "scheme-1", + "enable_country_selector": false, + "enable_language_selector": false, "margin_bottom": 0, - "padding_top": 20, - "padding_bottom": 20 + "padding_top": 16, + "padding_bottom": 16 } } }, diff --git a/sections/image-banner.liquid b/sections/image-banner.liquid index 24fa333ff24..eae6f29bfe1 100644 --- a/sections/image-banner.liquid +++ b/sections/image-banner.liquid @@ -29,6 +29,98 @@ } {%- endstyle -%} +{%- style -%} +/* ====================================== */ +/* GK Depth Slide + Premium Text Fly-In */ +/* Scoped to #Banner-{{ section.id }} */ +/* ====================================== */ + +#Banner-{{ section.id }}.gk-hero-bloom { + position: relative; +} + +#Banner-{{ section.id }}.gk-hero-bloom .banner__media { + overflow: hidden; +} + +/* Ensure content stays above media */ +#Banner-{{ section.id }}.gk-hero-bloom .banner__content { + position: relative; + z-index: 2; +} + +/* ---------- Image: Depth Slide ---------- */ +#Banner-{{ section.id }}.gk-hero-bloom.gk-hero--pre .banner__media img { + opacity: 0; + transform: translateY(12px) scale(1.09); + filter: brightness(0.90) contrast(1.05) saturate(1.02); + will-change: transform, opacity, filter; +} + +#Banner-{{ section.id }}.gk-hero-bloom.gk-hero--in .banner__media img { + opacity: 1; + transform: translateY(0) scale(1); + filter: brightness(1) contrast(1) saturate(1); + transition: + opacity 700ms cubic-bezier(.16,.84,.44,1), + transform 900ms cubic-bezier(.16,.84,.44,1), + filter 900ms cubic-bezier(.16,.84,.44,1); +} + +/* ---------- Content: Premium Fly-In (staggered) ---------- */ +/* Start hidden */ +#Banner-{{ section.id }}.gk-hero-bloom.gk-hero--pre .banner__heading, +#Banner-{{ section.id }}.gk-hero-bloom.gk-hero--pre .banner__text, +#Banner-{{ section.id }}.gk-hero-bloom.gk-hero--pre .banner__buttons { + opacity: 0; + transform: translateY(22px); + will-change: transform, opacity; +} + +/* Reveal heading first */ +#Banner-{{ section.id }}.gk-hero-bloom.gk-hero--in .banner__heading { + opacity: 1; + transform: translateY(0); + transition: + opacity 650ms cubic-bezier(.16,.84,.44,1) 180ms, + transform 650ms cubic-bezier(.16,.84,.44,1) 180ms; +} + +/* Then subtext */ +#Banner-{{ section.id }}.gk-hero-bloom.gk-hero--in .banner__text { + opacity: 1; + transform: translateY(0); + transition: + opacity 650ms cubic-bezier(.16,.84,.44,1) 260ms, + transform 650ms cubic-bezier(.16,.84,.44,1) 260ms; +} + +/* Then buttons */ +#Banner-{{ section.id }}.gk-hero-bloom.gk-hero--pre .banner__buttons { + transform: translateY(16px); +} +#Banner-{{ section.id }}.gk-hero-bloom.gk-hero--in .banner__buttons { + opacity: 1; + transform: translateY(0); + transition: + opacity 650ms cubic-bezier(.16,.84,.44,1) 340ms, + transform 650ms cubic-bezier(.16,.84,.44,1) 340ms; +} + +/* Accessibility */ +@media (prefers-reduced-motion: reduce) { + #Banner-{{ section.id }}.gk-hero-bloom .banner__media img, + #Banner-{{ section.id }}.gk-hero-bloom .banner__heading, + #Banner-{{ section.id }}.gk-hero-bloom .banner__text, + #Banner-{{ section.id }}.gk-hero-bloom .banner__buttons { + transition: none !important; + transform: none !important; + filter: none !important; + opacity: 1 !important; + } +} +{%- endstyle -%} + {%- liquid assign full_width = '100vw' assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' @@ -53,7 +145,8 @@