/* * Docyart homepage — mobile-first (~390px baseline). * Enqueued only on is_front_page(). Depends on Kadence's parent styles * cascade, so it can lean on Kadence resets and typography. */ /* ----- Design tokens (tweak brand colors here) ----- */ :root { --docyart-color-bg: #ffffff; --docyart-color-fg: #1a1a1a; --docyart-color-muted: #666; --docyart-color-accent: #b83262; /* placeholder pink until brand palette is set */ --docyart-color-accent-fg: #ffffff; --docyart-color-badge-new: #2f7a4a; --docyart-color-badge-feat: #b8863c; --docyart-color-strip-bg: #1a1a1a; --docyart-color-strip-fg: #f5f5f5; --docyart-color-card-border: #eee; --docyart-color-cash: #2f7a4a; --docyart-radius: 12px; --docyart-gap: 12px; /* Max width for the whole homepage on desktop. Mobile viewports are narrower than this so the cap has no effect below ~1280px. */ --docyart-content-max: 1280px; } /* ----- Chrome-related overrides on Kadence's built-in header/drawer ----- */ /* Hide Kadence's own slide-in drawer everywhere this stylesheet loads — our off-canvas menu replaces it. */ #mobile-drawer { display: none !important; } /* Hide Kadence's entire built-in header on every page — our custom .docyart-top-header (rendered via wp_body_open) is the single source of truth for the site header now. Sub-elements (hamburger, site title, logo) live inside #masthead so they're covered by this one rule. */ #masthead { display: none !important; } /* Same for Kadence's built-in footer — .docyart-footer (rendered via wp_footer) is the single source of truth for the site footer. */ #colophon { display: none !important; } /* ----- Checkout page — progressive disclosure driven by ----- */ /* The React component in src/checkout/step-controller.jsx sets one of these classes on . Rules below hide the WC checkout blocks that belong to future steps. Blocks not listed here stay visible; block listings map to what the Explore agent enumerated in the checkout page's post_content. */ /* Step 0 — email: show only express-payment + contact information. */ /* Google Sign-In mount only makes sense on the email step. Because it lives OUTSIDE the WC contact-information-block (as a sibling), it doesn't get hidden automatically by the per-step rules below — we need an explicit rule for the address and payment steps. */ body.docyart-step-address .docyart-google-mount, body.docyart-step-payment .docyart-google-mount { display: none !important; } body.docyart-step-email .wp-block-woocommerce-checkout-shipping-method-block, body.docyart-step-email .wp-block-woocommerce-checkout-pickup-options-block, body.docyart-step-email .wp-block-woocommerce-checkout-shipping-address-block, body.docyart-step-email .wp-block-woocommerce-checkout-billing-address-block, body.docyart-step-email .wp-block-woocommerce-checkout-shipping-methods-block, body.docyart-step-email .wp-block-woocommerce-checkout-payment-block, body.docyart-step-email .wp-block-woocommerce-checkout-additional-information-block, body.docyart-step-email .wp-block-woocommerce-checkout-order-note-block, body.docyart-step-email .wp-block-woocommerce-checkout-terms-block, body.docyart-step-email .wp-block-woocommerce-checkout-actions-block { display: none !important; } /* Step 1 — address + shipping methods: hide email (done) and payment (next). */ body.docyart-step-address .wp-block-woocommerce-checkout-express-payment-block, body.docyart-step-address .wp-block-woocommerce-checkout-contact-information-block, body.docyart-step-address .wp-block-woocommerce-checkout-payment-block, body.docyart-step-address .wp-block-woocommerce-checkout-additional-information-block, body.docyart-step-address .wp-block-woocommerce-checkout-order-note-block, body.docyart-step-address .wp-block-woocommerce-checkout-terms-block, body.docyart-step-address .wp-block-woocommerce-checkout-actions-block { display: none !important; } /* Step 2 — payment + finalize: hide the earlier steps' fields. */ body.docyart-step-payment .wp-block-woocommerce-checkout-express-payment-block, body.docyart-step-payment .wp-block-woocommerce-checkout-contact-information-block, body.docyart-step-payment .wp-block-woocommerce-checkout-shipping-method-block, body.docyart-step-payment .wp-block-woocommerce-checkout-pickup-options-block, body.docyart-step-payment .wp-block-woocommerce-checkout-shipping-address-block, body.docyart-step-payment .wp-block-woocommerce-checkout-billing-address-block, body.docyart-step-payment .wp-block-woocommerce-checkout-shipping-methods-block { display: none !important; } /* Focus mode on checkout — hide the site chrome that competes with the step controller bar. WhatsApp stays but is nudged above the bar. */ body.woocommerce-checkout .docyart-bottom-nav { display: none !important; } body.woocommerce-checkout .docyart-whatsapp { bottom: calc(96px + env(safe-area-inset-bottom)); } /* Step controller — fixed bar with progress + Continuar/Voltar buttons. */ .docyart-step-controller { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: #fff; border-top: 1px solid var(--docyart-color-card-border); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06); } .docyart-step-controller__progress { display: flex; flex-direction: column; min-width: 0; } .docyart-step-controller__num { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--docyart-color-muted); } .docyart-step-controller__label { font-size: 14px; font-weight: 600; color: var(--docyart-color-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .docyart-step-controller__actions { display: flex; gap: 8px; flex-shrink: 0; } .docyart-step-controller__continue, .docyart-step-controller__back { appearance: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; border-radius: 999px; padding: 12px 20px; white-space: nowrap; } .docyart-step-controller__continue { background: var(--docyart-color-accent); color: #fff; transition: background-color 0.15s ease; } .docyart-step-controller__continue:hover, .docyart-step-controller__continue:focus { background: color-mix(in srgb, var(--docyart-color-accent) 88%, black); } .docyart-step-controller__back { background: transparent; color: var(--docyart-color-fg); padding: 12px 8px; } .docyart-step-controller__back:hover, .docyart-step-controller__back:focus { text-decoration: underline; } /* Leave room at the bottom of checkout page content so the fixed bar doesn't cover the tail of the checkout form. */ body.woocommerce-checkout { padding-bottom: 108px; } /* Hide the order summary column until the user has entered an email (typed or filled by Google Sign-In). Body class toggle happens in step-controller.jsx. Showing prices before we know who the buyer is feels premature in a progressive flow. */ body.woocommerce-checkout:not(.docyart-has-email) .wp-block-woocommerce-checkout-totals-block { display: none !important; } /* Reorder the WC shipping-address form so postcode comes first. Flex `order` doesn't require touching the DOM — the field wrappers already sit as siblings inside .wc-block-components-address-form. Our custom Número mount is a sibling of the whole shipping-address block, so we also give it an order (via .docyart-address-mount rule below). */ .woocommerce-checkout .wc-block-components-address-form { display: flex; flex-wrap: wrap; gap: 12px; } .woocommerce-checkout .wc-block-components-address-form > * { flex: 1 1 100%; min-width: 0; } .woocommerce-checkout .wc-block-components-address-form__country { order: 0; } .woocommerce-checkout .wc-block-components-address-form__postcode { order: 1; } .woocommerce-checkout .wc-block-components-address-form__address_1 { order: 2; } .woocommerce-checkout .wc-block-components-address-form__address_2 { order: 4; } .woocommerce-checkout .wc-block-components-address-form__city { order: 5; } .woocommerce-checkout .wc-block-components-address-form__state { order: 6; } .woocommerce-checkout .wc-block-components-address-form__first_name, .woocommerce-checkout .wc-block-components-address-form__last_name { order: 7; } .woocommerce-checkout .wc-block-components-address-form__company, .woocommerce-checkout .wc-block-components-address-form__phone { order: 8; } /* Force the complement (address_2) always visible. WC hides it behind a "+ Add unit, apt" toggle by default; the collapsed state uses a button-like element that expands on click. We just show the field. */ .woocommerce-checkout .wc-block-components-address-form__address_2 { display: block !important; } .woocommerce-checkout .wc-block-components-address-address-wrapper button[aria-expanded="false"], .woocommerce-checkout .wc-block-components-address-form button[aria-expanded="false"][aria-controls*="address_2"] { display: none !important; } /* Número mount now lives INSIDE .wc-block-components-address-form as a sibling of address_1's wrapper — order:3 slots it between address_1 (order:2) and address_2 (order:4). Being a descendant of the shipping- address block, it inherits the per-step display:none automatically. The re-injection loop in address-enhancer.jsx keeps it in place if WC's React reconciler tries to remove it. */ .docyart-address-mount { order: 3; flex: 1 1 100%; min-width: 0; } .docyart-numero-field { display: flex; flex-direction: column; gap: 4px; max-width: 200px; } .docyart-numero-field__label { font-size: 12px; font-weight: 600; color: var(--docyart-color-fg); } .docyart-numero-field__req { color: #b8323b; } .docyart-numero-field__input { padding: 10px 12px; border: 1px solid #ccc; border-radius: 6px; font: inherit; background: #fff; } .docyart-numero-field__input:focus { outline: 2px solid var(--docyart-color-accent); outline-offset: 1px; border-color: transparent; } /* Google Sign-In on the checkout email step. Rendered by React BELOW the email field inside .wp-block-woocommerce-checkout-contact-information-block. Order: [email input] → [ou divider] → [Google button]. */ .docyart-google-signin { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 16px 0 8px; } .docyart-google-signin__divider { position: relative; width: 100%; text-align: center; } .docyart-google-signin__divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--docyart-color-card-border); } .docyart-google-signin__divider span { position: relative; display: inline-block; padding: 0 12px; background: #fff; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--docyart-color-muted); } .docyart-google-signin__button { display: flex; justify-content: center; min-height: 44px; width: 100%; max-width: 320px; } .docyart-google-signin__error { margin: 0; font-size: 12px; color: #b8323b; text-align: center; } /* Cart + Checkout pages — keep the page title visible but compact. Kadence's default gives .entry-hero a 200px min-height and a huge title; we want it small and tight against the content below. */ .woocommerce-cart .entry-hero .entry-header, .woocommerce-cart .entry-hero-container-inner, .woocommerce-checkout .entry-hero .entry-header, .woocommerce-checkout .entry-hero-container-inner { min-height: 0 !important; padding-top: 12px !important; padding-bottom: 12px !important; } .woocommerce-cart .entry-hero .entry-title, .woocommerce-checkout .entry-hero .entry-title { font-size: 20px !important; margin: 0 !important; line-height: 1.3 !important; } /* Zero out the section's own vertical padding as well. */ .woocommerce-cart .entry-hero.page-hero-section, .woocommerce-checkout .entry-hero.page-hero-section { padding-top: 0 !important; padding-bottom: 0 !important; } /* Leave clearance at the bottom of every non-homepage page so the fixed bottom nav doesn't cover the tail of the content. Homepage already has its own bottom padding via .docyart-home, so we exclude it here. Removed at ≥ 900px where the bottom nav itself is hidden. */ body:not(.home) { padding-bottom: 96px; } @media (min-width: 900px) { body:not(.home) { padding-bottom: 0; } } /* ----- Custom top header row (rendered via wp_body_open, below promo strip) ----- */ .docyart-top-header { background: #fff; border-bottom: 1px solid var(--docyart-color-card-border); position: relative; z-index: 30; } .docyart-top-header__inner { max-width: var(--docyart-content-max); margin: 0 auto; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; padding: 10px 12px; } .docyart-top-header__icon { appearance: none; background: transparent; border: 0; color: var(--docyart-color-fg); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; text-decoration: none; position: relative; } .docyart-top-header__brand { display: flex; align-items: center; justify-content: center; min-width: 0; color: var(--docyart-color-fg); text-decoration: none; line-height: 1.2; } .docyart-top-header__brand--text { font-weight: 700; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Image logo: whether from the_custom_logo() or the file fallback. */ .docyart-top-header__brand--logo img, .docyart-top-header__brand--logo .custom-logo, .docyart-top-header__brand--logo .custom-logo-link img { display: block; max-height: 54px; width: auto; max-width: 100%; object-fit: contain; } /* Custom-logo comes wrapped in its own ; kill its default margins/borders so it centers cleanly inside the grid cell. */ .docyart-top-header__brand--logo .custom-logo-link { display: inline-flex; align-items: center; line-height: 0; } .docyart-top-header__cart .docyart-cart-count { position: absolute; top: 2px; right: 2px; background: var(--docyart-color-accent); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 999px; padding: 0 4px; } /* ----- Top promo strip (rendered above Kadence header via wp_body_open) ----- */ .docyart-promo-strip { width: 100%; background: var(--docyart-color-strip-bg); color: var(--docyart-color-strip-fg); text-align: center; font-size: 13px; line-height: 1.3; padding: 8px 12px; } /* ----- Home main wrapper ----- */ .docyart-home { max-width: var(--docyart-content-max); margin: 0 auto; padding: 0 12px 96px; /* bottom padding leaves room for the sticky nav */ color: var(--docyart-color-fg); background: var(--docyart-color-bg); } .docyart-home > * + * { margin-top: 20px; } /* ----- Search bar ----- */ .docyart-search-wrap { max-width: 720px; margin: 16px auto 20px; padding: 0 12px; } .docyart-search { position: relative; display: flex; align-items: center; background: #f2f2f2; border-radius: 999px; padding: 4px 4px 4px 16px; } .docyart-search input[type="search"] { flex: 1; border: 0; background: transparent; font: inherit; padding: 10px 8px; outline: none; } .docyart-search button { appearance: none; border: 0; color: transparent; font-size: 0; border-radius: 999px; width: 44px; height: 44px; flex-shrink: 0; cursor: pointer; background-color: var(--docyart-color-accent); background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 26px 26px; transition: background-color 0.15s ease; } .docyart-search button:hover, .docyart-search button:focus { background-color: color-mix(in srgb, var(--docyart-color-accent) 88%, black); } /* ----- Shared carousel primitive ----- */ .docyart-carousel { position: relative; } .docyart-carousel__row { display: flex; gap: var(--docyart-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; } .docyart-carousel__row::-webkit-scrollbar { display: none; } .docyart-carousel__dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; } .docyart-carousel__dot { appearance: none; border: 0; width: 8px; height: 8px; border-radius: 50%; background: #ccc; cursor: pointer; padding: 0; } .docyart-carousel__dot.is-active { background: var(--docyart-color-fg); transform: scale(1.2); } .docyart-carousel__arrows { display: flex; gap: 8px; } .docyart-carousel__arrow { appearance: none; border: 1px solid var(--docyart-color-card-border); background: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; color: var(--docyart-color-fg); } .docyart-carousel__arrow:disabled { opacity: 0.4; cursor: default; } /* ----- Hero carousel ----- */ .docyart-hero__slide { flex: 0 0 100%; scroll-snap-align: start; border-radius: var(--docyart-radius); overflow: hidden; display: block; } .docyart-hero__slide img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; } /* ----- Mid banner ----- */ .docyart-mid-banner { display: block; border-radius: var(--docyart-radius); overflow: hidden; } .docyart-mid-banner img { display: block; width: 100%; height: auto; } /* ----- Product carousels ----- */ .docyart-products__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .docyart-products__title { font-size: 18px; font-weight: 600; margin: 0; } .docyart-card { flex: 0 0 calc(50% - (var(--docyart-gap) / 2)); scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--docyart-color-card-border); border-radius: var(--docyart-radius); padding: 8px; background: #fff; } .docyart-card__media { position: relative; display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 1; background: #f5f5f5; } .docyart-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .docyart-card__badges { position: absolute; top: 6px; left: 6px; display: flex; flex-direction: column; gap: 4px; max-width: calc(100% - 12px); } .docyart-badge { display: inline-block; font-size: 10px; font-weight: 600; line-height: 1; padding: 4px 6px; border-radius: 4px; color: #fff; text-transform: uppercase; letter-spacing: 0.03em; } .docyart-badge--new { background: var(--docyart-color-badge-new); } .docyart-badge--featured { background: var(--docyart-color-badge-feat); } .docyart-card__title { color: inherit; text-decoration: none; font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.25 * 13px); } .docyart-card__rating .star-rating { font-size: 12px; } .docyart-card__prices { display: flex; flex-direction: column; gap: 2px; } .docyart-card__regular { font-size: 14px; font-weight: 600; } .docyart-card__regular del { color: var(--docyart-color-muted); font-weight: 400; margin-right: 4px; } .docyart-cash-price { font-size: 11px; color: var(--docyart-color-cash); } .docyart-cash-price strong { font-size: 12px; font-weight: 700; margin-right: 4px; } .docyart-card__cta .button { display: block; width: 100%; background: var(--docyart-color-accent) !important; color: var(--docyart-color-accent-fg) !important; border: 0 !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important; padding: 8px 12px !important; text-align: center; margin-top: 4px; } .docyart-card__cta .added_to_cart { display: block; text-align: center; font-size: 11px; margin-top: 4px; color: var(--docyart-color-cash); } /* ----- Sticky bottom nav ----- */ .docyart-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: space-around; align-items: stretch; background: #fff; border-top: 1px solid var(--docyart-color-card-border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); } .docyart-bottom-nav__item { appearance: none; background: transparent; border: 0; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 6px; color: var(--docyart-color-fg); text-decoration: none; font-size: 20px; line-height: 1; cursor: pointer; position: relative; flex: 1; } .docyart-bottom-nav__label { font-size: 10px; font-weight: 500; } .docyart-bottom-nav__cart .docyart-cart-count { position: absolute; top: 0; right: 20%; background: var(--docyart-color-accent); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 999px; padding: 0 4px; } .docyart-cart-count[hidden] { display: none; } /* ----- Off-canvas menu ----- */ .docyart-offcanvas__overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 45; opacity: 0; pointer-events: none; transition: opacity 0.2s; } body.docyart-offcanvas-open .docyart-offcanvas__overlay { pointer-events: auto; } .docyart-offcanvas { position: fixed; top: 0; bottom: 0; left: 0; width: min(86vw, 360px); z-index: 50; background: #fff; transform: translateX(-100%); transition: transform 0.25s ease; overflow-y: auto; padding: 12px 16px 32px; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1); } body.docyart-offcanvas-open .docyart-offcanvas { transform: translateX(0); } body.docyart-offcanvas-open .docyart-offcanvas__overlay { opacity: 1; } .docyart-offcanvas__header { display: flex; justify-content: flex-end; } .docyart-offcanvas__close { appearance: none; background: transparent; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: var(--docyart-color-fg); padding: 4px 8px; } .docyart-offcanvas__account { padding: 4px 0 12px; border-bottom: 1px solid var(--docyart-color-card-border); } .docyart-offcanvas__account a { color: inherit; font-weight: 600; text-decoration: none; } .docyart-offcanvas__links { list-style: none; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--docyart-color-card-border); } .docyart-offcanvas__links li { padding: 6px 0; } .docyart-offcanvas__links a { color: inherit; text-decoration: none; } .docyart-offcanvas__heading { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--docyart-color-muted); margin: 16px 0 8px; } .docyart-cat-tree { list-style: none; margin: 0; padding: 0; } .docyart-cat-tree li { padding: 4px 0; } .docyart-cat-tree a { color: inherit; text-decoration: none; display: block; padding: 4px 0; } .docyart-cat-tree details > summary { cursor: pointer; list-style: none; padding: 4px 0; position: relative; } .docyart-cat-tree details > summary::-webkit-details-marker { display: none; } .docyart-cat-tree details > summary::after { content: "+"; position: absolute; right: 4px; font-weight: 700; } .docyart-cat-tree details[open] > summary::after { content: "−"; } .docyart-cat-tree details ul { margin-left: 16px; } .docyart-cat-tree__all { font-size: 12px; color: var(--docyart-color-muted); } .docyart-offcanvas__socials { display: flex; gap: 12px; margin-top: 20px; } .docyart-offcanvas__socials a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #f2f2f2; color: var(--docyart-color-fg); text-decoration: none; font-size: 12px; font-weight: 600; } /* ----- "Sobre a loja" section ----- */ .docyart-about { text-align: center; padding: 24px 0 8px; color: var(--docyart-color-fg); } .docyart-about__title { font-size: 20px; font-weight: 700; margin: 0 0 12px; } .docyart-about__body { color: var(--docyart-color-muted); line-height: 1.6; font-size: 14px; max-width: 640px; margin: 0 auto; } .docyart-about__body p { margin: 0 0 12px; } .docyart-about__body p:last-child { margin-bottom: 0; } .docyart-about__body a { color: var(--docyart-color-accent); } /* ----- Site footer (docyart-footer) ----- */ .docyart-footer { background: #bd385b; color: #e9e9e9; padding: 32px 0 0; font-size: 14px; line-height: 1.5; } .docyart-footer__inner { max-width: var(--docyart-content-max); margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: 1fr; gap: 28px; } .docyart-footer__section h4, .docyart-footer__heading { margin: 0 0 12px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; } .docyart-footer__links, .docyart-footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .docyart-footer__links a, .docyart-footer__contact a { color: #e9e9e9; text-decoration: none; } .docyart-footer__links a:hover, .docyart-footer__contact a:hover { text-decoration: underline; } .docyart-footer__label { color: #9a9a9a; margin-right: 4px; } /* Payment method icons — images live in assets/img/payments/. Sized to a common visual height regardless of intrinsic dimensions, on a light background pill so the icons pop off the dark footer. */ .docyart-footer__payments { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .docyart-payment { display: inline-block; /* Every pill renders at exactly 61 x 44 px. Intrinsic image sizes vary (Visa/Master/PIX/Boleto are 45x36, Elo is 150x93); object-fit makes them fit uniformly without distortion. */ width: 61px; height: 44px; padding: 4px; background: #fff; border-radius: 6px; box-sizing: border-box; object-fit: contain; object-position: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } /* Security seal */ .docyart-seal { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(47, 122, 74, 0.15); border: 1px solid rgba(47, 122, 74, 0.5); border-radius: 10px; color: #7ad39a; } .docyart-seal svg { flex-shrink: 0; color: #7ad39a; } .docyart-seal__text { display: flex; flex-direction: column; line-height: 1.2; } .docyart-seal__text strong { font-size: 13px; color: #fff; } .docyart-seal__text small { font-size: 11px; color: #b8b8b8; margin-top: 2px; } /* Copyright bar */ .docyart-footer__bottom { margin-top: 24px; padding: 16px; border-top: 1px solid #333; text-align: center; font-size: 12px; color: #9a9a9a; } @media (min-width: 768px) { .docyart-footer__inner { grid-template-columns: repeat(2, 1fr); gap: 32px; padding: 0 24px; } } @media (min-width: 1024px) { .docyart-footer { padding-top: 48px; } .docyart-footer__inner { grid-template-columns: repeat(4, 1fr); padding: 0 32px; } } /* ----- Search modal ----- */ .docyart-search-modal { position: fixed; inset: 0; z-index: 60; display: none; } body.docyart-search-modal-open { overflow: hidden; } body.docyart-search-modal-open .docyart-search-modal { display: block; } .docyart-search-modal[hidden] { display: none; } .docyart-search-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); animation: docyart-fade-in 0.12s ease-out; } .docyart-search-modal__panel { position: relative; width: min(92vw, 500px); margin: 12vh auto 0; background: #fff; border-radius: 16px; padding: 16px 16px 20px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); animation: docyart-modal-in 0.15s ease-out; } .docyart-search-modal__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .docyart-search-modal__title { margin: 0; font-size: 15px; font-weight: 700; color: #1a1a1a; } .docyart-search-modal__close { appearance: none; border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; color: #1a1a1a; padding: 4px 8px; } .docyart-search-modal__form { display: flex; gap: 8px; } .docyart-search-modal__form input[type="search"] { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid #ddd; border-radius: 999px; font: inherit; font-size: 15px; background: #fff; appearance: none; } .docyart-search-modal__form input[type="search"]:focus { outline: 2px solid var(--docyart-color-accent); outline-offset: 1px; border-color: transparent; } .docyart-search-modal__form button[type="submit"] { appearance: none; padding: 12px 20px; background: var(--docyart-color-accent); color: #fff; border: 0; border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; } .docyart-search-modal__form button[type="submit"]:hover, .docyart-search-modal__form button[type="submit"]:focus { background: color-mix(in srgb, var(--docyart-color-accent) 88%, black); } @keyframes docyart-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes docyart-modal-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ----- Floating WhatsApp button ----- */ .docyart-whatsapp { position: fixed; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 40; width: 48px; height: 48px; border-radius: 50%; background: #25d366; color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); text-decoration: none; } /* ----- Body lock when off-canvas is open ----- */ body.docyart-offcanvas-open { overflow: hidden; } /* ----- Overlay/dialog hidden state ----- */ .docyart-offcanvas[hidden], .docyart-offcanvas__overlay[hidden] { display: none; } /* ===================================================================== RESPONSIVE — mobile-first stays. Everything below overrides at wider viewports. Cards per view: 2 (mobile) → 3 (≥768) → 4 (≥1024) → 5 (≥1440). ===================================================================== */ /* ----- Tablet ----- */ @media (min-width: 768px) { .docyart-home { padding: 0 24px 96px; } .docyart-home > * + * { margin-top: 32px; } .docyart-top-header__inner { padding: 12px 24px; } .docyart-top-header__brand--logo img, .docyart-top-header__brand--logo .custom-logo, .docyart-top-header__brand--logo .custom-logo-link img { max-height: 66px; } .docyart-products__title { font-size: 22px; } .docyart-card__title { font-size: 14px; } .docyart-card__regular { font-size: 15px; } .docyart-about { padding: 40px 0 16px; } .docyart-about__title { font-size: 24px; } .docyart-about__body { font-size: 15px; } /* 3 cards per view */ .docyart-card { flex: 0 0 calc(33.3333% - (var(--docyart-gap) * 2 / 3)); } } /* ----- Desktop: drop the mobile-only bottom nav, expand hero ----- */ @media (min-width: 900px) { .docyart-bottom-nav { display: none; } .docyart-home { padding-bottom: 40px; } .docyart-whatsapp { bottom: 24px; } .docyart-hero__slide img { aspect-ratio: 21 / 9; max-height: 520px; } } /* ----- Desktop ----- */ @media (min-width: 1024px) { .docyart-home { padding-left: 32px; padding-right: 32px; } .docyart-top-header__inner { padding: 14px 32px; } /* 4 cards per view */ .docyart-card { flex: 0 0 calc(25% - (var(--docyart-gap) * 3 / 4)); } /* Subtle hover polish on desktop-only pointers. */ .docyart-card { transition: box-shadow 0.15s ease, transform 0.15s ease; } } @media (min-width: 1024px) and (hover: hover) { .docyart-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } } /* ----- Wide desktop ----- */ @media (min-width: 1440px) { /* 5 cards per view */ .docyart-card { flex: 0 0 calc(20% - (var(--docyart-gap) * 4 / 5)); } }