/* ========================================================================= ConsolesBarato :: storefront design system Dark is the default for everyone. Light is an explicit opt in via , not a system preference, because the brand look the team signed off on is the dark one. The look is pixel art seasoned, not pixel art themed: a pixel typeface for labels, badges and prices, square corners, pixel drawn icons. Body copy stays in a normal sans, because people read paragraphs here. Every text colour in both themes is measured at 4.5:1 against the surface it actually lands on. Button and badge labels count as normal text at these sizes, so 3:1 is not good enough for them. Contents 01 tokens 02 reset and base 03 typography 04 buttons and links 05 badges, pills, chips 06 layout shells 07 topbar, header, category nav 08 footer 09 hero and trust strip 10 product card and price 11 category tile 12 editorial: post cards and prose 13 shop: filters, grid, pagination 14 product page 15 price table and most searched 16 carousel 17 utilities, responsive, motion ========================================================================= */ /* -------------------------------------------------------------- 01 tokens */ :root { color-scheme: dark; --paper: #0a0a12; --surface: #12121c; --surface-2: #1a1a26; --surface-sunken: #06060c; --ink: #f4f3f8; --ink-2: #c9c6d8; --ink-3: #9b98ad; --ink-inverse: #0a0a12; /* Text that sits ON a brand or accent fill. Those fills are light steps here, so their labels are dark. Hardcoding #fff is how a button ends up at 4.3:1. */ --on-brand: #0a0a12; --on-accent: #0a0a12; /* Bands that are darker than the page on purpose: top strip and footer. */ --dark-surface: #06060c; --on-dark: #ffffff; --on-dark-2: #d9d6e2; --on-dark-3: #a5a1b5; --brand: #8b6dff; --brand-fill: #7c5cff; --brand-dark: #a98fff; --brand-soft: #241d40; --accent: #ff7a63; --accent-fill: #ff6b52; --accent-soft: #33170f; --gold: #ffc93c; --gold-soft: #33270a; --green: #3ddc84; --green-fill: #3ddc84; --green-soft: #0d2b1a; /* In dark the hard black shadow is invisible, so the pixel edge comes from a hairline instead and depth from a soft lift. Light mode swaps both back to the offset block shadow. */ --line: #272736; --line-soft: #1e1e2c; --border: 1px solid var(--line); --border-soft: 1px solid var(--line-soft); --shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 44px rgba(0, 0, 0, 0.55); --shadow-flat: none; --font-pixel: "Silkscreen", "Courier New", monospace; --font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --radius: 4px; --page: 1280px; --page-narrow: 760px; --focus: 0 0 0 3px var(--gold); } /* Light is opt in only. Nothing here reacts to prefers-color-scheme: the default look is the dark one, for every visitor. */ :root[data-theme="light"] { color-scheme: light; --paper: #f6f4ef; --surface: #ffffff; --surface-2: #efece5; --surface-sunken: #e7e3da; --ink: #17161d; --ink-2: #45434f; --ink-3: #595763; --ink-inverse: #ffffff; --on-brand: #ffffff; --on-accent: #ffffff; --dark-surface: #17161d; --on-dark: #ffffff; --on-dark-2: #d9d6e2; --on-dark-3: #a5a1b5; --brand: #5b3df5; --brand-fill: #5b3df5; --brand-dark: #4225d6; --brand-soft: #ece8fe; /* Two steps, because they answer different questions. --accent is used as TEXT (link hover, the logo wordmark), so it has to clear 4.5:1 on every light ground including the sunken one. --accent-fill is a BACKGROUND that carries white labels, so it is the lighter step. */ --accent: #ba361c; --accent-fill: #d73f20; --accent-soft: #ffe9e3; --gold: #ffc53d; --gold-soft: #fff4d6; --green: #0d8846; --green-fill: #0d8846; --green-soft: #dcf5e7; --line: #17161d; --line-soft: #d9d5cc; --border: 2px solid var(--line); --border-soft: 1px solid var(--line-soft); --shadow: 3px 3px 0 var(--line); --shadow-lg: 5px 5px 0 var(--line); --radius: 0px; } /* ------------------------------------------------------ 02 reset and base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } .pixelated { image-rendering: pixelated; } button, input, select, textarea { font: inherit; color: inherit; } :where(a, button, input, select, textarea, summary):focus-visible { outline: none; box-shadow: var(--focus); } ::selection { background: var(--gold); color: #0a0a12; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--brand-fill); color: var(--on-brand); padding: var(--s3) var(--s4); font-family: var(--font-pixel); font-size: 12px; } .skip-link:focus { left: var(--s3); top: var(--s3); } /* --------------------------------------------------------- 03 typography */ h1, h2, h3, h4 { margin: 0 0 var(--s3); line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; } h1 { font-size: clamp(32px, 5vw, 56px); } h2 { font-size: clamp(24px, 3vw, 34px); } h3 { font-size: clamp(17px, 2vw, 20px); } p { margin: 0 0 var(--s4); } a { color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 3px; } a:hover { color: var(--accent); } small, .small { font-size: 13px; } .muted { color: var(--ink-3); } /* The eyebrow is where the pixel face earns its keep: short, uppercase, wide tracking, always above a heading. */ .eyebrow { font-family: var(--font-pixel); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s2); display: flex; align-items: center; gap: var(--s2); } .eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--accent-fill); flex: none; } .eyebrow--brand { color: var(--brand); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; } .section-head p { margin: var(--s1) 0 0; color: var(--ink-3); max-width: 60ch; } /* ---------------------------------------------------- 04 buttons and links */ .btn { --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: var(--line); display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: 13px var(--s5); background: var(--btn-bg); color: var(--btn-fg); border: 2px solid var(--btn-border); border-radius: var(--radius); font-family: var(--font-pixel); font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform 0.08s steps(2), filter 0.12s ease, background 0.12s ease; } .btn:hover { transform: translateY(-1px); filter: brightness(1.08); color: var(--btn-fg); } .btn:active { transform: translateY(1px); filter: brightness(0.95); } .btn--primary { --btn-bg: var(--accent-fill); --btn-fg: var(--on-accent); --btn-border: var(--accent-fill); } .btn--brand { --btn-bg: var(--brand-fill); --btn-fg: var(--on-brand); --btn-border: var(--brand-fill); } .btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: var(--line); } .btn--outline:hover { --btn-border: var(--brand); color: var(--ink); } .btn--ghost { --btn-border: transparent; } .btn--ghost:hover { background: var(--surface-2); } .btn--block { width: 100%; } .btn--sm { padding: 8px var(--s3); font-size: 11px; } .btn--lg { padding: 16px var(--s6); font-size: 14px; } .btn[aria-disabled="true"], .btn:disabled { opacity: 0.45; pointer-events: none; } .link-arrow { font-family: var(--font-pixel); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; white-space: nowrap; color: var(--brand); display: inline-flex; align-items: center; gap: 6px; } .link-arrow::after { content: "\2192"; } /* -------------------------------------------------- 05 badges and chips */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px var(--s2); background: var(--surface-2); color: var(--ink-2); border: var(--border-soft); border-radius: var(--radius); font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .badge--discount { background: var(--green-fill); color: var(--on-accent); border-color: transparent; } .badge--promo, .badge--new { background: var(--accent-fill); color: var(--on-accent); border-color: transparent; } .badge--featured { background: var(--gold); color: #0a0a12; border-color: transparent; } .badge--out { background: var(--surface-sunken); color: var(--ink-3); } .badge--soft { background: var(--brand-soft); color: var(--brand-dark); border-color: transparent; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px var(--s3); background: var(--surface); border: var(--border); border-radius: var(--radius); color: var(--ink-2); text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap; } .chip:hover { border-color: var(--brand); color: var(--ink); } .chip[aria-current="true"], .chip--active { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-brand); } .chip-row { display: flex; gap: var(--s2); flex-wrap: wrap; } /* ------------------------------------------------------ 06 layout shells */ .wrap { width: min(100% - var(--s5) * 2, var(--page)); margin-inline: auto; } .wrap--narrow { width: min(100% - var(--s5) * 2, var(--page-narrow)); margin-inline: auto; } .section { padding-block: var(--s7); } .section--tight { padding-block: var(--s5); } .section--sunken { background: var(--surface-sunken); } .grid { display: grid; gap: var(--s4); } /* auto-fit, not auto-fill. auto-fill keeps the empty tracks it created, so a row of four cards in a container wide enough for five left 259px of dead space hanging off the right. auto-fit collapses the empty track and the cards stretch to the container edge. */ .grid--products { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .grid--posts { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid--cats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .card { background: var(--surface); border: var(--border); border-radius: var(--radius); } /* A 4px checker, the cheapest way to say pixel without a background image. */ .dither { height: 8px; background-image: linear-gradient(45deg, currentColor 25%, transparent 25%), linear-gradient(-45deg, currentColor 25%, transparent 25%), linear-gradient(45deg, transparent 75%, currentColor 75%), linear-gradient(-45deg, transparent 75%, currentColor 75%); background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0; opacity: 0.15; } /* ------------------------------------------ 07 topbar, header, category nav */ .topbar { background: var(--dark-surface); color: var(--on-dark-2); font-size: 12px; border-bottom: var(--border-soft); } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 36px; flex-wrap: wrap; } .topbar__item { display: inline-flex; align-items: center; gap: 6px; } .topbar__item .icon { color: var(--gold); } .topbar__muted { color: var(--on-dark-3); } .site-header { background: var(--paper); border-bottom: var(--border-soft); position: sticky; top: 0; z-index: 40; } .site-header__inner { display: flex; align-items: center; gap: var(--s4); padding-block: var(--s3); } .logo { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; color: var(--ink); flex: none; } .logo__mark { width: 34px; height: 34px; flex: none; background: var(--brand-fill); border-radius: var(--radius); box-shadow: 3px 3px 0 var(--accent-fill); } .logo__text { font-family: var(--font-pixel); line-height: 1.05; font-size: 15px; letter-spacing: 0.02em; } .logo__text span { display: block; color: var(--accent); } .search { flex: 1 1 320px; display: flex; min-width: 0; background: var(--surface); border: var(--border); border-radius: 999px; padding: 4px 4px 4px var(--s4); align-items: center; gap: var(--s2); } .search:focus-within { border-color: var(--brand); } .search input { flex: 1; min-width: 0; padding: 8px 0; border: none; background: transparent; font-size: 14px; } .search input:focus-visible { box-shadow: none; } .search input::placeholder { color: var(--ink-3); } .search button { flex: none; width: 38px; height: 38px; background: var(--surface-2); color: var(--ink); border: none; border-radius: 999px; cursor: pointer; display: grid; place-items: center; } .search button:hover { background: var(--brand-fill); color: var(--on-brand); } .header-actions { display: flex; align-items: center; gap: var(--s2); flex: none; } .catnav { background: var(--paper); border-bottom: var(--border-soft); } .catnav__inner { display: flex; align-items: center; gap: var(--s1); padding-block: var(--s2); } .catnav__scroll { display: flex; align-items: center; gap: var(--s1); overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; } .catnav__scroll::-webkit-scrollbar { display: none; } .catnav a { padding: 8px var(--s3); text-decoration: none; color: var(--ink-2); font-size: 14px; font-weight: 500; white-space: nowrap; border-radius: var(--radius); } .catnav a:hover { color: var(--ink); background: var(--surface-2); } .catnav a[aria-current="page"] { color: var(--on-brand); background: var(--brand-fill); } .catnav__cta { flex: none; font-family: var(--font-pixel); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand) !important; display: inline-flex; align-items: center; gap: 6px; } .catnav__cta:hover { background: transparent !important; color: var(--accent) !important; } /* ---------------------------------------------------------- 08 footer */ .site-footer { background: var(--dark-surface); color: var(--on-dark-2); border-top: var(--border-soft); padding-block: var(--s6); margin-top: var(--s8); } .site-footer a { color: var(--on-dark-2); text-decoration: none; } .site-footer a:hover, .site-footer a:focus-visible { color: var(--gold); text-decoration: underline; } .site-footer .logo { color: var(--on-dark); } .footer-bar { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; } .footer-tagline { font-family: var(--font-pixel); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-3); } .footer-links { display: flex; gap: var(--s5); flex-wrap: wrap; font-size: 14px; margin-left: auto; } .footer-social { display: flex; gap: var(--s3); } .footer-social a { display: grid; place-items: center; width: 32px; height: 32px; border: var(--border-soft); border-radius: var(--radius); color: var(--on-dark-2); } .footer-social a:hover { border-color: var(--gold); } .footer-note { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 12px; color: var(--on-dark-3); display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; } /* --------------------------------------------- 09 hero and trust strip */ /* One banner. The art is a layer inside it that bleeds to the right edge, and the copy sits on top: no second box, no seam, no gap down the middle. */ .hero { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--paper); min-height: 430px; display: flex; align-items: center; } /* Full bleed, not a panel pinned to the right. A masked half-width layer left a visible vertical step where the mask began; one gradient across the whole banner has no edge to see. */ .hero__art { position: absolute; inset: 0; background: radial-gradient(90% 130% at 78% 40%, rgba(124, 92, 255, 0.92), transparent 70%), linear-gradient(90deg, transparent 30%, rgba(124, 92, 255, 0.22) 62%, var(--brand-soft) 100%); } .hero__art::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 18px 18px; /* The grid belongs to the art, so it fades out before it reaches the copy. */ -webkit-mask-image: linear-gradient(90deg, transparent 32%, #000 70%); mask-image: linear-gradient(90deg, transparent 32%, #000 70%); } /* The picture covers the whole banner and is placed with object-position, rather than being pushed right by an offset box. Both were tried. width:auto sized the element from the file, so the banner reflowed the moment the bytes landed. Adding width:100% on top of left and right over-constrained it, and CSS resolves that by dropping the right offset: the box then ran half a banner past the edge and overflow clipped the artwork, which is what cut the Switch in half. With inset:0 the box is fully determined before the image exists, so nothing moves and nothing is cropped, and object-position decides where the art sits. */ .hero__art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; } .hero__copy { position: relative; z-index: 1; width: min(54%, 620px); padding: var(--s7) var(--s5) var(--s7) var(--s6); } .hero h1 { margin-bottom: var(--s4); } /* The second line of the headline picks up the brand violet, which is the one place the reference lets colour into a heading. */ .hero h1 em { font-style: normal; color: var(--brand); display: block; } .hero__lede { font-size: 16px; color: var(--ink-2); max-width: 44ch; } .hero__actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s6); } .trust { display: flex; gap: var(--s5); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .trust li { display: flex; align-items: flex-start; gap: var(--s2); font-size: 13px; color: var(--ink-2); line-height: 1.35; } .trust .icon { color: var(--brand); flex: none; margin-top: 1px; } .hero__crown { display: block; color: var(--gold); margin: 0 auto var(--s2); width: 24px; } .hero__slogan { position: absolute; top: var(--s6); right: var(--s7); margin: 0; font-family: var(--font-pixel); font-size: 12px; line-height: 2; letter-spacing: 0.14em; color: #fff; text-align: center; } .hero__note { position: absolute; right: var(--s5); bottom: var(--s6); margin: 0; background: var(--gold); color: #0a0a12; font-family: var(--font-pixel); font-size: 9px; line-height: 1.8; letter-spacing: 0.08em; padding: var(--s3); max-width: 170px; transform: rotate(-2deg); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35); } /* ------------------------------------------- 10 product card and price */ .product-card { display: flex; flex-direction: column; position: relative; background: var(--surface); border: var(--border); border-radius: var(--radius); height: 100%; overflow: hidden; transition: transform 0.12s ease, border-color 0.12s ease; } .product-card:hover { transform: translateY(-3px); border-color: var(--brand); } .product-card__media { position: relative; /* Measured off the reference card: wider than it is tall, not 4:3. */ aspect-ratio: 3 / 2; display: grid; place-items: center; background: var(--surface-2); overflow: hidden; padding: var(--s4); } .product-card__media img { max-height: 100%; width: auto; object-fit: contain; } .product-card__placeholder { font-family: var(--font-pixel); font-size: 34px; color: var(--ink-3); opacity: 0.5; } .product-card__flags { position: absolute; top: var(--s2); left: var(--s2); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); z-index: 2; } .product-card__body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; } .product-card__brand { font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .product-card__name { font-size: 15px; font-weight: 600; line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-card__name a { color: inherit; text-decoration: none; } /* The title link stretches over the whole card, so the card is one big hit target while the buy button below stays its own separate link. Nesting two elements would be invalid markup. */ .product-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .product-card__foot { margin-top: auto; padding-top: var(--s2); display: flex; flex-direction: column; gap: var(--s3); } /* Above the stretched link, so it stays clickable in its own right. */ .product-card__foot .btn { position: relative; z-index: 2; } /* The old price sits on the same line as the current one. Wrapping made the card two lines taller than the reference. */ .price { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: nowrap; white-space: nowrap; } .price__now { font-family: var(--font-pixel); font-size: 17px; color: var(--ink); } .price__cents { font-size: 13px; } .price__was { font-size: 12px; color: var(--ink-3); text-decoration: line-through; } .price--lg .price__now { font-size: 32px; } .price--lg .price__cents { font-size: 18px; } .seller { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); } .rating { display: inline-flex; align-items: center; gap: 2px; } .rating i { width: 11px; height: 11px; display: block; background: var(--line); } .rating i.full { background: var(--gold); } .rating i.half { background: linear-gradient(90deg, var(--gold) 50%, var(--line) 50%); } .rating span { font-size: 12px; color: var(--ink-3); margin-left: var(--s1); } /* --------------------------------------------------- 11 category tile */ .cat-tile { display: flex; flex-direction: column; gap: 2px; padding: var(--s4); background: var(--surface); border: var(--border); border-radius: var(--radius); text-decoration: none; color: inherit; transition: transform 0.12s ease, border-color 0.12s ease; } .cat-tile:hover { transform: translateY(-3px); border-color: var(--brand); color: inherit; } /* The count line below the name. Scoped to a child so it cannot also match the icon holder, which is a too: ".cat-tile span" was outranking ".cat-tile__icon" and painting the icons muted grey instead of brand violet. */ .cat-tile__count { font-size: 12px; color: var(--ink-3); } /* No tile behind the glyph: in the reference the icon sits directly on the card. The violet square was an invention of mine. */ .cat-tile__icon { display: block; color: var(--brand); margin-bottom: var(--s1); } .cat-tile__icon .icon { width: 30px; height: 30px; } .cat-tile strong { font-size: 15px; } /* ------------------------------------- 12 editorial: post cards, prose */ .post-card { display: flex; flex-direction: column; background: var(--surface); border: var(--border); border-radius: var(--radius); text-decoration: none; color: inherit; height: 100%; overflow: hidden; transition: transform 0.12s ease, border-color 0.12s ease; } .post-card:hover { transform: translateY(-3px); border-color: var(--brand); color: inherit; } .post-card__media { aspect-ratio: 16 / 9; background: var(--brand-soft); display: grid; place-items: center; overflow: hidden; } .post-card__media img { width: 100%; height: 100%; object-fit: cover; } .post-card__motif { width: 100%; height: 100%; background-image: linear-gradient(45deg, var(--brand) 25%, transparent 25%), linear-gradient(-45deg, var(--brand) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--brand) 75%), linear-gradient(-45deg, transparent 75%, var(--brand) 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; opacity: 0.25; } .post-card__body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; } .post-card h3 { font-size: 17px; margin: 0; line-height: 1.3; } .post-card p { margin: 0; font-size: 14px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post-meta { display: flex; align-items: center; gap: var(--s3); font-size: 12px; color: var(--ink-3); margin-top: auto; padding-top: var(--s2); flex-wrap: wrap; } /* "Leia antes de comprar": one lead story beside a stack of three. */ .editorial { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--s4); align-items: stretch; } .editorial__lead { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); border: var(--border); border-radius: var(--radius); overflow: hidden; } .editorial__art { position: relative; background: var(--brand-soft); min-height: 260px; display: grid; place-items: center; } .editorial__art img { width: 100%; height: 100%; object-fit: cover; } .editorial__art .badge { position: absolute; top: var(--s3); left: var(--s3); } .editorial__body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); justify-content: center; } .editorial__body h3 { font-size: clamp(19px, 2.2vw, 24px); margin: 0; } .editorial__body h3 a { color: inherit; text-decoration: none; } .editorial__list { display: grid; gap: var(--s3); align-content: start; } .editorial__item { display: grid; grid-template-columns: 84px 1fr auto; gap: var(--s3); align-items: center; padding: var(--s3); background: var(--surface); border: var(--border); border-radius: var(--radius); text-decoration: none; color: inherit; transition: border-color 0.12s ease; } .editorial__item:hover { border-color: var(--brand); color: inherit; } .editorial__thumb { aspect-ratio: 4 / 3; background: var(--brand-soft); border-radius: var(--radius); overflow: hidden; } .editorial__thumb img { width: 100%; height: 100%; object-fit: cover; } .editorial__item strong { display: block; font-size: 14px; line-height: 1.35; margin-block: 2px; } .prose { font-size: 17px; line-height: 1.75; color: var(--ink-2); max-width: 68ch; } .prose > * + * { margin-top: var(--s4); } .prose h2 { font-size: 26px; color: var(--ink); margin-top: var(--s7); padding-top: var(--s3); border-top: var(--border); } .prose h3 { font-size: 20px; color: var(--ink); margin-top: var(--s5); } .prose strong { color: var(--ink); } .prose ul, .prose ol { padding-left: var(--s5); } .prose li + li { margin-top: var(--s2); } .prose blockquote { margin: var(--s5) 0; padding: var(--s4); background: var(--surface-2); border-left: 4px solid var(--gold); border-radius: var(--radius); } .prose blockquote p:last-child { margin-bottom: 0; } .prose code { background: var(--surface-2); padding: 2px 5px; border-radius: var(--radius); font-size: 0.9em; } .prose table { width: 100%; border-collapse: collapse; font-size: 15px; } .prose th, .prose td { border: var(--border-soft); padding: var(--s2) var(--s3); text-align: left; } .prose th { background: var(--surface-2); font-family: var(--font-pixel); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; } .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ------------------------------------------------------------- 13 shop */ .shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: var(--s6); align-items: start; } .filters { position: sticky; top: 96px; background: var(--surface); border: var(--border); border-radius: var(--radius); padding: var(--s4); display: grid; gap: var(--s5); } .filters fieldset { border: none; margin: 0; padding: 0; display: grid; gap: var(--s2); } .filters legend { font-family: var(--font-pixel); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); padding: 0 0 var(--s2); } .filters a { display: flex; justify-content: space-between; gap: var(--s2); padding: 7px var(--s2); text-decoration: none; color: var(--ink-2); font-size: 14px; border-radius: var(--radius); } .filters a:hover { background: var(--surface-2); color: var(--ink); } .filters a[aria-current="true"] { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; } .filters a span { color: var(--ink-3); font-size: 12px; } .price-range { display: flex; align-items: center; gap: var(--s2); } .price-range input { width: 100%; min-width: 0; padding: 8px var(--s2); border: var(--border); border-radius: var(--radius); background: var(--surface-2); font-size: 14px; } .shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); padding-bottom: var(--s3); border-bottom: var(--border-soft); } .sort-select { padding: 9px var(--s3); border: var(--border); border-radius: var(--radius); background: var(--surface); font-size: 14px; cursor: pointer; } .pagination { display: flex; gap: var(--s2); justify-content: center; align-items: center; margin-top: var(--s7); flex-wrap: wrap; } .pagination a, .pagination span { min-width: 40px; padding: 9px var(--s3); text-align: center; border: var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--ink-2); font-family: var(--font-pixel); font-size: 12px; } .pagination a:hover { border-color: var(--brand); color: var(--ink); } .pagination [aria-current="page"] { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-brand); } .empty-state { text-align: center; padding: var(--s9) var(--s5); border: var(--border); border-radius: var(--radius); background: var(--surface); } .empty-state__art { font-family: var(--font-pixel); font-size: 40px; color: var(--ink-3); margin-bottom: var(--s4); } /* ---------------------------------------------------- 14 product page */ .breadcrumbs { display: flex; gap: var(--s2); flex-wrap: wrap; font-size: 13px; color: var(--ink-3); padding-block: var(--s4); list-style: none; margin: 0; } .breadcrumbs a { color: var(--ink-3); text-decoration: none; } .breadcrumbs a:hover { color: var(--brand); } .breadcrumbs li + li::before { content: "\203A"; margin-right: var(--s2); color: var(--line); } .product-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s7); align-items: start; } .product-gallery { background: var(--surface-2); border: var(--border); border-radius: var(--radius); aspect-ratio: 1; display: grid; place-items: center; padding: var(--s6); position: sticky; top: 96px; } .product-gallery img { max-height: 100%; width: auto; object-fit: contain; } .buy-box { background: var(--surface); border: var(--border); border-radius: var(--radius); padding: var(--s5); display: grid; gap: var(--s4); } .buy-box__disclosure { font-size: 12px; color: var(--ink-3); display: flex; gap: var(--s2); align-items: flex-start; } .highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); } .highlights li { display: flex; gap: var(--s2); align-items: flex-start; font-size: 14px; color: var(--ink-2); } .highlights li::before { content: ""; width: 8px; height: 8px; margin-top: 7px; flex: none; background: var(--green); } .spec-table { width: 100%; border-collapse: collapse; font-size: 14px; } .spec-table th, .spec-table td { padding: var(--s3); text-align: left; border-bottom: var(--border-soft); } .spec-table tbody th { width: 40%; color: var(--ink-3); font-weight: 500; } .spec-table thead th { background: var(--surface-2); font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; } .spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; } .comparison-table { table-layout: fixed; min-width: 560px; } .comparison-table th:nth-child(1), .comparison-table td:nth-child(1) { width: 44%; } .comparison-table th:nth-child(2), .comparison-table td:nth-child(2), .comparison-table th:nth-child(3), .comparison-table td:nth-child(3) { width: 18%; } /* Product page: prose beside the spec sheet. This used to be an inline grid-template-columns on the element, which outranks every media query and kept a 380px column on a 360px phone. */ .product-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s6); align-items: start; } .product-detail__specs { padding: var(--s5); } /* A product recommended inside an article. */ .article-product { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--s4); padding: var(--s4); align-items: center; } .article-product__media { aspect-ratio: 1; } @media (max-width: 900px) { .product-detail { grid-template-columns: 1fr; gap: var(--s5); } } @media (max-width: 520px) { /* Below this the thumbnail costs more than it gives, so the card stacks. */ .article-product { grid-template-columns: 1fr; } .article-product__media { max-width: 140px; } } .buy-bar { display: none; } /* ------------------------------------- 15 price table and most searched */ /* Heading, table, most searched: three columns that all begin on the same line. align-items:start is what keeps their tops flush, since the three have very different heights. */ .offers { display: grid; grid-template-columns: minmax(190px, 0.9fr) minmax(0, 1.7fr) minmax(210px, 0.9fr); gap: var(--s5); align-items: start; } /* Without the sidebar the table takes the space back instead of leaving a hole where it would have been. */ .offers[data-no-aside] { grid-template-columns: minmax(190px, 0.9fr) minmax(0, 2fr); } .offers__intro h2 { margin-bottom: var(--s2); } .offers__intro p { color: var(--ink-3); margin: 0 0 var(--s2); } /* The sidebar is a padded card, so its "Mais buscados" label starts one pad below its own top edge. Matching that pad here puts the two eyebrows on the same line, which is the alignment the eye actually reads. */ .offers__intro { padding-top: var(--s4); } .offers__table { min-width: 0; } .offer-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface); border: var(--border); border-radius: var(--radius); overflow: hidden; } .offer-table th, .offer-table td { padding: var(--s3) var(--s4); text-align: left; border-bottom: var(--border-soft); } .offer-table thead th { background: var(--surface-2); font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } .offer-table tbody tr:last-child td { border-bottom: none; } .offer-table tbody tr:hover { background: var(--surface-2); } /* The cheapest row is the answer to the question the table asks, so it is marked rather than left for the reader to work out. */ .offer-table tr.is-best td { background: var(--green-soft); } .offer-store { display: flex; align-items: center; gap: var(--s2); font-weight: 600; } /* A colour coded square instead of a redrawn brand logo: identifies the store at a glance without passing off an approximation as somebody's trademark. Replace with the official brand SVGs when you have them. */ .mp-mark { width: 14px; height: 14px; flex: none; border-radius: 3px; background: var(--ink-3); } .mp-mark--mercado_livre { background: #ffe600; } .mp-mark--amazon { background: #ff9900; } .mp-mark--aliexpress { background: #e62e04; } .mp-mark--shopee { background: #ee4d2d; } .rating__star { color: var(--gold); display: inline-flex; } .offer-price { font-family: var(--font-pixel); font-size: 15px; white-space: nowrap; } .offer-free { color: var(--green); font-weight: 600; } /* Below this width a five column price table is not a table any more, it is a squeeze. Each store becomes its own block with the column name in front of the value, which also removes the 554px min-content the auto table layout was forcing on the whole page. */ @media (max-width: 640px) { .offer-table, .offer-table tbody, .offer-table tr, .offer-table td { display: block; width: 100%; } .offer-table thead { display: none; } .offer-table tr { padding: var(--s3) var(--s4); border-bottom: var(--border-soft); } .offer-table tbody tr:last-child { border-bottom: none; } .offer-table td { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 4px 0; border: none; } .offer-table td::before { content: attr(data-label); font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); flex: none; } /* The store name is the row's heading, so it keeps the full width and loses the repeated label. */ .offer-table td[data-label="Loja"] { padding-bottom: var(--s2); } .offer-table td[data-label="Loja"]::before { display: none; } .offer-table td.offer-go::before { display: none; } .offer-table td.offer-go .btn { width: 100%; margin-top: var(--s2); } } .offer-go { text-align: right; } @media (max-width: 640px) { /* Same reasoning as the price table: four columns of store data do not fit a phone, so each product becomes a block. */ .comparison-table, .comparison-table tbody, .comparison-table tr, .comparison-table td { display: block; width: 100%; } .comparison-table { table-layout: auto; min-width: 0 !important; } .comparison-table thead { display: none; } .comparison-table tr { padding: var(--s3) 0; border-bottom: var(--border-soft); } .comparison-table tbody tr:last-child { border-bottom: none; } .comparison-table td { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 4px var(--s3); border: none; } .comparison-table td::before { content: attr(data-label); font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); flex: none; } .comparison-table td:first-child { display: block; } .comparison-table td:first-child::before { display: none; } .comparison-table td:last-child .btn { width: 100%; } .comparison-table td:last-child::before { display: none; } } .searches { background: var(--surface); border: var(--border); border-radius: var(--radius); padding: var(--s4); } .searches ol { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 2px; counter-reset: s; } .searches a { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s2); border-radius: var(--radius); text-decoration: none; color: var(--ink-2); font-size: 14px; } .searches a:hover { background: var(--surface-2); color: var(--ink); } .searches a::before { counter-increment: s; content: counter(s); font-family: var(--font-pixel); font-size: 11px; color: var(--ink-3); width: 22px; height: 22px; display: grid; place-items: center; background: var(--surface-2); border-radius: var(--radius); flex: none; } .searches a::after { content: "\2192"; margin-left: auto; color: var(--ink-3); } /* ---------------------------------------------------------- 16 carousel */ .carousel { position: relative; } .carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--s2); } .carousel__track::-webkit-scrollbar { display: none; } .carousel__track > * { scroll-snap-align: start; } .carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; background: var(--surface); color: var(--ink); border: var(--border); border-radius: 999px; cursor: pointer; z-index: 3; } .carousel__btn:hover { border-color: var(--brand); } .carousel__btn[hidden] { display: none; } .carousel__btn--prev { left: calc(var(--s5) * -1); } .carousel__btn--next { right: calc(var(--s5) * -1); } /* Compact card used inside the offers carousel. */ .mini-card { display: grid; grid-template-columns: 72px 1fr; gap: var(--s3); align-items: center; padding: var(--s3); background: var(--surface); border: var(--border); border-radius: var(--radius); text-decoration: none; color: inherit; transition: border-color 0.12s ease; } .mini-card:hover { border-color: var(--brand); color: inherit; } /* The card's children are , because the card itself is an and a
inside an inline-level link is invalid. Spans are inline by default, which collapses the grid, so both are given a block role explicitly. */ .mini-card > span { display: block; min-width: 0; } .mini-card__media { display: grid; aspect-ratio: 1; background: var(--surface-2); border-radius: var(--radius); place-items: center; overflow: hidden; } .mini-card__media img { max-height: 100%; width: auto; object-fit: contain; } .mini-card strong { font-size: 13px; line-height: 1.3; margin-block: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mini-card .price__now { font-size: 15px; } .mini-card .seller { margin-top: 2px; } /* ------------------------------ 17 utilities, responsive, motion */ .stack { display: grid; gap: var(--s4); } .row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; } .between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; } .icon { width: 20px; height: 20px; flex: none; } .icon--sm { width: 16px; height: 16px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (max-width: 1080px) { .hero__copy { width: min(64%, 560px); } .hero__art-img { object-position: right bottom; } .editorial { grid-template-columns: 1fr; } .offers, .offers[data-no-aside] { grid-template-columns: 1fr; } } @media (max-width: 960px) { .shop-layout, .product-layout { grid-template-columns: 1fr; } .filters, .product-gallery { position: static; } .editorial__lead { grid-template-columns: 1fr; } .carousel__btn { display: none; } } @media (max-width: 900px) { /* The CTA does not shrink, so on a narrow screen it was eating the whole bar and leaving the categories about 80px to scroll in. It is a secondary link and the header already carries "Ofertas". */ .catnav__cta { display: none; } } @media (max-width: 860px) { .hero { display: block; min-height: 0; padding-top: 190px; } .hero__art { inset: 0 0 auto 0; height: 190px; background: radial-gradient(90% 140% at 70% 40%, rgba(124, 92, 255, 0.92), transparent 72%), linear-gradient(180deg, var(--brand-soft), rgba(124, 92, 255, 0.18)); border-radius: var(--radius) var(--radius) 0 0; } .hero__art::before, .hero__art-img { -webkit-mask-image: none; mask-image: none; inset: 0; } .hero__art-img { object-position: center bottom; } .hero__copy { width: 100%; padding: var(--s5) var(--s4) var(--s6); } .hero__slogan { top: var(--s4); right: var(--s4); font-size: 10px; line-height: 1.7; } .hero__note { display: none; } .trust { gap: var(--s4); } } @media (max-width: 720px) { .wrap, .wrap--narrow { width: min(100% - var(--s4) * 2, var(--page)); } .section { padding-block: var(--s6); } .site-header__inner { flex-wrap: wrap; } .search { order: 3; flex-basis: 100%; } .grid--products { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); } .product-card__body { padding: var(--s3); } .footer-links { margin-left: 0; gap: var(--s4); } .editorial__item { grid-template-columns: 64px 1fr; } /* The purchase button is the point of the page, so on a phone it follows the reader down instead of being lost above the fold. */ .buy-bar { display: flex; position: fixed; inset: auto 0 0 0; z-index: 50; background: var(--surface); border-top: var(--border); padding: var(--s3) var(--s4); gap: var(--s3); align-items: center; justify-content: space-between; } .has-buy-bar { padding-bottom: 84px; } } @media (max-width: 520px) { /* Stacked, the two CTAs sized to their own labels and came out ragged. Once they are on separate rows they should share one edge. */ .hero__actions { display: grid; grid-template-columns: 1fr; } .hero__actions .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media print { .site-header, .catnav, .topbar, .site-footer, .buy-bar, .filters { display: none; } }