/* HomeLoveTrend Studio — global overrides layered on Tailwind CDN */ :root { color-scheme: light; } html { -webkit-text-size-adjust: 100%; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Scroll-reveal. Scoped to .js (added by an inline script in the ) so that if JavaScript is unavailable or fails, sections render normally instead of being stuck at opacity:0 — which made the in-story product strip and other sections permanently invisible. main.css loads AFTER tailwind.min.css, so this rule wins; the scoping has to be applied in BOTH files or the unscoped one here overrides the fix. */ .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; } .js [data-reveal].is-revealed { opacity: 1; transform: none; } /* Mobile nav drawer */ .nav-mobile-drawer { display: none; } body.nav-open .nav-mobile-drawer { display: flex; } body.nav-open { overflow: hidden; } /* Stories filter active */ #story-filters button.is-active { color: #1b1c1c; border-bottom: 1px solid #1b1c1c; } .editorial-line { height: 1px; background-color: #EAE3D9; } input:focus, textarea:focus, select:focus { outline: none; border-color: #1b1c1c !important; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #fcf9f8; } ::-webkit-scrollbar-thumb { background: #ccc6bc; } /* ────────────────────────────────────────────────────────────── MOBILE OPTIMIZATIONS (< 768px) Stitch design uses section-gap: 128px and large margins. Shrink on mobile so content breathes without dead space. ────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .py-section-gap { padding-top: 56px !important; padding-bottom: 56px !important; } .pt-section-gap { padding-top: 56px !important; } .pb-section-gap { padding-bottom: 56px !important; } .mt-section-gap { margin-top: 56px !important; } .mb-section-gap { margin-bottom: 56px !important; } .gap-section-gap { gap: 56px !important; } /* Hero — full visible height, accounts for mobile browser chrome. Templates now use min-h-[100dvh] directly, so the old .h-screen selectors no longer match; kept only as a floor for short screens. */ main > section:first-child { min-height: 520px; } /* Hero text bottom-anchor on small screens */ .hero-mobile-center { text-align: center; } /* Buttons — minimum 44px touch target, full-width when stacked. :not(.w-auto) escape hatch: this rule forced width:100% on every dark button, including ones sitting in a horizontal flex row (the product search "Go"), which collapsed the adjacent input to 24px. Any button that must size to its content opts out with w-auto. */ a.bg-\[\#2D2D2D\]:not(.w-auto), a.border.border-white:not(.w-auto), button.bg-\[\#2D2D2D\]:not(.w-auto) { width: 100%; text-align: center; padding: 16px 24px !important; font-size: 12px; } /* Buttons in flex containers stack with proper gap */ section .flex.flex-col > a { width: 100%; } /* Stories editorial offsets — strip on mobile (single column flow) */ .editorial-card-offset, .md\:mt-24, .md\:-mt-12, .md\:mt-12, .md\:mt-16 { margin-top: 0 !important; } /* Tap targets in header nav */ .nav-mobile-drawer a { padding: 14px 0; min-height: 44px; } /* Forms — bigger touch + readable */ .admin-form input, .admin-form textarea, .admin-form select { font-size: 16px; } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], textarea { font-size: 16px; } /* 16px prevents iOS auto-zoom on focus */ /* Footer stack and tighten */ footer .py-section-gap { padding-top: 48px !important; padding-bottom: 48px !important; } /* Headings — leave room for line-height */ h1, h2 { word-break: break-word; hyphens: auto; } /* Reduce horizontal padding on tight screens */ .px-margin-mobile { padding-left: 20px !important; padding-right: 20px !important; } /* Story detail mid-image bleed — full width on mobile */ article figure.\-mx-margin-mobile { margin-left: -20px; margin-right: -20px; } } /* Reduce motion preference — respect users who opt out */ @media (prefers-reduced-motion: reduce) { .js [data-reveal] { transition: none; opacity: 1; transform: none; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Image loading skeleton — soft beige bg while lazy-loading */ img[loading="lazy"]:not([src]), img[data-src] { background: #f0eded; } /* ─── Cart drawer open state ─── */ body.cart-open .cart-backdrop { opacity: 1; pointer-events: auto; } body.cart-open .cart-drawer { transform: translateX(0); } body.cart-open { overflow: hidden; } /* Prevent CLS — Tailwind aspect-* classes already handle, but reinforce */ img { max-width: 100%; height: auto; } /* ────────────────────────────────────────────────────────────── HERO SLIDER — fade transition, no layout shift ────────────────────────────────────────────────────────────── */ .hero-slide { opacity: 0; } .hero-slide.is-active { opacity: 1; } /* The dot reads as a 2px bar but has to be TAPPABLE. It measured 32x2, which is far under the 44px WCAG 2.2 target and essentially impossible to hit with a thumb. The bar stays 2px; an invisible ::after extends the hit area to 44px without moving anything on screen. */ .hero-dot { position: relative; } .hero-dot::after { content: ''; position: absolute; left: 0; right: 0; top: -21px; bottom: -21px; } /* Invisible 44px hit area, same trick as .hero-dot above. For the category filter chips: they are small underlined labels, and the underline is a border-b on the control itself. Padding the control to 44px would drag that underline 13px below the text and break the design. This grows only the touch region — nothing moves on screen. Measured before: "All" 21x18, "home" 36x44, curated chips 21-63 x 18. The pseudo stays inside the 16px flex gap, so it cannot steal a tap from the chip next to it. */ .tap-44 { position: relative; } .tap-44::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; min-width: 44px; height: 44px; } /* Ink, not white: the hero sets its type on a lightened photograph now, so a white active dot was invisible against the pale wash. */ .hero-dot.is-active { background: rgba(27,28,28,0.85); width: 32px; height: 2px; } /* ────────────────────────────────────────────────────────────── TESTIMONIAL MARQUEE — continuous auto-scroll, no nav ────────────────────────────────────────────────────────────── */ .testimonial-marquee { overflow: hidden; position: relative; mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%); } .testimonial-track { display: flex; gap: 32px; width: max-content; animation: testimonial-scroll 60s linear infinite; } .testimonial-marquee:hover .testimonial-track { animation-play-state: paused; } @keyframes testimonial-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .testimonial-card { flex: 0 0 auto; width: 380px; background: #fcf9f8; border: 1px solid #e4e2e1; padding: 32px; display: flex; flex-direction: column; gap: 16px; } @media (max-width: 767px) { /* Smaller quote text and tighter internal gaps so a testimonial fits the card without crowding the top and bottom padding. */ .testimonial-card { width: 268px; padding: 20px; gap: 12px; } .testimonial-card p { font-size: 14px; line-height: 1.6; } .testimonial-card .material-symbols-outlined { font-size: 22px !important; } .testimonial-track { animation-duration: 40s; gap: 16px; } } /* ────────────────────────────────────────────────────────────── PARALLAX — translateY on scroll, JS-driven ────────────────────────────────────────────────────────────── */ [data-parallax-container] { position: relative; overflow: hidden; } [data-parallax] { will-change: transform; transition: transform 0.1s linear; } @media (prefers-reduced-motion: reduce) { [data-parallax] { transform: none !important; } }