/* src/css/05-mobile-quicklinks.css PRT — Mobile Bottom Tab Bar (site-wide) Injected via JS under (or after header). Best UX: fixed bottom bar on mobile with safe-area support. */ :root { --prt-bottomnav-height: 66px; } /* Hidden by default (desktop/tablet) */ .prt-mobile-quicklinks { display: none; } /* Mobile only */ @media (max-width: 768px) { /* Reserve space so the bar never covers content */ html.prt-has-bottomnav #page { padding-bottom: calc(var(--prt-bottomnav-height) + env(safe-area-inset-bottom, 0px)) !important; } /* The bar */ .prt-mobile-quicklinks { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; height: var(--prt-bottomnav-height); padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 99999; background: rgba(247, 244, 238, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(13, 40, 24, 0.10); box-shadow: 0 -14px 40px rgba(13, 40, 24, 0.14); /* Avoid iOS paint quirks */ transform: translateZ(0); } /* Tabs */ .prt-mobile-quicklinks a { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; padding: 12px 12px; border-radius: 999px; font-weight: 850; font-size: 1.02rem; letter-spacing: 0.01em; text-decoration: none; line-height: 1; color: rgba(255, 255, 255, 0.98); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 10px 24px rgba(13, 40, 24, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.20); -webkit-tap-highlight-color: transparent; user-select: none; transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease; } /* A) Terrain grain (adds depth, no layout changes) */ .prt-mobile-quicklinks a { position: relative; /* needed for ::after overlay */ overflow: hidden; /* keeps grain inside pill */ } .prt-mobile-quicklinks a::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px); background-size: 6px 6px; opacity: 0.35; mix-blend-mode: overlay; } .prt-mobile-quicklinks a:active { transform: translateY(1px); filter: brightness(0.98); box-shadow: 0 8px 18px rgba(13, 40, 24, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18); } /* Optional: if you add .is-active in JS, this makes it feel “selected” */ .prt-mobile-quicklinks a.is-active { box-shadow: 0 12px 28px rgba(13, 40, 24, 0.18), 0 0 0 3px rgba(255, 255, 255, 0.72) inset; filter: saturate(1.05); } /* Brand-matched colors (hero green family) */ .prt-mobile-quicklinks .prt-ql--home { background: linear-gradient(135deg, #1a5f3f 0%, #2d7a54 100%); } .prt-mobile-quicklinks .prt-ql--races { background: linear-gradient(135deg, #164c33 0%, #1a5f3f 100%); } .prt-mobile-quicklinks .prt-ql--results { background: linear-gradient(135deg, #2d7a54 0%, #3a8f64 100%); } /* Keyboard focus */ .prt-mobile-quicklinks a:focus-visible { outline: 3px solid rgba(13, 40, 24, 0.35); outline-offset: 3px; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { @media (max-width: 768px) { .prt-mobile-quicklinks a { transition: none !important; } .prt-mobile-quicklinks a:active { transform: none !important; } } }/* src/css/15-hero-spacing-mobile.css */ /* Mobile spacing adjustment: Reduce gap between quick links and hero */ @media (max-width: 768px) { .pinnacle-home .prt-hero { margin-top: -0.5rem; } }/* Squarespace-native blocks on the HOME page */ [data-url-slug="home"] .sqs-block-summary-v2 .summary-item { border-bottom: 1px solid rgba(0,0,0,.08); padding: 14px 0; } [data-url-slug="home"] .sqs-block-summary-v2 .summary-title a { font-weight: 700; text-decoration: none; } [data-url-slug="home"] .sqs-block-summary-v2 .summary-metadata { opacity: .8; font-size: 0.95em; } /* Optional: hide the "Read More" / button if Squarespace shows it */ [data-url-slug="home"] .sqs-block-summary-v2 .summary-read-more-link { display: none; }/* src/css/40-home.css */ /* PINNACLE - HOME (scoped to the Squarespace placeholder .pinnacle-home) */ /* =============================== Base wrapper =============================== */ .pinnacle-home { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: #0d2818; max-width: 1400px; margin: 0 auto; padding: 0 1rem; } /* =============================== HERO SECTION =============================== */ .pinnacle-home .prt-hero { position: relative; min-height: 85vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg, #1a5f3f 0%, #2d7a54 100%); border-radius: 16px; margin: 1rem 0 3rem; color: #fff; box-shadow: 0 14px 40px rgba(0,0,0,0.18); } .pinnacle-home .prt-hero-background { position: absolute; inset: 0; opacity: 0.14; background-image: url("data:image/svg+xml,%3Csvg width='220' height='220' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 20 L180 180 L20 180 Z' fill='white' opacity='0.12'/%3E%3C/svg%3E"); background-size: 220px 220px; } .pinnacle-home .prt-hero-content { position: relative; z-index: 10; text-align: center; padding: 2.5rem 2rem; max-width: 900px; } .pinnacle-home .prt-hero-badge { display: inline-block; padding: 10px 18px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28); border-radius: 999px; font-size: 0.95rem; font-weight: 650; margin-bottom: 1.5rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .pinnacle-home .prt-hero h1 { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 850; line-height: 1.08; margin: 0 0 1.25rem; letter-spacing: -0.02em; text-shadow: 0 10px 30px rgba(0,0,0,0.22); } .pinnacle-home .prt-hero-subtitle { font-size: clamp(1.125rem, 2vw, 1.375rem); color: rgba(255,255,255,0.92); margin: 0 auto 2.25rem; line-height: 1.65; max-width: 720px; } /* =============================== HERO CTA BUTTONS =============================== */ .pinnacle-home .prt-hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; } /* Base button */ .pinnacle-home .prt-btn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 34px; border-radius: 999px; font-weight: 750; font-size: 1.05rem; text-decoration: none; cursor: pointer; user-select: none; white-space: nowrap; transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease; -webkit-tap-highlight-color: transparent; } /* Primary */ .pinnacle-home .prt-btn-primary { background: #ffffff; color: #1a5f3f; border: 1px solid rgba(255,255,255,0.75); box-shadow: 0 12px 28px rgba(0,0,0,0.24); } .pinnacle-home .prt-btn-primary:hover, .pinnacle-home .prt-btn-primary:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,0.34); background: #f6faf7; color: #1a5f3f; } /* Secondary */ .pinnacle-home .prt-btn-secondary { background: rgba(255,255,255,0.10); color: #ffffff; border: 2px solid rgba(255,255,255,0.70); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 26px rgba(0,0,0,0.14); } .pinnacle-home .prt-btn-secondary:hover, .pinnacle-home .prt-btn-secondary:focus-visible { transform: translateY(-2px); background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.95); box-shadow: 0 16px 34px rgba(0,0,0,0.22); color: #ffffff; } /* Keyboard focus */ .pinnacle-home .prt-btn:focus-visible { outline: 3px solid rgba(127,178,133,0.9); outline-offset: 4px; } /* Subtle primary pulse (only hero, stops on hover/focus) */ @keyframes prtPulse { 0% { transform: translateY(0); box-shadow: 0 12px 28px rgba(0,0,0,0.24); } 50% { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(0,0,0,0.30); } 100% { transform: translateY(0); box-shadow: 0 12px 28px rgba(0,0,0,0.24); } } .pinnacle-home .prt-hero-cta .prt-btn-primary { animation: prtPulse 2.8s ease-in-out infinite; } .pinnacle-home .prt-hero-cta .prt-btn-primary:hover, .pinnacle-home .prt-hero-cta .prt-btn-primary:focus-visible { animation: none; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .pinnacle-home .prt-hero-cta .prt-btn-primary { animation: none !important; } .pinnacle-home .prt-btn { transition: none !important; } } /* =============================== TRUST =============================== */ .pinnacle-home .prt-trust { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; font-size: 0.95rem; color: rgba(255,255,255,0.92); } .pinnacle-home .prt-trust-item { display: inline-flex; align-items: center; gap: 0.55rem; padding: 8px 14px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20); border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .pinnacle-home .prt-trust-icon { font-weight: 900; opacity: 0.95; } /* =============================== STATS =============================== */ .pinnacle-home .prt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin: 4rem 0; padding: 0; } .pinnacle-home .prt-stat-card { background: #ffffff; padding: 2.5rem 2rem; border-radius: 12px; border: 1px solid #e1ddd4; text-align: center; box-shadow: 0 10px 26px rgba(13,40,24,0.08); } .pinnacle-home .prt-stat-value { font-size: 2.75rem; font-weight: 850; color: #1a5f3f; line-height: 1; margin-bottom: 0.5rem; } .pinnacle-home .prt-stat-label { font-size: 1rem; color: #4a5f54; font-weight: 600; } /* =============================== SECTIONS =============================== */ .pinnacle-home .prt-section { margin: 4rem 0; } .pinnacle-home .prt-section-header { text-align: center; max-width: 750px; margin: 0 auto 3rem; } .pinnacle-home .prt-section-title { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 820; color: #0d2818; margin: 0 0 1rem; letter-spacing: -0.01em; } .pinnacle-home .prt-section-subtitle { font-size: 1.125rem; color: #4a5f54; line-height: 1.7; margin: 0; } .pinnacle-home .prt-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; } .pinnacle-home .prt-service-card { background: #ffffff; padding: 2rem; border-radius: 12px; border: 1px solid #e1ddd4; box-shadow: 0 10px 26px rgba(13,40,24,0.08); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } .pinnacle-home .prt-service-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(13,40,24,0.12); border-color: rgba(127,178,133,0.55); } .pinnacle-home .prt-service-icon { width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg, #1a5f3f, #2d7a54); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.2rem; box-shadow: 0 10px 24px rgba(26,95,63,0.18); } .pinnacle-home .prt-service-icon svg { width: 26px; height: 26px; color: #ffffff; } .pinnacle-home .prt-service-title { font-size: 1.25rem; font-weight: 820; color: #0d2818; margin: 0 0 0.6rem; } .pinnacle-home .prt-service-desc { color: #4a5f54; line-height: 1.65; margin: 0; } /* =============================== CTA SECTION (bottom) =============================== */ .pinnacle-home .prt-cta-section { background: linear-gradient(135deg, #1a5f3f 0%, #2d7a54 100%); padding: 4rem 2rem; border-radius: 16px; text-align: center; color: white; margin: 4rem 0 2rem; box-shadow: 0 16px 42px rgba(0,0,0,0.18); } .pinnacle-home .prt-cta-section h2 { font-size: clamp(2rem, 4vw, 2.75rem); margin: 0 0 1rem; color: #ffffff; } .pinnacle-home .prt-cta-section p { font-size: 1.2rem; color: rgba(255,255,255,0.92); margin: 0 auto 2rem; max-width: 650px; line-height: 1.65; } /* Don’t pulse the bottom CTA button */ .pinnacle-home .prt-cta-section .prt-btn-primary { animation: none; } /* =============================== RESPONSIVE =============================== */ @media (max-width: 768px) { .pinnacle-home .prt-hero { min-height: 70vh; } .pinnacle-home .prt-stats { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .pinnacle-home .prt-services { grid-template-columns: 1fr; } .pinnacle-home .prt-hero-cta { flex-direction: column; } .pinnacle-home .prt-btn { width: 100%; max-width: 340px; } } @media (max-width: 480px) { .pinnacle-home .prt-stats { grid-template-columns: 1fr; } .pinnacle-home .prt-trust-item { width: 100%; justify-content: center; } } /* --- MOBILE HERO CTA FIT FIX --- */ @media (max-width: 768px) { .pinnacle-home .prt-hero-content { padding: 1.25rem !important; } .pinnacle-home .prt-hero-cta { flex-direction: column !important; align-items: center !important; gap: 0.75rem !important; width: 100% !important; } .pinnacle-home .prt-btn { width: 100% !important; max-width: 280px !important; /* keeps them inside the hero card */ padding: 14px 18px !important; font-size: 1rem !important; } } /* ========================================================= PRT – CTA Guardrails (prevents mobile button overflow/clipping) This is intentionally LAST so it wins the cascade. ========================================================= */ /* Global safety: buttons never exceed container width */ .pinnacle-home .prt-btn { box-sizing: border-box; max-width: 100%; } /* HERO + CTA: mobile fit + no clipping */ @media (max-width: 768px) { /* Give hero content consistent inset so buttons can't hit rounded edges */ .pinnacle-home .prt-hero-content { padding-left: 1rem !important; padding-right: 1rem !important; } /* Ensure CTA stack fills available width */ .pinnacle-home .prt-hero-cta { width: 100% !important; align-items: center !important; } /* Guarantee hero buttons never clip */ .pinnacle-home .prt-hero-cta .prt-btn { width: 100% !important; max-width: 320px !important; padding: 14px 18px !important; font-size: 1rem !important; white-space: normal !important; /* allow wrap if needed */ text-align: center !important; } /* Bottom CTA: keep button inside the green box */ .pinnacle-home .prt-cta-section { padding: 3rem 1.25rem 3.25rem !important; /* extra bottom room */ overflow: hidden !important; /* prevents visual bleed */ } .pinnacle-home .prt-cta-section .prt-btn, .pinnacle-home .prt-cta-section a.prt-btn { display: inline-flex !important; width: 100% !important; max-width: 320px !important; margin: 1.5rem auto 0 !important; position: relative !important; z-index: 2 !important; white-space: normal !important; } } /* ========================================================= PRT – Tighten big vertical gaps around Upcoming Events (Targets Squarespace block spacing inside .pinnacle-home) ========================================================= */ /* Desktop + mobile: reduce excessive block spacing */ .pinnacle-home .sqs-block-heading { margin-bottom: 0.6rem !important; padding-bottom: 0 !important; } .pinnacle-home .sqs-block-heading h1, .pinnacle-home .sqs-block-heading h2, .pinnacle-home .sqs-block-heading h3 { margin-bottom: 0.35rem !important; } /* Kill spacer blocks that create “mystery” gaps */ .pinnacle-home .sqs-block-spacer { margin: 0 !important; padding: 0 !important; } /* If a spacer sits between the heading and the events block, remove it */ .pinnacle-home .sqs-block-heading + .sqs-block-spacer { display: none !important; height: 0 !important; } /* Pull summary/events block up tight */ .pinnacle-home .sqs-block-summary, .pinnacle-home .sqs-block-summary-v2 { margin-top: 0.25rem !important; margin-bottom: 1.25rem !important; /* reduces the second big gap */ } /* If summary is immediately after heading (or after a spacer), eliminate top gap */ .pinnacle-home .sqs-block-heading + .sqs-block-summary, .pinnacle-home .sqs-block-heading + .sqs-block-summary-v2, .pinnacle-home .sqs-block-heading + .sqs-block-spacer + .sqs-block-summary, .pinnacle-home .sqs-block-heading + .sqs-block-spacer + .sqs-block-summary-v2 { margin-top: 0 !important; padding-top: 0 !important; } /* Mobile: tighten more aggressively */ @media (max-width: 768px) { .pinnacle-home .sqs-block-summary, .pinnacle-home .sqs-block-summary-v2 { margin-bottom: 0.75rem !important; } } /* ========================================================= HOMEPAGE: Remove big gaps around Upcoming Events (Squarespace blocks) NOTE: This is NOT scoped to .pinnacle-home because these are native blocks ========================================================= */ body.homepage .sqs-block-heading { margin-bottom: 0.25rem !important; padding-bottom: 0 !important; } body.homepage .sqs-block-heading h1, body.homepage .sqs-block-heading h2, body.homepage .sqs-block-heading h3 { margin-bottom: 0.25rem !important; } /* Spacer blocks are the #1 cause of “mystery” gaps */ body.homepage .sqs-block-spacer { margin: 0 !important; padding: 0 !important; } /* This is the important part: spacers often have height on the CONTENT wrapper */ body.homepage .sqs-block-spacer .sqs-block-content { height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; } /* If a spacer is between heading and summary, nuke it entirely */ body.homepage .sqs-block-heading + .sqs-block-spacer { display: none !important; } /* Pull the summary block tight to the heading */ body.homepage .sqs-block-heading + .sqs-block-summary, body.homepage .sqs-block-heading + .sqs-block-summary-v2, body.homepage .sqs-block-heading + .sqs-block-spacer + .sqs-block-summary, body.homepage .sqs-block-heading + .sqs-block-spacer + .sqs-block-summary-v2 { margin-top: 0 !important; padding-top: 0 !important; } /* Reduce the “gap below” the events block */ body.homepage .sqs-block-summary, body.homepage .sqs-block-summary-v2 { margin-bottom: 1rem !important; } /* Mobile: tighten even more */ @media (max-width: 768px) { body.homepage .sqs-block-summary, body.homepage .sqs-block-summary-v2 { margin-bottom: 0.6rem !important; } }/* src/css/50-events.css */ /* PINNACLE - EVENTS PAGE (Squarespace Events) */ /* Event item "card" styling (multiple selector fallbacks) */ .collection-type-events .eventlist-event, .collection-type-events .eventitem, .collection-type-events .events-collection-item, .collection-type-events article { background: #ffffff; border: 1px solid rgba(13, 40, 24, 0.10); border-radius: 14px; padding: 18px 18px; margin: 14px 0; box-shadow: 0 8px 22px rgba(13, 40, 24, 0.06); } /* Clearer separation between items */ .collection-type-events .eventlist-event + .eventlist-event { margin-top: 16px; } /* Meta text (date/time/location) */ .collection-type-events .eventlist-meta, .collection-type-events .event-meta, .collection-type-events .eventlist-event--meta, .collection-type-events time { color: rgba(13, 40, 24, 0.70); font-size: 0.98rem; line-height: 1.35; } /* Excerpt/description spacing */ .collection-type-events .eventlist-excerpt, .collection-type-events .event-excerpt, .collection-type-events .eventlist-description { margin-top: 10px; color: rgba(13, 40, 24, 0.85); line-height: 1.55; } /* Thumbnail/logo framing + reduce “blend in” */ .collection-type-events .eventlist-thumbnail, .collection-type-events .event-thumbnail, .collection-type-events .eventlist-event--image { border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid rgba(13, 40, 24, 0.10); } /* Try to avoid hard-cropping logos (works on some templates) */ .collection-type-events .eventlist-thumbnail img, .collection-type-events .event-thumbnail img, .collection-type-events .eventlist-event--image img { object-fit: contain !important; background: #fff; } /* Subtle hover lift */ .collection-type-events .eventlist-event:hover, .collection-type-events .eventitem:hover, .collection-type-events .events-collection-item:hover, .collection-type-events article:hover { transform: translateY(-2px); transition: transform 160ms ease, box-shadow 160ms ease; box-shadow: 0 12px 30px rgba(13, 40, 24, 0.10); } @media (max-width: 640px) { .collection-type-events .eventlist-event, .collection-type-events .eventitem, .collection-type-events .events-collection-item, .collection-type-events article { padding: 16px 14px; border-radius: 12px; } } /* Reduce event thumbnail size */ .collection-type-events .eventlist-thumbnail, .collection-type-events .event-thumbnail, .collection-type-events .eventlist-event--image { max-width: 120px; /* adjust: 100–140px is a good range */ flex: 0 0 120px; } /* Ensure image scales nicely inside the smaller frame */ .collection-type-events .eventlist-thumbnail img, .collection-type-events .event-thumbnail img, .collection-type-events .eventlist-event--image img { width: 100%; height: auto; object-fit: contain; } .collection-type-events .eventlist-event { gap: 16px; }/* src/css/60-upcoming-races.css Upcoming Events – Modern Facelift (Squarespace carousel/summary) Goal: make it look like modern swipeable cards, without changing the block type. */ /* Give the whole block a bit of breathing room */ .sqs-block-summary, .sqs-block-summary-v2, .summary-block-wrapper { margin-top: 1.25rem; } /* ====== CAROUSEL / GALLERY-LIKE WRAPPERS (arrows visible) ====== Squarespace uses different wrappers depending on version/layout. We style the container and "slide" cards regardless. */ .sqs-gallery-design-carousel, .sqs-gallery-design-carousel .sqs-gallery-container, .summary-carousel, .summary-block-wrapper .summary-item-list { border-radius: 18px; } /* If Squarespace is putting the carousel inside a colored section, this makes the carousel itself feel like the “component” */ .sqs-gallery-design-carousel, .summary-carousel { background: rgba(255,255,255,0.70); border: 1px solid rgba(15,23,42,0.08); box-shadow: 0 12px 30px rgba(15,23,42,0.10); overflow: hidden; } /* ====== SLIDES / ITEMS ====== Try all common item classes Squarespace uses. */ .summary-item, .summary-item-list .summary-item, .sqs-gallery-design-carousel .slide, .sqs-gallery-design-carousel .sqs-gallery-slide, .sqs-gallery-design-carousel .sqs-gallery-item { background: rgba(255,255,255,0.96); border-radius: 16px; border: 1px solid rgba(15,23,42,0.08); box-shadow: 0 10px 24px rgba(15,23,42,0.10); overflow: hidden; } /* Make each item feel tappable */ .summary-item a, .sqs-gallery-design-carousel a { text-decoration: none; } /* ====== IMAGE / THUMBNAIL ====== */ .summary-thumbnail, .summary-thumbnail-outer-container, .sqs-gallery-design-carousel img { display: block; } .summary-thumbnail img, .summary-thumbnail-outer-container img, .sqs-gallery-design-carousel img { width: 100%; height: auto; max-height: 160px; object-fit: contain; /* Give logos a clean stage */ background: #fff; } /* ====== TEXT HIERARCHY ====== */ .summary-title, .summary-item .summary-title, .summary-item h1, .summary-item h2, .summary-item h3 { font-weight: 850; letter-spacing: -0.01em; line-height: 1.15; margin: 0.75rem 0 0.25rem; padding: 0 1rem; color: #0d2818; } .summary-metadata, .summary-item .summary-metadata, .summary-item .summary-excerpt, .summary-item .summary-excerpt p { margin: 0; padding: 0 1rem 0.9rem; color: #4a5f54; line-height: 1.5; font-size: 0.98rem; } /* ====== CTA affordance ====== */ .summary-read-more, .summary-item .summary-read-more { display: inline-block; margin: 0 1rem 1rem; font-weight: 800; color: #1a5f3f; } .summary-read-more::after { content: " →"; } /* ====== ARROWS / CONTROLS ====== Make the arrows more modern and less “old slideshow”. */ .sqs-gallery-design-carousel .sqs-gallery-controls, .summary-carousel .summary-carousel-controls { opacity: 1; } .sqs-gallery-design-carousel .sqs-gallery-controls .sqs-gallery-control, .summary-carousel .summary-carousel-controls button { background: rgba(255,255,255,0.90); border: 1px solid rgba(15,23,42,0.12); box-shadow: 0 10px 24px rgba(15,23,42,0.14); border-radius: 999px; } /* ====== MOBILE: make it feel “swipeable cards” ====== */ @media (max-width: 768px) { /* Reduce the giant dead space the carousel often reserves */ .sqs-gallery-design-carousel, .summary-carousel { padding: 0.5rem; } /* More compact title block */ .summary-title, .summary-item .summary-title { font-size: 1.05rem; padding: 0 0.9rem; } .summary-metadata, .summary-item .summary-metadata, .summary-item .summary-excerpt, .summary-item .summary-excerpt p { font-size: 0.95rem; padding: 0 0.9rem 0.75rem; } .summary-read-more, .summary-item .summary-read-more { margin: 0 0.9rem 0.9rem; } }/* src/css/99-desktop-overrides.css Pinnacle Race Timing — last-in overrides (desktop / general) Goal: reduce the “too much air” above the hero on desktop, without breaking header behavior. */ /* Tighten the first homepage section (the one containing the home code block) */ body.homepage #sections > section:first-of-type { padding-top: 42px !important; padding-bottom: 24px !important; } body.homepage #sections > section:first-of-type .content-wrapper { padding-top: 0 !important; padding-bottom: 0 !important; } /* Reduce the hero’s own outer margin a bit (desktop + mobile, but mobile is overridden too) */ body.homepage .pinnacle-home .prt-hero { margin: 0.75rem 0 2.25rem !important; /* was 1rem 0 3rem */ } /* Tighten spacing between hero subtitle → buttons a touch */ body.homepage .pinnacle-home .prt-hero-subtitle { margin-bottom: 1.6rem !important; /* was 2.25rem */ } /* Tighten the trust pills slightly */ body.homepage .pinnacle-home .prt-trust { margin-top: 0.75rem; } /* src/css/99-mobile-overrides.css Pinnacle Race Timing — last-in overrides (mobile first) Goal: remove dead space between header → quick links → hero; keep quick links pinned cleanly under sticky header. */ /* ----------------------------- 1) MOBILE QUICK LINKS BAR ----------------------------- */ /* Default hidden (desktop + larger screens) */ .prt-mobile-quicklinks { display: none; } @media (max-width: 768px) { /* Keep the header above the quick links */ header, #header { z-index: 10000 !important; } .prt-mobile-quicklinks { display: flex; gap: 10px; /* tighter */ padding: 8px 12px; margin: 0; /* STICKY: pinned under the sticky header */ position: sticky; top: var(--prt-header-offset-mobile, 74px); z-index: 9998; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(15, 23, 42, 0.08); } /* Reduce the “bar looks tall” effect */ .prt-mobile-quicklinks a { flex: 1; text-align: center; padding: 9px 10px; border-radius: 999px; font-weight: 800; text-decoration: none; line-height: 1; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10); color: #fff; /* help prevent accidental “tuck” on iOS */ transform: translateZ(0); } .prt-mobile-quicklinks .prt-ql--races { background: var(--primary, #2563eb); } .prt-mobile-quicklinks .prt-ql--results { background: var(--accent, #f97316); } /* ----------------------------- 2) REMOVE THE BIG GAP ABOVE HERO (HOMEPAGE) The gap is primarily Squarespace section padding on the first section, *not* your hero margin-top. ----------------------------- */ /* Tighten the very first homepage section padding */ body.homepage #sections > section:first-of-type { padding-top: 18px !important; padding-bottom: 18px !important; } /* If the first section uses a .content-wrapper, keep it tight too */ body.homepage #sections > section:first-of-type .content-wrapper { padding-top: 0 !important; padding-bottom: 0 !important; } /* Optional: slightly reduce hero top margin inside the first section */ body.homepage .pinnacle-home .prt-hero { margin-top: 0.5rem !important; } } /* ========================================================= MOBILE: Remove gap between Upcoming Events and CTA section Cause: adjacent Squarespace sections both add vertical padding ========================================================= */ @media (max-width: 768px) { /* Section that CONTAINS the Events Summary */ body.homepage section:has(.sqs-block-summary), body.homepage section:has(.sqs-block-summary-v2) { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* Section IMMEDIATELY AFTER the Events Summary */ body.homepage section:has(.sqs-block-summary) + section, body.homepage section:has(.sqs-block-summary-v2) + section { padding-top: 0 !important; margin-top: 0 !important; } } /* ========================================================= MOBILE: Tighten Upcoming Events heading + block ========================================================= */ @media (max-width: 768px) { /* Reduce space BELOW the "Upcoming Events" heading */ body.homepage h2, body.homepage h3 { margin-bottom: 12px !important; } /* Pull the Events Summary block upward */ body.homepage .sqs-block-summary, body.homepage .sqs-block-summary-v2 { margin-top: -24px !important; } }