/* ========================================================================== DS HOME — RESPONSIVO MOBILE Carregue ESTE arquivo POR ÚLTIMO no para sobrescrever main/home/premium ========================================================================== */ /* ============== TABLET (<= 1024px) ============== */ @media (max-width: 1024px) { /* Container mais respirável */ .container { padding: 0 20px; } /* Nav horizontal vira só hamburguer */ .header .nav { display: none; } .menu-toggle { display: flex !important; } /* Search bar — encolhe */ .header .search-bar { max-width: 100%; } } /* ============== MOBILE (<= 768px) ============== */ @media (max-width: 768px) { /* ===== TOP BAR — esconder no mobile ===== */ .top-bar { display: none; } /* ===== ANNOUNCEMENT BAR — compacta e centralizada ===== */ .announcement-bar { padding: 8px 0; font-size: 11px; line-height: 1.4; } .announcement-bar__content { flex-direction: column; gap: 4px; text-align: center; padding: 0 12px; } .announcement-bar__contacts { display: none !important; } /* ===== HEADER — Grid em 2 linhas: top (menu+logo+actions) + busca embaixo ===== */ .header__top { display: grid !important; grid-template-columns: auto 1fr auto !important; grid-template-rows: auto auto !important; grid-template-areas: "menu logo actions" "search search search" !important; gap: 10px 8px !important; padding: 10px 0 !important; align-items: center; border-bottom: 1px solid var(--gray-pale, #e5e5e5); } /* Menu hamburguer — destaque */ .menu-toggle { grid-area: menu; display: flex !important; width: 42px; height: 42px; flex-shrink: 0; background: var(--off-white, #f7f7f7); border-radius: 8px; } .menu-toggle i { width: 24px; height: 24px; color: var(--black, #0a0a0a); } /* Logo compacto e centralizado */ .logo { grid-area: logo; justify-content: center; gap: 8px; } .logo__img { width: 38px !important; height: 38px !important; } .logo__text { display: flex; flex-direction: column; line-height: 1; } .logo__ds { font-size: 18px !important; letter-spacing: 1px; } .logo__home { font-size: 9px !important; letter-spacing: 4px; } /* Search bar — vai pra linha de baixo via Grid (área "search") */ .header .search-bar { grid-area: search !important; display: flex !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; height: 42px; box-sizing: border-box; } .search-bar input { height: 42px; font-size: 14px; padding: 0 12px 0 40px; width: 100%; } .search-bar input::placeholder { font-size: 13px; } .search-bar__icon { left: 12px !important; } .search-bar__btn { display: none; /* esconde botão "Buscar" — submit via Enter */ } /* Actions — só carrinho */ .header__actions { grid-area: actions; gap: 6px; flex-shrink: 0; } .header__action { padding: 8px; gap: 0; } .header__action span:not(.cart-badge) { display: none; } .header__action i { width: 22px; height: 22px; } .cart-badge { top: -4px !important; right: -4px !important; width: 18px; height: 18px; font-size: 10px; } /* ===== HERO ===== */ .hero { min-height: auto !important; height: auto !important; padding: 0 !important; } /* Hero vira coluna vertical: capa em cima + texto/botão embaixo */ .hero { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; background: #0a0a0a !important; align-items: stretch !important; text-align: center !important; } /* Capa: PRIMEIRO elemento (não mais position absolute) */ .hero__bg { position: relative !important; inset: auto !important; width: 100% !important; aspect-ratio: 9 / 16 !important; flex-shrink: 0 !important; background-image: url('../assets/images/capa-mobile.png') !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; transform: none !important; animation: none !important; filter: none !important; } /* Sem overlay e sem efeitos */ .hero__overlay, .hero::after, .hero::before { display: none !important; } /* Container do texto: SEGUNDO elemento (vem abaixo da capa) */ .hero .container, .hero__container { position: relative !important; padding: 32px 24px 40px !important; width: 100% !important; max-width: 100% !important; z-index: 1; } .hero__content { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 20px !important; padding: 0 !important; } /* Esconde só os elementos auxiliares (mantém título e botão principal) */ .hero__eyebrow, .hero__description, .hero__cta-secondary, .hero__floating-badge, .hero__scroll { display: none !important; } /* Título "Sua casa, nosso design." — abaixo da capa */ .hero__title { display: block !important; font-family: 'Playfair Display', Georgia, serif !important; font-size: 30px !important; line-height: 1.1 !important; color: #fff !important; text-align: center !important; margin: 0 !important; padding: 0 !important; font-weight: 400 !important; text-shadow: none !important; } .hero__title em { color: var(--gold-400, #E0BB55) !important; font-style: italic !important; display: inline !important; } /* Botão único centralizado */ .hero__actions { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 340px !important; display: flex !important; flex-direction: column !important; gap: 0 !important; } .hero__actions .btn--primary { width: 100% !important; } /* Overlay mais forte no mobile pra texto ficar legível em qualquer foto */ .hero__overlay { background: radial-gradient(ellipse at center, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.85) 100%), linear-gradient(180deg, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.3) 45%, rgba(10,10,10,0.92) 100%) !important; } .hero__container { padding: 60px 0 !important; max-width: 100% !important; } .hero__content { padding: 0 !important; } .hero__floating-badge { display: none !important; } .hero__scroll { display: none !important; } .hero::after { display: none !important; } .hero__eyebrow, .hero__overline { font-size: 11px !important; letter-spacing: 4px !important; } .hero__title, .hero h1 { font-size: 38px !important; line-height: 1.05 !important; } .hero__subtitle, .hero__description, .hero p { font-size: 15px !important; line-height: 1.55 !important; max-width: 100% !important; } .hero__cta, .hero .btn--lg { width: 100%; padding: 18px 24px !important; font-size: 13px !important; } .hero__actions, .hero__buttons { flex-direction: column; gap: 12px !important; width: 100%; } /* ===== SECTIONS ===== */ .section { padding: 56px 0 !important; } .section--sm { padding: 40px 0 !important; } .section--lg { padding: 72px 0 !important; } .section-header__eyebrow { font-size: 11px !important; letter-spacing: 3px !important; } .section-header__title, .section h2 { font-size: 30px !important; line-height: 1.15 !important; } .section-header__description { font-size: 14px !important; padding: 0 8px; } /* ===== GRID DE PRODUTOS ===== */ .products-grid, .product-grid, .grid--products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } /* Cards mais compactos */ .product-card, .product-card__content { border-radius: 10px; } .product-card__title { font-size: 13px !important; line-height: 1.3 !important; -webkit-line-clamp: 2; } .product-card__price { font-size: 16px !important; } .product-card__btn { padding: 10px !important; font-size: 11px !important; } .product-card__image, .product-card img { aspect-ratio: 1 / 1 !important; } /* ===== GRID DE CATEGORIAS / AMBIENTES ===== */ .categories-grid, .ambientes-grid, .grid--categories { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .category-card, .ambiente-card { aspect-ratio: 1 / 1.2 !important; } .category-card__title, .ambiente-card__title { font-size: 16px !important; } /* ===== INSPIRAÇÕES / BLOG / CARDS GRANDES ===== */ .inspiration-grid, .blog-grid { grid-template-columns: 1fr !important; gap: 16px !important; } /* ===== VANTAGENS / BENEFITS ===== */ .benefits-grid, .features-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .benefit-card, .feature-card { padding: 16px !important; } .benefit-card__title, .feature-card__title { font-size: 13px !important; } /* ===== HISTÓRIA / SOBRE ===== */ .story, .about-section { grid-template-columns: 1fr !important; gap: 32px !important; } /* ===== BUTTONS ===== */ .btn { padding: 14px 24px !important; font-size: 12px !important; letter-spacing: 1px !important; } .btn--lg { padding: 16px 28px !important; font-size: 13px !important; } /* ===== FOOTER ===== */ .footer__top { grid-template-columns: 1fr !important; gap: 28px !important; padding-bottom: 32px; } .footer__column h4 { font-size: 14px !important; margin-bottom: 12px; } .footer__column ul { font-size: 13px; } .footer__payments { flex-direction: column; gap: 20px !important; align-items: flex-start !important; } .payments-icons { flex-wrap: wrap; gap: 6px; } .payment-icon { font-size: 10px !important; padding: 4px 8px !important; } .footer__security { flex-wrap: wrap; gap: 8px; } .footer__bottom { font-size: 11px !important; text-align: center; } .footer__bottom p { line-height: 1.6; } /* ===== WHATSAPP FLOAT ===== */ .whatsapp-float { width: 56px !important; height: 56px !important; padding: 0 !important; border-radius: 50% !important; } .whatsapp-float__text { display: none !important; } .whatsapp-float i { width: 28px !important; height: 28px !important; } /* ===== BACK TO TOP ===== */ .back-to-top { bottom: 88px !important; right: 16px !important; width: 42px !important; height: 42px !important; } /* ===== MOBILE MENU (drawer lateral) — melhorar ===== */ .mobile-menu { width: 86%; max-width: 340px; } .mobile-menu__item { padding: 16px 20px !important; font-size: 15px !important; border-bottom: 1px solid var(--off-white, #f7f7f7); } /* ===== PÁGINA DE PRODUTO ===== */ .product-detail, .product-page__layout { grid-template-columns: 1fr !important; gap: 24px !important; } .product-gallery, .product__gallery { position: static !important; } .product-info__title, .product__title { font-size: 24px !important; } .product-info__price, .product__price { font-size: 28px !important; } /* ===== CATEGORIA ===== */ .categoria-hero { padding: 40px 16px !important; text-align: center; } .categoria-hero__title { font-size: 28px !important; } .categoria-filters, .filter-sidebar { grid-template-columns: 1fr !important; } /* ===== CARRINHO ===== */ .cart__layout, .cart-grid { grid-template-columns: 1fr !important; } .cart-item { flex-direction: column; gap: 12px; padding: 12px !important; } /* ===== UTILITIES MOBILE ===== */ body { font-size: 15px; } h1 { font-size: 32px !important; line-height: 1.1 !important; } h2 { font-size: 26px !important; line-height: 1.15 !important; } h3 { font-size: 20px !important; line-height: 1.2 !important; } h4 { font-size: 16px !important; } /* Imagens sempre responsivas */ img { max-width: 100%; height: auto; } } /* ============== MOBILE PEQUENO (<= 480px) ============== */ @media (max-width: 480px) { .container { padding: 0 12px; } /* Announcement ainda mais compacto */ .announcement-bar { font-size: 10.5px; } /* Hero ainda menor */ .hero__title, .hero h1 { font-size: 32px !important; } /* Cards de produto — 2 colunas mas mais compactos */ .products-grid, .product-grid { gap: 10px !important; } .product-card__title { font-size: 12px !important; } .product-card__price { font-size: 14px !important; } /* Section padding menor */ .section { padding: 44px 0 !important; } /* Section title menor */ .section-header__title, .section h2 { font-size: 26px !important; } } /* ============== TOUCH TARGETS (acessibilidade) ============== */ @media (hover: none) and (pointer: coarse) { /* Garante área tocável mínima de 44x44px no mobile */ button, a.btn, .header__action, .nav__item, .mobile-menu__item { min-height: 44px; } } /* ============== PREVINIR HORIZONTAL SCROLL ============== */ html, body { overflow-x: hidden; max-width: 100%; } /* Imagens nunca estouram */ img, video, iframe { max-width: 100%; } /* Quebra de palavras longas pra não vazar */ @media (max-width: 768px) { p, h1, h2, h3, h4, h5, h6, span, a, li { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; } /* Top 10 / cards ranking — títulos longos com ellipsis */ .top-10__title, .ranking-card__title, .top-product__title { overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; } /* Brand story — quote sem cortar */ .brand-story__quote { font-size: 17px !important; padding: 0 0 0 16px !important; border-left-width: 2px !important; margin: 0 0 20px 0 !important; } .brand-story { padding: 48px 0 !important; } .brand-story__container { grid-template-columns: 1fr !important; gap: 32px !important; } .brand-story__visual { aspect-ratio: 1 / 1 !important; width: 280px !important; max-width: 90vw; margin: 0 auto !important; border-radius: 16px; } /* Logo da DsArt's ocupando o quadrado inteiro no mobile */ .brand-story__visual--with-logo .brand-story__logo { border-radius: 16px; } /* DS gigante via ::after — reduzir no mobile */ .brand-story__visual::after { font-size: 110px !important; } .brand-story__badge { top: 16px !important; left: 16px !important; font-size: 9px !important; padding: 8px 14px !important; letter-spacing: 1.5px !important; } .brand-story__content { max-width: 100% !important; padding: 0 !important; } .brand-story__content > * { max-width: 100%; } .brand-story__content h2, .brand-story h2 { font-size: 28px !important; } .brand-story__content p { font-size: 14px !important; line-height: 1.7 !important; } .brand-story__signature { flex-wrap: wrap; gap: 12px !important; } /* Newsletter / CTA boxes — não cortar */ .newsletter, .cta-box, .promo-section { text-align: center; padding: 32px 16px !important; } .newsletter h2, .cta-box h2, .promo-section h2 { font-size: 26px !important; line-height: 1.2 !important; } .newsletter p, .cta-box p, .promo-section p { font-size: 14px !important; } /* Back-to-top NÃO sobrepor WhatsApp */ .back-to-top { bottom: 156px !important; /* WhatsApp tem 56px + 16px margin + folga */ right: 16px !important; } /* Container nunca estoura */ .container, section, .section { max-width: 100vw; overflow-x: hidden; } /* Itens com number-display (top 10) */ .top10-item, .ranking-item { grid-template-columns: 80px 80px 1fr !important; gap: 8px !important; padding: 12px !important; } .top10-item__number, .ranking-item__number { font-size: 56px !important; } }