/* ============================================================================= * GBrand mobile responsive fixes * * Loaded after style.css to override layout rules that did not translate well * from the legacy templates into the Nuxt SPA. Every override targets the * <=991.98px (Bootstrap "lg" breakpoint) range so desktop visuals are * untouched. * ========================================================================== */ /* ----------------------------- Global guards ------------------------------ */ @media (max-width: 991.98px) { html { /* Off-canvas nav lives at `right: -100%`. The legacy template hid the overflow on only, but Safari/Chrome on iOS still allow the window to scroll horizontally through the html element. Pin both. */ overflow-x: hidden; } body { overflow-x: hidden; } /* Universal safety: keep media and embeds inside the viewport. */ img, iframe, video { max-width: 100%; height: auto; } iframe[src*="google.com/maps"] { max-width: 100%; } .container, .container-fluid { padding-left: 16px; padding-right: 16px; } } /* ------------------------------ Header / Nav ----------------------------- */ @media (max-width: 991.98px) { /* * #Bar has the animate.css `animate__fadeInDown` class which leaves a * `transform: translate3d(0,0,0)` on the element. That transform creates * its own stacking context, and since #Bar's z-index defaults to `auto`, * the entire header lives at z=0 in the root, BEHIND later siblings that * also have transform-induced stacking contexts (every `.feature-item`, * for instance, is `animate__animated`). That's why the off-canvas nav * appeared transparent on mobile - the page content was painted on top. * Lift #Bar's stacking context above the page so the slide-in menu sits * on top everywhere it overlaps the document. */ #Header #Bar { padding: 12px 0; position: relative; z-index: 99999; } #Header #Bar #Logo img { height: auto; width: 90px; } #Header #Bar #HeaderRight { gap: 0; } /* * Off-canvas nav fixes: * - height:100% in the legacy CSS was resolving to the parent <#HeaderRight> * (~91px) because percentage heights compute against the containing block * even on fixed elements when the parent has an explicit height. Force a * real viewport height instead. * - Bump the z-index so nothing in the page beneath (a feature-item with * `transform:` creates its own stacking context) can paint over it. */ #Header #Bar #Nav { background: #fff; height: 100vh !important; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 18px 32px; width: 82%; max-width: 360px; z-index: 100000 !important; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12); } #Header #Bar #Nav nav > ul { gap: 4px; } #Header #Bar #Nav nav > ul > li > a { font-size: 13px; padding: 12px 6px; } #Header #Bar #Sub-Nav { height: auto; margin-top: 12px; border-top: 1px solid #eee; padding-top: 12px; } #Header #Bar #Sub-Nav > ul > li > a { padding: 12px 6px; font-size: 14px; } /* Backdrop overlay sat at 75px tall + 10% opacity, so it neither dimmed the page nor blocked clicks beneath the menu. Cover the viewport. */ .nav-overlay { position: fixed !important; top: 0; left: 0; right: 0; bottom: 0; width: 100vw !important; height: 100vh !important; background: rgba(0, 0, 0, 0.55) !important; opacity: 0; pointer-events: none; transition: opacity 0.25s ease-in-out; z-index: 99999 !important; } .nav-overlay.active { opacity: 1; pointer-events: auto; } body.active { overflow: hidden; } } /* --------------------------------- Slider -------------------------------- */ @media (max-width: 991.98px) { #Slider .splide__slide > img { width: 100%; height: auto; display: block; } /* Tighter slide-content area so headings/CTAs do not overlap nav. */ #Slider .slide-content { right: 10px !important; top: 10% !important; width: 48% !important; } #Slider .slide-title { font-size: 0.95rem !important; line-height: 1.2; margin-bottom: 10px !important; } #Slider .slide-tagline { display: none; } #Slider .slide-cta { font-size: 0.7rem; padding: 6px 12px; } } @media (max-width: 575.98px) { #Slider .slide-content { right: 8px !important; top: 8% !important; width: 52% !important; } #Slider .slide-title { font-size: 0.82rem !important; margin-bottom: 8px !important; } #Slider .slide-cta { font-size: 0.62rem; padding: 4px 8px; } } /* --------------------------- Features (home page) ------------------------ */ @media (max-width: 767.98px) { #Features .features-inner { padding: 0.5em 0; } #Features .feature-item { padding: 0 4px; } #Features .feature-item:after { display: none; } #Features .features-inner i { font-size: 16px; } #Features .features-inner h3 { font-size: 13px; line-height: 1.2; } #Features .features-inner p { font-size: 11px; line-height: 1.35; margin-bottom: 0; } } /* ------------------- 3D builder & Official Store banners ----------------- */ @media (max-width: 991.98px) { #ThreeDProductBuilder .banner-inner, #OfficialGBrandStore .banner-inner { right: 14px; top: 12px; width: 45%; } #ThreeDProductBuilder .banner-inner p, #OfficialGBrandStore .banner-inner p { font-size: 0.9rem; margin: 0; } #ThreeDProductBuilder .banner-inner a, #OfficialGBrandStore .banner-inner a { font-size: 12px; margin-top: 10px; padding: 6px 12px; } } @media (max-width: 575.98px) { #ThreeDProductBuilder .banner-inner, #OfficialGBrandStore .banner-inner { right: 8px; top: 8px; width: 55%; } #ThreeDProductBuilder .banner-inner p, #OfficialGBrandStore .banner-inner p { font-size: 0.75rem; line-height: 1.25; } #ThreeDProductBuilder .banner-inner a, #OfficialGBrandStore .banner-inner a { font-size: 11px; margin-top: 6px; padding: 5px 10px; } } /* ------------------------------ Commercial ------------------------------- */ @media (max-width: 767.98px) { #Commercial { padding: 1.5rem 0 !important; } #Commercial h2 { font-size: 1.3rem !important; margin-bottom: 1.25rem !important; line-height: 1.25; } } /* -------------------------------- GetQuote ------------------------------- */ @media (max-width: 991.98px) { #GetQuote { padding: 2em 0; } #GetQuote h2 { font-size: 1.5rem; } } /* -------------------------------- Hero overlay --------------------------- */ /* * Almost every inner page reuses the same `.hero .hero-overlay` pattern with * `right:100px; top:100px; width:25%`. On mobile the legacy CSS only nudged * the box to `right:20px; top:50px` and hid the paragraph but kept the 25% * width and a 0.7em heading, which produced a tiny unreadable label. */ @media (max-width: 991.98px) { #AboutUs .hero, #BannerWrap .hero, #StockDesignWrap .hero, #DealsWrap .hero, #EmbroideryWrap .hero, #MasterCatalogWrap .hero, #MomentsWrap .hero, #VideosWrap .hero, #ContactWrap .hero, #UvDtfGangSheetWrap .hero { margin-bottom: 1.5rem; } #AboutUs .hero .hero-overlay, #BannerWrap .hero .hero-overlay, #StockDesignWrap .hero .hero-overlay, #DealsWrap .hero .hero-overlay, #EmbroideryWrap .hero .hero-overlay, #MasterCatalogWrap .hero .hero-overlay, #MomentsWrap .hero .hero-overlay, #VideosWrap .hero .hero-overlay, #ContactWrap .hero .hero-overlay, #UvDtfGangSheetWrap .hero .hero-overlay { right: 12px !important; top: 16px !important; width: 55% !important; padding-bottom: 0 !important; } /* Override the 0.7em rule that made the headings unreadable. */ .hero .hero-overlay h1 { font-size: 0.95rem !important; line-height: 1.15; } .hero .hero-overlay p { display: none; } /* The About page anchor "scroll down" sits inside the overlay - hide it because the floating position breaks once the overlay shrinks. */ #AboutUs .hero .hero-overlay a { display: none; } } @media (max-width: 575.98px) { #AboutUs .hero .hero-overlay, #BannerWrap .hero .hero-overlay, #StockDesignWrap .hero .hero-overlay, #DealsWrap .hero .hero-overlay, #EmbroideryWrap .hero .hero-overlay, #MasterCatalogWrap .hero .hero-overlay, #MomentsWrap .hero .hero-overlay, #VideosWrap .hero .hero-overlay, #ContactWrap .hero .hero-overlay, #UvDtfGangSheetWrap .hero .hero-overlay { right: 8px !important; top: 10px !important; width: 60% !important; } .hero .hero-overlay h1 { font-size: 0.8rem !important; } } /* ---------------------------------- About -------------------------------- */ @media (max-width: 991.98px) { /* The legacy stylesheet pins the intro paragraph at width:490px which overflows phones (375px). Allow it to flow naturally. */ #AboutUs .story > .container > p { width: 100% !important; max-width: 100%; font-size: 1.05rem !important; text-align: left; margin: 16px 0; } #AboutUs .story > .container h2 { font-size: 1.7rem !important; padding-top: 30px !important; } #AboutUs .story-grid { flex-direction: column; margin-bottom: 40px !important; gap: 16px; } #AboutUs .story-grid > * { width: 100% !important; } #AboutUs .story img { max-width: 100%; } #AboutUs .gallery-grid { grid-template-columns: 1fr; row-gap: 12px; } } /* --------------------------------- Banner -------------------------------- */ @media (max-width: 991.98px) { #Banner { flex-direction: column; padding: 2em 1em; text-align: center; } #Banner .banner-inner { flex-direction: column; padding: 1em 0; } #Banner h1 { font-size: 2.2em !important; margin-right: 0; padding-right: 0; } #Banner h1:after { display: none; } #Banner h2 { font-size: 1rem; max-width: 100%; padding-top: 12px; } #Banner .moments-objects { width: 100%; margin-top: 16px; } } /* ----------------------------- Stock designs ----------------------------- */ @media (max-width: 991.98px) { #StockDesignWrap .design-item { width: 48%; } #StockDesignWrap .design-item img { height: 180px; } #StockDesignWrap .gutter-sizer { width: 2%; } } @media (max-width: 575.98px) { #StockDesignWrap .design-item { width: 100%; } #StockDesignWrap .design-item img { height: auto; max-height: 280px; } } /* ----------------------------- Master catalog ---------------------------- */ @media (max-width: 991.98px) { #AlphabetsWrap { padding: 12px; } #AlphabetsWrap .index-alphabets { flex-wrap: wrap; gap: 6px; justify-content: center; width: 100%; } #AlphabetsWrap .index-alphabets span { width: 32px; height: 32px; line-height: 28px; font-size: 13px; } #MasterCatalogWrap .catalog-item h2 { font-size: 16px; } #MasterCatalogWrap .catalog-item h2 a { padding: 14px 16px; margin-bottom: 14px; } } /* ------------------------------- Embroidery ------------------------------ */ @media (max-width: 991.98px) { #EmbroideryWrap #EmbroideryWork img { height: 220px; } } @media (max-width: 575.98px) { #EmbroideryWrap #EmbroideryWork img { height: 200px; } } /* ------------------------------- Login/Register -------------------------- */ @media (max-width: 991.98px) { #MainWrap #LoginRegisterWrap .login-register-inner { width: 100%; } } /* --------------------------- Product / catalog filters ------------------- */ @media (max-width: 991.98px) { #MainWrap #ProductFilters { margin-bottom: 1.5rem; } #MainWrap #ProductDetailWrap .size-item { height: 40px; line-height: 40px; margin-right: 6px; margin-bottom: 6px; padding: 0 0.75em; } } /* -------------------------------- Profile -------------------------------- */ @media (max-width: 991.98px) { #MainWrap #ProfileWrap .profile-sidebar { margin-bottom: 1.5rem; } } /* ----------------------------- Modal (Other Services) -------------------- */ @media (max-width: 575.98px) { .other-services-modal .modal-dialog { margin: 0.5rem; max-width: calc(100% - 1rem); } .other-services-modal__card { padding: 2.25rem 1.25rem 1.25rem; } .other-services-chip { padding: 0.9rem 1rem; } .other-services-chip__label { font-size: 0.9rem; } } /* ---------------------- Hats Studio + UV DTF + 247 ----------------------- */ @media (max-width: 991.98px) { /* The 247 hero athletes art is large; the legacy CSS already scales it, but on phones the actions need extra breathing room. */ #TeamStoreWrap .hero .hero-content .hero-cta-group { justify-content: center; } #TeamStoreWrap .hero .hero-content .hero-cta-group .hero-cta { flex: 1 1 auto; min-width: 0; padding: 10px 18px; } } /* -------------------------------- Footer --------------------------------- */ @media (max-width: 991.98px) { #Footer { padding: 3em 0 1.5em; } #Footer .footer-intro { margin-bottom: 1.75rem; text-align: center; } #Footer .footer-intro img { max-width: 160px; margin: 0 auto 0.75rem; display: block; } #Footer .footer-intro p { text-align: left; } #Footer .footer-col { margin-bottom: 1.75rem; } #Footer #Credit { margin-top: 1rem; padding-top: 1rem; text-align: center; } #Footer #Credit .payment-method { text-align: center !important; font-size: 1.6em; margin-top: 0.5rem; } } /* ---------------------------- Forms tweaks ------------------------------- */ @media (max-width: 575.98px) { /* Two-column rows in the Contact form (Phone+Type / City+State) wrap awkwardly because they use fixed col-9 / col-3 splits. Force stack. */ #ContactWrap form .row > .col-3, #ContactWrap form .row > .col-9 { width: 100%; flex: 0 0 100%; max-width: 100%; } .custom-form-btn { padding: 0.7em 1em; font-size: 0.95rem; } } /* ------------------------- Misc utility / safety ------------------------- */ @media (max-width: 991.98px) { /* `

` separators in pages get extra margin; trim. */ hr { margin: 1rem 0; } }