From 64dee59a4f622e4e71eb5bfbfdf66dbfa081bb8f Mon Sep 17 00:00:00 2001 From: trainerstravel Date: Sat, 11 Apr 2026 11:08:07 -0400 Subject: [PATCH 01/16] =?UTF-8?q?Brand=20Trainers=20Travel=20theme=20?= =?UTF-8?q?=E2=80=94=20navy/gold/off-white=20color=20scheme=20and=20fonts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Set brand color schemes (navy #1A1A2E primary, gold #C8A96E accents, off-white #F2F0EB text) across all 5 Dawn color schemes in settings_data.json and settings_schema.json - Switch fonts to Playfair Display (headings) and DM Sans (body) via Shopify font picker + Google Fonts fallback in theme.liquid - Create assets/trainers-travel-brand.css with full brand overrides: CSS variable cascades for all schemes, typography, buttons, header, footer, cards, forms, cart, nav, and hero banner - Hero banner uses CSS-only navy background with repeating SVG diamond grid in gold (no stock images), radial gradient depth layer, and glass-effect text box with gold decorative accent line Co-Authored-By: Claude Sonnet 4.6 --- assets/trainers-travel-brand.css | 437 +++++++++++++++++++++++++++++++ config/settings_data.json | 78 +++--- config/settings_schema.json | 16 +- layout/theme.liquid | 5 + 4 files changed, 489 insertions(+), 47 deletions(-) create mode 100644 assets/trainers-travel-brand.css diff --git a/assets/trainers-travel-brand.css b/assets/trainers-travel-brand.css new file mode 100644 index 00000000000..a3dc61acbd9 --- /dev/null +++ b/assets/trainers-travel-brand.css @@ -0,0 +1,437 @@ +/* ============================================================ + TRAINERS TRAVEL — BRAND STYLESHEET + Navy #1A1A2E | Gold #C8A96E | Off-white #F2F0EB + Headings: Playfair Display | Body: DM Sans + ============================================================ */ + +/* ——— Brand Tokens ——————————————————————————————————————— */ +:root { + --tt-navy: #1A1A2E; + --tt-navy-mid: #252545; + --tt-navy-dark: #0F0F1E; + --tt-gold: #C8A96E; + --tt-gold-light: #D9BF8F; + --tt-gold-dark: #A88B4E; + --tt-offwhite: #F2F0EB; + --tt-offwhite-dim: rgba(242, 240, 235, 0.65); + --tt-gold-line: rgba(200, 169, 110, 0.22); +} + +/* ——— Color Scheme Overrides ————————————————————————————— */ +/* scheme-1 (default / :root) — Navy primary */ +:root, +.color-scheme-1 { + --color-background: 26, 26, 46; + --gradient-background: #1A1A2E; + --color-foreground: 242, 240, 235; + --color-background-contrast: 37, 37, 69; + --color-shadow: 10, 10, 18; + --color-button: 200, 169, 110; + --color-button-text: 26, 26, 46; + --color-secondary-button: 26, 26, 46; + --color-secondary-button-text: 200, 169, 110; + --color-link: 200, 169, 110; + --color-badge-foreground: 26, 26, 46; + --color-badge-background: 200, 169, 110; + --color-badge-border: 200, 169, 110; + --payment-terms-background-color: rgb(26, 26, 46); +} + +/* scheme-2 — Mid-navy (used for cards) */ +.color-scheme-2 { + --color-background: 37, 37, 69; + --gradient-background: #252545; + --color-foreground: 242, 240, 235; + --color-background-contrast: 50, 50, 90; + --color-shadow: 10, 10, 18; + --color-button: 200, 169, 110; + --color-button-text: 26, 26, 46; + --color-secondary-button: 37, 37, 69; + --color-secondary-button-text: 200, 169, 110; + --color-link: 200, 169, 110; + --color-badge-foreground: 242, 240, 235; + --color-badge-background: 37, 37, 69; + --color-badge-border: 200, 169, 110; + --payment-terms-background-color: rgb(37, 37, 69); +} + +/* scheme-3 — Deep navy accent */ +.color-scheme-3 { + --color-background: 30, 30, 53; + --gradient-background: #1E1E35; + --color-foreground: 242, 240, 235; + --color-background-contrast: 45, 45, 75; + --color-shadow: 10, 10, 18; + --color-button: 200, 169, 110; + --color-button-text: 26, 26, 46; + --color-secondary-button: 30, 30, 53; + --color-secondary-button-text: 200, 169, 110; + --color-link: 200, 169, 110; + --color-badge-foreground: 242, 240, 235; + --color-badge-background: 30, 30, 53; + --color-badge-border: 200, 169, 110; + --payment-terms-background-color: rgb(30, 30, 53); +} + +/* scheme-4 — Darkest navy */ +.color-scheme-4 { + --color-background: 15, 15, 30; + --gradient-background: #0F0F1E; + --color-foreground: 242, 240, 235; + --color-background-contrast: 26, 26, 46; + --color-shadow: 0, 0, 0; + --color-button: 200, 169, 110; + --color-button-text: 15, 15, 30; + --color-secondary-button: 15, 15, 30; + --color-secondary-button-text: 200, 169, 110; + --color-link: 200, 169, 110; + --color-badge-foreground: 242, 240, 235; + --color-badge-background: 15, 15, 30; + --color-badge-border: 200, 169, 110; + --payment-terms-background-color: rgb(15, 15, 30); +} + +/* scheme-5 — Gold accent (sale badges, CTAs) */ +.color-scheme-5 { + --color-background: 200, 169, 110; + --gradient-background: #C8A96E; + --color-foreground: 26, 26, 46; + --color-background-contrast: 168, 139, 78; + --color-shadow: 10, 10, 18; + --color-button: 26, 26, 46; + --color-button-text: 200, 169, 110; + --color-secondary-button: 200, 169, 110; + --color-secondary-button-text: 26, 26, 46; + --color-link: 26, 26, 46; + --color-badge-foreground: 26, 26, 46; + --color-badge-background: 200, 169, 110; + --color-badge-border: 26, 26, 46; + --payment-terms-background-color: rgb(200, 169, 110); +} + +/* ——— Font Overrides ————————————————————————————————————— */ +/* Google Fonts take precedence over Shopify CDN fallbacks */ +:root { + --font-heading-family: 'Playfair Display', Georgia, 'Times New Roman', serif; + --font-heading-style: normal; + --font-heading-weight: 700; + --font-body-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; + --font-body-style: normal; + --font-body-weight: 400; + --font-body-weight-bold: 700; +} + +/* ——— Typography ————————————————————————————————————————— */ +h1, h2, h3, h4, h5, h6, +.h0, .h1, .h2, .h3, .h4, .h5, .hxl, .hxxl { + font-family: var(--font-heading-family); + font-weight: var(--font-heading-weight); + letter-spacing: 0.01em; +} + +/* Subtle gold accent on primary display headings */ +.banner__heading, +.section-heading { + color: rgb(var(--color-foreground)); +} + +/* ——— Buttons ———————————————————————————————————————————— */ +.button, +.button--primary { + background-color: var(--tt-gold); + color: var(--tt-navy); + border-color: var(--tt-gold); + font-family: var(--font-body-family); + font-weight: 600; + letter-spacing: 0.1em; + text-transform: uppercase; + font-size: 1.2rem; + transition: background-color 0.2s ease, border-color 0.2s ease; +} + +.button:hover, +.button--primary:hover { + background-color: var(--tt-gold-light); + border-color: var(--tt-gold-light); + color: var(--tt-navy); +} + +.button--secondary { + border-color: var(--tt-gold); + color: var(--tt-gold); + background-color: transparent; + transition: background-color 0.2s ease; +} + +.button--secondary:hover { + background-color: rgba(200, 169, 110, 0.12); + color: var(--tt-gold-light); +} + +/* ——— Links ——————————————————————————————————————————————— */ +a { + color: var(--tt-gold); +} + +a:hover { + color: var(--tt-gold-light); +} + +/* ——— Header / Navigation ————————————————————————————————— */ +.header, +.header-wrapper { + background-color: var(--tt-navy); + border-bottom: 1px solid var(--tt-gold-line); +} + +.header__heading-link, +.header__menu-item { + color: var(--tt-offwhite); +} + +.header__menu-item:hover, +.header__menu-item:focus { + color: var(--tt-gold); +} + +/* ——— Hero Banner ————————————————————————————————————————— */ +/* + Navy base with repeating gold geometric diamond grid. + The SVG tile (80×80px) contains: + - A diamond outline (stroke gold @ 12% opacity) + - Subtle gold dots at diamond center and tile corners (15% opacity) + A soft radial gradient adds depth at the viewport center. + The background sits behind .banner__media — when a store owner + adds an image via the editor, it covers the pattern naturally. +*/ +.banner { + background-color: var(--tt-navy); + background-image: + radial-gradient( + ellipse 80% 60% at 50% 50%, + rgba(37, 37, 69, 0.55) 0%, + rgba(26, 26, 46, 0) 70% + ), + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 5 L75 40 L40 75 L5 40 Z' fill='none' stroke='%23C8A96E' stroke-opacity='0.12' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='2' fill='%23C8A96E' fill-opacity='0.14'/%3E%3Ccircle cx='0' cy='0' r='2' fill='%23C8A96E' fill-opacity='0.14'/%3E%3Ccircle cx='80' cy='0' r='2' fill='%23C8A96E' fill-opacity='0.14'/%3E%3Ccircle cx='0' cy='80' r='2' fill='%23C8A96E' fill-opacity='0.14'/%3E%3Ccircle cx='80' cy='80' r='2' fill='%23C8A96E' fill-opacity='0.14'/%3E%3C/svg%3E"); + background-size: 100% 100%, 80px 80px; + background-repeat: no-repeat, repeat; +} + +/* Gold rule below hero */ +.banner { + box-shadow: 0 3px 0 0 rgba(200, 169, 110, 0.25); +} + +/* Text content box on the hero — subtle glass effect */ +.banner__box { + background-color: rgba(26, 26, 46, 0.72); + border: 1px solid var(--tt-gold-line); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); +} + +/* On desktop transparent variant, remove the box background */ +@media screen and (min-width: 750px) { + .banner--desktop-transparent .banner__box { + background-color: transparent; + border: none; + backdrop-filter: none; + -webkit-backdrop-filter: none; + } +} + +/* Gold decorative line above heading inside banner */ +.banner__box .banner__heading::before { + content: ''; + display: block; + width: 3.2rem; + height: 2px; + background-color: var(--tt-gold); + margin: 0 auto 1.2rem; + opacity: 0.85; +} + +.banner--content-align-left .banner__box .banner__heading::before, +.banner--content-align-mobile-left .banner__box .banner__heading::before { + margin-left: 0; +} + +.banner--content-align-right .banner__box .banner__heading::before, +.banner--content-align-mobile-right .banner__box .banner__heading::before { + margin-right: 0; + margin-left: auto; +} + +/* ——— Cards ——————————————————————————————————————————————— */ +.card-wrapper .card, +.card-wrapper.card { + background-color: var(--tt-navy-mid); + border-color: var(--tt-gold-line); + transition: border-color 0.2s ease, transform 0.2s ease; +} + +.card-wrapper .card:hover, +.card-wrapper.card:hover { + border-color: rgba(200, 169, 110, 0.45); +} + +.card__heading a { + color: var(--tt-offwhite); +} + +.card__heading a:hover { + color: var(--tt-gold); +} + +/* Price */ +.price__regular, +.price__sale { + color: var(--tt-offwhite); +} + +.price__sale { + color: var(--tt-gold); +} + +/* ——— Collection Banner / Hero ———————————————————————————— */ +.collection-hero { + background-color: var(--tt-navy); + border-bottom: 1px solid var(--tt-gold-line); +} + +/* ——— Forms & Inputs ————————————————————————————————————— */ +.field__input, +.select__select, +.customer .field__input { + background-color: var(--tt-navy-mid); + border-color: rgba(200, 169, 110, 0.3); + color: var(--tt-offwhite); +} + +.field__input:focus, +.select__select:focus { + border-color: var(--tt-gold); + box-shadow: 0 0 0 1px var(--tt-gold); + outline: none; +} + +.field__label, +.select__label { + color: var(--tt-offwhite-dim); + background-color: transparent; +} + +/* ——— Footer ——————————————————————————————————————————————— */ +.footer { + background-color: var(--tt-navy-dark); + border-top: 1px solid var(--tt-gold-line); + color: var(--tt-offwhite); +} + +.footer__heading { + color: var(--tt-gold); + font-family: var(--font-heading-family); + letter-spacing: 0.05em; + text-transform: uppercase; + font-size: 1.2rem; +} + +.footer a { + color: var(--tt-offwhite-dim); +} + +.footer a:hover { + color: var(--tt-gold); +} + +/* ——— Cart Drawer / Notification ————————————————————————— */ +.cart-notification, +.cart-drawer { + background-color: var(--tt-navy-mid); + border-color: var(--tt-gold-line); +} + +.cart-notification__heading, +.cart-drawer__heading { + color: var(--tt-offwhite); +} + +/* ——— Predictive Search ——————————————————————————————————— */ +.predictive-search { + background-color: var(--tt-navy-mid); + border-color: var(--tt-gold-line); +} + +.predictive-search__item:hover, +.predictive-search__item:focus { + background-color: rgba(200, 169, 110, 0.08); +} + +/* ——— Menu Drawer (mobile nav) ———————————————————————————— */ +.menu-drawer, +.menu-drawer__navigation { + background-color: var(--tt-navy); +} + +.menu-drawer__menu-item, +.menu-drawer__close-button { + color: var(--tt-offwhite); +} + +.menu-drawer__menu-item:hover { + color: var(--tt-gold); +} + +/* ——— Breadcrumbs ————————————————————————————————————————— */ +.breadcrumb, +.breadcrumb__item { + color: var(--tt-offwhite-dim); +} + +.breadcrumb__item a:hover { + color: var(--tt-gold); +} + +/* ——— Pagination ————————————————————————————————————————— */ +.pagination__item--current { + background-color: var(--tt-gold); + color: var(--tt-navy); + border-color: var(--tt-gold); +} + +.pagination__item:hover:not(.pagination__item--current) { + border-color: var(--tt-gold); + color: var(--tt-gold); +} + +/* ——— Product Page ——————————————————————————————————————— */ +.product__title { + color: var(--tt-offwhite); +} + +.product-form__submit { + background-color: var(--tt-gold); + color: var(--tt-navy); + border-color: var(--tt-gold); +} + +.product-form__submit:hover { + background-color: var(--tt-gold-light); + border-color: var(--tt-gold-light); +} + +/* Variant pills */ +.swatch-input__button--active, +.swatch-input__button:checked + label { + border-color: var(--tt-gold); + color: var(--tt-gold); +} + +/* ——— Responsive adjustments ————————————————————————————— */ +@media screen and (max-width: 749px) { + /* Tighter decorative line on mobile banners */ + .banner__box .banner__heading::before { + width: 2.4rem; + margin-bottom: 0.8rem; + } +} diff --git a/config/settings_data.json b/config/settings_data.json index 0f7a06db992..3d9d40e3b1c 100644 --- a/config/settings_data.json +++ b/config/settings_data.json @@ -6,63 +6,63 @@ "color_schemes": { "scheme-1": { "settings": { - "background": "#FFFFFF", + "background": "#1A1A2E", "background_gradient": "", - "text": "#121212", - "button": "#121212", - "button_label": "#FFFFFF", - "secondary_button_label": "#121212", - "shadow": "#121212" + "text": "#F2F0EB", + "button": "#C8A96E", + "button_label": "#1A1A2E", + "secondary_button_label": "#C8A96E", + "shadow": "#0A0A12" } }, "scheme-2": { "settings": { - "background": "#F3F3F3", + "background": "#252545", "background_gradient": "", - "text": "#121212", - "button": "#121212", - "button_label": "#F3F3F3", - "secondary_button_label": "#121212", - "shadow": "#121212" + "text": "#F2F0EB", + "button": "#C8A96E", + "button_label": "#1A1A2E", + "secondary_button_label": "#C8A96E", + "shadow": "#0A0A12" } }, "scheme-3": { "settings": { - "background": "#242833", + "background": "#1E1E35", "background_gradient": "", - "text": "#FFFFFF", - "button": "#FFFFFF", - "button_label": "#000000", - "secondary_button_label": "#FFFFFF", - "shadow": "#121212" + "text": "#F2F0EB", + "button": "#C8A96E", + "button_label": "#1A1A2E", + "secondary_button_label": "#C8A96E", + "shadow": "#0A0A12" } }, "scheme-4": { "settings": { - "background": "#121212", + "background": "#0F0F1E", "background_gradient": "", - "text": "#FFFFFF", - "button": "#FFFFFF", - "button_label": "#121212", - "secondary_button_label": "#FFFFFF", - "shadow": "#121212" + "text": "#F2F0EB", + "button": "#C8A96E", + "button_label": "#0F0F1E", + "secondary_button_label": "#C8A96E", + "shadow": "#000000" } }, "scheme-5": { "settings": { - "background": "#334FB4", + "background": "#C8A96E", "background_gradient": "", - "text": "#FFFFFF", - "button": "#FFFFFF", - "button_label": "#334FB4", - "secondary_button_label": "#FFFFFF", - "shadow": "#121212" + "text": "#1A1A2E", + "button": "#1A1A2E", + "button_label": "#C8A96E", + "secondary_button_label": "#1A1A2E", + "shadow": "#0A0A12" } } }, - "type_header_font": "assistant_n4", - "heading_scale": 100, - "type_body_font": "assistant_n4", + "type_header_font": "playfair_display_n4", + "heading_scale": 110, + "type_body_font": "dm_sans_n4", "body_scale": 100, "page_width": 1200, "spacing_sections": 0, @@ -93,8 +93,8 @@ "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": 20, "card_corner_radius": 0, "card_shadow_opacity": 0, "card_shadow_horizontal_offset": 0, @@ -104,8 +104,8 @@ "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": 20, "collection_card_corner_radius": 0, "collection_card_shadow_opacity": 0, "collection_card_shadow_horizontal_offset": 0, @@ -115,8 +115,8 @@ "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": 20, "blog_card_corner_radius": 0, "blog_card_shadow_opacity": 0, "blog_card_shadow_horizontal_offset": 0, diff --git a/config/settings_schema.json b/config/settings_schema.json index bcaab5b5d2a..30174cd22b1 100644 --- a/config/settings_schema.json +++ b/config/settings_schema.json @@ -44,7 +44,7 @@ "type": "color", "id": "background", "label": "t:settings_schema.colors.settings.background.label", - "default": "#FFFFFF" + "default": "#1A1A2E" }, { "type": "color_background", @@ -56,31 +56,31 @@ "type": "color", "id": "text", "label": "t:settings_schema.colors.settings.text.label", - "default": "#121212" + "default": "#F2F0EB" }, { "type": "color", "id": "button", "label": "t:settings_schema.colors.settings.button_background.label", - "default": "#121212" + "default": "#C8A96E" }, { "type": "color", "id": "button_label", "label": "t:settings_schema.colors.settings.button_label.label", - "default": "#FFFFFF" + "default": "#1A1A2E" }, { "type": "color", "id": "secondary_button_label", "label": "t:settings_schema.colors.settings.secondary_button_label.label", - "default": "#121212" + "default": "#C8A96E" }, { "type": "color", "id": "shadow", "label": "t:settings_schema.colors.settings.shadow.label", - "default": "#121212" + "default": "#0A0A12" } ], "role": { @@ -111,7 +111,7 @@ { "type": "font_picker", "id": "type_header_font", - "default": "assistant_n4", + "default": "playfair_display_n4", "label": "t:settings_schema.typography.settings.type_header_font.label" }, { @@ -131,7 +131,7 @@ { "type": "font_picker", "id": "type_body_font", - "default": "assistant_n4", + "default": "dm_sans_n4", "label": "t:settings_schema.typography.settings.type_body_font.label" }, { diff --git a/layout/theme.liquid b/layout/theme.liquid index 70db635823b..638f0555bf4 100644 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -15,6 +15,10 @@ {%- endunless -%} + + + + {{ page_title }} {%- if current_tags %} – tagged "{{ current_tags | join: ', ' }}"{% endif -%} @@ -256,6 +260,7 @@ {% endstyle %} {{ 'base.css' | asset_url | stylesheet_tag }} + {{ 'trainers-travel-brand.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' -%} From 18a9f3a064704354731314c195fbde662fed5fde Mon Sep 17 00:00:00 2001 From: trainerstravel <contact@trainerstravel.com> Date: Sat, 11 Apr 2026 11:55:38 -0400 Subject: [PATCH 02/16] =?UTF-8?q?Add=20TT=20Hero=20=E2=80=94=20custom=20an?= =?UTF-8?q?imated=20homepage=20hero=20section?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Create sections/tt-hero.liquid: Shopify section with schema-driven heading, subheading, eyebrow, primary + secondary CTA buttons and a full 7-layer CSS-only animated background (grid, waves, slash, rings, particles). Replaces Dawn's image-banner on the homepage. - Create assets/section-tt-hero.css: All visual design — * Diamond grid SVG tile (80×80, gold 10% opacity) * Three ambient glow blobs with 29–47s drift animations * Diagonal slash (bold stripe + hairline) with shimmer, angled -22deg * Three concentric gold ring arcs anchored right-of-center, with border-color pulse animations (no transform conflicts) * 12 staggered floating gold particles with tt-particle-rise * Staggered content entrance (eyebrow reveal, rule expand, fade-up) * CSS scroll-driven parallax on rings/waves (@supports progressive) * Full prefers-reduced-motion override — zero JS dependencies * Fluid clamp() font sizes, fully mobile responsive - Update templates/index.json: Replace image_banner with tt_hero, pre-populate with brand defaults (heading, subheading, button). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --- assets/section-tt-hero.css | 572 +++++++++++++++++++++++++++++++++++++ sections/tt-hero.liquid | 158 ++++++++++ templates/index.json | 54 +--- 3 files changed, 740 insertions(+), 44 deletions(-) create mode 100644 assets/section-tt-hero.css create mode 100644 sections/tt-hero.liquid diff --git a/assets/section-tt-hero.css b/assets/section-tt-hero.css new file mode 100644 index 00000000000..72debfa3088 --- /dev/null +++ b/assets/section-tt-hero.css @@ -0,0 +1,572 @@ +/* ================================================================ + TRAINERS TRAVEL — HERO SECTION + section-tt-hero.css + + Layer stack (back → front): + 1. Navy base (#1A1A2E) + 2. Diamond grid overlay (SVG data-uri, 80×80 tile) + 3. Ambient glow waves (3 radial-gradient blobs, slow drift) + 4. Diagonal slash (bold energy stripe + hairline) + 5. Gold ring arcs (3 concentric circles, right-side anchor) + 6. Floating particles (12 gold dots, staggered rise) + 7. Content (eyebrow → heading → sub → CTA) + ================================================================ */ + +/* ── Keyframes ─────────────────────────────────────────────────── + All durations are slow (12s–50s) for a premium feel. + Transforms only change translate / rotate / scale — never + conflict with the positioning transforms on rings. + ──────────────────────────────────────────────────────────────── */ + +/* Ambient glow blobs — gentle drift */ +@keyframes tt-wave-1 { + 0% { transform: translateX(-6%) translateY(0%) rotate(-13deg) scaleX(1); } + 45% { transform: translateX(4%) translateY(-5%) rotate(-10deg) scaleX(1.04); } + 100% { transform: translateX(-6%) translateY(0%) rotate(-13deg) scaleX(1); } +} +@keyframes tt-wave-2 { + 0% { transform: translateX(4%) translateY(5%) rotate(7deg) scaleX(1); } + 55% { transform: translateX(-4%) translateY(1%) rotate(5deg) scaleX(1.06); } + 100% { transform: translateX(4%) translateY(5%) rotate(7deg) scaleX(1); } +} +@keyframes tt-wave-3 { + 0% { transform: translateX(0%) translateY(-2%) rotate(-20deg) scaleX(1); } + 60% { transform: translateX(-5%) translateY(3%) rotate(-17deg) scaleX(1.03); } + 100% { transform: translateX(0%) translateY(-2%) rotate(-20deg) scaleX(1); } +} + +/* Gold rings — pulse border glow only (no transform, avoids conflicts) */ +@keyframes tt-ring-glow { + 0%, 100% { border-color: rgba(200, 169, 110, 0.20); } + 50% { border-color: rgba(200, 169, 110, 0.38); } +} +@keyframes tt-ring-glow-mid { + 0%, 100% { border-color: rgba(200, 169, 110, 0.14); } + 50% { border-color: rgba(200, 169, 110, 0.28); } +} +@keyframes tt-ring-accent-pulse { + 0%, 100% { + border-color: rgba(200, 169, 110, 0.50); + background-color: rgba(200, 169, 110, 0.04); + } + 50% { + border-color: rgba(200, 169, 110, 0.80); + background-color: rgba(200, 169, 110, 0.10); + } +} + +/* Diagonal slash — breathe opacity */ +@keyframes tt-slash-bold { + 0%, 100% { opacity: 0.7; } + 50% { opacity: 1; } +} +@keyframes tt-slash-hair { + 0%, 100% { opacity: 0.5; } + 50% { opacity: 1; } +} + +/* Particles — rise and fade */ +@keyframes tt-particle-rise { + 0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; } + 8% { opacity: 0.6; } + 85% { opacity: 0.2; } + 100% { transform: translateY(-130px) translateX(12px) scale(0.5); opacity: 0; } +} + +/* Content entrance — staggered fade-up */ +@keyframes tt-fadein { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } +} + +/* Gold rule expand */ +@keyframes tt-rule-expand { + from { width: 0; opacity: 0; } + to { width: 3.2rem; opacity: 1; } +} + +/* Eyebrow letter-spacing reveal */ +@keyframes tt-eyebrow-reveal { + from { opacity: 0; letter-spacing: 0.45em; } + to { opacity: 1; letter-spacing: 0.25em; } +} + +/* ── Section shell ───────────────────────────────────────────────── */ + +.tt-hero { + position: relative; + overflow: hidden; + background-color: #1A1A2E; + min-height: 88vh; + display: flex; + align-items: center; + justify-content: flex-start; +} + +@media screen and (max-width: 749px) { + .tt-hero { + min-height: 100svh; /* fills viewport on mobile */ + justify-content: center; + } +} + +/* ── Background container ────────────────────────────────────────── */ + +.tt-hero__bg { + position: absolute; + inset: 0; + overflow: hidden; + pointer-events: none; +} + +/* ── 1. Diamond grid ────────────────────────────────────────────── + SVG tile: 80×80, single diamond (5,40)→(75,40)→(40,75)→(40,5), + gold stroke at 10% opacity, gold dots at center + corners 10%. + ──────────────────────────────────────────────────────────────── */ + +.tt-hero__grid { + position: absolute; + inset: 0; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 5 L75 40 L40 75 L5 40 Z' fill='none' stroke='%23C8A96E' stroke-opacity='0.10' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='1.5' fill='%23C8A96E' fill-opacity='0.10'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill='%23C8A96E' fill-opacity='0.10'/%3E%3Ccircle cx='80' cy='0' r='1.5' fill='%23C8A96E' fill-opacity='0.10'/%3E%3Ccircle cx='0' cy='80' r='1.5' fill='%23C8A96E' fill-opacity='0.10'/%3E%3Ccircle cx='80' cy='80' r='1.5' fill='%23C8A96E' fill-opacity='0.10'/%3E%3C/svg%3E"); + background-size: 80px 80px; +} + +/* ── 2. Ambient glow waves ──────────────────────────────────────── + Three large elliptical radial-gradient blobs that drift slowly. + Combined they create a shifting depth across the navy field. + ──────────────────────────────────────────────────────────────── */ + +.tt-hero__wave { + position: absolute; + width: 180%; + left: -40%; + border-radius: 50%; + pointer-events: none; +} + +.tt-hero__wave--1 { + height: 60%; + top: -20%; + background: radial-gradient(ellipse at center, rgba(200, 169, 110, 0.08) 0%, transparent 65%); + animation: tt-wave-1 34s ease-in-out infinite; +} + +.tt-hero__wave--2 { + height: 50%; + bottom: -18%; + background: radial-gradient(ellipse at center, rgba(200, 169, 110, 0.06) 0%, transparent 60%); + animation: tt-wave-2 47s ease-in-out infinite; + animation-delay: -10s; +} + +.tt-hero__wave--3 { + height: 40%; + top: 28%; + left: -20%; + width: 130%; + background: radial-gradient(ellipse at 60% 50%, rgba(37, 37, 69, 0.70) 0%, transparent 55%); + animation: tt-wave-3 29s ease-in-out infinite; + animation-delay: -18s; +} + +/* ── 3. Diagonal slash elements ─────────────────────────────────── + Positioned right-of-center to give compositional energy without + overlapping the content column on the left. + Bold: 90px wide gradient stripe, angled at -22deg. + Hair: 2px crisp line, offset 55px right of bold, same angle. + ──────────────────────────────────────────────────────────────── */ + +.tt-hero__slash { + position: absolute; + top: -15%; + height: 130%; + transform-origin: center center; + pointer-events: none; +} + +/* Bold stripe */ +.tt-hero__slash--bold { + right: 22%; + width: 90px; + background: linear-gradient( + to bottom, + transparent 0%, + rgba(200, 169, 110, 0.05) 15%, + rgba(200, 169, 110, 0.22) 50%, + rgba(200, 169, 110, 0.05) 85%, + transparent 100% + ); + transform: rotate(-22deg); + animation: tt-slash-bold 11s ease-in-out infinite; +} + +/* Hairline */ +.tt-hero__slash--hair { + right: calc(22% + 52px); + width: 1.5px; + background: linear-gradient( + to bottom, + transparent 0%, + rgba(200, 169, 110, 0.15) 20%, + rgba(200, 169, 110, 0.55) 50%, + rgba(200, 169, 110, 0.15) 80%, + transparent 100% + ); + transform: rotate(-22deg); + animation: tt-slash-hair 11s ease-in-out infinite; + animation-delay: -1.5s; +} + +@media screen and (max-width: 749px) { + .tt-hero__slash--bold { right: 8%; } + .tt-hero__slash--hair { right: calc(8% + 52px); } +} + +/* ── 4. Gold ring arcs ──────────────────────────────────────────── + Three concentric rings anchored to the right-center of the hero, + partially off-screen. They give a sense of a compass rose or + championship target. Only border-color is animated (no + transform) so positioning stays stable. + + Sizing uses clamp() for fluid scaling. + ──────────────────────────────────────────────────────────────── */ + +/* Ring base — shared positioning */ +.tt-hero__ring { + position: absolute; + border-radius: 50%; + pointer-events: none; +} + +/* Large outer ring */ +.tt-hero__ring--outer { + --ring-size: clamp(360px, 48vw, 640px); + width: var(--ring-size); + height: var(--ring-size); + right: calc(var(--ring-size) * -0.28); /* ~28% off-screen right */ + top: 50%; + margin-top: calc(var(--ring-size) * -0.5); + border: 1.5px solid rgba(200, 169, 110, 0.20); + animation: tt-ring-glow 16s ease-in-out infinite; +} + +/* Mid ring */ +.tt-hero__ring--mid { + --ring-size: clamp(220px, 30vw, 420px); + width: var(--ring-size); + height: var(--ring-size); + right: calc(var(--ring-size) * -0.14); + top: 50%; + margin-top: calc(var(--ring-size) * -0.5); + border: 1px solid rgba(200, 169, 110, 0.14); + animation: tt-ring-glow-mid 22s ease-in-out infinite; + animation-delay: -7s; +} + +/* Small accent ring — fully on-screen, acts as a focal jewel */ +.tt-hero__ring--accent { + width: 72px; + height: 72px; + /* Position at intersection of outer ring edge and horizontal mid */ + right: calc(clamp(360px, 48vw, 640px) * 0.72 - clamp(360px, 48vw, 640px) * 0.28 - 36px); + top: 50%; + margin-top: -36px; + border: 1px solid rgba(200, 169, 110, 0.55); + background-color: rgba(200, 169, 110, 0.04); + animation: tt-ring-accent-pulse 9s ease-in-out infinite; + animation-delay: -3s; +} + +@media screen and (max-width: 749px) { + /* On mobile, anchor rings to bottom-right corner */ + .tt-hero__ring--outer { + right: calc(clamp(360px, 48vw, 640px) * -0.55); + top: auto; + bottom: calc(clamp(360px, 48vw, 640px) * -0.45); + margin-top: 0; + } + .tt-hero__ring--mid { + right: calc(clamp(220px, 30vw, 420px) * -0.40); + top: auto; + bottom: calc(clamp(220px, 30vw, 420px) * -0.32); + margin-top: 0; + } + .tt-hero__ring--accent { + display: none; /* hide detail ring on small screens */ + } +} + +/* ── 5. Floating particles ──────────────────────────────────────── + 12 gold dots, each with unique position, size, delay, and + duration. They rise slowly and fade — like embers or confetti. + ──────────────────────────────────────────────────────────────── */ + +.tt-hero__particles { + position: absolute; + inset: 0; +} + +.tt-hero__particle { + position: absolute; + border-radius: 50%; + background-color: #C8A96E; + opacity: 0; + animation: tt-particle-rise linear infinite; +} + +/* Each particle: unique left%, bottom%, size, duration, delay */ +.tt-hero__particle:nth-child(1) { left: 7%; bottom: 18%; width: 2px; height: 2px; animation-duration: 13s; animation-delay: 0s; } +.tt-hero__particle:nth-child(2) { left: 20%; bottom: 32%; width: 3px; height: 3px; animation-duration: 19s; animation-delay: -4s; } +.tt-hero__particle:nth-child(3) { left: 36%; bottom: 12%; width: 2px; height: 2px; animation-duration: 11s; animation-delay: -8s; } +.tt-hero__particle:nth-child(4) { left: 48%; bottom: 42%; width: 4px; height: 4px; animation-duration: 22s; animation-delay: -2s; } +.tt-hero__particle:nth-child(5) { left: 60%; bottom: 24%; width: 2px; height: 2px; animation-duration: 15s; animation-delay: -6s; } +.tt-hero__particle:nth-child(6) { left: 73%; bottom: 52%; width: 3px; height: 3px; animation-duration: 24s; animation-delay: -11s; } +.tt-hero__particle:nth-child(7) { left: 14%; bottom: 62%; width: 2px; height: 2px; animation-duration: 16s; animation-delay: -3s; } +.tt-hero__particle:nth-child(8) { left: 44%; bottom: 72%; width: 4px; height: 4px; animation-duration: 18s; animation-delay: -7s; } +.tt-hero__particle:nth-child(9) { left: 87%; bottom: 28%; width: 2px; height: 2px; animation-duration: 14s; animation-delay: -12s; } +.tt-hero__particle:nth-child(10) { left: 28%; bottom: 82%; width: 3px; height: 3px; animation-duration: 20s; animation-delay: -5s; } +.tt-hero__particle:nth-child(11) { left: 68%; bottom: 8%; width: 2px; height: 2px; animation-duration: 25s; animation-delay: -9s; } +.tt-hero__particle:nth-child(12) { left: 53%; bottom: 88%; width: 4px; height: 4px; animation-duration: 17s; animation-delay: -1s; } + +/* ── Content wrapper ──────────────────────────────────────────────── */ + +.tt-hero__content { + position: relative; + z-index: 10; + width: 100%; + padding-top: 11rem; + padding-bottom: 11rem; +} + +@media screen and (max-width: 749px) { + .tt-hero__content { + padding-top: 9rem; + padding-bottom: 9rem; + text-align: center; + } +} + +/* Inner column — left-anchored on desktop, centered on mobile */ +.tt-hero__inner { + max-width: 68rem; +} + +@media screen and (max-width: 749px) { + .tt-hero__inner { + max-width: 100%; + } +} + +/* ── Eyebrow ──────────────────────────────────────────────────────── */ + +.tt-hero__eyebrow { + margin: 0 0 1.4rem; + font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; + font-size: 1.1rem; + font-weight: 500; + letter-spacing: 0.25em; + text-transform: uppercase; + color: #C8A96E; + animation: tt-eyebrow-reveal 0.65s ease both; + animation-delay: 0.05s; +} + +/* ── Gold rule ────────────────────────────────────────────────────── */ + +.tt-hero__rule { + height: 2px; + background-color: #C8A96E; + margin: 0 0 2.6rem; + width: 3.2rem; /* final state; animation starts at width:0 */ + animation: tt-rule-expand 0.55s ease both; + animation-delay: 0.25s; +} + +@media screen and (max-width: 749px) { + .tt-hero__rule { + margin-left: auto; + margin-right: auto; + } +} + +/* ── Heading ──────────────────────────────────────────────────────── */ + +.tt-hero__heading { + margin: 0 0 2.2rem; + font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; + font-size: clamp(4rem, 5.8vw, 7.6rem); + font-weight: 700; + line-height: 1.06; + letter-spacing: -0.015em; + color: #F2F0EB; + animation: tt-fadein 0.85s cubic-bezier(0.22, 1, 0.36, 1) both; + animation-delay: 0.3s; +} + +/* Italicise each sentence-break naturally */ +.tt-hero__heading br + * { + font-style: italic; +} + +/* ── Subheading ───────────────────────────────────────────────────── */ + +.tt-hero__subheading { + margin: 0 0 3.6rem; + font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; + font-size: clamp(1.5rem, 1.8vw, 1.85rem); + font-weight: 400; + line-height: 1.65; + color: rgba(242, 240, 235, 0.68); + max-width: 50rem; + animation: tt-fadein 0.85s cubic-bezier(0.22, 1, 0.36, 1) both; + animation-delay: 0.48s; +} + +@media screen and (max-width: 749px) { + .tt-hero__subheading { + max-width: 100%; + } +} + +/* ── CTA group ────────────────────────────────────────────────────── */ + +.tt-hero__cta { + display: flex; + flex-wrap: wrap; + gap: 1.2rem; + animation: tt-fadein 0.85s cubic-bezier(0.22, 1, 0.36, 1) both; + animation-delay: 0.65s; +} + +@media screen and (max-width: 749px) { + .tt-hero__cta { + justify-content: center; + } +} + +/* ── Buttons ──────────────────────────────────────────────────────── */ + +.tt-hero__btn { + display: inline-flex; + align-items: center; + padding: 1.5rem 3.4rem; + font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; + font-size: 1.15rem; + font-weight: 600; + letter-spacing: 0.13em; + text-transform: uppercase; + text-decoration: none; + border: 1.5px solid transparent; + line-height: 1; + cursor: pointer; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + transform 0.18s ease; + white-space: nowrap; +} + +.tt-hero__btn:hover { + transform: translateY(-2px); +} + +/* Primary — solid gold */ +.tt-hero__btn--primary { + background-color: #C8A96E; + color: #1A1A2E; + border-color: #C8A96E; +} + +.tt-hero__btn--primary:hover { + background-color: #D9BF8F; + border-color: #D9BF8F; + color: #1A1A2E; +} + +/* Ghost — outlined gold */ +.tt-hero__btn--ghost { + background-color: transparent; + color: #C8A96E; + border-color: rgba(200, 169, 110, 0.50); +} + +.tt-hero__btn--ghost:hover { + background-color: rgba(200, 169, 110, 0.10); + border-color: #C8A96E; + color: #D9BF8F; +} + +@media screen and (max-width: 749px) { + .tt-hero__btn { + padding: 1.4rem 2.8rem; + font-size: 1.1rem; + } +} + +/* ── CSS Scroll-driven parallax (progressive enhancement) ──────────── + Supported in Chrome 115+, Firefox 110+ behind flag. + In unsupported browsers the rings are simply static — no fallback needed. + ──────────────────────────────────────────────────────────────────── */ + +@supports (animation-timeline: scroll()) { + .tt-hero__ring--outer { + animation: tt-ring-glow 16s ease-in-out infinite, tt-ring-scroll linear both; + animation-timeline: auto, scroll(root); + animation-range: auto, 0% 40%; + } + .tt-hero__wave--1 { + animation: tt-wave-1 34s ease-in-out infinite, tt-wave-scroll linear both; + animation-timeline: auto, scroll(root); + animation-range: auto, 0% 50%; + } + + @keyframes tt-ring-scroll { + from { translate: 0 0; } + to { translate: 0 -40px; } + } + @keyframes tt-wave-scroll { + from { translate: 0 0; } + to { translate: 0 60px; } + } +} + +/* ── Reduced motion ───────────────────────────────────────────────── */ + +@media (prefers-reduced-motion: reduce) { + /* Stop all background animations */ + .tt-hero__wave--1, + .tt-hero__wave--2, + .tt-hero__wave--3, + .tt-hero__ring--outer, + .tt-hero__ring--mid, + .tt-hero__ring--accent, + .tt-hero__slash--bold, + .tt-hero__slash--hair, + .tt-hero__particle { + animation: none !important; + } + + /* Show rings at their mid-animation state (visible) */ + .tt-hero__ring--outer { border-color: rgba(200, 169, 110, 0.28); } + .tt-hero__ring--mid { border-color: rgba(200, 169, 110, 0.20); } + + /* Collapse entrance animations — show content immediately */ + .tt-hero__eyebrow { + animation: none !important; + opacity: 1; + letter-spacing: 0.25em; + } + .tt-hero__rule { + animation: none !important; + width: 3.2rem; + opacity: 1; + } + .tt-hero__heading, + .tt-hero__subheading, + .tt-hero__cta { + animation: none !important; + opacity: 1; + transform: none; + } +} diff --git a/sections/tt-hero.liquid b/sections/tt-hero.liquid new file mode 100644 index 00000000000..97cd3572d5c --- /dev/null +++ b/sections/tt-hero.liquid @@ -0,0 +1,158 @@ +{% comment %} + Trainers Travel — Custom Hero Section + Premium animated hero: navy bg, gold geometric layers, CSS-only motion. + Replace Dawn's image-banner on the homepage. +{% endcomment %} + +{{ 'section-tt-hero.css' | asset_url | stylesheet_tag }} + +<section class="tt-hero" id="tt-hero-{{ section.id }}" aria-label="{{ section.settings.heading | escape }}"> + + {%- comment -%}── Visual layer stack (aria-hidden, decorative only) ──{%- endcomment -%} + <div class="tt-hero__bg" aria-hidden="true"> + + {%- comment -%}Diamond grid{%- endcomment -%} + <div class="tt-hero__grid"></div> + + {%- comment -%}Ambient glow blobs{%- endcomment -%} + <div class="tt-hero__wave tt-hero__wave--1"></div> + <div class="tt-hero__wave tt-hero__wave--2"></div> + <div class="tt-hero__wave tt-hero__wave--3"></div> + + {%- comment -%}Diagonal slash elements — bold energy stripe + hairline{%- endcomment -%} + <div class="tt-hero__slash tt-hero__slash--bold"></div> + <div class="tt-hero__slash tt-hero__slash--hair"></div> + + {%- comment -%}Gold ring arcs — large outer, mid, accent dot{%- endcomment -%} + <div class="tt-hero__ring tt-hero__ring--outer"></div> + <div class="tt-hero__ring tt-hero__ring--mid"></div> + <div class="tt-hero__ring tt-hero__ring--accent"></div> + + {%- comment -%}Floating gold particles{%- endcomment -%} + <div class="tt-hero__particles"> + {%- for i in (1..12) -%} + <span class="tt-hero__particle"></span> + {%- endfor -%} + </div> + + </div> + + {%- comment -%}── Content ──{%- endcomment -%} + <div class="tt-hero__content page-width"> + <div class="tt-hero__inner"> + + {%- if section.settings.eyebrow != blank -%} + <p class="tt-hero__eyebrow">{{ section.settings.eyebrow }}</p> + {%- endif -%} + + <div class="tt-hero__rule" aria-hidden="true"></div> + + {%- if section.settings.heading != blank -%} + <h1 class="tt-hero__heading"> + {{- section.settings.heading | newline_to_br -}} + </h1> + {%- endif -%} + + {%- if section.settings.subheading != blank -%} + <p class="tt-hero__subheading">{{ section.settings.subheading }}</p> + {%- endif -%} + + <div class="tt-hero__cta"> + {%- if section.settings.button_text != blank -%} + <a + href="{{ section.settings.button_link | default: '#' }}" + class="tt-hero__btn tt-hero__btn--primary" + > + {{- section.settings.button_text -}} + </a> + {%- endif -%} + + {%- if section.settings.secondary_button_text != blank -%} + <a + href="{{ section.settings.secondary_button_link | default: '#' }}" + class="tt-hero__btn tt-hero__btn--ghost" + > + {{- section.settings.secondary_button_text -}} + </a> + {%- endif -%} + </div> + + </div> + </div> + +</section> + +{% schema %} +{ + "name": "TT Hero", + "tag": "section", + "class": "section", + "limit": 1, + "disabled_on": { + "groups": ["header", "footer", "aside"] + }, + "settings": [ + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow label", + "default": "Trainers Travel", + "info": "Small text above the heading. Leave blank to hide." + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "Travel smarter. Compete harder.", + "info": "Press Enter for a line break in the heading." + }, + { + "type": "textarea", + "id": "subheading", + "label": "Subheading", + "default": "Group hotel blocks for the competitive Pokémon community." + }, + { + "type": "header", + "content": "Primary button" + }, + { + "type": "text", + "id": "button_text", + "label": "Button text", + "default": "Explore Events" + }, + { + "type": "url", + "id": "button_link", + "label": "Button link" + }, + { + "type": "header", + "content": "Secondary button" + }, + { + "type": "text", + "id": "secondary_button_text", + "label": "Button text", + "info": "Leave blank to hide." + }, + { + "type": "url", + "id": "secondary_button_link", + "label": "Button link" + } + ], + "presets": [ + { + "name": "TT Hero", + "settings": { + "eyebrow": "Trainers Travel", + "heading": "Travel smarter. Compete harder.", + "subheading": "Group hotel blocks for the competitive Pokémon community.", + "button_text": "Explore Events" + } + } + ] +} +{% endschema %} diff --git a/templates/index.json b/templates/index.json index 92d10b71ece..e42c476e61c 100644 --- a/templates/index.json +++ b/templates/index.json @@ -1,49 +1,15 @@ { "sections": { - "image_banner": { - "type": "image-banner", - "blocks": { - "heading": { - "type": "heading", - "settings": { - "heading": "Image banner", - "heading_size": "h0" - } - }, - "text": { - "type": "text", - "settings": { - "text": "Give customers details about the banner image(s) or content on the template.", - "text_style": "body" - } - }, - "button": { - "type": "buttons", - "settings": { - "button_label_1": "Shop all", - "button_link_1": "shopify://collections/all", - "button_style_secondary_1": true, - "button_label_2": "", - "button_link_2": "", - "button_style_secondary_2": false - } - } - }, - "block_order": [ - "heading", - "text", - "button" - ], + "tt_hero": { + "type": "tt-hero", "settings": { - "image_overlay_opacity": 40, - "image_height": "large", - "desktop_content_position": "bottom-center", - "show_text_box": false, - "desktop_content_alignment": "center", - "color_scheme": "scheme-3", - "mobile_content_alignment": "center", - "stack_images_on_mobile": false, - "show_text_below": false + "eyebrow": "Trainers Travel", + "heading": "Travel smarter. Compete harder.", + "subheading": "Group hotel blocks for the competitive Pokémon community.", + "button_text": "Explore Events", + "button_link": "", + "secondary_button_text": "", + "secondary_button_link": "" } }, "rich_text": { @@ -200,7 +166,7 @@ } }, "order": [ - "image_banner", + "tt_hero", "rich_text", "featured_collection", "collage", From 7ea31f2ca67fb464a4ee21ac4b18a73ce5107916 Mon Sep 17 00:00:00 2001 From: trainerstravel <contact@trainerstravel.com> Date: Sat, 11 Apr 2026 16:46:54 -0400 Subject: [PATCH 03/16] Add Why Trainers Travel editorial page template MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Create templates/page.why-trainers-travel.json: custom page template that uses the tt-why section exclusively. Assign this template to a Shopify page at /pages/why-trainers-travel in the admin. - Create sections/tt-why.liquid: eight-zone editorial layout — (1) Hook: oversized opening with staggered '$289 → $387' price reveal (2) Who We Are: sticky 2-col grid with founder attribution (3) Pull Quote: full off-white breakout, 4.8rem italic Playfair (4) How It Works: 3 steps with 10rem decorative gold numerals (5) Three Pillars: staggered left/right/center max-width columns with Roman numeral markers (6) Indianapolis: city name at 14rem italic gold — campaign poster moment — with event roadmap (NAIC, Worlds) (7) Founder Note: letter format, gold left border, italic sign-off (8) Contact: large italic email link with animated gold underline Schema: founder_name, contact_email, cta_text, cta_link — editable from Shopify customizer without touching code. IntersectionObserver scroll-reveal with 6-tier stagger delays. prefers-reduced-motion: reveals all content immediately. - Create assets/section-tt-why.css: full layout and visual system — alternating navy/off-white zone backgrounds, Playfair Display headings, DM Sans body, clamp() fluid type from mobile to desktop, staggered [data-reveal] CSS transitions, decorative diagonal slash echoing the hero, sticky about-left column, pillar stagger via margin-left/auto, 'Indianapolis.' at clamp(6rem, 12vw, 14rem), hover-animated email underline, all zones mobile responsive. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --- assets/section-tt-why.css | 761 ++++++++++++++++++++++++ sections/tt-why.liquid | 326 ++++++++++ templates/page.why-trainers-travel.json | 14 + 3 files changed, 1101 insertions(+) create mode 100644 assets/section-tt-why.css create mode 100644 sections/tt-why.liquid create mode 100644 templates/page.why-trainers-travel.json diff --git a/assets/section-tt-why.css b/assets/section-tt-why.css new file mode 100644 index 00000000000..a904f175e57 --- /dev/null +++ b/assets/section-tt-why.css @@ -0,0 +1,761 @@ +/* ================================================================ + TRAINERS TRAVEL — WHY PAGE + section-tt-why.css + + Editorial magazine layout. Eight distinct content zones alternate + between dark (navy) and light (off-white) backgrounds to create + visual rhythm. Scroll-reveal via IntersectionObserver + CSS + transitions. All fonts via Google Fonts / CSS vars from brand file. + + Zone backgrounds: + Hook #1A1A2E dark navy + About #1E1E35 deep navy + Quote #F2F0EB off-white + Process #1A1A2E dark navy + Pillars #F2F0EB off-white + Event #0F0F1E darkest navy + Founder #252545 mid navy + Contact #0F0F1E darkest navy + ================================================================ */ + +/* ── Scroll-reveal ───────────────────────────────────────────────── + All [data-reveal] elements start invisible + shifted down. + IntersectionObserver (in tt-why.liquid) adds .is-revealed. + data-reveal-delay 1–6 maps to staggered transition-delay. + ──────────────────────────────────────────────────────────────── */ + +.tt-why [data-reveal] { + opacity: 0; + transform: translateY(28px); + transition: + opacity 0.70s cubic-bezier(0.22, 1, 0.36, 1), + transform 0.70s cubic-bezier(0.22, 1, 0.36, 1); +} +.tt-why [data-reveal].is-revealed { + opacity: 1; + transform: none; +} +.tt-why [data-reveal-delay="1"] { transition-delay: 0.09s; } +.tt-why [data-reveal-delay="2"] { transition-delay: 0.18s; } +.tt-why [data-reveal-delay="3"] { transition-delay: 0.27s; } +.tt-why [data-reveal-delay="4"] { transition-delay: 0.36s; } +.tt-why [data-reveal-delay="5"] { transition-delay: 0.45s; } +.tt-why [data-reveal-delay="6"] { transition-delay: 0.54s; } + +@media (prefers-reduced-motion: reduce) { + .tt-why [data-reveal] { + opacity: 1; + transform: none; + transition: none; + } +} + +/* ── Shared utilities ──────────────────────────────────────────────── */ + +/* Eyebrow — small spaced caps label, gold on dark */ +.tt-why__eyebrow { + display: block; + margin: 0 0 1.6rem; + font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; + font-size: 1.1rem; + font-weight: 500; + letter-spacing: 0.26em; + text-transform: uppercase; + color: #C8A96E; +} + +/* Eyebrow on off-white sections */ +.tt-why__eyebrow--on-light { + color: #A88B4E; +} + +/* Section headings — Playfair, large, on dark */ +.tt-why__section-heading { + margin: 0; + font-family: 'Playfair Display', Georgia, serif; + font-size: clamp(3rem, 4.2vw, 5.2rem); + font-weight: 700; + line-height: 1.10; + letter-spacing: -0.01em; + color: #F2F0EB; +} + +/* Section heading variant for off-white zones */ +.tt-why__section-heading--dark { + color: #1A1A2E; +} + +/* Section padding (shared across zones) */ +.tt-why__hook, +.tt-why__about, +.tt-why__quote, +.tt-why__process, +.tt-why__pillars, +.tt-why__event, +.tt-why__founder, +.tt-why__contact { + position: relative; + overflow: hidden; +} + +/* ── 1. HOOK ───────────────────────────────────────────────────────── + Navy. Huge opening statement. Staggered price reveal. + Gold diagonal slash echoes the hero section. + ──────────────────────────────────────────────────────────────── */ + +.tt-why__hook { + background-color: #1A1A2E; + padding: 12rem 0 10rem; +} + +@media screen and (max-width: 749px) { + .tt-why__hook { + padding: 8rem 0 7rem; + } +} + +.tt-why__hook-inner { + max-width: 82rem; +} + +.tt-why__hook-heading { + margin: 0 0 4rem; + font-family: 'Playfair Display', Georgia, serif; + font-size: clamp(4.4rem, 7vw, 9rem); + font-weight: 700; + line-height: 1.05; + letter-spacing: -0.02em; + color: #F2F0EB; +} + +.tt-why__hook-heading em { + font-style: italic; + color: rgba(242, 240, 235, 0.75); +} + +/* Sequential pain lines — each reveals slightly after the previous */ +.tt-why__hook-sequence { + margin-bottom: 4rem; + border-left: 2px solid rgba(200, 169, 110, 0.30); + padding-left: 2.4rem; +} + +.tt-why__hook-line { + margin: 0 0 0.6rem; + font-family: 'DM Sans', sans-serif; + font-size: clamp(1.8rem, 2.4vw, 2.4rem); + font-weight: 400; + color: rgba(242, 240, 235, 0.62); + letter-spacing: 0.01em; +} + +/* The final punchy line — bigger, navy text gets gold treatment */ +.tt-why__hook-line--punch { + margin-top: 1rem; + font-size: clamp(2.2rem, 3vw, 3rem); + font-weight: 600; + color: #F2F0EB; +} + +.tt-why__hook-line--punch strong { + color: #C8A96E; + font-weight: 700; +} + +.tt-why__hook-closer { + margin: 0; + font-family: 'DM Sans', sans-serif; + font-size: clamp(1.5rem, 1.9vw, 1.9rem); + line-height: 1.7; + color: rgba(242, 240, 235, 0.60); + max-width: 64rem; +} + +.tt-why__hook-closer em { + color: rgba(242, 240, 235, 0.85); + font-style: italic; +} + +/* Decorative slash — echoes hero brand element */ +.tt-why__hook-slash { + position: absolute; + top: -10%; + right: 18%; + width: 80px; + height: 130%; + background: linear-gradient( + to bottom, + transparent, + rgba(200, 169, 110, 0.08) 20%, + rgba(200, 169, 110, 0.20) 50%, + rgba(200, 169, 110, 0.08) 80%, + transparent + ); + transform: rotate(-22deg); + pointer-events: none; +} + +.tt-why__hook-slash--hair { + right: calc(18% + 48px); + width: 1.5px; + background: linear-gradient( + to bottom, + transparent, + rgba(200, 169, 110, 0.35) 50%, + transparent + ); +} + +@media screen and (max-width: 749px) { + .tt-why__hook-slash { display: none; } +} + +/* ── 2. WHO WE ARE ──────────────────────────────────────────────────── + Deep navy. Two-column: heading left, body right. + ──────────────────────────────────────────────────────────────── */ + +.tt-why__about { + background-color: #1E1E35; + padding: 10rem 0; + border-top: 1px solid rgba(200, 169, 110, 0.12); +} + +@media screen and (max-width: 749px) { + .tt-why__about { padding: 7rem 0; } +} + +.tt-why__about-grid { + display: grid; + grid-template-columns: 2fr 3fr; + gap: 6rem; + align-items: start; +} + +@media screen and (max-width: 899px) { + .tt-why__about-grid { + grid-template-columns: 1fr; + gap: 4rem; + } +} + +.tt-why__about-left { + position: sticky; + top: 8rem; +} + +@media screen and (max-width: 899px) { + .tt-why__about-left { position: static; } +} + +.tt-why__about-right p { + margin: 0 0 2rem; + font-family: 'DM Sans', sans-serif; + font-size: clamp(1.5rem, 1.7vw, 1.75rem); + line-height: 1.72; + color: rgba(242, 240, 235, 0.72); +} + +.tt-why__about-right p:last-child { + margin-bottom: 0; +} + +.tt-why__about-right strong { + color: #F2F0EB; + font-weight: 600; +} + +/* Tagline — mini pull quote treatment */ +.tt-why__about-tagline { + margin-top: 3rem !important; + font-family: 'Playfair Display', Georgia, serif !important; + font-style: italic; + font-size: clamp(1.8rem, 2.2vw, 2.2rem) !important; + color: #C8A96E !important; + line-height: 1.4 !important; +} + +/* ── 3. PULL QUOTE ──────────────────────────────────────────────────── + Off-white background. Huge italic Playfair. Gold rule above+below. + ──────────────────────────────────────────────────────────────── */ + +.tt-why__quote { + background-color: #F2F0EB; + padding: 9rem 0; + border-top: 1px solid rgba(26, 26, 46, 0.08); +} + +@media screen and (max-width: 749px) { + .tt-why__quote { padding: 6rem 0; } +} + +.tt-why__quote-rule { + width: 4rem; + height: 2px; + background-color: #C8A96E; + margin: 0 auto 4rem; +} + +.tt-why__blockquote { + margin: 0; + text-align: center; +} + +.tt-why__blockquote p { + font-family: 'Playfair Display', Georgia, serif; + font-size: clamp(2.4rem, 4vw, 4.8rem); + font-style: italic; + font-weight: 400; + line-height: 1.22; + letter-spacing: -0.01em; + color: #1A1A2E; + max-width: 96rem; + margin: 0 auto 4rem; +} + +/* ── 4. HOW IT WORKS ────────────────────────────────────────────────── + Navy. Three steps with massive gold step numbers. + Numbers are decorative and sit in their own grid column. + ──────────────────────────────────────────────────────────────── */ + +.tt-why__process { + background-color: #1A1A2E; + padding: 10rem 0; + border-top: 1px solid rgba(200, 169, 110, 0.12); +} + +@media screen and (max-width: 749px) { + .tt-why__process { padding: 7rem 0; } +} + +.tt-why__process-header { + margin-bottom: 7rem; +} + +.tt-why__steps { + display: flex; + flex-direction: column; + gap: 0; +} + +.tt-why__step { + display: grid; + grid-template-columns: 16rem 1fr; + gap: 4rem; + padding: 5rem 0; + border-top: 1px solid rgba(200, 169, 110, 0.18); + align-items: start; +} + +.tt-why__step:last-child { + border-bottom: 1px solid rgba(200, 169, 110, 0.18); +} + +@media screen and (max-width: 749px) { + .tt-why__step { + grid-template-columns: 1fr; + gap: 1.6rem; + padding: 4rem 0; + } +} + +/* Big decorative step number */ +.tt-why__step-num { + font-family: 'Playfair Display', Georgia, serif; + font-size: clamp(6rem, 9vw, 10rem); + font-weight: 700; + color: #C8A96E; + opacity: 0.22; + line-height: 0.9; + letter-spacing: -0.03em; + padding-top: 0.4rem; + /* Allow number to visually bleed left of its column */ + margin-left: -1rem; +} + +@media screen and (max-width: 749px) { + .tt-why__step-num { + font-size: 5rem; + opacity: 0.18; + margin-left: 0; + } +} + +.tt-why__step-title { + margin: 0 0 1.4rem; + font-family: 'Playfair Display', Georgia, serif; + font-size: clamp(2.2rem, 2.8vw, 3rem); + font-weight: 700; + color: #F2F0EB; + line-height: 1.15; +} + +.tt-why__step-body p { + margin: 0; + font-family: 'DM Sans', sans-serif; + font-size: clamp(1.5rem, 1.7vw, 1.75rem); + line-height: 1.72; + color: rgba(242, 240, 235, 0.68); +} + +.tt-why__process-cta { + margin-top: 7rem; + display: flex; +} + +/* Shared button */ +.tt-why__btn { + display: inline-flex; + align-items: center; + padding: 1.5rem 3.6rem; + font-family: 'DM Sans', sans-serif; + font-size: 1.15rem; + font-weight: 600; + letter-spacing: 0.13em; + text-transform: uppercase; + text-decoration: none; + background-color: #C8A96E; + color: #1A1A2E; + border: 1.5px solid #C8A96E; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + transform 0.18s ease; + white-space: nowrap; +} + +.tt-why__btn:hover { + background-color: #D9BF8F; + border-color: #D9BF8F; + color: #1A1A2E; + transform: translateY(-2px); +} + +/* ── 5. THREE PILLARS ───────────────────────────────────────────────── + Off-white. Staggered layout: pillar 1 left, pillar 2 right, + pillar 3 centered. Roman numerals as large decorative markers. + ──────────────────────────────────────────────────────────────── */ + +.tt-why__pillars { + background-color: #F2F0EB; + padding: 10rem 0; + border-top: 1px solid rgba(26, 26, 46, 0.08); +} + +@media screen and (max-width: 749px) { + .tt-why__pillars { padding: 7rem 0; } +} + +.tt-why__pillars-header { + margin-bottom: 7rem; +} + +.tt-why__pillars-list { + display: flex; + flex-direction: column; + gap: 0; +} + +/* Each pillar: roman numeral + body in a 2-col grid */ +.tt-why__pillar { + display: grid; + grid-template-columns: 10rem 1fr; + gap: 3.5rem; + padding: 5rem 0; + border-top: 1px solid rgba(26, 26, 46, 0.12); + max-width: 88rem; + align-items: start; +} + +.tt-why__pillar:last-child { + border-bottom: 1px solid rgba(26, 26, 46, 0.12); +} + +/* Staggered horizontal positions */ +.tt-why__pillar--1 { margin-left: 0; margin-right: auto; } +.tt-why__pillar--2 { margin-left: auto; margin-right: 0; } +.tt-why__pillar--3 { margin-left: auto; margin-right: auto; } + +@media screen and (max-width: 749px) { + .tt-why__pillar { + grid-template-columns: 1fr; + gap: 1.6rem; + max-width: 100%; + margin-left: 0 !important; + margin-right: 0 !important; + padding: 4rem 0; + } +} + +/* Roman numeral */ +.tt-why__pillar-num { + font-family: 'Playfair Display', Georgia, serif; + font-size: clamp(5rem, 7vw, 8rem); + font-weight: 700; + color: #1A1A2E; + opacity: 0.10; + line-height: 0.9; + letter-spacing: -0.02em; + margin-left: -0.5rem; +} + +@media screen and (max-width: 749px) { + .tt-why__pillar-num { font-size: 4rem; margin-left: 0; } +} + +.tt-why__pillar-title { + margin: 0 0 1.6rem; + font-family: 'Playfair Display', Georgia, serif; + font-size: clamp(2.2rem, 2.8vw, 3rem); + font-weight: 700; + color: #1A1A2E; + line-height: 1.12; +} + +.tt-why__pillar-body p { + margin: 0; + font-family: 'DM Sans', sans-serif; + font-size: clamp(1.5rem, 1.7vw, 1.75rem); + line-height: 1.72; + color: rgba(26, 26, 46, 0.72); +} + +/* ── 6. INDIANAPOLIS ────────────────────────────────────────────────── + Darkest navy. Campaign-poster typography. "Indianapolis." at + enormous scale — a magazine-worthy typographic moment. + ──────────────────────────────────────────────────────────────── */ + +.tt-why__event { + background-color: #0F0F1E; + padding: 12rem 0 10rem; + border-top: 1px solid rgba(200, 169, 110, 0.10); +} + +@media screen and (max-width: 749px) { + .tt-why__event { padding: 8rem 0 7rem; } +} + +.tt-why__event-inner { + max-width: 100rem; +} + +/* The city name — huge typographic anchor */ +.tt-why__event-city { + margin: 0 0 1rem; + font-family: 'Playfair Display', Georgia, serif; + font-size: clamp(6rem, 12vw, 14rem); + font-style: italic; + font-weight: 700; + color: #C8A96E; + line-height: 0.95; + letter-spacing: -0.03em; + /* Allow it to run wide — it's a display moment */ +} + +@media screen and (max-width: 749px) { + .tt-why__event-city { font-size: clamp(5rem, 16vw, 9rem); } +} + +/* Bold statement below city name */ +.tt-why__event-statement { + margin: 0 0 3rem; + font-family: 'Playfair Display', Georgia, serif; + font-size: clamp(2rem, 3vw, 3.4rem); + font-weight: 700; + color: #F2F0EB; + line-height: 1.2; + max-width: 68rem; +} + +.tt-why__event-body { + margin: 0 0 5rem; + font-family: 'DM Sans', sans-serif; + font-size: clamp(1.5rem, 1.7vw, 1.75rem); + line-height: 1.72; + color: rgba(242, 240, 235, 0.65); + max-width: 64rem; +} + +.tt-why__event-next { + padding: 3.5rem 0 0; + border-top: 1px solid rgba(200, 169, 110, 0.18); + display: flex; + align-items: baseline; + gap: 3rem; + flex-wrap: wrap; +} + +.tt-why__event-next-label { + font-family: 'DM Sans', sans-serif; + font-size: 1.1rem; + font-weight: 500; + letter-spacing: 0.24em; + text-transform: uppercase; + color: #C8A96E; + white-space: nowrap; +} + +.tt-why__event-roadmap { + margin: 0; + font-family: 'Playfair Display', Georgia, serif; + font-size: clamp(1.8rem, 2.4vw, 2.6rem); + font-style: italic; + color: #F2F0EB; + line-height: 1.3; +} + +@media screen and (max-width: 749px) { + .tt-why__event-next { flex-direction: column; gap: 1.2rem; } +} + +/* ── 7. FOUNDER NOTE ────────────────────────────────────────────────── + Mid navy. Letter format with gold left border. + Personal voice. Italic Playfair for the sign-off line. + ──────────────────────────────────────────────────────────────── */ + +.tt-why__founder { + background-color: #252545; + padding: 10rem 0; + border-top: 1px solid rgba(200, 169, 110, 0.12); +} + +@media screen and (max-width: 749px) { + .tt-why__founder { padding: 7rem 0; } +} + +.tt-why__founder-inner { + max-width: 80rem; +} + +/* The letter body */ +.tt-why__founder-letter { + margin: 3.5rem 0 0; + padding-left: 3rem; + border-left: 2px solid rgba(200, 169, 110, 0.35); +} + +.tt-why__founder-letter p { + margin: 0 0 2rem; + font-family: 'DM Sans', sans-serif; + font-size: clamp(1.5rem, 1.7vw, 1.75rem); + line-height: 1.80; + color: rgba(242, 240, 235, 0.72); +} + +.tt-why__founder-letter p:last-child { + margin-bottom: 0; +} + +/* The "Let me handle it." closing line */ +.tt-why__founder-sign { + font-family: 'Playfair Display', Georgia, serif !important; + font-style: italic; + font-size: clamp(1.9rem, 2.4vw, 2.4rem) !important; + color: #F2F0EB !important; + font-weight: 400; +} + +/* Founder signature — em-dash + name + title */ +.tt-why__founder-sig { + display: block; + margin-top: 4rem; + padding-top: 3.5rem; + border-top: 1px solid rgba(200, 169, 110, 0.20); + font-family: 'Playfair Display', Georgia, serif; + font-style: italic; + font-size: clamp(2rem, 2.6vw, 2.8rem); + color: #C8A96E; + line-height: 1.2; +} + +.tt-why__founder-sig span { + display: block; + font-family: 'DM Sans', sans-serif; + font-style: normal; + font-size: 1.1rem; + font-weight: 500; + letter-spacing: 0.22em; + text-transform: uppercase; + color: rgba(242, 240, 235, 0.45); + margin-top: 0.6rem; +} + +/* ── 8. CONTACT ─────────────────────────────────────────────────────── + Darkest navy. Minimal. Email address as a large italic link + with a sliding gold underline on hover. + ──────────────────────────────────────────────────────────────── */ + +.tt-why__contact { + background-color: #0F0F1E; + padding: 12rem 0; + border-top: 1px solid rgba(200, 169, 110, 0.10); +} + +@media screen and (max-width: 749px) { + .tt-why__contact { padding: 8rem 0; } +} + +.tt-why__contact-inner { + max-width: 72rem; +} + +.tt-why__contact-heading { + margin: 0 0 2rem; + font-family: 'Playfair Display', Georgia, serif; + font-size: clamp(3rem, 4.2vw, 5.2rem); + font-weight: 700; + line-height: 1.1; + color: #F2F0EB; +} + +.tt-why__contact-sub { + margin: 0 0 4rem; + font-family: 'DM Sans', sans-serif; + font-size: clamp(1.5rem, 1.7vw, 1.75rem); + line-height: 1.72; + color: rgba(242, 240, 235, 0.60); + max-width: 56rem; +} + +/* Large italic email link with hover underline animation */ +.tt-why__contact-email { + display: inline-block; + font-family: 'Playfair Display', Georgia, serif; + font-style: italic; + font-size: clamp(2rem, 3.2vw, 3.8rem); + font-weight: 400; + color: #C8A96E; + text-decoration: none; + position: relative; + line-height: 1.2; + transition: color 0.2s ease; +} + +.tt-why__contact-email::after { + content: ''; + position: absolute; + bottom: -3px; + left: 0; + width: 0; + height: 1px; + background-color: #C8A96E; + transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1); +} + +.tt-why__contact-email:hover { + color: #D9BF8F; +} + +.tt-why__contact-email:hover::after { + width: 100%; +} + +/* ── Dawn page-width override within tt-why ─────────────────────────── + The standard .page-width has horizontal padding. Within tt-why zones + we rely on that inherited padding — this just resets any margin + issues from the outer section shell. + ──────────────────────────────────────────────────────────────── */ + +.tt-why .page-width { + position: relative; + z-index: 1; +} diff --git a/sections/tt-why.liquid b/sections/tt-why.liquid new file mode 100644 index 00000000000..ac24cf63000 --- /dev/null +++ b/sections/tt-why.liquid @@ -0,0 +1,326 @@ +{% comment %} + Trainers Travel — "Why Trainers Travel" editorial page section + File: sections/tt-why.liquid + + To use: create a Shopify page in the admin, set template to + "page.why-trainers-travel". All editorial content lives here. +{% endcomment %} + +{{ 'section-tt-why.css' | asset_url | stylesheet_tag }} + +<div class="tt-why"> + + {%- comment -%}═══════════════════════════════════════════════════════ + 1. HOOK — The pain of tournament hotel booking + ═══════════════════════════════════════════════════════{%- endcomment -%} + <div class="tt-why__hook"> + <div class="page-width"> + <div class="tt-why__hook-inner"> + <p class="tt-why__eyebrow" data-reveal>The reality of tournament travel</p> + <h1 class="tt-why__hook-heading" data-reveal data-reveal-delay="1"> + You found a hotel.<br> + <em>$289 looked fine.</em> + </h1> + <div class="tt-why__hook-sequence"> + <p class="tt-why__hook-line" data-reveal data-reveal-delay="2">Then the taxes loaded.</p> + <p class="tt-why__hook-line" data-reveal data-reveal-delay="3">Then the resort fee.</p> + <p class="tt-why__hook-line" data-reveal data-reveal-delay="4">Then parking.</p> + <p class="tt-why__hook-line tt-why__hook-line--punch" data-reveal data-reveal-delay="5"> + Now it's <strong>$387.</strong> + </p> + </div> + <p class="tt-why__hook-closer" data-reveal data-reveal-delay="6"> + You're 47% through checkout and fully committed.<br> + <em>We built Trainers Travel because this is fixable.</em> + </p> + </div> + </div> + <div class="tt-why__hook-slash" aria-hidden="true"></div> + <div class="tt-why__hook-slash tt-why__hook-slash--hair" aria-hidden="true"></div> + </div> + + {%- comment -%}═══════════════════════════════════════════════════════ + 2. WHO WE ARE + ═══════════════════════════════════════════════════════{%- endcomment -%} + <div class="tt-why__about"> + <div class="page-width"> + <div class="tt-why__about-grid"> + <div class="tt-why__about-left" data-reveal> + <p class="tt-why__eyebrow">Who we are</p> + <h2 class="tt-why__section-heading">Players who got tired of the scramble.</h2> + </div> + <div class="tt-why__about-right"> + <p data-reveal data-reveal-delay="1"> + We're Trainers Travel — a wholesale hotel booking service built by competitive + Pokémon TCG players who've been navigating tournament travel for years. + </p> + <p data-reveal data-reveal-delay="2"> + Our founder <strong>{{ section.settings.founder_name }}</strong> has flown across + the country for Regionals, Internationals, and Worlds. He knows the tax surprise + in real time, the last-minute scramble, the trade-off between price and proximity. + He built this to fix it — not as a side project. As a proper service. + </p> + <p data-reveal data-reveal-delay="3"> + We negotiate group room blocks directly with hotels, price everything transparently, + and only book properties with genuine tournament-proximity value. + </p> + <p class="tt-why__about-tagline" data-reveal data-reveal-delay="4"> + This is the service we wished existed. + </p> + </div> + </div> + </div> + </div> + + {%- comment -%}═══════════════════════════════════════════════════════ + 3. PULL QUOTE + ═══════════════════════════════════════════════════════{%- endcomment -%} + <div class="tt-why__quote"> + <div class="page-width"> + <div class="tt-why__quote-rule" data-reveal aria-hidden="true"></div> + <blockquote class="tt-why__blockquote" data-reveal data-reveal-delay="1"> + <p>“Every price is all-in. What you see is what you pay. No surprises, no math, no commitment creep.”</p> + </blockquote> + <div class="tt-why__quote-rule" data-reveal data-reveal-delay="2" aria-hidden="true"></div> + </div> + </div> + + {%- comment -%}═══════════════════════════════════════════════════════ + 4. HOW IT WORKS + ═══════════════════════════════════════════════════════{%- endcomment -%} + <div class="tt-why__process"> + <div class="page-width"> + <div class="tt-why__process-header" data-reveal> + <p class="tt-why__eyebrow">How it works</p> + <h2 class="tt-why__section-heading">Simple. Transparent. Done.</h2> + </div> + <div class="tt-why__steps"> + + <div class="tt-why__step" data-reveal data-reveal-delay="1"> + <div class="tt-why__step-num" aria-hidden="true">01</div> + <div class="tt-why__step-body"> + <h3 class="tt-why__step-title">We negotiate the block.</h3> + <p>We go directly to the property's sales team and secure a group room block at a negotiated rate. This is the part that takes time and relationships — we handle it so you don't have to.</p> + </div> + </div> + + <div class="tt-why__step" data-reveal data-reveal-delay="2"> + <div class="tt-why__step-num" aria-hidden="true">02</div> + <div class="tt-why__step-body"> + <h3 class="tt-why__step-title">We price everything in.</h3> + <p>Taxes. Resort fees. Every line item that the hotel industry buries in checkout — we calculate it all upfront and absorb it into the listed price. The number you see is the number you pay.</p> + </div> + </div> + + <div class="tt-why__step" data-reveal data-reveal-delay="3"> + <div class="tt-why__step-num" aria-hidden="true">03</div> + <div class="tt-why__step-body"> + <h3 class="tt-why__step-title">You book in one click.</h3> + <p>After purchase we collect your guest details and coordinate with the hotel directly. Walk in, check in, and focus on what you actually came for.</p> + </div> + </div> + + </div> + + {%- if section.settings.cta_text != blank -%} + <div class="tt-why__process-cta" data-reveal> + <a href="{{ section.settings.cta_link | default: '/collections/all' }}" class="tt-why__btn"> + {{ section.settings.cta_text }} + </a> + </div> + {%- endif -%} + </div> + </div> + + {%- comment -%}═══════════════════════════════════════════════════════ + 5. THREE PILLARS + ═══════════════════════════════════════════════════════{%- endcomment -%} + <div class="tt-why__pillars"> + <div class="page-width"> + <div class="tt-why__pillars-header" data-reveal> + <p class="tt-why__eyebrow tt-why__eyebrow--on-light">Our standards</p> + <h2 class="tt-why__section-heading tt-why__section-heading--dark">Three things we never compromise on.</h2> + </div> + + <div class="tt-why__pillars-list"> + + <div class="tt-why__pillar tt-why__pillar--1" data-reveal data-reveal-delay="1"> + <div class="tt-why__pillar-num" aria-hidden="true">I</div> + <div class="tt-why__pillar-body"> + <h3 class="tt-why__pillar-title">Location that matters.</h3> + <p>We only book hotels with genuine venue proximity — skywalk connections, walking distance, close enough that the commute doesn't cost you energy on match day. If getting to the tournament adds fatigue, we don't book it.</p> + </div> + </div> + + <div class="tt-why__pillar tt-why__pillar--2" data-reveal data-reveal-delay="2"> + <div class="tt-why__pillar-num" aria-hidden="true">II</div> + <div class="tt-why__pillar-body"> + <h3 class="tt-why__pillar-title">Transparent pricing.</h3> + <p>All-in means all-in. We're not in the business of making the math hard. Taxes, resort fees, every charge the hotel industry buries in checkout — we surface it upfront and absorb it into the listed rate. No surprises.</p> + </div> + </div> + + <div class="tt-why__pillar tt-why__pillar--3" data-reveal data-reveal-delay="3"> + <div class="tt-why__pillar-num" aria-hidden="true">III</div> + <div class="tt-why__pillar-body"> + <h3 class="tt-why__pillar-title">Hotels worth posting about.</h3> + <p>You're going to be there for three days. The property should be worth something — clean rooms, real amenities, a lobby you'd want to meet teammates in before a feature match. We don't book embarrassing hotels.</p> + </div> + </div> + + </div> + </div> + </div> + + {%- comment -%}═══════════════════════════════════════════════════════ + 6. INDIANAPOLIS — First event + ═══════════════════════════════════════════════════════{%- endcomment -%} + <div class="tt-why__event"> + <div class="page-width"> + <div class="tt-why__event-inner"> + <p class="tt-why__eyebrow" data-reveal>Our first event</p> + <p class="tt-why__event-city" data-reveal data-reveal-delay="1">Indianapolis.</p> + <p class="tt-why__event-statement" data-reveal data-reveal-delay="2">This is us proving the model.</p> + <p class="tt-why__event-body" data-reveal data-reveal-delay="3"> + We've negotiated our first block, priced it transparently, and launched it publicly. + Whether it sells out in a day or moves slowly, we'll know exactly what players value — + and we'll use that to sharpen the offering for every event after. + </p> + <div class="tt-why__event-next" data-reveal data-reveal-delay="4"> + <span class="tt-why__event-next-label">What comes next</span> + <p class="tt-why__event-roadmap">NAIC. Worlds. More stops coming. Indianapolis is just the first pin on the map.</p> + </div> + </div> + </div> + </div> + + {%- comment -%}═══════════════════════════════════════════════════════ + 7. FOUNDER NOTE + ═══════════════════════════════════════════════════════{%- endcomment -%} + <div class="tt-why__founder"> + <div class="page-width"> + <div class="tt-why__founder-inner" data-reveal> + <p class="tt-why__eyebrow">A note from the founder</p> + <div class="tt-why__founder-letter"> + <p>I've been to Regionals where I was 40 minutes from the venue because I waited too long to book. I've seen the checkout tax surprise in real time — found a $289 room, got to the last screen, saw $387. I've split a room four ways because nothing affordable was left within reasonable distance.</p> + <p data-reveal data-reveal-delay="1">That experience is fixable. Hotels do group blocks all the time — for conferences, for sports teams, for corporate offsites. They just don't advertise it. Getting access requires knowing who to call and being willing to negotiate.</p> + <p data-reveal data-reveal-delay="2">I did the work. Trainers Travel is the result. I'm not a booking platform. I'm a player who handles the part of tournament travel that nobody wants to deal with.</p> + <p class="tt-why__founder-sign" data-reveal data-reveal-delay="3">Let me handle it.</p> + </div> + <p class="tt-why__founder-sig" data-reveal data-reveal-delay="4"> + — {{ section.settings.founder_name }}<span>Founder, Trainers Travel</span> + </p> + </div> + </div> + </div> + + {%- comment -%}═══════════════════════════════════════════════════════ + 8. CONTACT + ═══════════════════════════════════════════════════════{%- endcomment -%} + <div class="tt-why__contact"> + <div class="page-width"> + <div class="tt-why__contact-inner" data-reveal> + <p class="tt-why__eyebrow">Still have questions?</p> + <h2 class="tt-why__contact-heading">We’re reachable.</h2> + <p class="tt-why__contact-sub"> + We're not a faceless booking engine. If something doesn't make sense or you want + to know more before you commit, reach out directly. + </p> + <a + href="mailto:{{ section.settings.contact_email }}" + class="tt-why__contact-email" + data-reveal + data-reveal-delay="1" + > + {{ section.settings.contact_email }} + </a> + </div> + </div> + </div> + +</div> + +<script> + // Scroll-reveal: IntersectionObserver adds .is-revealed to [data-reveal] elements. + // Delay tiers (0–6) map to CSS transition-delay via data-reveal-delay attribute. + // Falls back to immediate visibility if IntersectionObserver is unsupported. + (function () { + var els = document.querySelectorAll('.tt-why [data-reveal]'); + if (!els.length) return; + + if (!('IntersectionObserver' in window)) { + els.forEach(function (el) { el.classList.add('is-revealed'); }); + return; + } + + var io = new IntersectionObserver( + function (entries) { + entries.forEach(function (entry) { + if (entry.isIntersecting) { + entry.target.classList.add('is-revealed'); + io.unobserve(entry.target); + } + }); + }, + { threshold: 0.12, rootMargin: '0px 0px -48px 0px' } + ); + + els.forEach(function (el) { io.observe(el); }); + })(); +</script> + +{% schema %} +{ + "name": "Why Trainers Travel", + "tag": "div", + "class": "section", + "limit": 1, + "disabled_on": { + "groups": ["header", "footer", "aside"] + }, + "settings": [ + { + "type": "header", + "content": "Founder & contact" + }, + { + "type": "text", + "id": "founder_name", + "label": "Founder name", + "default": "Connor Bray" + }, + { + "type": "text", + "id": "contact_email", + "label": "Contact email", + "default": "contact@trainerstravel.com" + }, + { + "type": "header", + "content": "Call to action" + }, + { + "type": "text", + "id": "cta_text", + "label": "CTA button text", + "default": "Book a Room", + "info": "Appears after the 'How It Works' steps. Leave blank to hide." + }, + { + "type": "url", + "id": "cta_link", + "label": "CTA button link" + } + ], + "presets": [ + { + "name": "Why Trainers Travel", + "settings": { + "founder_name": "Connor Bray", + "contact_email": "contact@trainerstravel.com", + "cta_text": "Book a Room" + } + } + ] +} +{% endschema %} diff --git a/templates/page.why-trainers-travel.json b/templates/page.why-trainers-travel.json new file mode 100644 index 00000000000..17d0479de84 --- /dev/null +++ b/templates/page.why-trainers-travel.json @@ -0,0 +1,14 @@ +{ + "sections": { + "tt_why": { + "type": "tt-why", + "settings": { + "founder_name": "Connor Bray", + "contact_email": "contact@trainerstravel.com", + "cta_text": "Book a Room", + "cta_link": "" + } + } + }, + "order": ["tt_why"] +} From 527bfa164aed34f4f9392d428c6fc2e4c91d96d0 Mon Sep 17 00:00:00 2001 From: trainerstravel <contact@trainerstravel.com> Date: Sat, 11 Apr 2026 17:03:46 -0400 Subject: [PATCH 04/16] Make Why page founder note anonymous MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace all instances of "Connor Bray" with team-attributed copy: - About section: "Our founder Connor Bray has flown..." → "Our team has flown..." with pronoun shift from he/his to we/our - Founder note closing: "Let me handle it." → "We've got it handled." - Signature: "— Connor Bray / Founder, Trainers Travel" → "— The Trainers Travel Team" - Schema default and preset for founder_name updated to match Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --- sections/tt-why.liquid | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/sections/tt-why.liquid b/sections/tt-why.liquid index ac24cf63000..a8f73c9682f 100644 --- a/sections/tt-why.liquid +++ b/sections/tt-why.liquid @@ -55,10 +55,10 @@ Pokémon TCG players who've been navigating tournament travel for years. </p> <p data-reveal data-reveal-delay="2"> - Our founder <strong>{{ section.settings.founder_name }}</strong> has flown across - the country for Regionals, Internationals, and Worlds. He knows the tax surprise - in real time, the last-minute scramble, the trade-off between price and proximity. - He built this to fix it — not as a side project. As a proper service. + Our team has flown across the country for Regionals, Internationals, and Worlds. + We know the tax surprise in real time, the last-minute scramble, the trade-off + between price and proximity. We built this to fix it — not as a side project. + As a proper service. </p> <p data-reveal data-reveal-delay="3"> We negotiate group room blocks directly with hotels, price everything transparently, @@ -205,10 +205,10 @@ <p>I've been to Regionals where I was 40 minutes from the venue because I waited too long to book. I've seen the checkout tax surprise in real time — found a $289 room, got to the last screen, saw $387. I've split a room four ways because nothing affordable was left within reasonable distance.</p> <p data-reveal data-reveal-delay="1">That experience is fixable. Hotels do group blocks all the time — for conferences, for sports teams, for corporate offsites. They just don't advertise it. Getting access requires knowing who to call and being willing to negotiate.</p> <p data-reveal data-reveal-delay="2">I did the work. Trainers Travel is the result. I'm not a booking platform. I'm a player who handles the part of tournament travel that nobody wants to deal with.</p> - <p class="tt-why__founder-sign" data-reveal data-reveal-delay="3">Let me handle it.</p> + <p class="tt-why__founder-sign" data-reveal data-reveal-delay="3">We’ve got it handled.</p> </div> <p class="tt-why__founder-sig" data-reveal data-reveal-delay="4"> - — {{ section.settings.founder_name }}<span>Founder, Trainers Travel</span> + — The Trainers Travel Team </p> </div> </div> @@ -287,7 +287,7 @@ "type": "text", "id": "founder_name", "label": "Founder name", - "default": "Connor Bray" + "default": "The Trainers Travel Team" }, { "type": "text", @@ -316,7 +316,7 @@ { "name": "Why Trainers Travel", "settings": { - "founder_name": "Connor Bray", + "founder_name": "The Trainers Travel Team", "contact_email": "contact@trainerstravel.com", "cta_text": "Book a Room" } From 51b913b927ea39fbab8430167e6ee5391b6f5fe1 Mon Sep 17 00:00:00 2001 From: trainerstravel <contact@trainerstravel.com> Date: Sat, 11 Apr 2026 17:08:20 -0400 Subject: [PATCH 05/16] Convert all first-person singular to plural in tt-why section Founder note section: - Eyebrow: "A note from the founder" -> "A note from our team" - Para 1: I've/I was/I waited/I've seen/I've split -> We've/we were/we waited/We've seen/We've split - Para 3: "I did the work" -> "We did the work", "I'm not a booking platform" -> "We're not a booking platform", "I'm a player who handles" -> "We're players who handle" Schema cleanup: - Remove orphaned founder_name field (no longer rendered in template) - Rename schema header "Founder & contact" -> "Contact" - Remove founder_name from preset settings block Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --- sections/tt-why.liquid | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/sections/tt-why.liquid b/sections/tt-why.liquid index a8f73c9682f..41d2eb07fd9 100644 --- a/sections/tt-why.liquid +++ b/sections/tt-why.liquid @@ -200,11 +200,11 @@ <div class="tt-why__founder"> <div class="page-width"> <div class="tt-why__founder-inner" data-reveal> - <p class="tt-why__eyebrow">A note from the founder</p> + <p class="tt-why__eyebrow">A note from our team</p> <div class="tt-why__founder-letter"> - <p>I've been to Regionals where I was 40 minutes from the venue because I waited too long to book. I've seen the checkout tax surprise in real time — found a $289 room, got to the last screen, saw $387. I've split a room four ways because nothing affordable was left within reasonable distance.</p> + <p>We've been to Regionals where we were 40 minutes from the venue because we waited too long to book. We've seen the checkout tax surprise in real time — found a $289 room, got to the last screen, saw $387. We've split a room four ways because nothing affordable was left within reasonable distance.</p> <p data-reveal data-reveal-delay="1">That experience is fixable. Hotels do group blocks all the time — for conferences, for sports teams, for corporate offsites. They just don't advertise it. Getting access requires knowing who to call and being willing to negotiate.</p> - <p data-reveal data-reveal-delay="2">I did the work. Trainers Travel is the result. I'm not a booking platform. I'm a player who handles the part of tournament travel that nobody wants to deal with.</p> + <p data-reveal data-reveal-delay="2">We did the work. Trainers Travel is the result. We're not a booking platform. We're players who handle the part of tournament travel that nobody wants to deal with.</p> <p class="tt-why__founder-sign" data-reveal data-reveal-delay="3">We’ve got it handled.</p> </div> <p class="tt-why__founder-sig" data-reveal data-reveal-delay="4"> @@ -281,13 +281,7 @@ "settings": [ { "type": "header", - "content": "Founder & contact" - }, - { - "type": "text", - "id": "founder_name", - "label": "Founder name", - "default": "The Trainers Travel Team" + "content": "Contact" }, { "type": "text", @@ -316,7 +310,6 @@ { "name": "Why Trainers Travel", "settings": { - "founder_name": "The Trainers Travel Team", "contact_email": "contact@trainerstravel.com", "cta_text": "Book a Room" } From e148d1900b361634f0345ab338eeb85123e5b3fa Mon Sep 17 00:00:00 2001 From: trainerstravel <contact@trainerstravel.com> Date: Wed, 22 Apr 2026 10:10:06 -0400 Subject: [PATCH 06/16] =?UTF-8?q?Redesign=20homepage=20=E2=80=94=20replace?= =?UTF-8?q?=20campaign=20sections=20with=20minimal=20one-page=20layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Removes tt-hero, tt-why, and the why-trainers-travel page template entirely. Replaces them with tt-home: a single vertical flow (header → event → price comparison → buy cards → FAQ → footer) built for community-tool utility rather than a polished sales funnel. No scroll reveals, no animations, no decorative type — just the deal. Header hides Dawn's nav on the homepage; header-group simplified (no announcement bar, no country/language selectors, no sticky). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --- assets/section-tt-hero.css | 572 ------------------ assets/section-tt-home.css | 544 +++++++++++++++++ assets/section-tt-why.css | 761 ------------------------ sections/header-group.json | 30 +- sections/tt-hero.liquid | 158 ----- sections/tt-home.liquid | 451 ++++++++++++++ sections/tt-why.liquid | 319 ---------- templates/index.json | 183 +----- templates/page.why-trainers-travel.json | 14 - 9 files changed, 1015 insertions(+), 2017 deletions(-) delete mode 100644 assets/section-tt-hero.css create mode 100644 assets/section-tt-home.css delete mode 100644 assets/section-tt-why.css delete mode 100644 sections/tt-hero.liquid create mode 100644 sections/tt-home.liquid delete mode 100644 sections/tt-why.liquid delete mode 100644 templates/page.why-trainers-travel.json diff --git a/assets/section-tt-hero.css b/assets/section-tt-hero.css deleted file mode 100644 index 72debfa3088..00000000000 --- a/assets/section-tt-hero.css +++ /dev/null @@ -1,572 +0,0 @@ -/* ================================================================ - TRAINERS TRAVEL — HERO SECTION - section-tt-hero.css - - Layer stack (back → front): - 1. Navy base (#1A1A2E) - 2. Diamond grid overlay (SVG data-uri, 80×80 tile) - 3. Ambient glow waves (3 radial-gradient blobs, slow drift) - 4. Diagonal slash (bold energy stripe + hairline) - 5. Gold ring arcs (3 concentric circles, right-side anchor) - 6. Floating particles (12 gold dots, staggered rise) - 7. Content (eyebrow → heading → sub → CTA) - ================================================================ */ - -/* ── Keyframes ─────────────────────────────────────────────────── - All durations are slow (12s–50s) for a premium feel. - Transforms only change translate / rotate / scale — never - conflict with the positioning transforms on rings. - ──────────────────────────────────────────────────────────────── */ - -/* Ambient glow blobs — gentle drift */ -@keyframes tt-wave-1 { - 0% { transform: translateX(-6%) translateY(0%) rotate(-13deg) scaleX(1); } - 45% { transform: translateX(4%) translateY(-5%) rotate(-10deg) scaleX(1.04); } - 100% { transform: translateX(-6%) translateY(0%) rotate(-13deg) scaleX(1); } -} -@keyframes tt-wave-2 { - 0% { transform: translateX(4%) translateY(5%) rotate(7deg) scaleX(1); } - 55% { transform: translateX(-4%) translateY(1%) rotate(5deg) scaleX(1.06); } - 100% { transform: translateX(4%) translateY(5%) rotate(7deg) scaleX(1); } -} -@keyframes tt-wave-3 { - 0% { transform: translateX(0%) translateY(-2%) rotate(-20deg) scaleX(1); } - 60% { transform: translateX(-5%) translateY(3%) rotate(-17deg) scaleX(1.03); } - 100% { transform: translateX(0%) translateY(-2%) rotate(-20deg) scaleX(1); } -} - -/* Gold rings — pulse border glow only (no transform, avoids conflicts) */ -@keyframes tt-ring-glow { - 0%, 100% { border-color: rgba(200, 169, 110, 0.20); } - 50% { border-color: rgba(200, 169, 110, 0.38); } -} -@keyframes tt-ring-glow-mid { - 0%, 100% { border-color: rgba(200, 169, 110, 0.14); } - 50% { border-color: rgba(200, 169, 110, 0.28); } -} -@keyframes tt-ring-accent-pulse { - 0%, 100% { - border-color: rgba(200, 169, 110, 0.50); - background-color: rgba(200, 169, 110, 0.04); - } - 50% { - border-color: rgba(200, 169, 110, 0.80); - background-color: rgba(200, 169, 110, 0.10); - } -} - -/* Diagonal slash — breathe opacity */ -@keyframes tt-slash-bold { - 0%, 100% { opacity: 0.7; } - 50% { opacity: 1; } -} -@keyframes tt-slash-hair { - 0%, 100% { opacity: 0.5; } - 50% { opacity: 1; } -} - -/* Particles — rise and fade */ -@keyframes tt-particle-rise { - 0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; } - 8% { opacity: 0.6; } - 85% { opacity: 0.2; } - 100% { transform: translateY(-130px) translateX(12px) scale(0.5); opacity: 0; } -} - -/* Content entrance — staggered fade-up */ -@keyframes tt-fadein { - from { opacity: 0; transform: translateY(20px); } - to { opacity: 1; transform: translateY(0); } -} - -/* Gold rule expand */ -@keyframes tt-rule-expand { - from { width: 0; opacity: 0; } - to { width: 3.2rem; opacity: 1; } -} - -/* Eyebrow letter-spacing reveal */ -@keyframes tt-eyebrow-reveal { - from { opacity: 0; letter-spacing: 0.45em; } - to { opacity: 1; letter-spacing: 0.25em; } -} - -/* ── Section shell ───────────────────────────────────────────────── */ - -.tt-hero { - position: relative; - overflow: hidden; - background-color: #1A1A2E; - min-height: 88vh; - display: flex; - align-items: center; - justify-content: flex-start; -} - -@media screen and (max-width: 749px) { - .tt-hero { - min-height: 100svh; /* fills viewport on mobile */ - justify-content: center; - } -} - -/* ── Background container ────────────────────────────────────────── */ - -.tt-hero__bg { - position: absolute; - inset: 0; - overflow: hidden; - pointer-events: none; -} - -/* ── 1. Diamond grid ────────────────────────────────────────────── - SVG tile: 80×80, single diamond (5,40)→(75,40)→(40,75)→(40,5), - gold stroke at 10% opacity, gold dots at center + corners 10%. - ──────────────────────────────────────────────────────────────── */ - -.tt-hero__grid { - position: absolute; - inset: 0; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 5 L75 40 L40 75 L5 40 Z' fill='none' stroke='%23C8A96E' stroke-opacity='0.10' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='1.5' fill='%23C8A96E' fill-opacity='0.10'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill='%23C8A96E' fill-opacity='0.10'/%3E%3Ccircle cx='80' cy='0' r='1.5' fill='%23C8A96E' fill-opacity='0.10'/%3E%3Ccircle cx='0' cy='80' r='1.5' fill='%23C8A96E' fill-opacity='0.10'/%3E%3Ccircle cx='80' cy='80' r='1.5' fill='%23C8A96E' fill-opacity='0.10'/%3E%3C/svg%3E"); - background-size: 80px 80px; -} - -/* ── 2. Ambient glow waves ──────────────────────────────────────── - Three large elliptical radial-gradient blobs that drift slowly. - Combined they create a shifting depth across the navy field. - ──────────────────────────────────────────────────────────────── */ - -.tt-hero__wave { - position: absolute; - width: 180%; - left: -40%; - border-radius: 50%; - pointer-events: none; -} - -.tt-hero__wave--1 { - height: 60%; - top: -20%; - background: radial-gradient(ellipse at center, rgba(200, 169, 110, 0.08) 0%, transparent 65%); - animation: tt-wave-1 34s ease-in-out infinite; -} - -.tt-hero__wave--2 { - height: 50%; - bottom: -18%; - background: radial-gradient(ellipse at center, rgba(200, 169, 110, 0.06) 0%, transparent 60%); - animation: tt-wave-2 47s ease-in-out infinite; - animation-delay: -10s; -} - -.tt-hero__wave--3 { - height: 40%; - top: 28%; - left: -20%; - width: 130%; - background: radial-gradient(ellipse at 60% 50%, rgba(37, 37, 69, 0.70) 0%, transparent 55%); - animation: tt-wave-3 29s ease-in-out infinite; - animation-delay: -18s; -} - -/* ── 3. Diagonal slash elements ─────────────────────────────────── - Positioned right-of-center to give compositional energy without - overlapping the content column on the left. - Bold: 90px wide gradient stripe, angled at -22deg. - Hair: 2px crisp line, offset 55px right of bold, same angle. - ──────────────────────────────────────────────────────────────── */ - -.tt-hero__slash { - position: absolute; - top: -15%; - height: 130%; - transform-origin: center center; - pointer-events: none; -} - -/* Bold stripe */ -.tt-hero__slash--bold { - right: 22%; - width: 90px; - background: linear-gradient( - to bottom, - transparent 0%, - rgba(200, 169, 110, 0.05) 15%, - rgba(200, 169, 110, 0.22) 50%, - rgba(200, 169, 110, 0.05) 85%, - transparent 100% - ); - transform: rotate(-22deg); - animation: tt-slash-bold 11s ease-in-out infinite; -} - -/* Hairline */ -.tt-hero__slash--hair { - right: calc(22% + 52px); - width: 1.5px; - background: linear-gradient( - to bottom, - transparent 0%, - rgba(200, 169, 110, 0.15) 20%, - rgba(200, 169, 110, 0.55) 50%, - rgba(200, 169, 110, 0.15) 80%, - transparent 100% - ); - transform: rotate(-22deg); - animation: tt-slash-hair 11s ease-in-out infinite; - animation-delay: -1.5s; -} - -@media screen and (max-width: 749px) { - .tt-hero__slash--bold { right: 8%; } - .tt-hero__slash--hair { right: calc(8% + 52px); } -} - -/* ── 4. Gold ring arcs ──────────────────────────────────────────── - Three concentric rings anchored to the right-center of the hero, - partially off-screen. They give a sense of a compass rose or - championship target. Only border-color is animated (no - transform) so positioning stays stable. - - Sizing uses clamp() for fluid scaling. - ──────────────────────────────────────────────────────────────── */ - -/* Ring base — shared positioning */ -.tt-hero__ring { - position: absolute; - border-radius: 50%; - pointer-events: none; -} - -/* Large outer ring */ -.tt-hero__ring--outer { - --ring-size: clamp(360px, 48vw, 640px); - width: var(--ring-size); - height: var(--ring-size); - right: calc(var(--ring-size) * -0.28); /* ~28% off-screen right */ - top: 50%; - margin-top: calc(var(--ring-size) * -0.5); - border: 1.5px solid rgba(200, 169, 110, 0.20); - animation: tt-ring-glow 16s ease-in-out infinite; -} - -/* Mid ring */ -.tt-hero__ring--mid { - --ring-size: clamp(220px, 30vw, 420px); - width: var(--ring-size); - height: var(--ring-size); - right: calc(var(--ring-size) * -0.14); - top: 50%; - margin-top: calc(var(--ring-size) * -0.5); - border: 1px solid rgba(200, 169, 110, 0.14); - animation: tt-ring-glow-mid 22s ease-in-out infinite; - animation-delay: -7s; -} - -/* Small accent ring — fully on-screen, acts as a focal jewel */ -.tt-hero__ring--accent { - width: 72px; - height: 72px; - /* Position at intersection of outer ring edge and horizontal mid */ - right: calc(clamp(360px, 48vw, 640px) * 0.72 - clamp(360px, 48vw, 640px) * 0.28 - 36px); - top: 50%; - margin-top: -36px; - border: 1px solid rgba(200, 169, 110, 0.55); - background-color: rgba(200, 169, 110, 0.04); - animation: tt-ring-accent-pulse 9s ease-in-out infinite; - animation-delay: -3s; -} - -@media screen and (max-width: 749px) { - /* On mobile, anchor rings to bottom-right corner */ - .tt-hero__ring--outer { - right: calc(clamp(360px, 48vw, 640px) * -0.55); - top: auto; - bottom: calc(clamp(360px, 48vw, 640px) * -0.45); - margin-top: 0; - } - .tt-hero__ring--mid { - right: calc(clamp(220px, 30vw, 420px) * -0.40); - top: auto; - bottom: calc(clamp(220px, 30vw, 420px) * -0.32); - margin-top: 0; - } - .tt-hero__ring--accent { - display: none; /* hide detail ring on small screens */ - } -} - -/* ── 5. Floating particles ──────────────────────────────────────── - 12 gold dots, each with unique position, size, delay, and - duration. They rise slowly and fade — like embers or confetti. - ──────────────────────────────────────────────────────────────── */ - -.tt-hero__particles { - position: absolute; - inset: 0; -} - -.tt-hero__particle { - position: absolute; - border-radius: 50%; - background-color: #C8A96E; - opacity: 0; - animation: tt-particle-rise linear infinite; -} - -/* Each particle: unique left%, bottom%, size, duration, delay */ -.tt-hero__particle:nth-child(1) { left: 7%; bottom: 18%; width: 2px; height: 2px; animation-duration: 13s; animation-delay: 0s; } -.tt-hero__particle:nth-child(2) { left: 20%; bottom: 32%; width: 3px; height: 3px; animation-duration: 19s; animation-delay: -4s; } -.tt-hero__particle:nth-child(3) { left: 36%; bottom: 12%; width: 2px; height: 2px; animation-duration: 11s; animation-delay: -8s; } -.tt-hero__particle:nth-child(4) { left: 48%; bottom: 42%; width: 4px; height: 4px; animation-duration: 22s; animation-delay: -2s; } -.tt-hero__particle:nth-child(5) { left: 60%; bottom: 24%; width: 2px; height: 2px; animation-duration: 15s; animation-delay: -6s; } -.tt-hero__particle:nth-child(6) { left: 73%; bottom: 52%; width: 3px; height: 3px; animation-duration: 24s; animation-delay: -11s; } -.tt-hero__particle:nth-child(7) { left: 14%; bottom: 62%; width: 2px; height: 2px; animation-duration: 16s; animation-delay: -3s; } -.tt-hero__particle:nth-child(8) { left: 44%; bottom: 72%; width: 4px; height: 4px; animation-duration: 18s; animation-delay: -7s; } -.tt-hero__particle:nth-child(9) { left: 87%; bottom: 28%; width: 2px; height: 2px; animation-duration: 14s; animation-delay: -12s; } -.tt-hero__particle:nth-child(10) { left: 28%; bottom: 82%; width: 3px; height: 3px; animation-duration: 20s; animation-delay: -5s; } -.tt-hero__particle:nth-child(11) { left: 68%; bottom: 8%; width: 2px; height: 2px; animation-duration: 25s; animation-delay: -9s; } -.tt-hero__particle:nth-child(12) { left: 53%; bottom: 88%; width: 4px; height: 4px; animation-duration: 17s; animation-delay: -1s; } - -/* ── Content wrapper ──────────────────────────────────────────────── */ - -.tt-hero__content { - position: relative; - z-index: 10; - width: 100%; - padding-top: 11rem; - padding-bottom: 11rem; -} - -@media screen and (max-width: 749px) { - .tt-hero__content { - padding-top: 9rem; - padding-bottom: 9rem; - text-align: center; - } -} - -/* Inner column — left-anchored on desktop, centered on mobile */ -.tt-hero__inner { - max-width: 68rem; -} - -@media screen and (max-width: 749px) { - .tt-hero__inner { - max-width: 100%; - } -} - -/* ── Eyebrow ──────────────────────────────────────────────────────── */ - -.tt-hero__eyebrow { - margin: 0 0 1.4rem; - font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; - font-size: 1.1rem; - font-weight: 500; - letter-spacing: 0.25em; - text-transform: uppercase; - color: #C8A96E; - animation: tt-eyebrow-reveal 0.65s ease both; - animation-delay: 0.05s; -} - -/* ── Gold rule ────────────────────────────────────────────────────── */ - -.tt-hero__rule { - height: 2px; - background-color: #C8A96E; - margin: 0 0 2.6rem; - width: 3.2rem; /* final state; animation starts at width:0 */ - animation: tt-rule-expand 0.55s ease both; - animation-delay: 0.25s; -} - -@media screen and (max-width: 749px) { - .tt-hero__rule { - margin-left: auto; - margin-right: auto; - } -} - -/* ── Heading ──────────────────────────────────────────────────────── */ - -.tt-hero__heading { - margin: 0 0 2.2rem; - font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; - font-size: clamp(4rem, 5.8vw, 7.6rem); - font-weight: 700; - line-height: 1.06; - letter-spacing: -0.015em; - color: #F2F0EB; - animation: tt-fadein 0.85s cubic-bezier(0.22, 1, 0.36, 1) both; - animation-delay: 0.3s; -} - -/* Italicise each sentence-break naturally */ -.tt-hero__heading br + * { - font-style: italic; -} - -/* ── Subheading ───────────────────────────────────────────────────── */ - -.tt-hero__subheading { - margin: 0 0 3.6rem; - font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; - font-size: clamp(1.5rem, 1.8vw, 1.85rem); - font-weight: 400; - line-height: 1.65; - color: rgba(242, 240, 235, 0.68); - max-width: 50rem; - animation: tt-fadein 0.85s cubic-bezier(0.22, 1, 0.36, 1) both; - animation-delay: 0.48s; -} - -@media screen and (max-width: 749px) { - .tt-hero__subheading { - max-width: 100%; - } -} - -/* ── CTA group ────────────────────────────────────────────────────── */ - -.tt-hero__cta { - display: flex; - flex-wrap: wrap; - gap: 1.2rem; - animation: tt-fadein 0.85s cubic-bezier(0.22, 1, 0.36, 1) both; - animation-delay: 0.65s; -} - -@media screen and (max-width: 749px) { - .tt-hero__cta { - justify-content: center; - } -} - -/* ── Buttons ──────────────────────────────────────────────────────── */ - -.tt-hero__btn { - display: inline-flex; - align-items: center; - padding: 1.5rem 3.4rem; - font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; - font-size: 1.15rem; - font-weight: 600; - letter-spacing: 0.13em; - text-transform: uppercase; - text-decoration: none; - border: 1.5px solid transparent; - line-height: 1; - cursor: pointer; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - color 0.2s ease, - transform 0.18s ease; - white-space: nowrap; -} - -.tt-hero__btn:hover { - transform: translateY(-2px); -} - -/* Primary — solid gold */ -.tt-hero__btn--primary { - background-color: #C8A96E; - color: #1A1A2E; - border-color: #C8A96E; -} - -.tt-hero__btn--primary:hover { - background-color: #D9BF8F; - border-color: #D9BF8F; - color: #1A1A2E; -} - -/* Ghost — outlined gold */ -.tt-hero__btn--ghost { - background-color: transparent; - color: #C8A96E; - border-color: rgba(200, 169, 110, 0.50); -} - -.tt-hero__btn--ghost:hover { - background-color: rgba(200, 169, 110, 0.10); - border-color: #C8A96E; - color: #D9BF8F; -} - -@media screen and (max-width: 749px) { - .tt-hero__btn { - padding: 1.4rem 2.8rem; - font-size: 1.1rem; - } -} - -/* ── CSS Scroll-driven parallax (progressive enhancement) ──────────── - Supported in Chrome 115+, Firefox 110+ behind flag. - In unsupported browsers the rings are simply static — no fallback needed. - ──────────────────────────────────────────────────────────────────── */ - -@supports (animation-timeline: scroll()) { - .tt-hero__ring--outer { - animation: tt-ring-glow 16s ease-in-out infinite, tt-ring-scroll linear both; - animation-timeline: auto, scroll(root); - animation-range: auto, 0% 40%; - } - .tt-hero__wave--1 { - animation: tt-wave-1 34s ease-in-out infinite, tt-wave-scroll linear both; - animation-timeline: auto, scroll(root); - animation-range: auto, 0% 50%; - } - - @keyframes tt-ring-scroll { - from { translate: 0 0; } - to { translate: 0 -40px; } - } - @keyframes tt-wave-scroll { - from { translate: 0 0; } - to { translate: 0 60px; } - } -} - -/* ── Reduced motion ───────────────────────────────────────────────── */ - -@media (prefers-reduced-motion: reduce) { - /* Stop all background animations */ - .tt-hero__wave--1, - .tt-hero__wave--2, - .tt-hero__wave--3, - .tt-hero__ring--outer, - .tt-hero__ring--mid, - .tt-hero__ring--accent, - .tt-hero__slash--bold, - .tt-hero__slash--hair, - .tt-hero__particle { - animation: none !important; - } - - /* Show rings at their mid-animation state (visible) */ - .tt-hero__ring--outer { border-color: rgba(200, 169, 110, 0.28); } - .tt-hero__ring--mid { border-color: rgba(200, 169, 110, 0.20); } - - /* Collapse entrance animations — show content immediately */ - .tt-hero__eyebrow { - animation: none !important; - opacity: 1; - letter-spacing: 0.25em; - } - .tt-hero__rule { - animation: none !important; - width: 3.2rem; - opacity: 1; - } - .tt-hero__heading, - .tt-hero__subheading, - .tt-hero__cta { - animation: none !important; - opacity: 1; - transform: none; - } -} diff --git a/assets/section-tt-home.css b/assets/section-tt-home.css new file mode 100644 index 00000000000..ed84914a3a9 --- /dev/null +++ b/assets/section-tt-home.css @@ -0,0 +1,544 @@ +/* + * section-tt-home.css + * Trainers Travel — single-page homepage + * + * The tt-home section renders its own header, so we hide the Dawn global + * header/announcement bar on the homepage (template-index body class). + */ + +.template-index .shopify-section-group-header-group { + display: none !important; +} + +/* + * section-tt-home.css + * Trainers Travel — single-page homepage + * + * Design language: community-tool utility. Clean grid, restrained brand colors, + * no scroll reveals, no animations, no campaign typography. Spacing is generous + * so the hierarchy reads without effort. + * + * Brand tokens + * --tt-navy: #1A1A2E + * --tt-gold: #C8A96E + * --tt-off-white: #F2F0EB + */ + +/* ─── Reset & tokens ──────────────────────────────────────── */ +.tt-home { + --tt-navy: #1A1A2E; + --tt-gold: #C8A96E; + --tt-off-white: #F2F0EB; + --tt-mid: #4a4a6a; + --tt-border: #d8d4cc; + --tt-red: #c0392b; + --tt-green: #27ae60; + + --tt-max-w: 860px; + --tt-pad-h: 24px; + + font-family: inherit; + color: var(--tt-navy); + background: var(--tt-off-white); +} + +.tt-home *, +.tt-home *::before, +.tt-home *::after { + box-sizing: border-box; +} + +/* ─── Layout container ────────────────────────────────────── */ +.tt-home__container { + max-width: var(--tt-max-w); + margin: 0 auto; + padding: 0 var(--tt-pad-h); +} + +/* ─── Shared typography helpers ───────────────────────────── */ +.tt-home__eyebrow { + font-size: 0.75rem; + font-weight: 600; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--tt-gold); + margin: 0 0 0.5rem; +} + +.tt-home__section-title { + font-size: 1.15rem; + font-weight: 700; + color: var(--tt-navy); + margin: 0 0 1.25rem; + letter-spacing: -0.01em; +} + +/* ─── 1. HEADER ───────────────────────────────────────────── */ +.tt-home__header { + background: var(--tt-navy); + padding: 14px var(--tt-pad-h); +} + +.tt-home__header-inner { + max-width: var(--tt-max-w); + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + flex-wrap: wrap; +} + +.tt-home__wordmark { + font-size: 1rem; + font-weight: 700; + letter-spacing: 0.02em; + color: var(--tt-off-white); +} + +.tt-home__header-email { + font-size: 0.8rem; + color: var(--tt-gold); + text-decoration: none; + opacity: 0.85; + transition: opacity 0.15s; +} + +.tt-home__header-email:hover { + opacity: 1; +} + +/* ─── 2. EVENT BLOCK ──────────────────────────────────────── */ +.tt-home__event { + background: var(--tt-navy); + padding: 48px 0 40px; + border-bottom: 2px solid var(--tt-gold); +} + +.tt-home__event .tt-home__container { + text-align: left; +} + +.tt-home__event-name { + font-size: clamp(2rem, 5vw, 3.2rem); + font-weight: 800; + color: var(--tt-off-white); + margin: 0 0 0.4rem; + line-height: 1.1; + letter-spacing: -0.02em; +} + +.tt-home__event-dates { + font-size: 0.95rem; + color: rgba(242, 240, 235, 0.65); + margin: 0 0 1.25rem; +} + +.tt-home__hotel-line { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 8px; + font-size: 0.9rem; +} + +.tt-home__hotel-name { + color: var(--tt-gold); + font-weight: 600; +} + +.tt-home__hotel-sep { + color: rgba(242, 240, 235, 0.3); +} + +.tt-home__hotel-proximity { + color: rgba(242, 240, 235, 0.7); +} + +/* ─── 3. PRICE COMPARISON ─────────────────────────────────── */ +.tt-home__pricing { + background: var(--tt-off-white); + padding: 40px 0; + border-bottom: 1px solid var(--tt-border); +} + +.tt-home__compare { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0; + border: 1px solid var(--tt-border); + border-radius: 6px; + overflow: hidden; + margin-bottom: 1rem; +} + +@media (max-width: 560px) { + .tt-home__compare { + grid-template-columns: 1fr; + } +} + +.tt-home__compare-col { + padding: 0; +} + +.tt-home__compare-col--theirs { + border-right: 1px solid var(--tt-border); + background: #fff; +} + +@media (max-width: 560px) { + .tt-home__compare-col--theirs { + border-right: none; + border-bottom: 1px solid var(--tt-border); + } +} + +.tt-home__compare-col--ours { + background: #fff; +} + +.tt-home__compare-header { + padding: 14px 16px 12px; + border-bottom: 1px solid var(--tt-border); + background: #f7f5f1; +} + +.tt-home__compare-col--ours .tt-home__compare-header { + background: #f0ede6; +} + +.tt-home__compare-label { + display: block; + font-size: 0.78rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.07em; + color: var(--tt-navy); + margin-bottom: 2px; +} + +.tt-home__compare-note { + display: block; + font-size: 0.72rem; + color: var(--tt-mid); +} + +.tt-home__compare-list { + list-style: none; + margin: 0; + padding: 0; +} + +.tt-home__compare-item { + display: flex; + justify-content: space-between; + align-items: baseline; + gap: 8px; + padding: 11px 16px; + border-bottom: 1px solid #f0ede6; + font-size: 0.88rem; +} + +.tt-home__compare-item:last-child { + border-bottom: none; +} + +.tt-home__compare-item--highlight { + background: rgba(200, 169, 110, 0.08); +} + +.tt-home__compare-hotel { + color: var(--tt-navy); + flex: 1; + min-width: 0; +} + +.tt-home__compare-price { + font-weight: 700; + color: var(--tt-navy); + white-space: nowrap; + font-size: 0.95rem; +} + +.tt-home__compare-price--highlight { + color: var(--tt-gold); + font-size: 1.05rem; +} + +.tt-home__per-nt { + font-size: 0.72rem; + font-weight: 400; + color: var(--tt-mid); + margin-left: 2px; +} + +.tt-home__compare-price--highlight .tt-home__per-nt { + color: var(--tt-gold); + opacity: 0.75; +} + +.tt-home__pricing-footnote { + font-size: 0.78rem; + color: var(--tt-mid); + margin: 0; + line-height: 1.5; +} + +/* ─── 4. BUY SECTION ──────────────────────────────────────── */ +.tt-home__buy { + background: var(--tt-navy); + padding: 40px 0; +} + +.tt-home__buy .tt-home__section-title { + color: var(--tt-off-white); +} + +.tt-home__buy-sub { + font-size: 0.8rem; + color: rgba(242, 240, 235, 0.55); + margin: -0.75rem 0 1.5rem; + line-height: 1.5; +} + +.tt-home__cards { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; +} + +@media (max-width: 560px) { + .tt-home__cards { + grid-template-columns: 1fr; + } +} + +.tt-home__card { + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(200, 169, 110, 0.3); + border-radius: 6px; + display: flex; + flex-direction: column; + overflow: hidden; +} + +.tt-home__card--sold-out { + opacity: 0.6; +} + +.tt-home__card-body { + padding: 20px 20px 16px; + flex: 1; +} + +.tt-home__card-room-type { + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--tt-gold); + margin: 0 0 4px; +} + +.tt-home__card-name { + font-size: 0.95rem; + font-weight: 600; + color: var(--tt-off-white); + margin: 0 0 10px; + line-height: 1.3; +} + +.tt-home__card-specs { + font-size: 0.78rem; + color: rgba(242, 240, 235, 0.55); + margin: 0; + line-height: 1.5; +} + +.tt-home__card-urgency { + margin: 8px 0 0; + font-size: 0.78rem; + font-weight: 600; + color: #e8a87c; +} + +.tt-home__card-footer { + padding: 14px 20px 20px; + border-top: 1px solid rgba(255, 255, 255, 0.07); + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + flex-wrap: wrap; +} + +.tt-home__card-price { + font-size: 1.4rem; + font-weight: 800; + color: var(--tt-off-white); + margin: 0; + letter-spacing: -0.02em; +} + +/* ─── Buttons ─────────────────────────────────────────────── */ +.tt-home__btn { + display: inline-block; + padding: 10px 20px; + font-size: 0.88rem; + font-weight: 700; + border-radius: 4px; + cursor: pointer; + text-decoration: none; + border: none; + line-height: 1; + transition: background 0.15s, color 0.15s, opacity 0.15s; + white-space: nowrap; +} + +.tt-home__btn--primary { + background: var(--tt-gold); + color: var(--tt-navy); +} + +.tt-home__btn--primary:hover { + background: #d4b87c; +} + +.tt-home__btn--sold-out { + background: rgba(255, 255, 255, 0.1); + color: rgba(242, 240, 235, 0.4); + cursor: not-allowed; +} + +/* ─── 5. FAQ ──────────────────────────────────────────────── */ +.tt-home__faq { + background: var(--tt-off-white); + padding: 40px 0; + border-bottom: 1px solid var(--tt-border); +} + +.tt-home__faq-list { + margin: 0; + padding: 0; +} + +.tt-home__faq-item { + border-bottom: 1px solid var(--tt-border); +} + +.tt-home__faq-item:first-child { + border-top: 1px solid var(--tt-border); +} + +.tt-home__faq-q { + margin: 0; +} + +.tt-home__faq-btn { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 15px 0; + font-size: 0.9rem; + font-weight: 600; + color: var(--tt-navy); + background: none; + border: none; + cursor: pointer; + text-align: left; + gap: 12px; +} + +.tt-home__faq-btn:hover { + color: var(--tt-gold); +} + +/* Plus/minus icon */ +.tt-home__faq-icon { + flex-shrink: 0; + width: 16px; + height: 16px; + position: relative; +} + +.tt-home__faq-icon::before, +.tt-home__faq-icon::after { + content: ''; + position: absolute; + background: currentColor; + border-radius: 1px; + transition: transform 0.2s, opacity 0.2s; +} + +/* horizontal bar */ +.tt-home__faq-icon::before { + top: 50%; + left: 0; + right: 0; + height: 2px; + transform: translateY(-50%); +} + +/* vertical bar */ +.tt-home__faq-icon::after { + top: 0; + bottom: 0; + left: 50%; + width: 2px; + transform: translateX(-50%); +} + +/* When expanded, hide vertical bar (turns + into -) */ +.tt-home__faq-btn[aria-expanded="true"] .tt-home__faq-icon::after { + opacity: 0; + transform: translateX(-50%) rotate(90deg); +} + +.tt-home__faq-a { + padding: 0 0 16px; + font-size: 0.88rem; + color: var(--tt-mid); + line-height: 1.6; + margin: 0; +} + +/* ─── 6. FOOTER ───────────────────────────────────────────── */ +.tt-home__footer { + background: var(--tt-navy); + padding: 28px 0; +} + +.tt-home__footer-inner { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + flex-wrap: wrap; +} + +.tt-home__footer-tagline { + font-size: 0.82rem; + color: rgba(242, 240, 235, 0.45); + margin: 0; + letter-spacing: 0.01em; +} + +.tt-home__footer-links { + display: flex; + align-items: center; + gap: 16px; + flex-wrap: wrap; +} + +.tt-home__footer-link { + font-size: 0.82rem; + color: rgba(242, 240, 235, 0.6); + text-decoration: none; + transition: color 0.15s; +} + +.tt-home__footer-link:hover { + color: var(--tt-gold); +} diff --git a/assets/section-tt-why.css b/assets/section-tt-why.css deleted file mode 100644 index a904f175e57..00000000000 --- a/assets/section-tt-why.css +++ /dev/null @@ -1,761 +0,0 @@ -/* ================================================================ - TRAINERS TRAVEL — WHY PAGE - section-tt-why.css - - Editorial magazine layout. Eight distinct content zones alternate - between dark (navy) and light (off-white) backgrounds to create - visual rhythm. Scroll-reveal via IntersectionObserver + CSS - transitions. All fonts via Google Fonts / CSS vars from brand file. - - Zone backgrounds: - Hook #1A1A2E dark navy - About #1E1E35 deep navy - Quote #F2F0EB off-white - Process #1A1A2E dark navy - Pillars #F2F0EB off-white - Event #0F0F1E darkest navy - Founder #252545 mid navy - Contact #0F0F1E darkest navy - ================================================================ */ - -/* ── Scroll-reveal ───────────────────────────────────────────────── - All [data-reveal] elements start invisible + shifted down. - IntersectionObserver (in tt-why.liquid) adds .is-revealed. - data-reveal-delay 1–6 maps to staggered transition-delay. - ──────────────────────────────────────────────────────────────── */ - -.tt-why [data-reveal] { - opacity: 0; - transform: translateY(28px); - transition: - opacity 0.70s cubic-bezier(0.22, 1, 0.36, 1), - transform 0.70s cubic-bezier(0.22, 1, 0.36, 1); -} -.tt-why [data-reveal].is-revealed { - opacity: 1; - transform: none; -} -.tt-why [data-reveal-delay="1"] { transition-delay: 0.09s; } -.tt-why [data-reveal-delay="2"] { transition-delay: 0.18s; } -.tt-why [data-reveal-delay="3"] { transition-delay: 0.27s; } -.tt-why [data-reveal-delay="4"] { transition-delay: 0.36s; } -.tt-why [data-reveal-delay="5"] { transition-delay: 0.45s; } -.tt-why [data-reveal-delay="6"] { transition-delay: 0.54s; } - -@media (prefers-reduced-motion: reduce) { - .tt-why [data-reveal] { - opacity: 1; - transform: none; - transition: none; - } -} - -/* ── Shared utilities ──────────────────────────────────────────────── */ - -/* Eyebrow — small spaced caps label, gold on dark */ -.tt-why__eyebrow { - display: block; - margin: 0 0 1.6rem; - font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; - font-size: 1.1rem; - font-weight: 500; - letter-spacing: 0.26em; - text-transform: uppercase; - color: #C8A96E; -} - -/* Eyebrow on off-white sections */ -.tt-why__eyebrow--on-light { - color: #A88B4E; -} - -/* Section headings — Playfair, large, on dark */ -.tt-why__section-heading { - margin: 0; - font-family: 'Playfair Display', Georgia, serif; - font-size: clamp(3rem, 4.2vw, 5.2rem); - font-weight: 700; - line-height: 1.10; - letter-spacing: -0.01em; - color: #F2F0EB; -} - -/* Section heading variant for off-white zones */ -.tt-why__section-heading--dark { - color: #1A1A2E; -} - -/* Section padding (shared across zones) */ -.tt-why__hook, -.tt-why__about, -.tt-why__quote, -.tt-why__process, -.tt-why__pillars, -.tt-why__event, -.tt-why__founder, -.tt-why__contact { - position: relative; - overflow: hidden; -} - -/* ── 1. HOOK ───────────────────────────────────────────────────────── - Navy. Huge opening statement. Staggered price reveal. - Gold diagonal slash echoes the hero section. - ──────────────────────────────────────────────────────────────── */ - -.tt-why__hook { - background-color: #1A1A2E; - padding: 12rem 0 10rem; -} - -@media screen and (max-width: 749px) { - .tt-why__hook { - padding: 8rem 0 7rem; - } -} - -.tt-why__hook-inner { - max-width: 82rem; -} - -.tt-why__hook-heading { - margin: 0 0 4rem; - font-family: 'Playfair Display', Georgia, serif; - font-size: clamp(4.4rem, 7vw, 9rem); - font-weight: 700; - line-height: 1.05; - letter-spacing: -0.02em; - color: #F2F0EB; -} - -.tt-why__hook-heading em { - font-style: italic; - color: rgba(242, 240, 235, 0.75); -} - -/* Sequential pain lines — each reveals slightly after the previous */ -.tt-why__hook-sequence { - margin-bottom: 4rem; - border-left: 2px solid rgba(200, 169, 110, 0.30); - padding-left: 2.4rem; -} - -.tt-why__hook-line { - margin: 0 0 0.6rem; - font-family: 'DM Sans', sans-serif; - font-size: clamp(1.8rem, 2.4vw, 2.4rem); - font-weight: 400; - color: rgba(242, 240, 235, 0.62); - letter-spacing: 0.01em; -} - -/* The final punchy line — bigger, navy text gets gold treatment */ -.tt-why__hook-line--punch { - margin-top: 1rem; - font-size: clamp(2.2rem, 3vw, 3rem); - font-weight: 600; - color: #F2F0EB; -} - -.tt-why__hook-line--punch strong { - color: #C8A96E; - font-weight: 700; -} - -.tt-why__hook-closer { - margin: 0; - font-family: 'DM Sans', sans-serif; - font-size: clamp(1.5rem, 1.9vw, 1.9rem); - line-height: 1.7; - color: rgba(242, 240, 235, 0.60); - max-width: 64rem; -} - -.tt-why__hook-closer em { - color: rgba(242, 240, 235, 0.85); - font-style: italic; -} - -/* Decorative slash — echoes hero brand element */ -.tt-why__hook-slash { - position: absolute; - top: -10%; - right: 18%; - width: 80px; - height: 130%; - background: linear-gradient( - to bottom, - transparent, - rgba(200, 169, 110, 0.08) 20%, - rgba(200, 169, 110, 0.20) 50%, - rgba(200, 169, 110, 0.08) 80%, - transparent - ); - transform: rotate(-22deg); - pointer-events: none; -} - -.tt-why__hook-slash--hair { - right: calc(18% + 48px); - width: 1.5px; - background: linear-gradient( - to bottom, - transparent, - rgba(200, 169, 110, 0.35) 50%, - transparent - ); -} - -@media screen and (max-width: 749px) { - .tt-why__hook-slash { display: none; } -} - -/* ── 2. WHO WE ARE ──────────────────────────────────────────────────── - Deep navy. Two-column: heading left, body right. - ──────────────────────────────────────────────────────────────── */ - -.tt-why__about { - background-color: #1E1E35; - padding: 10rem 0; - border-top: 1px solid rgba(200, 169, 110, 0.12); -} - -@media screen and (max-width: 749px) { - .tt-why__about { padding: 7rem 0; } -} - -.tt-why__about-grid { - display: grid; - grid-template-columns: 2fr 3fr; - gap: 6rem; - align-items: start; -} - -@media screen and (max-width: 899px) { - .tt-why__about-grid { - grid-template-columns: 1fr; - gap: 4rem; - } -} - -.tt-why__about-left { - position: sticky; - top: 8rem; -} - -@media screen and (max-width: 899px) { - .tt-why__about-left { position: static; } -} - -.tt-why__about-right p { - margin: 0 0 2rem; - font-family: 'DM Sans', sans-serif; - font-size: clamp(1.5rem, 1.7vw, 1.75rem); - line-height: 1.72; - color: rgba(242, 240, 235, 0.72); -} - -.tt-why__about-right p:last-child { - margin-bottom: 0; -} - -.tt-why__about-right strong { - color: #F2F0EB; - font-weight: 600; -} - -/* Tagline — mini pull quote treatment */ -.tt-why__about-tagline { - margin-top: 3rem !important; - font-family: 'Playfair Display', Georgia, serif !important; - font-style: italic; - font-size: clamp(1.8rem, 2.2vw, 2.2rem) !important; - color: #C8A96E !important; - line-height: 1.4 !important; -} - -/* ── 3. PULL QUOTE ──────────────────────────────────────────────────── - Off-white background. Huge italic Playfair. Gold rule above+below. - ──────────────────────────────────────────────────────────────── */ - -.tt-why__quote { - background-color: #F2F0EB; - padding: 9rem 0; - border-top: 1px solid rgba(26, 26, 46, 0.08); -} - -@media screen and (max-width: 749px) { - .tt-why__quote { padding: 6rem 0; } -} - -.tt-why__quote-rule { - width: 4rem; - height: 2px; - background-color: #C8A96E; - margin: 0 auto 4rem; -} - -.tt-why__blockquote { - margin: 0; - text-align: center; -} - -.tt-why__blockquote p { - font-family: 'Playfair Display', Georgia, serif; - font-size: clamp(2.4rem, 4vw, 4.8rem); - font-style: italic; - font-weight: 400; - line-height: 1.22; - letter-spacing: -0.01em; - color: #1A1A2E; - max-width: 96rem; - margin: 0 auto 4rem; -} - -/* ── 4. HOW IT WORKS ────────────────────────────────────────────────── - Navy. Three steps with massive gold step numbers. - Numbers are decorative and sit in their own grid column. - ──────────────────────────────────────────────────────────────── */ - -.tt-why__process { - background-color: #1A1A2E; - padding: 10rem 0; - border-top: 1px solid rgba(200, 169, 110, 0.12); -} - -@media screen and (max-width: 749px) { - .tt-why__process { padding: 7rem 0; } -} - -.tt-why__process-header { - margin-bottom: 7rem; -} - -.tt-why__steps { - display: flex; - flex-direction: column; - gap: 0; -} - -.tt-why__step { - display: grid; - grid-template-columns: 16rem 1fr; - gap: 4rem; - padding: 5rem 0; - border-top: 1px solid rgba(200, 169, 110, 0.18); - align-items: start; -} - -.tt-why__step:last-child { - border-bottom: 1px solid rgba(200, 169, 110, 0.18); -} - -@media screen and (max-width: 749px) { - .tt-why__step { - grid-template-columns: 1fr; - gap: 1.6rem; - padding: 4rem 0; - } -} - -/* Big decorative step number */ -.tt-why__step-num { - font-family: 'Playfair Display', Georgia, serif; - font-size: clamp(6rem, 9vw, 10rem); - font-weight: 700; - color: #C8A96E; - opacity: 0.22; - line-height: 0.9; - letter-spacing: -0.03em; - padding-top: 0.4rem; - /* Allow number to visually bleed left of its column */ - margin-left: -1rem; -} - -@media screen and (max-width: 749px) { - .tt-why__step-num { - font-size: 5rem; - opacity: 0.18; - margin-left: 0; - } -} - -.tt-why__step-title { - margin: 0 0 1.4rem; - font-family: 'Playfair Display', Georgia, serif; - font-size: clamp(2.2rem, 2.8vw, 3rem); - font-weight: 700; - color: #F2F0EB; - line-height: 1.15; -} - -.tt-why__step-body p { - margin: 0; - font-family: 'DM Sans', sans-serif; - font-size: clamp(1.5rem, 1.7vw, 1.75rem); - line-height: 1.72; - color: rgba(242, 240, 235, 0.68); -} - -.tt-why__process-cta { - margin-top: 7rem; - display: flex; -} - -/* Shared button */ -.tt-why__btn { - display: inline-flex; - align-items: center; - padding: 1.5rem 3.6rem; - font-family: 'DM Sans', sans-serif; - font-size: 1.15rem; - font-weight: 600; - letter-spacing: 0.13em; - text-transform: uppercase; - text-decoration: none; - background-color: #C8A96E; - color: #1A1A2E; - border: 1.5px solid #C8A96E; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - transform 0.18s ease; - white-space: nowrap; -} - -.tt-why__btn:hover { - background-color: #D9BF8F; - border-color: #D9BF8F; - color: #1A1A2E; - transform: translateY(-2px); -} - -/* ── 5. THREE PILLARS ───────────────────────────────────────────────── - Off-white. Staggered layout: pillar 1 left, pillar 2 right, - pillar 3 centered. Roman numerals as large decorative markers. - ──────────────────────────────────────────────────────────────── */ - -.tt-why__pillars { - background-color: #F2F0EB; - padding: 10rem 0; - border-top: 1px solid rgba(26, 26, 46, 0.08); -} - -@media screen and (max-width: 749px) { - .tt-why__pillars { padding: 7rem 0; } -} - -.tt-why__pillars-header { - margin-bottom: 7rem; -} - -.tt-why__pillars-list { - display: flex; - flex-direction: column; - gap: 0; -} - -/* Each pillar: roman numeral + body in a 2-col grid */ -.tt-why__pillar { - display: grid; - grid-template-columns: 10rem 1fr; - gap: 3.5rem; - padding: 5rem 0; - border-top: 1px solid rgba(26, 26, 46, 0.12); - max-width: 88rem; - align-items: start; -} - -.tt-why__pillar:last-child { - border-bottom: 1px solid rgba(26, 26, 46, 0.12); -} - -/* Staggered horizontal positions */ -.tt-why__pillar--1 { margin-left: 0; margin-right: auto; } -.tt-why__pillar--2 { margin-left: auto; margin-right: 0; } -.tt-why__pillar--3 { margin-left: auto; margin-right: auto; } - -@media screen and (max-width: 749px) { - .tt-why__pillar { - grid-template-columns: 1fr; - gap: 1.6rem; - max-width: 100%; - margin-left: 0 !important; - margin-right: 0 !important; - padding: 4rem 0; - } -} - -/* Roman numeral */ -.tt-why__pillar-num { - font-family: 'Playfair Display', Georgia, serif; - font-size: clamp(5rem, 7vw, 8rem); - font-weight: 700; - color: #1A1A2E; - opacity: 0.10; - line-height: 0.9; - letter-spacing: -0.02em; - margin-left: -0.5rem; -} - -@media screen and (max-width: 749px) { - .tt-why__pillar-num { font-size: 4rem; margin-left: 0; } -} - -.tt-why__pillar-title { - margin: 0 0 1.6rem; - font-family: 'Playfair Display', Georgia, serif; - font-size: clamp(2.2rem, 2.8vw, 3rem); - font-weight: 700; - color: #1A1A2E; - line-height: 1.12; -} - -.tt-why__pillar-body p { - margin: 0; - font-family: 'DM Sans', sans-serif; - font-size: clamp(1.5rem, 1.7vw, 1.75rem); - line-height: 1.72; - color: rgba(26, 26, 46, 0.72); -} - -/* ── 6. INDIANAPOLIS ────────────────────────────────────────────────── - Darkest navy. Campaign-poster typography. "Indianapolis." at - enormous scale — a magazine-worthy typographic moment. - ──────────────────────────────────────────────────────────────── */ - -.tt-why__event { - background-color: #0F0F1E; - padding: 12rem 0 10rem; - border-top: 1px solid rgba(200, 169, 110, 0.10); -} - -@media screen and (max-width: 749px) { - .tt-why__event { padding: 8rem 0 7rem; } -} - -.tt-why__event-inner { - max-width: 100rem; -} - -/* The city name — huge typographic anchor */ -.tt-why__event-city { - margin: 0 0 1rem; - font-family: 'Playfair Display', Georgia, serif; - font-size: clamp(6rem, 12vw, 14rem); - font-style: italic; - font-weight: 700; - color: #C8A96E; - line-height: 0.95; - letter-spacing: -0.03em; - /* Allow it to run wide — it's a display moment */ -} - -@media screen and (max-width: 749px) { - .tt-why__event-city { font-size: clamp(5rem, 16vw, 9rem); } -} - -/* Bold statement below city name */ -.tt-why__event-statement { - margin: 0 0 3rem; - font-family: 'Playfair Display', Georgia, serif; - font-size: clamp(2rem, 3vw, 3.4rem); - font-weight: 700; - color: #F2F0EB; - line-height: 1.2; - max-width: 68rem; -} - -.tt-why__event-body { - margin: 0 0 5rem; - font-family: 'DM Sans', sans-serif; - font-size: clamp(1.5rem, 1.7vw, 1.75rem); - line-height: 1.72; - color: rgba(242, 240, 235, 0.65); - max-width: 64rem; -} - -.tt-why__event-next { - padding: 3.5rem 0 0; - border-top: 1px solid rgba(200, 169, 110, 0.18); - display: flex; - align-items: baseline; - gap: 3rem; - flex-wrap: wrap; -} - -.tt-why__event-next-label { - font-family: 'DM Sans', sans-serif; - font-size: 1.1rem; - font-weight: 500; - letter-spacing: 0.24em; - text-transform: uppercase; - color: #C8A96E; - white-space: nowrap; -} - -.tt-why__event-roadmap { - margin: 0; - font-family: 'Playfair Display', Georgia, serif; - font-size: clamp(1.8rem, 2.4vw, 2.6rem); - font-style: italic; - color: #F2F0EB; - line-height: 1.3; -} - -@media screen and (max-width: 749px) { - .tt-why__event-next { flex-direction: column; gap: 1.2rem; } -} - -/* ── 7. FOUNDER NOTE ────────────────────────────────────────────────── - Mid navy. Letter format with gold left border. - Personal voice. Italic Playfair for the sign-off line. - ──────────────────────────────────────────────────────────────── */ - -.tt-why__founder { - background-color: #252545; - padding: 10rem 0; - border-top: 1px solid rgba(200, 169, 110, 0.12); -} - -@media screen and (max-width: 749px) { - .tt-why__founder { padding: 7rem 0; } -} - -.tt-why__founder-inner { - max-width: 80rem; -} - -/* The letter body */ -.tt-why__founder-letter { - margin: 3.5rem 0 0; - padding-left: 3rem; - border-left: 2px solid rgba(200, 169, 110, 0.35); -} - -.tt-why__founder-letter p { - margin: 0 0 2rem; - font-family: 'DM Sans', sans-serif; - font-size: clamp(1.5rem, 1.7vw, 1.75rem); - line-height: 1.80; - color: rgba(242, 240, 235, 0.72); -} - -.tt-why__founder-letter p:last-child { - margin-bottom: 0; -} - -/* The "Let me handle it." closing line */ -.tt-why__founder-sign { - font-family: 'Playfair Display', Georgia, serif !important; - font-style: italic; - font-size: clamp(1.9rem, 2.4vw, 2.4rem) !important; - color: #F2F0EB !important; - font-weight: 400; -} - -/* Founder signature — em-dash + name + title */ -.tt-why__founder-sig { - display: block; - margin-top: 4rem; - padding-top: 3.5rem; - border-top: 1px solid rgba(200, 169, 110, 0.20); - font-family: 'Playfair Display', Georgia, serif; - font-style: italic; - font-size: clamp(2rem, 2.6vw, 2.8rem); - color: #C8A96E; - line-height: 1.2; -} - -.tt-why__founder-sig span { - display: block; - font-family: 'DM Sans', sans-serif; - font-style: normal; - font-size: 1.1rem; - font-weight: 500; - letter-spacing: 0.22em; - text-transform: uppercase; - color: rgba(242, 240, 235, 0.45); - margin-top: 0.6rem; -} - -/* ── 8. CONTACT ─────────────────────────────────────────────────────── - Darkest navy. Minimal. Email address as a large italic link - with a sliding gold underline on hover. - ──────────────────────────────────────────────────────────────── */ - -.tt-why__contact { - background-color: #0F0F1E; - padding: 12rem 0; - border-top: 1px solid rgba(200, 169, 110, 0.10); -} - -@media screen and (max-width: 749px) { - .tt-why__contact { padding: 8rem 0; } -} - -.tt-why__contact-inner { - max-width: 72rem; -} - -.tt-why__contact-heading { - margin: 0 0 2rem; - font-family: 'Playfair Display', Georgia, serif; - font-size: clamp(3rem, 4.2vw, 5.2rem); - font-weight: 700; - line-height: 1.1; - color: #F2F0EB; -} - -.tt-why__contact-sub { - margin: 0 0 4rem; - font-family: 'DM Sans', sans-serif; - font-size: clamp(1.5rem, 1.7vw, 1.75rem); - line-height: 1.72; - color: rgba(242, 240, 235, 0.60); - max-width: 56rem; -} - -/* Large italic email link with hover underline animation */ -.tt-why__contact-email { - display: inline-block; - font-family: 'Playfair Display', Georgia, serif; - font-style: italic; - font-size: clamp(2rem, 3.2vw, 3.8rem); - font-weight: 400; - color: #C8A96E; - text-decoration: none; - position: relative; - line-height: 1.2; - transition: color 0.2s ease; -} - -.tt-why__contact-email::after { - content: ''; - position: absolute; - bottom: -3px; - left: 0; - width: 0; - height: 1px; - background-color: #C8A96E; - transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1); -} - -.tt-why__contact-email:hover { - color: #D9BF8F; -} - -.tt-why__contact-email:hover::after { - width: 100%; -} - -/* ── Dawn page-width override within tt-why ─────────────────────────── - The standard .page-width has horizontal padding. Within tt-why zones - we rely on that inherited padding — this just resets any margin - issues from the outer section shell. - ──────────────────────────────────────────────────────────────── */ - -.tt-why .page-width { - position: relative; - z-index: 1; -} diff --git a/sections/header-group.json b/sections/header-group.json index a9ac3a08a0d..e03c143dff2 100644 --- a/sections/header-group.json +++ b/sections/header-group.json @@ -2,23 +2,6 @@ "name": "t:sections.header.name", "type": "header", "sections": { - "announcement-bar": { - "type": "announcement-bar", - "blocks": { - "announcement-bar-0": { - "type": "announcement", - "settings": { - "text": "Welcome to our store", - "text_alignment": "center", - "color_scheme": "scheme-1", - "link": "" - } - } - }, - "block_order": [ - "announcement-bar-0" - ] - }, "header": { "type": "header", "settings": { @@ -26,19 +9,18 @@ "logo_position": "middle-left", "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, + "sticky_header_type": "none", + "show_line_separator": false, + "enable_country_selector": false, + "enable_language_selector": false, "mobile_logo_position": "center", "margin_bottom": 0, - "padding_top": 20, - "padding_bottom": 20 + "padding_top": 16, + "padding_bottom": 16 } } }, "order": [ - "announcement-bar", "header" ] } diff --git a/sections/tt-hero.liquid b/sections/tt-hero.liquid deleted file mode 100644 index 97cd3572d5c..00000000000 --- a/sections/tt-hero.liquid +++ /dev/null @@ -1,158 +0,0 @@ -{% comment %} - Trainers Travel — Custom Hero Section - Premium animated hero: navy bg, gold geometric layers, CSS-only motion. - Replace Dawn's image-banner on the homepage. -{% endcomment %} - -{{ 'section-tt-hero.css' | asset_url | stylesheet_tag }} - -<section class="tt-hero" id="tt-hero-{{ section.id }}" aria-label="{{ section.settings.heading | escape }}"> - - {%- comment -%}── Visual layer stack (aria-hidden, decorative only) ──{%- endcomment -%} - <div class="tt-hero__bg" aria-hidden="true"> - - {%- comment -%}Diamond grid{%- endcomment -%} - <div class="tt-hero__grid"></div> - - {%- comment -%}Ambient glow blobs{%- endcomment -%} - <div class="tt-hero__wave tt-hero__wave--1"></div> - <div class="tt-hero__wave tt-hero__wave--2"></div> - <div class="tt-hero__wave tt-hero__wave--3"></div> - - {%- comment -%}Diagonal slash elements — bold energy stripe + hairline{%- endcomment -%} - <div class="tt-hero__slash tt-hero__slash--bold"></div> - <div class="tt-hero__slash tt-hero__slash--hair"></div> - - {%- comment -%}Gold ring arcs — large outer, mid, accent dot{%- endcomment -%} - <div class="tt-hero__ring tt-hero__ring--outer"></div> - <div class="tt-hero__ring tt-hero__ring--mid"></div> - <div class="tt-hero__ring tt-hero__ring--accent"></div> - - {%- comment -%}Floating gold particles{%- endcomment -%} - <div class="tt-hero__particles"> - {%- for i in (1..12) -%} - <span class="tt-hero__particle"></span> - {%- endfor -%} - </div> - - </div> - - {%- comment -%}── Content ──{%- endcomment -%} - <div class="tt-hero__content page-width"> - <div class="tt-hero__inner"> - - {%- if section.settings.eyebrow != blank -%} - <p class="tt-hero__eyebrow">{{ section.settings.eyebrow }}</p> - {%- endif -%} - - <div class="tt-hero__rule" aria-hidden="true"></div> - - {%- if section.settings.heading != blank -%} - <h1 class="tt-hero__heading"> - {{- section.settings.heading | newline_to_br -}} - </h1> - {%- endif -%} - - {%- if section.settings.subheading != blank -%} - <p class="tt-hero__subheading">{{ section.settings.subheading }}</p> - {%- endif -%} - - <div class="tt-hero__cta"> - {%- if section.settings.button_text != blank -%} - <a - href="{{ section.settings.button_link | default: '#' }}" - class="tt-hero__btn tt-hero__btn--primary" - > - {{- section.settings.button_text -}} - </a> - {%- endif -%} - - {%- if section.settings.secondary_button_text != blank -%} - <a - href="{{ section.settings.secondary_button_link | default: '#' }}" - class="tt-hero__btn tt-hero__btn--ghost" - > - {{- section.settings.secondary_button_text -}} - </a> - {%- endif -%} - </div> - - </div> - </div> - -</section> - -{% schema %} -{ - "name": "TT Hero", - "tag": "section", - "class": "section", - "limit": 1, - "disabled_on": { - "groups": ["header", "footer", "aside"] - }, - "settings": [ - { - "type": "text", - "id": "eyebrow", - "label": "Eyebrow label", - "default": "Trainers Travel", - "info": "Small text above the heading. Leave blank to hide." - }, - { - "type": "text", - "id": "heading", - "label": "Heading", - "default": "Travel smarter. Compete harder.", - "info": "Press Enter for a line break in the heading." - }, - { - "type": "textarea", - "id": "subheading", - "label": "Subheading", - "default": "Group hotel blocks for the competitive Pokémon community." - }, - { - "type": "header", - "content": "Primary button" - }, - { - "type": "text", - "id": "button_text", - "label": "Button text", - "default": "Explore Events" - }, - { - "type": "url", - "id": "button_link", - "label": "Button link" - }, - { - "type": "header", - "content": "Secondary button" - }, - { - "type": "text", - "id": "secondary_button_text", - "label": "Button text", - "info": "Leave blank to hide." - }, - { - "type": "url", - "id": "secondary_button_link", - "label": "Button link" - } - ], - "presets": [ - { - "name": "TT Hero", - "settings": { - "eyebrow": "Trainers Travel", - "heading": "Travel smarter. Compete harder.", - "subheading": "Group hotel blocks for the competitive Pokémon community.", - "button_text": "Explore Events" - } - } - ] -} -{% endschema %} diff --git a/sections/tt-home.liquid b/sections/tt-home.liquid new file mode 100644 index 00000000000..c774c2359ab --- /dev/null +++ b/sections/tt-home.liquid @@ -0,0 +1,451 @@ +{% comment %} + Trainers Travel — Homepage + File: sections/tt-home.liquid + + Single-page design: header → event → price comparison → buy → FAQ → footer. + No animated reveals, no particles, no campaign typography. Just the deal. +{% endcomment %} + +{{ 'section-tt-home.css' | asset_url | stylesheet_tag }} + +<div class="tt-home"> + + {%- comment -%}═══════════════════════════════════════════════════════ + 1. HEADER — minimal wordmark + contact + ═══════════════════════════════════════════════════════{%- endcomment -%} + <header class="tt-home__header"> + <div class="tt-home__header-inner"> + <span class="tt-home__wordmark">Trainers Travel</span> + {%- if section.settings.contact_email != blank -%} + <a href="mailto:{{ section.settings.contact_email }}" class="tt-home__header-email"> + {{ section.settings.contact_email }} + </a> + {%- endif -%} + </div> + </header> + + {%- comment -%}═══════════════════════════════════════════════════════ + 2. EVENT BLOCK + ═══════════════════════════════════════════════════════{%- endcomment -%} + <section class="tt-home__event"> + <div class="tt-home__container"> + <p class="tt-home__eyebrow">{{ section.settings.event_eyebrow }}</p> + <h1 class="tt-home__event-name">{{ section.settings.event_name }}</h1> + <p class="tt-home__event-dates">{{ section.settings.event_subtitle }}</p> + <div class="tt-home__hotel-line"> + <span class="tt-home__hotel-name">{{ section.settings.hotel_name }}</span> + <span class="tt-home__hotel-sep" aria-hidden="true">—</span> + <span class="tt-home__hotel-proximity">{{ section.settings.hotel_proximity }}</span> + </div> + </div> + </section> + + {%- comment -%}═══════════════════════════════════════════════════════ + 3. PRICE COMPARISON + ═══════════════════════════════════════════════════════{%- endcomment -%} + <section class="tt-home__pricing"> + <div class="tt-home__container"> + <h2 class="tt-home__section-title">What nearby hotels actually cost</h2> + <div class="tt-home__compare"> + + <div class="tt-home__compare-col tt-home__compare-col--theirs"> + <div class="tt-home__compare-header"> + <span class="tt-home__compare-label">Book on your own</span> + <span class="tt-home__compare-note">Google rate + 17% Indiana tax & city fees</span> + </div> + <ul class="tt-home__compare-list"> + <li class="tt-home__compare-item"> + <span class="tt-home__compare-hotel">Courtyard by Marriott</span> + <span class="tt-home__compare-price">$179<span class="tt-home__per-nt">/nt after tax</span></span> + </li> + <li class="tt-home__compare-item"> + <span class="tt-home__compare-hotel">Hyatt Place</span> + <span class="tt-home__compare-price">$179<span class="tt-home__per-nt">/nt after tax</span></span> + </li> + <li class="tt-home__compare-item"> + <span class="tt-home__compare-hotel">Crowne Plaza (direct)</span> + <span class="tt-home__compare-price">$205<span class="tt-home__per-nt">/nt after tax</span></span> + </li> + </ul> + </div> + + <div class="tt-home__compare-col tt-home__compare-col--ours"> + <div class="tt-home__compare-header"> + <span class="tt-home__compare-label">Through us</span> + <span class="tt-home__compare-note">All-in. No hidden fees.</span> + </div> + <ul class="tt-home__compare-list"> + <li class="tt-home__compare-item tt-home__compare-item--highlight"> + <span class="tt-home__compare-hotel">Crowne Plaza — Skywalk connected</span> + <span class="tt-home__compare-price tt-home__compare-price--highlight">$179<span class="tt-home__per-nt">/nt all-in</span></span> + </li> + </ul> + </div> + + </div> + <p class="tt-home__pricing-footnote"> + All hotel rates on Google are shown before Indiana’s 17% tax and city fees. Our price includes everything. + </p> + </div> + </section> + + {%- comment -%}═══════════════════════════════════════════════════════ + 4. BUY BUTTONS — product cards + ═══════════════════════════════════════════════════════{%- endcomment -%} + <section class="tt-home__buy" id="book"> + <div class="tt-home__container"> + <h2 class="tt-home__section-title">Book your room</h2> + <p class="tt-home__buy-sub">Non-refundable · Name transfer available at no charge · Confirmation within 24 hrs</p> + + <div class="tt-home__cards"> + + {%- assign queen_handle = section.settings.product_queen -%} + {%- assign king_handle = section.settings.product_king -%} + + {%- if queen_handle != blank -%} + {%- assign queen_product = all_products[queen_handle] -%} + {%- endif -%} + {%- if king_handle != blank -%} + {%- assign king_product = all_products[king_handle] -%} + {%- endif -%} + + {%- comment -%}Double Queen card{%- endcomment -%} + {%- if queen_product and queen_product.available -%} + <div class="tt-home__card"> + <div class="tt-home__card-body"> + <p class="tt-home__card-room-type">Double Queen</p> + <p class="tt-home__card-name">{{ queen_product.title }}</p> + <p class="tt-home__card-specs"> + Breakfast credit included · Skywalk access · 4.2 ★, 4,500+ reviews + </p> + {%- if queen_product.variants.first.inventory_management != blank and queen_product.variants.first.inventory_quantity > 0 and queen_product.variants.first.inventory_quantity <= 10 -%} + <p class="tt-home__card-urgency">Only {{ queen_product.variants.first.inventory_quantity }} left</p> + {%- endif -%} + </div> + <div class="tt-home__card-footer"> + <p class="tt-home__card-price">{{ queen_product.price | money }}</p> + <form method="post" action="/cart/add"> + <input type="hidden" name="id" value="{{ queen_product.variants.first.id }}"> + <input type="hidden" name="quantity" value="1"> + <button type="submit" class="tt-home__btn tt-home__btn--primary"> + Add to Cart + </button> + </form> + </div> + </div> + {%- elsif queen_handle != blank -%} + {%- comment -%}Product handle set but sold out{%- endcomment -%} + <div class="tt-home__card tt-home__card--sold-out"> + <div class="tt-home__card-body"> + <p class="tt-home__card-room-type">Double Queen</p> + <p class="tt-home__card-name">{{ queen_product.title | default: 'Double Queen — 2-Night Stay' }}</p> + <p class="tt-home__card-specs">Breakfast credit included · Skywalk access · 4.2 ★, 4,500+ reviews</p> + </div> + <div class="tt-home__card-footer"> + <p class="tt-home__card-price">{{ queen_product.price | money | default: '$358' }}</p> + <button class="tt-home__btn tt-home__btn--sold-out" disabled>Sold Out</button> + </div> + </div> + {%- else -%} + {%- comment -%}No handle configured — show placeholder{%- endcomment -%} + <div class="tt-home__card"> + <div class="tt-home__card-body"> + <p class="tt-home__card-room-type">Double Queen</p> + <p class="tt-home__card-name">Crowne Plaza Indianapolis — 2 Nights</p> + <p class="tt-home__card-specs">Breakfast credit included · Skywalk access · 4.2 ★, 4,500+ reviews</p> + </div> + <div class="tt-home__card-footer"> + <p class="tt-home__card-price">$358</p> + <a href="/collections/all" class="tt-home__btn tt-home__btn--primary">View Rooms</a> + </div> + </div> + {%- endif -%} + + {%- comment -%}King card{%- endcomment -%} + {%- if king_product and king_product.available -%} + <div class="tt-home__card"> + <div class="tt-home__card-body"> + <p class="tt-home__card-room-type">King</p> + <p class="tt-home__card-name">{{ king_product.title }}</p> + <p class="tt-home__card-specs"> + Breakfast credit included · Skywalk access · 4.2 ★, 4,500+ reviews + </p> + {%- if king_product.variants.first.inventory_management != blank and king_product.variants.first.inventory_quantity > 0 and king_product.variants.first.inventory_quantity <= 10 -%} + <p class="tt-home__card-urgency">Only {{ king_product.variants.first.inventory_quantity }} left</p> + {%- endif -%} + </div> + <div class="tt-home__card-footer"> + <p class="tt-home__card-price">{{ king_product.price | money }}</p> + <form method="post" action="/cart/add"> + <input type="hidden" name="id" value="{{ king_product.variants.first.id }}"> + <input type="hidden" name="quantity" value="1"> + <button type="submit" class="tt-home__btn tt-home__btn--primary"> + Add to Cart + </button> + </form> + </div> + </div> + {%- elsif king_handle != blank -%} + <div class="tt-home__card tt-home__card--sold-out"> + <div class="tt-home__card-body"> + <p class="tt-home__card-room-type">King</p> + <p class="tt-home__card-name">{{ king_product.title | default: 'King — 2-Night Stay' }}</p> + <p class="tt-home__card-specs">Breakfast credit included · Skywalk access · 4.2 ★, 4,500+ reviews</p> + </div> + <div class="tt-home__card-footer"> + <p class="tt-home__card-price">{{ king_product.price | money | default: '$358' }}</p> + <button class="tt-home__btn tt-home__btn--sold-out" disabled>Sold Out</button> + </div> + </div> + {%- else -%} + <div class="tt-home__card"> + <div class="tt-home__card-body"> + <p class="tt-home__card-room-type">King</p> + <p class="tt-home__card-name">Crowne Plaza Indianapolis — 2 Nights</p> + <p class="tt-home__card-specs">Breakfast credit included · Skywalk access · 4.2 ★, 4,500+ reviews</p> + </div> + <div class="tt-home__card-footer"> + <p class="tt-home__card-price">$358</p> + <a href="/collections/all" class="tt-home__btn tt-home__btn--primary">View Rooms</a> + </div> + </div> + {%- endif -%} + + </div> + </div> + </section> + + {%- comment -%}═══════════════════════════════════════════════════════ + 5. FAQ — accordion + ═══════════════════════════════════════════════════════{%- endcomment -%} + <section class="tt-home__faq"> + <div class="tt-home__container"> + <h2 class="tt-home__section-title">Questions</h2> + <dl class="tt-home__faq-list"> + + <div class="tt-home__faq-item"> + <dt class="tt-home__faq-q"> + <button class="tt-home__faq-btn" aria-expanded="false" aria-controls="faq-1"> + How does booking work? + <span class="tt-home__faq-icon" aria-hidden="true"></span> + </button> + </dt> + <dd class="tt-home__faq-a" id="faq-1" hidden> + Buy here. After purchase we send a short form to collect your guest name. We coordinate with the hotel directly — you walk in, give your name, and check in. No extra steps. + </dd> + </div> + + <div class="tt-home__faq-item"> + <dt class="tt-home__faq-q"> + <button class="tt-home__faq-btn" aria-expanded="false" aria-controls="faq-2"> + What does all-in pricing mean? + <span class="tt-home__faq-icon" aria-hidden="true"></span> + </button> + </dt> + <dd class="tt-home__faq-a" id="faq-2" hidden> + The price you see is the price you pay. Indiana adds 17% in hotel tax and city fees on top of the rack rate — that math is already done and included. No line-item surprises at checkout or check-in. + </dd> + </div> + + <div class="tt-home__faq-item"> + <dt class="tt-home__faq-q"> + <button class="tt-home__faq-btn" aria-expanded="false" aria-controls="faq-3"> + Can I cancel? + <span class="tt-home__faq-icon" aria-hidden="true"></span> + </button> + </dt> + <dd class="tt-home__faq-a" id="faq-3" hidden> + Bookings are non-refundable. Name transfers are available at no charge — if your plans change, you can transfer to another player. + </dd> + </div> + + <div class="tt-home__faq-item"> + <dt class="tt-home__faq-q"> + <button class="tt-home__faq-btn" aria-expanded="false" aria-controls="faq-4"> + How many people per room? + <span class="tt-home__faq-icon" aria-hidden="true"></span> + </button> + </dt> + <dd class="tt-home__faq-a" id="faq-4" hidden> + Follows standard hotel policy. Double queen rooms accommodate up to 4 guests. King rooms accommodate up to 2. Additional guests may be subject to the hotel's standard extra-person fee. + </dd> + </div> + + <div class="tt-home__faq-item"> + <dt class="tt-home__faq-q"> + <button class="tt-home__faq-btn" aria-expanded="false" aria-controls="faq-5"> + Where is the hotel? + <span class="tt-home__faq-icon" aria-hidden="true"></span> + </button> + </dt> + <dd class="tt-home__faq-a" id="faq-5" hidden> + Crowne Plaza Indianapolis Downtown Union Station is the closest Skywalk-connected hotel to Halls H & I at the Indiana Convention Center. Walk to the tournament without going outside. + </dd> + </div> + + <div class="tt-home__faq-item"> + <dt class="tt-home__faq-q"> + <button class="tt-home__faq-btn" aria-expanded="false" aria-controls="faq-6"> + Who is Trainers Travel? + <span class="tt-home__faq-icon" aria-hidden="true"></span> + </button> + </dt> + <dd class="tt-home__faq-a" id="faq-6" hidden> + Group hotel booking for the competitive Pokémon community. We negotiate room blocks directly with hotels, price everything all-in, and handle coordination with the property. Built by players who got tired of the checkout tax surprise. + </dd> + </div> + + </dl> + </div> + </section> + + {%- comment -%}═══════════════════════════════════════════════════════ + 6. FOOTER — minimal + ═══════════════════════════════════════════════════════{%- endcomment -%} + <footer class="tt-home__footer"> + <div class="tt-home__container"> + <div class="tt-home__footer-inner"> + <p class="tt-home__footer-tagline">Built by players, for players.</p> + <div class="tt-home__footer-links"> + {%- if section.settings.contact_email != blank -%} + <a href="mailto:{{ section.settings.contact_email }}" class="tt-home__footer-link"> + {{ section.settings.contact_email }} + </a> + {%- endif -%} + {%- if section.settings.social_x != blank -%} + <a href="{{ section.settings.social_x }}" class="tt-home__footer-link" target="_blank" rel="noopener noreferrer">X / Twitter</a> + {%- endif -%} + {%- if section.settings.social_instagram != blank -%} + <a href="{{ section.settings.social_instagram }}" class="tt-home__footer-link" target="_blank" rel="noopener noreferrer">Instagram</a> + {%- endif -%} + {%- if section.settings.social_discord != blank -%} + <a href="{{ section.settings.social_discord }}" class="tt-home__footer-link" target="_blank" rel="noopener noreferrer">Discord</a> + {%- endif -%} + </div> + </div> + </div> + </footer> + +</div> + +<script> + // Minimal accordion for FAQ — no library, no animation library. + (function () { + var btns = document.querySelectorAll('.tt-home__faq-btn'); + btns.forEach(function (btn) { + btn.addEventListener('click', function () { + var expanded = this.getAttribute('aria-expanded') === 'true'; + var targetId = this.getAttribute('aria-controls'); + var answer = document.getElementById(targetId); + this.setAttribute('aria-expanded', String(!expanded)); + if (expanded) { + answer.hidden = true; + } else { + answer.hidden = false; + } + }); + }); + })(); +</script> + +{% schema %} +{ + "name": "TT Home", + "tag": "div", + "class": "section", + "limit": 1, + "disabled_on": { + "groups": ["header", "footer", "aside"] + }, + "settings": [ + { + "type": "header", + "content": "Event" + }, + { + "type": "text", + "id": "event_eyebrow", + "label": "Eyebrow text", + "default": "Now booking" + }, + { + "type": "text", + "id": "event_name", + "label": "Event name", + "default": "Indianapolis Regional" + }, + { + "type": "text", + "id": "event_subtitle", + "label": "Event subtitle", + "default": "Pokémon TCG Regional Championship — May 29–31, 2026" + }, + { + "type": "text", + "id": "hotel_name", + "label": "Hotel name", + "default": "Crowne Plaza Indianapolis Downtown Union Station" + }, + { + "type": "text", + "id": "hotel_proximity", + "label": "Proximity line", + "default": "Closest Skywalk-connected hotel to Halls H & I" + }, + { + "type": "header", + "content": "Products" + }, + { + "type": "text", + "id": "product_queen", + "label": "Double Queen product handle", + "info": "Enter the product handle (URL slug) for the Double Queen room product." + }, + { + "type": "text", + "id": "product_king", + "label": "King product handle", + "info": "Enter the product handle (URL slug) for the King room product." + }, + { + "type": "header", + "content": "Contact & Social" + }, + { + "type": "text", + "id": "contact_email", + "label": "Contact email", + "default": "contact@trainerstravel.com" + }, + { + "type": "url", + "id": "social_x", + "label": "X / Twitter URL" + }, + { + "type": "url", + "id": "social_instagram", + "label": "Instagram URL" + }, + { + "type": "url", + "id": "social_discord", + "label": "Discord URL" + } + ], + "presets": [ + { + "name": "TT Home", + "settings": { + "event_eyebrow": "Now booking", + "event_name": "Indianapolis Regional", + "event_subtitle": "Pokémon TCG Regional Championship — May 29–31, 2026", + "hotel_name": "Crowne Plaza Indianapolis Downtown Union Station", + "hotel_proximity": "Closest Skywalk-connected hotel to Halls H & I", + "contact_email": "contact@trainerstravel.com" + } + } + ] +} +{% endschema %} diff --git a/sections/tt-why.liquid b/sections/tt-why.liquid deleted file mode 100644 index 41d2eb07fd9..00000000000 --- a/sections/tt-why.liquid +++ /dev/null @@ -1,319 +0,0 @@ -{% comment %} - Trainers Travel — "Why Trainers Travel" editorial page section - File: sections/tt-why.liquid - - To use: create a Shopify page in the admin, set template to - "page.why-trainers-travel". All editorial content lives here. -{% endcomment %} - -{{ 'section-tt-why.css' | asset_url | stylesheet_tag }} - -<div class="tt-why"> - - {%- comment -%}═══════════════════════════════════════════════════════ - 1. HOOK — The pain of tournament hotel booking - ═══════════════════════════════════════════════════════{%- endcomment -%} - <div class="tt-why__hook"> - <div class="page-width"> - <div class="tt-why__hook-inner"> - <p class="tt-why__eyebrow" data-reveal>The reality of tournament travel</p> - <h1 class="tt-why__hook-heading" data-reveal data-reveal-delay="1"> - You found a hotel.<br> - <em>$289 looked fine.</em> - </h1> - <div class="tt-why__hook-sequence"> - <p class="tt-why__hook-line" data-reveal data-reveal-delay="2">Then the taxes loaded.</p> - <p class="tt-why__hook-line" data-reveal data-reveal-delay="3">Then the resort fee.</p> - <p class="tt-why__hook-line" data-reveal data-reveal-delay="4">Then parking.</p> - <p class="tt-why__hook-line tt-why__hook-line--punch" data-reveal data-reveal-delay="5"> - Now it's <strong>$387.</strong> - </p> - </div> - <p class="tt-why__hook-closer" data-reveal data-reveal-delay="6"> - You're 47% through checkout and fully committed.<br> - <em>We built Trainers Travel because this is fixable.</em> - </p> - </div> - </div> - <div class="tt-why__hook-slash" aria-hidden="true"></div> - <div class="tt-why__hook-slash tt-why__hook-slash--hair" aria-hidden="true"></div> - </div> - - {%- comment -%}═══════════════════════════════════════════════════════ - 2. WHO WE ARE - ═══════════════════════════════════════════════════════{%- endcomment -%} - <div class="tt-why__about"> - <div class="page-width"> - <div class="tt-why__about-grid"> - <div class="tt-why__about-left" data-reveal> - <p class="tt-why__eyebrow">Who we are</p> - <h2 class="tt-why__section-heading">Players who got tired of the scramble.</h2> - </div> - <div class="tt-why__about-right"> - <p data-reveal data-reveal-delay="1"> - We're Trainers Travel — a wholesale hotel booking service built by competitive - Pokémon TCG players who've been navigating tournament travel for years. - </p> - <p data-reveal data-reveal-delay="2"> - Our team has flown across the country for Regionals, Internationals, and Worlds. - We know the tax surprise in real time, the last-minute scramble, the trade-off - between price and proximity. We built this to fix it — not as a side project. - As a proper service. - </p> - <p data-reveal data-reveal-delay="3"> - We negotiate group room blocks directly with hotels, price everything transparently, - and only book properties with genuine tournament-proximity value. - </p> - <p class="tt-why__about-tagline" data-reveal data-reveal-delay="4"> - This is the service we wished existed. - </p> - </div> - </div> - </div> - </div> - - {%- comment -%}═══════════════════════════════════════════════════════ - 3. PULL QUOTE - ═══════════════════════════════════════════════════════{%- endcomment -%} - <div class="tt-why__quote"> - <div class="page-width"> - <div class="tt-why__quote-rule" data-reveal aria-hidden="true"></div> - <blockquote class="tt-why__blockquote" data-reveal data-reveal-delay="1"> - <p>“Every price is all-in. What you see is what you pay. No surprises, no math, no commitment creep.”</p> - </blockquote> - <div class="tt-why__quote-rule" data-reveal data-reveal-delay="2" aria-hidden="true"></div> - </div> - </div> - - {%- comment -%}═══════════════════════════════════════════════════════ - 4. HOW IT WORKS - ═══════════════════════════════════════════════════════{%- endcomment -%} - <div class="tt-why__process"> - <div class="page-width"> - <div class="tt-why__process-header" data-reveal> - <p class="tt-why__eyebrow">How it works</p> - <h2 class="tt-why__section-heading">Simple. Transparent. Done.</h2> - </div> - <div class="tt-why__steps"> - - <div class="tt-why__step" data-reveal data-reveal-delay="1"> - <div class="tt-why__step-num" aria-hidden="true">01</div> - <div class="tt-why__step-body"> - <h3 class="tt-why__step-title">We negotiate the block.</h3> - <p>We go directly to the property's sales team and secure a group room block at a negotiated rate. This is the part that takes time and relationships — we handle it so you don't have to.</p> - </div> - </div> - - <div class="tt-why__step" data-reveal data-reveal-delay="2"> - <div class="tt-why__step-num" aria-hidden="true">02</div> - <div class="tt-why__step-body"> - <h3 class="tt-why__step-title">We price everything in.</h3> - <p>Taxes. Resort fees. Every line item that the hotel industry buries in checkout — we calculate it all upfront and absorb it into the listed price. The number you see is the number you pay.</p> - </div> - </div> - - <div class="tt-why__step" data-reveal data-reveal-delay="3"> - <div class="tt-why__step-num" aria-hidden="true">03</div> - <div class="tt-why__step-body"> - <h3 class="tt-why__step-title">You book in one click.</h3> - <p>After purchase we collect your guest details and coordinate with the hotel directly. Walk in, check in, and focus on what you actually came for.</p> - </div> - </div> - - </div> - - {%- if section.settings.cta_text != blank -%} - <div class="tt-why__process-cta" data-reveal> - <a href="{{ section.settings.cta_link | default: '/collections/all' }}" class="tt-why__btn"> - {{ section.settings.cta_text }} - </a> - </div> - {%- endif -%} - </div> - </div> - - {%- comment -%}═══════════════════════════════════════════════════════ - 5. THREE PILLARS - ═══════════════════════════════════════════════════════{%- endcomment -%} - <div class="tt-why__pillars"> - <div class="page-width"> - <div class="tt-why__pillars-header" data-reveal> - <p class="tt-why__eyebrow tt-why__eyebrow--on-light">Our standards</p> - <h2 class="tt-why__section-heading tt-why__section-heading--dark">Three things we never compromise on.</h2> - </div> - - <div class="tt-why__pillars-list"> - - <div class="tt-why__pillar tt-why__pillar--1" data-reveal data-reveal-delay="1"> - <div class="tt-why__pillar-num" aria-hidden="true">I</div> - <div class="tt-why__pillar-body"> - <h3 class="tt-why__pillar-title">Location that matters.</h3> - <p>We only book hotels with genuine venue proximity — skywalk connections, walking distance, close enough that the commute doesn't cost you energy on match day. If getting to the tournament adds fatigue, we don't book it.</p> - </div> - </div> - - <div class="tt-why__pillar tt-why__pillar--2" data-reveal data-reveal-delay="2"> - <div class="tt-why__pillar-num" aria-hidden="true">II</div> - <div class="tt-why__pillar-body"> - <h3 class="tt-why__pillar-title">Transparent pricing.</h3> - <p>All-in means all-in. We're not in the business of making the math hard. Taxes, resort fees, every charge the hotel industry buries in checkout — we surface it upfront and absorb it into the listed rate. No surprises.</p> - </div> - </div> - - <div class="tt-why__pillar tt-why__pillar--3" data-reveal data-reveal-delay="3"> - <div class="tt-why__pillar-num" aria-hidden="true">III</div> - <div class="tt-why__pillar-body"> - <h3 class="tt-why__pillar-title">Hotels worth posting about.</h3> - <p>You're going to be there for three days. The property should be worth something — clean rooms, real amenities, a lobby you'd want to meet teammates in before a feature match. We don't book embarrassing hotels.</p> - </div> - </div> - - </div> - </div> - </div> - - {%- comment -%}═══════════════════════════════════════════════════════ - 6. INDIANAPOLIS — First event - ═══════════════════════════════════════════════════════{%- endcomment -%} - <div class="tt-why__event"> - <div class="page-width"> - <div class="tt-why__event-inner"> - <p class="tt-why__eyebrow" data-reveal>Our first event</p> - <p class="tt-why__event-city" data-reveal data-reveal-delay="1">Indianapolis.</p> - <p class="tt-why__event-statement" data-reveal data-reveal-delay="2">This is us proving the model.</p> - <p class="tt-why__event-body" data-reveal data-reveal-delay="3"> - We've negotiated our first block, priced it transparently, and launched it publicly. - Whether it sells out in a day or moves slowly, we'll know exactly what players value — - and we'll use that to sharpen the offering for every event after. - </p> - <div class="tt-why__event-next" data-reveal data-reveal-delay="4"> - <span class="tt-why__event-next-label">What comes next</span> - <p class="tt-why__event-roadmap">NAIC. Worlds. More stops coming. Indianapolis is just the first pin on the map.</p> - </div> - </div> - </div> - </div> - - {%- comment -%}═══════════════════════════════════════════════════════ - 7. FOUNDER NOTE - ═══════════════════════════════════════════════════════{%- endcomment -%} - <div class="tt-why__founder"> - <div class="page-width"> - <div class="tt-why__founder-inner" data-reveal> - <p class="tt-why__eyebrow">A note from our team</p> - <div class="tt-why__founder-letter"> - <p>We've been to Regionals where we were 40 minutes from the venue because we waited too long to book. We've seen the checkout tax surprise in real time — found a $289 room, got to the last screen, saw $387. We've split a room four ways because nothing affordable was left within reasonable distance.</p> - <p data-reveal data-reveal-delay="1">That experience is fixable. Hotels do group blocks all the time — for conferences, for sports teams, for corporate offsites. They just don't advertise it. Getting access requires knowing who to call and being willing to negotiate.</p> - <p data-reveal data-reveal-delay="2">We did the work. Trainers Travel is the result. We're not a booking platform. We're players who handle the part of tournament travel that nobody wants to deal with.</p> - <p class="tt-why__founder-sign" data-reveal data-reveal-delay="3">We’ve got it handled.</p> - </div> - <p class="tt-why__founder-sig" data-reveal data-reveal-delay="4"> - — The Trainers Travel Team - </p> - </div> - </div> - </div> - - {%- comment -%}═══════════════════════════════════════════════════════ - 8. CONTACT - ═══════════════════════════════════════════════════════{%- endcomment -%} - <div class="tt-why__contact"> - <div class="page-width"> - <div class="tt-why__contact-inner" data-reveal> - <p class="tt-why__eyebrow">Still have questions?</p> - <h2 class="tt-why__contact-heading">We’re reachable.</h2> - <p class="tt-why__contact-sub"> - We're not a faceless booking engine. If something doesn't make sense or you want - to know more before you commit, reach out directly. - </p> - <a - href="mailto:{{ section.settings.contact_email }}" - class="tt-why__contact-email" - data-reveal - data-reveal-delay="1" - > - {{ section.settings.contact_email }} - </a> - </div> - </div> - </div> - -</div> - -<script> - // Scroll-reveal: IntersectionObserver adds .is-revealed to [data-reveal] elements. - // Delay tiers (0–6) map to CSS transition-delay via data-reveal-delay attribute. - // Falls back to immediate visibility if IntersectionObserver is unsupported. - (function () { - var els = document.querySelectorAll('.tt-why [data-reveal]'); - if (!els.length) return; - - if (!('IntersectionObserver' in window)) { - els.forEach(function (el) { el.classList.add('is-revealed'); }); - return; - } - - var io = new IntersectionObserver( - function (entries) { - entries.forEach(function (entry) { - if (entry.isIntersecting) { - entry.target.classList.add('is-revealed'); - io.unobserve(entry.target); - } - }); - }, - { threshold: 0.12, rootMargin: '0px 0px -48px 0px' } - ); - - els.forEach(function (el) { io.observe(el); }); - })(); -</script> - -{% schema %} -{ - "name": "Why Trainers Travel", - "tag": "div", - "class": "section", - "limit": 1, - "disabled_on": { - "groups": ["header", "footer", "aside"] - }, - "settings": [ - { - "type": "header", - "content": "Contact" - }, - { - "type": "text", - "id": "contact_email", - "label": "Contact email", - "default": "contact@trainerstravel.com" - }, - { - "type": "header", - "content": "Call to action" - }, - { - "type": "text", - "id": "cta_text", - "label": "CTA button text", - "default": "Book a Room", - "info": "Appears after the 'How It Works' steps. Leave blank to hide." - }, - { - "type": "url", - "id": "cta_link", - "label": "CTA button link" - } - ], - "presets": [ - { - "name": "Why Trainers Travel", - "settings": { - "contact_email": "contact@trainerstravel.com", - "cta_text": "Book a Room" - } - } - ] -} -{% endschema %} diff --git a/templates/index.json b/templates/index.json index e42c476e61c..db839e8f997 100644 --- a/templates/index.json +++ b/templates/index.json @@ -1,176 +1,21 @@ { "sections": { - "tt_hero": { - "type": "tt-hero", + "tt_home": { + "type": "tt-home", "settings": { - "eyebrow": "Trainers Travel", - "heading": "Travel smarter. Compete harder.", - "subheading": "Group hotel blocks for the competitive Pokémon community.", - "button_text": "Explore Events", - "button_link": "", - "secondary_button_text": "", - "secondary_button_link": "" - } - }, - "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, - "columns_desktop": 4, - "color_scheme": "scheme-1", - "show_view_all": false, - "swipe_on_mobile": false, - "image_ratio": "adapt", - "show_secondary_image": true, - "show_vendor": false, - "show_rating": false, - "columns_mobile": "2", - "padding_top": 28, - "padding_bottom": 36 - } - }, - "collage": { - "type": "collage", - "blocks": { - "collection-0": { - "type": "collection", - "settings": { - "collection": "" - } - }, - "product": { - "type": "product", - "settings": { - "product": "", - "second_image": false - } - }, - "collection-1": { - "type": "collection", - "settings": { - "collection": "" - } - } - }, - "block_order": [ - "collection-0", - "product", - "collection-1" - ], - "settings": { - "heading": "Multimedia collage", - "heading_size": "h2", - "desktop_layout": "left", - "mobile_layout": "collage", - "color_scheme": "scheme-1", - "padding_top": 36, - "padding_bottom": 36 - } - }, - "video": { - "type": "video", - "settings": { - "heading": "", - "video_url": "https://www.youtube.com/watch?v=_9VUPq3SxOc", - "heading_size": "h1", - "description": "", - "full_width": false, - "color_scheme": "scheme-1", - "padding_top": 36, - "padding_bottom": 36 - } - }, - "multicolumn": { - "type": "multicolumn", - "blocks": { - "column1": { - "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>", - "link_label": "", - "link": "" - } - }, - "column2": { - "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>", - "link_label": "", - "link": "" - } - }, - "column3": { - "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>", - "link_label": "", - "link": "" - } - } - }, - "block_order": [ - "column1", - "column2", - "column3" - ], - "settings": { - "title": "", - "heading_size": "h1", - "image_width": "third", - "image_ratio": "adapt", - "columns_desktop": 3, - "column_alignment": "center", - "background_style": "none", - "button_label": "", - "button_link": "", - "swipe_on_mobile": false, - "color_scheme": "scheme-1", - "columns_mobile": "1", - "padding_top": 36, - "padding_bottom": 36 + "event_eyebrow": "Now booking", + "event_name": "Indianapolis Regional", + "event_subtitle": "Pokémon TCG Regional Championship — May 29–31, 2026", + "hotel_name": "Crowne Plaza Indianapolis Downtown Union Station", + "hotel_proximity": "Closest Skywalk-connected hotel to Halls H & I", + "product_queen": "", + "product_king": "", + "contact_email": "contact@trainerstravel.com", + "social_x": "", + "social_instagram": "", + "social_discord": "" } } }, - "order": [ - "tt_hero", - "rich_text", - "featured_collection", - "collage", - "video", - "multicolumn" - ] + "order": ["tt_home"] } diff --git a/templates/page.why-trainers-travel.json b/templates/page.why-trainers-travel.json deleted file mode 100644 index 17d0479de84..00000000000 --- a/templates/page.why-trainers-travel.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "sections": { - "tt_why": { - "type": "tt-why", - "settings": { - "founder_name": "Connor Bray", - "contact_email": "contact@trainerstravel.com", - "cta_text": "Book a Room", - "cta_link": "" - } - } - }, - "order": ["tt_why"] -} From e5e64106055f9c6379c885d24d1ac3633b92ff3f Mon Sep 17 00:00:00 2001 From: trainerstravel <contact@trainerstravel.com> Date: Wed, 22 Apr 2026 10:20:50 -0400 Subject: [PATCH 07/16] Remove nav menu from header; add Sponsored Players page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Clears the menu reference in header-group.json so no nav links appear (Catalog, Contact, Why Trainers Travel are gone). Adds tt-sponsored section and page.sponsored-players.json template — player cards managed via theme editor blocks, empty state shows until players are added. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --- assets/section-tt-sponsored.css | 185 ++++++++++++++++++++++++++ sections/header-group.json | 2 +- sections/tt-sponsored.liquid | 153 +++++++++++++++++++++ templates/page.sponsored-players.json | 13 ++ 4 files changed, 352 insertions(+), 1 deletion(-) create mode 100644 assets/section-tt-sponsored.css create mode 100644 sections/tt-sponsored.liquid create mode 100644 templates/page.sponsored-players.json diff --git a/assets/section-tt-sponsored.css b/assets/section-tt-sponsored.css new file mode 100644 index 00000000000..d427ef9cf20 --- /dev/null +++ b/assets/section-tt-sponsored.css @@ -0,0 +1,185 @@ +/* + * section-tt-sponsored.css + * Trainers Travel — Sponsored Players page + */ + +.tt-sp { + --tt-navy: #1A1A2E; + --tt-gold: #C8A96E; + --tt-off-white: #F2F0EB; + --tt-mid: #4a4a6a; + --tt-border: #d8d4cc; + --tt-max-w: 860px; + --tt-pad-h: 24px; + + background: var(--tt-off-white); + color: var(--tt-navy); + font-family: inherit; +} + +.tt-sp *, +.tt-sp *::before, +.tt-sp *::after { + box-sizing: border-box; +} + +.tt-sp__container { + max-width: var(--tt-max-w); + margin: 0 auto; + padding: 0 var(--tt-pad-h); +} + +/* ─── Hero ───────────────────────────────────────────────── */ +.tt-sp__hero { + background: var(--tt-navy); + padding: 48px 0 40px; + border-bottom: 2px solid var(--tt-gold); +} + +.tt-sp__eyebrow { + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--tt-gold); + margin: 0 0 0.5rem; +} + +.tt-sp__heading { + font-size: clamp(1.8rem, 4vw, 2.8rem); + font-weight: 800; + color: var(--tt-off-white); + margin: 0 0 0.6rem; + letter-spacing: -0.02em; + line-height: 1.1; +} + +.tt-sp__sub { + font-size: 0.92rem; + color: rgba(242, 240, 235, 0.6); + margin: 0; + max-width: 480px; +} + +/* ─── Player grid ────────────────────────────────────────── */ +.tt-sp__grid-wrap { + padding: 40px 0; +} + +.tt-sp__grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + gap: 20px; +} + +.tt-sp__card { + background: #fff; + border: 1px solid var(--tt-border); + border-radius: 6px; + overflow: hidden; + display: flex; + flex-direction: column; +} + +/* ─── Avatar ─────────────────────────────────────────────── */ +.tt-sp__avatar { + width: 100%; + aspect-ratio: 1; + overflow: hidden; + background: var(--tt-navy); + display: flex; + align-items: center; + justify-content: center; +} + +.tt-sp__avatar img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.tt-sp__avatar--placeholder { + background: var(--tt-navy); +} + +.tt-sp__avatar--placeholder span { + font-size: 3rem; + font-weight: 800; + color: var(--tt-gold); + line-height: 1; +} + +/* ─── Card body ──────────────────────────────────────────── */ +.tt-sp__card-body { + padding: 18px 18px 20px; + display: flex; + flex-direction: column; + gap: 4px; + flex: 1; +} + +.tt-sp__player-name { + font-size: 1rem; + font-weight: 700; + color: var(--tt-navy); + margin: 0; +} + +.tt-sp__player-handle { + font-size: 0.8rem; + color: var(--tt-gold); + margin: 0; + font-weight: 600; +} + +.tt-sp__player-bio { + font-size: 0.82rem; + color: var(--tt-mid); + margin: 6px 0 0; + line-height: 1.5; +} + +.tt-sp__player-link { + display: inline-block; + margin-top: 12px; + font-size: 0.82rem; + font-weight: 700; + color: var(--tt-navy); + text-decoration: none; + border: 1px solid var(--tt-navy); + padding: 6px 14px; + border-radius: 3px; + align-self: flex-start; + transition: background 0.15s, color 0.15s; +} + +.tt-sp__player-link:hover { + background: var(--tt-navy); + color: var(--tt-off-white); +} + +/* ─── Empty state ────────────────────────────────────────── */ +.tt-sp__empty { + padding: 60px 0; + text-align: center; + font-size: 0.92rem; + color: var(--tt-mid); +} + +/* ─── Footer note ────────────────────────────────────────── */ +.tt-sp__footer-note { + border-top: 1px solid var(--tt-border); + padding: 28px 0; + font-size: 0.82rem; + color: var(--tt-mid); +} + +.tt-sp__footer-note a { + color: var(--tt-gold); + text-decoration: none; +} + +.tt-sp__footer-note a:hover { + text-decoration: underline; +} diff --git a/sections/header-group.json b/sections/header-group.json index e03c143dff2..f07015391ff 100644 --- a/sections/header-group.json +++ b/sections/header-group.json @@ -7,7 +7,7 @@ "settings": { "color_scheme": "scheme-1", "logo_position": "middle-left", - "menu": "main-menu", + "menu": "", "menu_type_desktop": "dropdown", "sticky_header_type": "none", "show_line_separator": false, diff --git a/sections/tt-sponsored.liquid b/sections/tt-sponsored.liquid new file mode 100644 index 00000000000..dad6c767e93 --- /dev/null +++ b/sections/tt-sponsored.liquid @@ -0,0 +1,153 @@ +{% comment %} + Trainers Travel — Sponsored Players page + File: sections/tt-sponsored.liquid + + Template: page.sponsored-players + Add players via the schema blocks in the theme editor. +{% endcomment %} + +{{ 'section-tt-sponsored.css' | asset_url | stylesheet_tag }} + +<div class="tt-sp"> + + <div class="tt-sp__hero"> + <div class="tt-sp__container"> + <p class="tt-sp__eyebrow">Trainers Travel</p> + <h1 class="tt-sp__heading">Sponsored Players</h1> + <p class="tt-sp__sub"> + These are the players we support. Follow them, root for them, watch their content. + </p> + </div> + </div> + + {%- if section.blocks.size > 0 -%} + <div class="tt-sp__grid-wrap"> + <div class="tt-sp__container"> + <div class="tt-sp__grid"> + {%- for block in section.blocks -%} + {%- if block.type == 'player' -%} + <div class="tt-sp__card" {{ block.shopify_attributes }}> + + {%- if block.settings.avatar != blank -%} + <div class="tt-sp__avatar"> + <img + src="{{ block.settings.avatar | image_url: width: 200 }}" + alt="{{ block.settings.name | escape }}" + width="100" + height="100" + loading="lazy" + > + </div> + {%- else -%} + <div class="tt-sp__avatar tt-sp__avatar--placeholder" aria-hidden="true"> + <span>{{ block.settings.name | slice: 0 | upcase }}</span> + </div> + {%- endif -%} + + <div class="tt-sp__card-body"> + <p class="tt-sp__player-name">{{ block.settings.name }}</p> + + {%- if block.settings.handle != blank -%} + <p class="tt-sp__player-handle">@{{ block.settings.handle }}</p> + {%- endif -%} + + {%- if block.settings.bio != blank -%} + <p class="tt-sp__player-bio">{{ block.settings.bio }}</p> + {%- endif -%} + + {%- if block.settings.link != blank -%} + <a href="{{ block.settings.link }}" class="tt-sp__player-link" target="_blank" rel="noopener noreferrer"> + {{ block.settings.link_label | default: 'Follow' }} + </a> + {%- endif -%} + </div> + + </div> + {%- endif -%} + {%- endfor -%} + </div> + </div> + </div> + {%- else -%} + <div class="tt-sp__empty"> + <div class="tt-sp__container"> + <p>Players coming soon.</p> + </div> + </div> + {%- endif -%} + + <div class="tt-sp__footer-note"> + <div class="tt-sp__container"> + <p> + Interested in a sponsorship? Reach out at + <a href="mailto:{{ section.settings.contact_email }}">{{ section.settings.contact_email }}</a>. + </p> + </div> + </div> + +</div> + +{% schema %} +{ + "name": "Sponsored Players", + "tag": "div", + "class": "section", + "limit": 1, + "disabled_on": { + "groups": ["header", "footer", "aside"] + }, + "settings": [ + { + "type": "text", + "id": "contact_email", + "label": "Contact email", + "default": "contact@trainerstravel.com" + } + ], + "blocks": [ + { + "type": "player", + "name": "Player", + "settings": [ + { + "type": "text", + "id": "name", + "label": "Player name" + }, + { + "type": "text", + "id": "handle", + "label": "Social handle", + "info": "Without the @ symbol" + }, + { + "type": "image_picker", + "id": "avatar", + "label": "Profile photo" + }, + { + "type": "textarea", + "id": "bio", + "label": "Short bio" + }, + { + "type": "url", + "id": "link", + "label": "Profile link" + }, + { + "type": "text", + "id": "link_label", + "label": "Link label", + "default": "Follow" + } + ] + } + ], + "presets": [ + { + "name": "Sponsored Players" + } + ] +} +{% endschema %} diff --git a/templates/page.sponsored-players.json b/templates/page.sponsored-players.json new file mode 100644 index 00000000000..1ff6ca43504 --- /dev/null +++ b/templates/page.sponsored-players.json @@ -0,0 +1,13 @@ +{ + "sections": { + "tt_sponsored": { + "type": "tt-sponsored", + "blocks": {}, + "block_order": [], + "settings": { + "contact_email": "contact@trainerstravel.com" + } + } + }, + "order": ["tt_sponsored"] +} From 24d78d42ebcab04aff83f36e33f201c5d6442e66 Mon Sep 17 00:00:00 2001 From: trainerstravel <contact@trainerstravel.com> Date: Wed, 22 Apr 2026 10:26:47 -0400 Subject: [PATCH 08/16] =?UTF-8?q?Update=20FAQ=20to=20evergreen=20content?= =?UTF-8?q?=20=E2=80=94=208=20questions,=20event-agnostic?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replaces Indy-specific answers with broad copy that works for any event. Adds two new entries: loyalty account (no membership needed) and early/late stay (group rate extensions). Cancellation answer now correctly defers to per-product terms rather than stating a blanket no-refund policy. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --- sections/tt-home.liquid | 38 +++++++++++++++++++++++++++++++------- 1 file changed, 31 insertions(+), 7 deletions(-) diff --git a/sections/tt-home.liquid b/sections/tt-home.liquid index c774c2359ab..a41e89f8127 100644 --- a/sections/tt-home.liquid +++ b/sections/tt-home.liquid @@ -231,7 +231,7 @@ </button> </dt> <dd class="tt-home__faq-a" id="faq-1" hidden> - Buy here. After purchase we send a short form to collect your guest name. We coordinate with the hotel directly — you walk in, give your name, and check in. No extra steps. + Browse available hotel blocks for upcoming events, pick your room type, and check out directly on our site. We handle the group reservation with the hotel — you just show up with your confirmation. No phone calls, no loyalty accounts, no back-and-forth required. </dd> </div> @@ -243,7 +243,7 @@ </button> </dt> <dd class="tt-home__faq-a" id="faq-2" hidden> - The price you see is the price you pay. Indiana adds 17% in hotel tax and city fees on top of the rack rate — that math is already done and included. No line-item surprises at checkout or check-in. + The price you see is the price you pay. Hotel sites and Google show rates before taxes, which typically adds 15–20% at checkout. We build all taxes and fees into our listed price upfront so there are no surprises. What you see is what you pay. </dd> </div> @@ -255,7 +255,7 @@ </button> </dt> <dd class="tt-home__faq-a" id="faq-3" hidden> - Bookings are non-refundable. Name transfers are available at no charge — if your plans change, you can transfer to another player. + Cancellation terms vary by event and are listed on each product page. We hold group room blocks with hotels, so last-minute cancellations can impact our ability to offer blocks at future events. We recommend reviewing the cancellation window before purchasing and only booking if you plan to attend. </dd> </div> @@ -267,7 +267,7 @@ </button> </dt> <dd class="tt-home__faq-a" id="faq-4" hidden> - Follows standard hotel policy. Double queen rooms accommodate up to 4 guests. King rooms accommodate up to 2. Additional guests may be subject to the hotel's standard extra-person fee. + It depends on the room type. Double Queen rooms comfortably sleep 2–4 people. King rooms are best for 1–2. Each listing notes the bed configuration. You can split the cost with teammates however you like — we just need one person to place the order. </dd> </div> @@ -279,19 +279,43 @@ </button> </dt> <dd class="tt-home__faq-a" id="faq-5" hidden> - Crowne Plaza Indianapolis Downtown Union Station is the closest Skywalk-connected hotel to Halls H & I at the Indiana Convention Center. Walk to the tournament without going outside. + Every hotel we select is chosen specifically for proximity to the tournament venue. We prioritize hotels with covered or direct walking access to the event hall whenever possible, so you can move between your room and the tournament floor without dealing with traffic or weather. </dd> </div> <div class="tt-home__faq-item"> <dt class="tt-home__faq-q"> <button class="tt-home__faq-btn" aria-expanded="false" aria-controls="faq-6"> - Who is Trainers Travel? + Do I need a hotel loyalty account? <span class="tt-home__faq-icon" aria-hidden="true"></span> </button> </dt> <dd class="tt-home__faq-a" id="faq-6" hidden> - Group hotel booking for the competitive Pokémon community. We negotiate room blocks directly with hotels, price everything all-in, and handle coordination with the property. Built by players who got tired of the checkout tax surprise. + No. Our rates are available to anyone. No IHG One, World of Hyatt, Marriott Bonvoy, or any other membership required. We negotiate group access so you don’t have to jump through those hoops. + </dd> + </div> + + <div class="tt-home__faq-item"> + <dt class="tt-home__faq-q"> + <button class="tt-home__faq-btn" aria-expanded="false" aria-controls="faq-7"> + What if I want to arrive early or stay late? + <span class="tt-home__faq-icon" aria-hidden="true"></span> + </button> + </dt> + <dd class="tt-home__faq-a" id="faq-7" hidden> + We do our best to negotiate group rate extensions for the days surrounding the event. If extended stay options are available, they’ll be listed on the product page. Reach out to us at <a href="mailto:{{ section.settings.contact_email }}">{{ section.settings.contact_email }}</a> if you have specific needs. + </dd> + </div> + + <div class="tt-home__faq-item"> + <dt class="tt-home__faq-q"> + <button class="tt-home__faq-btn" aria-expanded="false" aria-controls="faq-8"> + Who is Trainers Travel? + <span class="tt-home__faq-icon" aria-hidden="true"></span> + </button> + </dt> + <dd class="tt-home__faq-a" id="faq-8" hidden> + Trainers Travel is a hotel coordination service built for the competitive Pokémon TCG community. We negotiate group room blocks at major events, then offer rooms at all-in prices that are typically cheaper than booking direct — with better terms and no hidden fees. Booking hotels for tournaments has always been a frustrating experience. We’re fixing that. </dd> </div> From f0c6fae8398dd66d07d69d874b2db3b97932916b Mon Sep 17 00:00:00 2001 From: trainerstravel <contact@trainerstravel.com> Date: Wed, 22 Apr 2026 10:41:52 -0400 Subject: [PATCH 09/16] =?UTF-8?q?Multi-event=20architecture=20=E2=80=94=20?= =?UTF-8?q?dynamic=20events=20grid,=20no=20hardcoded=20event=20names?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Homepage (tt-home): - Replaces the single-event block and hardcoded price comparison with a general hero ("Travel smarter. Compete harder.") and a dynamic events grid that reads from a Shopify navigation menu (handle: event-collections). - Adding a new event requires zero theme changes: create the collection in admin, add it to the Event Collections nav menu, done. - Each event card derives status badge (Now Booking / Selling Fast / Sold Out / Coming Soon) and starting price from product tags at render time. - Buy buttons removed from homepage — purchasing happens on collection pages. New: sections/tt-event-header.liquid + assets/section-tt-event-header.css - Event collection page header: title, status badge, date/city from product tags, collection description from admin (hotel name, venue proximity, any event-specific details live there — not in theme code), starting price, back-to-events link. New: templates/collection.event.json - Apply this template in admin to any event collection. Uses tt-event-header above the standard Dawn product grid with filtering/sorting disabled (not needed for small room-type listings). No hardcoded event names remain anywhere in the theme. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --- assets/section-tt-event-header.css | 126 +++++++++ assets/section-tt-home.css | 417 +++++++++-------------------- sections/tt-event-header.liquid | 108 ++++++++ sections/tt-home.liquid | 364 ++++++++++--------------- templates/collection.event.json | 28 ++ templates/index.json | 10 +- 6 files changed, 536 insertions(+), 517 deletions(-) create mode 100644 assets/section-tt-event-header.css create mode 100644 sections/tt-event-header.liquid create mode 100644 templates/collection.event.json diff --git a/assets/section-tt-event-header.css b/assets/section-tt-event-header.css new file mode 100644 index 00000000000..5bd9d5be88c --- /dev/null +++ b/assets/section-tt-event-header.css @@ -0,0 +1,126 @@ +/* + * section-tt-event-header.css + * Trainers Travel — event collection page header + */ + +.tt-eh { + --tt-navy: #1A1A2E; + --tt-gold: #C8A96E; + --tt-off-white: #F2F0EB; + --tt-mid: #4a4a6a; + --tt-border: #d8d4cc; + + background: var(--tt-navy); + border-bottom: 2px solid var(--tt-gold); + color: var(--tt-off-white); +} + +.tt-eh__inner { + max-width: 900px; + margin: 0 auto; + padding: 32px 24px 36px; +} + +/* Back link + badge row */ +.tt-eh__top { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 16px; + flex-wrap: wrap; +} + +.tt-eh__back { + font-size: 0.8rem; + color: rgba(242, 240, 235, 0.55); + text-decoration: none; + transition: color 0.15s; +} +.tt-eh__back:hover { color: var(--tt-gold); } + +/* Status badges — same system as homepage cards */ +.tt-eh__badge { + display: inline-block; + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + padding: 3px 8px; + border-radius: 3px; +} + +.tt-eh__badge--available { + background: rgba(39, 174, 96, 0.18); + color: #58d68d; +} +.tt-eh__badge--selling-fast { + background: rgba(200, 169, 110, 0.2); + color: var(--tt-gold); +} +.tt-eh__badge--coming-soon { + background: rgba(255, 255, 255, 0.08); + color: rgba(242, 240, 235, 0.6); +} +.tt-eh__badge--sold-out { + background: rgba(192, 57, 43, 0.18); + color: #e74c3c; +} + +/* Title */ +.tt-eh__title { + font-size: clamp(1.8rem, 4.5vw, 3rem); + font-weight: 800; + color: var(--tt-off-white); + margin: 0 0 0.4rem; + letter-spacing: -0.02em; + line-height: 1.1; +} + +/* Date / city meta */ +.tt-eh__meta { + font-size: 0.88rem; + color: rgba(242, 240, 235, 0.55); + margin: 0 0 1.25rem; +} + +/* Collection description — written in Shopify admin */ +.tt-eh__description { + font-size: 0.92rem; + color: rgba(242, 240, 235, 0.75); + line-height: 1.65; + max-width: 680px; + margin-bottom: 1.5rem; +} + +.tt-eh__description p { margin: 0 0 0.75em; } +.tt-eh__description p:last-child { margin-bottom: 0; } +.tt-eh__description strong { color: var(--tt-off-white); } +.tt-eh__description a { color: var(--tt-gold); text-decoration: none; } +.tt-eh__description a:hover { text-decoration: underline; } + +/* Bottom bar */ +.tt-eh__footer-bar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + flex-wrap: wrap; + padding-top: 1rem; + border-top: 1px solid rgba(255, 255, 255, 0.08); +} + +.tt-eh__pricing-note { + font-size: 0.88rem; + color: rgba(242, 240, 235, 0.65); + margin: 0; +} +.tt-eh__pricing-note strong { + color: var(--tt-off-white); + font-size: 1rem; +} + +.tt-eh__rooms-count { + font-size: 0.78rem; + color: rgba(242, 240, 235, 0.4); + margin: 0; +} diff --git a/assets/section-tt-home.css b/assets/section-tt-home.css index ed84914a3a9..efd2be38fe3 100644 --- a/assets/section-tt-home.css +++ b/assets/section-tt-home.css @@ -1,6 +1,6 @@ /* * section-tt-home.css - * Trainers Travel — single-page homepage + * Trainers Travel — multi-event homepage * * The tt-home section renders its own header, so we hide the Dawn global * header/announcement bar on the homepage (template-index body class). @@ -10,31 +10,15 @@ display: none !important; } -/* - * section-tt-home.css - * Trainers Travel — single-page homepage - * - * Design language: community-tool utility. Clean grid, restrained brand colors, - * no scroll reveals, no animations, no campaign typography. Spacing is generous - * so the hierarchy reads without effort. - * - * Brand tokens - * --tt-navy: #1A1A2E - * --tt-gold: #C8A96E - * --tt-off-white: #F2F0EB - */ - -/* ─── Reset & tokens ──────────────────────────────────────── */ +/* ─── Tokens ──────────────────────────────────────────────── */ .tt-home { --tt-navy: #1A1A2E; --tt-gold: #C8A96E; --tt-off-white: #F2F0EB; --tt-mid: #4a4a6a; --tt-border: #d8d4cc; - --tt-red: #c0392b; - --tt-green: #27ae60; - --tt-max-w: 860px; + --tt-max-w: 900px; --tt-pad-h: 24px; font-family: inherit; @@ -48,29 +32,21 @@ box-sizing: border-box; } -/* ─── Layout container ────────────────────────────────────── */ +/* ─── Container ───────────────────────────────────────────── */ .tt-home__container { max-width: var(--tt-max-w); margin: 0 auto; padding: 0 var(--tt-pad-h); } -/* ─── Shared typography helpers ───────────────────────────── */ -.tt-home__eyebrow { - font-size: 0.75rem; - font-weight: 600; +/* ─── Shared ──────────────────────────────────────────────── */ +.tt-home__section-title { + font-size: 0.72rem; + font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tt-gold); - margin: 0 0 0.5rem; -} - -.tt-home__section-title { - font-size: 1.15rem; - font-weight: 700; - color: var(--tt-navy); margin: 0 0 1.25rem; - letter-spacing: -0.01em; } /* ─── 1. HEADER ───────────────────────────────────────────── */ @@ -103,315 +79,193 @@ opacity: 0.85; transition: opacity 0.15s; } +.tt-home__header-email:hover { opacity: 1; } -.tt-home__header-email:hover { - opacity: 1; -} - -/* ─── 2. EVENT BLOCK ──────────────────────────────────────── */ -.tt-home__event { +/* ─── 2. HERO ─────────────────────────────────────────────── */ +.tt-home__hero { background: var(--tt-navy); - padding: 48px 0 40px; + padding: 56px 0 52px; border-bottom: 2px solid var(--tt-gold); } -.tt-home__event .tt-home__container { - text-align: left; -} - -.tt-home__event-name { - font-size: clamp(2rem, 5vw, 3.2rem); +.tt-home__hero-heading { + font-size: clamp(2.2rem, 5.5vw, 3.6rem); font-weight: 800; color: var(--tt-off-white); - margin: 0 0 0.4rem; + margin: 0 0 0.65rem; line-height: 1.1; - letter-spacing: -0.02em; -} - -.tt-home__event-dates { - font-size: 0.95rem; - color: rgba(242, 240, 235, 0.65); - margin: 0 0 1.25rem; + letter-spacing: -0.025em; } -.tt-home__hotel-line { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 8px; - font-size: 0.9rem; -} - -.tt-home__hotel-name { - color: var(--tt-gold); - font-weight: 600; +.tt-home__hero-sub { + font-size: 1rem; + color: rgba(242, 240, 235, 0.6); + margin: 0 0 1.75rem; + max-width: 480px; + line-height: 1.55; } -.tt-home__hotel-sep { - color: rgba(242, 240, 235, 0.3); +/* ─── Buttons ─────────────────────────────────────────────── */ +.tt-home__btn { + display: inline-block; + padding: 11px 22px; + font-size: 0.88rem; + font-weight: 700; + border-radius: 4px; + cursor: pointer; + text-decoration: none; + border: none; + line-height: 1; + transition: background 0.15s, color 0.15s, opacity 0.15s; + white-space: nowrap; } -.tt-home__hotel-proximity { - color: rgba(242, 240, 235, 0.7); +.tt-home__btn--primary { + background: var(--tt-gold); + color: var(--tt-navy); } +.tt-home__btn--primary:hover { background: #d4b87c; } -/* ─── 3. PRICE COMPARISON ─────────────────────────────────── */ -.tt-home__pricing { +/* ─── 3. EVENTS GRID ──────────────────────────────────────── */ +.tt-home__events { background: var(--tt-off-white); padding: 40px 0; border-bottom: 1px solid var(--tt-border); } -.tt-home__compare { +.tt-home__events-grid { display: grid; - grid-template-columns: 1fr 1fr; - gap: 0; - border: 1px solid var(--tt-border); - border-radius: 6px; - overflow: hidden; - margin-bottom: 1rem; -} - -@media (max-width: 560px) { - .tt-home__compare { - grid-template-columns: 1fr; - } -} - -.tt-home__compare-col { - padding: 0; + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + gap: 16px; } -.tt-home__compare-col--theirs { - border-right: 1px solid var(--tt-border); +/* Event card */ +.tt-home__event-card { + display: flex; + flex-direction: column; background: #fff; + border: 1px solid var(--tt-border); + border-radius: 6px; + text-decoration: none; + color: inherit; + overflow: hidden; + transition: border-color 0.15s, box-shadow 0.15s; } -@media (max-width: 560px) { - .tt-home__compare-col--theirs { - border-right: none; - border-bottom: 1px solid var(--tt-border); - } -} - -.tt-home__compare-col--ours { - background: #fff; +.tt-home__event-card:hover { + border-color: var(--tt-gold); + box-shadow: 0 2px 12px rgba(26, 26, 46, 0.08); } -.tt-home__compare-header { - padding: 14px 16px 12px; - border-bottom: 1px solid var(--tt-border); - background: #f7f5f1; +.tt-home__event-card--sold-out { + opacity: 0.65; } -.tt-home__compare-col--ours .tt-home__compare-header { - background: #f0ede6; +.tt-home__event-card-top { + padding: 12px 14px 0; } -.tt-home__compare-label { - display: block; - font-size: 0.78rem; +/* Status badges */ +.tt-home__event-badge { + display: inline-block; + font-size: 0.68rem; font-weight: 700; + letter-spacing: 0.08em; text-transform: uppercase; - letter-spacing: 0.07em; - color: var(--tt-navy); - margin-bottom: 2px; -} - -.tt-home__compare-note { - display: block; - font-size: 0.72rem; - color: var(--tt-mid); + padding: 3px 8px; + border-radius: 3px; } -.tt-home__compare-list { - list-style: none; - margin: 0; - padding: 0; +.tt-home__event-badge--available { + background: rgba(39, 174, 96, 0.12); + color: #1e8449; } -.tt-home__compare-item { - display: flex; - justify-content: space-between; - align-items: baseline; - gap: 8px; - padding: 11px 16px; - border-bottom: 1px solid #f0ede6; - font-size: 0.88rem; +.tt-home__event-badge--selling-fast { + background: rgba(200, 169, 110, 0.18); + color: #8a6a2a; } -.tt-home__compare-item:last-child { - border-bottom: none; +.tt-home__event-badge--coming-soon { + background: rgba(74, 74, 106, 0.1); + color: var(--tt-mid); } -.tt-home__compare-item--highlight { - background: rgba(200, 169, 110, 0.08); +.tt-home__event-badge--sold-out { + background: rgba(192, 57, 43, 0.1); + color: #922b21; } -.tt-home__compare-hotel { - color: var(--tt-navy); +.tt-home__event-card-body { + padding: 12px 14px 10px; flex: 1; - min-width: 0; } -.tt-home__compare-price { +.tt-home__event-card-title { + font-size: 1rem; font-weight: 700; color: var(--tt-navy); - white-space: nowrap; - font-size: 0.95rem; -} - -.tt-home__compare-price--highlight { - color: var(--tt-gold); - font-size: 1.05rem; + margin: 0 0 4px; + line-height: 1.25; } -.tt-home__per-nt { - font-size: 0.72rem; - font-weight: 400; +.tt-home__event-card-meta { + font-size: 0.78rem; color: var(--tt-mid); - margin-left: 2px; -} - -.tt-home__compare-price--highlight .tt-home__per-nt { - color: var(--tt-gold); - opacity: 0.75; + margin: 0 0 8px; } -.tt-home__pricing-footnote { - font-size: 0.78rem; +.tt-home__event-card-desc { + font-size: 0.82rem; color: var(--tt-mid); margin: 0; line-height: 1.5; } -/* ─── 4. BUY SECTION ──────────────────────────────────────── */ -.tt-home__buy { - background: var(--tt-navy); - padding: 40px 0; -} - -.tt-home__buy .tt-home__section-title { - color: var(--tt-off-white); -} - -.tt-home__buy-sub { - font-size: 0.8rem; - color: rgba(242, 240, 235, 0.55); - margin: -0.75rem 0 1.5rem; - line-height: 1.5; -} - -.tt-home__cards { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 16px; -} - -@media (max-width: 560px) { - .tt-home__cards { - grid-template-columns: 1fr; - } -} - -.tt-home__card { - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(200, 169, 110, 0.3); - border-radius: 6px; +.tt-home__event-card-footer { display: flex; - flex-direction: column; - overflow: hidden; -} - -.tt-home__card--sold-out { - opacity: 0.6; -} - -.tt-home__card-body { - padding: 20px 20px 16px; - flex: 1; -} - -.tt-home__card-room-type { - font-size: 0.72rem; - font-weight: 700; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--tt-gold); - margin: 0 0 4px; + align-items: center; + justify-content: space-between; + gap: 8px; + padding: 10px 14px 14px; + border-top: 1px solid #f0ede6; + margin-top: auto; } -.tt-home__card-name { +.tt-home__event-card-price { font-size: 0.95rem; - font-weight: 600; - color: var(--tt-off-white); - margin: 0 0 10px; - line-height: 1.3; + font-weight: 700; + color: var(--tt-navy); } -.tt-home__card-specs { - font-size: 0.78rem; - color: rgba(242, 240, 235, 0.55); - margin: 0; - line-height: 1.5; +.tt-home__event-card-price-note { + font-size: 0.72rem; + font-weight: 400; + color: var(--tt-mid); } -.tt-home__card-urgency { - margin: 8px 0 0; +.tt-home__event-card-cta { font-size: 0.78rem; - font-weight: 600; - color: #e8a87c; -} - -.tt-home__card-footer { - padding: 14px 20px 20px; - border-top: 1px solid rgba(255, 255, 255, 0.07); - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - flex-wrap: wrap; -} - -.tt-home__card-price { - font-size: 1.4rem; - font-weight: 800; - color: var(--tt-off-white); - margin: 0; - letter-spacing: -0.02em; -} - -/* ─── Buttons ─────────────────────────────────────────────── */ -.tt-home__btn { - display: inline-block; - padding: 10px 20px; - font-size: 0.88rem; font-weight: 700; - border-radius: 4px; - cursor: pointer; - text-decoration: none; - border: none; - line-height: 1; - transition: background 0.15s, color 0.15s, opacity 0.15s; + color: var(--tt-gold); white-space: nowrap; } -.tt-home__btn--primary { - background: var(--tt-gold); - color: var(--tt-navy); -} - -.tt-home__btn--primary:hover { - background: #d4b87c; +/* Empty state */ +.tt-home__events-empty { + padding: 40px 0; + font-size: 0.9rem; + color: var(--tt-mid); + line-height: 1.6; } -.tt-home__btn--sold-out { - background: rgba(255, 255, 255, 0.1); - color: rgba(242, 240, 235, 0.4); - cursor: not-allowed; +.tt-home__events-empty a { + color: var(--tt-gold); + text-decoration: none; } +.tt-home__events-empty a:hover { text-decoration: underline; } -/* ─── 5. FAQ ──────────────────────────────────────────────── */ +/* ─── 4. FAQ ──────────────────────────────────────────────── */ .tt-home__faq { background: var(--tt-off-white); padding: 40px 0; @@ -431,9 +285,7 @@ border-top: 1px solid var(--tt-border); } -.tt-home__faq-q { - margin: 0; -} +.tt-home__faq-q { margin: 0; } .tt-home__faq-btn { display: flex; @@ -450,12 +302,8 @@ text-align: left; gap: 12px; } +.tt-home__faq-btn:hover { color: var(--tt-gold); } -.tt-home__faq-btn:hover { - color: var(--tt-gold); -} - -/* Plus/minus icon */ .tt-home__faq-icon { flex-shrink: 0; width: 16px; @@ -472,25 +320,18 @@ transition: transform 0.2s, opacity 0.2s; } -/* horizontal bar */ .tt-home__faq-icon::before { - top: 50%; - left: 0; - right: 0; + top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); } -/* vertical bar */ .tt-home__faq-icon::after { - top: 0; - bottom: 0; - left: 50%; + top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); } -/* When expanded, hide vertical bar (turns + into -) */ .tt-home__faq-btn[aria-expanded="true"] .tt-home__faq-icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); @@ -504,7 +345,13 @@ margin: 0; } -/* ─── 6. FOOTER ───────────────────────────────────────────── */ +.tt-home__faq-a a { + color: var(--tt-gold); + text-decoration: none; +} +.tt-home__faq-a a:hover { text-decoration: underline; } + +/* ─── 5. FOOTER ───────────────────────────────────────────── */ .tt-home__footer { background: var(--tt-navy); padding: 28px 0; @@ -522,7 +369,6 @@ font-size: 0.82rem; color: rgba(242, 240, 235, 0.45); margin: 0; - letter-spacing: 0.01em; } .tt-home__footer-links { @@ -538,7 +384,4 @@ text-decoration: none; transition: color 0.15s; } - -.tt-home__footer-link:hover { - color: var(--tt-gold); -} +.tt-home__footer-link:hover { color: var(--tt-gold); } diff --git a/sections/tt-event-header.liquid b/sections/tt-event-header.liquid new file mode 100644 index 00000000000..5e967c94255 --- /dev/null +++ b/sections/tt-event-header.liquid @@ -0,0 +1,108 @@ +{% comment %} + Trainers Travel — Event collection header + File: sections/tt-event-header.liquid + + Used in templates/collection.event.json. + Shows the collection title and description prominently at the top of an + event collection page. All event-specific details (hotel name, venue + proximity, dates, price comparison notes) live in the collection + description written in Shopify admin — no theme edits required. + + Also reads product tags to derive a status badge and starting price, + and surfaces an "all-in pricing" note inline. +{% endcomment %} + +{{ 'section-tt-event-header.css' | asset_url | stylesheet_tag }} + +{%- assign col = collection -%} + +{%- comment -%}Derive status and pricing from collection products{%- endcomment -%} +{%- assign eh_min_price = nil -%} +{%- assign eh_all_sold_out = true -%} +{%- assign eh_status_tag = '' -%} +{%- assign eh_date_str = '' -%} +{%- assign eh_city_str = '' -%} + +{%- for product in col.products limit: 20 -%} + {%- if product.available -%} + {%- assign eh_all_sold_out = false -%} + {%- endif -%} + {%- if eh_min_price == nil or product.price_min < eh_min_price -%} + {%- assign eh_min_price = product.price_min -%} + {%- endif -%} + {%- for tag in product.tags -%} + {%- if tag == 'status:selling-fast' and eh_status_tag == '' -%} + {%- assign eh_status_tag = 'selling-fast' -%} + {%- elsif tag == 'status:coming-soon' and eh_status_tag == '' -%} + {%- assign eh_status_tag = 'coming-soon' -%} + {%- endif -%} + {%- if tag contains 'event-date:' and eh_date_str == '' -%} + {%- assign eh_date_str = tag | remove: 'event-date:' -%} + {%- endif -%} + {%- if tag contains 'city:' and eh_city_str == '' -%} + {%- assign eh_city_str = tag | remove: 'city:' | capitalize -%} + {%- endif -%} + {%- endfor -%} +{%- endfor -%} + +{%- if eh_all_sold_out -%} + {%- assign eh_status_tag = 'sold-out' -%} +{%- elsif eh_status_tag == '' -%} + {%- assign eh_status_tag = 'available' -%} +{%- endif -%} + +<div class="tt-eh"> + <div class="tt-eh__inner"> + + <div class="tt-eh__top"> + <a href="/" class="tt-eh__back">← All events</a> + <span class="tt-eh__badge tt-eh__badge--{{ eh_status_tag }}"> + {%- case eh_status_tag -%} + {%- when 'sold-out' -%}Sold Out + {%- when 'selling-fast' -%}Selling Fast + {%- when 'coming-soon' -%}Coming Soon + {%- else -%}Now Booking + {%- endcase -%} + </span> + </div> + + <h1 class="tt-eh__title">{{ col.title }}</h1> + + {%- if eh_city_str != '' or eh_date_str != '' -%} + <p class="tt-eh__meta"> + {%- if eh_city_str != '' -%}{{ eh_city_str }}{%- endif -%} + {%- if eh_city_str != '' and eh_date_str != '' -%} · {%- endif -%} + {%- if eh_date_str != '' -%}{{ eh_date_str }}{%- endif -%} + </p> + {%- endif -%} + + {%- if col.description != blank -%} + <div class="tt-eh__description"> + {{ col.description }} + </div> + {%- endif -%} + + <div class="tt-eh__footer-bar"> + {%- if eh_min_price != nil -%} + <p class="tt-eh__pricing-note"> + {%- if eh_status_tag == 'sold-out' -%} + All rooms sold out. + {%- else -%} + From <strong>{{ eh_min_price | money }}</strong> — all taxes & fees included. + {%- endif -%} + </p> + {%- endif -%} + <p class="tt-eh__rooms-count">{{ col.products_count }} room type{%- if col.products_count != 1 -%}s{%- endif -%} available</p> + </div> + + </div> +</div> + +{% schema %} +{ + "name": "Event Header", + "tag": "div", + "class": "section", + "limit": 1 +} +{% endschema %} diff --git a/sections/tt-home.liquid b/sections/tt-home.liquid index a41e89f8127..c1bcd0c7d73 100644 --- a/sections/tt-home.liquid +++ b/sections/tt-home.liquid @@ -2,8 +2,18 @@ Trainers Travel — Homepage File: sections/tt-home.liquid - Single-page design: header → event → price comparison → buy → FAQ → footer. - No animated reveals, no particles, no campaign typography. Just the deal. + Multi-event architecture. No hardcoded event names here — ever. + The events grid reads from a Shopify navigation menu whose handle is + configured in section settings (default: "event-collections"). To add a + new event to the homepage: create the collection in admin, then add a link + to that collection in the "Event Collections" navigation menu. Done. + + Page structure: + 1. Header — minimal wordmark + contact link + 2. Hero — evergreen brand copy + CTA + 3. Events — dynamic grid from navigation menu + 4. FAQ — evergreen answers + 5. Footer — email + social {% endcomment %} {{ 'section-tt-home.css' | asset_url | stylesheet_tag }} @@ -11,7 +21,7 @@ <div class="tt-home"> {%- comment -%}═══════════════════════════════════════════════════════ - 1. HEADER — minimal wordmark + contact + 1. HEADER ═══════════════════════════════════════════════════════{%- endcomment -%} <header class="tt-home__header"> <div class="tt-home__header-inner"> @@ -25,198 +35,139 @@ </header> {%- comment -%}═══════════════════════════════════════════════════════ - 2. EVENT BLOCK + 2. HERO ═══════════════════════════════════════════════════════{%- endcomment -%} - <section class="tt-home__event"> + <section class="tt-home__hero"> <div class="tt-home__container"> - <p class="tt-home__eyebrow">{{ section.settings.event_eyebrow }}</p> - <h1 class="tt-home__event-name">{{ section.settings.event_name }}</h1> - <p class="tt-home__event-dates">{{ section.settings.event_subtitle }}</p> - <div class="tt-home__hotel-line"> - <span class="tt-home__hotel-name">{{ section.settings.hotel_name }}</span> - <span class="tt-home__hotel-sep" aria-hidden="true">—</span> - <span class="tt-home__hotel-proximity">{{ section.settings.hotel_proximity }}</span> - </div> + <h1 class="tt-home__hero-heading">Travel smarter.<br>Compete harder.</h1> + <p class="tt-home__hero-sub"> + Group hotel blocks for the competitive Pokémon TCG community. + All-in pricing. No hidden fees. Close to the venue. + </p> + <a href="{{ section.settings.events_cta_link | default: '/collections/all' }}" class="tt-home__btn tt-home__btn--primary"> + {{ section.settings.events_cta_text | default: 'View Events' }} + </a> </div> </section> {%- comment -%}═══════════════════════════════════════════════════════ - 3. PRICE COMPARISON + 3. EVENTS GRID — reads from navigation menu, zero theme edits needed + To add an event: create collection in admin → add to the + "Event Collections" menu (Online Store → Navigation). ═══════════════════════════════════════════════════════{%- endcomment -%} - <section class="tt-home__pricing"> + <section class="tt-home__events"> <div class="tt-home__container"> - <h2 class="tt-home__section-title">What nearby hotels actually cost</h2> - <div class="tt-home__compare"> + <h2 class="tt-home__section-title">Upcoming events</h2> - <div class="tt-home__compare-col tt-home__compare-col--theirs"> - <div class="tt-home__compare-header"> - <span class="tt-home__compare-label">Book on your own</span> - <span class="tt-home__compare-note">Google rate + 17% Indiana tax & city fees</span> - </div> - <ul class="tt-home__compare-list"> - <li class="tt-home__compare-item"> - <span class="tt-home__compare-hotel">Courtyard by Marriott</span> - <span class="tt-home__compare-price">$179<span class="tt-home__per-nt">/nt after tax</span></span> - </li> - <li class="tt-home__compare-item"> - <span class="tt-home__compare-hotel">Hyatt Place</span> - <span class="tt-home__compare-price">$179<span class="tt-home__per-nt">/nt after tax</span></span> - </li> - <li class="tt-home__compare-item"> - <span class="tt-home__compare-hotel">Crowne Plaza (direct)</span> - <span class="tt-home__compare-price">$205<span class="tt-home__per-nt">/nt after tax</span></span> - </li> - </ul> - </div> + {%- assign events_menu = linklists[section.settings.events_menu] -%} - <div class="tt-home__compare-col tt-home__compare-col--ours"> - <div class="tt-home__compare-header"> - <span class="tt-home__compare-label">Through us</span> - <span class="tt-home__compare-note">All-in. No hidden fees.</span> - </div> - <ul class="tt-home__compare-list"> - <li class="tt-home__compare-item tt-home__compare-item--highlight"> - <span class="tt-home__compare-hotel">Crowne Plaza — Skywalk connected</span> - <span class="tt-home__compare-price tt-home__compare-price--highlight">$179<span class="tt-home__per-nt">/nt all-in</span></span> - </li> - </ul> - </div> + {%- if events_menu.links.size > 0 -%} + <div class="tt-home__events-grid"> + {%- for link in events_menu.links -%} + {%- assign col = link.object -%} + {%- if col == blank -%}{%- continue -%}{%- endif -%} - </div> - <p class="tt-home__pricing-footnote"> - All hotel rates on Google are shown before Indiana’s 17% tax and city fees. Our price includes everything. - </p> - </div> - </section> + {%- comment -%} + Derive status + min price from collection products. + Status precedence: sold-out > selling-fast > coming-soon > available + We read product tags: status:sold-out, status:selling-fast, status:coming-soon + {%- endcomment -%} + {%- assign ec_min_price = nil -%} + {%- assign ec_all_sold_out = true -%} + {%- assign ec_has_available = false -%} + {%- assign ec_status_tag = '' -%} - {%- comment -%}═══════════════════════════════════════════════════════ - 4. BUY BUTTONS — product cards - ═══════════════════════════════════════════════════════{%- endcomment -%} - <section class="tt-home__buy" id="book"> - <div class="tt-home__container"> - <h2 class="tt-home__section-title">Book your room</h2> - <p class="tt-home__buy-sub">Non-refundable · Name transfer available at no charge · Confirmation within 24 hrs</p> + {%- for product in col.products limit: 20 -%} + {%- if product.available -%} + {%- assign ec_has_available = true -%} + {%- assign ec_all_sold_out = false -%} + {%- endif -%} + {%- if ec_min_price == nil or product.price_min < ec_min_price -%} + {%- assign ec_min_price = product.price_min -%} + {%- endif -%} + {%- for tag in product.tags -%} + {%- if tag == 'status:selling-fast' and ec_status_tag == '' -%} + {%- assign ec_status_tag = 'selling-fast' -%} + {%- elsif tag == 'status:coming-soon' and ec_status_tag == '' -%} + {%- assign ec_status_tag = 'coming-soon' -%} + {%- endif -%} + {%- endfor -%} + {%- endfor -%} - <div class="tt-home__cards"> + {%- if ec_all_sold_out -%} + {%- assign ec_status_tag = 'sold-out' -%} + {%- elsif ec_status_tag == '' -%} + {%- assign ec_status_tag = 'available' -%} + {%- endif -%} - {%- assign queen_handle = section.settings.product_queen -%} - {%- assign king_handle = section.settings.product_king -%} + {%- comment -%}Pull event-date tag for display{%- endcomment -%} + {%- assign ec_date_str = '' -%} + {%- assign ec_city_str = '' -%} + {%- for product in col.products limit: 5 -%} + {%- for tag in product.tags -%} + {%- if tag contains 'event-date:' and ec_date_str == '' -%} + {%- assign ec_date_str = tag | remove: 'event-date:' -%} + {%- endif -%} + {%- if tag contains 'city:' and ec_city_str == '' -%} + {%- assign ec_city_str = tag | remove: 'city:' | capitalize -%} + {%- endif -%} + {%- endfor -%} + {%- endfor -%} - {%- if queen_handle != blank -%} - {%- assign queen_product = all_products[queen_handle] -%} - {%- endif -%} - {%- if king_handle != blank -%} - {%- assign king_product = all_products[king_handle] -%} - {%- endif -%} + <a href="{{ col.url }}" class="tt-home__event-card tt-home__event-card--{{ ec_status_tag }}"> + <div class="tt-home__event-card-top"> + <span class="tt-home__event-badge tt-home__event-badge--{{ ec_status_tag }}"> + {%- case ec_status_tag -%} + {%- when 'sold-out' -%}Sold Out + {%- when 'selling-fast' -%}Selling Fast + {%- when 'coming-soon' -%}Coming Soon + {%- else -%}Now Booking + {%- endcase -%} + </span> + </div> + <div class="tt-home__event-card-body"> + <p class="tt-home__event-card-title">{{ col.title }}</p> + {%- if ec_city_str != '' or ec_date_str != '' -%} + <p class="tt-home__event-card-meta"> + {%- if ec_city_str != '' -%}{{ ec_city_str }}{%- endif -%} + {%- if ec_city_str != '' and ec_date_str != '' -%} · {%- endif -%} + {%- if ec_date_str != '' -%}{{ ec_date_str }}{%- endif -%} + </p> + {%- endif -%} + {%- if col.description != blank -%} + <p class="tt-home__event-card-desc">{{ col.description | strip_html | truncate: 120 }}</p> + {%- endif -%} + </div> + <div class="tt-home__event-card-footer"> + {%- if ec_min_price != nil and ec_status_tag != 'sold-out' -%} + <span class="tt-home__event-card-price"> + From {{ ec_min_price | money }} <span class="tt-home__event-card-price-note">all-in</span> + </span> + {%- endif -%} + <span class="tt-home__event-card-cta">View rooms →</span> + </div> + </a> - {%- comment -%}Double Queen card{%- endcomment -%} - {%- if queen_product and queen_product.available -%} - <div class="tt-home__card"> - <div class="tt-home__card-body"> - <p class="tt-home__card-room-type">Double Queen</p> - <p class="tt-home__card-name">{{ queen_product.title }}</p> - <p class="tt-home__card-specs"> - Breakfast credit included · Skywalk access · 4.2 ★, 4,500+ reviews - </p> - {%- if queen_product.variants.first.inventory_management != blank and queen_product.variants.first.inventory_quantity > 0 and queen_product.variants.first.inventory_quantity <= 10 -%} - <p class="tt-home__card-urgency">Only {{ queen_product.variants.first.inventory_quantity }} left</p> - {%- endif -%} - </div> - <div class="tt-home__card-footer"> - <p class="tt-home__card-price">{{ queen_product.price | money }}</p> - <form method="post" action="/cart/add"> - <input type="hidden" name="id" value="{{ queen_product.variants.first.id }}"> - <input type="hidden" name="quantity" value="1"> - <button type="submit" class="tt-home__btn tt-home__btn--primary"> - Add to Cart - </button> - </form> - </div> - </div> - {%- elsif queen_handle != blank -%} - {%- comment -%}Product handle set but sold out{%- endcomment -%} - <div class="tt-home__card tt-home__card--sold-out"> - <div class="tt-home__card-body"> - <p class="tt-home__card-room-type">Double Queen</p> - <p class="tt-home__card-name">{{ queen_product.title | default: 'Double Queen — 2-Night Stay' }}</p> - <p class="tt-home__card-specs">Breakfast credit included · Skywalk access · 4.2 ★, 4,500+ reviews</p> - </div> - <div class="tt-home__card-footer"> - <p class="tt-home__card-price">{{ queen_product.price | money | default: '$358' }}</p> - <button class="tt-home__btn tt-home__btn--sold-out" disabled>Sold Out</button> - </div> - </div> - {%- else -%} - {%- comment -%}No handle configured — show placeholder{%- endcomment -%} - <div class="tt-home__card"> - <div class="tt-home__card-body"> - <p class="tt-home__card-room-type">Double Queen</p> - <p class="tt-home__card-name">Crowne Plaza Indianapolis — 2 Nights</p> - <p class="tt-home__card-specs">Breakfast credit included · Skywalk access · 4.2 ★, 4,500+ reviews</p> - </div> - <div class="tt-home__card-footer"> - <p class="tt-home__card-price">$358</p> - <a href="/collections/all" class="tt-home__btn tt-home__btn--primary">View Rooms</a> - </div> - </div> - {%- endif -%} + {%- endfor -%} + </div> - {%- comment -%}King card{%- endcomment -%} - {%- if king_product and king_product.available -%} - <div class="tt-home__card"> - <div class="tt-home__card-body"> - <p class="tt-home__card-room-type">King</p> - <p class="tt-home__card-name">{{ king_product.title }}</p> - <p class="tt-home__card-specs"> - Breakfast credit included · Skywalk access · 4.2 ★, 4,500+ reviews - </p> - {%- if king_product.variants.first.inventory_management != blank and king_product.variants.first.inventory_quantity > 0 and king_product.variants.first.inventory_quantity <= 10 -%} - <p class="tt-home__card-urgency">Only {{ king_product.variants.first.inventory_quantity }} left</p> - {%- endif -%} - </div> - <div class="tt-home__card-footer"> - <p class="tt-home__card-price">{{ king_product.price | money }}</p> - <form method="post" action="/cart/add"> - <input type="hidden" name="id" value="{{ king_product.variants.first.id }}"> - <input type="hidden" name="quantity" value="1"> - <button type="submit" class="tt-home__btn tt-home__btn--primary"> - Add to Cart - </button> - </form> - </div> - </div> - {%- elsif king_handle != blank -%} - <div class="tt-home__card tt-home__card--sold-out"> - <div class="tt-home__card-body"> - <p class="tt-home__card-room-type">King</p> - <p class="tt-home__card-name">{{ king_product.title | default: 'King — 2-Night Stay' }}</p> - <p class="tt-home__card-specs">Breakfast credit included · Skywalk access · 4.2 ★, 4,500+ reviews</p> - </div> - <div class="tt-home__card-footer"> - <p class="tt-home__card-price">{{ king_product.price | money | default: '$358' }}</p> - <button class="tt-home__btn tt-home__btn--sold-out" disabled>Sold Out</button> - </div> - </div> - {%- else -%} - <div class="tt-home__card"> - <div class="tt-home__card-body"> - <p class="tt-home__card-room-type">King</p> - <p class="tt-home__card-name">Crowne Plaza Indianapolis — 2 Nights</p> - <p class="tt-home__card-specs">Breakfast credit included · Skywalk access · 4.2 ★, 4,500+ reviews</p> - </div> - <div class="tt-home__card-footer"> - <p class="tt-home__card-price">$358</p> - <a href="/collections/all" class="tt-home__btn tt-home__btn--primary">View Rooms</a> - </div> - </div> - {%- endif -%} + {%- else -%} + <div class="tt-home__events-empty"> + <p>Events coming soon — check back shortly or follow us for updates.</p> + {%- if section.settings.contact_email != blank -%} + <p> + Want early access? + <a href="mailto:{{ section.settings.contact_email }}">{{ section.settings.contact_email }}</a> + </p> + {%- endif -%} + </div> + {%- endif -%} - </div> </div> </section> {%- comment -%}═══════════════════════════════════════════════════════ - 5. FAQ — accordion + 4. FAQ ═══════════════════════════════════════════════════════{%- endcomment -%} <section class="tt-home__faq"> <div class="tt-home__container"> @@ -324,7 +275,7 @@ </section> {%- comment -%}═══════════════════════════════════════════════════════ - 6. FOOTER — minimal + 5. FOOTER ═══════════════════════════════════════════════════════{%- endcomment -%} <footer class="tt-home__footer"> <div class="tt-home__container"> @@ -353,20 +304,14 @@ </div> <script> - // Minimal accordion for FAQ — no library, no animation library. (function () { var btns = document.querySelectorAll('.tt-home__faq-btn'); btns.forEach(function (btn) { btn.addEventListener('click', function () { var expanded = this.getAttribute('aria-expanded') === 'true'; - var targetId = this.getAttribute('aria-controls'); - var answer = document.getElementById(targetId); + var answer = document.getElementById(this.getAttribute('aria-controls')); this.setAttribute('aria-expanded', String(!expanded)); - if (expanded) { - answer.hidden = true; - } else { - answer.hidden = false; - } + answer.hidden = expanded; }); }); })(); @@ -384,53 +329,29 @@ "settings": [ { "type": "header", - "content": "Event" - }, - { - "type": "text", - "id": "event_eyebrow", - "label": "Eyebrow text", - "default": "Now booking" - }, - { - "type": "text", - "id": "event_name", - "label": "Event name", - "default": "Indianapolis Regional" + "content": "Events" }, { "type": "text", - "id": "event_subtitle", - "label": "Event subtitle", - "default": "Pokémon TCG Regional Championship — May 29–31, 2026" - }, - { - "type": "text", - "id": "hotel_name", - "label": "Hotel name", - "default": "Crowne Plaza Indianapolis Downtown Union Station" - }, - { - "type": "text", - "id": "hotel_proximity", - "label": "Proximity line", - "default": "Closest Skywalk-connected hotel to Halls H & I" + "id": "events_menu", + "label": "Event collections menu handle", + "default": "event-collections", + "info": "Create a navigation menu in Online Store → Navigation. Set its handle to match this value. Add a link to each event collection. The grid updates automatically." }, { "type": "header", - "content": "Products" + "content": "Hero CTA" }, { "type": "text", - "id": "product_queen", - "label": "Double Queen product handle", - "info": "Enter the product handle (URL slug) for the Double Queen room product." + "id": "events_cta_text", + "label": "Button text", + "default": "View Events" }, { - "type": "text", - "id": "product_king", - "label": "King product handle", - "info": "Enter the product handle (URL slug) for the King room product." + "type": "url", + "id": "events_cta_link", + "label": "Button link" }, { "type": "header", @@ -462,11 +383,8 @@ { "name": "TT Home", "settings": { - "event_eyebrow": "Now booking", - "event_name": "Indianapolis Regional", - "event_subtitle": "Pokémon TCG Regional Championship — May 29–31, 2026", - "hotel_name": "Crowne Plaza Indianapolis Downtown Union Station", - "hotel_proximity": "Closest Skywalk-connected hotel to Halls H & I", + "events_menu": "event-collections", + "events_cta_text": "View Events", "contact_email": "contact@trainerstravel.com" } } diff --git a/templates/collection.event.json b/templates/collection.event.json new file mode 100644 index 00000000000..b5f190f779e --- /dev/null +++ b/templates/collection.event.json @@ -0,0 +1,28 @@ +{ + "sections": { + "tt_event_header": { + "type": "tt-event-header", + "settings": {} + }, + "product-grid": { + "type": "main-collection-product-grid", + "settings": { + "products_per_page": 16, + "columns_desktop": 3, + "image_ratio": "adapt", + "show_secondary_image": false, + "show_vendor": false, + "show_rating": false, + "enable_filtering": false, + "enable_sorting": false, + "columns_mobile": "1", + "padding_top": 28, + "padding_bottom": 36 + } + } + }, + "order": [ + "tt_event_header", + "product-grid" + ] +} diff --git a/templates/index.json b/templates/index.json index db839e8f997..7c75fc2c4ef 100644 --- a/templates/index.json +++ b/templates/index.json @@ -3,13 +3,9 @@ "tt_home": { "type": "tt-home", "settings": { - "event_eyebrow": "Now booking", - "event_name": "Indianapolis Regional", - "event_subtitle": "Pokémon TCG Regional Championship — May 29–31, 2026", - "hotel_name": "Crowne Plaza Indianapolis Downtown Union Station", - "hotel_proximity": "Closest Skywalk-connected hotel to Halls H & I", - "product_queen": "", - "product_king": "", + "events_menu": "event-collections", + "events_cta_text": "View Events", + "events_cta_link": "", "contact_email": "contact@trainerstravel.com", "social_x": "", "social_instagram": "", From 9741f50f0d8a9f8f32cf519f2926619ce4c47b84 Mon Sep 17 00:00:00 2001 From: trainerstravel <contact@trainerstravel.com> Date: Wed, 22 Apr 2026 10:58:27 -0400 Subject: [PATCH 10/16] =?UTF-8?q?Fix=20events=20grid=20=E2=80=94=20block-b?= =?UTF-8?q?ased=20fallback=20so=20events=20show=20immediately?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously the grid only read from a Shopify nav menu that didn't exist yet, so visitors saw an empty state. Now: - Section blocks (collection pickers in theme editor) are used when the nav menu isn't set up — add an Event block, pick a collection, done. - Nav menu (event-collections) takes over automatically if it exists, which is the zero-maintenance path for when there are many overlapping events. - Indianapolis block pre-wired in index.json (collection handle: indianapolis-regional-2026) — update the handle if yours differs. - Card rendering extracted to snippets/tt-event-card.liquid so both code paths produce identical markup. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --- sections/tt-home.liquid | 129 ++++++++++++---------------------- snippets/tt-event-card.liquid | 75 ++++++++++++++++++++ templates/index.json | 9 +++ 3 files changed, 127 insertions(+), 86 deletions(-) create mode 100644 snippets/tt-event-card.liquid diff --git a/sections/tt-home.liquid b/sections/tt-home.liquid index c1bcd0c7d73..7c1a613e22e 100644 --- a/sections/tt-home.liquid +++ b/sections/tt-home.liquid @@ -51,104 +51,47 @@ </section> {%- comment -%}═══════════════════════════════════════════════════════ - 3. EVENTS GRID — reads from navigation menu, zero theme edits needed - To add an event: create collection in admin → add to the - "Event Collections" menu (Online Store → Navigation). + 3. EVENTS GRID + Priority order: + 1. Nav menu (handle: events_menu setting) — automatic, scales forever + 2. Section blocks — manual collection pickers, use these right now + 3. Empty state — only shows if neither is configured ═══════════════════════════════════════════════════════{%- endcomment -%} <section class="tt-home__events"> <div class="tt-home__container"> <h2 class="tt-home__section-title">Upcoming events</h2> {%- assign events_menu = linklists[section.settings.events_menu] -%} + {%- assign use_menu = false -%} + {%- if events_menu != blank and events_menu.links.size > 0 -%} + {%- assign use_menu = true -%} + {%- endif -%} - {%- if events_menu.links.size > 0 -%} - <div class="tt-home__events-grid"> - {%- for link in events_menu.links -%} - {%- assign col = link.object -%} - {%- if col == blank -%}{%- continue -%}{%- endif -%} + {%- comment -%}Build the list of collections to render{%- endcomment -%} + {%- assign ec_cols = '' -%} - {%- comment -%} - Derive status + min price from collection products. - Status precedence: sold-out > selling-fast > coming-soon > available - We read product tags: status:sold-out, status:selling-fast, status:coming-soon - {%- endcomment -%} - {%- assign ec_min_price = nil -%} - {%- assign ec_all_sold_out = true -%} - {%- assign ec_has_available = false -%} - {%- assign ec_status_tag = '' -%} + {%- if use_menu or section.blocks.size > 0 -%} + <div class="tt-home__events-grid"> - {%- for product in col.products limit: 20 -%} - {%- if product.available -%} - {%- assign ec_has_available = true -%} - {%- assign ec_all_sold_out = false -%} - {%- endif -%} - {%- if ec_min_price == nil or product.price_min < ec_min_price -%} - {%- assign ec_min_price = product.price_min -%} - {%- endif -%} - {%- for tag in product.tags -%} - {%- if tag == 'status:selling-fast' and ec_status_tag == '' -%} - {%- assign ec_status_tag = 'selling-fast' -%} - {%- elsif tag == 'status:coming-soon' and ec_status_tag == '' -%} - {%- assign ec_status_tag = 'coming-soon' -%} - {%- endif -%} - {%- endfor -%} + {%- comment -%}——— Source: nav menu ———{%- endcomment -%} + {%- if use_menu -%} + {%- for link in events_menu.links -%} + {%- assign col = link.object -%} + {%- if col == blank -%}{%- continue -%}{%- endif -%} + {%- render 'tt-event-card', col: col -%} {%- endfor -%} - {%- if ec_all_sold_out -%} - {%- assign ec_status_tag = 'sold-out' -%} - {%- elsif ec_status_tag == '' -%} - {%- assign ec_status_tag = 'available' -%} - {%- endif -%} - - {%- comment -%}Pull event-date tag for display{%- endcomment -%} - {%- assign ec_date_str = '' -%} - {%- assign ec_city_str = '' -%} - {%- for product in col.products limit: 5 -%} - {%- for tag in product.tags -%} - {%- if tag contains 'event-date:' and ec_date_str == '' -%} - {%- assign ec_date_str = tag | remove: 'event-date:' -%} - {%- endif -%} - {%- if tag contains 'city:' and ec_city_str == '' -%} - {%- assign ec_city_str = tag | remove: 'city:' | capitalize -%} - {%- endif -%} - {%- endfor -%} + {%- comment -%}——— Source: section blocks ———{%- endcomment -%} + {%- else -%} + {%- for block in section.blocks -%} + {%- if block.type == 'event' -%} + {%- assign col = collections[block.settings.collection] -%} + {%- if col == blank -%}{%- continue -%}{%- endif -%} + {%- render 'tt-event-card', col: col, block: block -%} + {%- endif -%} {%- endfor -%} + {%- endif -%} - <a href="{{ col.url }}" class="tt-home__event-card tt-home__event-card--{{ ec_status_tag }}"> - <div class="tt-home__event-card-top"> - <span class="tt-home__event-badge tt-home__event-badge--{{ ec_status_tag }}"> - {%- case ec_status_tag -%} - {%- when 'sold-out' -%}Sold Out - {%- when 'selling-fast' -%}Selling Fast - {%- when 'coming-soon' -%}Coming Soon - {%- else -%}Now Booking - {%- endcase -%} - </span> - </div> - <div class="tt-home__event-card-body"> - <p class="tt-home__event-card-title">{{ col.title }}</p> - {%- if ec_city_str != '' or ec_date_str != '' -%} - <p class="tt-home__event-card-meta"> - {%- if ec_city_str != '' -%}{{ ec_city_str }}{%- endif -%} - {%- if ec_city_str != '' and ec_date_str != '' -%} · {%- endif -%} - {%- if ec_date_str != '' -%}{{ ec_date_str }}{%- endif -%} - </p> - {%- endif -%} - {%- if col.description != blank -%} - <p class="tt-home__event-card-desc">{{ col.description | strip_html | truncate: 120 }}</p> - {%- endif -%} - </div> - <div class="tt-home__event-card-footer"> - {%- if ec_min_price != nil and ec_status_tag != 'sold-out' -%} - <span class="tt-home__event-card-price"> - From {{ ec_min_price | money }} <span class="tt-home__event-card-price-note">all-in</span> - </span> - {%- endif -%} - <span class="tt-home__event-card-cta">View rooms →</span> - </div> - </a> - - {%- endfor -%} </div> {%- else -%} @@ -336,7 +279,7 @@ "id": "events_menu", "label": "Event collections menu handle", "default": "event-collections", - "info": "Create a navigation menu in Online Store → Navigation. Set its handle to match this value. Add a link to each event collection. The grid updates automatically." + "info": "Advanced: create a navigation menu in Online Store → Navigation with this handle, add each event collection as a link, and the grid populates automatically. While that menu doesn't exist, the 'Event' blocks below are used instead." }, { "type": "header", @@ -379,6 +322,20 @@ "label": "Discord URL" } ], + "blocks": [ + { + "type": "event", + "name": "Event", + "settings": [ + { + "type": "collection", + "id": "collection", + "label": "Event collection", + "info": "Pick an event collection. The card title, description, pricing, and status badge are all read from the collection automatically." + } + ] + } + ], "presets": [ { "name": "TT Home", diff --git a/snippets/tt-event-card.liquid b/snippets/tt-event-card.liquid new file mode 100644 index 00000000000..dd37ff8a165 --- /dev/null +++ b/snippets/tt-event-card.liquid @@ -0,0 +1,75 @@ +{% comment %} + Renders a single event card. + Usage: {% render 'tt-event-card', col: collection_object %} + + Derives status badge and starting price from product tags. + Reads city: and event-date: tags for meta line. +{% endcomment %} + +{%- assign ec_min_price = nil -%} +{%- assign ec_all_sold_out = true -%} +{%- assign ec_status_tag = '' -%} +{%- assign ec_date_str = '' -%} +{%- assign ec_city_str = '' -%} + +{%- for product in col.products limit: 20 -%} + {%- if product.available -%} + {%- assign ec_all_sold_out = false -%} + {%- endif -%} + {%- if ec_min_price == nil or product.price_min < ec_min_price -%} + {%- assign ec_min_price = product.price_min -%} + {%- endif -%} + {%- for tag in product.tags -%} + {%- if tag == 'status:selling-fast' and ec_status_tag == '' -%} + {%- assign ec_status_tag = 'selling-fast' -%} + {%- elsif tag == 'status:coming-soon' and ec_status_tag == '' -%} + {%- assign ec_status_tag = 'coming-soon' -%} + {%- endif -%} + {%- if tag contains 'event-date:' and ec_date_str == '' -%} + {%- assign ec_date_str = tag | remove: 'event-date:' -%} + {%- endif -%} + {%- if tag contains 'city:' and ec_city_str == '' -%} + {%- assign ec_city_str = tag | remove: 'city:' | capitalize -%} + {%- endif -%} + {%- endfor -%} +{%- endfor -%} + +{%- if ec_all_sold_out -%} + {%- assign ec_status_tag = 'sold-out' -%} +{%- elsif ec_status_tag == '' -%} + {%- assign ec_status_tag = 'available' -%} +{%- endif -%} + +<a href="{{ col.url }}" class="tt-home__event-card tt-home__event-card--{{ ec_status_tag }}"> + <div class="tt-home__event-card-top"> + <span class="tt-home__event-badge tt-home__event-badge--{{ ec_status_tag }}"> + {%- case ec_status_tag -%} + {%- when 'sold-out' -%}Sold Out + {%- when 'selling-fast' -%}Selling Fast + {%- when 'coming-soon' -%}Coming Soon + {%- else -%}Now Booking + {%- endcase -%} + </span> + </div> + <div class="tt-home__event-card-body"> + <p class="tt-home__event-card-title">{{ col.title }}</p> + {%- if ec_city_str != '' or ec_date_str != '' -%} + <p class="tt-home__event-card-meta"> + {%- if ec_city_str != '' -%}{{ ec_city_str }}{%- endif -%} + {%- if ec_city_str != '' and ec_date_str != '' -%} · {%- endif -%} + {%- if ec_date_str != '' -%}{{ ec_date_str }}{%- endif -%} + </p> + {%- endif -%} + {%- if col.description != blank -%} + <p class="tt-home__event-card-desc">{{ col.description | strip_html | truncate: 120 }}</p> + {%- endif -%} + </div> + <div class="tt-home__event-card-footer"> + {%- if ec_min_price != nil and ec_status_tag != 'sold-out' -%} + <span class="tt-home__event-card-price"> + From {{ ec_min_price | money }} <span class="tt-home__event-card-price-note">all-in</span> + </span> + {%- endif -%} + <span class="tt-home__event-card-cta">View rooms →</span> + </div> +</a> diff --git a/templates/index.json b/templates/index.json index 7c75fc2c4ef..1e1a346b282 100644 --- a/templates/index.json +++ b/templates/index.json @@ -2,6 +2,15 @@ "sections": { "tt_home": { "type": "tt-home", + "blocks": { + "indy-2026": { + "type": "event", + "settings": { + "collection": "indianapolis-regional-2026" + } + } + }, + "block_order": ["indy-2026"], "settings": { "events_menu": "event-collections", "events_cta_text": "View Events", From ea6c86a5a389e505016c387cd360bd2d25958ca6 Mon Sep 17 00:00:00 2001 From: trainerstravel <contact@trainerstravel.com> Date: Wed, 22 Apr 2026 11:13:01 -0400 Subject: [PATCH 11/16] Add NAIC + Worlds coming soon cards; fix empty collection badge --- snippets/tt-event-card.liquid | 4 +++- templates/index.json | 14 +++++++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/snippets/tt-event-card.liquid b/snippets/tt-event-card.liquid index dd37ff8a165..671ea376ba1 100644 --- a/snippets/tt-event-card.liquid +++ b/snippets/tt-event-card.liquid @@ -34,7 +34,9 @@ {%- endfor -%} {%- endfor -%} -{%- if ec_all_sold_out -%} +{%- if col.products_count == 0 -%} + {%- assign ec_status_tag = 'coming-soon' -%} +{%- elsif ec_all_sold_out -%} {%- assign ec_status_tag = 'sold-out' -%} {%- elsif ec_status_tag == '' -%} {%- assign ec_status_tag = 'available' -%} diff --git a/templates/index.json b/templates/index.json index 1e1a346b282..e07d1be0326 100644 --- a/templates/index.json +++ b/templates/index.json @@ -8,9 +8,21 @@ "settings": { "collection": "indianapolis-regional-2026" } + }, + "naic-2026": { + "type": "event", + "settings": { + "collection": "naic-2026" + } + }, + "worlds-2026": { + "type": "event", + "settings": { + "collection": "worlds-2026" + } } }, - "block_order": ["indy-2026"], + "block_order": ["indy-2026", "naic-2026", "worlds-2026"], "settings": { "events_menu": "event-collections", "events_cta_text": "View Events", From 337a10ff9ccc41f8fd5673574d39e0d8932bbe25 Mon Sep 17 00:00:00 2001 From: trainerstravel <contact@trainerstravel.com> Date: Wed, 22 Apr 2026 11:20:26 -0400 Subject: [PATCH 12/16] Add NAIC + Worlds dates/cities; date override for no-product cards --- sections/tt-home.liquid | 12 ++++++++++++ snippets/tt-event-card.liquid | 22 +++++++++++++++++----- templates/index.json | 12 +++++++++--- 3 files changed, 38 insertions(+), 8 deletions(-) diff --git a/sections/tt-home.liquid b/sections/tt-home.liquid index 7c1a613e22e..db0ab1e0d3e 100644 --- a/sections/tt-home.liquid +++ b/sections/tt-home.liquid @@ -332,6 +332,18 @@ "id": "collection", "label": "Event collection", "info": "Pick an event collection. The card title, description, pricing, and status badge are all read from the collection automatically." + }, + { + "type": "text", + "id": "event_date", + "label": "Date override", + "info": "Shown on the card. Use this when the collection has no products yet (e.g. coming soon events). Example: June 12–14, 2026" + }, + { + "type": "text", + "id": "event_city", + "label": "City override", + "info": "Shown on the card alongside the date. Example: New Orleans, LA" } ] } diff --git a/snippets/tt-event-card.liquid b/snippets/tt-event-card.liquid index 671ea376ba1..4c9351efb7f 100644 --- a/snippets/tt-event-card.liquid +++ b/snippets/tt-event-card.liquid @@ -1,9 +1,11 @@ {% comment %} Renders a single event card. - Usage: {% render 'tt-event-card', col: collection_object %} + Usage: {% render 'tt-event-card', col: collection_object, block: block %} - Derives status badge and starting price from product tags. - Reads city: and event-date: tags for meta line. + - Status badge + min price derived from product tags. + - city: and event-date: product tags populate the meta line. + - block.settings.event_date / event_city override the meta line when + no products exist yet (coming soon events). {% endcomment %} {%- assign ec_min_price = nil -%} @@ -34,6 +36,14 @@ {%- endfor -%} {%- endfor -%} +{%- comment -%}Block overrides — used for coming soon events with no products{%- endcomment -%} +{%- if ec_date_str == '' and block != blank and block.settings.event_date != blank -%} + {%- assign ec_date_str = block.settings.event_date -%} +{%- endif -%} +{%- if ec_city_str == '' and block != blank and block.settings.event_city != blank -%} + {%- assign ec_city_str = block.settings.event_city -%} +{%- endif -%} + {%- if col.products_count == 0 -%} {%- assign ec_status_tag = 'coming-soon' -%} {%- elsif ec_all_sold_out -%} @@ -67,11 +77,13 @@ {%- endif -%} </div> <div class="tt-home__event-card-footer"> - {%- if ec_min_price != nil and ec_status_tag != 'sold-out' -%} + {%- if ec_min_price != nil and ec_status_tag != 'sold-out' and ec_status_tag != 'coming-soon' -%} <span class="tt-home__event-card-price"> From {{ ec_min_price | money }} <span class="tt-home__event-card-price-note">all-in</span> </span> {%- endif -%} - <span class="tt-home__event-card-cta">View rooms →</span> + <span class="tt-home__event-card-cta"> + {%- if ec_status_tag == 'coming-soon' -%}Notify me →{%- else -%}View rooms →{%- endif -%} + </span> </div> </a> diff --git a/templates/index.json b/templates/index.json index e07d1be0326..91321e715a6 100644 --- a/templates/index.json +++ b/templates/index.json @@ -6,19 +6,25 @@ "indy-2026": { "type": "event", "settings": { - "collection": "indianapolis-regional-2026" + "collection": "indianapolis-regional-2026", + "event_date": "May 29\u201331, 2026", + "event_city": "Indianapolis, IN" } }, "naic-2026": { "type": "event", "settings": { - "collection": "naic-2026" + "collection": "naic-2026", + "event_date": "June 12\u201314, 2026", + "event_city": "New Orleans, LA" } }, "worlds-2026": { "type": "event", "settings": { - "collection": "worlds-2026" + "collection": "worlds-2026", + "event_date": "August 28\u201330, 2026", + "event_city": "San Francisco, CA" } } }, From a82309b51683ebf488042a7da31c91c8de65ddc2 Mon Sep 17 00:00:00 2001 From: trainerstravel <contact@trainerstravel.com> Date: Wed, 22 Apr 2026 11:27:58 -0400 Subject: [PATCH 13/16] =?UTF-8?q?Fix=20coming-soon=20collection=20pages=20?= =?UTF-8?q?=E2=80=94=20badge,=20empty=20grid,=20footer=20cleanup?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/section-tt-event-header.css | 8 ++++++ sections/footer-group.json | 43 ++++++------------------------ sections/tt-event-header.liquid | 39 ++++++++++++++++++--------- 3 files changed, 42 insertions(+), 48 deletions(-) diff --git a/assets/section-tt-event-header.css b/assets/section-tt-event-header.css index 5bd9d5be88c..5bc939e0a79 100644 --- a/assets/section-tt-event-header.css +++ b/assets/section-tt-event-header.css @@ -124,3 +124,11 @@ color: rgba(242, 240, 235, 0.4); margin: 0; } + +.tt-eh__coming-soon-note { + font-size: 0.88rem; + color: rgba(242, 240, 235, 0.5); + padding-top: 1rem; + border-top: 1px solid rgba(255, 255, 255, 0.08); + margin-top: 0.5rem; +} diff --git a/sections/footer-group.json b/sections/footer-group.json index a9263d9b541..cbeb8effdbe 100644 --- a/sections/footer-group.json +++ b/sections/footer-group.json @@ -4,46 +4,19 @@ "sections": { "footer": { "type": "footer", - "blocks": { - "footer-0": { - "type": "link_list", - "settings": { - "heading": "Quick links", - "menu": "footer" - } - }, - "footer-1": { - "type": "link_list", - "settings": { - "heading": "Info", - "menu": "footer" - } - }, - "footer-2": { - "type": "text", - "settings": { - "heading": "Our mission", - "subtext": "<p>Share contact information, store details, and brand content with your customers.<\/p>" - } - } - }, - "block_order": [ - "footer-0", - "footer-1", - "footer-2" - ], + "blocks": {}, + "block_order": [], "settings": { "color_scheme": "scheme-1", - "newsletter_enable": true, - "newsletter_heading": "Subscribe to our emails", - "show_social": true, + "newsletter_enable": false, + "show_social": false, "enable_country_selector": false, "enable_language_selector": false, - "payment_enable": true, + "payment_enable": false, "show_policy": false, - "margin_top": 48, - "padding_top": 36, - "padding_bottom": 36 + "margin_top": 0, + "padding_top": 20, + "padding_bottom": 20 } } }, diff --git a/sections/tt-event-header.liquid b/sections/tt-event-header.liquid index 5e967c94255..e6b33875641 100644 --- a/sections/tt-event-header.liquid +++ b/sections/tt-event-header.liquid @@ -45,12 +45,19 @@ {%- endfor -%} {%- endfor -%} -{%- if eh_all_sold_out -%} +{%- if col.products_count == 0 -%} + {%- assign eh_status_tag = 'coming-soon' -%} +{%- elsif eh_all_sold_out -%} {%- assign eh_status_tag = 'sold-out' -%} {%- elsif eh_status_tag == '' -%} {%- assign eh_status_tag = 'available' -%} {%- endif -%} +{%- comment -%}When the collection is empty, hide the Dawn product grid that follows{%- endcomment -%} +{%- if col.products_count == 0 -%} + <style>.shopify-section-{{ section.id }} ~ .shopify-section { display: none !important; }</style> +{%- endif -%} + <div class="tt-eh"> <div class="tt-eh__inner"> @@ -82,18 +89,24 @@ </div> {%- endif -%} - <div class="tt-eh__footer-bar"> - {%- if eh_min_price != nil -%} - <p class="tt-eh__pricing-note"> - {%- if eh_status_tag == 'sold-out' -%} - All rooms sold out. - {%- else -%} - From <strong>{{ eh_min_price | money }}</strong> — all taxes & fees included. - {%- endif -%} - </p> - {%- endif -%} - <p class="tt-eh__rooms-count">{{ col.products_count }} room type{%- if col.products_count != 1 -%}s{%- endif -%} available</p> - </div> + {%- if eh_status_tag == 'coming-soon' -%} + <div class="tt-eh__coming-soon-note"> + Hotel block not yet open. Follow us for updates when rooms become available. + </div> + {%- else -%} + <div class="tt-eh__footer-bar"> + {%- if eh_min_price != nil -%} + <p class="tt-eh__pricing-note"> + {%- if eh_status_tag == 'sold-out' -%} + All rooms sold out. + {%- else -%} + From <strong>{{ eh_min_price | money }}</strong> — all taxes & fees included. + {%- endif -%} + </p> + {%- endif -%} + <p class="tt-eh__rooms-count">{{ col.products_count }} room type{%- if col.products_count != 1 -%}s{%- endif -%} available</p> + </div> + {%- endif -%} </div> </div> From 508ae1b065bebaf239be3496bc164f204b9a6081 Mon Sep 17 00:00:00 2001 From: trainerstravel <contact@trainerstravel.com> Date: Wed, 22 Apr 2026 11:31:38 -0400 Subject: [PATCH 14/16] =?UTF-8?q?Add=20coming-soon=20body=20to=20event=20p?= =?UTF-8?q?ages=20=E2=80=94=20confirmed=20info=20+=20what's=20coming=20+?= =?UTF-8?q?=20contact=20CTA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/section-tt-event-header.css | 94 ++++++++++++++++++++++++++++-- sections/tt-event-header.liquid | 47 ++++++++++++++- 2 files changed, 133 insertions(+), 8 deletions(-) diff --git a/assets/section-tt-event-header.css b/assets/section-tt-event-header.css index 5bc939e0a79..885a0e44419 100644 --- a/assets/section-tt-event-header.css +++ b/assets/section-tt-event-header.css @@ -125,10 +125,94 @@ margin: 0; } -.tt-eh__coming-soon-note { - font-size: 0.88rem; - color: rgba(242, 240, 235, 0.5); - padding-top: 1rem; +/* ─── Coming soon body ───────────────────────────────────── */ +.tt-eh__coming-soon-body { + margin-top: 1.5rem; + padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); - margin-top: 0.5rem; +} + +.tt-eh__cs-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 24px 40px; + margin-bottom: 2rem; +} + +@media (max-width: 560px) { + .tt-eh__cs-grid { + grid-template-columns: 1fr; + gap: 20px; + } +} + +.tt-eh__cs-label { + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--tt-gold); + margin: 0 0 0.75rem; +} + +.tt-eh__cs-list { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 8px; +} + +.tt-eh__cs-list li { + font-size: 0.88rem; + color: rgba(242, 240, 235, 0.7); + line-height: 1.45; + padding-left: 14px; + position: relative; +} + +.tt-eh__cs-list li::before { + content: '—'; + position: absolute; + left: 0; + color: var(--tt-gold); + opacity: 0.6; + font-size: 0.75rem; + top: 0.1em; +} + +.tt-eh__cs-cta { + padding-top: 1.5rem; + border-top: 1px solid rgba(255, 255, 255, 0.06); + display: flex; + align-items: center; + gap: 20px; + flex-wrap: wrap; +} + +.tt-eh__cs-cta p { + font-size: 0.85rem; + color: rgba(242, 240, 235, 0.45); + margin: 0; + flex: 1; + min-width: 180px; +} + +.tt-eh__cs-btn { + display: inline-block; + font-size: 0.82rem; + font-weight: 700; + color: var(--tt-gold); + text-decoration: none; + border: 1px solid rgba(200, 169, 110, 0.35); + padding: 8px 16px; + border-radius: 4px; + white-space: nowrap; + transition: border-color 0.15s, background 0.15s; +} + +.tt-eh__cs-btn:hover { + border-color: var(--tt-gold); + background: rgba(200, 169, 110, 0.08); } diff --git a/sections/tt-event-header.liquid b/sections/tt-event-header.liquid index e6b33875641..47d54179527 100644 --- a/sections/tt-event-header.liquid +++ b/sections/tt-event-header.liquid @@ -90,8 +90,41 @@ {%- endif -%} {%- if eh_status_tag == 'coming-soon' -%} - <div class="tt-eh__coming-soon-note"> - Hotel block not yet open. Follow us for updates when rooms become available. + <div class="tt-eh__coming-soon-body"> + <div class="tt-eh__cs-grid"> + <div class="tt-eh__cs-col"> + <p class="tt-eh__cs-label">What’s confirmed</p> + <ul class="tt-eh__cs-list"> + {%- if eh_date_str != '' -%} + <li>{{ eh_date_str }}</li> + {%- elsif col.description contains 'June' or col.description contains 'July' or col.description contains 'August' or col.description contains 'May' -%} + {%- comment -%}date in description, skip — already shown above{%- endcomment -%} + {%- endif -%} + {%- if eh_city_str != '' -%} + <li>{{ eh_city_str }}</li> + {%- endif -%} + {%- if col.description != blank -%} + {%- assign desc_text = col.description | strip_html -%} + <li>{{ desc_text | truncate: 120 }}</li> + {%- endif -%} + </ul> + </div> + <div class="tt-eh__cs-col"> + <p class="tt-eh__cs-label">What’s coming</p> + <ul class="tt-eh__cs-list"> + <li>Group hotel block at a negotiated rate</li> + <li>All-in pricing — taxes and fees included</li> + <li>Venue-proximity selection</li> + <li>One-click booking, no loyalty account needed</li> + </ul> + </div> + </div> + <div class="tt-eh__cs-cta"> + <p>We’ll announce when rooms open. Follow us or reach out directly.</p> + <a href="mailto:{{ section.settings.notify_email | default: 'contact@trainerstravel.com' }}" class="tt-eh__cs-btn"> + contact@trainerstravel.com + </a> + </div> </div> {%- else -%} <div class="tt-eh__footer-bar"> @@ -116,6 +149,14 @@ "name": "Event Header", "tag": "div", "class": "section", - "limit": 1 + "limit": 1, + "settings": [ + { + "type": "text", + "id": "notify_email", + "label": "Contact email (coming soon CTA)", + "default": "contact@trainerstravel.com" + } + ] } {% endschema %} From 3e16716d67bdcdbb21f146e06e0487ab6936a206 Mon Sep 17 00:00:00 2001 From: trainerstravel <contact@trainerstravel.com> Date: Wed, 22 Apr 2026 11:43:37 -0400 Subject: [PATCH 15/16] Lead hero with price savings; widen layout per user feedback --- assets/section-tt-event-header.css | 4 +-- assets/section-tt-home.css | 45 ++++++++++++++++++++++-------- sections/tt-home.liquid | 16 +++++++---- 3 files changed, 46 insertions(+), 19 deletions(-) diff --git a/assets/section-tt-event-header.css b/assets/section-tt-event-header.css index 885a0e44419..f3972f89c27 100644 --- a/assets/section-tt-event-header.css +++ b/assets/section-tt-event-header.css @@ -16,9 +16,9 @@ } .tt-eh__inner { - max-width: 900px; + max-width: 1080px; margin: 0 auto; - padding: 32px 24px 36px; + padding: 32px 32px 36px; } /* Back link + badge row */ diff --git a/assets/section-tt-home.css b/assets/section-tt-home.css index efd2be38fe3..4b33d6daec7 100644 --- a/assets/section-tt-home.css +++ b/assets/section-tt-home.css @@ -18,8 +18,8 @@ --tt-mid: #4a4a6a; --tt-border: #d8d4cc; - --tt-max-w: 900px; - --tt-pad-h: 24px; + --tt-max-w: 1080px; + --tt-pad-h: 32px; font-family: inherit; color: var(--tt-navy); @@ -84,25 +84,48 @@ /* ─── 2. HERO ─────────────────────────────────────────────── */ .tt-home__hero { background: var(--tt-navy); - padding: 56px 0 52px; + padding: 64px 0 60px; border-bottom: 2px solid var(--tt-gold); } +.tt-home__hero-kicker { + font-size: 0.75rem; + font-weight: 600; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--tt-gold); + margin: 0 0 1rem; + opacity: 0.9; +} + .tt-home__hero-heading { - font-size: clamp(2.2rem, 5.5vw, 3.6rem); + font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; color: var(--tt-off-white); - margin: 0 0 0.65rem; - line-height: 1.1; - letter-spacing: -0.025em; + margin: 0 0 1rem; + line-height: 1.08; + letter-spacing: -0.03em; + max-width: 680px; } .tt-home__hero-sub { - font-size: 1rem; + font-size: 1.05rem; color: rgba(242, 240, 235, 0.6); - margin: 0 0 1.75rem; - max-width: 480px; - line-height: 1.55; + margin: 0 0 2rem; + max-width: 540px; + line-height: 1.6; +} + +.tt-home__hero-actions { + display: flex; + align-items: center; + gap: 20px; + flex-wrap: wrap; +} + +.tt-home__hero-proof { + font-size: 0.8rem; + color: rgba(242, 240, 235, 0.35); } /* ─── Buttons ─────────────────────────────────────────────── */ diff --git a/sections/tt-home.liquid b/sections/tt-home.liquid index db0ab1e0d3e..5991e649c30 100644 --- a/sections/tt-home.liquid +++ b/sections/tt-home.liquid @@ -39,14 +39,18 @@ ═══════════════════════════════════════════════════════{%- endcomment -%} <section class="tt-home__hero"> <div class="tt-home__container"> - <h1 class="tt-home__hero-heading">Travel smarter.<br>Compete harder.</h1> + <p class="tt-home__hero-kicker">Group hotel blocks for competitive Pokémon TCG players</p> + <h1 class="tt-home__hero-heading">Cheaper than booking<br>the hotel yourself.</h1> <p class="tt-home__hero-sub"> - Group hotel blocks for the competitive Pokémon TCG community. - All-in pricing. No hidden fees. Close to the venue. + Hotels show prices before taxes. By checkout you’re paying 15–20% more. + We negotiate group rates and include every fee upfront — the price you see is the price you pay. </p> - <a href="{{ section.settings.events_cta_link | default: '/collections/all' }}" class="tt-home__btn tt-home__btn--primary"> - {{ section.settings.events_cta_text | default: 'View Events' }} - </a> + <div class="tt-home__hero-actions"> + <a href="{{ section.settings.events_cta_link | default: '/collections/all' }}" class="tt-home__btn tt-home__btn--primary"> + {{ section.settings.events_cta_text | default: 'View Events' }} + </a> + <span class="tt-home__hero-proof">No loyalty account needed · Close to the venue</span> + </div> </div> </section> From 279478751d55f9d39247be90eec9e2a50408248e Mon Sep 17 00:00:00 2001 From: trainerstravel <contact@trainerstravel.com> Date: Wed, 22 Apr 2026 11:47:12 -0400 Subject: [PATCH 16/16] =?UTF-8?q?Revert=20hero=20to=20'Travel=20smarter.?= =?UTF-8?q?=20Compete=20harder.'=20=E2=80=94=20less=20salesy,=20more=20com?= =?UTF-8?q?munity?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/section-tt-home.css | 10 ---------- sections/tt-home.liquid | 8 +++----- 2 files changed, 3 insertions(+), 15 deletions(-) diff --git a/assets/section-tt-home.css b/assets/section-tt-home.css index 4b33d6daec7..b4a6a49e219 100644 --- a/assets/section-tt-home.css +++ b/assets/section-tt-home.css @@ -88,16 +88,6 @@ border-bottom: 2px solid var(--tt-gold); } -.tt-home__hero-kicker { - font-size: 0.75rem; - font-weight: 600; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--tt-gold); - margin: 0 0 1rem; - opacity: 0.9; -} - .tt-home__hero-heading { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; diff --git a/sections/tt-home.liquid b/sections/tt-home.liquid index 5991e649c30..b93717b5d39 100644 --- a/sections/tt-home.liquid +++ b/sections/tt-home.liquid @@ -39,17 +39,15 @@ ═══════════════════════════════════════════════════════{%- endcomment -%} <section class="tt-home__hero"> <div class="tt-home__container"> - <p class="tt-home__hero-kicker">Group hotel blocks for competitive Pokémon TCG players</p> - <h1 class="tt-home__hero-heading">Cheaper than booking<br>the hotel yourself.</h1> + <h1 class="tt-home__hero-heading">Travel smarter.<br>Compete harder.</h1> <p class="tt-home__hero-sub"> - Hotels show prices before taxes. By checkout you’re paying 15–20% more. - We negotiate group rates and include every fee upfront — the price you see is the price you pay. + Group hotel blocks for the competitive Pokémon TCG community. + We negotiate the rate and include every tax and fee upfront — the price you see is what you pay. </p> <div class="tt-home__hero-actions"> <a href="{{ section.settings.events_cta_link | default: '/collections/all' }}" class="tt-home__btn tt-home__btn--primary"> {{ section.settings.events_cta_text | default: 'View Events' }} </a> - <span class="tt-home__hero-proof">No loyalty account needed · Close to the venue</span> </div> </div> </section>