/** Shopify CDN: Minification failed Line 80:0 All "@import" rules must come first **/ /* * TikTak Parts — Custom Theme Override * Version: 2.0.0 | 2026 CRO + UX Standard * ================================================ * Apply via: Online Store > Themes > Edit Code * File: assets/techtiktak-custom.css * Then add to theme.liquid : * {{ 'techtiktak-custom.css' | asset_url | stylesheet_tag }} * ================================================ */ /* ============================================ 1. DESIGN TOKENS — COLOR SYSTEM ============================================ */ :root { /* Core Brand Colors */ --tt-black: #0F0F0F; --tt-white: #FFFFFF; --tt-off-white: #FAFAF8; --tt-surface: #F4F4F2; --tt-border: #E5E5E3; --tt-text-primary: #111111; --tt-text-secondary:#6B6B6B; --tt-text-muted: #9CA3AF; /* Accent — Electric Blue (CTA, links, highlights) */ --tt-accent: #2563EB; --tt-accent-hover: #1D4ED8; --tt-accent-light: #EFF6FF; /* Trust & Status */ --tt-trust-green: #16A34A; --tt-trust-bg: #F0FDF4; --tt-urgent-red: #DC2626; --tt-urgent-bg: #FEF2F2; --tt-star-gold: #F59E0B; --tt-sale-orange: #EA580C; /* Spacing Scale */ --tt-space-xs: 4px; --tt-space-sm: 8px; --tt-space-md: 16px; --tt-space-lg: 24px; --tt-space-xl: 40px; --tt-space-2xl: 64px; --tt-space-3xl: 96px; /* Border Radius */ --tt-radius-sm: 6px; --tt-radius-md: 10px; --tt-radius-lg: 16px; --tt-radius-pill: 999px; /* Shadows */ --tt-shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06); --tt-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06); --tt-shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05); --tt-shadow-card: 0 2px 8px rgba(0,0,0,0.08); /* Transitions */ --tt-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --tt-transition-slow: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* Override Dawn theme variables */ --color-base-background-1: 250, 250, 248; --color-base-background-2: 244, 244, 242; --color-base-text: 17, 17, 17; --color-base-accent-1: 37, 99, 235; --color-base-accent-2: 22, 163, 74; } /* ============================================ 2. TYPOGRAPHY — DM Sans (Modern Tech Feel) ============================================ */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=DM+Mono:wght@400;500&display=swap'); body, .shopify-section { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-size: 16px; line-height: 1.6; color: var(--tt-text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'DM Sans', sans-serif !important; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--tt-black); } h1, .h1 { font-size: clamp(32px, 5vw, 56px); } h2, .h2 { font-size: clamp(24px, 3.5vw, 40px); } h3, .h3 { font-size: clamp(20px, 2.5vw, 28px); } h4, .h4 { font-size: 20px; } h5, .h5 { font-size: 16px; font-weight: 600; } p { margin-bottom: var(--tt-space-md); } .price { font-family: 'DM Mono', monospace; } /* ============================================ 3. GLOBAL LAYOUT ============================================ */ .page-width { max-width: 1320px; margin: 0 auto; padding: 0 var(--tt-space-lg); } @media (max-width: 749px) { .page-width { padding: 0 var(--tt-space-md); } } /* Smooth scroll */ html { scroll-behavior: smooth; } /* Selection */ ::selection { background: var(--tt-accent-light); color: var(--tt-accent); } /* ============================================ 4. ANNOUNCEMENT BAR ============================================ */ .announcement-bar { background: var(--tt-black) !important; border-bottom: none !important; padding: 10px 0 !important; } .announcement-bar__message { font-family: 'DM Sans', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.02em !important; color: #ffffff !important; } .announcement-bar a { color: #ffffff !important; text-decoration: underline; text-underline-offset: 2px; } /* ============================================ 5. HEADER ============================================ */ .header-wrapper { border-bottom: 1px solid var(--tt-border) !important; background: var(--tt-white) !important; box-shadow: 0 1px 0 var(--tt-border) !important; position: sticky !important; top: 0 !important; z-index: 100 !important; backdrop-filter: blur(12px) !important; background: rgba(255,255,255,0.95) !important; } .header { padding: 14px 0 !important; } /* Logo */ .header__heading-link, .header__heading { font-family: 'DM Sans', sans-serif !important; font-weight: 800 !important; font-size: 20px !important; letter-spacing: -0.03em !important; color: var(--tt-black) !important; text-decoration: none !important; } /* Navigation */ .header__menu-item, .header__active-menu-item { font-family: 'DM Sans', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; color: var(--tt-text-secondary) !important; transition: var(--tt-transition) !important; letter-spacing: 0 !important; } .header__menu-item:hover, .header__active-menu-item { color: var(--tt-black) !important; } /* Header icons */ .header__icon svg { width: 20px; height: 20px; } /* Hide Japan | JPY - replace with clean version */ .localization-form__select, .disclosure__button { font-size: 12px !important; color: var(--tt-text-muted) !important; border: none !important; background: transparent !important; } /* Cart count badge */ .cart-count-bubble { background: var(--tt-accent) !important; color: white !important; font-family: 'DM Sans', sans-serif !important; font-weight: 700 !important; font-size: 11px !important; } /* ============================================ 6. HERO BANNER (image-banner section) ============================================ */ .banner { min-height: 85vh !important; position: relative !important; overflow: hidden !important; } @media (max-width: 749px) { .banner { min-height: 70vh !important; } } .banner__media img, .banner__media video { object-fit: cover !important; object-position: center !important; width: 100% !important; height: 100% !important; } /* Hero overlay for text readability */ .banner__media::after { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient( 135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.15) 100% ) !important; z-index: 1 !important; } .banner__box { background: transparent !important; border: none !important; box-shadow: none !important; padding: var(--tt-space-xl) !important; max-width: 620px !important; z-index: 2 !important; position: relative !important; } /* Hero content positioning */ .banner__content { align-items: flex-start !important; justify-content: center !important; padding: var(--tt-space-3xl) var(--tt-space-xl) !important; } @media (max-width: 749px) { .banner__content { padding: var(--tt-space-xl) var(--tt-space-md) !important; align-items: center !important; text-align: center !important; } .banner__box { max-width: 100% !important; } } /* Hero headline */ .banner__heading { font-family: 'DM Sans', sans-serif !important; font-size: clamp(36px, 6vw, 68px) !important; font-weight: 800 !important; line-height: 1.05 !important; letter-spacing: -0.03em !important; color: #ffffff !important; text-shadow: 0 2px 20px rgba(0,0,0,0.3) !important; margin-bottom: var(--tt-space-md) !important; } /* Hero subheading */ .banner__subheading { font-size: 18px !important; font-weight: 400 !important; color: rgba(255,255,255,0.88) !important; line-height: 1.6 !important; margin-bottom: var(--tt-space-lg) !important; text-shadow: 0 1px 8px rgba(0,0,0,0.2) !important; } @media (max-width: 749px) { .banner__subheading { font-size: 16px !important; } } /* Hero CTAs */ .banner__buttons { gap: var(--tt-space-md) !important; flex-wrap: wrap !important; } @media (max-width: 749px) { .banner__buttons { justify-content: center !important; } } /* ============================================ 7. BUTTONS — Complete Override ============================================ */ /* Primary CTA */ .button, .btn, button[type="submit"]:not(.no-override) { font-family: 'DM Sans', sans-serif !important; font-weight: 600 !important; font-size: 15px !important; letter-spacing: 0 !important; border-radius: var(--tt-radius-md) !important; transition: var(--tt-transition) !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; white-space: nowrap !important; text-decoration: none !important; } /* Primary button — Electric Blue */ .button--primary, .button:not(.button--secondary):not(.button--tertiary):not(.shopify-payment-button__button), .banner__button--primary { background: var(--tt-accent) !important; color: #ffffff !important; border: 2px solid var(--tt-accent) !important; padding: 14px 28px !important; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important; } .button--primary:hover, .button:not(.button--secondary):not(.button--tertiary):hover { background: var(--tt-accent-hover) !important; border-color: var(--tt-accent-hover) !important; box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45) !important; transform: translateY(-1px) !important; } .button--primary:active { transform: translateY(0) !important; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important; } /* Secondary button — Outline */ .button--secondary, .banner__button--secondary { background: transparent !important; color: #ffffff !important; border: 2px solid rgba(255,255,255,0.7) !important; padding: 14px 28px !important; backdrop-filter: blur(4px) !important; } .button--secondary:hover { background: rgba(255,255,255,0.15) !important; border-color: #ffffff !important; } /* Add to Cart button */ .product-form__submit, .btn-addtocart { background: var(--tt-black) !important; color: #ffffff !important; border: 2px solid var(--tt-black) !important; padding: 16px 32px !important; font-size: 16px !important; font-weight: 700 !important; border-radius: var(--tt-radius-md) !important; width: 100% !important; box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important; letter-spacing: 0.01em !important; } .product-form__submit:hover { background: #222222 !important; border-color: #222222 !important; transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important; } /* Buy with Shop Pay — downgrade visual priority */ .shopify-payment-button__button--branded { border-radius: var(--tt-radius-md) !important; margin-top: 8px !important; opacity: 0.85 !important; } /* ============================================ 8. TRUST STRIP (below hero) ============================================ */ .tt-trust-strip { background: var(--tt-white); border-top: 1px solid var(--tt-border); border-bottom: 1px solid var(--tt-border); padding: var(--tt-space-md) 0; } .tt-trust-strip__inner { display: flex; align-items: center; justify-content: center; gap: var(--tt-space-xl); flex-wrap: wrap; max-width: 1320px; margin: 0 auto; padding: 0 var(--tt-space-lg); } .tt-trust-item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--tt-text-primary); white-space: nowrap; } .tt-trust-item__icon { width: 28px; height: 28px; background: var(--tt-trust-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tt-trust-item__icon svg { width: 15px; height: 15px; color: var(--tt-trust-green); } .tt-trust-item__label { font-size: 13px; color: var(--tt-text-secondary); } @media (max-width: 749px) { .tt-trust-strip__inner { gap: var(--tt-space-md); justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; } .tt-trust-strip__inner::-webkit-scrollbar { display: none; } .tt-trust-item { flex-shrink: 0; } } /* ============================================ 9. PRODUCT CARDS ============================================ */ .card-wrapper { border-radius: var(--tt-radius-lg) !important; overflow: hidden !important; transition: var(--tt-transition-slow) !important; } .card-wrapper:hover { transform: translateY(-4px) !important; box-shadow: var(--tt-shadow-lg) !important; } .card__inner { border-radius: var(--tt-radius-lg) !important; border: 1px solid var(--tt-border) !important; overflow: hidden !important; background: var(--tt-white) !important; } /* Product image container */ .card__media, .card-product__image-wrapper { background: var(--tt-surface) !important; overflow: hidden !important; aspect-ratio: 1 / 1 !important; } .card__media img { transition: transform 0.4s ease !important; object-fit: cover !important; width: 100% !important; height: 100% !important; } .card-wrapper:hover .card__media img { transform: scale(1.04) !important; } /* Product card info */ .card__content, .card__information { padding: var(--tt-space-md) !important; } /* Product card title */ .card__heading, .card__heading a { font-family: 'DM Sans', sans-serif !important; font-size: 15px !important; font-weight: 600 !important; color: var(--tt-text-primary) !important; line-height: 1.4 !important; margin-bottom: 6px !important; text-decoration: none !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* Star rating on card */ .tt-card-rating { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; } .tt-card-rating__stars { color: var(--tt-star-gold); font-size: 12px; letter-spacing: 1px; } .tt-card-rating__count { font-size: 12px; color: var(--tt-text-muted); } /* Price */ .price__container, .card-product__price { display: flex !important; align-items: center !important; gap: var(--tt-space-sm) !important; flex-wrap: wrap !important; } .price-item--regular, .price__regular { font-family: 'DM Mono', monospace !important; font-size: 17px !important; font-weight: 600 !important; color: var(--tt-black) !important; } .price-item--sale { font-family: 'DM Mono', monospace !important; font-size: 17px !important; font-weight: 700 !important; color: var(--tt-urgent-red) !important; } .price-item--regular.price-item--last { font-size: 13px !important; font-weight: 400 !important; color: var(--tt-text-muted) !important; text-decoration: line-through !important; } /* Sale badge */ .badge--sale, .tt-badge-sale { background: var(--tt-urgent-red) !important; color: #ffffff !important; font-size: 11px !important; font-weight: 700 !important; padding: 2px 8px !important; border-radius: var(--tt-radius-pill) !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; } /* Best Seller badge */ .tt-badge-bestseller { background: var(--tt-black); color: #ffffff; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: var(--tt-radius-pill); letter-spacing: 0.08em; text-transform: uppercase; position: absolute; top: 12px; left: 12px; z-index: 2; } /* Quick add on hover */ .quick-add__submit { background: var(--tt-accent) !important; color: #ffffff !important; border-radius: var(--tt-radius-md) !important; font-family: 'DM Sans', sans-serif !important; font-weight: 600 !important; font-size: 13px !important; padding: 10px !important; border: none !important; width: 100% !important; cursor: pointer !important; transition: var(--tt-transition) !important; } .quick-add__submit:hover { background: var(--tt-accent-hover) !important; } /* ============================================ 10. PRODUCT PAGE ============================================ */ /* Product gallery */ .product__media-wrapper { position: sticky !important; top: 90px !important; } .product__media { border-radius: var(--tt-radius-lg) !important; overflow: hidden !important; background: var(--tt-surface) !important; border: 1px solid var(--tt-border) !important; } .product__media img { object-fit: contain !important; background: var(--tt-surface) !important; } /* Product thumbnails */ .thumbnail-slider { gap: 8px !important; } .thumbnail-slider .thumbnail { border-radius: var(--tt-radius-sm) !important; border: 2px solid transparent !important; overflow: hidden !important; cursor: pointer !important; transition: var(--tt-transition) !important; } .thumbnail-slider .thumbnail.active, .thumbnail-slider .thumbnail:hover { border-color: var(--tt-accent) !important; } /* Product title */ .product__title { font-family: 'DM Sans', sans-serif !important; font-size: clamp(22px, 3vw, 30px) !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; color: var(--tt-black) !important; margin-bottom: var(--tt-space-sm) !important; } /* Product price */ .product__price .price-item { font-family: 'DM Mono', monospace !important; font-size: 26px !important; font-weight: 700 !important; } .product__price .price-item--sale { color: var(--tt-urgent-red) !important; font-size: 28px !important; } .product__price .price-item--regular.price-item--last { font-size: 16px !important; color: var(--tt-text-muted) !important; text-decoration: line-through !important; } /* Savings badge */ .tt-savings-badge { display: inline-block; background: var(--tt-urgent-bg); color: var(--tt-urgent-red); font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: var(--tt-radius-pill); margin-left: 8px; } /* Product info meta (stock, shipping) */ .tt-product-meta { display: flex; align-items: center; gap: var(--tt-space-sm); margin: var(--tt-space-sm) 0; font-size: 13px; color: var(--tt-trust-green); font-weight: 500; } .tt-product-meta::before { content: ''; width: 8px; height: 8px; background: var(--tt-trust-green); border-radius: 50%; display: inline-block; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Variant selector */ .product-form__input, .variant-picker { margin-bottom: var(--tt-space-md) !important; } .product-form__input label, .variant-picker__label { font-size: 14px !important; font-weight: 600 !important; color: var(--tt-text-primary) !important; margin-bottom: var(--tt-space-sm) !important; display: flex !important; align-items: center !important; gap: 6px !important; } .product-form__input label span, .variant-picker__label-value { font-weight: 400 !important; color: var(--tt-text-secondary) !important; } /* Swatch buttons */ .swatch-input__button, .variant-picker__option-label { border-radius: var(--tt-radius-md) !important; border: 2px solid var(--tt-border) !important; padding: 8px 16px !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; transition: var(--tt-transition) !important; background: var(--tt-white) !important; color: var(--tt-text-primary) !important; } .swatch-input__button:hover, .variant-picker__option-label:hover { border-color: var(--tt-accent) !important; color: var(--tt-accent) !important; } .swatch-input:checked + .swatch-input__button, .variant-picker__option-input:checked + .variant-picker__option-label { border-color: var(--tt-accent) !important; background: var(--tt-accent-light) !important; color: var(--tt-accent) !important; font-weight: 600 !important; } /* Sold out variant */ .swatch-input--disabled + .swatch-input__button, .variant-picker__option-input:disabled + .variant-picker__option-label { opacity: 0.35 !important; cursor: not-allowed !important; text-decoration: line-through !important; } /* Quantity selector */ .quantity { border: 2px solid var(--tt-border) !important; border-radius: var(--tt-radius-md) !important; overflow: hidden !important; } .quantity__button, .quantity__input { background: transparent !important; border: none !important; font-family: 'DM Sans', sans-serif !important; font-weight: 600 !important; } /* Product info trust badges */ .tt-product-trust { display: flex; flex-wrap: wrap; gap: 8px; padding: var(--tt-space-md) 0; border-top: 1px solid var(--tt-border); border-bottom: 1px solid var(--tt-border); margin: var(--tt-space-md) 0; } .tt-product-trust__item { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--tt-text-secondary); padding: 6px 12px; background: var(--tt-surface); border-radius: var(--tt-radius-pill); } .tt-product-trust__item svg { width: 14px; height: 14px; color: var(--tt-trust-green); flex-shrink: 0; } /* Urgency banner */ .tt-urgency-bar { background: var(--tt-urgent-bg); border: 1px solid rgba(220, 38, 38, 0.2); border-radius: var(--tt-radius-md); padding: 10px 14px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tt-urgent-red); font-weight: 600; margin-bottom: var(--tt-space-md); } /* Social proof nudge */ .tt-social-proof { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tt-text-secondary); margin-bottom: var(--tt-space-md); } .tt-social-proof span { color: var(--tt-text-primary); font-weight: 600; } /* Product description */ .product__description { font-size: 15px !important; line-height: 1.7 !important; color: var(--tt-text-secondary) !important; } .product__description h3, .product__description h4 { font-size: 16px !important; font-weight: 700 !important; color: var(--tt-text-primary) !important; margin: var(--tt-space-lg) 0 var(--tt-space-sm) !important; } .product__description ul { list-style: none !important; padding: 0 !important; } .product__description ul li { padding: 4px 0 4px 24px !important; position: relative !important; font-size: 14px !important; } .product__description ul li::before { content: '✓' !important; position: absolute !important; left: 0 !important; color: var(--tt-trust-green) !important; font-weight: 700 !important; } /* ============================================ 11. STICKY ADD TO CART (Mobile) ============================================ */ .tt-sticky-atc { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; background: var(--tt-white); border-top: 1px solid var(--tt-border); padding: 12px var(--tt-space-md); box-shadow: 0 -4px 20px rgba(0,0,0,0.1); display: none; align-items: center; gap: var(--tt-space-md); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .tt-sticky-atc.visible { transform: translateY(0); } @media (max-width: 989px) { .tt-sticky-atc { display: flex; } } .tt-sticky-atc__info { flex: 1; min-width: 0; } .tt-sticky-atc__title { font-size: 14px; font-weight: 600; color: var(--tt-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tt-sticky-atc__price { font-size: 16px; font-weight: 700; color: var(--tt-black); font-family: 'DM Mono', monospace; } .tt-sticky-atc__btn { background: var(--tt-accent) !important; color: #ffffff !important; border: none !important; border-radius: var(--tt-radius-md) !important; padding: 14px 24px !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer !important; white-space: nowrap !important; flex-shrink: 0 !important; box-shadow: 0 4px 12px rgba(37,99,235,0.35) !important; transition: var(--tt-transition) !important; } .tt-sticky-atc__btn:hover { background: var(--tt-accent-hover) !important; transform: translateY(-1px) !important; } /* ============================================ 12. RATINGS & REVIEWS ============================================ */ .tt-rating-summary { display: flex; align-items: center; gap: var(--tt-space-md); padding: var(--tt-space-md) 0; cursor: pointer; } .tt-rating-stars { color: var(--tt-star-gold); font-size: 18px; letter-spacing: 2px; line-height: 1; } .tt-rating-score { font-size: 16px; font-weight: 700; color: var(--tt-text-primary); } .tt-rating-count { font-size: 14px; color: var(--tt-accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .tt-rating-count:hover { color: var(--tt-accent-hover); } /* Review cards */ .tt-review-card { background: var(--tt-white); border: 1px solid var(--tt-border); border-radius: var(--tt-radius-lg); padding: var(--tt-space-lg); transition: var(--tt-transition); } .tt-review-card:hover { box-shadow: var(--tt-shadow-md); } .tt-review-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--tt-space-sm); } .tt-review-card__author { font-size: 14px; font-weight: 600; color: var(--tt-text-primary); } .tt-review-card__date { font-size: 12px; color: var(--tt-text-muted); } .tt-review-card__stars { color: var(--tt-star-gold); font-size: 14px; margin-bottom: 6px; } .tt-review-card__title { font-size: 15px; font-weight: 600; color: var(--tt-text-primary); margin-bottom: 6px; } .tt-review-card__body { font-size: 14px; color: var(--tt-text-secondary); line-height: 1.6; } .tt-review-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--tt-trust-green); margin-top: 8px; } /* ============================================ 13. COLLECTIONS PAGE ============================================ */ .collection-hero__title, .collection__title { font-size: clamp(28px, 4vw, 48px) !important; font-weight: 800 !important; letter-spacing: -0.02em !important; } /* Filter/Sort bar */ .facets__heading, .facets-container { font-family: 'DM Sans', sans-serif !important; } /* ============================================ 14. SECTION: CATEGORY GRID ============================================ */ .tt-categories { padding: var(--tt-space-3xl) 0; background: var(--tt-off-white); } .tt-categories__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--tt-space-lg); } @media (max-width: 989px) { .tt-categories__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599px) { .tt-categories__grid { grid-template-columns: repeat(2, 1fr); gap: var(--tt-space-md); } } .tt-category-card { position: relative; overflow: hidden; border-radius: var(--tt-radius-lg); aspect-ratio: 3/4; cursor: pointer; background: var(--tt-surface); border: 1px solid var(--tt-border); transition: var(--tt-transition-slow); } .tt-category-card:hover { transform: translateY(-4px); box-shadow: var(--tt-shadow-lg); } .tt-category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .tt-category-card:hover img { transform: scale(1.06); } .tt-category-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 60%); } .tt-category-card__content { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--tt-space-lg); color: white; } .tt-category-card__title { font-size: 18px; font-weight: 700; margin-bottom: 4px; } .tt-category-card__count { font-size: 13px; opacity: 0.8; } /* ============================================ 15. SECTION: WHY US / BENEFITS ============================================ */ .tt-benefits { padding: var(--tt-space-3xl) 0; background: var(--tt-white); } .tt-benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tt-space-xl); } @media (max-width: 749px) { .tt-benefits__grid { grid-template-columns: 1fr; gap: var(--tt-space-lg); } } .tt-benefit-item { text-align: center; padding: var(--tt-space-xl); } .tt-benefit-item__icon { width: 64px; height: 64px; background: var(--tt-accent-light); border-radius: var(--tt-radius-lg); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--tt-space-md); } .tt-benefit-item__icon svg { width: 30px; height: 30px; color: var(--tt-accent); } .tt-benefit-item__title { font-size: 18px; font-weight: 700; margin-bottom: var(--tt-space-sm); color: var(--tt-black); } .tt-benefit-item__desc { font-size: 15px; color: var(--tt-text-secondary); line-height: 1.6; } /* ============================================ 16. FOOTER ============================================ */ .footer { background: #0F0F0F !important; color: #ffffff !important; padding: var(--tt-space-3xl) 0 var(--tt-space-xl) !important; margin-top: 0 !important; } .footer-block__heading { font-family: 'DM Sans', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.5) !important; margin-bottom: var(--tt-space-md) !important; } .footer-block__list li a, .footer__list-social-link, .footer-block__content { font-family: 'DM Sans', sans-serif !important; font-size: 14px !important; color: rgba(255,255,255,0.75) !important; text-decoration: none !important; transition: var(--tt-transition) !important; line-height: 2.2 !important; } .footer-block__list li a:hover, .footer__list-social-link:hover { color: #ffffff !important; } .footer__copyright { border-top: 1px solid rgba(255,255,255,0.1) !important; padding-top: var(--tt-space-lg) !important; margin-top: var(--tt-space-xl) !important; font-size: 13px !important; color: rgba(255,255,255,0.4) !important; } /* Hide "Powered by Shopify" */ .powered-by-shopify, .shopify-section--powered-by, [class*="powered"] a[href*="shopify.com"] { display: none !important; } /* Payment icons footer */ .payment-icons { filter: brightness(0) invert(0.5) !important; transition: var(--tt-transition) !important; } .payment-icons:hover { filter: brightness(0) invert(0.8) !important; } /* Follow on Shop - hide or override */ .shopify-section--shop-login-button, .shop-login-button { display: none !important; } /* ============================================ 17. EMAIL CAPTURE SECTION ============================================ */ .email-signup { background: var(--tt-black) !important; padding: var(--tt-space-3xl) 0 !important; } .email-signup .title { font-size: clamp(28px, 4vw, 42px) !important; font-weight: 800 !important; color: #ffffff !important; letter-spacing: -0.02em !important; } .email-signup .field__input { border-radius: var(--tt-radius-md) !important; border: 2px solid rgba(255,255,255,0.2) !important; background: rgba(255,255,255,0.08) !important; color: #ffffff !important; font-size: 15px !important; padding: 14px 20px !important; font-family: 'DM Sans', sans-serif !important; } .email-signup .field__input::placeholder { color: rgba(255,255,255,0.4) !important; } .email-signup .field__input:focus { border-color: var(--tt-accent) !important; outline: none !important; background: rgba(255,255,255,0.12) !important; } .email-signup .button { background: var(--tt-accent) !important; color: #ffffff !important; border: none !important; border-radius: var(--tt-radius-md) !important; font-weight: 700 !important; padding: 14px 24px !important; } /* ============================================ 18. MISCELLANEOUS & UTILITIES ============================================ */ /* Section headings */ .tt-section-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tt-accent); margin-bottom: 8px; } .tt-section-title { font-size: clamp(26px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em; color: var(--tt-black); margin-bottom: var(--tt-space-sm); } .tt-section-subtitle { font-size: 17px; color: var(--tt-text-secondary); max-width: 540px; } /* Divider */ .tt-divider { height: 1px; background: var(--tt-border); margin: var(--tt-space-xl) 0; } /* Loading skeleton */ .tt-skeleton { background: linear-gradient(90deg, var(--tt-surface) 25%, var(--tt-border) 50%, var(--tt-surface) 75%); background-size: 400% 100%; animation: skeleton-loading 1.5s ease infinite; border-radius: var(--tt-radius-sm); } @keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* Breadcrumbs */ .breadcrumb { font-size: 13px !important; color: var(--tt-text-muted) !important; margin-bottom: var(--tt-space-md) !important; } .breadcrumb a { color: var(--tt-text-muted) !important; text-decoration: none !important; } .breadcrumb a:hover { color: var(--tt-accent) !important; } /* Focus states - accessibility */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--tt-accent) !important; outline-offset: 2px !important; } /* ============================================ 19. MOBILE GLOBAL FIXES ============================================ */ @media (max-width: 749px) { /* Prevent horizontal scroll */ body { overflow-x: hidden; } /* Larger tap targets */ .header__icon, .header__menu-item { min-height: 44px; min-width: 44px; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Product page mobile */ .product__info-wrapper { padding-top: var(--tt-space-md) !important; } /* Bottom padding for sticky ATC */ .product-form ~ * { padding-bottom: 80px; } /* Hide desktop-only elements */ .tt-desktop-only { display: none !important; } /* Full width buttons on mobile */ .product-form__submit { font-size: 16px !important; padding: 18px !important; } } @media (min-width: 750px) { /* Hide mobile-only elements */ .tt-mobile-only { display: none !important; } } /* ============================================ 20. ANIMATIONS & MICRO-INTERACTIONS ============================================ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .tt-animate-in { animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) both; } /* Scroll-triggered animations via IntersectionObserver */ .tt-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .tt-reveal.revealed { opacity: 1; transform: translateY(0); } /* ============================================ 21. PRINT / ACCESSIBILITY ============================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media print { .header-wrapper, .announcement-bar, .footer, .tt-sticky-atc { display: none; } }