/* ========================================================================== Kerk Praia — Design tokens Replica 1:1 as variáveis reais extraídas de kerkpraia.com.br (tema Recife) + camada de motion/componentes definida para este site de referência. Ver ../BRANDBOOK.md para a documentação completa. ========================================================================== */ :root { --main-foreground: #34495e; --main-background: #ffffff; --accent-color: #34495e; --accent-color-dark: #24333f; --button-background: #34495e; --button-foreground: #ffffff; --label-background: #34495e; --label-foreground: #ffffff; --header-background: #ffffff; --header-foreground: #34495e; --header-transparent-foreground: #ffffff; --footer-background: #ffffff; --footer-foreground: #34495e; --newsletter-home-background: #333333; --newsletter-home-foreground: #ffffff; --success: #4bb98c; --danger: #dd7774; --warning: #dc8f38; --main-foreground-05: #34495e0d; --main-foreground-08: #34495e14; --main-foreground-10: #34495e1a; --main-foreground-20: #34495e33; --main-foreground-30: #34495e4d; --main-foreground-50: #34495e80; --heading-font: "Prata", serif; --body-font: "Karla", sans-serif; --h1: 28px; --h1-huge-md: 40px; --h2: 24px; --h3: 20px; --h5: 16px; --h6: 14px; --h6-small: 12px; --font-base: 14px; --font-medium: 11px; --font-small: 12px; --title-font-weight: 600; --gutter: 15px; --gutter-container-md: 80px; --border-radius: 4px; --border-radius-lg: 10px; --border-radius-full: 999px; --shadow-distance: 0 0 5px; --shadow-card: 0 2px 6px rgba(52,73,94,.06); --shadow-card-hover: 0 18px 34px rgba(52,73,94,.16); --shadow-lift: 0 10px 24px rgba(52,73,94,.14); --section-distance: 40px; --section-distance-big: 60px; /* -------- Motion -------- */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --duration-fast: 160ms; --duration-base: 280ms; --duration-slow: 480ms; /* -------- Superfícies elevadas (drawers, overlays) & mix base p/ badges -------- */ --surface: #ffffff; --surface-chip: rgba(255,255,255,.85); --mix-base: #ffffff; --scrim: rgba(20,26,32,.45); } /* ========================================================================== Tema escuro — mesma paleta, invertida. Ativado via [data-theme="dark"] no (JS em script.js, aplicado antes do primeiro paint pra não piscar). Segue prefers-color-scheme no primeiro acesso, depois memoriza a escolha do Dono em localStorage. ========================================================================== */ :root[data-theme="dark"] { --main-foreground: #e7ebee; --main-background: #14181b; --accent-color: #8fb0cc; --accent-color-dark: #b7cfe2; --button-background: #e7ebee; --button-foreground: #14181b; --label-background: #e7ebee; --label-foreground: #14181b; --header-background: #14181b; --header-foreground: #e7ebee; --footer-background: #14181b; --footer-foreground: #e7ebee; --newsletter-home-background: #1d2225; --newsletter-home-foreground: #f2f4f5; --success: #5ec89b; --danger: #e69490; --warning: #e6a750; --main-foreground-05: #e7ebee0d; --main-foreground-08: #e7ebee14; --main-foreground-10: #e7ebee1a; --main-foreground-20: #e7ebee33; --main-foreground-30: #e7ebee4d; --main-foreground-50: #e7ebee80; --shadow-card: 0 2px 6px rgba(0,0,0,.35); --shadow-card-hover: 0 18px 34px rgba(0,0,0,.5); --shadow-lift: 0 10px 24px rgba(0,0,0,.45); --surface: #1b2024; --surface-chip: rgba(20,24,27,.75); --mix-base: #1b2024; --scrim: rgba(0,0,0,.6); } * { box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--body-font); font-size: var(--font-base); color: var(--main-foreground); background: var(--main-background); transition: background var(--duration-base) var(--ease-in-out), color var(--duration-base) var(--ease-in-out); line-height: 1.6; } body.menu-open { overflow: hidden; } h1, h2, h3, .logo-text { font-family: var(--heading-font); font-weight: var(--title-font-weight); margin: 0 0 12px; letter-spacing: 0.5px; } h1 { font-size: var(--h1); } h2 { font-size: var(--h2); } h3 { font-size: var(--h3); } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--accent-color); color: var(--button-foreground); } .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); } /* ---------- Reveal on scroll ---------- */ .reveal, .reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } .reveal.is-visible, .reveal-stagger > *.is-visible { opacity: 1; transform: none; } .reveal-stagger > *:nth-child(1) { transition-delay: 0ms; } .reveal-stagger > *:nth-child(2) { transition-delay: 60ms; } .reveal-stagger > *:nth-child(3) { transition-delay: 120ms; } .reveal-stagger > *:nth-child(4) { transition-delay: 180ms; } .reveal-stagger > *:nth-child(5) { transition-delay: 240ms; } .reveal-stagger > *:nth-child(6) { transition-delay: 300ms; } .reveal-stagger > *:nth-child(7) { transition-delay: 360ms; } .reveal-stagger > *:nth-child(8) { transition-delay: 420ms; } /* ---------- Header ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 24px 0; color: var(--header-transparent-foreground); transition: background var(--duration-base) var(--ease-in-out), padding var(--duration-base) var(--ease-in-out), color var(--duration-base) var(--ease-in-out), box-shadow var(--duration-base) var(--ease-in-out); } .site-header.is-scrolled { background: var(--header-background); color: var(--header-foreground); padding: 14px 0; box-shadow: 0 2px 16px rgba(52,73,94,.08); } .site-header.is-scrolled .logo-light { display: none; } .site-header.is-scrolled .logo-dark { display: inline-block; } .logo-dark { display: none; } /* Header estático para páginas sem hero (catálogo, brandbook) */ .page-header { position: sticky; top: 0; z-index: 100; background: var(--header-background); color: var(--header-foreground); padding: 16px 0; box-shadow: 0 2px 16px rgba(52,73,94,.08); } .page-header .logo-light, .bb-nav .logo-light, .site-footer .logo-light { display: none; } .page-header .logo-dark, .bb-nav .logo-dark, .site-footer .logo-dark { display: inline-block; } /* Tema escuro: fundo do header/footer fica escuro, então a logo troca pra versão clara */ :root[data-theme="dark"] .site-header.is-scrolled .logo-light, :root[data-theme="dark"] .page-header .logo-light, :root[data-theme="dark"] .bb-nav .logo-light, :root[data-theme="dark"] .site-footer .logo-light { display: inline-block; } :root[data-theme="dark"] .site-header.is-scrolled .logo-dark, :root[data-theme="dark"] .page-header .logo-dark, :root[data-theme="dark"] .bb-nav .logo-dark, :root[data-theme="dark"] .site-footer .logo-dark { display: none; } .header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .logo-img { height: 34px; width: auto; transition: height var(--duration-base) var(--ease-in-out); } .site-header.is-scrolled .logo-img { height: 28px; } .nav-links { display: flex; gap: 28px; font-size: var(--h6-small); letter-spacing: 1.5px; text-transform: uppercase; } .nav-links a { position: relative; padding-bottom: 3px; } .nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right var(--duration-base) var(--ease-out); } .nav-links a:hover::after { right: 0; } .header-icons { display: flex; align-items: center; gap: 18px; font-size: 18px; } .menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; background: none; border: none; cursor: pointer; padding: 0; } .menu-toggle span { display: block; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--duration-base) var(--ease-spring), opacity var(--duration-fast) linear; } body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; } body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- Mobile nav ---------- */ .mobile-nav-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 98; opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-in-out); } .mobile-nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 82vw); background: var(--surface); color: var(--main-foreground); z-index: 99; padding: 90px 30px 30px; transform: translateX(100%); transition: transform var(--duration-slow) var(--ease-out); box-shadow: -12px 0 30px rgba(0,0,0,.12); } body.menu-open .mobile-nav-scrim { opacity: 1; pointer-events: auto; } body.menu-open .mobile-nav { transform: translateX(0); } .mobile-nav ul { list-style: none; margin: 0; padding: 0; } .mobile-nav li { border-bottom: 1px solid var(--main-foreground-10); } .mobile-nav a { display: block; padding: 16px 2px; font-family: var(--heading-font); font-size: 19px; } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 640px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; background: linear-gradient(180deg, rgba(52,73,94,.45) 0%, rgba(52,73,94,.2) 45%, rgba(20,20,20,.6) 100%), url('assets/products/vestido-bianca-stbg8.webp'); background-size: cover; background-position: top center; } .hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 30%, rgba(52,73,94,0) 0%, rgba(20,20,20,.35) 100%); pointer-events: none; } .hero-content { max-width: 640px; padding: 0 20px; position: relative; z-index: 1; animation: hero-in 900ms var(--ease-out) both; } @keyframes hero-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } .hero-eyebrow { font-size: var(--h6-small); letter-spacing: 3px; text-transform: uppercase; opacity: .9; margin-bottom: 14px; } .hero h1 { font-size: var(--h1-huge-md); color: #fff; } .hero p { font-size: var(--h5); margin: 14px 0 28px; opacity: .95; } .hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); width: 22px; height: 36px; border: 1.5px solid rgba(255,255,255,.7); border-radius: 999px; z-index: 1; } .scroll-cue::before { content: ""; position: absolute; top: 6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; background: #fff; border-radius: 50%; animation: scroll-cue-move 1.8s var(--ease-in-out) infinite; } @keyframes scroll-cue-move { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } } /* ---------- Buttons ---------- */ .btn { --btn-bg: var(--button-background); --btn-fg: var(--button-foreground); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bg); padding: 14px 32px; font-family: var(--body-font); font-size: var(--h6-small); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; border-radius: var(--border-radius); cursor: pointer; overflow: hidden; isolation: isolate; transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-in-out), color var(--duration-base) var(--ease-in-out), border-color var(--duration-base) var(--ease-in-out); } .btn::before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.22); transform: scaleX(0); transform-origin: left; z-index: -1; transition: transform var(--duration-base) var(--ease-out); } .btn:hover::before { transform: scaleX(1); } .btn:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(.98); } .btn-outline { --btn-bg: transparent; --btn-fg: #fff; border-color: #fff; } .btn-outline:hover { --btn-fg: var(--accent-color); } .btn-outline:hover::before { background: #fff; } .btn-dark { --btn-bg: transparent; --btn-fg: var(--main-foreground); border-color: var(--main-foreground); } .btn-dark:hover { --btn-fg: #fff; } .btn-dark:hover::before { background: var(--accent-color); } .btn-ghost { --btn-bg: transparent; --btn-fg: var(--main-foreground); border-color: transparent; padding: 10px 6px; text-decoration: underline; text-underline-offset: 4px; } .btn-ghost:hover { box-shadow: none; transform: none; } .btn-ghost::before { display: none; } .btn-sm { padding: 9px 20px; font-size: 10px; } .btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; } /* Botão "quick add" com micro-interação de confirmação */ .btn-quick-add { position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 50%; background: var(--surface); color: var(--main-foreground); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.18); opacity: 0; transform: translateY(8px) scale(.9); transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-spring), background var(--duration-fast) linear; z-index: 2; } .card:hover .btn-quick-add, .card:focus-within .btn-quick-add { opacity: 1; transform: none; } .btn-quick-add svg { width: 17px; height: 17px; transition: transform var(--duration-fast) var(--ease-out); } .btn-quick-add:hover { background: var(--accent-color); color: #fff; } .btn-quick-add.is-done { background: var(--success); color: #fff; } .btn-quick-add.is-done svg.icon-plus { display: none; } .btn-quick-add .icon-check { display: none; } .btn-quick-add.is-done .icon-check { display: block; animation: pop-in var(--duration-base) var(--ease-spring); } @keyframes pop-in { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ---------- Benefit strip (marquee) ---------- */ .benefits { border-top: 1px solid var(--main-foreground-10); border-bottom: 1px solid var(--main-foreground-10); padding: 18px 0; overflow: hidden; white-space: nowrap; } .marquee-track { display: inline-flex; gap: 48px; align-items: center; animation: marquee 26s linear infinite; } .benefits:hover .marquee-track { animation-play-state: paused; } .marquee-track span { font-size: var(--h6-small); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; } .marquee-track span::after { content: "•"; opacity: .35; margin-left: 48px; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- Sections ---------- */ section { padding: var(--section-distance) 0; } .section-big { padding: var(--section-distance-big) 0; } .section-title { text-align: center; margin-bottom: 34px; } .section-title p { font-size: var(--font-small); letter-spacing: 2px; text-transform: uppercase; color: var(--main-foreground-50); margin: 0 0 6px; } /* ---------- Product grid ---------- */ .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); } .card { position: relative; border-radius: var(--border-radius); overflow: visible; display: block; color: inherit; transition: transform var(--duration-slow) var(--ease-out), opacity var(--duration-slow) var(--ease-out); } .card.is-hidden { display: none; } .card-media { position: relative; aspect-ratio: 3 / 4; background: var(--main-foreground-08); overflow: hidden; border-radius: var(--border-radius); box-shadow: var(--shadow-card); transition: box-shadow var(--duration-base) var(--ease-out); } .card:hover .card-media { box-shadow: var(--shadow-card-hover); } .card-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform var(--duration-slow) var(--ease-out); } .card:hover .card-media img { transform: scale(1.06); } .card-label { position: absolute; top: 10px; left: 10px; background: var(--label-background); color: var(--label-foreground); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 4px 9px; border-radius: var(--border-radius); z-index: 1; } .card-info { padding: 12px 2px; } .card-info .price { font-weight: 600; } .card-info .price-old { text-decoration: line-through; color: var(--main-foreground-50); margin-right: 8px; font-weight: 400; } /* ---------- Filter chips (catálogo) ---------- */ .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; } .chip { border: 1px solid var(--main-foreground-20); background: transparent; color: var(--main-foreground); padding: 9px 18px; border-radius: var(--border-radius-full); font-family: var(--body-font); font-size: var(--font-small); letter-spacing: .5px; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .chip:hover { border-color: var(--accent-color); transform: translateY(-1px); } .chip.is-active { background: var(--accent-color); color: #fff; border-color: var(--accent-color); } .catalog-count { display: inline-block; font-size: var(--font-small); color: var(--main-foreground-50); margin-bottom: 20px; } /* ---------- Newsletter ---------- */ .newsletter { background: var(--newsletter-home-background); color: var(--newsletter-home-foreground); text-align: center; position: relative; overflow: hidden; } .newsletter h2 { color: #fff; } .newsletter-form { display: flex; justify-content: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; } .newsletter-form input { padding: 13px 16px; border: 1px solid #555; background: transparent; color: #fff; border-radius: var(--border-radius); min-width: 280px; font-family: var(--body-font); transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .newsletter-form input:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.12); } .newsletter-form input::placeholder { color: #bbb; } /* ---------- Footer ---------- */ .site-footer { background: var(--footer-background); color: var(--footer-foreground); border-top: 1px solid var(--main-foreground-10); padding: 50px 0 24px; } .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-bottom: 30px; } .footer-grid h6 { font-size: var(--h6-small); letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 14px; } .footer-grid ul { list-style: none; margin: 0; padding: 0; } .footer-grid li { margin-bottom: 8px; font-size: var(--font-small); opacity: .85; } .footer-grid a { transition: opacity var(--duration-fast) linear; } .footer-grid a:hover { opacity: .6; text-decoration: underline; } .footer-bottom { border-top: 1px solid var(--main-foreground-10); padding-top: 18px; font-size: var(--font-small); color: var(--main-foreground-50); text-align: center; } /* ---------- Back to top ---------- */ .back-to-top { position: fixed; right: 22px; bottom: 22px; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-color); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lift); z-index: 90; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), background var(--duration-fast) linear; } .back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; } .back-to-top:hover { background: var(--accent-color-dark); } .back-to-top svg { width: 16px; height: 16px; } /* ---------- Toast ---------- */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px); background: var(--main-foreground); color: #fff; padding: 13px 22px; border-radius: var(--border-radius-full); font-size: var(--font-small); letter-spacing: .3px; box-shadow: var(--shadow-lift); opacity: 0; z-index: 200; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } .toast.is-visible { opacity: 1; transform: translate(-50%, 0); } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); } .nav-links { display: none; } .menu-toggle { display: flex; } } /* ========================================================================== Brandbook page — componentes extra usados só em brandbook.html ========================================================================== */ .bb-nav { position: sticky; top: 0; background: var(--surface-chip); backdrop-filter: blur(8px); z-index: 50; border-bottom: 1px solid var(--main-foreground-10); } .bb-nav .container { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; } .bb-nav-links { display: flex; gap: 22px; flex-wrap: wrap; font-size: var(--font-small); letter-spacing: .3px; } .bb-nav-links a { opacity: .7; transition: opacity var(--duration-fast) linear; } .bb-nav-links a:hover { opacity: 1; text-decoration: underline; } .bb-hero { padding: 70px 0 50px; background: linear-gradient(180deg, var(--main-foreground-05), transparent); } .bb-section { padding: 56px 0; border-bottom: 1px solid var(--main-foreground-10); } .bb-section:last-of-type { border-bottom: none; } .bb-kicker { font-size: var(--font-small); letter-spacing: 2px; text-transform: uppercase; color: var(--main-foreground-50); margin-bottom: 8px; } .bb-lede { max-width: 640px; opacity: .85; margin-bottom: 34px; } .token-table { width: 100%; border-collapse: collapse; font-size: var(--font-small); margin-bottom: 30px; } .token-table th, .token-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--main-foreground-10); } .swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-bottom: 10px; } .swatch-card { border: 1px solid var(--main-foreground-10); border-radius: var(--border-radius-lg); overflow: hidden; cursor: pointer; background: none; padding: 0; text-align: left; font-family: var(--body-font); transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .swatch-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); } .swatch-fill { height: 74px; } .swatch-meta { padding: 10px 12px; font-size: var(--font-small); } .swatch-meta .name { font-weight: 600; display: block; margin-bottom: 2px; } .swatch-meta .hex { color: var(--main-foreground-50); } .swatch-card.is-copied .swatch-meta .hex::after { content: " · copiado"; color: var(--success); } .swatch { display: inline-block; width: 18px; height: 18px; border-radius: 3px; vertical-align: middle; margin-right: 8px; border: 1px solid var(--main-foreground-20); } .type-scale-row { display: flex; align-items: baseline; gap: 20px; padding: 16px 0; border-bottom: 1px dashed var(--main-foreground-10); } .type-scale-row .label { width: 140px; flex-shrink: 0; font-size: var(--font-small); color: var(--main-foreground-50); } .space-row { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; font-size: var(--font-small); } .space-bar { height: 10px; background: var(--accent-color); border-radius: 3px; } .component-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 18px; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--border-radius-full); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; font-weight: 600; } .badge-success { background: color-mix(in srgb, var(--success) 20%, var(--mix-base)); color: var(--success); } .badge-danger { background: color-mix(in srgb, var(--danger) 20%, var(--mix-base)); color: var(--danger); } .badge-warning { background: color-mix(in srgb, var(--warning) 24%, var(--mix-base)); color: var(--warning); } .badge-dark { background: var(--accent-color); color: var(--button-foreground); } .bb-card-demo { width: 220px; } .form-demo { display: flex; flex-direction: column; gap: 14px; max-width: 340px; } .form-demo label { font-size: var(--font-small); font-weight: 600; margin-bottom: 6px; display: block; } .form-demo input { width: 100%; padding: 12px 14px; border: 1px solid var(--main-foreground-20); border-radius: var(--border-radius); font-family: var(--body-font); font-size: var(--font-base); transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .form-demo input:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--main-foreground-10); } .ease-demo { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 10px; } .ease-demo-item { width: 210px; } .ease-demo-track { position: relative; height: 44px; background: var(--main-foreground-05); border-radius: var(--border-radius-full); overflow: hidden; } .ease-demo-dot { position: absolute; top: 6px; left: 6px; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-color); animation: ease-slide 2.4s infinite alternate; } .ease-demo-item[data-ease="out"] .ease-demo-dot { animation-timing-function: var(--ease-out); } .ease-demo-item[data-ease="in-out"] .ease-demo-dot { animation-timing-function: var(--ease-in-out); } .ease-demo-item[data-ease="spring"] .ease-demo-dot { animation-timing-function: var(--ease-spring); } .ease-demo-item[data-ease="linear"] .ease-demo-dot { animation-timing-function: linear; } @keyframes ease-slide { from { left: 6px; } to { left: calc(100% - 38px); } } .ease-demo-label { font-size: var(--font-small); color: var(--main-foreground-50); margin-top: 8px; } .dos-donts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .do-card, .dont-card { border-radius: var(--border-radius-lg); padding: 20px; } .do-card { background: color-mix(in srgb, var(--success) 12%, var(--mix-base)); border: 1px solid color-mix(in srgb, var(--success) 30%, var(--mix-base)); } .dont-card { background: color-mix(in srgb, var(--danger) 12%, var(--mix-base)); border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--mix-base)); } .do-card h4, .dont-card h4 { font-family: var(--body-font); font-size: var(--font-small); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 10px; } @media (max-width: 700px) { .dos-donts { grid-template-columns: 1fr; } .type-scale-row { flex-wrap: wrap; } } /* ========================================================================== Header icons interativos (busca / sacola / favoritos) ========================================================================== */ .icon-btn { background: none; border: none; color: inherit; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; position: relative; font-size: 18px; transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) linear; } .icon-btn:hover { transform: translateY(-1px); opacity: .8; } .icon-badge { position: absolute; top: -8px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-family: var(--body-font); font-weight: 700; display: flex; align-items: center; justify-content: center; transform: scale(0); transition: transform var(--duration-base) var(--ease-spring); } .icon-badge.is-visible { transform: scale(1); } /* ---------- Wishlist heart no card ---------- */ .btn-wishlist { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--surface-chip); backdrop-filter: blur(2px); color: var(--main-foreground); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: transform var(--duration-fast) var(--ease-spring), background var(--duration-fast) linear, color var(--duration-fast) linear; } .btn-wishlist:hover { transform: scale(1.08); } .btn-wishlist svg { width: 15px; height: 15px; transition: transform var(--duration-fast) var(--ease-spring); } .btn-wishlist.is-active { color: var(--danger); } .btn-wishlist.is-active svg { fill: currentColor; transform: scale(1.12); } /* ---------- Sacola (cart drawer) ---------- */ .cart-scrim, .search-overlay-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 198; opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-in-out); } body.cart-open .cart-scrim, body.search-open .search-overlay-scrim { opacity: 1; pointer-events: auto; } .cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 90vw); background: var(--surface); color: var(--main-foreground); z-index: 199; display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--duration-slow) var(--ease-out); box-shadow: -12px 0 30px rgba(0,0,0,.12); } body.cart-open .cart-drawer { transform: translateX(0); } .cart-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--main-foreground-10); } .cart-drawer-head h3 { margin: 0; font-size: var(--h5); } .cart-close { background: none; border: none; cursor: pointer; color: inherit; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } .cart-items { flex: 1; overflow-y: auto; padding: 10px 24px; } .cart-empty { padding: 40px 0; text-align: center; color: var(--main-foreground-50); font-size: var(--font-small); } .cart-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--main-foreground-10); animation: cart-item-in var(--duration-base) var(--ease-out); } @keyframes cart-item-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } } .cart-item img { width: 64px; height: 84px; object-fit: cover; border-radius: var(--border-radius); flex-shrink: 0; } .cart-item-info { flex: 1; min-width: 0; } .cart-item-info .name { font-size: var(--font-small); font-weight: 600; margin-bottom: 4px; } .cart-item-info .price { font-size: var(--font-small); color: var(--main-foreground-50); } .cart-item-qty { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .cart-item-qty button { width: 22px; height: 22px; border: 1px solid var(--main-foreground-20); background: var(--surface); border-radius: 50%; cursor: pointer; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background var(--duration-fast) linear; } .cart-item-qty button:hover { background: var(--main-foreground-08); } .cart-item-remove { background: none; border: none; cursor: pointer; color: var(--main-foreground-50); font-size: 11px; text-decoration: underline; padding: 0; margin-top: 6px; } .cart-item-remove:hover { color: var(--danger); } .cart-footer { padding: 20px 24px 26px; border-top: 1px solid var(--main-foreground-10); } .cart-subtotal { display: flex; justify-content: space-between; font-size: var(--h6); margin-bottom: 16px; font-weight: 600; } .cart-footer .btn { width: 100%; } .cart-footer p { font-size: 11px; color: var(--main-foreground-50); text-align: center; margin: 10px 0 0; } /* ---------- Busca ---------- */ .search-overlay { position: fixed; top: 0; left: 0; right: 0; z-index: 199; background: var(--surface); transform: translateY(-100%); transition: transform var(--duration-slow) var(--ease-out); max-height: 100vh; overflow-y: auto; box-shadow: 0 12px 30px rgba(0,0,0,.12); } body.search-open .search-overlay { transform: translateY(0); } .search-box { display: flex; align-items: center; gap: 14px; padding: 26px var(--gutter); max-width: 720px; margin: 0 auto; } .search-box input { flex: 1; border: none; border-bottom: 2px solid var(--main-foreground-20); font-family: var(--heading-font); font-size: 22px; padding: 8px 2px; background: transparent; color: var(--main-foreground); transition: border-color var(--duration-base) var(--ease-out); } .search-box input:focus { outline: none; border-color: var(--accent-color); } .search-close { background: none; border: none; cursor: pointer; color: var(--main-foreground); flex-shrink: 0; } .search-results { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter) 30px; } .search-result { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--main-foreground-10); } .search-result img { width: 50px; height: 66px; object-fit: cover; border-radius: var(--border-radius); } .search-result .name { font-weight: 600; font-size: var(--font-base); } .search-result .cat { font-size: var(--font-small); color: var(--main-foreground-50); } .search-result .price { margin-left: auto; font-weight: 600; font-size: var(--font-small); } .search-hint, .search-empty { padding: 30px var(--gutter); text-align: center; color: var(--main-foreground-50); font-size: var(--font-small); max-width: 720px; margin: 0 auto; } /* ========================================================================== Página de produto (produto.html) ========================================================================== */ .pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding: 130px 0 var(--section-distance); align-items: flex-start; } .pdp-gallery { border-radius: var(--border-radius); overflow: hidden; aspect-ratio: 3/4; background: var(--main-foreground-08); box-shadow: var(--shadow-card); position: sticky; top: 100px; } .pdp-gallery img { width: 100%; height: 100%; object-fit: cover; } .pdp-breadcrumb { font-size: var(--font-small); color: var(--main-foreground-50); margin-bottom: 14px; } .pdp-breadcrumb a:hover { text-decoration: underline; } .pdp-info h1 { font-size: var(--h1); margin-bottom: 8px; } .pdp-price { font-size: var(--h3); font-weight: 600; margin-bottom: 20px; } .pdp-desc { opacity: .85; margin-bottom: 26px; max-width: 440px; } .pdp-block { margin-bottom: 26px; } .pdp-block-label { font-size: var(--font-small); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; } .size-row { display: flex; gap: 10px; flex-wrap: wrap; } .size-chip { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--main-foreground-20); background: var(--surface); cursor: pointer; font-size: var(--font-small); transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .size-chip:hover { border-color: var(--accent-color); } .size-chip.is-active { background: var(--accent-color); color: #fff; border-color: var(--accent-color); } .qty-stepper { display: inline-flex; align-items: center; gap: 16px; border: 1px solid var(--main-foreground-20); border-radius: var(--border-radius-full); padding: 6px 18px; } .qty-stepper button { background: none; border: none; cursor: pointer; font-size: 16px; color: inherit; width: 20px; } .pdp-actions { display: flex; gap: 12px; align-items: center; margin-top: 30px; } .pdp-actions .btn { flex: 1; } .pdp-meta { margin-top: 30px; font-size: var(--font-small); color: var(--main-foreground-50); line-height: 2; } .related-title { text-align: center; margin: 0 0 30px; } @media (max-width: 900px) { .pdp { grid-template-columns: 1fr; padding-top: 100px; gap: 30px; } .pdp-gallery { position: static; } } /* ========================================================================== Sobre / institucional ========================================================================== */ .about-hero { padding: 150px 0 70px; text-align: center; } .about-hero h1 { font-size: var(--h1-huge-md); max-width: 760px; margin: 0 auto 18px; } .about-hero p { max-width: 560px; margin: 0 auto; opacity: .8; } .about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; } .about-grid img { width: 100%; border-radius: var(--border-radius-lg); aspect-ratio: 4/5; object-fit: cover; box-shadow: var(--shadow-card); } .about-grid.reverse { grid-template-columns: .9fr 1.1fr; } .about-grid.reverse .about-media { order: 2; } .value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 30px; } .value-card { padding: 26px; border: 1px solid var(--main-foreground-10); border-radius: var(--border-radius-lg); } .value-card .num { font-family: var(--heading-font); font-size: 30px; color: var(--main-foreground-30); margin-bottom: 10px; } @media (max-width: 900px) { .about-grid, .about-grid.reverse { grid-template-columns: 1fr; } .about-grid.reverse .about-media { order: 0; } .value-grid { grid-template-columns: 1fr; } } /* ---------- Favoritos ---------- */ .favorites-empty { text-align: center; padding: 90px 20px; } .favorites-empty p { color: var(--main-foreground-50); margin-bottom: 24px; } /* ========================================================================== Toggle de tema (claro/escuro) ========================================================================== */ .theme-toggle { font-size: 17px; } .theme-toggle span { display: inline-block; transition: transform var(--duration-base) var(--ease-spring); } .theme-toggle:hover span { transform: rotate(25deg) scale(1.12); } .theme-icon-dark { display: none; } :root[data-theme="dark"] .theme-icon-light { display: none; } :root[data-theme="dark"] .theme-icon-dark { display: inline-block; } /* ========================================================================== FAQ accordion ========================================================================== */ .faq-list { max-width: 720px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--main-foreground-10); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: none; border: none; text-align: left; padding: 22px 4px; font-family: var(--heading-font); font-size: var(--h5); color: var(--main-foreground); cursor: pointer; } .faq-question .plus { flex-shrink: 0; width: 22px; height: 22px; position: relative; } .faq-question .plus::before, .faq-question .plus::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--main-foreground); transition: transform var(--duration-base) var(--ease-spring), opacity var(--duration-fast) linear; } .faq-question .plus::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); } .faq-question .plus::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); } .faq-item.is-open .faq-question .plus::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-slow) var(--ease-out); } .faq-answer-inner { overflow: hidden; } .faq-answer-inner p { margin: 0 4px 22px; max-width: 560px; opacity: .8; font-size: var(--font-base); } .faq-item.is-open .faq-answer { grid-template-rows: 1fr; } /* ========================================================================== Vistos recentemente ========================================================================== */ .recent-strip { border-top: 1px solid var(--main-foreground-10); } .recent-strip .related-title { text-align: left; margin-bottom: 20px; font-size: var(--h4); } /* ========================================================================== Modal (guia de tamanhos) ========================================================================== */ .modal-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 220; opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-in-out); } body.modal-open .modal-scrim { opacity: 1; pointer-events: auto; } .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -46%) scale(.96); width: min(480px, 90vw); max-height: 84vh; overflow-y: auto; background: var(--surface); color: var(--main-foreground); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-card-hover); z-index: 221; padding: 30px; opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-spring); } body.modal-open .modal { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .modal-head h3 { margin: 0; font-size: var(--h5); } .modal-close { background: none; border: none; cursor: pointer; color: inherit; } .size-table { width: 100%; border-collapse: collapse; font-size: var(--font-small); } .size-table th, .size-table td { padding: 9px 8px; text-align: center; border-bottom: 1px solid var(--main-foreground-10); } .size-table th:first-child, .size-table td:first-child { text-align: left; } .size-table thead th { color: var(--main-foreground-50); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: .5px; } .link-trigger { background: none; border: none; padding: 0; cursor: pointer; color: var(--main-foreground); text-decoration: underline; text-underline-offset: 3px; font-family: var(--body-font); font-size: var(--font-small); }