/* ========================================================= umeoutro.com.br — casa · cozinha · tecnologia Fork de julio-linkbio/template/styles.css (esqueleto, modal, transições) adaptado para grid de produtos 3:4 + 3 temas. Temas: :root = A "Âmbar" (dark quente, default provisório) [data-theme="creme"] = B claro editorial [data-theme="mata"] = C dark verde profundo Trocar o tema do site = data-theme no de cada página. ========================================================= */ :root { --bg: #0d0b08; --card-bg: #16130e; --card-border: #2a2417; --text: #f6f3ec; --text-muted: #a89f8d; --accent: #e8a55a; --accent-strong: #c77f2e; --on-accent: #1c1206; --ghost: #383226; --pill-bg: #1c1812; --shadow-color: rgba(0, 0, 0, .55); --radius: 18px; --wrap: 1040px; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Sora", "Inter", system-ui, sans-serif; } /* ---------- Tema B · Creme (claro editorial, ref. paleta Anthropic) ---------- */ [data-theme="creme"] { --bg: #faf7f2; --card-bg: #ffffff; --card-border: #e6dfd3; --text: #191713; --text-muted: #6c675c; --accent: #c0603f; --accent-strong: #9c4527; --on-accent: #fff8f2; --ghost: #ece5d8; --pill-bg: #f1ece3; --shadow-color: rgba(60, 42, 20, .16); --font-display: "Fraunces", Georgia, serif; } /* ---------- Tema C · Mata (dark verde profundo, ref. paleta Supabase) ---------- */ [data-theme="mata"] { --bg: #0c1310; --card-bg: #121c17; --card-border: #223129; --text: #edf5f0; --text-muted: #8fa79a; --accent: #3ecf8e; --accent-strong: #24b47e; --on-accent: #06130c; --ghost: #24332b; --pill-bg: #16211c; --shadow-color: rgba(0, 0, 0, .55); --font-display: "Space Grotesk", "Inter", system-ui, sans-serif; } /* ===================== BASE ===================== */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; height: auto; } a { -webkit-tap-highlight-color: transparent; color: inherit; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); } /* ===================== TOPO — avatar do casal ===================== Foto redonda (sem recorte de fundo), direto pro brandcard. Decisão do Julio (31/08): sem hero-cutout e sem texto abaixo da foto. */ .profile { text-align: center; padding: 30px 0 0; } .profile__avatar { width: 124px; height: 124px; margin: 0 auto; border-radius: 50%; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--card-border)); box-shadow: 0 14px 32px -16px var(--shadow-color); } .profile__avatar img { width: 100%; height: 100%; object-fit: cover; } /* ===================== MARCA (frase solta, sem caixa) ===================== */ .brand { text-align: center; margin: 20px auto 38px; max-width: 34ch; } .brand__badge { margin: 0 0 10px; font-family: var(--font-display); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 75%, var(--text-muted)); } .brand__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 5.6vw, 1.75rem); letter-spacing: -0.01em; line-height: 1.22; } /* ===================== CARDS-BANNER DE REDE (fork do .card da bio) ===================== */ .linkcards { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 30px; } .lcard { --c: var(--accent); position: relative; display: block; border: 1px solid var(--card-border); border-radius: 18px; overflow: hidden; text-decoration: none; background: var(--card-bg); min-height: 150px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } @media (hover: hover) { .lcard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 42%, var(--card-border)); box-shadow: 0 18px 40px -14px var(--shadow-color); } .lcard:hover .lcard__media img { transform: scale(1.05); } } .lcard:active { transform: translateY(-1px); } .lcard__media { position: absolute; top: 0; right: 0; bottom: 0; width: 56%; z-index: 0; overflow: hidden; background: radial-gradient(90% 120% at 78% 40%, color-mix(in srgb, var(--c) 13%, transparent), transparent 72%); } .lcard__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; transition: transform .45s ease; } /* funde a borda esquerda da media no fundo do card (foto ou glow) */ .lcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--card-bg) 0%, color-mix(in srgb, var(--card-bg) 55%, transparent) 42%, transparent 96%), linear-gradient(0deg, color-mix(in srgb, var(--bg) 35%, transparent), transparent 60%); } .lcard__body { position: relative; z-index: 1; min-height: 150px; padding: 24px 24px; display: flex; flex-direction: column; justify-content: center; gap: 10px; } .lcard__kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } .lcard__kicker svg { width: 19px; height: 19px; color: var(--c); } .lcard__title { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; letter-spacing: -0.02em; line-height: 1.08; color: var(--text); max-width: 70%; } /* ===================== GRID DE PRODUTOS ===================== */ .grid-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-muted); } .grid-head::after { content: ""; flex: 1; height: 1px; background: var(--card-border); } .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; } @media (min-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } } @media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, 1fr); } } /* card = imagem vertical 3:4 clicável, sem título nem preço */ .tile { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--card-border); background: var(--card-bg); box-shadow: 0 14px 30px -18px var(--shadow-color); cursor: pointer; padding: 0; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; } .tile--featured { border-color: color-mix(in srgb, var(--accent) 36%, var(--card-border)); } @media (hover: hover) { .tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, var(--card-border)); box-shadow: 0 22px 44px -18px var(--shadow-color); } .tile:hover img { transform: scale(1.05); } } .tile:active { transform: translateY(-1px); } .tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* estados de carga */ .grid-status { grid-column: 1 / -1; padding: 34px 10px; text-align: center; color: var(--text-muted); font-size: 0.92rem; } /* ===================== MODAL (detalhe do produto · ?p=slug) ===================== */ .modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; } .modal[hidden] { display: none; } .modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .68); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .modal__card { position: relative; z-index: 1; width: 100%; max-width: 430px; max-height: 90dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 22px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8); animation: modalIn .25s ease; } @keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .modal__card { animation: none; } .tile, .tile img, .pill { transition: none; } } .modal__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .52); color: #fff; font-size: 1.55rem; line-height: 1; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .modal__scroll { overflow-y: auto; overscroll-behavior: contain; } .modal__media { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: var(--pill-bg); } .modal__media img { width: 100%; height: 100%; object-fit: cover; } .modal__body { padding: 20px 22px 24px; } .modal__title { font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; letter-spacing: -0.01em; line-height: 1.18; margin: 0 0 6px; } .modal__headline { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--accent); margin: 0 0 12px; line-height: 1.35; } .modal__review { margin: 0 0 18px; } .modal__review p { margin: 0 0 10px; color: var(--text-muted); font-size: 0.94rem; line-height: 1.55; } .modal__review p:last-child { margin-bottom: 0; } /* botões de loja */ .stores { display: flex; flex-direction: column; gap: 9px; } .store-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 14px 18px; border-radius: 14px; font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; text-decoration: none; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--card-border)); color: var(--text); background: transparent; transition: transform .12s ease, filter .15s ease, background .15s ease; } .store-btn--primary { background: linear-gradient(150deg, var(--accent), var(--accent-strong)); border-color: transparent; color: var(--on-accent); box-shadow: 0 10px 24px -12px var(--accent); } @media (hover: hover) { .store-btn:hover { filter: brightness(1.07); } } .store-btn:active { transform: scale(.99); } .stores__empty { padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--card-border); color: var(--text-muted); font-size: 0.88rem; text-align: center; } .modal__disclosure { margin: 14px 0 0; font-size: 0.74rem; line-height: 1.45; color: color-mix(in srgb, var(--text-muted) 80%, transparent); } /* ===================== INDEX (provisório da Fase 1) ===================== */ .hero-min { min-height: 72dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 0 20px; } .hero-min__mark { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.3rem, 9vw, 4rem); letter-spacing: -0.03em; line-height: 1.02; margin: 0; } .hero-min__mark em { font-style: normal; color: var(--accent); } .hero-min__tag { margin: 14px 0 30px; font-size: clamp(1rem, 4vw, 1.2rem); color: var(--text-muted); max-width: 34ch; } .hero-min__cta { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; text-decoration: none; color: var(--on-accent); background: linear-gradient(150deg, var(--accent), var(--accent-strong)); box-shadow: 0 14px 34px -14px var(--accent); transition: transform .15s ease, filter .15s ease; } @media (hover: hover) { .hero-min__cta:hover { transform: translateY(-2px); filter: brightness(1.06); } } /* ===================== RODAPÉ ===================== */ .footer { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--card-border); text-align: center; } .footer p { margin: 0 0 6px; font-size: 0.74rem; line-height: 1.5; color: var(--text-muted); } .footer p:last-child { margin-bottom: 0; opacity: .75; } /* ===================== BARRA DE MOCKUP (só /mockups) ===================== */ .mockbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 12px; font-size: 0.8rem; font-weight: 600; background: color-mix(in srgb, var(--bg) 82%, var(--accent)); border-bottom: 1px solid var(--card-border); } .mockbar a { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--card-border); background: var(--card-bg); text-decoration: none; font-weight: 600; } .mockbar a[aria-current="true"] { background: var(--accent); color: var(--on-accent); border-color: transparent; } /* ===================== DESKTOP ===================== */ @media (min-width: 640px) { .wrap { padding: 30px max(22px, env(safe-area-inset-right)) calc(44px + env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); } .modal__card { max-width: 480px; } .profile__avatar { width: 148px; height: 148px; } .lcard, .lcard__body { min-height: 190px; } .lcard__body { padding: 30px 32px; } .lcard__title { font-size: 1.85rem; max-width: 58%; } .lcard__media { width: 58%; } }