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/config/settings_data.json b/config/settings_data.json index 0f7a06db992..a04d4f7f32c 100644 --- a/config/settings_data.json +++ b/config/settings_data.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. + * ------------------------------------------------------------ + */ { "current": "Default", "presets": { @@ -6,57 +15,57 @@ "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 +77,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 +156,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 +173,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/sections/footer-group.json b/sections/footer-group.json index a9263d9b541..c216bb71a2a 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", @@ -23,7 +32,7 @@ "type": "text", "settings": { "heading": "Our mission", - "subtext": "<p>Share contact information, store details, and brand content with your customers.<\/p>" + "subtext": "<p>Share contact information, store details, and brand content with your customers.</p>" } } }, @@ -36,6 +45,7 @@ "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 -%} + +<section + id="GK-About-{{ section.id }}" + class="gk-about" + data-gk-anim="{{ section.settings.enable_animation }}" +> + <div class="page-width gk-about__inner"> + {%- if eyebrow != blank and eyebrow != '.' -%} + <div class="gk-about__eyebrow">{{ eyebrow }}</div> + {%- endif -%} + + {%- if section.settings.heading != blank -%} + <h2 class="gk-about__heading">{{ section.settings.heading }}</h2> + {%- endif -%} + + {%- if section.settings.image != blank -%} + <figure class="gk-about__figure" aria-label="{{ section.settings.heading | escape }}"> + <div class="gk-about__media"> + {%- 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' + }} + </div> + + {%- if section.settings.photo_credit != blank and section.settings.photo_credit != '.' -%} + <figcaption class="gk-about__credit"> + {{ section.settings.photo_credit }} + </figcaption> + {%- endif -%} + </figure> + {%- endif -%} + + <div class="gk-about__content"> + {%- if subheading != blank and subheading != '.' -%} + <h3 class="gk-about__subheading">{{ subheading }}</h3> + {%- endif -%} + + {%- if section.settings.body != blank -%} + <div class="gk-about__rte rte"> + {{ section.settings.body }} + </div> + {%- endif -%} + + {%- if button_label != blank and button_label != '.' -%} + <div class="gk-about__cta"> + <a + class="button button--primary" + {% if section.settings.button_link != blank %} + href="{{ section.settings.button_link }}" + {% else %} + role="link" aria-disabled="true" + {% endif %} + > + {{ button_label | escape }} + </a> + </div> + {%- endif -%} + </div> + </div> + + <style> + /* ============================ + GK About Feature (scoped) + ============================ */ + #GK-About-{{ section.id }}.gk-about { + --accent: {{ section.settings.accent | default: '#E8690A' }}; + --text: rgba(255,255,255,0.92); + --muted: rgba(255,255,255,0.66); + --line: rgba(255,255,255,0.10); + --card: rgba(255,255,255,0.06); + + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } + + #GK-About-{{ section.id }} .gk-about__inner { + max-width: 1100px; + margin: 0 auto; + } + + #GK-About-{{ section.id }} .gk-about__eyebrow { + font-size: 12px; + letter-spacing: .14em; + text-transform: uppercase; + color: var(--muted); + margin-bottom: 10px; + } + + #GK-About-{{ section.id }} .gk-about__heading { + margin: 0 0 18px 0; + font-weight: 800; + line-height: 1.05; + text-transform: uppercase; + + font-size: clamp(38px, 6vw, 72px); + letter-spacing: 0.02em; +} + + #GK-About-{{ section.id }} .gk-about__figure { + margin: 0; + } + + #GK-About-{{ section.id }} .gk-about__media { + position: relative; + overflow: hidden; + border-radius: 14px; + border: 1px solid var(--line); + background: var(--card); + box-shadow: 0 14px 44px rgba(0,0,0,0.35); + } + + #GK-About-{{ section.id }} .gk-about__img { + display: block; + width: 100%; + height: auto; + transform: translateZ(0); + } + + @media (hover: hover) { + #GK-About-{{ section.id }} .gk-about__media { + transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; + } + #GK-About-{{ section.id }} .gk-about__media:hover { + transform: translateY(-1px); + border-color: rgba(232,105,10,0.35); + box-shadow: 0 18px 54px rgba(0,0,0,0.45); + } + } + + #GK-About-{{ section.id }} .gk-about__credit { + margin-top: 10px; + font-style: italic; + color: var(--muted); + text-align: right; + } + + #GK-About-{{ section.id }} .gk-about__content { + margin-top: 18px; + border-top: 1px solid var(--line); + padding-top: 18px; + } + + #GK-About-{{ section.id }} .gk-about__subheading { + margin: 0 0 10px 0; + font-weight: 700; + line-height: 1.2; + } + + #GK-About-{{ section.id }} .gk-about__rte { + color: var(--text); + } + + #GK-About-{{ section.id }} .gk-about__cta { + margin-top: 16px; + } + + /* ============================ + Motion: Depth Slide + Fly-in + Fail-safe: only hide BEFORE .gk-in + ============================ */ + #GK-About-{{ section.id }}[data-gk-anim="true"]:not(.gk-in) .gk-about__media, + #GK-About-{{ section.id }}[data-gk-anim="true"]:not(.gk-in) .gk-about__heading, + #GK-About-{{ section.id }}[data-gk-anim="true"]:not(.gk-in) .gk-about__content { + opacity: 0; + transform: translateY(18px); + will-change: transform, opacity; + } + + #GK-About-{{ section.id }}[data-gk-anim="true"]:not(.gk-in) .gk-about__media { + transform: translateY(14px) scale(1.04); + } + + #GK-About-{{ section.id }}.gk-in .gk-about__media { + opacity: 1; + transform: translateY(0) scale(1); + transition: opacity 650ms cubic-bezier(.16,.84,.44,1), + transform 900ms cubic-bezier(.16,.84,.44,1); + } + + #GK-About-{{ section.id }}.gk-in .gk-about__heading { + opacity: 1; + transform: translateY(0); + transition: opacity 650ms cubic-bezier(.16,.84,.44,1) 140ms, + transform 650ms cubic-bezier(.16,.84,.44,1) 140ms; + } + + #GK-About-{{ section.id }}.gk-in .gk-about__content { + opacity: 1; + transform: translateY(0); + transition: opacity 650ms cubic-bezier(.16,.84,.44,1) 220ms, + transform 650ms cubic-bezier(.16,.84,.44,1) 220ms; + } + + @media (prefers-reduced-motion: reduce) { + #GK-About-{{ section.id }}[data-gk-anim="true"]:not(.gk-in) .gk-about__media, + #GK-About-{{ section.id }}[data-gk-anim="true"]:not(.gk-in) .gk-about__heading, + #GK-About-{{ section.id }}[data-gk-anim="true"]:not(.gk-in) .gk-about__content { + opacity: 1 !important; + transform: none !important; + transition: none !important; + } + } + </style> + + <script> + (function() { + var root = document.getElementById('GK-About-{{ section.id }}'); + if (!root) return; + + var animEnabled = root.getAttribute('data-gk-anim') === 'true'; + if (!animEnabled) { + root.classList.add('gk-in'); + return; + } + + // Hard fail-safe: reveal even if observer never fires + var fallbackTimer = setTimeout(function() { + root.classList.add('gk-in'); + }, 1200); + + if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) { + clearTimeout(fallbackTimer); + root.classList.add('gk-in'); + return; + } + + var revealed = false; + function reveal() { + if (revealed) return; + revealed = true; + clearTimeout(fallbackTimer); + root.classList.add('gk-in'); + } + + if ('IntersectionObserver' in window) { + var io = new IntersectionObserver(function(entries) { + entries.forEach(function(entry) { + if (entry.isIntersecting) { + reveal(); + io.disconnect(); + } + }); + }, { threshold: 0.15 }); + + io.observe(root); + } else { + requestAnimationFrame(reveal); + } + })(); + </script> +</section> + +{% 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": "<p>Add your updated About copy here. This is editable in the theme editor.</p>" + }, + { + "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 +-%} + +<section + id="GK-AboutGallery-{{ section.id }}" + class="gk-aboutGallery" + data-gk-anim="{{ section.settings.enable_animation | json }}" +> + <div class="page-width gk-aboutGallery__inner"> + + {%- if eyebrow_val != blank and eyebrow_val != '.' -%} + <div class="gk-aboutGallery__eyebrow">{{ section.settings.eyebrow }}</div> + {%- endif -%} + + {%- if section.settings.heading != blank -%} + <h2 class="gk-aboutGallery__heading">{{ section.settings.heading }}</h2> + {%- endif -%} + + {%- if section.settings.main_image != blank -%} + <figure class="gk-aboutGallery__heroFigure"> + <button + type="button" + class="gk-aboutGallery__heroBtn" + data-gk-open + data-gk-src="{{ section.settings.main_image | image_url: width: 2800 }}" + data-gk-alt="{{ section.settings.main_image.alt | escape }}" + aria-label="Open image" + > + <div class="gk-aboutGallery__heroMedia"> + {%- liquid + assign img = section.settings.main_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: '700, 1000, 1400, 1800, 2200, 2400', + sizes: '(min-width: 990px) 1100px, (min-width: 750px) 92vw, 94vw', + class: 'gk-aboutGallery__heroImg' + }} + </div> + </button> + + {%- if credit_val != blank and credit_val != '.' -%} + <figcaption class="gk-aboutGallery__credit"> + {{ section.settings.main_credit }} + </figcaption> + {%- endif -%} + </figure> + {%- 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 -%} + <div class="gk-aboutGallery__thumbGrid" role="list" aria-label="Gallery thumbnails"> + {%- 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 -%} + <button + type="button" + class="gk-aboutGallery__thumb" + role="listitem" + data-gk-open + data-gk-src="{{ full }}" + data-gk-alt="{{ alt | escape }}" + aria-label="Open image" + > + {{ + t + | image_url: width: 900 + | image_tag: + loading: 'lazy', + widths: '300, 450, 600, 750, 900', + sizes: '(min-width: 990px) 260px, (min-width: 750px) 22vw, 42vw', + class: 'gk-aboutGallery__thumbImg' + }} + </button> + {%- endif -%} + {%- endfor -%} + </div> + {%- endif -%} + + {%- if body_val != blank -%} + <div class="gk-aboutGallery__rte rte"> + {{ section.settings.body }} + </div> + {%- endif -%} + + </div> + + {%- comment -%} Modal (scoped) {%- endcomment -%} + <div class="gk-aboutGallery__modal" hidden aria-hidden="true"> + <div class="gk-aboutGallery__backdrop" data-gk-close></div> + + <div + class="gk-aboutGallery__dialog" + role="dialog" + aria-modal="true" + aria-label="Image preview" + tabindex="-1" + > + <button type="button" class="gk-aboutGallery__close" data-gk-close aria-label="Close">×</button> + + <div class="gk-aboutGallery__modalMedia"> + <img class="gk-aboutGallery__modalImg" alt="" loading="eager" /> + </div> + </div> + </div> + + <style> + #GK-AboutGallery-{{ section.id }}.gk-aboutGallery{ + --accent: {{ section.settings.accent | default: '#E8690A' }}; + --text: rgba(255,255,255,0.92); + --muted: rgba(255,255,255,0.66); + --line: rgba(255,255,255,0.10); + --card: rgba(255,255,255,0.06); + --shadow: 0 14px 44px rgba(0,0,0,0.35); + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } + + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__inner{ + max-width:1100px; + margin:0 auto; + } + + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__eyebrow{ + font-size:12px; + letter-spacing:.14em; + text-transform:uppercase; + color:var(--muted); + margin-bottom:10px; + } + + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__heading{ + margin:0 0 18px 0; + font-weight:800; + line-height:1.05; + letter-spacing:.01em; + font-size:clamp(34px,4.5vw,56px); + } + + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__heroFigure{ margin:0; } + + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__heroBtn{ + display:block;width:100%; + padding:0;border:0;background:transparent; + cursor:pointer;text-align:inherit;color:inherit; + } + + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__heroBtn:focus, + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__heroBtn:focus-visible, + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__thumb:focus, + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__thumb:focus-visible{ + outline:none!important; box-shadow:none!important; + } + + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__heroMedia{ + position:relative;overflow:hidden; + border-radius:14px;border:1px solid var(--line); + background:var(--card); + box-shadow:var(--shadow); + } + + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__heroImg{ + display:block;width:100%;height:auto; + transform:translateZ(0); + } + + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__credit{ + margin-top:10px; + font-style:italic; + color:var(--muted); + text-align:right; + } + + /* ✅ Thumbnails: SMALL + uniform (like old site) */ + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__thumbGrid{ + margin-top:14px; + display:grid; + grid-template-columns:repeat(4,1fr); + gap:14px; + } + + @media (max-width: 749px){ + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__thumbGrid{ + grid-template-columns:repeat(2,1fr); + gap:12px; + } + } + + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__thumb{ + appearance:none; + width:100%; + padding:0; + border:1px solid var(--line); + background:var(--card); + border-radius:12px; + overflow:hidden; + cursor:pointer; + box-shadow:0 10px 28px rgba(0,0,0,0.28); + transform:translateZ(0); + + /* Force a consistent “small strip” look */ + aspect-ratio: 16 / 9; + max-height: 140px; + } + + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__thumbImg{ + display:block; + width:100%; + height:100%; + object-fit:cover; /* key: keeps them uniform like the old row */ + } + + @media (hover:hover){ + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__thumb, + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__heroMedia{ + transition:transform 160ms ease,border-color 160ms ease,box-shadow 160ms ease; + } + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__thumb:hover{ + transform:translateY(-1px); + border-color:rgba(232,105,10,0.35); + box-shadow:0 16px 40px rgba(0,0,0,0.38); + } + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__heroMedia:hover{ + transform:translateY(-1px); + border-color:rgba(232,105,10,0.35); + box-shadow:0 18px 54px rgba(0,0,0,0.45); + } + } + + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__rte{ + margin-top:18px; + color:var(--text); + } + + /* Animation */ + #GK-AboutGallery-{{ section.id }}[data-gk-anim="true"] .gk-aboutGallery__heroMedia, + #GK-AboutGallery-{{ section.id }}[data-gk-anim="true"] .gk-aboutGallery__heading, + #GK-AboutGallery-{{ section.id }}[data-gk-anim="true"] .gk-aboutGallery__rte, + #GK-AboutGallery-{{ section.id }}[data-gk-anim="true"] .gk-aboutGallery__thumbGrid, + #GK-AboutGallery-{{ section.id }}[data-gk-anim="true"] .gk-aboutGallery__eyebrow{ + opacity:0; + transform:translateY(18px); + will-change:transform,opacity; + } + #GK-AboutGallery-{{ section.id }}[data-gk-anim="true"] .gk-aboutGallery__heroMedia{ + transform:translateY(14px) scale(1.03); + } + #GK-AboutGallery-{{ section.id }}.gk-in .gk-aboutGallery__heroMedia{ + opacity:1; transform:translateY(0) scale(1); + transition:opacity 650ms cubic-bezier(.16,.84,.44,1), + transform 900ms cubic-bezier(.16,.84,.44,1); + } + #GK-AboutGallery-{{ section.id }}.gk-in .gk-aboutGallery__eyebrow{ + opacity:1; transform:translateY(0); + transition:opacity 650ms cubic-bezier(.16,.84,.44,1) 80ms, + transform 650ms cubic-bezier(.16,.84,.44,1) 80ms; + } + #GK-AboutGallery-{{ section.id }}.gk-in .gk-aboutGallery__heading{ + opacity:1; transform:translateY(0); + transition:opacity 650ms cubic-bezier(.16,.84,.44,1) 120ms, + transform 650ms cubic-bezier(.16,.84,.44,1) 120ms; + } + #GK-AboutGallery-{{ section.id }}.gk-in .gk-aboutGallery__thumbGrid{ + opacity:1; transform:translateY(0); + transition:opacity 650ms cubic-bezier(.16,.84,.44,1) 200ms, + transform 650ms cubic-bezier(.16,.84,.44,1) 200ms; + } + #GK-AboutGallery-{{ section.id }}.gk-in .gk-aboutGallery__rte{ + opacity:1; transform:translateY(0); + transition:opacity 650ms cubic-bezier(.16,.84,.44,1) 260ms, + transform 650ms cubic-bezier(.16,.84,.44,1) 260ms; + } + + @media (prefers-reduced-motion: reduce){ + #GK-AboutGallery-{{ section.id }}[data-gk-anim="true"] .gk-aboutGallery__heroMedia, + #GK-AboutGallery-{{ section.id }}[data-gk-anim="true"] .gk-aboutGallery__heading, + #GK-AboutGallery-{{ section.id }}[data-gk-anim="true"] .gk-aboutGallery__rte, + #GK-AboutGallery-{{ section.id }}[data-gk-anim="true"] .gk-aboutGallery__thumbGrid, + #GK-AboutGallery-{{ section.id }}[data-gk-anim="true"] .gk-aboutGallery__eyebrow{ + opacity:1!important; transform:none!important; transition:none!important; + } + } + + /* Modal */ + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__modal[hidden]{display:none!important;} + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__modal{position:fixed;inset:0;z-index:9999;} + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__backdrop{ + position:absolute;inset:0; + background:rgba(0,0,0,0.75); + backdrop-filter:blur(6px); + -webkit-backdrop-filter:blur(6px); + } + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__dialog{ + position:absolute;inset:0; + display:flex;align-items:center;justify-content:center; + padding:22px;outline:none; + } + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__modalMedia{ + position:relative; + width:min(1100px,96vw); + max-height:92vh; + border-radius:14px; + border:1px solid rgba(255,255,255,0.14); + background:rgba(0,0,0,0.25); + box-shadow:0 22px 80px rgba(0,0,0,0.55); + overflow:hidden; + } + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__modalImg{ + display:block;width:100%; + max-height:92vh; + object-fit:contain; + background:rgba(0,0,0,0.15); + } + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__close{ + position:absolute;top:16px;right:18px; + width:44px;height:44px;border-radius:999px; + border:1px solid rgba(255,255,255,0.18); + background:rgba(0,0,0,0.30); + color:rgba(255,255,255,0.92); + font-size:26px;line-height:1; + cursor:pointer;display:grid;place-items:center; + transition:transform 160ms ease,border-color 160ms ease,background 160ms ease; + } + @media (hover:hover){ + #GK-AboutGallery-{{ section.id }} .gk-aboutGallery__close:hover{ + transform:translateY(-1px); + border-color:rgba(232,105,10,0.35); + background:rgba(0,0,0,0.45); + } + } + </style> + + <script> + (function() { + var root = document.getElementById('GK-AboutGallery-{{ section.id }}'); + if (!root) return; + + var animEnabled = root.getAttribute('data-gk-anim') === 'true'; + if (animEnabled && !(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches)) { + var revealed = false; + var reveal = function() { + if (revealed) return; + revealed = true; + root.classList.add('gk-in'); + }; + if ('IntersectionObserver' in window) { + var io = new IntersectionObserver(function(entries) { + entries.forEach(function(entry) { + if (entry.isIntersecting) { reveal(); io.disconnect(); } + }); + }, { threshold: 0.22 }); + io.observe(root); + } else { + requestAnimationFrame(reveal); + } + } else { + root.classList.add('gk-in'); + } + + var modal = root.querySelector('.gk-aboutGallery__modal'); + var modalImg = root.querySelector('.gk-aboutGallery__modalImg'); + var dialog = root.querySelector('.gk-aboutGallery__dialog'); + if (!modal || !modalImg || !dialog) return; + + var lastActive = null; + + function openModal(src, alt) { + lastActive = document.activeElement; + modal.hidden = false; + modal.setAttribute('aria-hidden', 'false'); + modalImg.src = src; + modalImg.alt = alt || ''; + document.documentElement.style.overflow = 'hidden'; + document.body.style.overflow = 'hidden'; + dialog.focus(); + } + + function closeModal() { + modal.hidden = true; + modal.setAttribute('aria-hidden', 'true'); + modalImg.removeAttribute('src'); + modalImg.alt = ''; + document.documentElement.style.overflow = ''; + document.body.style.overflow = ''; + if (lastActive && lastActive.focus) lastActive.focus(); + } + + root.addEventListener('click', function(e) { + var opener = e.target.closest('[data-gk-open]'); + if (opener) { + e.preventDefault(); + var src = opener.getAttribute('data-gk-src'); + var alt = opener.getAttribute('data-gk-alt') || ''; + if (src) openModal(src, alt); + return; + } + if (e.target.closest('[data-gk-close]')) { + e.preventDefault(); + closeModal(); + } + }); + + document.addEventListener('keydown', function(e) { + if (modal.hidden) return; + if (e.key === 'Escape') { + e.preventDefault(); + closeModal(); + } + }); + })(); + </script> +</section> + +{% 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": "<p>Add your updated copy here. This is editable in the theme editor.</p>" }, + { "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..60abc749d7a --- /dev/null +++ b/sections/gk-about-page.liquid @@ -0,0 +1,449 @@ +{%- 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 -%} + +<section class="gk-about" id="section-{{ section.id }}"> + <div class="gk-about__inner"> + {%- if section.settings.show_header -%} + <div class="gk-about__header"> + {%- if section.settings.eyebrow != blank -%} + <span class="gk-about__eyebrow">{{ section.settings.eyebrow }}</span> + {%- endif -%} + {%- if section.settings.heading != blank -%} + <h1 class="gk-about__heading">{{ section.settings.heading }}</h1> + {%- endif -%} + </div> + {%- endif -%} + + {%- for block in section.blocks -%} + {%- case block.type -%} + {%- when 'editorial_block' -%} + <div class="gk-about__editorial{% if block.settings.reverse_layout %} gk-about__editorial--reversed{% endif %}" {{ block.shopify_attributes }}> + {%- if block.settings.image != blank -%} + <div class="gk-about__image"> + {{ block.settings.image | image_url: width: 900 | image_tag: + loading: 'lazy', + sizes: '(max-width: 749px) 100vw, 50vw', + widths: '375, 550, 750, 900' + }} + </div> + {%- endif -%} + <div class="gk-about__text"> + {%- if block.settings.eyebrow != blank -%} + <span class="gk-about__text-eyebrow">{{ block.settings.eyebrow }}</span> + {%- endif -%} + {%- if block.settings.heading != blank -%} + <h2 class="gk-about__text-heading">{{ block.settings.heading }}</h2> + {%- endif -%} + {%- if block.settings.body != blank -%} + <div class="gk-about__text-body">{{ block.settings.body }}</div> + {%- endif -%} + </div> + </div> + + {%- when 'stats_bar' -%} + <div class="gk-about__stats" {{ block.shopify_attributes }}> + {%- if block.settings.stat_1_number != blank -%} + <div class="gk-about__stat"> + <span class="gk-about__stat-number">{{ block.settings.stat_1_number }}</span> + <span class="gk-about__stat-label">{{ block.settings.stat_1_label }}</span> + </div> + {%- endif -%} + {%- if block.settings.stat_2_number != blank -%} + <div class="gk-about__stat"> + <span class="gk-about__stat-number">{{ block.settings.stat_2_number }}</span> + <span class="gk-about__stat-label">{{ block.settings.stat_2_label }}</span> + </div> + {%- endif -%} + {%- if block.settings.stat_3_number != blank -%} + <div class="gk-about__stat"> + <span class="gk-about__stat-number">{{ block.settings.stat_3_number }}</span> + <span class="gk-about__stat-label">{{ block.settings.stat_3_label }}</span> + </div> + {%- endif -%} + {%- if block.settings.stat_4_number != blank -%} + <div class="gk-about__stat"> + <span class="gk-about__stat-number">{{ block.settings.stat_4_number }}</span> + <span class="gk-about__stat-label">{{ block.settings.stat_4_label }}</span> + </div> + {%- endif -%} + </div> + + {%- when 'richtext' -%} + <div class="gk-about__text" style="max-width: 800px;{% if block.settings.center %} margin: 0 auto; text-align: center;{% endif %}" {{ block.shopify_attributes }}> + {%- if block.settings.eyebrow != blank -%} + <span class="gk-about__text-eyebrow">{{ block.settings.eyebrow }}</span> + {%- endif -%} + {%- if block.settings.heading != blank -%} + <h2 class="gk-about__text-heading">{{ block.settings.heading }}</h2> + {%- endif -%} + {%- if block.settings.body != blank -%} + <div class="gk-about__text-body">{{ block.settings.body }}</div> + {%- endif -%} + </div> + {%- endcase -%} + {%- endfor -%} + </div> +</section> + +{% 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", + "default": "" + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "The Story" + }, + { + "type": "richtext", + "id": "body", + "label": "Body Text", + "default": "<p>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.</p><p>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.</p>" + }, + { + "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", + "default": "" + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "" + }, + { + "type": "richtext", + "id": "body", + "label": "Body Text", + "default": "<p>Additional bio content goes here.</p>" + }, + { + "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-' +-%} + +<style> +/* ═══════════════════════════════════════════════════════════ + GK BANDSINTOWN HOME — all selectors scoped to .gk-bit-home + ═══════════════════════════════════════════════════════════ */ +.gk-bit-home { + --gkb-bg: {{ section.settings.bg_color }}; + --gkb-accent: #E8690A; + --gkb-accent-glow: rgba(232,105,10,0.22); + --gkb-accent-strong: rgba(232,105,10,0.38); + --gkb-text: #ffffff; + --gkb-muted: rgba(255,255,255,0.60); + --gkb-ring: rgba(255,255,255,0.10); + + box-sizing: border-box; + width: 100%; + background-color: var(--gkb-bg); + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + color: var(--gkb-text); +} +.gk-bit-home__inner { + max-width: {{ section.settings.max_width }}px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; +} +.gk-bit-home__eyebrow { + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace; + text-transform: uppercase; + letter-spacing: 0.16em; + font-size: 12px; + color: rgba(255,255,255,0.62); + margin: 0 0 10px; + display: block; +} +.gk-bit-home__heading { + font-family: "Bebas Neue", sans-serif; + font-weight: 400; + letter-spacing: 0.03em; + line-height: 1; + font-size: clamp(44px, 5vw, 64px); + color: var(--gkb-text); + margin: 0 0 8px; + text-transform: uppercase; +} +.gk-bit-home__subtext { + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + color: var(--gkb-muted); + font-size: 16px; + line-height: 1.4; + margin: 0 0 28px; +} +.gk-bit-home__embed { + width: 100%; +} + +/* ── Editor notice (informational only; widget still attempts to load) ── */ +.gk-bit-home .gk-bit-editor-notice { + font-family: "DM Sans", system-ui, sans-serif; + font-size: 12px; + color: rgba(255,255,255,0.40); + background: rgba(232,105,10,0.06); + border: 1px dashed rgba(232,105,10,0.28); + border-radius: 10px; + padding: 10px 16px; + margin-bottom: 14px; + text-align: center; +} + +/* ── BIT widget wrapper – strip its default chrome ── */ +.gk-bit-home .bit-widget-container, +.gk-bit-home .bit-widget { + background: transparent !important; + border: none !important; + box-shadow: none !important; + padding: 0 !important; + margin: 0 !important; +} + +/* ── Hide BIT elements we replace with our own headings / buttons ── */ +.gk-bit-home [class*="bit-header"], +.gk-bit-home [class*="bit-top-track"], +.gk-bit-home [class*="bit-logo"], +.gk-bit-home [class*="bit-powered"], +.gk-bit-home [class*="bit-footer"], +.gk-bit-home [class*="bit-social"], +.gk-bit-home [class*="bit-share"], +.gk-bit-home [class*="bit-follow"], +.gk-bit-home [class*="rsvp"], +.gk-bit-home [class*="bit-rsvp"], +.gk-bit-home a[data-bit-action="rsvp"] { + display: none !important; +} + +/* ── Event list container ── */ +.gk-bit-home .bit-event-list, +.gk-bit-home ul[class*="bit-event-list"], +.gk-bit-home [class*="bit-event-list"]:not([class*="item"]):not(li) { + list-style: none !important; + padding: 0 !important; + margin: 0 !important; + display: flex !important; + flex-direction: column !important; + gap: 10px !important; +} + +/* ── Individual event rows – dark glass card ── */ +.gk-bit-home .bit-event, +.gk-bit-home .bit-event-list-item, +.gk-bit-home li[class*="bit-event"], +.gk-bit-home [class*="bit-event"][class*="item"] { + position: relative !important; + list-style: none !important; + border-radius: 18px !important; + border: 1px solid var(--gkb-ring) !important; + 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)) !important; + box-shadow: 0 18px 42px rgba(0,0,0,0.32) !important; + transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important; + padding: 16px 20px !important; + margin: 0 !important; + overflow: visible !important; +} + +/* Hover glow overlay */ +.gk-bit-home .bit-event::before, +.gk-bit-home .bit-event-list-item::before, +.gk-bit-home li[class*="bit-event"]::before { + content: "" !important; + position: absolute !important; + inset: 0 !important; + border-radius: 18px !important; + pointer-events: none !important; + opacity: 0 !important; + transition: opacity 160ms ease !important; + background: + radial-gradient(800px 160px at 20% 50%, var(--gkb-accent-strong), transparent 65%), + linear-gradient(90deg, rgba(232,105,10,0.10), rgba(232,105,10,0.00) 55%) !important; + z-index: 0 !important; +} + +.gk-bit-home .bit-event:hover, +.gk-bit-home .bit-event-list-item:hover, +.gk-bit-home li[class*="bit-event"]:hover { + transform: translateY(-1px) !important; + border-color: rgba(232,105,10,0.45) !important; + box-shadow: + 0 22px 58px rgba(0,0,0,0.40), + 0 0 0 1px rgba(232,105,10,0.18) inset !important; +} + +.gk-bit-home .bit-event:hover::before, +.gk-bit-home .bit-event-list-item:hover::before, +.gk-bit-home li[class*="bit-event"]:hover::before { + opacity: 1 !important; +} + +/* ── Date text ── */ +.gk-bit-home [class*="bit-event"] [class*="bit-date"], +.gk-bit-home [class*="bit-event"] .bit-event-date, +.gk-bit-home [class*="bit-event"] time { + font-family: "Bebas Neue", sans-serif !important; + font-size: 28px !important; + line-height: 1 !important; + color: var(--gkb-accent) !important; + letter-spacing: 0.02em !important; + white-space: nowrap !important; +} + +/* ── Venue / show name ── */ +.gk-bit-home [class*="bit-event"] [class*="bit-venue"], +.gk-bit-home [class*="bit-event"] [class*="bit-title"], +.gk-bit-home [class*="bit-event"] [class*="bit-name"]:not([class*="artist"]) { + font-family: "DM Sans", system-ui, -apple-system, sans-serif !important; + font-size: 18px !important; + color: var(--gkb-text) !important; + font-weight: 500 !important; + line-height: 1.3 !important; +} + +/* ── Location / city ── */ +.gk-bit-home [class*="bit-event"] [class*="bit-location"], +.gk-bit-home [class*="bit-event"] [class*="bit-city"], +.gk-bit-home [class*="bit-event"] [class*="bit-region"], +.gk-bit-home [class*="bit-event"] [class*="bit-country"] { + font-family: "DM Mono", ui-monospace, monospace !important; + font-size: 12px !important; + letter-spacing: 0.10em !important; + text-transform: uppercase !important; + color: rgba(255,255,255,0.65) !important; +} + +/* ── Ticket / CTA button – orange pill ── */ +.gk-bit-home [class*="bit-event"] a[class*="bit-btn"]:not([class*="rsvp"]), +.gk-bit-home [class*="bit-event"] a[data-bit-action="tickets"], +.gk-bit-home [class*="bit-event"] a[class*="bit-ticket"], +.gk-bit-home [class*="bit-event"] [class*="bit-cta"] a:not([class*="rsvp"]) { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + min-height: 40px !important; + padding: 8px 20px !important; + border-radius: 999px !important; + background: rgba(232,105,10,0.90) !important; + border: 1px solid rgba(232,105,10,0.90) !important; + color: #0D0D0D !important; + font-family: "DM Mono", ui-monospace, monospace !important; + font-size: 11px !important; + font-weight: 700 !important; + letter-spacing: 0.12em !important; + text-transform: uppercase !important; + text-decoration: none !important; + white-space: nowrap !important; + transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease !important; +} +.gk-bit-home [class*="bit-event"] a[class*="bit-btn"]:not([class*="rsvp"]):hover, +.gk-bit-home [class*="bit-event"] a[data-bit-action="tickets"]:hover { + transform: translateY(-1px) !important; + background: rgba(232,105,10,1) !important; + box-shadow: 0 10px 26px rgba(232,105,10,0.30) !important; +} + +/* ── "No upcoming dates" message from BIT ── */ +.gk-bit-home [class*="bit-no-dates"], +.gk-bit-home [class*="bit-empty-state"] { + font-family: "DM Sans", system-ui, sans-serif !important; + color: var(--gkb-muted) !important; + text-align: center !important; + padding: 24px 0 !important; + font-size: 15px !important; + background: transparent !important; +} + +/* ── Show-more button ── */ +.gk-bit-home .gk-bit-more-btn { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 44px; + padding: 10px 28px; + border-radius: 999px; + background: transparent; + color: var(--gkb-accent); + border: 1px solid rgba(232,105,10,0.45); + font-family: "DM Mono", ui-monospace, monospace; + font-size: 12px; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; + cursor: pointer; + transition: background 150ms ease, border-color 150ms ease, transform 140ms ease, box-shadow 140ms ease; +} +.gk-bit-home .gk-bit-more-btn:hover { + background: rgba(232,105,10,0.10); + border-color: #E8690A; + transform: translateY(-1px); + box-shadow: 0 8px 20px rgba(232,105,10,0.14); +} +.gk-bit-home .gk-bit-more-btn:active { + transform: translateY(0); +} +.gk-bit-home .gk-bit-more-btn:focus-visible { + outline: 2px solid rgba(232,105,10,0.75); + outline-offset: 3px; +} + +/* ── Fallback message (shown only if BIT fails to load after timeout) ── */ +.gk-bit-home .gk-bit-fallback { + display: none; + font-family: "DM Sans", system-ui, sans-serif; + color: var(--gkb-muted); + font-size: 15px; + padding: 24px 0; + text-align: center; +} + +/* ── Responsive ── */ +@media (max-width: 600px) { + .gk-bit-home .bit-event, + .gk-bit-home .bit-event-list-item, + .gk-bit-home li[class*="bit-event"] { + padding: 14px 16px !important; + } + .gk-bit-home [class*="bit-event"] [class*="bit-date"] { + font-size: 22px !important; + } + .gk-bit-home [class*="bit-event"] [class*="bit-venue"] { + font-size: 15px !important; + } +} +</style> + +<section class="gk-bit-home" data-section-id="{{ section.id }}"> + <div class="gk-bit-home__inner"> + + {%- if section.settings.eyebrow != blank -%} + <div class="gk-bit-home__eyebrow">{{ section.settings.eyebrow }}</div> + {%- endif -%} + {%- if section.settings.heading != blank -%} + <h2 class="gk-bit-home__heading">{{ section.settings.heading }}</h2> + {%- endif -%} + {%- if section.settings.subtext != blank -%} + <p class="gk-bit-home__subtext">{{ section.settings.subtext }}</p> + {%- endif -%} + + {%- if request.design_mode -%} + <div class="gk-bit-editor-notice"> + ⓘ  Theme Editor: Bandsintown events load live. Click "View" or open the published site to see them. + </div> + {%- endif -%} + + <div id="{{ bit_uid }}" class="gk-bit-home__embed" data-bit-wrap> + {%- comment -%} + Official Bandsintown anchor-initializer. BIT script below finds this element + and replaces it with the rendered widget (event list + ticket links). + {%- endcomment -%} + <a class="bit-widget-initializer" + data-artist-name="{{ bit_artist | escape }}" + data-display-local-dates="false" + data-display-past-dates="false" + data-auto-style="false" + data-button-label-upcoming-events="" + data-button-label-expired-token="Refresh" + data-lang="en" + data-popup-background-color="#111111" + data-text-color="#ffffff" + data-link-color="#E8690A" + data-background-color="rgba(0,0,0,0)" + data-separator-color="rgba(255,255,255,0.08)" + data-display-limit="40" + ></a> + <div class="gk-bit-fallback">Check back soon for upcoming dates.</div> + </div> + + </div> +</section> + +{%- 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 <script> + and inject a fresh one to force main.min.js to re-execute and process the + new .bit-widget-initializer anchor that just appeared in the DOM. +{%- endcomment -%} +<script> +(function(){ + var ATTR = 'data-gk-bit'; + var prev = document.querySelector('script[' + ATTR + ']'); + if (prev) prev.parentNode.removeChild(prev); + var s = document.createElement('script'); + s.charset = 'utf-8'; + s.src = 'https://widget.bandsintown.com/main.min.js'; + s.setAttribute(ATTR, ''); + document.head.appendChild(s); +})(); +</script> + +<script> +(function () { + 'use strict'; + + var SECTION_ID = {{ section.id | json }}; + var WRAP_ID = {{ bit_uid | json }}; + var INIT = {{ bit_initial_visible | plus: 0 }}; + var STEP = {{ bit_reveal_step | plus: 0 }}; + var BTN_LABEL = {{ bit_more_label | json }}; + + /* ── Reusable init function (called on first load + editor re-renders) ── */ + function bootShowMore() { + var wrap = document.getElementById(WRAP_ID); + if (!wrap) return; + + /* Prevent double-init within the same render cycle */ + if (wrap.getAttribute('data-bit-initialized') === '1') return; + wrap.setAttribute('data-bit-initialized', '1'); + + var applied = false; + var moreBtnWrap = null; + + /* Priority-ordered selectors – tries each until it finds event nodes */ + var EVENT_SELS = [ + '.bit-event', + '.bit-event-list-item', + 'li[class*="bit-event"]', + '[class*="bit-event"][class*="item"]', + '.bit-widget li', + '.bit-widget-container li' + ]; + + function findEvents() { + for (var i = 0; i < EVENT_SELS.length; i++) { + var els = wrap.querySelectorAll(EVENT_SELS[i]); + if (els.length) return Array.prototype.slice.call(els); + } + return []; + } + + function ensureMoreBtn() { + if (moreBtnWrap) return moreBtnWrap; + + moreBtnWrap = document.createElement('div'); + moreBtnWrap.style.cssText = 'margin-top:20px;text-align:center;'; + + var btn = document.createElement('button'); + btn.type = 'button'; + btn.className = 'gk-bit-more-btn'; + btn.textContent = BTN_LABEL; + btn.addEventListener('click', function () { + var hidden = findEvents().filter(function (el) { + return el.getAttribute('data-gk-hidden') === '1'; + }); + hidden.slice(0, STEP).forEach(function (el) { + el.removeAttribute('data-gk-hidden'); + el.style.removeProperty('display'); + }); + syncBtn(); + }); + + moreBtnWrap.appendChild(btn); + + /* Append after the BIT container, or fall back to inside wrap */ + var bitContainer = wrap.querySelector('.bit-widget-container') || + wrap.querySelector('.bit-widget'); + if (bitContainer && bitContainer.parentNode === wrap) { + wrap.insertBefore(moreBtnWrap, bitContainer.nextSibling); + } else { + wrap.appendChild(moreBtnWrap); + } + + return moreBtnWrap; + } + + function syncBtn() { + if (!moreBtnWrap) return; + var anyHidden = findEvents().some(function (el) { + return el.getAttribute('data-gk-hidden') === '1'; + }); + moreBtnWrap.style.display = anyHidden ? '' : 'none'; + } + + function setup() { + var events = findEvents(); + if (!events.length) return false; + if (applied) { syncBtn(); return true; } + + applied = true; + + /* Hide events beyond the initial visible count */ + events.forEach(function (el, i) { + if (i >= INIT) { + el.setAttribute('data-gk-hidden', '1'); + el.style.setProperty('display', 'none', 'important'); + } + }); + + if (events.length > INIT) { + ensureMoreBtn(); + syncBtn(); + } + + /* BIT succeeded – suppress the fallback text */ + var fb = wrap.querySelector('.gk-bit-fallback'); + if (fb) fb.style.display = 'none'; + + return true; + } + + /* Try immediately (BIT may have already rendered) */ + if (setup()) return; + + /* Watch for BIT's async DOM injection */ + var debounceTimer; + var obs = new MutationObserver(function () { + clearTimeout(debounceTimer); + debounceTimer = setTimeout(function () { + if (setup()) { + obs.disconnect(); + clearInterval(retryTimer); + } + }, 180); + }); + obs.observe(wrap, { childList: true, subtree: true }); + + /* Belt-and-suspenders: poll every 300 ms for up to 15 s */ + var elapsed = 0; + var retryTimer = setInterval(function () { + elapsed += 300; + if (setup()) { + obs.disconnect(); + clearInterval(retryTimer); + } else if (elapsed >= 15000) { + obs.disconnect(); + clearInterval(retryTimer); + if (!applied) { + var fb = wrap.querySelector('.gk-bit-fallback'); + if (fb) fb.style.display = ''; + } + } + }, 300); + } + + /* ── Run on initial page load ── */ + bootShowMore(); + + /* ── Shopify theme editor: re-init on section reload after save ── */ + var listenerKey = '__gkBitEvt_' + SECTION_ID; + if (window.Shopify && window.Shopify.designMode && !window[listenerKey]) { + window[listenerKey] = true; + document.addEventListener('shopify:section:load', function (evt) { + if (!evt.detail || evt.detail.sectionId !== SECTION_ID) return; + + /* Re-trigger BIT for the freshly-rendered anchor */ + var ATTR = 'data-gk-bit'; + var prev = document.querySelector('script[' + ATTR + ']'); + if (prev) prev.parentNode.removeChild(prev); + var s = document.createElement('script'); + s.charset = 'utf-8'; + s.src = 'https://widget.bandsintown.com/main.min.js'; + s.setAttribute(ATTR, ''); + document.head.appendChild(s); + + /* Re-run show-more init (BIT needs a moment to render) */ + setTimeout(bootShowMore, 600); + }); + } + +}()); +</script> + +{% 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-' +-%} + +<style> +/* ═══════════════════════════════════════════════════════════ + GK BANDSINTOWN PAGE — all selectors scoped to .gk-bit-page + ═══════════════════════════════════════════════════════════ */ +.gk-bit-page { + --gkbp-bg: {{ section.settings.bg_color }}; + --gkbp-accent: #E8690A; + --gkbp-accent-glow: rgba(232,105,10,0.22); + --gkbp-accent-strong: rgba(232,105,10,0.38); + --gkbp-text: #ffffff; + --gkbp-muted: rgba(255,255,255,0.60); + --gkbp-ring: rgba(255,255,255,0.10); + + box-sizing: border-box; + width: 100%; + background-color: var(--gkbp-bg); + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + color: var(--gkbp-text); +} +.gk-bit-page__inner { + max-width: {{ section.settings.max_width }}px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; +} +.gk-bit-page__eyebrow { + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace; + text-transform: uppercase; + letter-spacing: 0.16em; + font-size: 12px; + color: rgba(255,255,255,0.62); + margin: 0 0 10px; + display: block; +} +.gk-bit-page__heading { + font-family: "Bebas Neue", sans-serif; + font-weight: 400; + letter-spacing: 0.03em; + line-height: 1; + font-size: clamp(44px, 6vw, 76px); + color: var(--gkbp-text); + margin: 0 0 8px; + text-transform: uppercase; +} +.gk-bit-page__subtext { + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + color: var(--gkbp-muted); + font-size: 16px; + line-height: 1.4; + margin: 0 0 32px; + max-width: 60ch; +} +.gk-bit-page__embed { + width: 100%; +} + +/* ── Editor notice (informational only; widget still attempts to load) ── */ +.gk-bit-page .gk-bit-editor-notice { + font-family: "DM Sans", system-ui, sans-serif; + font-size: 12px; + color: rgba(255,255,255,0.40); + background: rgba(232,105,10,0.06); + border: 1px dashed rgba(232,105,10,0.28); + border-radius: 10px; + padding: 10px 16px; + margin-bottom: 14px; + text-align: center; +} + +/* ── BIT widget wrapper – strip its default chrome ── */ +.gk-bit-page .bit-widget-container, +.gk-bit-page .bit-widget { + background: transparent !important; + border: none !important; + box-shadow: none !important; + padding: 0 !important; + margin: 0 !important; +} + +/* ── Hide BIT elements we replace with our own headings / buttons ── */ +.gk-bit-page [class*="bit-header"], +.gk-bit-page [class*="bit-top-track"], +.gk-bit-page [class*="bit-logo"], +.gk-bit-page [class*="bit-powered"], +.gk-bit-page [class*="bit-footer"], +.gk-bit-page [class*="bit-social"], +.gk-bit-page [class*="bit-share"], +.gk-bit-page [class*="bit-follow"], +.gk-bit-page [class*="rsvp"], +.gk-bit-page [class*="bit-rsvp"], +.gk-bit-page a[data-bit-action="rsvp"] { + display: none !important; +} + +/* ── Event list container ── */ +.gk-bit-page .bit-event-list, +.gk-bit-page ul[class*="bit-event-list"], +.gk-bit-page [class*="bit-event-list"]:not([class*="item"]):not(li) { + list-style: none !important; + padding: 0 !important; + margin: 0 !important; + display: flex !important; + flex-direction: column !important; + gap: 12px !important; +} + +/* ── Individual event rows – dark glass card ── */ +.gk-bit-page .bit-event, +.gk-bit-page .bit-event-list-item, +.gk-bit-page li[class*="bit-event"], +.gk-bit-page [class*="bit-event"][class*="item"] { + position: relative !important; + list-style: none !important; + border-radius: 18px !important; + border: 1px solid var(--gkbp-ring) !important; + 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)) !important; + box-shadow: 0 18px 42px rgba(0,0,0,0.32) !important; + transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important; + padding: 18px 22px !important; + margin: 0 !important; + overflow: visible !important; +} + +/* Hover glow overlay */ +.gk-bit-page .bit-event::before, +.gk-bit-page .bit-event-list-item::before, +.gk-bit-page li[class*="bit-event"]::before { + content: "" !important; + position: absolute !important; + inset: 0 !important; + border-radius: 18px !important; + pointer-events: none !important; + opacity: 0 !important; + transition: opacity 160ms ease !important; + background: + radial-gradient(800px 160px at 20% 50%, var(--gkbp-accent-strong), transparent 65%), + linear-gradient(90deg, rgba(232,105,10,0.10), rgba(232,105,10,0.00) 55%) !important; + z-index: 0 !important; +} + +.gk-bit-page .bit-event:hover, +.gk-bit-page .bit-event-list-item:hover, +.gk-bit-page li[class*="bit-event"]:hover { + transform: translateY(-1px) !important; + border-color: rgba(232,105,10,0.45) !important; + box-shadow: + 0 22px 58px rgba(0,0,0,0.40), + 0 0 0 1px rgba(232,105,10,0.18) inset !important; +} + +.gk-bit-page .bit-event:hover::before, +.gk-bit-page .bit-event-list-item:hover::before, +.gk-bit-page li[class*="bit-event"]:hover::before { + opacity: 1 !important; +} + +/* ── Date text ── */ +.gk-bit-page [class*="bit-event"] [class*="bit-date"], +.gk-bit-page [class*="bit-event"] .bit-event-date, +.gk-bit-page [class*="bit-event"] time { + font-family: "Bebas Neue", sans-serif !important; + font-size: 34px !important; + line-height: 1 !important; + color: var(--gkbp-accent) !important; + letter-spacing: 0.02em !important; + white-space: nowrap !important; +} + +/* ── Venue / show name ── */ +.gk-bit-page [class*="bit-event"] [class*="bit-venue"], +.gk-bit-page [class*="bit-event"] [class*="bit-title"], +.gk-bit-page [class*="bit-event"] [class*="bit-name"]:not([class*="artist"]) { + font-family: "DM Sans", system-ui, -apple-system, sans-serif !important; + font-size: 20px !important; + color: var(--gkbp-text) !important; + font-weight: 500 !important; + line-height: 1.2 !important; +} + +/* ── Location / city ── */ +.gk-bit-page [class*="bit-event"] [class*="bit-location"], +.gk-bit-page [class*="bit-event"] [class*="bit-city"], +.gk-bit-page [class*="bit-event"] [class*="bit-region"], +.gk-bit-page [class*="bit-event"] [class*="bit-country"] { + font-family: "DM Mono", ui-monospace, monospace !important; + font-size: 13px !important; + letter-spacing: 0.10em !important; + text-transform: uppercase !important; + color: rgba(255,255,255,0.65) !important; +} + +/* ── Ticket / CTA button – orange pill ── */ +.gk-bit-page [class*="bit-event"] a[class*="bit-btn"]:not([class*="rsvp"]), +.gk-bit-page [class*="bit-event"] a[data-bit-action="tickets"], +.gk-bit-page [class*="bit-event"] a[class*="bit-ticket"], +.gk-bit-page [class*="bit-event"] [class*="bit-cta"] a:not([class*="rsvp"]) { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + min-height: 44px !important; + padding: 10px 20px !important; + border-radius: 999px !important; + background: rgba(232,105,10,0.90) !important; + border: 1px solid rgba(232,105,10,0.90) !important; + color: #0D0D0D !important; + font-family: "DM Mono", ui-monospace, monospace !important; + font-size: 12px !important; + font-weight: 700 !important; + letter-spacing: 0.12em !important; + text-transform: uppercase !important; + text-decoration: none !important; + white-space: nowrap !important; + transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease !important; +} +.gk-bit-page [class*="bit-event"] a[class*="bit-btn"]:not([class*="rsvp"]):hover, +.gk-bit-page [class*="bit-event"] a[data-bit-action="tickets"]:hover { + transform: translateY(-1px) !important; + background: rgba(232,105,10,1) !important; + box-shadow: 0 10px 26px rgba(232,105,10,0.30) !important; +} + +/* ── "No upcoming dates" message from BIT ── */ +.gk-bit-page [class*="bit-no-dates"], +.gk-bit-page [class*="bit-empty-state"] { + font-family: "DM Sans", system-ui, sans-serif !important; + color: var(--gkbp-muted) !important; + text-align: center !important; + padding: 32px 0 !important; + font-size: 16px !important; + background: transparent !important; +} + +/* ── Show-more button ── */ +.gk-bit-page .gk-bit-more-btn { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 44px; + padding: 10px 28px; + border-radius: 999px; + background: transparent; + color: var(--gkbp-accent); + border: 1px solid rgba(232,105,10,0.45); + font-family: "DM Mono", ui-monospace, monospace; + font-size: 12px; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; + cursor: pointer; + transition: background 150ms ease, border-color 150ms ease, transform 140ms ease, box-shadow 140ms ease; +} +.gk-bit-page .gk-bit-more-btn:hover { + background: rgba(232,105,10,0.10); + border-color: #E8690A; + transform: translateY(-1px); + box-shadow: 0 8px 20px rgba(232,105,10,0.14); +} +.gk-bit-page .gk-bit-more-btn:active { + transform: translateY(0); +} +.gk-bit-page .gk-bit-more-btn:focus-visible { + outline: 2px solid rgba(232,105,10,0.75); + outline-offset: 3px; +} + +/* ── Fallback message (shown only if BIT fails to load after timeout) ── */ +.gk-bit-page .gk-bit-fallback { + display: none; + font-family: "DM Sans", system-ui, sans-serif; + color: var(--gkbp-muted); + font-size: 16px; + padding: 32px 0; + text-align: center; +} + +/* ── Responsive ── */ +@media (max-width: 820px) { + .gk-bit-page .bit-event, + .gk-bit-page .bit-event-list-item, + .gk-bit-page li[class*="bit-event"] { + padding: 16px 16px !important; + } + .gk-bit-page [class*="bit-event"] [class*="bit-date"] { + font-size: 26px !important; + } + .gk-bit-page [class*="bit-event"] [class*="bit-venue"] { + font-size: 17px !important; + } +} +@media (max-width: 500px) { + .gk-bit-page [class*="bit-event"] [class*="bit-date"] { + font-size: 22px !important; + } + .gk-bit-page [class*="bit-event"] [class*="bit-venue"] { + font-size: 15px !important; + } +} +</style> + +<section class="gk-bit-page" data-section-id="{{ section.id }}"> + <div class="gk-bit-page__inner"> + + {%- if section.settings.eyebrow != blank -%} + <div class="gk-bit-page__eyebrow">{{ section.settings.eyebrow }}</div> + {%- endif -%} + {%- if section.settings.heading != blank -%} + <h1 class="gk-bit-page__heading">{{ section.settings.heading }}</h1> + {%- endif -%} + {%- if section.settings.subtext != blank -%} + <p class="gk-bit-page__subtext">{{ section.settings.subtext }}</p> + {%- endif -%} + + {%- if request.design_mode -%} + <div class="gk-bit-editor-notice"> + ⓘ  Theme Editor: Bandsintown events load live. Click "View" or open the published site to see them. + </div> + {%- endif -%} + + <div id="{{ bit_uid }}" class="gk-bit-page__embed" data-bit-wrap> + {%- comment -%} + Official Bandsintown anchor-initializer. BIT script below finds this element + and replaces it with the rendered widget (event list + ticket links). + {%- endcomment -%} + <a class="bit-widget-initializer" + data-artist-name="{{ bit_artist | escape }}" + data-display-local-dates="false" + data-display-past-dates="false" + data-auto-style="false" + data-button-label-upcoming-events="" + data-button-label-expired-token="Refresh" + data-lang="en" + data-popup-background-color="#111111" + data-text-color="#ffffff" + data-link-color="#E8690A" + data-background-color="rgba(0,0,0,0)" + data-separator-color="rgba(255,255,255,0.08)" + data-display-limit="60" + ></a> + <div class="gk-bit-fallback">Check back soon for upcoming dates.</div> + </div> + + </div> +</section> + +{%- 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 <script> + and inject a fresh one to force main.min.js to re-execute and process the + new .bit-widget-initializer anchor that just appeared in the DOM. +{%- endcomment -%} +<script> +(function(){ + var ATTR = 'data-gk-bit'; + var prev = document.querySelector('script[' + ATTR + ']'); + if (prev) prev.parentNode.removeChild(prev); + var s = document.createElement('script'); + s.charset = 'utf-8'; + s.src = 'https://widget.bandsintown.com/main.min.js'; + s.setAttribute(ATTR, ''); + document.head.appendChild(s); +})(); +</script> + +<script> +(function () { + 'use strict'; + + var SECTION_ID = {{ section.id | json }}; + var WRAP_ID = {{ bit_uid | json }}; + var INIT = {{ bit_initial_visible | plus: 0 }}; + var STEP = {{ bit_reveal_step | plus: 0 }}; + var BTN_LABEL = {{ bit_more_label | json }}; + + /* ── Reusable init function (called on first load + editor re-renders) ── */ + function bootShowMore() { + var wrap = document.getElementById(WRAP_ID); + if (!wrap) return; + + /* Prevent double-init within the same render cycle */ + if (wrap.getAttribute('data-bit-initialized') === '1') return; + wrap.setAttribute('data-bit-initialized', '1'); + + var applied = false; + var moreBtnWrap = null; + + /* Priority-ordered selectors – tries each until it finds event nodes */ + var EVENT_SELS = [ + '.bit-event', + '.bit-event-list-item', + 'li[class*="bit-event"]', + '[class*="bit-event"][class*="item"]', + '.bit-widget li', + '.bit-widget-container li' + ]; + + function findEvents() { + for (var i = 0; i < EVENT_SELS.length; i++) { + var els = wrap.querySelectorAll(EVENT_SELS[i]); + if (els.length) return Array.prototype.slice.call(els); + } + return []; + } + + function ensureMoreBtn() { + if (moreBtnWrap) return moreBtnWrap; + + moreBtnWrap = document.createElement('div'); + moreBtnWrap.style.cssText = 'margin-top:24px;text-align:center;'; + + var btn = document.createElement('button'); + btn.type = 'button'; + btn.className = 'gk-bit-more-btn'; + btn.textContent = BTN_LABEL; + btn.addEventListener('click', function () { + var hidden = findEvents().filter(function (el) { + return el.getAttribute('data-gk-hidden') === '1'; + }); + hidden.slice(0, STEP).forEach(function (el) { + el.removeAttribute('data-gk-hidden'); + el.style.removeProperty('display'); + }); + syncBtn(); + }); + + moreBtnWrap.appendChild(btn); + + /* Append after the BIT container, or fall back to inside wrap */ + var bitContainer = wrap.querySelector('.bit-widget-container') || + wrap.querySelector('.bit-widget'); + if (bitContainer && bitContainer.parentNode === wrap) { + wrap.insertBefore(moreBtnWrap, bitContainer.nextSibling); + } else { + wrap.appendChild(moreBtnWrap); + } + + return moreBtnWrap; + } + + function syncBtn() { + if (!moreBtnWrap) return; + var anyHidden = findEvents().some(function (el) { + return el.getAttribute('data-gk-hidden') === '1'; + }); + moreBtnWrap.style.display = anyHidden ? '' : 'none'; + } + + function setup() { + var events = findEvents(); + if (!events.length) return false; + if (applied) { syncBtn(); return true; } + + applied = true; + + /* Hide events beyond the initial visible count */ + events.forEach(function (el, i) { + if (i >= INIT) { + el.setAttribute('data-gk-hidden', '1'); + el.style.setProperty('display', 'none', 'important'); + } + }); + + if (events.length > INIT) { + ensureMoreBtn(); + syncBtn(); + } + + /* BIT succeeded – suppress the fallback text */ + var fb = wrap.querySelector('.gk-bit-fallback'); + if (fb) fb.style.display = 'none'; + + return true; + } + + /* Try immediately (BIT may have already rendered) */ + if (setup()) return; + + /* Watch for BIT's async DOM injection */ + var debounceTimer; + var obs = new MutationObserver(function () { + clearTimeout(debounceTimer); + debounceTimer = setTimeout(function () { + if (setup()) { + obs.disconnect(); + clearInterval(retryTimer); + } + }, 180); + }); + obs.observe(wrap, { childList: true, subtree: true }); + + /* Belt-and-suspenders: poll every 300 ms for up to 15 s */ + var elapsed = 0; + var retryTimer = setInterval(function () { + elapsed += 300; + if (setup()) { + obs.disconnect(); + clearInterval(retryTimer); + } else if (elapsed >= 15000) { + obs.disconnect(); + clearInterval(retryTimer); + if (!applied) { + var fb = wrap.querySelector('.gk-bit-fallback'); + if (fb) fb.style.display = ''; + } + } + }, 300); + } + + /* ── Run on initial page load ── */ + bootShowMore(); + + /* ── Shopify theme editor: re-init on section reload after save ── */ + var listenerKey = '__gkBitEvt_' + SECTION_ID; + if (window.Shopify && window.Shopify.designMode && !window[listenerKey]) { + window[listenerKey] = true; + document.addEventListener('shopify:section:load', function (evt) { + if (!evt.detail || evt.detail.sectionId !== SECTION_ID) return; + + /* Re-trigger BIT for the freshly-rendered anchor */ + var ATTR = 'data-gk-bit'; + var prev = document.querySelector('script[' + ATTR + ']'); + if (prev) prev.parentNode.removeChild(prev); + var s = document.createElement('script'); + s.charset = 'utf-8'; + s.src = 'https://widget.bandsintown.com/main.min.js'; + s.setAttribute(ATTR, ''); + document.head.appendChild(s); + + /* Re-run show-more init (BIT needs a moment to render) */ + setTimeout(bootShowMore, 600); + }); + } + +}()); +</script> + +{% 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 -%} + +<section class="gk-contact" id="section-{{ section.id }}"> + <div class="gk-contact__inner"> + <div class="gk-contact__header"> + {%- if section.settings.eyebrow != blank -%} + <span class="gk-contact__eyebrow">{{ section.settings.eyebrow }}</span> + {%- endif -%} + {%- if section.settings.heading != blank -%} + <h1 class="gk-contact__heading">{{ section.settings.heading }}</h1> + {%- endif -%} + {%- if section.settings.subtext != blank -%} + <p class="gk-contact__subtext">{{ section.settings.subtext }}</p> + {%- endif -%} + </div> + + <div class="gk-contact__form"> + {%- form 'contact', id: 'ContactForm' -%} + {%- if form.posted_successfully? -%} + <div style="text-align: center; padding: 24px; margin-bottom: 24px; background-color: rgba(232, 105, 10, 0.1); border: 1px solid #E8690A;"> + <p style="color: #E8690A; font-family: 'DM Sans', sans-serif; margin: 0;">{{ section.settings.success_message }}</p> + </div> + {%- endif -%} + + {%- if form.errors -%} + <div style="text-align: center; padding: 24px; margin-bottom: 24px; background-color: rgba(232, 50, 50, 0.1); border: 1px solid #E83232;"> + <p style="color: #E83232; font-family: 'DM Sans', sans-serif; margin: 0;">{{ form.errors | default_errors }}</p> + </div> + {%- endif -%} + + <div class="gk-contact__field"> + <label for="ContactForm-name">{{ section.settings.name_label }}</label> + <input type="text" id="ContactForm-name" name="contact[{{ 'templates.contact.form.name' | t }}]" value="{% if form.name %}{{ form.name }}{% endif %}" placeholder="{{ section.settings.name_placeholder }}" autocomplete="name"> + </div> + + <div class="gk-contact__field"> + <label for="ContactForm-email">{{ section.settings.email_label }}</label> + <input type="email" id="ContactForm-email" name="contact[email]" value="{% if form.email %}{{ form.email }}{% endif %}" placeholder="{{ section.settings.email_placeholder }}" autocomplete="email" required> + </div> + + {%- if section.settings.show_phone -%} + <div class="gk-contact__field"> + <label for="ContactForm-phone">{{ section.settings.phone_label }}</label> + <input type="tel" id="ContactForm-phone" name="contact[{{ 'templates.contact.form.phone' | t }}]" value="{% if form.phone %}{{ form.phone }}{% endif %}" placeholder="{{ section.settings.phone_placeholder }}" autocomplete="tel"> + </div> + {%- endif -%} + + <div class="gk-contact__field"> + <label for="ContactForm-body">{{ section.settings.message_label }}</label> + <textarea id="ContactForm-body" name="contact[{{ 'templates.contact.form.comment' | t }}]" placeholder="{{ section.settings.message_placeholder }}">{% if form.body %}{{ form.body }}{% endif %}</textarea> + </div> + + <div style="text-align: {{ section.settings.button_alignment }};"> + <button type="submit" class="gk-contact__submit">{{ section.settings.submit_label }}</button> + </div> + {%- endform -%} + </div> + + {%- assign has_info = false -%} + {%- for block in section.blocks -%} + {%- if block.type == 'info_item' -%} + {%- assign has_info = true -%} + {%- break -%} + {%- endif -%} + {%- endfor -%} + + {%- if has_info -%} + <div class="gk-contact__info"> + {%- for block in section.blocks -%} + {%- if block.type == 'info_item' -%} + <div class="gk-contact__info-item" {{ block.shopify_attributes }}> + <span class="gk-contact__info-label">{{ block.settings.label }}</span> + <span class="gk-contact__info-value"> + {%- if block.settings.link != blank -%} + <a href="{{ block.settings.link }}">{{ block.settings.value }}</a> + {%- else -%} + {{ block.settings.value }} + {%- endif -%} + </span> + </div> + {%- endif -%} + {%- endfor -%} + </div> + {%- endif -%} + </div> +</section> + +{% 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 -%} + +<section class="gk-dates" data-section-id="{{ section.id }}"> + <div class="gk-dates__inner"> + + {% if section.settings.eyebrow != blank %} + <div class="gk-dates__eyebrow">{{ section.settings.eyebrow }}</div> + {% endif %} + + {% if section.settings.heading != blank %} + <h2 class="gk-dates__heading">{{ section.settings.heading }}</h2> + {% endif %} + + {% if section.settings.subtext != blank %} + <div class="gk-dates__subtext">{{ section.settings.subtext }}</div> + {% endif %} + + <div + class="gk-dates__list" + role="list" + data-visible-count="{{ section.settings.visible_count }}" + data-reveal-step="{{ section.settings.reveal_step }}" + > + {%- render 'gk-tour-dates-shared', + mode: 'render', + row_prefix: 'gk-date', + visible_count: section.settings.visible_count, + use_hidden_class: true + -%} + </div> + + {% if upcoming_count == 0 %} + <div class="gk-dates__empty"> + {{ section.settings.empty_text }} + </div> + {% endif %} + + {% if upcoming_count > section.settings.visible_count %} + <div class="gk-dates__controls"> + <button class="gk-dates__btn" type="button" data-dates-more> + {{ section.settings.show_more_label }} + </button> + + <button class="gk-dates__btn gk-dates__btn--ghost" type="button" data-dates-less hidden> + {{ section.settings.show_less_label }} + </button> + + {% if section.settings.view_all_url != blank %} + <a class="gk-dates__btn gk-dates__btn--ghost" href="{{ section.settings.view_all_url }}"> + {{ section.settings.view_all_label }} + </a> + {% endif %} + </div> + {% elsif section.settings.view_all_url != blank %} + <div class="gk-dates__controls"> + <a class="gk-dates__btn gk-dates__btn--ghost" href="{{ section.settings.view_all_url }}"> + {{ section.settings.view_all_label }} + </a> + </div> + {% endif %} + + </div> +</section> + +<script> +(function() { + var root = document.querySelector('.gk-dates[data-section-id="{{ section.id }}"]'); + if (!root) return; + + var list = root.querySelector('.gk-dates__list'); + if (!list) return; + + var rows = Array.prototype.slice.call(root.querySelectorAll('[data-date-row]')); + if (!rows.length) return; + + var moreBtn = root.querySelector('[data-dates-more]'); + var lessBtn = root.querySelector('[data-dates-less]'); + + var visibleCount = parseInt(list.getAttribute('data-visible-count') || '10', 10); + var step = parseInt(list.getAttribute('data-reveal-step') || '10', 10); + + var shown = Math.min(visibleCount, rows.length); + + function apply() { + rows.forEach(function(r, i) { + if (i < shown) r.classList.remove('is-hidden'); + else r.classList.add('is-hidden'); + }); + + if (moreBtn) moreBtn.hidden = (shown >= rows.length); + if (lessBtn) lessBtn.hidden = (shown <= visibleCount); + } + + if (moreBtn) { + moreBtn.addEventListener('click', function() { + shown = Math.min(shown + step, rows.length); + apply(); + }); + } + + if (lessBtn) { + lessBtn.addEventListener('click', function() { + shown = Math.min(visibleCount, rows.length); + apply(); + root.scrollIntoView({ behavior: 'smooth', block: 'start' }); + }); + } + + apply(); +})(); +</script> + +<style> + .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; } + } +</style> + +{% 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 -%} + +<section class="gk-featured-gristle" id="section-{{ section.id }}"> + <div class="gk-featured-gristle__inner"> + <div class="gk-featured-gristle__header"> + {%- if section.settings.eyebrow != blank -%} + <span class="gk-featured-gristle__eyebrow">{{ section.settings.eyebrow }}</span> + {%- endif -%} + {%- if section.settings.heading != blank -%} + <h2 class="gk-featured-gristle__heading">{{ section.settings.heading }}</h2> + {%- endif -%} + {%- if section.settings.subtext != blank -%} + <p class="gk-featured-gristle__subtext">{{ section.settings.subtext }}</p> + {%- endif -%} + </div> + + {%- if section.blocks.size > 0 -%} + <div class="gk-featured-gristle__grid"> + {%- for block in section.blocks -%} + <a href="{{ block.settings.link }}" class="gk-featured-gristle__card" {{ block.shopify_attributes }}> + {%- if block.settings.image != blank -%} + <div class="gk-featured-gristle__card-image"> + {{ 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' + }} + </div> + {%- endif -%} + <div class="gk-featured-gristle__card-content"> + {%- if block.settings.label != blank -%} + <span class="gk-featured-gristle__card-label">{{ block.settings.label }}</span> + {%- endif -%} + {%- if block.settings.title != blank -%} + <h3 class="gk-featured-gristle__card-title">{{ block.settings.title }}</h3> + {%- endif -%} + {%- if block.settings.description != blank -%} + <p class="gk-featured-gristle__card-desc">{{ block.settings.description }}</p> + {%- endif -%} + {%- if block.settings.button_label != blank -%} + <span class="gk-featured-gristle__card-btn">{{ block.settings.button_label }}</span> + {%- endif -%} + </div> + </a> + {%- endfor -%} + </div> + {%- endif -%} + </div> +</section> + +{% 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 -%} + +<section class="gk-hero" id="section-{{ section.id }}"> + {%- if section.settings.image != blank -%} + <div class="gk-hero__media"> + {{ 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 + }} + </div> + {%- else -%} + <div class="gk-hero__media" style="background-color: #141414;"></div> + {%- endif -%} + + <div class="gk-hero__overlay"></div> + + <div class="gk-hero__content"> + {%- for block in section.blocks -%} + {%- case block.type -%} + {%- when 'eyebrow' -%} + {%- if block.settings.text != blank -%} + <span class="gk-hero__eyebrow" {{ block.shopify_attributes }}>{{ block.settings.text }}</span> + {%- endif -%} + + {%- when 'heading' -%} + {%- if block.settings.heading != blank -%} + <h1 class="gk-hero__heading" {{ block.shopify_attributes }}>{{ block.settings.heading }}</h1> + {%- endif -%} + + {%- when 'subheading' -%} + {%- if block.settings.text != blank -%} + <p class="gk-hero__subheading" {{ block.shopify_attributes }}>{{ block.settings.text }}</p> + {%- endif -%} + + {%- when 'buttons' -%} + <div class="gk-hero__buttons" {{ block.shopify_attributes }}> + {%- if block.settings.button_label_1 != blank -%} + <a href="{{ block.settings.button_link_1 }}" class="gk-hero__btn gk-hero__btn--primary"> + {{ block.settings.button_label_1 }} + </a> + {%- endif -%} + {%- if block.settings.button_label_2 != blank -%} + <a href="{{ block.settings.button_link_2 }}" class="gk-hero__btn gk-hero__btn--secondary"> + {{ block.settings.button_label_2 }} + </a> + {%- endif -%} + </div> + {%- endcase -%} + {%- endfor -%} + </div> +</section> + +{% 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-courses.liquid b/sections/gk-lessons-courses.liquid new file mode 100644 index 00000000000..b73541afaa3 --- /dev/null +++ b/sections/gk-lessons-courses.liquid @@ -0,0 +1,325 @@ +{%- style -%} + .gk-lessons-courses { + background-color: #0D0D0D; + padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px; + } + + .gk-lessons-courses__inner { + max-width: var(--page-width); + margin: 0 auto; + padding: 0 24px; + } + + .gk-lessons-courses__header { + text-align: center; + margin-bottom: 56px; + } + + .gk-lessons-courses__heading { + font-family: 'Bebas Neue', sans-serif; + font-size: clamp(2.2rem, 5vw, 3.2rem); + color: #E8E8E8; + text-transform: uppercase; + letter-spacing: 3px; + margin: 0 0 14px 0; + line-height: 1; + } + + .gk-lessons-courses__subheading { + font-family: 'DM Sans', sans-serif; + font-size: 1.05rem; + color: #666666; + line-height: 1.7; + max-width: 520px; + margin: 0 auto; + } + + .gk-lessons-courses__grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; + } + + .gk-lessons-courses__card { + background-color: rgba(20, 20, 20, 0.85); + border: 1px solid #272727; + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + display: flex; + flex-direction: column; + padding: 32px 28px; + transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease; + position: relative; + } + + .gk-lessons-courses__card:hover { + transform: translateY(-2px); + border-color: rgba(232, 105, 10, 0.55); + box-shadow: 0 8px 32px rgba(232, 105, 10, 0.1); + } + + .gk-lessons-courses__card-label { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 3px; + font-size: 0.7rem; + color: #E8690A; + margin-bottom: 14px; + display: block; + } + + .gk-lessons-courses__card-title { + font-family: 'Bebas Neue', sans-serif; + font-size: 1.65rem; + color: #E8E8E8; + text-transform: uppercase; + letter-spacing: 1px; + margin: 0 0 14px 0; + line-height: 1.1; + } + + .gk-lessons-courses__card-desc { + font-family: 'DM Sans', sans-serif; + color: #777777; + font-size: 0.92rem; + line-height: 1.7; + margin: 0 0 28px 0; + flex: 1; + } + + .gk-lessons-courses__card-btn { + display: inline-flex; + align-items: center; + gap: 6px; + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.72rem; + font-weight: 500; + color: #E8690A; + border: 1px solid rgba(232, 105, 10, 0.5); + padding: 12px 22px; + text-decoration: none; + transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease; + align-self: flex-start; + } + + .gk-lessons-courses__card-btn:hover { + background-color: #E8690A; + color: #0D0D0D; + border-color: #E8690A; + box-shadow: 0 0 20px rgba(232, 105, 10, 0.2); + } + + @media screen and (max-width: 989px) { + .gk-lessons-courses__grid { + grid-template-columns: repeat(2, 1fr); + } + } + + @media screen and (max-width: 749px) { + .gk-lessons-courses__grid { + grid-template-columns: 1fr; + } + + .gk-lessons-courses__card { + padding: 26px 22px; + } + } +{%- endstyle -%} + +<section class="gk-lessons-courses" id="section-{{ section.id }}"> + <div class="gk-lessons-courses__inner"> + + <div class="gk-lessons-courses__header"> + {%- if section.settings.heading != blank -%} + <h2 class="gk-lessons-courses__heading">{{ section.settings.heading }}</h2> + {%- endif -%} + {%- if section.settings.subheading != blank -%} + <p class="gk-lessons-courses__subheading">{{ section.settings.subheading }}</p> + {%- endif -%} + </div> + + {%- if section.blocks.size > 0 -%} + <div class="gk-lessons-courses__grid"> + {%- for block in section.blocks -%} + <div class="gk-lessons-courses__card" {{ block.shopify_attributes }}> + <span class="gk-lessons-courses__card-label">TrueFire</span> + {%- if block.settings.title != blank -%} + <h3 class="gk-lessons-courses__card-title">{{ block.settings.title }}</h3> + {%- endif -%} + {%- if block.settings.description != blank -%} + <p class="gk-lessons-courses__card-desc">{{ block.settings.description }}</p> + {%- endif -%} + {%- if block.settings.url != blank -%} + <a + href="{{ block.settings.url }}" + class="gk-lessons-courses__card-btn" + target="_blank" + rel="noopener noreferrer"> + {{ block.settings.button_label | default: 'View Course →' }} + </a> + {%- endif -%} + </div> + {%- endfor -%} + </div> + {%- endif -%} + + </div> +</section> + +{% schema %} +{ + "name": "GK Lessons Courses", + "tag": "section", + "class": "gk-lessons-courses-section", + "settings": [ + { + "type": "text", + "id": "heading", + "label": "Section Heading", + "default": "TrueFire Courses" + }, + { + "type": "textarea", + "id": "subheading", + "label": "Section Subheading", + "default": "Interactive video masterclasses with Greg Koch." + }, + { + "type": "header", + "content": "Spacing" + }, + { + "type": "range", + "id": "padding_top", + "label": "Padding Top", + "min": 0, + "max": 120, + "step": 8, + "default": 72, + "unit": "px" + }, + { + "type": "range", + "id": "padding_bottom", + "label": "Padding Bottom", + "min": 0, + "max": 120, + "step": 8, + "default": 72, + "unit": "px" + } + ], + "blocks": [ + { + "type": "course", + "name": "Course Card", + "settings": [ + { + "type": "text", + "id": "title", + "label": "Course Title", + "default": "Course Title" + }, + { + "type": "textarea", + "id": "description", + "label": "Course Description", + "default": "Short description of this course." + }, + { + "type": "url", + "id": "url", + "label": "Course URL" + }, + { + "type": "text", + "id": "button_label", + "label": "Button Label", + "default": "View Course \u2192" + } + ] + } + ], + "presets": [ + { + "name": "GK Lessons Courses", + "blocks": [ + { + "type": "course", + "settings": { + "title": "Gristleman Guitar", + "description": "A full School of Gristle masterclass covering hybrid picking, vibrato, bends, comping, double-stops, slide, solo construction, and more.", + "url": "https://www.gregkoch.com/gristleman-guitar.html", + "button_label": "View Course \u2192" + } + }, + { + "type": "course", + "settings": { + "title": "Hybrid Picking from the Gristle Shop", + "description": "A focused TrueFire course on hybrid picking rhythm patterns, chicken pickin\u2019, Travis picking, banjo rolls, double stops, and harp harmonics.", + "url": "https://www.gregkoch.com/hybrid-picking-from-the-gristle-shop.html", + "button_label": "View Course \u2192" + } + }, + { + "type": "course", + "settings": { + "title": "30 Gristleman Guitar Licks", + "description": "Thirty signature Greg Koch-style licks and phrases for players wanting more vocabulary and phrasing ideas.", + "url": "https://www.gregkoch.com/30-gristleman-guitar-licks.html", + "button_label": "View Course \u2192" + } + }, + { + "type": "course", + "settings": { + "title": "Rhythm Chops from the Gristle Shop", + "description": "A rhythm course packed with funky sixths, triple stops, pentatonic triads, stacked fourths, shuffles, and chordal gristle.", + "url": "https://www.gregkoch.com/rhythm-chops-from-the-gristle-shop.html", + "button_label": "View Course \u2192" + } + }, + { + "type": "course", + "settings": { + "title": "My Guitar Heroes", + "description": "Greg breaks down approaches inspired by some of his guitar heroes and shows how those influences shape his playing.", + "url": "https://www.gregkoch.com/my-guitar-heros.html", + "button_label": "View Course \u2192" + } + }, + { + "type": "course", + "settings": { + "title": "Exotic Blues from the Gristle Shop", + "description": "A blues-focused course exploring Greg\u2019s approach to exotic phrasing and modern blues vocabulary.", + "url": "https://www.gregkoch.com/exotic-blues-from-the-gristle-shop.html", + "button_label": "View Course \u2192" + } + }, + { + "type": "course", + "settings": { + "title": "Solo Gristleman Guitar", + "description": "A course on chord inversions, solo arrangements, and turning harmonic ideas into standalone guitar performances.", + "url": "https://www.gregkoch.com/solo-gristleman-guitar.html", + "button_label": "View Course \u2192" + } + }, + { + "type": "course", + "settings": { + "title": "In The Jam with The Koch Marshall Trio", + "description": "Jump into a jam experience with Greg Koch, Dylan Koch, and Toby Lee Marshall.", + "url": "https://www.gregkoch.com/in-the-jam-with-the-koch-marshall-trio.html", + "button_label": "View Course \u2192" + } + } + ] + } + ] +} +{% endschema %} diff --git a/sections/gk-lessons-hero.liquid b/sections/gk-lessons-hero.liquid new file mode 100644 index 00000000000..add566cb479 --- /dev/null +++ b/sections/gk-lessons-hero.liquid @@ -0,0 +1,223 @@ +{%- style -%} + .gk-lessons-hero { + background-color: #0D0D0D; + padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px; + position: relative; + overflow: hidden; + } + + .gk-lessons-hero::before { + content: ''; + position: absolute; + top: -10%; + left: 50%; + transform: translateX(-50%); + width: 920px; + height: 580px; + background: radial-gradient(ellipse at center, rgba(232, 105, 10, 0.08) 0%, transparent 68%); + pointer-events: none; + z-index: 0; + } + + .gk-lessons-hero::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(to right, transparent, rgba(232, 105, 10, 0.28), transparent); + z-index: 1; + } + + .gk-lessons-hero__inner { + max-width: var(--page-width); + margin: 0 auto; + padding: 0 24px; + position: relative; + z-index: 2; + } + + .gk-lessons-hero__content { + text-align: center; + max-width: 820px; + margin: 0 auto; + } + + .gk-lessons-hero__eyebrow { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 4px; + font-size: 0.82rem; + color: #E8690A; + margin-bottom: 20px; + display: block; + } + + .gk-lessons-hero__heading { + font-family: 'Bebas Neue', sans-serif; + font-size: clamp(3.2rem, 9vw, 6rem); + color: #E8E8E8; + text-transform: uppercase; + letter-spacing: 4px; + margin: 0 0 4px 0; + line-height: 0.95; + } + + .gk-lessons-hero__divider { + display: flex; + align-items: center; + justify-content: center; + gap: 14px; + margin: 28px auto 28px; + width: 260px; + } + + .gk-lessons-hero__divider-line { + flex: 1; + height: 1px; + background: linear-gradient(to right, transparent, rgba(232, 105, 10, 0.7), transparent); + } + + .gk-lessons-hero__divider-dot { + width: 5px; + height: 5px; + background-color: #E8690A; + transform: rotate(45deg); + flex-shrink: 0; + box-shadow: 0 0 10px rgba(232, 105, 10, 0.7); + } + + .gk-lessons-hero__subheading { + font-family: 'DM Sans', sans-serif; + font-size: 1.25rem; + color: #B0B0B0; + line-height: 1.75; + margin: 0 auto 18px; + max-width: 680px; + } + + .gk-lessons-hero__intro { + font-family: 'DM Sans', sans-serif; + font-size: 1.05rem; + color: #666666; + line-height: 1.75; + max-width: 580px; + margin: 0 auto; + } + + @media screen and (max-width: 989px) { + .gk-lessons-hero::before { + width: 620px; + height: 420px; + } + } + + @media screen and (max-width: 749px) { + .gk-lessons-hero__heading { + font-size: clamp(2.6rem, 13vw, 3.8rem); + letter-spacing: 2px; + } + + .gk-lessons-hero__subheading { + font-size: 1.1rem; + } + + .gk-lessons-hero__divider { + width: 200px; + } + } +{%- endstyle -%} + +<section class="gk-lessons-hero" id="section-{{ section.id }}"> + <div class="gk-lessons-hero__inner"> + <div class="gk-lessons-hero__content"> + + {%- if section.settings.eyebrow != blank -%} + <span class="gk-lessons-hero__eyebrow">{{ section.settings.eyebrow }}</span> + {%- endif -%} + + {%- if section.settings.heading != blank -%} + <h1 class="gk-lessons-hero__heading">{{ section.settings.heading }}</h1> + {%- endif -%} + + <div class="gk-lessons-hero__divider"> + <span class="gk-lessons-hero__divider-line"></span> + <span class="gk-lessons-hero__divider-dot"></span> + <span class="gk-lessons-hero__divider-line"></span> + </div> + + {%- if section.settings.subheading != blank -%} + <p class="gk-lessons-hero__subheading">{{ section.settings.subheading }}</p> + {%- endif -%} + + {%- if section.settings.intro_text != blank -%} + <p class="gk-lessons-hero__intro">{{ section.settings.intro_text }}</p> + {%- endif -%} + + </div> + </div> +</section> + +{% schema %} +{ + "name": "GK Lessons Hero", + "tag": "section", + "class": "gk-lessons-hero-section", + "settings": [ + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow Text", + "default": "School of Gristle" + }, + { + "type": "text", + "id": "heading", + "label": "Headline", + "default": "Greg Koch Guitar Lessons" + }, + { + "type": "textarea", + "id": "subheading", + "label": "Subheading", + "default": "Take lessons from Greg, who Guitar World called \u201cOne of the Best All-Star Guitar Teachers.\u201d" + }, + { + "type": "textarea", + "id": "intro_text", + "label": "Intro Paragraph", + "default": "Explore Greg\u2019s TrueFire masterclasses, instructional books, DVDs, and on-demand lesson resources." + }, + { + "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 Lessons Hero" + } + ] +} +{% endschema %} diff --git a/sections/gk-lessons-page.liquid b/sections/gk-lessons-page.liquid new file mode 100644 index 00000000000..2cc1a396eb5 --- /dev/null +++ b/sections/gk-lessons-page.liquid @@ -0,0 +1,406 @@ +{%- 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 -%} + +<section class="gk-lessons" id="section-{{ section.id }}"> + <div class="gk-lessons__inner"> + <div class="gk-lessons__header"> + {%- if section.settings.eyebrow != blank -%} + <span class="gk-lessons__eyebrow">{{ section.settings.eyebrow }}</span> + {%- endif -%} + {%- if section.settings.heading != blank -%} + <h1 class="gk-lessons__heading">{{ section.settings.heading }}</h1> + {%- endif -%} + {%- if section.settings.subtext != blank -%} + <p class="gk-lessons__subtext">{{ section.settings.subtext }}</p> + {%- endif -%} + </div> + + {%- if section.blocks.size > 0 -%} + <div class="gk-lessons__grid"> + {%- for block in section.blocks -%} + <div class="gk-lessons__card" {{ block.shopify_attributes }}> + {%- if block.settings.image != blank -%} + <div class="gk-lessons__card-image"> + {{ 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' + }} + </div> + {%- endif -%} + <div class="gk-lessons__card-content"> + {%- if block.settings.label != blank -%} + <span class="gk-lessons__card-label">{{ block.settings.label }}</span> + {%- endif -%} + {%- if block.settings.title != blank -%} + <h2 class="gk-lessons__card-title">{{ block.settings.title }}</h2> + {%- endif -%} + {%- if block.settings.description != blank -%} + <p class="gk-lessons__card-desc">{{ block.settings.description }}</p> + {%- endif -%} + + {%- if block.settings.features != blank -%} + <ul class="gk-lessons__features"> + {%- assign features = block.settings.features | split: "|" -%} + {%- for feature in features -%} + <li>{{ feature | strip }}</li> + {%- endfor -%} + </ul> + {%- endif -%} + + {%- if block.settings.price != blank -%} + <div class="gk-lessons__card-price">{{ block.settings.price }}</div> + {%- endif -%} + + {%- if block.settings.button_label != blank -%} + <a href="{{ block.settings.button_link }}" class="gk-lessons__card-btn">{{ block.settings.button_label }}</a> + {%- endif -%} + </div> + </div> + {%- endfor -%} + </div> + {%- endif -%} + </div> +</section> + +{% 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", + "default": "" + }, + { + "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-lessons-resources.liquid b/sections/gk-lessons-resources.liquid new file mode 100644 index 00000000000..5818bfe2d97 --- /dev/null +++ b/sections/gk-lessons-resources.liquid @@ -0,0 +1,417 @@ +{%- style -%} + .gk-lessons-resources { + background-color: #0D0D0D; + padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px; + border-top: 1px solid #191919; + } + + .gk-lessons-resources__inner { + max-width: var(--page-width); + margin: 0 auto; + padding: 0 24px; + } + + .gk-lessons-resources__header { + text-align: center; + margin-bottom: 52px; + } + + .gk-lessons-resources__heading { + font-family: 'Bebas Neue', sans-serif; + font-size: clamp(2.2rem, 5vw, 3.2rem); + color: #E8E8E8; + text-transform: uppercase; + letter-spacing: 3px; + margin: 0 0 14px 0; + line-height: 1; + } + + .gk-lessons-resources__subheading { + font-family: 'DM Sans', sans-serif; + font-size: 1.05rem; + color: #666666; + line-height: 1.7; + max-width: 520px; + margin: 0 auto; + } + + .gk-lessons-resources__grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 24px; + } + + /* ── Card Base ── */ + .gk-lessons-resources__card { + background-color: rgba(20, 20, 20, 0.85); + border: 1px solid #272727; + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + display: flex; + flex-direction: column; + padding: 36px 28px; + transition: transform 155ms ease, border-color 155ms ease, box-shadow 155ms ease; + } + + .gk-lessons-resources__card:hover { + transform: translateY(-2px); + border-color: rgba(232, 105, 10, 0.45); + box-shadow: 0 8px 32px rgba(232, 105, 10, 0.09); + } + + /* Unavailable card: no hover lift */ + .gk-lessons-resources__card--unavailable { + border-color: #202020; + opacity: 0.7; + } + + .gk-lessons-resources__card--unavailable:hover { + transform: none; + border-color: #272727; + box-shadow: none; + } + + .gk-lessons-resources__card-eyebrow { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 3px; + font-size: 0.7rem; + color: #E8690A; + margin-bottom: 14px; + display: block; + } + + .gk-lessons-resources__card-title { + font-family: 'Bebas Neue', sans-serif; + font-size: 1.55rem; + color: #E8E8E8; + text-transform: uppercase; + letter-spacing: 1px; + margin: 0 0 10px 0; + line-height: 1.1; + } + + .gk-lessons-resources__card-subtitle { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.7rem; + color: #555555; + margin: 0 0 14px 0; + display: block; + } + + .gk-lessons-resources__card-body { + font-family: 'DM Sans', sans-serif; + color: #777777; + font-size: 0.92rem; + line-height: 1.7; + margin: 0 0 10px 0; + flex: 1; + } + + /* ── Unavailable badge ── */ + .gk-lessons-resources__unavailable-badge { + display: inline-block; + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.68rem; + color: #444444; + border: 1px solid #2A2A2A; + padding: 6px 14px; + margin-top: 18px; + align-self: flex-start; + } + + .gk-lessons-resources__unavailable-note { + font-family: 'DM Sans', sans-serif; + font-size: 0.82rem; + color: #3D3D3D; + margin: 12px 0 0 0; + line-height: 1.5; + font-style: italic; + } + + /* ── CTA Button ── */ + .gk-lessons-resources__card-btn { + display: inline-flex; + align-items: center; + gap: 6px; + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.72rem; + font-weight: 500; + color: #E8690A; + border: 1px solid rgba(232, 105, 10, 0.5); + padding: 12px 22px; + text-decoration: none; + margin-top: 24px; + align-self: flex-start; + transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease; + } + + .gk-lessons-resources__card-btn:hover { + background-color: #E8690A; + color: #0D0D0D; + border-color: #E8690A; + box-shadow: 0 0 20px rgba(232, 105, 10, 0.2); + } + + @media screen and (max-width: 1199px) { + .gk-lessons-resources__grid { + grid-template-columns: repeat(2, 1fr); + } + } + + @media screen and (max-width: 749px) { + .gk-lessons-resources__grid { + grid-template-columns: 1fr; + } + + .gk-lessons-resources__card { + padding: 28px 22px; + } + } +{%- endstyle -%} + +<section class="gk-lessons-resources" id="section-{{ section.id }}"> + <div class="gk-lessons-resources__inner"> + + <div class="gk-lessons-resources__header"> + {%- if section.settings.heading != blank -%} + <h2 class="gk-lessons-resources__heading">{{ section.settings.heading }}</h2> + {%- endif -%} + {%- if section.settings.subheading != blank -%} + <p class="gk-lessons-resources__subheading">{{ section.settings.subheading }}</p> + {%- endif -%} + </div> + + <div class="gk-lessons-resources__grid"> + + <!-- Card 1: Private Lessons (unavailable) --> + <div class="gk-lessons-resources__card gk-lessons-resources__card--unavailable"> + <span class="gk-lessons-resources__card-eyebrow">Private</span> + <h3 class="gk-lessons-resources__card-title">{{ section.settings.private_title }}</h3> + <p class="gk-lessons-resources__card-body">{{ section.settings.private_body }}</p> + <span class="gk-lessons-resources__unavailable-badge">Currently Unavailable</span> + {%- if section.settings.private_note != blank -%} + <p class="gk-lessons-resources__unavailable-note">{{ section.settings.private_note }}</p> + {%- endif -%} + </div> + + <!-- Card 2: Instructional Books --> + <div class="gk-lessons-resources__card"> + <span class="gk-lessons-resources__card-eyebrow">Books</span> + <h3 class="gk-lessons-resources__card-title">{{ section.settings.books_title }}</h3> + <p class="gk-lessons-resources__card-body">{{ section.settings.books_body }}</p> + {%- if section.settings.books_url != blank -%} + <a href="{{ section.settings.books_url }}" class="gk-lessons-resources__card-btn"> + {{ section.settings.books_btn | default: 'Shop Books →' }} + </a> + {%- endif -%} + </div> + + <!-- Card 3: Instructional DVDs --> + <div class="gk-lessons-resources__card"> + <span class="gk-lessons-resources__card-eyebrow">DVDs</span> + <h3 class="gk-lessons-resources__card-title">{{ section.settings.dvds_title }}</h3> + <p class="gk-lessons-resources__card-body">{{ section.settings.dvds_body }}</p> + {%- if section.settings.dvds_url != blank -%} + <a href="{{ section.settings.dvds_url }}" class="gk-lessons-resources__card-btn"> + {{ section.settings.dvds_btn | default: 'Shop DVDs →' }} + </a> + {%- endif -%} + </div> + + <!-- Card 4: GuitarInstructor.com --> + <div class="gk-lessons-resources__card"> + <span class="gk-lessons-resources__card-eyebrow">On Demand</span> + <h3 class="gk-lessons-resources__card-title">{{ section.settings.gi_title }}</h3> + {%- if section.settings.gi_subtitle != blank -%} + <span class="gk-lessons-resources__card-subtitle">{{ section.settings.gi_subtitle }}</span> + {%- endif -%} + <p class="gk-lessons-resources__card-body">{{ section.settings.gi_body }}</p> + {%- if section.settings.gi_url != blank -%} + <a + href="{{ section.settings.gi_url }}" + class="gk-lessons-resources__card-btn" + target="_blank" + rel="noopener noreferrer"> + {{ section.settings.gi_btn | default: 'Visit GuitarInstructor.com →' }} + </a> + {%- endif -%} + </div> + + </div> + </div> +</section> + +{% schema %} +{ + "name": "GK Lessons Resources", + "tag": "section", + "class": "gk-lessons-resources-section", + "settings": [ + { + "type": "text", + "id": "heading", + "label": "Section Heading", + "default": "More Ways to Learn" + }, + { + "type": "textarea", + "id": "subheading", + "label": "Section Subheading", + "default": "Books, DVDs, and on-demand video resources from Greg Koch." + }, + { + "type": "header", + "content": "Private Lessons Card" + }, + { + "type": "text", + "id": "private_title", + "label": "Title", + "default": "Private Lessons" + }, + { + "type": "textarea", + "id": "private_body", + "label": "Body Text", + "default": "Virtual lessons with Greg." + }, + { + "type": "text", + "id": "private_note", + "label": "Availability Note", + "default": "Check back for future availability." + }, + { + "type": "header", + "content": "Instructional Books Card" + }, + { + "type": "text", + "id": "books_title", + "label": "Title", + "default": "Instructional Books" + }, + { + "type": "textarea", + "id": "books_body", + "label": "Body Text", + "default": "Explore Greg\u2019s instructional books, guitar methods, play-alongs, and learning resources." + }, + { + "type": "url", + "id": "books_url", + "label": "Books Collection URL", + "info": "Link to your Shopify instructional books collection, e.g. /collections/instructional-books" + }, + { + "type": "text", + "id": "books_btn", + "label": "Button Label", + "default": "Shop Books \u2192" + }, + { + "type": "header", + "content": "Instructional DVDs Card" + }, + { + "type": "text", + "id": "dvds_title", + "label": "Title", + "default": "Instructional DVDs" + }, + { + "type": "textarea", + "id": "dvds_body", + "label": "Body Text", + "default": "Browse Greg\u2019s instructional DVD catalog and video learning resources." + }, + { + "type": "url", + "id": "dvds_url", + "label": "DVDs Collection URL", + "info": "Link to your Shopify instructional DVDs collection, e.g. /collections/instructional-dvds" + }, + { + "type": "text", + "id": "dvds_btn", + "label": "Button Label", + "default": "Shop DVDs \u2192" + }, + { + "type": "header", + "content": "GuitarInstructor.com Card" + }, + { + "type": "text", + "id": "gi_title", + "label": "Title", + "default": "GuitarInstructor.com" + }, + { + "type": "text", + "id": "gi_subtitle", + "label": "Subtitle / Tagline", + "default": "On-demand video lessons" + }, + { + "type": "textarea", + "id": "gi_body", + "label": "Body Text", + "default": "Explore Greg\u2019s instructor page and additional lessons at GuitarInstructor.com." + }, + { + "type": "url", + "id": "gi_url", + "label": "GuitarInstructor URL", + "info": "Paste the full GuitarInstructor.com profile URL here." + }, + { + "type": "text", + "id": "gi_btn", + "label": "Button Label", + "default": "Visit GuitarInstructor.com \u2192" + }, + { + "type": "header", + "content": "Spacing" + }, + { + "type": "range", + "id": "padding_top", + "label": "Padding Top", + "min": 0, + "max": 120, + "step": 8, + "default": 72, + "unit": "px" + }, + { + "type": "range", + "id": "padding_bottom", + "label": "Padding Bottom", + "min": 0, + "max": 120, + "step": 8, + "default": 72, + "unit": "px" + } + ], + "presets": [ + { + "name": "GK Lessons Resources", + "settings": { + "books_url": "/collections/instructional-books", + "dvds_url": "/collections/instructional-dvds", + "gi_url": "https://www.guitarinstructor.com/product/viewinstructor.action?contributorid=52595" + } + } + ] +} +{% endschema %} diff --git a/sections/gk-press-hero.liquid b/sections/gk-press-hero.liquid new file mode 100644 index 00000000000..41ed61ceb63 --- /dev/null +++ b/sections/gk-press-hero.liquid @@ -0,0 +1,409 @@ +{%- style -%} + .gk-press-hero { + background-color: #0D0D0D; + padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px; + position: relative; + overflow: hidden; + } + + .gk-press-hero::before { + content: ''; + position: absolute; + top: -10%; + left: 50%; + transform: translateX(-50%); + width: 900px; + height: 560px; + background: radial-gradient(ellipse at center, rgba(232, 105, 10, 0.07) 0%, transparent 68%); + pointer-events: none; + z-index: 0; + } + + .gk-press-hero::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(to right, transparent, rgba(232, 105, 10, 0.25), 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; + } + + .gk-press-hero__eyebrow { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 4px; + font-size: 0.82rem; + color: #E8690A; + margin-bottom: 20px; + display: block; + } + + .gk-press-hero__heading { + font-family: 'Bebas Neue', sans-serif; + font-size: clamp(3.2rem, 9vw, 6rem); + color: #E8E8E8; + text-transform: uppercase; + letter-spacing: 4px; + margin: 0 0 4px 0; + line-height: 0.95; + } + + .gk-press-hero__divider { + display: flex; + align-items: center; + justify-content: center; + gap: 14px; + margin: 28px auto 28px; + width: 260px; + } + + .gk-press-hero__divider-line { + flex: 1; + height: 1px; + background: linear-gradient(to right, transparent, rgba(232, 105, 10, 0.7), transparent); + } + + .gk-press-hero__divider-dot { + width: 5px; + height: 5px; + background-color: #E8690A; + transform: rotate(45deg); + flex-shrink: 0; + box-shadow: 0 0 10px rgba(232, 105, 10, 0.7); + } + + .gk-press-hero__subheading { + font-family: 'DM Sans', sans-serif; + font-size: 1.25rem; + color: #B0B0B0; + line-height: 1.75; + margin: 0 auto 16px; + max-width: 660px; + } + + .gk-press-hero__intro { + font-family: 'DM Sans', sans-serif; + font-size: 1.05rem; + color: #666666; + line-height: 1.75; + max-width: 560px; + margin: 0 auto 40px; + } + + /* ── Press Kit Button ── */ + .gk-press-hero__cta { + margin: 0 auto 8px; + } + + .gk-press-hero__kit-btn { + display: inline-flex; + align-items: center; + gap: 10px; + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 3px; + font-size: 0.78rem; + font-weight: 500; + color: #E8690A; + border: 1px solid rgba(232, 105, 10, 0.55); + padding: 14px 28px; + text-decoration: none; + transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease; + } + + .gk-press-hero__kit-btn:hover { + background-color: #E8690A; + color: #0D0D0D; + border-color: #E8690A; + box-shadow: 0 0 24px rgba(232, 105, 10, 0.25); + } + + .gk-press-hero__kit-btn svg { + width: 14px; + height: 14px; + fill: currentColor; + flex-shrink: 0; + } + + /* ── Featured In ── */ + .gk-press-hero__featured-in { + margin-top: 52px; + padding-top: 36px; + border-top: 1px solid #222222; + } + + .gk-press-hero__featured-in-label { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 4px; + font-size: 0.72rem; + color: #444444; + display: block; + margin-bottom: 22px; + } + + .gk-press-hero__featured-in-row { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 10px 20px; + } + + .gk-press-hero__pub-badge { + font-family: 'DM Mono', monospace; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 0.72rem; + color: #4A4A4A; + padding: 7px 14px; + border: 1px solid #232323; + transition: color 150ms ease, border-color 150ms ease, box-shadow 150ms ease; + display: inline-block; + } + + .gk-press-hero__pub-badge:hover { + color: #E8690A; + border-color: rgba(232, 105, 10, 0.4); + box-shadow: 0 0 12px rgba(232, 105, 10, 0.08); + } + + @media screen and (max-width: 989px) { + .gk-press-hero::before { + width: 600px; + height: 400px; + } + } + + @media screen and (max-width: 749px) { + .gk-press-hero__heading { + font-size: clamp(2.6rem, 13vw, 3.8rem); + letter-spacing: 2px; + } + + .gk-press-hero__subheading { + font-size: 1.1rem; + } + + .gk-press-hero__divider { + width: 200px; + } + } +{%- endstyle -%} + +<section class="gk-press-hero" id="section-{{ section.id }}"> + <div class="gk-press-hero__inner"> + <div class="gk-press-hero__content"> + + {%- if section.settings.eyebrow != blank -%} + <span class="gk-press-hero__eyebrow">{{ section.settings.eyebrow }}</span> + {%- endif -%} + + {%- if section.settings.heading != blank -%} + <h1 class="gk-press-hero__heading">{{ section.settings.heading }}</h1> + {%- endif -%} + + <div class="gk-press-hero__divider"> + <span class="gk-press-hero__divider-line"></span> + <span class="gk-press-hero__divider-dot"></span> + <span class="gk-press-hero__divider-line"></span> + </div> + + {%- if section.settings.subheading != blank -%} + <p class="gk-press-hero__subheading">{{ section.settings.subheading }}</p> + {%- endif -%} + + {%- if section.settings.intro_text != blank -%} + <p class="gk-press-hero__intro">{{ section.settings.intro_text }}</p> + {%- endif -%} + + {%- if section.settings.press_kit_url != blank -%} + <div class="gk-press-hero__cta"> + <a + href="{{ section.settings.press_kit_url }}" + class="gk-press-hero__kit-btn" + {% unless section.settings.press_kit_url contains 'files.' or section.settings.press_kit_url contains '.pdf' %}target="_blank" rel="noopener noreferrer"{% endunless %} + download> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 13.5l-4-4h2.5V3h3v6.5H14l-4 4zm-6 3.5h12v-1.5H4V17z"/></svg> + {{ section.settings.press_kit_label | default: 'Download Press Kit' }} + </a> + </div> + {%- 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 -%} + <div class="gk-press-hero__featured-in"> + <span class="gk-press-hero__featured-in-label">Featured In</span> + <div class="gk-press-hero__featured-in-row"> + {%- if section.settings.pub_1 != blank -%} + <span class="gk-press-hero__pub-badge">{{ section.settings.pub_1 }}</span> + {%- endif -%} + {%- if section.settings.pub_2 != blank -%} + <span class="gk-press-hero__pub-badge">{{ section.settings.pub_2 }}</span> + {%- endif -%} + {%- if section.settings.pub_3 != blank -%} + <span class="gk-press-hero__pub-badge">{{ section.settings.pub_3 }}</span> + {%- endif -%} + {%- if section.settings.pub_4 != blank -%} + <span class="gk-press-hero__pub-badge">{{ section.settings.pub_4 }}</span> + {%- endif -%} + {%- if section.settings.pub_5 != blank -%} + <span class="gk-press-hero__pub-badge">{{ section.settings.pub_5 }}</span> + {%- endif -%} + {%- if section.settings.pub_6 != blank -%} + <span class="gk-press-hero__pub-badge">{{ section.settings.pub_6 }}</span> + {%- endif -%} + </div> + </div> + {%- endif -%} + {%- endif -%} + + </div> + </div> +</section> + +{% schema %} +{ + "name": "GK Press Hero", + "tag": "section", + "class": "gk-press-hero-section", + "settings": [ + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow Text", + "default": "In the Press" + }, + { + "type": "text", + "id": "heading", + "label": "Headline", + "default": "Press & Media" + }, + { + "type": "textarea", + "id": "subheading", + "label": "Subheading", + "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 subheading." + }, + { + "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 Row" + }, + { + "type": "checkbox", + "id": "show_featured_in", + "label": "Show Featured In Row", + "default": true + }, + { + "type": "text", + "id": "pub_1", + "label": "Publication 1", + "default": "Relix Magazine" + }, + { + "type": "text", + "id": "pub_2", + "label": "Publication 2", + "default": "Vintage Guitar Magazine" + }, + { + "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 (optional)", + "default": "Palm Beach Arts Paper" + }, + { + "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 +-%} + +<section class="gk-press-media" id="section-{{ section.id }}"> + <div class="gk-press-media__inner"> + + {%- if video_id != blank -%} + <div class="gk-press-media__video-wrap"> + <div class="gk-press-media__video-header"> + {%- if section.settings.video_eyebrow != blank -%} + <span class="gk-press-media__section-eyebrow">{{ section.settings.video_eyebrow }}</span> + {%- endif -%} + {%- if section.settings.video_heading != blank -%} + <h2 class="gk-press-media__section-heading">{{ section.settings.video_heading }}</h2> + {%- endif -%} + {%- if section.settings.video_description != blank -%} + <p class="gk-press-media__section-desc">{{ section.settings.video_description }}</p> + {%- endif -%} + </div> + <div class="gk-press-media__video-container"> + <iframe + src="https://www.youtube.com/embed/{{ video_id }}" + title="{{ section.settings.video_heading | escape }}" + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" + allowfullscreen + loading="lazy"> + </iframe> + </div> + </div> + {%- endif -%} + + {%- if section.blocks.size > 0 -%} + {%- if video_id != blank -%} + <div class="gk-press-media__section-divider"></div> + {%- endif -%} + + <div class="gk-press-media__articles-header"> + {%- if section.settings.articles_eyebrow != blank -%} + <span class="gk-press-media__section-eyebrow">{{ section.settings.articles_eyebrow }}</span> + {%- endif -%} + {%- if section.settings.articles_heading != blank -%} + <h2 class="gk-press-media__section-heading">{{ section.settings.articles_heading }}</h2> + {%- endif -%} + </div> + + <div class="gk-press-media__grid"> + {%- for block in section.blocks -%} + {%- if block.type == 'article_card' -%} + <a + href="{{ block.settings.url }}" + class="gk-press-media__card" + target="_blank" + rel="noopener noreferrer" + {{ block.shopify_attributes }}> + {%- if block.settings.publication != blank -%} + <span class="gk-press-media__card-pub">{{ block.settings.publication }}</span> + {%- endif -%} + {%- if block.settings.title != blank -%} + <h3 class="gk-press-media__card-title">{{ block.settings.title }}</h3> + {%- endif -%} + {%- if block.settings.description != blank -%} + <p class="gk-press-media__card-desc">{{ block.settings.description }}</p> + {%- endif -%} + <span class="gk-press-media__card-cta">Read Article →</span> + </a> + {%- endif -%} + {%- endfor -%} + </div> + {%- endif -%} + + </div> +</section> + +{% 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..d916b941cf0 --- /dev/null +++ b/sections/gk-press-page.liquid @@ -0,0 +1,362 @@ +{%- 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 -%} + +<section class="gk-press" id="section-{{ section.id }}"> + <div class="gk-press__inner"> + <div class="gk-press__header"> + {%- if section.settings.eyebrow != blank -%} + <span class="gk-press__eyebrow">{{ section.settings.eyebrow }}</span> + {%- endif -%} + {%- if section.settings.heading != blank -%} + <h1 class="gk-press__heading">{{ section.settings.heading }}</h1> + {%- endif -%} + {%- if section.settings.subtext != blank -%} + <p class="gk-press__subtext">{{ section.settings.subtext }}</p> + {%- endif -%} + </div> + + {%- if section.blocks.size > 0 -%} + <div class="gk-press__grid"> + {%- for block in section.blocks -%} + {%- if block.type == 'featured_quote' -%} + <div class="gk-press__featured" {{ block.shopify_attributes }}> + {%- if block.settings.quote != blank -%} + <blockquote class="gk-press__quote">{{ block.settings.quote }}</blockquote> + {%- endif -%} + {%- if block.settings.source != blank -%} + <span class="gk-press__source">{{ block.settings.source }}</span> + {%- endif -%} + {%- if block.settings.author != blank -%} + <span class="gk-press__author">{{ block.settings.author }}</span> + {%- endif -%} + </div> + {%- elsif block.type == 'press_quote' -%} + <div class="gk-press__card" {{ block.shopify_attributes }}> + {%- if block.settings.quote != blank -%} + <blockquote class="gk-press__quote">{{ block.settings.quote }}</blockquote> + {%- endif -%} + {%- if block.settings.source != blank -%} + <span class="gk-press__source">{{ block.settings.source }}</span> + {%- endif -%} + {%- if block.settings.author != blank -%} + <span class="gk-press__author">{{ block.settings.author }}</span> + {%- endif -%} + {%- if block.settings.link != blank -%} + <a href="{{ block.settings.link }}" class="gk-press__card-link" target="_blank" rel="noopener">READ ARTICLE →</a> + {%- endif -%} + </div> + {%- endif -%} + {%- endfor -%} + </div> + {%- endif -%} + </div> +</section> + +{% 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)", + "default": "" + } + ] + }, + { + "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)", + "default": "" + }, + { + "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 -%} + +<section class="gk-press-quotes" id="section-{{ section.id }}"> + <div class="gk-press-quotes__inner"> + + {%- if section.settings.show_header and section.settings.heading != blank -%} + <div class="gk-press-quotes__header"> + {%- if section.settings.eyebrow != blank -%} + <span class="gk-press-quotes__eyebrow">{{ section.settings.eyebrow }}</span> + {%- endif -%} + <h2 class="gk-press-quotes__heading">{{ section.settings.heading }}</h2> + </div> + {%- endif -%} + + {%- if section.blocks.size > 0 -%} + <div class="gk-press-quotes__list"> + {%- for block in section.blocks -%} + {%- if block.type == 'quote_block' -%} + <div + class="gk-press-quotes__item{% if block.settings.emphasis %} gk-press-quotes__item--emphasis{% endif %}" + {{ block.shopify_attributes }}> + + <span class="gk-press-quotes__mark" aria-hidden="true">“</span> + + {%- if block.settings.quote != blank -%} + <blockquote class="gk-press-quotes__text"> + {{ block.settings.quote }} + </blockquote> + {%- endif -%} + + <div class="gk-press-quotes__rule"></div> + + <div class="gk-press-quotes__attribution"> + {%- if block.settings.attribution != blank -%} + <span class="gk-press-quotes__author">{{ block.settings.attribution }}</span> + {%- endif -%} + {%- if block.settings.source != blank -%} + <span class="gk-press-quotes__source">{{ block.settings.source }}</span> + {%- endif -%} + </div> + + </div> + {%- endif -%} + {%- endfor -%} + </div> + {%- endif -%} + + </div> +</section> + +{% 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..eac309d3d00 --- /dev/null +++ b/sections/gk-shop-categories.liquid @@ -0,0 +1,386 @@ +{% comment %} + GK Shop Categories (Shop Landing Section) + - Dark glassy cards + - Subtle orange glow hover + - Bold hero like tour dates + - Uses collection pickers (Theme Editor) + - Hides tiles when no collection assigned + - Scoped CSS only (no global conflicts) + + OPTIONAL AUTO-SCROLL: + - If the collection URL has #products at the end, we auto-scroll to the product grid. + - Example: /collections/cds#products +{% endcomment %} + +<section class="gk-shopcats" data-gk-shopcats> + <div class="gk-shopcats__wrap"> + <header class="gk-shopcats__hero"> + {% if section.settings.kicker != blank %} + <div class="gk-shopcats__kicker">{{ section.settings.kicker | escape }}</div> + {% endif %} + + {% if section.settings.heading != blank %} + <h1 class="gk-shopcats__heading">{{ section.settings.heading | escape }}</h1> + {% endif %} + + {% if section.settings.subtext != blank %} + <div class="gk-shopcats__subtext">{{ section.settings.subtext }}</div> + {% endif %} + </header> + + <div class="gk-shopcats__grid" role="list"> + {% assign count = 0 %} + + {% for block in section.blocks %} + {% if block.type == "category" %} + {% assign col = block.settings.collection %} + {% if col != blank %} + {% assign count = count | plus: 1 %} + <a + class="gk-shopcats__card" + href="{{ col.url }}#products" + role="listitem" + aria-label="Shop {{ block.settings.title | escape }}" + {{ block.shopify_attributes }} + > + <div class="gk-shopcats__cardTop"> + <div class="gk-shopcats__titleRow"> + <div class="gk-shopcats__title">{{ block.settings.title | escape }}</div> + <span class="gk-shopcats__arrow" aria-hidden="true"> + <svg viewBox="0 0 24 24" width="18" height="18" fill="none"> + <path d="M5 12h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> + <path d="M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> + </svg> + </span> + </div> + + {% if block.settings.desc != blank %} + <div class="gk-shopcats__desc">{{ block.settings.desc | escape }}</div> + {% endif %} + </div> + + <div class="gk-shopcats__cta"> + <span class="gk-shopcats__ctaText">{{ block.settings.cta | default: "Explore" | escape }}</span> + <span class="gk-shopcats__ctaPip" aria-hidden="true"></span> + </div> + </a> + {% endif %} + {% endif %} + {% endfor %} + + {% if count == 0 %} + <div class="gk-shopcats__empty"> + <div class="gk-shopcats__emptyTitle">No categories assigned yet.</div> + <div class="gk-shopcats__emptyText"> + Open Theme Editor → Shop page → GK Shop Categories, then select collections for each category tile. + </div> + </div> + {% endif %} + </div> + </div> + + <style> + /* ========================= + GK SHOP CATEGORIES (SCOPED) + ========================= */ + .gk-shopcats{ + position: relative; + padding: clamp(44px, 6vw, 84px) 0; + background: transparent; + color: inherit; + } + + .gk-shopcats__wrap{ + width: min(1200px, calc(100% - 48px)); + margin: 0 auto; + } + + .gk-shopcats__hero{ + margin-bottom: clamp(22px, 3vw, 36px); + } + + .gk-shopcats__kicker{ + letter-spacing: .14em; + text-transform: uppercase; + font-size: 12px; + opacity: .8; + margin-bottom: 10px; + } + + .gk-shopcats__heading{ + margin: 0; + line-height: 1; + font-weight: 800; + text-transform: uppercase; + font-size: clamp(44px, 6.2vw, 86px); + } + + .gk-shopcats__subtext{ + margin-top: 12px; + max-width: 62ch; + opacity: .9; + font-size: 16px; + line-height: 1.5; + } + + .gk-shopcats__grid{ + display: grid; + gap: 18px; + grid-template-columns: repeat(12, 1fr); + align-items: stretch; + } + + /* Card layout: 4 columns on wide screens */ + .gk-shopcats__card{ + grid-column: span 3; + position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; + border-radius: 18px; + padding: 18px 18px 16px 18px; + text-decoration: none; + color: inherit; + + background: rgba(255,255,255,.06); + border: 1px solid rgba(255,255,255,.10); + box-shadow: + 0 10px 30px rgba(0,0,0,.35), + inset 0 1px 0 rgba(255,255,255,.05); + + transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; + will-change: transform; + overflow: hidden; + } + + .gk-shopcats__card:before{ + content:""; + position:absolute; + inset:-2px; + background: + radial-gradient(800px 220px at 15% 10%, rgba(255,153,0,.18), transparent 55%), + radial-gradient(700px 240px at 85% 0%, rgba(255,153,0,.10), transparent 60%); + opacity: .35; + pointer-events:none; + } + + .gk-shopcats__card:after{ + content:""; + position:absolute; + inset:0; + background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.25)); + opacity: .6; + pointer-events:none; + } + + .gk-shopcats__cardTop, + .gk-shopcats__cta{ + position: relative; + z-index: 1; + } + + .gk-shopcats__titleRow{ + display:flex; + align-items:center; + justify-content: space-between; + gap: 12px; + } + + .gk-shopcats__title{ + font-weight: 800; + text-transform: uppercase; + letter-spacing: .02em; + font-size: 18px; + } + + .gk-shopcats__arrow{ + opacity: .9; + transform: translateX(0); + transition: transform 160ms ease, opacity 160ms ease; + } + + .gk-shopcats__desc{ + margin-top: 8px; + opacity: .85; + font-size: 13px; + line-height: 1.45; + } + + .gk-shopcats__cta{ + margin-top: 16px; + display:flex; + align-items:center; + justify-content: space-between; + gap: 10px; + padding-top: 12px; + border-top: 1px solid rgba(255,255,255,.10); + opacity: .95; + } + + .gk-shopcats__ctaText{ + font-size: 13px; + letter-spacing: .08em; + text-transform: uppercase; + font-weight: 700; + } + + .gk-shopcats__ctaPip{ + width: 8px; + height: 8px; + border-radius: 999px; + background: rgba(255,153,0,.95); + box-shadow: 0 0 18px rgba(255,153,0,.55); + flex: 0 0 auto; + opacity: .9; + } + + .gk-shopcats__card:hover{ + transform: translateY(-1px); + border-color: rgba(255,153,0,.35); + box-shadow: + 0 12px 34px rgba(0,0,0,.45), + 0 0 24px rgba(255,153,0,.10), + inset 0 1px 0 rgba(255,255,255,.06); + } + + .gk-shopcats__card:hover .gk-shopcats__arrow{ + transform: translateX(2px); + opacity: 1; + } + + .gk-shopcats__card:focus-visible{ + outline: none; + border-color: rgba(255,153,0,.55); + box-shadow: + 0 0 0 3px rgba(255,153,0,.20), + 0 12px 34px rgba(0,0,0,.45); + } + + @media (max-width: 980px){ + .gk-shopcats__card{ grid-column: span 6; } + } + @media (max-width: 520px){ + .gk-shopcats__wrap{ width: calc(100% - 28px); } + .gk-shopcats__card{ grid-column: span 12; } + .gk-shopcats__heading{ font-size: clamp(36px, 10vw, 54px); } + } + + .gk-shopcats__empty{ + grid-column: 1 / -1; + border-radius: 18px; + padding: 18px; + background: rgba(255,255,255,.05); + border: 1px solid rgba(255,255,255,.10); + } + .gk-shopcats__emptyTitle{ + font-weight: 800; + text-transform: uppercase; + letter-spacing: .04em; + margin-bottom: 6px; + } + .gk-shopcats__emptyText{ + opacity: .85; + font-size: 14px; + line-height: 1.45; + } + </style> + + <script> + (function() { + function scrollToProductsIfNeeded() { + if (window.location.hash !== "#products") return; + + var el = + document.getElementById("ProductGridContainer") || + document.querySelector("#product-grid") || + document.querySelector(".product-grid-container") || + document.querySelector(".collection .product-grid") || + document.querySelector(".collection"); + + if (!el) return; + + setTimeout(function() { + el.scrollIntoView({ behavior: "smooth", block: "start" }); + }, 150); + } + + if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", scrollToProductsIfNeeded); + } else { + scrollToProductsIfNeeded(); + } + })(); + </script> +</section> + +{% schema %} +{ + "name": "GK Shop Categories", + "settings": [ + { + "type": "text", + "id": "kicker", + "label": "Kicker", + "default": "Browse the goods" + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "The Gristle Shop" + }, + { + "type": "richtext", + "id": "subtext", + "label": "Subtext", + "default": "<p>Records. Gear. Tools of tone. Wear the sound.</p>" + } + ], + "blocks": [ + { + "type": "category", + "name": "Category tile", + "settings": [ + { + "type": "text", + "id": "title", + "label": "Title", + "default": "CDs" + }, + { + "type": "text", + "id": "desc", + "label": "Description", + "default": "Studio albums and live records." + }, + { + "type": "text", + "id": "cta", + "label": "CTA text", + "default": "Explore" + }, + { + "type": "collection", + "id": "collection", + "label": "Collection" + } + ] + } + ], + "max_blocks": 12, + "presets": [ + { + "name": "GK Shop Categories", + "blocks": [ + { "type": "category", "settings": { "title": "NEW!", "desc": "Latest drops and fresh arrivals.", "cta": "Explore" } }, + { "type": "category", "settings": { "title": "CDs", "desc": "Studio albums and live records.", "cta": "Explore" } }, + { "type": "category", "settings": { "title": "Vinyl", "desc": "Wax. Analog. Real.", "cta": "Explore" } }, + { "type": "category", "settings": { "title": "Merch", "desc": "Wear the gristle.", "cta": "Explore" } }, + { "type": "category", "settings": { "title": "Gear", "desc": "Pedals, pickups, tone tools.", "cta": "Explore" } }, + { "type": "category", "settings": { "title": "Instructional Books", "desc": "Learn from the Gristleman.", "cta": "Explore" } }, + { "type": "category", "settings": { "title": "DVDs", "desc": "Classic guitar instruction.", "cta": "Explore" } } + ] + } + ] +} +{% endschema %} \ No newline at end of file diff --git a/sections/gk-sponsor-logos.liquid b/sections/gk-sponsor-logos.liquid new file mode 100644 index 00000000000..84ee01629a2 --- /dev/null +++ b/sections/gk-sponsor-logos.liquid @@ -0,0 +1,276 @@ +{%- 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 -%} + +<section class="gk-sponsors{% if section.settings.orange_hover %} gk-sponsors--orange-hover{% endif %}" id="section-{{ section.id }}"> + <div class="gk-sponsors__inner"> + {%- if section.settings.eyebrow != blank or section.settings.heading != blank -%} + <div class="gk-sponsors__header"> + {%- if section.settings.eyebrow != blank -%} + <span class="gk-sponsors__eyebrow">{{ section.settings.eyebrow }}</span> + {%- endif -%} + {%- if section.settings.heading != blank -%} + <h2 class="gk-sponsors__heading">{{ section.settings.heading }}</h2> + {%- endif -%} + </div> + {%- endif -%} + + {%- if section.blocks.size > 0 -%} + <div class="gk-sponsors__grid"> + {%- for block in section.blocks -%} + <div class="gk-sponsors__item" {{ block.shopify_attributes }}> + {%- if block.settings.logo != blank -%} + {%- if block.settings.link != blank -%} + <a href="{{ block.settings.link }}" target="_blank" rel="noopener" title="{{ block.settings.name }}"> + {{ block.settings.logo | image_url: width: 300 | image_tag: + loading: 'lazy', + alt: block.settings.name + }} + </a> + {%- else -%} + {{ block.settings.logo | image_url: width: 300 | image_tag: + loading: 'lazy', + alt: block.settings.name + }} + {%- endif -%} + {%- else -%} + <span style="color: #777777; font-family: 'DM Sans', sans-serif; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px;">{{ block.settings.name }}</span> + {%- endif -%} + </div> + {%- endfor -%} + </div> + {%- endif -%} + </div> +</section> + +{% 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", + "default": "" + }, + { + "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..2b6ebe5b431 --- /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 +-%} + +<section id="GK-Sponsors-{{ section.id }}" class="gk-sponsors"> + <div class="page-width gk-sponsors__inner"> + + {%- if heading_val != blank and heading_val != '.' -%} + <h2 class="gk-sponsors__heading">{{ heading_val }}</h2> + {%- endif -%} + + {%- if subheading_val != blank and subheading_val != '.' -%} + <div class="gk-sponsors__sub">{{ subheading_val }}</div> + {%- endif -%} + + <ul + class="gk-sponsors__grid" + style=" + --gk-accent: {{ section.settings.accent | default: '#E8690A' }}; + --gk-cols-desktop: {{ section.settings.columns_desktop }}; + --gk-cols-tablet: {{ section.settings.columns_tablet }}; + --gk-cols-mobile: {{ section.settings.columns_mobile }}; + --gk-gap: {{ section.settings.gap }}px; + + --gk-logo-h: {{ section.settings.logo_height }}px; + --gk-logo-boost: {{ section.settings.logo_boost | divided_by: 100.0 }}; + --gk-hover-scale: {{ section.settings.hover_scale | divided_by: 100.0 }}; + --gk-glow: {{ section.settings.glow_strength | divided_by: 100.0 }}; + " + aria-label="Sponsors" + > + {%- for block in section.blocks -%} + {%- liquid + assign logo = block.settings.logo + assign url = block.settings.url + assign label = block.settings.label | strip + assign open_new = block.settings.open_new + assign nofollow = block.settings.nofollow + + assign rel_vals = 'noopener' + if nofollow + assign rel_vals = rel_vals | append: ' nofollow' + endif + + assign aria = label + if aria == blank + if logo != blank and logo.alt != blank + assign aria = logo.alt + else + assign aria = 'Sponsor' + endif + endif + -%} + + {%- if logo != blank -%} + <li class="gk-sponsors__item" {{ block.shopify_attributes }}> + {%- if url != blank -%} + <a + class="gk-sponsors__link" + href="{{ url }}" + aria-label="{{ aria | escape }}" + {%- if open_new -%} target="_blank" rel="{{ rel_vals }}"{%- endif -%} + > + <img + class="gk-sponsors__logo" + src="{{ logo | image_url: width: 800 }}" + alt="{{ aria | escape }}" + loading="lazy" + > + </a> + {%- else -%} + <div class="gk-sponsors__link" role="img" aria-label="{{ aria | escape }}"> + <img + class="gk-sponsors__logo" + src="{{ logo | image_url: width: 800 }}" + alt="{{ aria | escape }}" + loading="lazy" + > + </div> + {%- endif -%} + </li> + {%- endif -%} + {%- endfor -%} + </ul> + + </div> + + <style> + #GK-Sponsors-{{ section.id }}.gk-sponsors{ + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } + + #GK-Sponsors-{{ section.id }} .gk-sponsors__inner{ + max-width: 1200px; + margin: 0 auto; + } + + #GK-Sponsors-{{ section.id }} .gk-sponsors__heading{ + margin: 0 0 18px; + text-align: center; + font-weight: 900; + letter-spacing: 0.01em; + font-size: clamp(28px, 4vw, 52px); + color: rgba(255,255,255,0.92); + } + + #GK-Sponsors-{{ section.id }} .gk-sponsors__sub{ + text-align: center; + margin: -6px 0 22px; + color: rgba(255,255,255,0.66); + font-size: 15px; + } + + /* GRID: one row across by columns settings */ + #GK-Sponsors-{{ section.id }} .gk-sponsors__grid{ + list-style: none; + padding: 0; + margin: 0; + + display: grid; + grid-template-columns: repeat(var(--gk-cols-desktop), minmax(0, 1fr)); + gap: var(--gk-gap); + + align-items: center; + justify-items: center; + } + + @media (max-width: 990px){ + #GK-Sponsors-{{ section.id }} .gk-sponsors__grid{ + grid-template-columns: repeat(var(--gk-cols-tablet), minmax(0, 1fr)); + } + } + @media (max-width: 749px){ + #GK-Sponsors-{{ section.id }} .gk-sponsors__grid{ + grid-template-columns: repeat(var(--gk-cols-mobile), minmax(0, 1fr)); + } + } + + /* NO BOXES: link is just a centering wrapper */ + #GK-Sponsors-{{ section.id }} .gk-sponsors__link{ + display: grid; + place-items: center; + width: 100%; + min-height: calc(var(--gk-logo-h) + 18px); + text-decoration: none; + background: transparent; + border: 0; + outline: none; + border-radius: 14px; + } + + /* BIG LOGOS */ + #GK-Sponsors-{{ section.id }} .gk-sponsors__logo{ + height: var(--gk-logo-h); + width: auto; + max-width: 100%; + object-fit: contain; + display: block; + + opacity: 0.95; + + /* Always-on glow */ + filter: + drop-shadow(0 0 calc(10px * var(--gk-glow)) rgba(232,105,10,0.18)) + drop-shadow(0 0 calc(22px * var(--gk-glow)) rgba(232,105,10,0.10)); + + /* Make padded PNGs look bigger */ + transform: scale(var(--gk-logo-boost)) translateZ(0); + transform-origin: center; + + transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease; + will-change: transform, filter; + } + + /* Hover: slightly bigger + more glow */ + @media (hover:hover){ + #GK-Sponsors-{{ section.id }} .gk-sponsors__link:hover .gk-sponsors__logo{ + opacity: 1; + transform: scale(calc(var(--gk-logo-boost) * var(--gk-hover-scale))); + filter: + drop-shadow(0 0 calc(14px * var(--gk-glow)) rgba(232,105,10,0.36)) + drop-shadow(0 0 calc(40px * var(--gk-glow)) rgba(232,105,10,0.18)); + } + } + + /* Accessible focus (orange, not blue) */ + #GK-Sponsors-{{ section.id }} .gk-sponsors__link:focus-visible{ + box-shadow: + 0 0 0 2px rgba(232,105,10,0.55), + 0 0 26px rgba(232,105,10,0.18); + } + + @media (prefers-reduced-motion: reduce){ + #GK-Sponsors-{{ section.id }} .gk-sponsors__logo{ + transition: none !important; + } + } + </style> +</section> + +{% 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": 50, "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 +-%} + +<section + id="GK-SpotifyEmbed-{{ section.id }}" + class="gk-spotifyEmbed" + data-gk-anim="{{ section.settings.enable_animation | json }}" +> + <div class="page-width gk-spotifyEmbed__inner"> + + {%- if eyebrow_val != blank and eyebrow_val != '.' -%} + <div class="gk-spotifyEmbed__eyebrow">{{ eyebrow_val }}</div> + {%- endif -%} + + {%- if heading_val != blank -%} + <div class="gk-spotifyEmbed__headRow"> + <h2 class="gk-spotifyEmbed__heading">{{ heading_val }}</h2> + + {%- if section.settings.show_open_button and open_url != blank -%} + <a class="gk-spotifyEmbed__btn" href="{{ open_url }}" target="_blank" rel="noopener"> + Open on Spotify + </a> + {%- endif -%} + </div> + {%- endif -%} + + {%- if subheading_val != blank and subheading_val != '.' -%} + <div class="gk-spotifyEmbed__sub">{{ subheading_val }}</div> + {%- endif -%} + + {%- if embed_src != blank -%} + <div class="gk-spotifyEmbed__frame" aria-label="Spotify player"> + <div class="gk-spotifyEmbed__frameInner"> + <iframe + class="gk-spotifyEmbed__iframe" + style="border-radius: 12px;" + src="{{ embed_src }}" + width="100%" + height="{{ section.settings.height }}" + frameborder="0" + allowfullscreen="" + allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" + loading="lazy" + title="Spotify embed" + ></iframe> + </div> + </div> + {%- endif -%} + + </div> + + <style> + /* ============================ + GK Spotify Embed (scoped) + ============================ */ + #GK-SpotifyEmbed-{{ section.id }}.gk-spotifyEmbed { + --accent: {{ section.settings.accent | default: '#E8690A' }}; + --text: rgba(255,255,255,0.92); + --muted: rgba(255,255,255,0.66); + --line: rgba(255,255,255,0.10); + --card: rgba(255,255,255,0.06); + + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } + + #GK-SpotifyEmbed-{{ section.id }} .gk-spotifyEmbed__inner{ + max-width: 1100px; + margin: 0 auto; + } + + #GK-SpotifyEmbed-{{ section.id }} .gk-spotifyEmbed__eyebrow{ + font-size: 12px; + letter-spacing: .14em; + text-transform: uppercase; + color: var(--muted); + margin-bottom: 10px; + } + + #GK-SpotifyEmbed-{{ section.id }} .gk-spotifyEmbed__headRow{ + display: flex; + align-items: baseline; + justify-content: space-between; + gap: 14px; + margin-bottom: 10px; + } + + #GK-SpotifyEmbed-{{ section.id }} .gk-spotifyEmbed__heading{ + margin: 0; + font-weight: 800; + line-height: 1.05; + letter-spacing: 0.01em; + font-size: clamp(34px, 4.5vw, 56px); + color: var(--text); + } + + #GK-SpotifyEmbed-{{ section.id }} .gk-spotifyEmbed__sub{ + color: var(--muted); + font-size: 16px; + margin-bottom: 18px; + } + + /* Button matches “dates” vibes */ + #GK-SpotifyEmbed-{{ section.id }} .gk-spotifyEmbed__btn{ + display: inline-flex; + align-items: center; + justify-content: center; + padding: 10px 16px; + border-radius: 999px; + border: 1px solid rgba(255,255,255,0.14); + background: rgba(0,0,0,0.25); + color: rgba(255,255,255,0.88); + text-decoration: none; + font-weight: 700; + letter-spacing: .06em; + text-transform: uppercase; + font-size: 12px; + transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; + white-space: nowrap; + } + + @media (hover:hover){ + #GK-SpotifyEmbed-{{ section.id }} .gk-spotifyEmbed__btn:hover{ + transform: translateY(-1px); + border-color: rgba(232,105,10,0.35); + background: rgba(0,0,0,0.35); + box-shadow: 0 16px 44px rgba(0,0,0,0.35); + } + } + + /* ============================ + Metallic / Spotify-grey 3D frame + ============================ */ + #GK-SpotifyEmbed-{{ section.id }} .gk-spotifyEmbed__frame{ + position: relative; + border-radius: 26px; + padding: 14px; + overflow: hidden; + + /* Metallic graphite shell (matches Spotify UI better) */ + background: + radial-gradient(1200px 420px at 18% 0%, + rgba(255,255,255,0.10) 0%, + rgba(255,255,255,0.04) 38%, + rgba(0,0,0,0.00) 70%), + radial-gradient(900px 420px at 90% 100%, + rgba(0,0,0,0.55) 0%, + rgba(0,0,0,0.00) 55%), + linear-gradient(180deg, + rgba(255,255,255,0.06) 0%, + rgba(255,255,255,0.02) 35%, + rgba(0,0,0,0.28) 100%), + rgba(18,18,18,0.92); + + border: 1px solid rgba(255,255,255,0.10); + + /* “Off the page” lift */ + box-shadow: + 0 26px 70px rgba(0,0,0,0.62), + 0 8px 22px rgba(0,0,0,0.42), + inset 0 1px 0 rgba(255,255,255,0.08); + + transform: translateZ(0); + } + + /* Inner bevel highlight line */ + #GK-SpotifyEmbed-{{ section.id }} .gk-spotifyEmbed__frame::before{ + content:""; + position:absolute; + inset: 1px; + border-radius: 25px; + pointer-events:none; + border: 1px solid rgba(255,255,255,0.08); + box-shadow: + inset 0 1px 0 rgba(255,255,255,0.10), + inset 0 -1px 0 rgba(0,0,0,0.45); + opacity: 0.9; + } + + /* Micro orange rim accent only (ties to dates without orange-washing the whole panel) */ + #GK-SpotifyEmbed-{{ section.id }} .gk-spotifyEmbed__frame::after{ + content:""; + position:absolute; + inset: 0; + border-radius: 26px; + pointer-events:none; + box-shadow: + 0 0 0 1px rgba(232,105,10,0.16), + inset 0 0 0 1px rgba(232,105,10,0.10); + opacity: 0.50; + } + + /* Inner “device bezel” that the iframe sits inside */ + #GK-SpotifyEmbed-{{ section.id }} .gk-spotifyEmbed__frameInner{ + position: relative; + z-index: 1; + border-radius: 18px; + overflow: hidden; + + /* slight “mounted” feel */ + background: + linear-gradient(180deg, + rgba(255,255,255,0.05) 0%, + rgba(255,255,255,0.02) 30%, + rgba(0,0,0,0.30) 100%); + + border: 1px solid rgba(255,255,255,0.10); + box-shadow: + inset 0 0 0 1px rgba(0,0,0,0.40), + 0 14px 46px rgba(0,0,0,0.45); + } + + #GK-SpotifyEmbed-{{ section.id }} .gk-spotifyEmbed__iframe{ + display: block; + width: 100%; + border: 0; + transform: translateZ(0); + } + + /* Hover: slightly more lift + a touch more orange on the rim */ + @media (hover:hover){ + #GK-SpotifyEmbed-{{ section.id }} .gk-spotifyEmbed__frame{ + transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; + } + #GK-SpotifyEmbed-{{ section.id }} .gk-spotifyEmbed__frame:hover{ + transform: translateY(-1px); + border-color: rgba(255,255,255,0.14); + box-shadow: + 0 32px 96px rgba(0,0,0,0.66), + 0 0 0 1px rgba(232,105,10,0.10), + inset 0 1px 0 rgba(255,255,255,0.09); + } + #GK-SpotifyEmbed-{{ section.id }} .gk-spotifyEmbed__frame:hover::after{ + opacity: 0.75; + box-shadow: + 0 0 0 1px rgba(232,105,10,0.22), + inset 0 0 0 1px rgba(232,105,10,0.14); + } + } + + /* ============================ + Motion (optional) + ============================ */ + #GK-SpotifyEmbed-{{ section.id }}[data-gk-anim="true"] .gk-spotifyEmbed__eyebrow, + #GK-SpotifyEmbed-{{ section.id }}[data-gk-anim="true"] .gk-spotifyEmbed__headRow, + #GK-SpotifyEmbed-{{ section.id }}[data-gk-anim="true"] .gk-spotifyEmbed__sub, + #GK-SpotifyEmbed-{{ section.id }}[data-gk-anim="true"] .gk-spotifyEmbed__frame{ + opacity: 0; + transform: translateY(18px); + will-change: transform, opacity; + } + + #GK-SpotifyEmbed-{{ section.id }}.gk-in .gk-spotifyEmbed__eyebrow{ + opacity: 1; transform: translateY(0); + transition: opacity 650ms cubic-bezier(.16,.84,.44,1) 60ms, transform 650ms cubic-bezier(.16,.84,.44,1) 60ms; + } + #GK-SpotifyEmbed-{{ section.id }}.gk-in .gk-spotifyEmbed__headRow{ + opacity: 1; transform: translateY(0); + transition: opacity 650ms cubic-bezier(.16,.84,.44,1) 120ms, transform 650ms cubic-bezier(.16,.84,.44,1) 120ms; + } + #GK-SpotifyEmbed-{{ section.id }}.gk-in .gk-spotifyEmbed__sub{ + opacity: 1; transform: translateY(0); + transition: opacity 650ms cubic-bezier(.16,.84,.44,1) 200ms, transform 650ms cubic-bezier(.16,.84,.44,1) 200ms; + } + #GK-SpotifyEmbed-{{ section.id }}.gk-in .gk-spotifyEmbed__frame{ + opacity: 1; transform: translateY(0); + transition: opacity 650ms cubic-bezier(.16,.84,.44,1) 260ms, transform 900ms cubic-bezier(.16,.84,.44,1) 260ms; + } + + @media (prefers-reduced-motion: reduce){ + #GK-SpotifyEmbed-{{ section.id }}[data-gk-anim="true"] .gk-spotifyEmbed__eyebrow, + #GK-SpotifyEmbed-{{ section.id }}[data-gk-anim="true"] .gk-spotifyEmbed__headRow, + #GK-SpotifyEmbed-{{ section.id }}[data-gk-anim="true"] .gk-spotifyEmbed__sub, + #GK-SpotifyEmbed-{{ section.id }}[data-gk-anim="true"] .gk-spotifyEmbed__frame{ + opacity: 1 !important; + transform: none !important; + transition: none !important; + } + } + </style> + + <script> + (function(){ + var root = document.getElementById('GK-SpotifyEmbed-{{ section.id }}'); + if (!root) return; + + var animEnabled = root.getAttribute('data-gk-anim') === 'true'; + if (animEnabled && !(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches)) { + var revealed = false; + var reveal = function(){ + if (revealed) return; + revealed = true; + root.classList.add('gk-in'); + }; + + if ('IntersectionObserver' in window) { + var io = new IntersectionObserver(function(entries){ + entries.forEach(function(entry){ + if (entry.isIntersecting) { reveal(); io.disconnect(); } + }); + }, { threshold: 0.22 }); + io.observe(root); + } else { + requestAnimationFrame(reveal); + } + } else { + root.classList.add('gk-in'); + } + })(); + </script> +</section> + +{% 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..8192baff1e7 --- /dev/null +++ b/sections/gk-stream-follow.liquid @@ -0,0 +1,379 @@ +{% comment %} + GK Stream + Follow (Modern) + 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 pills under FOLLOW +{% endcomment %} + +<section class="gk-stream" data-section-id="{{ section.id }}"> + <div class="gk-stream__inner"> + {% if section.settings.eyebrow != blank %} + <div class="gk-stream__eyebrow">{{ section.settings.eyebrow }}</div> + {% endif %} + + {% if section.settings.heading != blank %} + <h2 class="gk-stream__heading">{{ section.settings.heading }}</h2> + {% endif %} + + {% if section.settings.subtext != blank %} + <div class="gk-stream__subtext">{{ section.settings.subtext }}</div> + {% endif %} + + {% assign col_keys = "stream_greg,stream_kmt,podcast,watch_live" | split: "," %} + + <div class="gk-stream__grid" role="list"> + {% for col in col_keys %} + <div class="gk-stream__card" role="listitem"> + <div class="gk-stream__card-head"> + <h3 class="gk-stream__card-title"> + {% 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 %} + </h3> + + {% if section.settings.show_dividers %} + <div class="gk-stream__divider"></div> + {% endif %} + </div> + + <ul class="gk-stream__links"> + {% assign has_any = false %} + + {% for block in section.blocks %} + {% if block.type == "platform_link" and block.settings.column == col %} + {% assign has_any = true %} + <li class="gk-stream__link" {{ block.shopify_attributes }}> + <a href="{{ block.settings.url }}" target="_blank" rel="noopener"> + {% if section.settings.show_icons and block.settings.icon != blank %} + <img + class="gk-stream__icon" + src="{{ block.settings.icon | image_url: width: 96 }}" + alt="" + loading="lazy" + width="24" + height="24" + > + {% endif %} + + <span class="gk-stream__link-text">{{ block.settings.label }}</span> + <span class="gk-stream__chev" aria-hidden="true">↗</span> + </a> + </li> + {% endif %} + {% endfor %} + + {% if has_any == false %} + <li class="gk-stream__link gk-stream__link--empty"> + <span>{{ section.settings.empty_column_text }}</span> + </li> + {% endif %} + </ul> + </div> + {% endfor %} + </div> + + {% assign has_follow = false %} + {% for block in section.blocks %} + {% if block.type == "follow_link" %} + {% assign has_follow = true %} + {% endif %} + {% endfor %} + + {% if has_follow %} + <div class="gk-stream__follow"> + {% if section.settings.follow_heading != blank %} + <h3 class="gk-stream__follow-title">{{ section.settings.follow_heading }}</h3> + {% endif %} + + <div class="gk-stream__follow-row" role="list"> + {% for block in section.blocks %} + {% if block.type == "follow_link" %} + <a class="gk-stream__follow-pill" href="{{ block.settings.url }}" target="_blank" rel="noopener" role="listitem" {{ block.shopify_attributes }}> + {% if block.settings.icon != blank %} + <img + class="gk-stream__follow-icon" + src="{{ block.settings.icon | image_url: width: 96 }}" + alt="{{ block.settings.label | escape }}" + loading="lazy" + width="22" + height="22" + > + {% endif %} + <span class="gk-stream__follow-text">{{ block.settings.label }}</span> + </a> + {% endif %} + {% endfor %} + </div> + </div> + {% endif %} + </div> +</section> + +<style> + .gk-stream{ + --bg: {{ section.settings.bg_color }}; + --text: {{ section.settings.text_color }}; + --line: rgba(255,255,255,0.12); + + background: var(--bg); + color: var(--text); + padding: {{ section.settings.pad_y }}px 20px; + } + + .gk-stream__inner{ + max-width: 1100px; + margin: 0 auto; + } + + .gk-stream__eyebrow{ + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + letter-spacing: 0.16em; + text-transform: uppercase; + font-size: 12px; + color: rgba(255,255,255,0.62); + margin-bottom: 10px; + } + + .gk-stream__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); + } + + .gk-stream__subtext{ + margin-top: 10px; + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + color: rgba(255,255,255,0.75); + font-size: 16px; + line-height: 1.4; + max-width: 60ch; + } + + .gk-stream__grid{ + margin-top: 28px; + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 14px; + } + + .gk-stream__card{ + background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); + border: 1px solid var(--line); + border-radius: 14px; + padding: 16px; + box-shadow: 0 18px 40px rgba(0,0,0,0.28); + transition: transform 160ms ease, border-color 160ms ease; + } + + .gk-stream__card:hover{ + transform: translateY(-2px); + border-color: rgba(255,255,255,0.22); + } + + .gk-stream__card-title{ + margin: 0; + font-family: "Bebas Neue", sans-serif; + font-weight: 400; + letter-spacing: 0.06em; + text-transform: uppercase; + font-size: 20px; + } + + .gk-stream__divider{ + margin-top: 12px; + height: 1px; + background: var(--line); + } + + .gk-stream__links{ + list-style: none; + padding: 0; + margin: 12px 0 0; + display: flex; + flex-direction: column; + gap: 8px; + } + + .gk-stream__link a{ + display: flex; + align-items: center; + gap: 10px; + padding: 10px 10px; + border-radius: 12px; + text-decoration: none; + color: var(--text); + border: 1px solid rgba(255,255,255,0.10); + background: rgba(0,0,0,0.20); + transition: background 160ms ease, border-color 160ms ease; + } + + .gk-stream__link a:hover{ + background: rgba(0,0,0,0.34); + border-color: rgba(255,255,255,0.18); + } + + .gk-stream__icon{ + border-radius: 6px; + filter: brightness(1.1); + } + + .gk-stream__link-text{ + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + font-size: 15px; + line-height: 1.2; + } + + .gk-stream__chev{ + margin-left: auto; + color: rgba(255,255,255,0.45); + font-size: 13px; + } + + .gk-stream__link--empty{ + opacity: 0.6; + font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + font-size: 14px; + padding: 10px 10px; + border-radius: 12px; + border: 1px dashed rgba(255,255,255,0.14); + background: rgba(0,0,0,0.14); + } + + .gk-stream__follow{ + margin-top: 26px; + padding-top: 18px; + border-top: 1px solid var(--line); + } + + .gk-stream__follow-title{ + margin: 0 0 12px; + font-family: "Bebas Neue", sans-serif; + font-weight: 400; + letter-spacing: 0.06em; + text-transform: uppercase; + font-size: 22px; + } + + .gk-stream__follow-row{ + display: flex; + flex-wrap: wrap; + gap: 10px; + } + + .gk-stream__follow-pill{ + display: inline-flex; + align-items: center; + gap: 10px; + padding: 10px 12px; + border-radius: 999px; + text-decoration: none; + color: var(--text); + border: 1px solid rgba(255,255,255,0.12); + background: rgba(0,0,0,0.20); + transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; + } + + .gk-stream__follow-pill:hover{ + transform: translateY(-1px); + border-color: rgba(255,255,255,0.22); + background: rgba(0,0,0,0.34); + } + + .gk-stream__follow-icon{ + border-radius: 8px; + } + + .gk-stream__follow-text{ + font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + letter-spacing: 0.08em; + text-transform: uppercase; + font-size: 12px; + color: rgba(255,255,255,0.82); + } + + @media (max-width: 1000px){ + .gk-stream__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } + } + + @media (max-width: 620px){ + .gk-stream__grid{ grid-template-columns: 1fr; } + } +</style> + +{% 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 %} \ No newline at end of file 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 +%} + +<section class="gk-tour-dates gk-tour-dates--reveal" data-section-id="{{ section.id }}"> + <div class="gk-tour-dates__inner"> + + {% if section.settings.eyebrow != blank %} + <div class="gk-tour-dates__eyebrow">{{ section.settings.eyebrow }}</div> + {% endif %} + + {% if section.settings.heading != blank %} + <h2 class="gk-tour-dates__heading">{{ section.settings.heading }}</h2> + {% endif %} + + {% if section.settings.subtext != blank %} + <div class="gk-tour-dates__subtext">{{ section.settings.subtext }}</div> + {% endif %} + + <div class="gk-tour-dates__list" role="list"> + {%- 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 + %} + </div> + + {% capture _gk_total %} + {% render 'gk-tour-dates-shared', mode: 'count' %} + {% endcapture %} + {% assign total_rows = _gk_total | strip | plus: 0 %} + + {% if total_rows == 0 %} + <div class="gk-tour-dates__empty"> + {{ section.settings.empty_text }} + </div> + {% endif %} + + {% if total_rows > initial_visible %} + <div class="gk-tour-dates__more-wrap"> + <button type="button" class="gk-tour-dates__more"> + {{ section.settings.more_label }} + </button> + </div> + {% endif %} + + </div> + + {% if total_rows > initial_visible %} + <script> + (function () { + var section = document.querySelector('[data-section-id="{{ section.id }}"]'); + if (!section) return; + + var rows = section.querySelectorAll('.gk-date-row'); + var btn = section.querySelector('.gk-tour-dates__more'); + if (!btn || !rows.length) return; + + var initial = {{ initial_visible }}; + var step = {{ reveal_step }}; + var shown = Math.min(initial, rows.length); + + function render() { + rows.forEach(function (row, idx) { + row.style.display = (idx < shown) ? '' : 'none'; + }); + btn.style.display = (shown >= rows.length) ? 'none' : ''; + } + + render(); + + btn.addEventListener('click', function () { + shown = Math.min(shown + step, rows.length); + render(); + }); + })(); + </script> + {% endif %} +</section> + +{% 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 +%} + +<section class="gk-dates" data-section-id="{{ section.id }}"> + <div class="gk-dates__inner"> + + {% if section.settings.eyebrow != blank %} + <div class="gk-dates__eyebrow">{{ section.settings.eyebrow }}</div> + {% endif %} + + {% if section.settings.heading != blank %} + <h2 class="gk-dates__heading">{{ section.settings.heading }}</h2> + {% endif %} + + {% if section.settings.subtext != blank %} + <div class="gk-dates__subtext">{{ section.settings.subtext }}</div> + {% endif %} + + <div + class="gk-dates__list" + role="list" + data-visible-count="{{ section.settings.visible_count }}" + data-reveal-step="{{ section.settings.reveal_step }}" + > + {%- 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 + %} + </div> + + {% capture _gk_total %} + {% render 'gk-tour-dates-shared', mode: 'count' %} + {% endcapture %} + {% assign total_rows = _gk_total | strip | plus: 0 %} + + {% if total_rows == 0 %} + <div class="gk-dates__empty"> + {{ section.settings.empty_text }} + </div> + {% endif %} + + {% if total_rows > section.settings.visible_count %} + <div class="gk-dates__controls"> + <button class="gk-dates__btn" type="button" data-dates-more> + {{ section.settings.show_more_label }} + </button> + + <button class="gk-dates__btn gk-dates__btn--ghost" type="button" data-dates-less hidden> + {{ section.settings.show_less_label }} + </button> + + {% if section.settings.view_all_url != blank %} + <a class="gk-dates__btn gk-dates__btn--ghost" href="{{ section.settings.view_all_url }}"> + {{ section.settings.view_all_label }} + </a> + {% endif %} + </div> + {% elsif section.settings.view_all_url != blank %} + <div class="gk-dates__controls"> + <a class="gk-dates__btn gk-dates__btn--ghost" href="{{ section.settings.view_all_url }}"> + {{ section.settings.view_all_label }} + </a> + </div> + {% endif %} + + </div> +</section> + +<script> +(function() { + var root = document.querySelector('.gk-dates[data-section-id="{{ section.id }}"]'); + if (!root) return; + + var list = root.querySelector('.gk-dates__list'); + if (!list) return; + + var rows = Array.prototype.slice.call(root.querySelectorAll('[data-date-row]')); + if (!rows.length) return; + + var moreBtn = root.querySelector('[data-dates-more]'); + var lessBtn = root.querySelector('[data-dates-less]'); + + var visibleCount = parseInt(list.getAttribute('data-visible-count') || '10', 10); + var step = parseInt(list.getAttribute('data-reveal-step') || '10', 10); + + var shown = Math.min(visibleCount, rows.length); + + function apply() { + rows.forEach(function(r, i) { + if (i < shown) r.classList.remove('is-hidden'); + else r.classList.add('is-hidden'); + }); + + if (moreBtn) moreBtn.hidden = (shown >= rows.length); + if (lessBtn) lessBtn.hidden = (shown <= visibleCount); + } + + if (moreBtn) { + moreBtn.addEventListener('click', function() { + shown = Math.min(shown + step, rows.length); + apply(); + }); + } + + if (lessBtn) { + lessBtn.addEventListener('click', function() { + shown = Math.min(visibleCount, rows.length); + apply(); + root.scrollIntoView({ behavior: 'smooth', block: 'start' }); + }); + } + + apply(); +})(); +</script> + +<style> + .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; } + } +</style> + +{% 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 -%} + <section class="gk-tour-dates gk-tour-dates--reveal" data-section-id="{{ section.id }}"> + <div class="gk-tour-dates__inner"> + + {% if section.settings.eyebrow != blank %} + <div class="gk-tour-dates__eyebrow">{{ section.settings.eyebrow }}</div> + {% endif %} + + {% if section.settings.heading != blank %} + <h2 class="gk-tour-dates__heading">{{ section.settings.heading }}</h2> + {% endif %} + + {% if section.settings.subtext != blank %} + <div class="gk-tour-dates__subtext">{{ section.settings.subtext }}</div> + {% endif %} + + <div class="gk-tour-dates__list" role="list"> + {%- 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 -%} + <div class="gk-date-row" role="listitem" data-date-row data-index="{{ render_index }}" {{ block.shopify_attributes }}> + <div class="gk-date-row__date">{{ display_date }}</div> + <div class="gk-date-row__details"> + {%- if _bv != blank -%}<div class="gk-date-row__venue">{{ _bv }}</div>{%- endif -%} + {%- if _bd != blank -%}<div class="gk-date-row__descriptor">{{ _bd }}</div>{%- endif -%} + {%- if _bcity != blank -%}<div class="gk-date-row__city">{{ _bcity }}</div>{%- endif -%} + </div> + <div class="gk-date-row__cta"> + {%- if _sold -%} + <span class="gk-date-row__soldout" aria-label="Sold out">SOLD OUT</span> + {%- elsif _bu != blank -%} + <a class="gk-date-row__btn" href="{{ _bu }}" target="_blank" rel="noopener">GET TICKETS</a> + {%- else -%} + <span class="gk-date-row__soldout" aria-label="Tickets unavailable">TBA</span> + {%- endif -%} + </div> + </div> + {%- assign render_index = render_index | plus: 1 -%} + {%- endif -%} + {%- endif -%} + {%- endif -%} + {%- endfor -%} + </div> + + {% if upcoming_count == 0 %} + <div class="gk-tour-dates__empty">{{ section.settings.empty_text }}</div> + {% endif %} + + {% if upcoming_count > initial_visible %} + <div class="gk-tour-dates__more-wrap"> + <button type="button" class="gk-tour-dates__more">{{ section.settings.more_label }}</button> + </div> + {% endif %} + + </div> + + {% if upcoming_count > initial_visible %} + <script> + (function () { + var section = document.querySelector('[data-section-id="{{ section.id }}"]'); + if (!section) return; + var rows = section.querySelectorAll('.gk-date-row'); + var btn = section.querySelector('.gk-tour-dates__more'); + if (!btn || !rows.length) return; + var initial = {{ initial_visible }}; + var step = {{ reveal_step }}; + var shown = Math.min(initial, rows.length); + function render() { + rows.forEach(function (row, idx) { + row.style.display = (idx < shown) ? '' : 'none'; + }); + btn.style.display = (shown >= rows.length) ? 'none' : ''; + } + render(); + btn.addEventListener('click', function () { + shown = Math.min(shown + step, rows.length); + render(); + }); + })(); + </script> + {% endif %} + </section> + +{%- else -%} + + {%- comment -%}─── DATES PAGE STYLE ────────────────────────────────────────{%- endcomment -%} + <section class="gk-dates" data-section-id="{{ section.id }}"> + <div class="gk-dates__inner"> + + {% if section.settings.eyebrow != blank %} + <div class="gk-dates__eyebrow">{{ section.settings.eyebrow }}</div> + {% endif %} + + {% if section.settings.heading != blank %} + <h2 class="gk-dates__heading">{{ section.settings.heading }}</h2> + {% endif %} + + {% if section.settings.subtext != blank %} + <div class="gk-dates__subtext">{{ section.settings.subtext }}</div> + {% endif %} + + <div + class="gk-dates__list" + role="list" + data-visible-count="{{ initial_visible }}" + data-reveal-step="{{ reveal_step }}" + > + {%- 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 -%} + <div class="gk-date{{ extra_class }}" role="listitem" data-date-row data-index="{{ render_index }}" {{ block.shopify_attributes }}> + <div class="gk-date__date">{{ display_date }}</div> + <div class="gk-date__details"> + {%- if _bv != blank -%}<div class="gk-date__venue">{{ _bv }}</div>{%- endif -%} + {%- if _bd != blank -%}<div class="gk-date__descriptor">{{ _bd }}</div>{%- endif -%} + {%- if _bcity != blank -%}<div class="gk-date__city">{{ _bcity }}</div>{%- endif -%} + </div> + <div class="gk-date__cta"> + {%- if _sold -%} + <span class="gk-date__pill gk-date__pill--muted" aria-label="Sold out">SOLD OUT</span> + {%- elsif _bu != blank -%} + <a class="gk-date__pill gk-date__pill--accent" href="{{ _bu }}" target="_blank" rel="noopener">GET TICKETS</a> + {%- else -%} + <span class="gk-date__pill gk-date__pill--muted" aria-label="Tickets unavailable">TBA</span> + {%- endif -%} + </div> + </div> + {%- assign render_index = render_index | plus: 1 -%} + {%- endif -%} + {%- endif -%} + {%- endif -%} + {%- endfor -%} + </div> + + {% if upcoming_count == 0 %} + <div class="gk-dates__empty">{{ section.settings.empty_text }}</div> + {% endif %} + + {% if upcoming_count > initial_visible %} + <div class="gk-dates__controls"> + <button class="gk-dates__btn" type="button" data-dates-more>{{ section.settings.show_more_label }}</button> + <button class="gk-dates__btn gk-dates__btn--ghost" type="button" data-dates-less hidden>{{ section.settings.show_less_label }}</button> + {% if section.settings.view_all_url != blank %} + <a class="gk-dates__btn gk-dates__btn--ghost" href="{{ section.settings.view_all_url }}">{{ section.settings.view_all_label }}</a> + {% endif %} + </div> + {% elsif section.settings.view_all_url != blank %} + <div class="gk-dates__controls"> + <a class="gk-dates__btn gk-dates__btn--ghost" href="{{ section.settings.view_all_url }}">{{ section.settings.view_all_label }}</a> + </div> + {% endif %} + + </div> + </section> + + <script> + (function() { + var root = document.querySelector('.gk-dates[data-section-id="{{ section.id }}"]'); + if (!root) return; + var list = root.querySelector('.gk-dates__list'); + if (!list) return; + var rows = Array.prototype.slice.call(root.querySelectorAll('[data-date-row]')); + if (!rows.length) return; + var moreBtn = root.querySelector('[data-dates-more]'); + var lessBtn = root.querySelector('[data-dates-less]'); + var visibleCount = parseInt(list.getAttribute('data-visible-count') || '10', 10); + var step = parseInt(list.getAttribute('data-reveal-step') || '10', 10); + var shown = Math.min(visibleCount, rows.length); + function apply() { + rows.forEach(function(r, i) { + if (i < shown) r.classList.remove('is-hidden'); + else r.classList.add('is-hidden'); + }); + if (moreBtn) moreBtn.hidden = (shown >= rows.length); + if (lessBtn) lessBtn.hidden = (shown <= visibleCount); + } + if (moreBtn) { + moreBtn.addEventListener('click', function() { + shown = Math.min(shown + step, rows.length); + apply(); + }); + } + if (lessBtn) { + lessBtn.addEventListener('click', function() { + shown = Math.min(visibleCount, rows.length); + apply(); + root.scrollIntoView({ behavior: 'smooth', block: 'start' }); + }); + } + apply(); + })(); + </script> + +{%- 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 @@ +<div id="gk-tour-dates-slot"></div> + +{% 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 -%} + +<section class="{{ wrapper_class }}" data-section-id="{{ section.id }}"> + <div class="{{ inner_class }}"> + + {%- if section.settings.eyebrow != blank -%} + <div class="{{ eyebrow_class }}">{{ section.settings.eyebrow }}</div> + {%- endif -%} + + {%- if section.settings.heading != blank -%} + <h2 class="{{ heading_class }}">{{ section.settings.heading }}</h2> + {%- endif -%} + + {%- if section.settings.subtext != blank -%} + <div class="{{ subtext_class }}">{{ section.settings.subtext }}</div> + {%- endif -%} + + <div + class="{{ list_class }}" + role="list" + {%- unless is_home %} + data-visible-count="{{ initial_visible }}" + data-reveal-step="{{ reveal_step }}" + {%- endunless %} + > + {%- 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 -%} + + <div + class="{{ row_prefix }}{{ extra_class }}" + role="listitem" + data-date-row + data-index="{{ render_idx }}" + {{ _b.shopify_attributes }} + > + <div class="{{ row_prefix }}__date">{{ show_date }}</div> + + <div class="{{ row_prefix }}__details"> + {%- if venue_name != blank -%} + <div class="{{ row_prefix }}__venue">{{ venue_name }}</div> + {%- endif -%} + {%- if descriptor != blank -%} + <div class="{{ row_prefix }}__descriptor">{{ descriptor }}</div> + {%- endif -%} + {%- if city_state != blank -%} + <div class="{{ row_prefix }}__city">{{ city_state }}</div> + {%- endif -%} + </div> + + <div class="{{ row_prefix }}__cta"> + {%- if is_sold_out -%} + {%- if is_home -%} + <span class="{{ row_prefix }}__soldout" aria-label="Sold out">SOLD OUT</span> + {%- else -%} + <span class="gk-date__pill gk-date__pill--muted" aria-label="Sold out">SOLD OUT</span> + {%- endif -%} + {%- elsif ticket_url != blank -%} + {%- if is_home -%} + <a class="{{ row_prefix }}__btn" href="{{ ticket_url }}" target="_blank" rel="noopener">GET TICKETS</a> + {%- else -%} + <a class="gk-date__pill gk-date__pill--accent" href="{{ ticket_url }}" target="_blank" rel="noopener">GET TICKETS</a> + {%- endif -%} + {%- else -%} + {%- if is_home -%} + <span class="{{ row_prefix }}__soldout" aria-label="Tickets TBA">TBA</span> + {%- else -%} + <span class="gk-date__pill gk-date__pill--muted" aria-label="Tickets TBA">TBA</span> + {%- endif -%} + {%- endif -%} + </div> + </div> + + {%- assign render_idx = render_idx | plus: 1 -%} + {%- endif -%} + {%- endfor -%} + {%- endif -%} + </div> + + {%- if upcoming_count == 0 -%} + <div class="{{ empty_class }}">{{ section.settings.empty_text }}</div> + {%- endif -%} + + {%- comment -%} ── Controls ── {%- endcomment -%} + {%- if is_home -%} + {%- if upcoming_count > initial_visible -%} + <div class="gk-tour-dates__more-wrap"> + <button type="button" class="gk-tour-dates__more"> + {{ section.settings.home_more_label }} + </button> + </div> + {%- endif -%} + {%- else -%} + {%- if upcoming_count > initial_visible -%} + <div class="gk-dates__controls"> + <button class="gk-dates__btn" type="button" data-dates-more> + {{ section.settings.page_more_label }} + </button> + <button class="gk-dates__btn gk-dates__btn--ghost" type="button" data-dates-less hidden> + {{ section.settings.page_less_label }} + </button> + {%- if section.settings.view_all_url != blank -%} + <a class="gk-dates__btn gk-dates__btn--ghost" href="{{ section.settings.view_all_url }}"> + {{ section.settings.view_all_label }} + </a> + {%- endif -%} + </div> + {%- elsif section.settings.view_all_url != blank -%} + <div class="gk-dates__controls"> + <a class="gk-dates__btn gk-dates__btn--ghost" href="{{ section.settings.view_all_url }}"> + {{ section.settings.view_all_label }} + </a> + </div> + {%- endif -%} + {%- endif -%} + + </div> +</section> + +{%- comment -%} ── JavaScript ── {%- endcomment -%} +{%- if is_home and upcoming_count > initial_visible -%} +<script> +(function () { + var section = document.querySelector('[data-section-id="{{ section.id }}"]'); + if (!section) return; + var rows = section.querySelectorAll('.gk-date-row'); + var btn = section.querySelector('.gk-tour-dates__more'); + if (!btn || !rows.length) return; + + var initial = {{ initial_visible }}; + var step = {{ reveal_step }}; + var shown = Math.min(initial, rows.length); + + function render() { + rows.forEach(function (row, idx) { + row.style.display = (idx < shown) ? '' : 'none'; + }); + btn.style.display = (shown >= rows.length) ? 'none' : ''; + } + render(); + btn.addEventListener('click', function () { + shown = Math.min(shown + step, rows.length); + render(); + }); +})(); +</script> +{%- elsif is_home == false and upcoming_count > initial_visible -%} +<script> +(function() { + var root = document.querySelector('.gk-dates[data-section-id="{{ section.id }}"]'); + if (!root) return; + var list = root.querySelector('.gk-dates__list'); + if (!list) return; + var rows = Array.prototype.slice.call(root.querySelectorAll('[data-date-row]')); + if (!rows.length) return; + var moreBtn = root.querySelector('[data-dates-more]'); + var lessBtn = root.querySelector('[data-dates-less]'); + var visibleCount = parseInt(list.getAttribute('data-visible-count') || '10', 10); + var step = parseInt(list.getAttribute('data-reveal-step') || '10', 10); + var shown = Math.min(visibleCount, rows.length); + + function apply() { + rows.forEach(function(r, i) { + if (i < shown) r.classList.remove('is-hidden'); + else r.classList.add('is-hidden'); + }); + if (moreBtn) moreBtn.hidden = (shown >= rows.length); + if (lessBtn) lessBtn.hidden = (shown <= visibleCount); + } + if (moreBtn) { + moreBtn.addEventListener('click', function() { + shown = Math.min(shown + step, rows.length); + apply(); + }); + } + if (lessBtn) { + lessBtn.addEventListener('click', function() { + shown = Math.min(visibleCount, rows.length); + apply(); + root.scrollIntoView({ behavior: 'smooth', block: 'start' }); + }); + } + apply(); +})(); +</script> +{%- 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/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 @@ <div id="Banner-{{ section.id }}" - class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.image_height == 'adapt' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}" + data-gk-hero-bloom="{{ section.settings.gk_hero_bloom }}" + class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.image_height == 'adapt' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}{% if section.settings.gk_hero_bloom %} gk-hero-bloom{% endif %}" > {%- if section.settings.image != blank -%} <div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"> @@ -87,6 +180,7 @@ {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }} </div> {%- endif -%} + {%- if section.settings.image_2 != blank -%} <div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"> {%- liquid @@ -115,15 +209,13 @@ }} </div> {%- endif -%} + <div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"> <div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient"> {%- for block in section.blocks -%} {%- case block.type -%} {%- when 'heading' -%} - <h2 - class="banner__heading inline-richtext {{ block.settings.heading_size }}" - {{ block.shopify_attributes }} - > + <h2 class="banner__heading inline-richtext {{ block.settings.heading_size }}" {{ block.shopify_attributes }}> {{ block.settings.heading }} </h2> {%- when 'text' -%} @@ -131,10 +223,7 @@ <p>{{ block.settings.text }}</p> </div> {%- when 'buttons' -%} - <div - class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}" - {{ block.shopify_attributes }} - > + <div class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}> {%- if block.settings.button_label_1 != blank -%} <a {% if block.settings.button_link_1 == blank %} @@ -166,6 +255,47 @@ </div> </div> +<script> +(function () { + var banner = document.getElementById('Banner-{{ section.id }}'); + if (!banner) return; + + var enabled = banner.getAttribute('data-gk-hero-bloom') === 'true'; + if (!enabled) return; + + if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) { + banner.classList.add('gk-hero--in'); + banner.classList.remove('gk-hero--pre'); + return; + } + + banner.classList.add('gk-hero--pre'); + + var revealed = false; + var reveal = function () { + if (revealed) return; + revealed = true; + banner.classList.add('gk-hero--in'); + banner.classList.remove('gk-hero--pre'); + }; + + if ('IntersectionObserver' in window) { + var io = new IntersectionObserver(function (entries) { + entries.forEach(function (entry) { + if (entry.isIntersecting) { + reveal(); + io.disconnect(); + } + }); + }, { threshold: 0.25 }); + + io.observe(banner); + } else { + requestAnimationFrame(reveal); + } +})(); +</script> + {% schema %} { "name": "t:sections.image-banner.name", @@ -199,22 +329,10 @@ "type": "select", "id": "image_height", "options": [ - { - "value": "adapt", - "label": "t:sections.image-banner.settings.image_height.options__1.label" - }, - { - "value": "small", - "label": "t:sections.image-banner.settings.image_height.options__2.label" - }, - { - "value": "medium", - "label": "t:sections.image-banner.settings.image_height.options__3.label" - }, - { - "value": "large", - "label": "t:sections.image-banner.settings.image_height.options__4.label" - } + { "value": "adapt", "label": "t:sections.image-banner.settings.image_height.options__1.label" }, + { "value": "small", "label": "t:sections.image-banner.settings.image_height.options__2.label" }, + { "value": "medium", "label": "t:sections.image-banner.settings.image_height.options__3.label" }, + { "value": "large", "label": "t:sections.image-banner.settings.image_height.options__4.label" } ], "default": "medium", "label": "t:sections.image-banner.settings.image_height.label" @@ -223,26 +341,20 @@ "type": "select", "id": "image_behavior", "options": [ - { - "value": "none", - "label": "t:sections.all.animation.image_behavior.options__1.label" - }, - { - "value": "ambient", - "label": "t:sections.all.animation.image_behavior.options__2.label" - }, - { - "value": "fixed", - "label": "t:sections.all.animation.image_behavior.options__3.label" - }, - { - "value": "zoom-in", - "label": "t:sections.all.animation.image_behavior.options__4.label" - } + { "value": "none", "label": "t:sections.all.animation.image_behavior.options__1.label" }, + { "value": "ambient", "label": "t:sections.all.animation.image_behavior.options__2.label" }, + { "value": "fixed", "label": "t:sections.all.animation.image_behavior.options__3.label" }, + { "value": "zoom-in", "label": "t:sections.all.animation.image_behavior.options__4.label" } ], "default": "none", "label": "t:sections.all.animation.image_behavior.label" }, + { + "type": "checkbox", + "id": "gk_hero_bloom", + "default": true, + "label": "GK: Hero Motion Intro (Depth Slide)" + }, { "type": "header", "content": "t:sections.image-banner.settings.content.content" @@ -251,42 +363,15 @@ "type": "select", "id": "desktop_content_position", "options": [ - { - "value": "top-left", - "label": "t:sections.image-banner.settings.desktop_content_position.options__1.label" - }, - { - "value": "top-center", - "label": "t:sections.image-banner.settings.desktop_content_position.options__2.label" - }, - { - "value": "top-right", - "label": "t:sections.image-banner.settings.desktop_content_position.options__3.label" - }, - { - "value": "middle-left", - "label": "t:sections.image-banner.settings.desktop_content_position.options__4.label" - }, - { - "value": "middle-center", - "label": "t:sections.image-banner.settings.desktop_content_position.options__5.label" - }, - { - "value": "middle-right", - "label": "t:sections.image-banner.settings.desktop_content_position.options__6.label" - }, - { - "value": "bottom-left", - "label": "t:sections.image-banner.settings.desktop_content_position.options__7.label" - }, - { - "value": "bottom-center", - "label": "t:sections.image-banner.settings.desktop_content_position.options__8.label" - }, - { - "value": "bottom-right", - "label": "t:sections.image-banner.settings.desktop_content_position.options__9.label" - } + { "value": "top-left", "label": "t:sections.image-banner.settings.desktop_content_position.options__1.label" }, + { "value": "top-center", "label": "t:sections.image-banner.settings.desktop_content_position.options__2.label" }, + { "value": "top-right", "label": "t:sections.image-banner.settings.desktop_content_position.options__3.label" }, + { "value": "middle-left", "label": "t:sections.image-banner.settings.desktop_content_position.options__4.label" }, + { "value": "middle-center", "label": "t:sections.image-banner.settings.desktop_content_position.options__5.label" }, + { "value": "middle-right", "label": "t:sections.image-banner.settings.desktop_content_position.options__6.label" }, + { "value": "bottom-left", "label": "t:sections.image-banner.settings.desktop_content_position.options__7.label" }, + { "value": "bottom-center", "label": "t:sections.image-banner.settings.desktop_content_position.options__8.label" }, + { "value": "bottom-right", "label": "t:sections.image-banner.settings.desktop_content_position.options__9.label" } ], "default": "middle-center", "label": "t:sections.image-banner.settings.desktop_content_position.label" @@ -295,18 +380,9 @@ "type": "select", "id": "desktop_content_alignment", "options": [ - { - "value": "left", - "label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label" - }, - { - "value": "center", - "label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label" - }, - { - "value": "right", - "label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label" - } + { "value": "left", "label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label" }, + { "value": "center", "label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label" }, + { "value": "right", "label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label" } ], "default": "center", "label": "t:sections.image-banner.settings.desktop_content_alignment.label" @@ -332,23 +408,14 @@ "id": "stack_images_on_mobile", "default": true, "label": "t:sections.image-banner.settings.stack_images_on_mobile.label" - }, + }, { "type": "select", "id": "mobile_content_alignment", "options": [ - { - "value": "left", - "label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label" - }, - { - "value": "center", - "label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label" - }, - { - "value": "right", - "label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label" - } + { "value": "left", "label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label" }, + { "value": "center", "label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label" }, + { "value": "right", "label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label" } ], "default": "center", "label": "t:sections.image-banner.settings.mobile_content_alignment.label" @@ -376,26 +443,11 @@ "type": "select", "id": "heading_size", "options": [ - { - "value": "h2", - "label": "t:sections.all.heading_size.options__1.label" - }, - { - "value": "h1", - "label": "t:sections.all.heading_size.options__2.label" - }, - { - "value": "h0", - "label": "t:sections.all.heading_size.options__3.label" - }, - { - "value": "hxl", - "label": "t:sections.all.heading_size.options__4.label" - }, - { - "value": "hxxl", - "label": "t:sections.all.heading_size.options__5.label" - } + { "value": "h2", "label": "t:sections.all.heading_size.options__1.label" }, + { "value": "h1", "label": "t:sections.all.heading_size.options__2.label" }, + { "value": "h0", "label": "t:sections.all.heading_size.options__3.label" }, + { "value": "hxl", "label": "t:sections.all.heading_size.options__4.label" }, + { "value": "hxxl", "label": "t:sections.all.heading_size.options__5.label" } ], "default": "h1", "label": "t:sections.all.heading_size.label" @@ -417,18 +469,9 @@ "type": "select", "id": "text_style", "options": [ - { - "value": "body", - "label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label" - }, - { - "value": "subtitle", - "label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label" - }, - { - "value": "caption-with-letter-spacing", - "label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label" - } + { "value": "body", "label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label" }, + { "value": "subtitle", "label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label" }, + { "value": "caption-with-letter-spacing", "label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label" } ], "default": "body", "label": "t:sections.image-banner.blocks.text.settings.text_style.label" @@ -441,8 +484,8 @@ "limit": 1, "settings": [ { - "type": "header", - "content": "t:sections.image-banner.blocks.buttons.settings.header_1.content" + "type": "header", + "content": "t:sections.image-banner.blocks.buttons.settings.header_1.content" }, { "type": "text", @@ -463,8 +506,8 @@ "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label" }, { - "type": "header", - "content": "t:sections.image-banner.blocks.buttons.settings.header_2.content" + "type": "header", + "content": "t:sections.image-banner.blocks.buttons.settings.header_2.content" }, { "type": "text", @@ -491,17 +534,11 @@ { "name": "t:sections.image-banner.presets.name", "blocks": [ - { - "type": "heading" - }, - { - "type": "text" - }, - { - "type": "buttons" - } + { "type": "heading" }, + { "type": "text" }, + { "type": "buttons" } ] } ] } -{% endschema %} +{% endschema %} \ No newline at end of file diff --git a/snippets/gk-bandsintown-embed.liquid b/snippets/gk-bandsintown-embed.liquid new file mode 100644 index 00000000000..ea3a704e935 --- /dev/null +++ b/snippets/gk-bandsintown-embed.liquid @@ -0,0 +1,31 @@ +{%- comment -%} + snippets/gk-bandsintown-embed.liquid + Renders the Bandsintown widget initializer element and loader script. + All CSS and JS are handled by the calling section file. + + Required variables: + bit_artist {string} Artist name exactly as listed on Bandsintown +{%- endcomment -%} + +<a + class="bit-widget-initializer" + data-artist-name="{{ bit_artist | escape }}" + data-display-limit="50" + data-background-color="transparent" + data-text-color="#ffffff" + data-link-color="#ff6a00" + data-link-text-color="#0b0b0b" + data-separator-color="rgba(255,255,255,0.08)" + data-font="inherit" + data-auto-style="false" + data-display-past-dates="false" + data-display-local-dates="false" + data-locale="en" + data-layout="standard" + data-display-lineup="false" + data-display-start-time="false" + data-social-share-icon="false" + data-widget-width="100%" +></a> + +<script charset="utf-8" src="https://widget.bandsintown.com/main.min.js"></script> diff --git a/snippets/gk-tour-dates-shared.liquid b/snippets/gk-tour-dates-shared.liquid new file mode 100644 index 00000000000..98447a58bc2 --- /dev/null +++ b/snippets/gk-tour-dates-shared.liquid @@ -0,0 +1,212 @@ +{% comment %} + GK Shared Tour Dates — single source of truth + Snippets cannot contain {% schema %}. + + Calling conventions supported: + + render 'gk-tour-dates-shared', mode: 'render_home' + → outputs .gk-date-row markup (home section CSS) + → all rows output; JS hides beyond initial_visible via style.display + + render 'gk-tour-dates-shared', mode: 'render_page', visible_count: <n> + → outputs .gk-date markup + → rows beyond visible_count get class "is-hidden" (CSS hides, JS manages) + + render 'gk-tour-dates-shared', mode: 'render', row_prefix: 'gk-date', visible_count: <n>, use_hidden_class: true + → legacy explicit mode (same output as render_page when row_prefix='gk-date') + + render 'gk-tour-dates-shared', mode: 'count' + → outputs only the integer count of upcoming dates + + Data source (priority order): + 1. Theme Settings → settings.gk_tour_dates_data (textarea, one date per line) + Format per line: + YYYY-MM-DD | Descriptor (optional) | Venue | City | State | Ticket URL (optional) | sold_out (optional) + Example: + 2026-04-22 | support for Paul Gilbert | Barnato | Omaha | NE | https://tickets.com | false + 2. Fallback: _gk_dates_raw capture block below (used when settings textarea is blank) + Format: Date || Venue || City, State || Ticket URL || sold_out + + Safe date filter: + show_ts == 0 → Liquid can't parse the date string → keep it visible + show_ts > 0 → hide the row if show is before today midnight UTC +{% endcomment %} + +{%- liquid + assign today_ymd = 'now' | date: '%Y-%m-%d' + assign today_midnight_ts = today_ymd | date: '%s' | plus: 0 + + assign mode = mode | default: 'count' + assign visible_count = visible_count | default: 10 + + if mode == 'render_home' + assign row_prefix = 'gk-date-row' + assign apply_hidden = false + elsif mode == 'render_page' + assign row_prefix = 'gk-date' + assign apply_hidden = true + elsif mode == 'render' + assign row_prefix = row_prefix | default: 'gk-date' + assign apply_hidden = use_hidden_class | default: false + else + assign row_prefix = 'gk-date' + assign apply_hidden = false + endif +-%} + +{%- comment -%} + ── DATA SOURCE ─────────────────────────────────────────────────── + Priority 1 — Theme Settings textarea (settings.gk_tour_dates_data) + Format per line: YYYY-MM-DD | Descriptor | Venue | City | State | Ticket URL | sold_out + (Descriptor and fields after State are optional; trailing pipes may be omitted) + Priority 2 — Hardcoded fallback capture block below + Format per line: Date || Venue || City, State || Ticket URL || sold_out +{%- endcomment -%} +{%- capture _gk_dates_raw -%} +April 22, 2026 || Barnato || Omaha, NE || https://www.bandsintown.com/a/28503-greg-koch || false +April 24, 2026 || City Winery || St. Louis, MO || https://tickets.citywinery.com/event/paul-gilbert-mzayyg || false +April 26, 2026 || The Vixen || McHenry, IL || https://vixenmchenry.com/event/paul-gilbert/ || false +April 28, 2026 || Jergel's Rhythm Grille || Warrendale, PA || https://www.bandsintown.com/a/28503-greg-koch || false +April 29, 2026 || The Iridium || New York, NY || https://www.theiridium.com/events || false +April 30, 2026 || The Iridium || New York, NY || https://www.theiridium.com/events || false +May 1, 2026 || The Iridium || New York, NY || https://www.theiridium.com/events || false +May 2, 2026 || The Vault Music Hall || New Bedford, MA || https://www.eventbrite.com/e/paul-gilbert-greg-koch-tickets-1980232841736 || false +May 3, 2026 || Daryl's House || Pawling, NY || https://www.ticketweb.com/event/paul-gilbert-daryls-house-tickets/14064204 || false +May 5, 2026 || Ardmore Music Hall || Ardmore, PA || https://www.ardmoremusichall.com/calendar/ || false +May 7, 2026 || Tupelo Music Hall || Derry, NH || https://tickets.tupelohall.com/ordertickets.asp?p=3378 || false +May 8, 2026 || Greenwich Odeum || Greenwich, RI || https://www.greenwichodeum.com/paul-gilbert/ || false +May 12, 2026 || Rams Head On Stage || Annapolis, MD || https://www.ramsheadonstage.com/events/detail/1290778 || false +May 13, 2026 || Tally Ho Theater || Leesburg, VA || https://www.ticketmaster.com/tally-ho-theater-tickets-leesburg/venue/9383 || false +May 14, 2026 || Beacon Theatre || Hopewell, VA || https://myticketstobuy.com/event/2367 || false +May 20, 2026 || Open Chord || Knoxville, TN || https://www.openchordmusic.com/upcoming-performances || false +May 23, 2026 || Culture Room || Fort Lauderdale, FL || https://www.bandsintown.com/e/1037689667-paul-gilbert-at-culture-room || false +May 27, 2026 || House of Blues || New Orleans, LA || https://www.houseofblues.com/neworleans || false +May 28, 2026 || Warehouse Live Midtown || Houston, TX || https://warehouselivemidtown.com || false +May 30, 2026 || Granada Theater || Dallas, TX || https://www.prekindle.com/event/32661-paul-gilbert-with-special-guest-greg-koch-dallas || false +{%- endcapture -%} + +{%- comment -%} + Select active data source and whether to use the new pipe format. +{%- endcomment -%} +{%- if settings.gk_tour_dates_data != blank -%} + {%- assign _active_data = settings.gk_tour_dates_data -%} + {%- assign _settings_fmt = true -%} +{%- else -%} + {%- assign _active_data = _gk_dates_raw -%} + {%- assign _settings_fmt = false -%} +{%- endif -%} + +{%- assign _date_lines = _active_data | newline_to_br | split: '<br />' -%} +{%- assign render_index = 0 -%} +{%- assign upcoming_count = 0 -%} + +{%- for _line in _date_lines -%} + {%- assign _trimmed = _line | strip -%} + {%- if _trimmed != blank -%} + + {%- if _settings_fmt -%} + {%- comment -%}── Settings format: YYYY-MM-DD | Descriptor | Venue | City | State | URL | sold_out ──{%- endcomment -%} + {%- assign _p = _trimmed | split: ' | ' -%} + {%- assign raw_date = _p[0] | default: '' | strip -%} + {%- assign descriptor = _p[1] | default: '' | strip -%} + {%- assign venue = _p[2] | default: '' | strip -%} + {%- assign _city = _p[3] | default: '' | strip -%} + {%- assign _state = _p[4] | default: '' | strip -%} + {%- if _city != blank and _state != blank -%} + {%- assign city = _city | append: ', ' | append: _state -%} + {%- elsif _city != blank -%} + {%- assign city = _city -%} + {%- else -%} + {%- assign city = _state -%} + {%- endif -%} + {%- assign url = _p[5] | default: '' | strip -%} + {%- assign sold = _p[6] | default: 'false' | strip -%} + {%- assign display_date = raw_date | date: '%B %-d, %Y' -%} + {%- if display_date == blank -%}{%- assign display_date = raw_date -%}{%- endif -%} + {%- else -%} + {%- comment -%}── Fallback format: Date || Venue || City, State || URL || sold_out ──{%- endcomment -%} + {%- assign _p = _trimmed | split: ' || ' -%} + {%- assign raw_date = _p[0] | default: '' | strip -%} + {%- assign venue = _p[1] | default: '' | strip -%} + {%- assign city = _p[2] | default: '' | strip -%} + {%- assign url = _p[3] | default: '' | strip -%} + {%- assign sold = _p[4] | default: 'false' | strip -%} + {%- assign descriptor = '' -%} + {%- assign display_date = raw_date -%} + {%- endif -%} + + {%- liquid + assign show_ts = raw_date | date: '%s' | plus: 0 + assign is_upcoming = false + if raw_date != blank + if show_ts == 0 + assign is_upcoming = true + elsif show_ts >= today_midnight_ts + assign is_upcoming = true + endif + endif + -%} + + {%- if is_upcoming -%} + {%- assign upcoming_count = upcoming_count | plus: 1 -%} + + {%- if mode == 'render_home' or mode == 'render_page' or mode == 'render' -%} + + {%- assign extra_class = '' -%} + {%- if apply_hidden and render_index >= visible_count -%} + {%- assign extra_class = ' is-hidden' -%} + {%- endif -%} + + <div + class="{{ row_prefix }}{{ extra_class }}" + role="listitem" + data-date-row + data-index="{{ render_index }}" + > + <div class="{{ row_prefix }}__date">{{ display_date }}</div> + + <div class="{{ row_prefix }}__details"> + {%- if venue != blank -%} + <div class="{{ row_prefix }}__venue">{{ venue }}</div> + {%- endif -%} + {%- if descriptor != blank -%} + <div class="{{ row_prefix }}__descriptor">{{ descriptor }}</div> + {%- endif -%} + {%- if city != blank -%} + <div class="{{ row_prefix }}__city">{{ city }}</div> + {%- endif -%} + </div> + + <div class="{{ row_prefix }}__cta"> + {%- if sold == 'true' -%} + {%- if row_prefix == 'gk-date' -%} + <span class="gk-date__pill gk-date__pill--muted" aria-label="Sold out">SOLD OUT</span> + {%- else -%} + <span class="{{ row_prefix }}__soldout" aria-label="Sold out">SOLD OUT</span> + {%- endif -%} + {%- elsif url != blank -%} + {%- if row_prefix == 'gk-date' -%} + <a class="gk-date__pill gk-date__pill--accent" href="{{ url }}" target="_blank" rel="noopener">GET TICKETS</a> + {%- else -%} + <a class="{{ row_prefix }}__btn" href="{{ url }}" target="_blank" rel="noopener">GET TICKETS</a> + {%- endif -%} + {%- else -%} + {%- if row_prefix == 'gk-date' -%} + <span class="gk-date__pill gk-date__pill--muted" aria-label="Tickets unavailable">TBA</span> + {%- else -%} + <span class="{{ row_prefix }}__soldout" aria-label="Tickets unavailable">TBA</span> + {%- endif -%} + {%- endif -%} + </div> + </div> + + {%- assign render_index = render_index | plus: 1 -%} + {%- endif -%} + {%- endif -%} + + {%- endif -%} +{%- endfor -%} + +{%- if mode == 'count' -%} + {{ upcoming_count }} +{%- endif -%} diff --git a/templates/collection.json b/templates/collection.json index d12dfab5447..fe5e47ed65d 100644 --- a/templates/collection.json +++ b/templates/collection.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. + * ------------------------------------------------------------ + */ { "sections": { "banner": { @@ -8,18 +17,115 @@ "color_scheme": "scheme-1" } }, + "gk_shop_categories_tfaetK": { + "type": "gk-shop-categories", + "blocks": { + "category_UMLxAC": { + "type": "category", + "settings": { + "title": "NEW!", + "desc": "Latest drops and fresh arrivals.", + "cta": "Explore", + "collection": "new" + } + }, + "category_ityGCR": { + "type": "category", + "settings": { + "title": "CDs", + "desc": "Studio albums and live records.", + "cta": "Explore", + "collection": "cds" + } + }, + "category_6BM7nV": { + "type": "category", + "settings": { + "title": "CDs", + "desc": "Studio albums and live records.", + "cta": "Explore", + "collection": "" + } + }, + "category_AqaeTn": { + "type": "category", + "settings": { + "title": "Vinyl", + "desc": "Wax. Analog. Real.", + "cta": "Explore", + "collection": "vinyl" + } + }, + "category_7bBD8L": { + "type": "category", + "settings": { + "title": "Merch", + "desc": "Wear the gristle.", + "cta": "Explore", + "collection": "merch" + } + }, + "category_tmbJC9": { + "type": "category", + "settings": { + "title": "Gear", + "desc": "Pedals, pickups, tone tools.", + "cta": "Explore", + "collection": "gear" + } + }, + "category_BkTJfQ": { + "type": "category", + "settings": { + "title": "Instructional Books", + "desc": "Learn from the Gristleman.", + "cta": "Explore", + "collection": "instructional-books" + } + }, + "category_DgjBa6": { + "type": "category", + "settings": { + "title": "DVDs", + "desc": "Classic guitar instruction.", + "cta": "Explore", + "collection": "dvds" + } + } + }, + "block_order": [ + "category_UMLxAC", + "category_ityGCR", + "category_6BM7nV", + "category_AqaeTn", + "category_7bBD8L", + "category_tmbJC9", + "category_BkTJfQ", + "category_DgjBa6" + ], + "name": "GK Shop Categories", + "settings": { + "kicker": "Browse the goods", + "heading": "The Gristle Shop", + "subtext": "<p>Records. Gear. Tools of tone. Wear the sound.</p>" + } + }, "product-grid": { "type": "main-collection-product-grid", "settings": { - "products_per_page": 16, - "columns_desktop": 4, - "image_ratio": "adapt", - "show_secondary_image": false, + "products_per_page": 12, + "columns_desktop": 3, + "columns_mobile": "2", + "color_scheme": "", + "image_ratio": "portrait", + "image_shape": "default", + "show_secondary_image": true, "show_vendor": false, "show_rating": false, + "quick_add": "none", "enable_filtering": true, + "filter_type": "horizontal", "enable_sorting": true, - "columns_mobile": "2", "padding_top": 36, "padding_bottom": 36 } @@ -27,6 +133,7 @@ }, "order": [ "banner", + "gk_shop_categories_tfaetK", "product-grid" ] } diff --git a/templates/index.json b/templates/index.json index 92d10b71ece..766fba04056 100644 --- a/templates/index.json +++ b/templates/index.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. + * ------------------------------------------------------------ + */ { "sections": { "image_banner": { @@ -6,14 +15,14 @@ "heading": { "type": "heading", "settings": { - "heading": "Image banner", + "heading": "Home Of The Gristle", "heading_size": "h0" } }, "text": { "type": "text", "settings": { - "text": "Give customers details about the banner image(s) or content on the template.", + "text": "", "text_style": "body" } }, @@ -35,109 +44,323 @@ "button" ], "settings": { + "image": "shopify://shop_images/8059526f-19c9-4901-a9d8-9059596f1446.png", "image_overlay_opacity": 40, "image_height": "large", + "image_behavior": "none", + "gk_hero_bloom": true, "desktop_content_position": "bottom-center", - "show_text_box": false, "desktop_content_alignment": "center", + "show_text_box": false, "color_scheme": "scheme-3", - "mobile_content_alignment": "center", "stack_images_on_mobile": false, + "mobile_content_alignment": "center", "show_text_below": false } }, - "rich_text": { - "type": "rich-text", - "blocks": { - "heading": { - "type": "heading", - "settings": { - "heading": "Talk about your brand", - "heading_size": "h1" - } - }, - "text": { - "type": "text", - "settings": { - "text": "<p>Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.<\/p>" - } - } - }, - "block_order": [ - "heading", - "text" - ], - "settings": { - "color_scheme": "scheme-1", - "full_width": true, - "padding_top": 40, - "padding_bottom": 0 - } - }, "featured_collection": { "type": "featured-collection", "settings": { - "title": "Featured products", - "heading_size": "h2", "collection": "all", "products_to_show": 8, + "title": "The Latest Gristle", + "heading_size": "h1", + "description": "", + "show_description": false, + "description_style": "body", "columns_desktop": 4, - "color_scheme": "scheme-1", + "enable_desktop_slider": false, + "full_width": false, "show_view_all": false, - "swipe_on_mobile": false, + "view_all_style": "solid", + "color_scheme": "scheme-1", "image_ratio": "adapt", + "image_shape": "default", "show_secondary_image": true, "show_vendor": false, "show_rating": false, + "quick_add": "none", "columns_mobile": "2", + "swipe_on_mobile": false, "padding_top": 28, "padding_bottom": 36 } }, - "collage": { - "type": "collage", + "gk_tour_dates_home_dLWg9B": { + "type": "gk-tour-dates", + "settings": {} + }, + "gk_stream_follow_GVbNme": { + "type": "gk-stream-follow", "blocks": { - "collection-0": { - "type": "collection", + "platform_link_q8HBBn": { + "type": "platform_link", + "settings": { + "column": "podcast", + "label": "Apple Podcasts", + "url": "https://podcasts.apple.com/us/podcast/chewing-the-gristle-with-greg-koch/id1525643497" + } + }, + "platform_link_mLmVKg": { + "type": "platform_link", + "settings": { + "column": "podcast", + "label": "Buzzprout", + "url": "https://www.buzzsprout.com/1246721" + } + }, + "platform_link_exYqQe": { + "type": "platform_link", + "settings": { + "column": "podcast", + "label": "Spotify Podcasts", + "url": "https://open.spotify.com/show/0J5kQaxZPd1iKqT3Vfzirc" + } + }, + "platform_link_BQXf4F": { + "type": "platform_link", + "settings": { + "column": "podcast", + "label": "Deezer Podcasts", + "url": "https://www.deezer.com/us/show/1572042" + } + }, + "platform_link_NYRx3L": { + "type": "platform_link", + "settings": { + "column": "watch_live", + "label": "YouTube", + "url": "https://www.youtube.com/@GregKochMusic/streams" + } + }, + "platform_link_gTtWaD": { + "type": "platform_link", + "settings": { + "column": "watch_live", + "label": "Facebook", + "url": "https://www.facebook.com/GregKochMusic" + } + }, + "platform_link_GLRmRE": { + "type": "platform_link", + "settings": { + "column": "stream_kmt", + "label": "Spotify", + "url": "https://open.spotify.com/artist/0S1IwDW6PhPmAuC9jtOo1L" + } + }, + "platform_link_GjRh34": { + "type": "platform_link", + "settings": { + "column": "stream_kmt", + "label": "Apple Music", + "url": "https://music.apple.com/us/artist/koch-marshall-trio/1325215495" + } + }, + "platform_link_YwtxXf": { + "type": "platform_link", + "settings": { + "column": "stream_kmt", + "label": "YouTube Music", + "url": "https://music.youtube.com/channel/UCOCLy0S38jVy35han88h_JA" + } + }, + "platform_link_aNzFB3": { + "type": "platform_link", + "settings": { + "column": "stream_greg", + "label": "Spotify", + "url": "https://open.spotify.com/artist/5Y6wPwVr2krTASRASpMLsC", + "icon": "shopify://shop_images/Spotify-Icon-Logo.wine.svg" + } + }, + "platform_link_EbDTxj": { + "type": "platform_link", + "settings": { + "column": "stream_greg", + "label": "Apple Music", + "url": "https://music.apple.com/us/artist/greg-koch/5517890" + } + }, + "platform_link_wR9JCm": { + "type": "platform_link", + "settings": { + "column": "stream_greg", + "label": "YouTube Music", + "url": "https://music.youtube.com/channel/UCX3rdX9oHrDLxb8Ql74Gwaw" + } + }, + "platform_link_ytJhCB": { + "type": "platform_link", + "settings": { + "column": "stream_greg", + "label": "BandCamp", + "url": "https://gregkoch.bandcamp.com/album/live-on-the-radio-volume-2" + } + }, + "platform_link_BpyBqF": { + "type": "platform_link", + "settings": { + "column": "stream_greg", + "label": "Deezer", + "url": "https://www.deezer.com/us/artist/386838" + } + }, + "platform_link_iJMtQK": { + "type": "platform_link", "settings": { - "collection": "" + "column": "stream_greg", + "label": "Tidal", + "url": "https://tidal.com/artist/4515825" } }, - "product": { - "type": "product", + "platform_link_jtx7X4": { + "type": "platform_link", "settings": { - "product": "", - "second_image": false + "column": "stream_greg", + "label": "Amazon Music", + "url": "https://www.amazon.com/music/player/artists/B0013QS4NU/greg-koch?shoppingPortalEnabled=true" } }, - "collection-1": { - "type": "collection", + "follow_link_DkFUcd": { + "type": "follow_link", "settings": { - "collection": "" + "label": "Instagram", + "url": "https://www.instagram.com/gregkochmusic" + } + }, + "follow_link_FNhrbc": { + "type": "follow_link", + "settings": { + "label": "FaceBook", + "url": "https://www.facebook.com/GregKochMusic" + } + }, + "follow_link_wEcgbq": { + "type": "follow_link", + "settings": { + "label": "Youtube", + "url": "https://www.youtube.com/c/GregKochMusic" + } + }, + "follow_link_jhpL4B": { + "type": "follow_link", + "settings": { + "label": "X", + "url": "https://x.com/Mansqwatch" + } + }, + "follow_link_pbGjwr": { + "type": "follow_link", + "settings": { + "label": "Tiktok", + "url": "https://www.tiktok.com/@gregkochofficial" } } }, "block_order": [ - "collection-0", - "product", - "collection-1" + "platform_link_q8HBBn", + "platform_link_mLmVKg", + "platform_link_exYqQe", + "platform_link_BQXf4F", + "platform_link_NYRx3L", + "platform_link_gTtWaD", + "platform_link_GLRmRE", + "platform_link_GjRh34", + "platform_link_YwtxXf", + "platform_link_aNzFB3", + "platform_link_EbDTxj", + "platform_link_wR9JCm", + "platform_link_ytJhCB", + "platform_link_BpyBqF", + "platform_link_iJMtQK", + "platform_link_jtx7X4", + "follow_link_DkFUcd", + "follow_link_FNhrbc", + "follow_link_wEcgbq", + "follow_link_jhpL4B", + "follow_link_pbGjwr" ], + "name": "GK Stream + Follow", "settings": { - "heading": "Multimedia collage", - "heading_size": "h2", - "desktop_layout": "left", - "mobile_layout": "collage", - "color_scheme": "scheme-1", - "padding_top": 36, - "padding_bottom": 36 + "eyebrow": "LISTEN & CONNECT", + "heading": "STREAM + FOLLOW", + "subtext": "Find Greg Koch on every platform.", + "col_1_title": "STREAM GREG", + "col_2_title": "STREAM KMT", + "col_3_title": "PODCAST", + "col_4_title": "LIVE STREAMS", + "follow_heading": "FOLLOW", + "show_icons": false, + "show_dividers": true, + "empty_column_text": "Add links for this column in the section blocks.", + "pad_y": 72, + "bg_color": "#0d0d0d", + "text_color": "#ffffff" + } + }, + "gk_featured_gristle_w9Up6E": { + "type": "gk-featured-gristle", + "blocks": { + "card_gPVNAw": { + "type": "card", + "settings": { + "image": "shopify://shop_images/lessons-cover_orig.jpg", + "label": "Lessons", + "title": "Virtual Lessons", + "description": "One-on-one virtual guitar lessons with Greg Koch via Zoom.", + "button_label": "BOOK NOW", + "link": "" + } + }, + "card_JPQw3d": { + "type": "card", + "settings": { + "image": "shopify://shop_images/homepage-digital-lessons_orig.jpg", + "label": "On Demand", + "title": "On-Demand Courses", + "description": "Self-paced video courses covering technique, tone, and more.", + "button_label": "BROWSE COURSES", + "link": "" + } + }, + "card_xDpydz": { + "type": "card", + "settings": { + "image": "shopify://shop_images/3CWSPtHqKbKH5WNFR9g6Rn.jpg", + "label": "TrueFire", + "title": "TrueFire Courses", + "description": "Full-length instructional courses on the TrueFire platform.", + "button_label": "VIEW ON TRUEFIRE", + "link": "" + } + } + }, + "block_order": [ + "card_gPVNAw", + "card_JPQw3d", + "card_xDpydz" + ], + "name": "GK Featured Gristle", + "settings": { + "bg_color": "#0d0d0d", + "eyebrow": "Learn from the Gristleman", + "heading": "FEATURED GRISTLE", + "subtext": "Lessons, courses, and on-demand content from Greg Koch.", + "text_alignment": "center", + "columns_desktop": "3", + "image_ratio": "16/9", + "padding_top": 60, + "padding_bottom": 60 } }, "video": { "type": "video", "settings": { "heading": "", - "video_url": "https://www.youtube.com/watch?v=_9VUPq3SxOc", "heading_size": "h1", + "enable_video_looping": false, + "video_url": "https://www.youtube.com/watch?v=_9VUPq3SxOc", "description": "", "full_width": false, "color_scheme": "scheme-1", @@ -152,7 +375,7 @@ "type": "column", "settings": { "title": "Column", - "text": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.<\/p>", + "text": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>", "link_label": "", "link": "" } @@ -161,7 +384,7 @@ "type": "column", "settings": { "title": "Column", - "text": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.<\/p>", + "text": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>", "link_label": "", "link": "" } @@ -170,7 +393,7 @@ "type": "column", "settings": { "title": "Column", - "text": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.<\/p>", + "text": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>", "link_label": "", "link": "" } @@ -186,14 +409,116 @@ "heading_size": "h1", "image_width": "third", "image_ratio": "adapt", + "button_label": "", + "button_link": "", "columns_desktop": 3, "column_alignment": "center", "background_style": "none", - "button_label": "", - "button_link": "", - "swipe_on_mobile": false, "color_scheme": "scheme-1", "columns_mobile": "1", + "swipe_on_mobile": false, + "padding_top": 36, + "padding_bottom": 36 + } + }, + "gk_spotify_embed_k4K4EF": { + "type": "gk-spotify-embed", + "name": "GK Spotify Embed", + "settings": { + "enable_animation": true, + "eyebrow": ".", + "heading": "Listen on Spotify", + "subheading": ".", + "embed_src": "https://open.spotify.com/embed/artist/5Y6wPwVr2krTASRASpMLsC?utm_source=generator", + "open_url": "https://open.spotify.com/artist/5Y6wPwVr2krTASRASpMLsC", + "show_open_button": true, + "height": 352, + "accent": "#e8690a", + "padding_top": 44, + "padding_bottom": 52 + } + }, + "gk_sponsors_RgU39c": { + "type": "gk-sponsors", + "blocks": { + "sponsor_Dm49jt": { + "type": "sponsor", + "settings": { + "logo": "shopify://shop_images/ChatGPT_Image_Feb_25_2026_10_12_11_AM.png", + "label": ".", + "url": "", + "open_new": true, + "nofollow": false + } + }, + "sponsor_cTyXDJ": { + "type": "sponsor", + "settings": { + "logo": "shopify://shop_images/ChatGPT_Image_Feb_25_2026_10_13_52_AM.png", + "label": ".", + "url": "", + "open_new": true, + "nofollow": false + } + }, + "sponsor_4ik4ji": { + "type": "sponsor", + "settings": { + "logo": "shopify://shop_images/ChatGPT_Image_Feb_25_2026_10_16_45_AM.png", + "label": ".", + "url": "", + "open_new": true, + "nofollow": false + } + }, + "sponsor_NFAMKW": { + "type": "sponsor", + "settings": { + "logo": "shopify://shop_images/ChatGPT_Image_Feb_25_2026_10_19_23_AM.png", + "label": ".", + "url": "", + "open_new": true, + "nofollow": false + } + }, + "sponsor_bBEEPy": { + "type": "sponsor", + "settings": { + "logo": "shopify://shop_images/ChatGPT_Image_Feb_25_2026_10_32_53_AM.png", + "label": ".", + "url": "", + "open_new": true, + "nofollow": false + } + }, + "sponsor_7DTkG6": { + "type": "sponsor", + "settings": { + "label": ".", + "url": "", + "open_new": true, + "nofollow": false + } + } + }, + "block_order": [ + "sponsor_Dm49jt", + "sponsor_cTyXDJ", + "sponsor_4ik4ji", + "sponsor_NFAMKW", + "sponsor_bBEEPy", + "sponsor_7DTkG6" + ], + "name": "GK Sponsors", + "settings": { + "heading": "Sponsors", + "show_labels": false, + "accent": "#E8690A", + "columns_desktop": 6, + "columns_tablet": 4, + "columns_mobile": 2, + "gap": 16, + "logo_height": 34, "padding_top": 36, "padding_bottom": 36 } @@ -201,10 +526,13 @@ }, "order": [ "image_banner", - "rich_text", "featured_collection", - "collage", + "gk_tour_dates_home_dLWg9B", + "gk_stream_follow_GVbNme", + "gk_featured_gristle_w9Up6E", "video", - "multicolumn" + "multicolumn", + "gk_spotify_embed_k4K4EF", + "gk_sponsors_RgU39c" ] } diff --git a/templates/page.about.json b/templates/page.about.json new file mode 100644 index 00000000000..403e37c8704 --- /dev/null +++ b/templates/page.about.json @@ -0,0 +1,107 @@ +/* + * ------------------------------------------------------------ + * 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. + * ------------------------------------------------------------ + */ +{ + "sections": { + "main": { + "type": "main-page", + "disabled": true, + "settings": { + "padding_top": 28, + "padding_bottom": 28 + } + }, + "gk_about_feature_NcbxQh": { + "type": "gk-about-feature", + "name": "GK About Feature", + "settings": { + "enable_animation": true, + "eyebrow": "", + "heading": "About Greg", + "image": "shopify://shop_images/gregkoch-hallway-1317-2025cjfoeckler.jpg", + "photo_credit": "above photo credit: ©2025CJFoeckler", + "subheading": ".", + "body": "<p>It is not a stretch to say that Milwaukee native Greg Koch is one of the most famous unknown guitar players in the world. His fierce creative spirit and crazed sense of fun fused with a tremendous degree of versatility has made him an island of six-stringed mirth in a sea of guitar warlords. Fifteen critically acclaimed CD’s featuring his unique and incendiary brand of playing and composing, international tours as band leader, fourteen best-selling guitar instructional materials for the Hal Leonard Publishing empire, articles and columns in some the biggest guitar magazines, a lengthy past tenure as an ambassador for Fender Guitars and a similar position in that capacity for Fishman Transducers has generated a respectable following for Greg throughout the world. Ultimately, Greg's 4000 plus videos exceeding 50 million views for Wildwood Guitars of Louisville Colorado showcasing Greg’s wild guitar test drives and random humorous commentary have made him a household name for guitar players throughout the galaxy.​<br/>​</p><p>Greg’s latest original music outlet, The Koch-Marshall Trio, is perhaps the best vehicle yet to convey his bold improvisational explorations and ever increasing arsenal of original material. The trio blends the explosive guitar manipulations of Greg, the groove-centric, power-pocket playing of his son Dylan on drums (who share many telepathic musical moments) and the glorious, Hammond organ stylings of the uber-talented Toby Marshall, Greg’s compositions are properly portrayed in the blues drenched, funk, chicken-fried, gospelly, jazz-rock panorama in which they were conceived. Their first release, “Toby Arrives” will be released in the February 23, 2018 on the Mascot Label Group / Players Club Imprint and features the first moments of their unexpected musical partnership captured at an extemporaneous jam session earlier in the year. </p>", + "button_label": ".", + "button_link": "", + "accent": "#e8690a", + "padding_top": 40, + "padding_bottom": 52 + } + }, + "gk_about_gallery_Yn9Rwx": { + "type": "gk-about-gallery", + "name": "GK About Gallery", + "settings": { + "enable_animation": true, + "eyebrow": "", + "heading": "About the Koch Marshall Trio", + "main_image": "shopify://shop_images/gregkoch-couch-1025-2025cjfoeckler_orig.jpg", + "main_credit": "above photo credit: ©2025CJFoeckler", + "thumb_1": "shopify://shop_images/IMG_4137.jpg", + "thumb_alt_1": ".", + "thumb_2": "shopify://shop_images/Untitled_design.jpg", + "thumb_alt_2": ".", + "thumb_3": "shopify://shop_images/unnamed_2.jpg", + "thumb_alt_3": ".", + "thumb_4": "shopify://shop_images/Screenshot_2026-02-24_at_4.04.43_PM.png", + "thumb_alt_4": ".", + "body": "<p><strong>Koch-Marshall Trio</strong>, consists of American guitarist Greg Koch, his son Dylan Koch on drums and Hammond B3 specialist Toby Lee Marshall. At the heart of this organ trio is a blues sensibility - but Koch's compositions are an amalgam of rock, funk, jazz and country served up with heavy grooves and dynamic improvisations delivered with no small dose of humor and occasional wild abandon.​</p><p><br/>Milwaukee native Greg Koch has forged a successful career as a guitar player's guitarist. He has been called \"fiendishly talented\" by author and former editor- in-chief of Guitar Player Magazine Tom Wheeler and \"scary good\" by guitar phenom Joe Bonamassa. In addition to his 15 releases on multiple record labels which feature his unique take on a variety of American guitar styles and his versatile compositions, Koch is widely known for his lengthy tenure as an international ambassador for Fender Guitars which listed him in their “Top Ten Unsung Guitarists” on <a href=\"https://l.facebook.com/l.php?u=http%3A%2F%2FFender.com%2F&h=ATNh_TrfcDbPMvyxJJ3mJ0P5EUqOTAxTz9140c-CTbtX6tBh5zdZ7dE254olu4VhGJVbEI5FAIkZM2dmJ4kX4SbiEK-NfbJU0DmIihOlqv6bG3ggmhs9M1LwRNdCITfFNTa55xBvPycaXcxNXcbMetwPs8Hh9-hRthA-Kolz4TCE&enc=AZMUjBVzqT_JpPxAFZsd_loj6hwZSCqtIfL8Gczk2Z-s_oDO849L0P9ATA1sX9-61OQOYd1gVnBp8nz7efSt9pFSWWhTKBt0puu6g14xogYrXli0fZHOlztxKeLeTNtXO-mHdFUWiJxVkHgZo9YqN66dUWx5JXWciP-rDDimMm3tLsahuXLoBvL8Qorjq7MBOh0tmhy1skDS9njZcyCYrCxS&s=1\">Fender.com.</a> He is also a best-selling author and video instructor for music publisher Hal Leonard. Greg is a contributing columnist for a variety of guitar magazines including Guitar Player Magazine which listed Greg’s “Chief’s Blues” in their “40 Badass Blues Solos You Must Hear” and Premier Guitar. For the last few years Greg is renowned for his wildly popular internet videos (which number in the thousands with tens of millions of views) originating from the legendary Colorado guitar shop Wildwood Guitars. Furthermore, Koch is internationally known for his work with Fishman Transducers as a clinician and for his contributions to the development of the highly acclaimed Greg Koch Signature Gristletone Pickups for Telecaster guitar.​</p><p>Dylan Koch gravitated to the drums early on in his life using kitchen utensils to play along with music as soon as he could walk. After digesting an early diet of Ginger Baker, Keith Moon, Mitch Mitchell and John Bonham, Dylan was mentored by the legendary Tom Brechtlein (Chick Corea/Robben Ford). In high school Dylan participated in the Jazz Institute at the Wisconsin Conservatory of Music and furthered his studies at the McNally Smith School of Music in the Twin Cities. While still in his teens he performed with young guitar guns Tallan Noble Latz and Jared James Nichols and has performed alongside his father with such artists as Robben Ford, Little Feat's Paul Barrere, Jon Cleary, David Grissom, Roscoe Beck and Malford Milligan. Dylan was recently nominated for drummer of the year by the Wisconsin Area Music Awards (WAMI).​</p><p>Toby Lee Marshall's screaming B3 is the perfect compliment to the musical stew that is the Koch songbook. Hailing from the Twin Cities area he came from a musical family, playing piano for years until falling under the spell of the sound of the organ while at a baseball game at age seven. His fascination for the Hammond B3 took hold after his Dad took him to see Steve Cherewan playing with Dr. Mambo's Combo at their legendary residency at Bunker's in Minneapolis. Steve mentored Toby in the ways of the B3 and he hit the ground running landing a gig with bluesman Lonnie Brooks while still a teen. He would go on to travel the world as a member of Bernard Allison's band. After taking a hiatus to spend some family time, Toby is returning to music with a vehemence and the Koch-Marshall format gives him a long leash to let his freak flag fly, providing groovy bass lines, sinuous chordal work and incendiary solos.<br/>​</p>", + "accent": "#e8690a", + "padding_top": 44, + "padding_bottom": 52 + } + }, + "video_RXDmDP": { + "type": "video", + "name": "t:sections.video.presets.name", + "settings": { + "heading": "", + "heading_size": "h1", + "enable_video_looping": false, + "video_url": "https://www.youtube.com/watch?v=L4Ntl4dRyp4", + "cover_image": "shopify://shop_images/Screenshot_2026-02-25_at_8.54.17_AM.png", + "description": "", + "full_width": false, + "color_scheme": "", + "padding_top": 36, + "padding_bottom": 36 + } + }, + "1772034515a67f069c": { + "type": "apps", + "settings": { + "include_margins": true + } + }, + "gk_spotify_embed_FgThYi": { + "type": "gk-spotify-embed", + "name": "GK Spotify Embed", + "settings": { + "enable_animation": true, + "heading": "Listen on Spotify", + "subheading": ".", + "spotify_embed_url": "https://open.spotify.com/embed/artist/5Y6wPwVr2krTASRASpMLsC?utm_source=generator", + "height": 380, + "show_open_button": true, + "accent": "#E8690A", + "padding_top": 44, + "padding_bottom": 52 + } + } + }, + "order": [ + "main", + "gk_about_feature_NcbxQh", + "gk_about_gallery_Yn9Rwx", + "video_RXDmDP", + "1772034515a67f069c", + "gk_spotify_embed_FgThYi" + ] +} diff --git a/templates/page.contact-gk.json b/templates/page.contact-gk.json new file mode 100644 index 00000000000..6262b3ff60c --- /dev/null +++ b/templates/page.contact-gk.json @@ -0,0 +1,67 @@ +/* + * ------------------------------------------------------------ + * 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. + * ------------------------------------------------------------ + */ +{ + "sections": { + "gk_contact": { + "type": "gk-contact-page", + "blocks": { + "email_general": { + "type": "info_item", + "settings": { + "label": "General", + "value": "info@gregkoch.com" + } + }, + "email_booking": { + "type": "info_item", + "settings": { + "label": "Booking", + "value": "booking@gregkoch.com" + } + }, + "email_press": { + "type": "info_item", + "settings": { + "label": "Press", + "value": "press@gregkoch.com" + } + } + }, + "block_order": [ + "email_general", + "email_booking", + "email_press" + ], + "settings": { + "bg_color": "#0D0D0D", + "eyebrow": "Get in Touch", + "heading": "CONTACT", + "subtext": "For booking, press, lessons, or general inquiries.", + "name_label": "Name", + "name_placeholder": "Your name", + "email_label": "Email", + "email_placeholder": "your@email.com", + "show_phone": false, + "message_label": "Message", + "message_placeholder": "What's on your mind?", + "submit_label": "SEND MESSAGE", + "success_message": "Thanks for reaching out! We'll get back to you soon.", + "button_alignment": "left", + "button_width": "auto", + "form_width": 700, + "padding_top": 60, + "padding_bottom": 60 + } + } + }, + "order": [ + "gk_contact" + ] +} diff --git a/templates/page.dates.json b/templates/page.dates.json new file mode 100644 index 00000000000..4f90d598f8e --- /dev/null +++ b/templates/page.dates.json @@ -0,0 +1,20 @@ +/* + * ------------------------------------------------------------ + * 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. + * ------------------------------------------------------------ + */ +{ + "sections": { + "gk_dates": { + "type": "gk-tour-dates", + "settings": {} + } + }, + "order": [ + "gk_dates" + ] +} diff --git a/templates/page.json b/templates/page.json index f2ee79be1f7..f7b7c286939 100644 --- a/templates/page.json +++ b/templates/page.json @@ -1,14 +1,41 @@ +/* + * ------------------------------------------------------------ + * 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. + * ------------------------------------------------------------ + */ { "sections": { "main": { "type": "main-page", + "disabled": true, "settings": { "padding_top": 28, "padding_bottom": 28 } + }, + "gk_bandsintown_page_y47w9C": { + "type": "gk-bandsintown-page", + "name": "GK Bandsintown (Page)", + "settings": { + "eyebrow": "Tour Dates", + "heading": "TOUR DATES", + "subtext": "See upcoming dates below.", + "artist_name": "Greg Koch", + "initial_visible_count": 10, + "reveal_step": 10, + "show_more_label": "SHOW MORE DATES", + "bg_color": "#0D0D0D", + "padding_top": 64, + "padding_bottom": 64 + } } }, "order": [ - "main" + "main", + "gk_bandsintown_page_y47w9C" ] } diff --git a/templates/page.lessons.json b/templates/page.lessons.json new file mode 100644 index 00000000000..0b1a98706c8 --- /dev/null +++ b/templates/page.lessons.json @@ -0,0 +1,59 @@ +{ + "sections": { + "gk_lessons": { + "type": "gk-lessons-page", + "blocks": { + "virtual": { + "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 — from fundamentals to advanced gristle techniques.", + "features": "60 minute sessions|All skill levels|Personalized instruction|Zoom video call", + "price": "", + "button_label": "BOOK A LESSON" + } + }, + "on_demand": { + "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 playing.", + "features": "Watch at your own pace|HD video lessons|Downloadable tabs|Lifetime access", + "price": "", + "button_label": "BROWSE COURSES" + } + }, + "truefire": { + "type": "lesson_card", + "settings": { + "label": "TrueFire", + "title": "TrueFire Courses", + "description": "Full-length instructional courses available on the TrueFire platform with interactive tools.", + "features": "Professional production|Interactive tabs|Loop & slow down tools|Mobile app access", + "price": "", + "button_label": "VIEW ON TRUEFIRE" + } + } + }, + "block_order": [ + "virtual", + "on_demand", + "truefire" + ], + "settings": { + "bg_color": "#0D0D0D", + "eyebrow": "Learn from the Gristleman", + "heading": "LESSONS", + "subtext": "Level up your playing with virtual lessons, on-demand courses, and deep-dive instructional content from Greg Koch.", + "columns": "3", + "padding_top": 60, + "padding_bottom": 60 + } + } + }, + "order": [ + "gk_lessons" + ] +} diff --git a/templates/page.page-shop.json b/templates/page.page-shop.json new file mode 100644 index 00000000000..f07559f41c9 --- /dev/null +++ b/templates/page.page-shop.json @@ -0,0 +1,118 @@ +/* + * ------------------------------------------------------------ + * 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. + * ------------------------------------------------------------ + */ +{ + "sections": { + "main": { + "type": "main-page", + "disabled": true, + "settings": { + "padding_top": 28, + "padding_bottom": 28 + } + }, + "gk_shop_categories_jhEKdU": { + "type": "gk-shop-categories", + "blocks": { + "category_EnefxE": { + "type": "category", + "settings": { + "title": "NEW!", + "desc": "Latest drops and fresh arrivals.", + "cta": "Explore", + "collection": "new" + } + }, + "category_fjLqRH": { + "type": "category", + "settings": { + "title": "CDs", + "desc": "Studio albums and live records.", + "cta": "Explore", + "collection": "cds" + } + }, + "category_yXfR4W": { + "type": "category", + "settings": { + "title": "Vinyl", + "desc": "Wax. Analog. Real.", + "cta": "Explore", + "collection": "vinyl" + } + }, + "category_wCWXhd": { + "type": "category", + "settings": { + "title": "Merch", + "desc": "Wear the gristle.", + "cta": "Explore", + "collection": "merch" + } + }, + "category_ejArQB": { + "type": "category", + "settings": { + "title": "CDs", + "desc": "Studio albums and live records.", + "cta": "Explore", + "collection": "" + } + }, + "category_JDyWJn": { + "type": "category", + "settings": { + "title": "Gear", + "desc": "Pedals, pickups, tone tools.", + "cta": "Explore", + "collection": "gear" + } + }, + "category_r7z3hp": { + "type": "category", + "settings": { + "title": "Instructional Books", + "desc": "Learn from the Gristleman.", + "cta": "Explore", + "collection": "instructional-books" + } + }, + "category_RJjqz6": { + "type": "category", + "settings": { + "title": "DVDs", + "desc": "Classic guitar instruction.", + "cta": "Explore", + "collection": "dvds" + } + } + }, + "block_order": [ + "category_EnefxE", + "category_fjLqRH", + "category_yXfR4W", + "category_wCWXhd", + "category_ejArQB", + "category_JDyWJn", + "category_r7z3hp", + "category_RJjqz6" + ], + "name": "GK Shop Categories", + "settings": { + "kicker": "Browse the goods", + "heading": "The Gristle Shop", + "subtext": "<p>Records. Gear. Tools of tone. Wear the sound.</p>" + } + } + }, + "order": [ + "main", + "gk_shop_categories_jhEKdU" + ] +} diff --git a/templates/page.press.json b/templates/page.press.json new file mode 100644 index 00000000000..deff0adbd7d --- /dev/null +++ b/templates/page.press.json @@ -0,0 +1,84 @@ +/* + * ------------------------------------------------------------ + * 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. + * ------------------------------------------------------------ + */ +{ + "sections": { + "main": { + "type": "main-page", + "disabled": true, + "settings": { + "padding_top": 28, + "padding_bottom": 28 + } + }, + "gk_press_hero": { + "type": "gk-press-hero", + "settings": {} + }, + "gk_press_media_4FUTwT": { + "type": "gk-press-media", + "blocks": { + "article_card_BJTgTw": { + "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/" + } + }, + "article_card_zhyEQM": { + "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/" + } + }, + "article_card_dbxeKw": { + "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/" + } + } + }, + "block_order": [ + "article_card_BJTgTw", + "article_card_zhyEQM", + "article_card_dbxeKw" + ], + "name": "GK Press Media", + "settings": { + "video_eyebrow": "Featured Interview", + "video_heading": "Greg Koch Interview with Rick Beato", + "video_description": "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.", + "video_url": "https://www.youtube.com/watch?v=oLOg9ZLiHtg", + "articles_eyebrow": "In the Press", + "articles_heading": "Featured Coverage", + "section_gap": 64, + "padding_top": 64, + "padding_bottom": 64 + } + }, + "gk_press_quotes": { + "type": "gk-press-quotes", + "settings": {} + } + }, + "order": [ + "main", + "gk_press_hero", + "gk_press_media_4FUTwT", + "gk_press_quotes" + ] +} diff --git a/templates/product.json b/templates/product.json index 62fb0ab6af7..3f3ffb4c96c 100644 --- a/templates/product.json +++ b/templates/product.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. + * ------------------------------------------------------------ + */ { "sections": { "main": { @@ -11,7 +20,8 @@ } }, "title": { - "type": "title" + "type": "title", + "settings": {} }, "caption": { "type": "text", @@ -21,16 +31,19 @@ } }, "price": { - "type": "price" + "type": "price", + "settings": {} }, "variant_picker": { "type": "variant_picker", "settings": { - "picker_type": "button" + "picker_type": "button", + "swatch_shape": "circle" } }, "quantity_selector": { - "type": "quantity_selector" + "type": "quantity_selector", + "settings": {} }, "buy_buttons": { "type": "buy_buttons", @@ -40,7 +53,8 @@ } }, "description": { - "type": "description" + "type": "description", + "settings": {} }, "collapsible-row-0": { "type": "collapsible_tab", @@ -102,106 +116,34 @@ ], "settings": { "enable_sticky_info": true, - "gallery_layout": "stacked", + "color_scheme": "", "media_size": "large", "constrain_to_viewport": true, + "media_fit": "contain", + "gallery_layout": "stacked", "mobile_thumbnails": "hide", + "media_position": "left", + "image_zoom": "lightbox", "hide_variants": true, "enable_video_looping": false, "padding_top": 36, "padding_bottom": 12 } }, - "image-with-text": { - "type": "image-with-text", - "blocks": { - "image-with-text-0": { - "type": "heading", - "settings": { - "heading": "Image with text", - "heading_size": "h1" - } - }, - "image-with-text-1": { - "type": "text", - "settings": { - "text": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.<\/p>", - "text_style": "body" - } - } - }, - "block_order": [ - "image-with-text-0", - "image-with-text-1" - ], - "settings": { - "height": "small", - "desktop_image_width": "medium", - "layout": "text_first", - "desktop_content_position": "top", - "desktop_content_alignment": "left", - "content_layout": "no-overlap", - "color_scheme": "scheme-2", - "mobile_content_alignment": "left", - "padding_top": 36, - "padding_bottom": 36 - } - }, - "multicolumn": { - "type": "multicolumn", - "blocks": { - "column-0": { - "type": "column", - "settings": { - "title": "Free Shipping", - "text": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.<\/p>", - "link_label": "", - "link": "" - } - }, - "column-1": { - "type": "column", - "settings": { - "title": "Hassle-Free Exchanges", - "text": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.<\/p>", - "link_label": "", - "link": "" - } - } - }, - "block_order": [ - "column-0", - "column-1" - ], - "settings": { - "title": "", - "heading_size": "h1", - "image_width": "full", - "image_ratio": "adapt", - "columns_desktop": 2, - "column_alignment": "left", - "background_style": "none", - "button_label": "", - "button_link": "", - "swipe_on_mobile": false, - "color_scheme": "scheme-1", - "columns_mobile": "1", - "padding_top": 36, - "padding_bottom": 36 - } - }, "related-products": { "type": "related-products", "settings": { "heading": "You may also like", "heading_size": "h2", + "products_to_show": 4, "columns_desktop": 4, + "columns_mobile": "2", "color_scheme": "scheme-1", "image_ratio": "square", + "image_shape": "default", "show_secondary_image": true, "show_vendor": false, "show_rating": false, - "columns_mobile": "2", "padding_top": 36, "padding_bottom": 28 } @@ -209,8 +151,6 @@ }, "order": [ "main", - "image-with-text", - "multicolumn", "related-products" ] }