/*!********************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../shared/design-system/tokens.css ***! \********************************************************************************************************************************************************************************************************************************************************************************/ /* ============================================================ OraCommerce — Design System :: Tokens Fonte única de cores, espaçamentos, radius, sombras, tipografia, breakpoints e estados. Prefixo: --oc-* Extraído das referências: cotacao (admin), granpel-clube (admin), granpel + mudolon (storefront). ============================================================ */ :root { /* ---------- Marca / Admin (navy) ---------- */ --oc-navy: #1a2855; --oc-navy-deep: #0f1c47; --oc-navy-soft: #2b3a6b; --oc-blue: #1d4ed8; --oc-blue-mid: #2563eb; --oc-blue-soft: #eef3ff; --oc-blue-light: #dbeafe; /* ---------- Neutros ---------- */ --oc-bg: #f5f6fa; /* fundo da página */ --oc-surface: #ffffff; /* cards, painéis */ --oc-surface-2: #f9fafb; /* sub-superfícies, filtros */ --oc-border: #e5e7eb; --oc-border-strong: #d1d5db; --oc-text: #1a2855; --oc-text-muted: #6b7280; --oc-text-dim: #9ca3af; --oc-text-invert: #ffffff; /* ---------- Estados / Semântica ---------- */ --oc-success: #16a34a; --oc-success-soft: #dcfce7; --oc-warn: #f59e0b; --oc-warn-soft: #fef3c7; --oc-danger: #dc2626; --oc-danger-soft: #fee2e2; --oc-info: #0ea5e9; --oc-info-soft: #e0f2fe; --oc-purple: #7c3aed; --oc-purple-soft: #f5f3ff; /* ---------- Tipografia ---------- */ --oc-font: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --oc-font-mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; --oc-fs-display: 32px; --oc-fs-h1: 24px; --oc-fs-h2: 18px; --oc-fs-h3: 16px; --oc-fs-lg: 15px; --oc-fs-base: 14px; --oc-fs-sm: 13px; --oc-fs-xs: 12px; --oc-fs-2xs: 11px; --oc-fw-regular: 400; --oc-fw-medium: 500; --oc-fw-semibold: 600; --oc-fw-bold: 700; --oc-fw-extrabold: 800; --oc-lh-tight: 1.1; --oc-lh-base: 1.5; --oc-lh-relaxed: 1.6; /* ---------- Espaçamento (base 4px) ---------- */ --oc-sp-1: 4px; --oc-sp-2: 8px; --oc-sp-3: 12px; --oc-sp-4: 16px; --oc-sp-5: 20px; --oc-sp-6: 24px; --oc-sp-7: 28px; --oc-sp-8: 32px; --oc-sp-10: 40px; --oc-sp-12: 48px; /* ---------- Radius ---------- */ --oc-radius-sm: 6px; --oc-radius: 8px; --oc-radius-lg: 12px; --oc-radius-xl: 16px; --oc-radius-pill: 999px; /* ---------- Sombras ---------- */ --oc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); --oc-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06); --oc-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); --oc-shadow-xl: 0 24px 60px rgba(15, 23, 42, 0.3); /* ---------- Layout ---------- */ --oc-sidebar-w: 240px; --oc-topbar-h: 64px; --oc-content-max: 1600px; /* ---------- Transições ---------- */ --oc-transition: 150ms ease; --oc-transition-slow: 250ms ease; /* ---------- Gradiente de marca ---------- */ --oc-gradient-brand: linear-gradient(135deg, #2563eb 0%, #1a2855 100%); } /* ============================================================ Temas de marca — Storefront Aplicar via classe no ou container raiz. ============================================================ */ /* Granpel — vermelho */ .oc-brand-granpel { --oc-brand: #c8101c; --oc-brand-hover: #dc1f2c; --oc-brand-deep: #a40e18; --oc-brand-contrast: #ffffff; --oc-brand-ink: #161616; --oc-brand-ink-2: #2a2a2a; --oc-brand-muted: #6b6b6b; --oc-brand-line: #ececec; --oc-brand-soft: #fafafa; --oc-brand-shadow: 0 4px 14px rgba(200, 16, 28, 0.28); } /* Mudolon — navy + dourado */ .oc-brand-mudolon { --oc-brand: #0a1f4d; --oc-brand-hover: #13306f; --oc-brand-deep: #1a3f8f; --oc-brand-accent: #ffd54a; --oc-brand-contrast: #ffffff; --oc-brand-ink: #101828; --oc-brand-ink-2: #2a2f3d; --oc-brand-muted: #667085; --oc-brand-line: #e6e8ee; --oc-brand-soft: #f4f6fa; --oc-brand-soft-2: #eef1f7; --oc-brand-discount: #ef4444; --oc-brand-success: #16a34a; --oc-brand-gradient: linear-gradient(135deg, #0a1f4d 0%, #13306f 60%, #1a3f8f 100%); --oc-brand-shadow: 0 6px 20px rgba(10, 31, 77, 0.06); } /* ============================================================ Breakpoints (referência — usar em media queries) --oc-bp-sm: 700px (mobile) --oc-bp-md: 1024px (tablet) --oc-bp-lg: 1100px (desktop pequeno) --oc-bp-xl: 1280px ============================================================ */ /* ---------- Reset base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--oc-font); font-size: var(--oc-fs-base); color: var(--oc-text); background: var(--oc-bg); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /*!*************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../shared/styles/kanban.css ***! \*************************************************************************************************************************************************************************************************************************************************************************/ /* ================= Orçamentos Kanban (template premium) ================= */ .oc-kbn .kpi-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); grid-gap: 12px; gap: 12px; margin-bottom: 18px; } .oc-kbn .kpi { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--oc-border,#e6eaf1); border-radius: 14px; padding: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.06); transition: transform .14s, box-shadow .16s; } .oc-kbn .kpi:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(15,23,42,.08); } .oc-kbn .kpi::after { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--c,#e6eaf1); } .oc-kbn .kpi .ico { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; } .oc-kbn .kpi .num { font-size:25px; font-weight:800; letter-spacing:-1px; line-height:1; margin-top:12px; color: var(--oc-navy,#0f172a); } .oc-kbn .kpi .lbl { font-size:11.5px; color: var(--oc-text-muted,#64748b); font-weight:600; margin-top:5px; line-height:1.25; } .oc-kbn .kbn-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; } .oc-kbn .kbn-search { flex:1 1; min-width:240px; display:flex; align-items:center; gap:10px; height:46px; padding:0 16px; border-radius:13px; background:#fff; border:1px solid var(--oc-border,#e6eaf1); box-shadow:0 1px 2px rgba(15,23,42,.06); } .oc-kbn .kbn-search input { flex:1 1; border:0; outline:0; font-size:14px; background:transparent; font-family:inherit; color: var(--oc-navy,#0f172a); } .oc-kbn .kbn-sel { height:46px; min-width:210px; padding:0 12px; border-radius:13px; border:1px solid var(--oc-border,#e6eaf1); background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.06); font-size:13.5px; font-weight:600; color: var(--oc-ink-2,#334155); } .oc-kbn .board-wrap { overflow-x:auto; padding-bottom:12px; } .oc-kbn .board-wrap::-webkit-scrollbar { height:10px; } .oc-kbn .board-wrap::-webkit-scrollbar-thumb { background:#cfd6e2; border-radius:10px; border:3px solid var(--oc-bg-soft,#eef1f6); } .oc-kbn .board { display:flex; gap:16px; min-height:440px; width:max-content; } .oc-kbn .col { width:312px; flex:0 0 312px; background:#f4f6fa; border:1px solid var(--oc-border,#e6eaf1); border-radius:16px; display:flex; flex-direction:column; max-height:calc(100vh - 340px); transition:box-shadow .15s, border-color .15s; } .oc-kbn .col.drop-hot { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); background:#eef4ff; } .oc-kbn .col-head { display:flex; align-items:center; gap:10px; padding:14px 14px 12px; position:relative; } .oc-kbn .col-head::after { content:""; position:absolute; left:14px; right:14px; bottom:0; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--c), transparent); } .oc-kbn .col-ico { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:color-mix(in srgb, var(--c) 14%, white); color:var(--c); } .oc-kbn .col-title { font-size:14px; font-weight:800; letter-spacing:-.2px; color:var(--oc-navy,#0f172a); white-space:nowrap; } .oc-kbn .col-count { margin-left:auto; min-width:24px; height:24px; padding:0 8px; border-radius:8px; background:color-mix(in srgb, var(--c) 16%, white); color:var(--c); font-size:12.5px; font-weight:800; display:grid; place-items:center; } .oc-kbn .col-body { flex:1 1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:11px; } .oc-kbn .col-body::-webkit-scrollbar { width:6px; } .oc-kbn .col-body::-webkit-scrollbar-thumb { background:#d3dae6; border-radius:6px; } .oc-kbn .card { background:#fff; border:1px solid var(--oc-border,#e6eaf1); border-radius:13px; padding:13px 14px 12px; box-shadow:0 1px 2px rgba(15,23,42,.06); position:relative; cursor:-webkit-grab; cursor:grab; transition:transform .14s, box-shadow .16s, border-color .15s; } .oc-kbn .card::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:3px; background:var(--c); } .oc-kbn .card:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(15,23,42,.08); border-color:color-mix(in srgb, var(--c) 30%, var(--oc-border,#e6eaf1)); } .oc-kbn .card.dragging { opacity:.45; cursor:-webkit-grabbing; cursor:grabbing; } .oc-kbn .card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; } .oc-kbn .proto { font-size:11.5px; font-weight:700; color:var(--oc-text-muted,#64748b); letter-spacing:.3px; font-family:ui-monospace,monospace; } .oc-kbn .sla { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; padding:3px 8px; border-radius:20px; white-space:nowrap; } .oc-kbn .sla.fresh { background:#e9f9f0; color:#0f9d58; } .oc-kbn .sla.warn { background:#fff4e1; color:#d97706; } .oc-kbn .sla.late { background:#fdeaea; color:#dc2626; } .oc-kbn .card-name { font-size:15px; font-weight:800; color:var(--oc-navy,#0f172a); margin:9px 0 2px; letter-spacing:-.2px; line-height:1.25; } .oc-kbn .card-contact { display:flex; align-items:center; gap:6px; color:var(--oc-text-muted,#64748b); font-size:12.5px; font-weight:500; } .oc-kbn .card-foot { display:flex; align-items:center; gap:10px; margin-top:12px; padding-top:11px; border-top:1px dashed var(--oc-border,#e6eaf1); } .oc-kbn .chip { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:var(--oc-ink-2,#334155); background:var(--oc-bg-soft,#f7f9fc); padding:4px 9px; border-radius:8px; white-space:nowrap; } .oc-kbn .card-foot .date { font-size:11.5px; color:var(--oc-text-muted,#64748b); font-weight:600; } .oc-kbn .card-foot .resp { margin-left:auto; display:inline-flex; align-items:center; gap:6px; } .oc-kbn .card-foot .resp .av { width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-size:11px; font-weight:800; color:#fff; } .oc-kbn .card-foot .resp .nm { font-size:11.5px; font-weight:700; color:var(--oc-ink-2,#334155); } .oc-kbn .card .ia-tag { margin-top:8px; display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:#1f6feb; background:#eef4ff; padding:2px 8px; border-radius:999px; } .oc-kbn .dropzone { flex:1 1; min-height:110px; border:2px dashed #d2dae7; border-radius:13px; display:flex; align-items:center; justify-content:center; color:#94a3b8; font-size:12.5px; font-weight:600; text-align:center; padding:16px; } .oc-kbn .col.drop-hot .dropzone { border-color:var(--c); color:var(--c); } /* Drawer detalhe (.oc-qd) */ .oc-qd .badge-status { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:20px; font-size:13px; font-weight:800; color:#fff; } .oc-qd .badge-status .d { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.85); } .oc-qd .d-block { margin-top:20px; } .oc-qd .d-block h4 { margin:0 0 4px; font-size:10.5px; letter-spacing:1.2px; color:#94a3b8; font-weight:800; text-transform:uppercase; } .oc-qd .d-name { font-size:16px; font-weight:800; color:var(--oc-navy,#0f172a); } .oc-qd .d-grid { display:grid; grid-template-columns:1fr 1fr; grid-gap:16px 14px; gap:16px 14px; margin-top:14px; } .oc-qd .d-grid .k { font-size:10.5px; letter-spacing:1px; color:#94a3b8; font-weight:800; text-transform:uppercase; } .oc-qd .d-grid .v { font-size:13.5px; font-weight:600; color:var(--oc-ink-2,#334155); margin-top:3px; word-break:break-word; } .oc-qd .d-selects { display:grid; grid-template-columns:1fr 1fr; grid-gap:12px; gap:12px; margin-top:18px; } .oc-qd .item-row { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--oc-border,#e6eaf1); border-radius:12px; margin-top:8px; } .oc-qd .item-row .ic { width:38px; height:38px; border-radius:10px; background:#eef2fb; color:#2563eb; display:grid; place-items:center; flex:0 0 38px; } .oc-qd .item-row .nm { font-size:14px; font-weight:700; color:var(--oc-navy,#0f172a); } .oc-qd .item-row .meta { font-size:12px; color:var(--oc-text-muted,#64748b); font-weight:600; margin-top:2px; } .oc-qd .item-row .qty { margin-left:auto; font-size:13px; font-weight:800; color:var(--oc-ink-2,#334155); } .oc-qd .note-add { display:flex; gap:8px; margin-top:8px; } .oc-qd .note-add input { flex:1 1; height:42px; border:1px solid var(--oc-border,#e6eaf1); border-radius:11px; padding:0 13px; font-family:inherit; font-size:13px; outline:0; } .oc-qd .note { margin-top:8px; padding:12px 14px; border-radius:12px; background:var(--oc-bg-soft,#f7f9fc); font-size:13.5px; color:var(--oc-ink-2,#334155); } .oc-qd .note .meta { font-size:11px; color:var(--oc-text-muted,#94a3b8); margin-top:4px; } .oc-qd .timeline { margin-top:12px; position:relative; padding-left:22px; } .oc-qd .timeline::before { content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--oc-border,#e6eaf1); } .oc-qd .tl-item { position:relative; padding-bottom:16px; } .oc-qd .tl-item .dot { position:absolute; left:-22px; top:3px; width:12px; height:12px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px var(--oc-border,#e6eaf1); } .oc-qd .tl-item .ttl { font-size:13.5px; font-weight:800; color:var(--oc-navy,#0f172a); } .oc-qd .tl-item .meta { font-size:12px; color:var(--oc-text-muted,#64748b); font-weight:600; margin-top:2px; } /* Status config (.oc-qsc) */ .oc-qsc { display:flex; flex-direction:column; gap:14px; } .oc-qsc .status-card { border:1px solid var(--oc-border,#e6eaf1); border-radius:14px; padding:16px; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.06); position:relative; overflow:hidden; } .oc-qsc .status-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--c); } .oc-qsc .sc-row1 { display:flex; align-items:center; gap:10px; } .oc-qsc .sc-swatch { width:36px; height:36px; border-radius:10px; flex:0 0 36px; border:2px solid #fff; box-shadow:0 0 0 1px var(--oc-border,#e6eaf1); padding:0; cursor:pointer; } .oc-qsc .sc-name { flex:1 1; height:38px; border:1px solid var(--oc-border,#e6eaf1); border-radius:10px; padding:0 12px; font-family:inherit; font-size:14px; font-weight:700; outline:0; } .oc-qsc .sc-fields { display:flex; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap; } .oc-qsc .sw { width:42px; height:24px; border-radius:20px; background:#cbd5e1; position:relative; cursor:pointer; transition:background .18s; flex:0 0 42px; border:0; padding:0; } .oc-qsc .sw::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s; } .oc-qsc .sw.on { background:#16a34a; } .oc-qsc .sw.on::after { transform:translateX(18px); } .oc-qsc .sc-tog { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--oc-ink-2,#334155); } /*!*****************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../shared/styles/components.css ***! \*****************************************************************************************************************************************************************************************************************************************************************************/ /* ============================================================ OraCommerce — Component Library styles Classes prefixadas .oc-* consumindo tokens --oc-*. ============================================================ */ /* ---------------- App Shell ---------------- */ .oc-app { display: grid; grid-template-columns: var(--oc-sidebar-w) 1fr; min-height: 100vh; } .oc-main { display: flex; flex-direction: column; min-width: 0; } /* ---------------- Sidebar ---------------- */ .oc-sidebar { background: var(--oc-surface); border-right: 1px solid var(--oc-border); display: flex; flex-direction: column; height: 100vh; position: -webkit-sticky; position: sticky; top: 0; } .oc-sidebar-brand { display: flex; align-items: center; gap: var(--oc-sp-3); padding: var(--oc-sp-4) var(--oc-sp-5); min-height: 84px; border-bottom: 1px solid var(--oc-border); } .oc-sidebar-logo { width: 44px; height: 44px; border-radius: 10px; background: var(--oc-gradient-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: var(--oc-fw-extrabold); font-size: var(--oc-fs-h2); flex-shrink: 0; } .oc-sidebar-brand-name { font-size: var(--oc-fs-lg); font-weight: var(--oc-fw-bold); letter-spacing: -0.02em; line-height: 1.1; } .oc-sidebar-brand-sub { font-size: 10px; color: var(--oc-text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .oc-sidebar-nav { flex: 1 1; overflow-y: auto; padding: var(--oc-sp-3) 0; } .oc-sidebar-section { padding: var(--oc-sp-3) var(--oc-sp-5) var(--oc-sp-1); font-size: 10px; font-weight: var(--oc-fw-bold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--oc-text-dim); } .oc-sidebar-items { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--oc-sp-3); } .oc-sidebar-item { display: flex; align-items: center; gap: var(--oc-sp-3); padding: 9px var(--oc-sp-3); border-radius: var(--oc-radius-sm); font-size: 13.5px; font-weight: var(--oc-fw-medium); color: var(--oc-text-muted); cursor: pointer; border: none; background: none; width: 100%; text-align: left; transition: var(--oc-transition); } .oc-sidebar-item:hover { background: #f3f4f6; color: var(--oc-navy); } .oc-sidebar-item.is-active { background: var(--oc-blue-soft); color: var(--oc-blue); font-weight: var(--oc-fw-semibold); } .oc-sidebar-item .oc-sidebar-badge { margin-left: auto; } .oc-sidebar-badge { background: var(--oc-blue); color: #fff; font-size: var(--oc-fs-2xs); font-weight: var(--oc-fw-bold); padding: 1px 7px; border-radius: var(--oc-radius-pill); } .oc-sidebar-foot { margin-top: auto; padding: var(--oc-sp-4) var(--oc-sp-5); border-top: 1px solid var(--oc-border); font-size: var(--oc-fs-2xs); color: var(--oc-text-dim); } /* ---------------- Topbar ---------------- */ .oc-topbar { height: var(--oc-topbar-h); background: var(--oc-surface); border-bottom: 1px solid var(--oc-border); display: flex; align-items: center; justify-content: space-between; gap: var(--oc-sp-4); padding: 0 var(--oc-sp-7); position: -webkit-sticky; position: sticky; top: 0; z-index: 30; } .oc-topbar-left { display: flex; align-items: center; gap: var(--oc-sp-3); flex: 1 1; min-width: 0; } .oc-topbar-right { display: flex; align-items: center; gap: var(--oc-sp-2); } .oc-topbar-icon-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--oc-radius); border: none; background: none; color: var(--oc-text-muted); cursor: pointer; position: relative; transition: var(--oc-transition); } .oc-topbar-icon-btn:hover { background: var(--oc-bg); color: var(--oc-navy); } .oc-notif-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--oc-danger); box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .oc-topbar-user { display: flex; align-items: center; gap: var(--oc-sp-2); padding: 5px var(--oc-sp-2); border-radius: var(--oc-radius); cursor: pointer; } .oc-topbar-user:hover { background: var(--oc-bg); } .oc-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--oc-gradient-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--oc-fs-xs); font-weight: var(--oc-fw-extrabold); flex-shrink: 0; } .oc-topbar-user-meta { line-height: 1.2; } .oc-topbar-user-name { font-size: var(--oc-fs-sm); font-weight: var(--oc-fw-bold); color: var(--oc-navy); } .oc-topbar-user-role { font-size: var(--oc-fs-2xs); color: var(--oc-text-muted); } /* ---------------- Breadcrumb ---------------- */ .oc-breadcrumb { display: flex; align-items: center; gap: var(--oc-sp-2); padding: var(--oc-sp-3) var(--oc-sp-7); background: var(--oc-navy); color: rgba(255,255,255,0.7); font-size: var(--oc-fs-sm); } .oc-breadcrumb a, .oc-breadcrumb button { color: rgba(255,255,255,0.7); background: none; border: none; cursor: pointer; font-size: inherit; padding: 0; } .oc-breadcrumb a:hover, .oc-breadcrumb button:hover { color: #fff; } .oc-breadcrumb-sep { color: rgba(255,255,255,0.4); } .oc-breadcrumb-current { color: #fff; font-weight: var(--oc-fw-medium); } /* ---------------- Page ---------------- */ .oc-page { padding: var(--oc-sp-6) var(--oc-sp-7); display: flex; flex-direction: column; gap: var(--oc-sp-5); max-width: var(--oc-content-max); flex: 1 1; } .oc-page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--oc-sp-4); flex-wrap: wrap; } .oc-page-title { font-size: var(--oc-fs-h1); font-weight: var(--oc-fw-bold); letter-spacing: -0.01em; margin: 0; } .oc-page-sub { font-size: var(--oc-fs-sm); color: var(--oc-text-muted); margin: 4px 0 0; } .oc-page-actions { display: flex; gap: var(--oc-sp-2); } /* ---------------- Card ---------------- */ .oc-card { background: var(--oc-surface); border: 1px solid var(--oc-border); border-radius: var(--oc-radius-lg); box-shadow: var(--oc-shadow-sm); overflow: hidden; } .oc-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--oc-sp-3); padding: var(--oc-sp-4) var(--oc-sp-5); border-bottom: 1px solid var(--oc-border); } .oc-card-title { display: flex; align-items: center; gap: var(--oc-sp-2); font-size: var(--oc-fs-base); font-weight: var(--oc-fw-bold); color: var(--oc-navy); margin: 0; } .oc-card-sub { font-size: var(--oc-fs-xs); color: var(--oc-text-muted); margin-top: 2px; } .oc-card-body { padding: var(--oc-sp-5); } .oc-card-body-flush { padding: 0; } .oc-card-foot { display: flex; justify-content: flex-end; gap: var(--oc-sp-2); padding: var(--oc-sp-3) var(--oc-sp-5); border-top: 1px solid var(--oc-border); background: var(--oc-bg); } /* ---------------- KPI Card ---------------- */ .oc-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-gap: var(--oc-sp-4); gap: var(--oc-sp-4); } .oc-kpi { background: var(--oc-surface); border: 1px solid var(--oc-border); border-radius: var(--oc-radius-lg); box-shadow: var(--oc-shadow-sm); padding: 18px 20px; } .oc-kpi-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--oc-sp-3); } .oc-kpi-label { font-size: var(--oc-fs-xs); font-weight: var(--oc-fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--oc-text-muted); } .oc-kpi-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--oc-blue-soft); color: var(--oc-blue); } .oc-kpi-icon.is-green { background: var(--oc-success-soft); color: var(--oc-success); } .oc-kpi-icon.is-orange { background: var(--oc-warn-soft); color: var(--oc-warn); } .oc-kpi-icon.is-purple { background: var(--oc-purple-soft); color: var(--oc-purple); } .oc-kpi-icon.is-red { background: var(--oc-danger-soft); color: var(--oc-danger); } .oc-kpi-value { font-size: var(--oc-fs-display); font-weight: var(--oc-fw-extrabold); color: var(--oc-navy); letter-spacing: -0.02em; line-height: 1.1; } .oc-kpi-delta { display: flex; align-items: center; gap: 4px; font-size: var(--oc-fs-xs); color: var(--oc-text-muted); margin-top: 4px; } .oc-kpi-delta.is-up { color: var(--oc-success); } .oc-kpi-delta.is-down { color: var(--oc-danger); } /* ---------------- Pills / Badges ---------------- */ .oc-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: var(--oc-fs-xs); font-weight: var(--oc-fw-semibold); border-radius: var(--oc-radius-pill); background: var(--oc-bg); color: var(--oc-text-muted); border: 1px solid var(--oc-border); } .oc-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .oc-pill.is-success { background: var(--oc-success-soft); color: var(--oc-success); border-color: transparent; } .oc-pill.is-warn { background: var(--oc-warn-soft); color: #92400e; border-color: transparent; } .oc-pill.is-danger { background: var(--oc-danger-soft); color: var(--oc-danger); border-color: transparent; } .oc-pill.is-info { background: var(--oc-info-soft); color: var(--oc-info); border-color: transparent; } .oc-pill.is-neutral { background: var(--oc-bg); color: var(--oc-text-muted); } /* ---------------- Buttons ---------------- */ .oc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--oc-sp-2); padding: 9px var(--oc-sp-4); font-size: var(--oc-fs-sm); font-weight: var(--oc-fw-semibold); border-radius: var(--oc-radius); border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: var(--oc-transition); } .oc-btn:disabled { opacity: 0.5; cursor: not-allowed; } .oc-btn-primary { background: var(--oc-blue-mid); color: #fff; } .oc-btn-primary:hover { background: var(--oc-blue); } .oc-btn-secondary { background: var(--oc-surface); color: var(--oc-navy); border-color: var(--oc-border); } .oc-btn-secondary:hover { background: var(--oc-bg); border-color: var(--oc-border-strong); } .oc-btn-ghost { background: transparent; color: var(--oc-text-muted); } .oc-btn-ghost:hover { background: var(--oc-bg); color: var(--oc-navy); } .oc-btn-success { background: var(--oc-success); color: #fff; } .oc-btn-success:hover { background: #15803d; } .oc-btn-danger { background: var(--oc-danger-soft); color: var(--oc-danger); border-color: var(--oc-danger-soft); } .oc-btn-danger:hover { background: var(--oc-danger); color: #fff; } .oc-btn-sm { padding: 5px 10px; font-size: var(--oc-fs-xs); } .oc-btn-lg { padding: 12px 22px; font-size: var(--oc-fs-lg); } .oc-btn-block { width: 100%; } .oc-icon-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; border: none; background: none; color: var(--oc-text-muted); cursor: pointer; transition: var(--oc-transition); } .oc-icon-btn:hover { background: var(--oc-bg); color: var(--oc-navy); } .oc-icon-btn.is-danger:hover { background: var(--oc-danger-soft); color: var(--oc-danger); } /* ---------------- Forms ---------------- */ .oc-field { display: flex; flex-direction: column; gap: 5px; } .oc-field-label { font-size: var(--oc-fs-xs); font-weight: var(--oc-fw-semibold); color: var(--oc-text); } .oc-field-label sup { color: var(--oc-danger); margin-left: 1px; } .oc-field-helper { font-size: var(--oc-fs-2xs); color: var(--oc-text-dim); } .oc-input, .oc-select, .oc-textarea { width: 100%; padding: 9px var(--oc-sp-3); border: 1.5px solid var(--oc-border); border-radius: var(--oc-radius); font-size: var(--oc-fs-sm); color: var(--oc-text); background: var(--oc-surface); outline: none; transition: border-color var(--oc-transition); } .oc-input:focus, .oc-select:focus, .oc-textarea:focus { border-color: var(--oc-blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); } .oc-textarea { resize: vertical; min-height: 80px; } .oc-input-prefix { display: flex; align-items: center; border: 1.5px solid var(--oc-border); border-radius: var(--oc-radius); background: var(--oc-surface); overflow: hidden; transition: border-color var(--oc-transition); } .oc-input-prefix:focus-within { border-color: var(--oc-blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); } .oc-input-prefix .oc-pfx { padding: 0 var(--oc-sp-3); color: var(--oc-text-muted); display: flex; } .oc-input-prefix input { border: none; outline: none; padding: 9px var(--oc-sp-3) 9px 0; flex: 1 1; font-size: var(--oc-fs-sm); background: transparent; } /* ---------------- Switch ---------------- */ .oc-switch { display: inline-flex; cursor: pointer; } .oc-switch input { display: none; } .oc-switch-slider { width: 44px; height: 24px; border-radius: var(--oc-radius-pill); background: var(--oc-border-strong); position: relative; transition: var(--oc-transition); } .oc-switch-slider::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform var(--oc-transition); } .oc-switch input:checked + .oc-switch-slider { background: var(--oc-success); } .oc-switch input:checked + .oc-switch-slider::after { transform: translateX(20px); } /* ---------------- Filter Card ---------------- */ .oc-filter-card { background: var(--oc-surface-2); border: 1px solid var(--oc-border); border-radius: var(--oc-radius-lg); overflow: hidden; } .oc-filter-head { display: flex; align-items: center; gap: var(--oc-sp-2); padding: 10px var(--oc-sp-4); background: var(--oc-bg); border-bottom: 1px solid var(--oc-border); font-size: var(--oc-fs-sm); font-weight: var(--oc-fw-semibold); color: var(--oc-navy); } .oc-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-gap: var(--oc-sp-4); gap: var(--oc-sp-4); padding: var(--oc-sp-4); align-items: flex-end; } /* ---------------- DataTable ---------------- */ .oc-table { width: 100%; border-collapse: collapse; font-size: var(--oc-fs-sm); } .oc-table th { padding: 10px var(--oc-sp-4); font-size: var(--oc-fs-2xs); font-weight: var(--oc-fw-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--oc-text-muted); background: var(--oc-surface-2); border-bottom: 1px solid var(--oc-border); text-align: left; } .oc-table td { padding: 13px var(--oc-sp-4); border-bottom: 1px solid var(--oc-border); vertical-align: middle; color: var(--oc-text); } .oc-table tr:last-child td { border-bottom: none; } .oc-table tr.is-clickable { cursor: pointer; } .oc-table tr.is-clickable:hover td { background: var(--oc-surface-2); } .oc-cell-strong { font-weight: var(--oc-fw-semibold); color: var(--oc-navy); } .oc-cell-muted { font-size: var(--oc-fs-xs); color: var(--oc-text-muted); } .oc-cell-mono { font-family: var(--oc-font-mono); font-size: var(--oc-fs-xs); } .oc-cell-num { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } /* ---------------- Modal ---------------- */ .oc-modal-backdrop { position: fixed; inset: 0; background: rgba(17,24,39,0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 500; padding: var(--oc-sp-5); } .oc-modal { background: #fff; border-radius: 14px; box-shadow: var(--oc-shadow-xl); max-width: 560px; width: 100%; display: flex; flex-direction: column; max-height: 90vh; overflow: hidden; } .oc-modal.is-lg { max-width: 720px; } .oc-modal.is-xl { max-width: 1080px; } .oc-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--oc-border); } .oc-modal-title { font-size: var(--oc-fs-h3); font-weight: var(--oc-fw-bold); color: var(--oc-navy); margin: 0; } .oc-modal-body { padding: 22px; overflow-y: auto; flex: 1 1; } .oc-modal-foot { display: flex; justify-content: flex-end; gap: var(--oc-sp-2); padding: var(--oc-sp-4) 22px; border-top: 1px solid var(--oc-border); background: var(--oc-bg); } /* ---------------- Drawer ---------------- */ .oc-drawer-backdrop { position: fixed; inset: 0; background: rgba(17,24,39,0.4); z-index: 600; opacity: 0; pointer-events: none; transition: opacity var(--oc-transition); } .oc-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; } .oc-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 360px; max-width: 96vw; background: #fff; box-shadow: var(--oc-shadow-xl); z-index: 601; transform: translateX(100%); transition: transform var(--oc-transition-slow); display: flex; flex-direction: column; } .oc-drawer.is-md { width: 480px; } .oc-drawer.is-lg { width: 560px; } .oc-drawer.is-xl { width: 640px; } .oc-drawer.is-open { transform: translateX(0); } .oc-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: var(--oc-sp-4) var(--oc-sp-5); border-bottom: 1px solid var(--oc-border); } .oc-drawer-body { padding: var(--oc-sp-5); overflow-y: auto; flex: 1 1; } /* ---------------- Toast ---------------- */ .oc-toast-host { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: var(--oc-sp-2); z-index: 9999; } .oc-toast { display: flex; align-items: flex-start; gap: var(--oc-sp-3); min-width: 300px; max-width: 380px; padding: var(--oc-sp-3) var(--oc-sp-4); background: var(--oc-navy); color: #fff; border-radius: var(--oc-radius-lg); box-shadow: var(--oc-shadow-lg); animation: oc-toast-in 0.2s ease; } .oc-toast.is-success { background: var(--oc-success); } .oc-toast.is-warn { background: var(--oc-warn); } .oc-toast.is-error { background: var(--oc-danger); } .oc-toast.is-info { background: var(--oc-blue); } .oc-toast-title { font-size: var(--oc-fs-sm); font-weight: var(--oc-fw-bold); } .oc-toast-msg { font-size: var(--oc-fs-xs); opacity: 0.85; margin-top: 2px; } @keyframes oc-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ---------------- Search Dropdown ---------------- */ .oc-search { position: relative; max-width: 400px; width: 100%; } .oc-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 480px; overflow-y: auto; background: #fff; border: 1px solid var(--oc-border); border-radius: var(--oc-radius-lg); box-shadow: var(--oc-shadow-lg); z-index: 1000; } .oc-search-group { padding: var(--oc-sp-2) var(--oc-sp-4); font-size: var(--oc-fs-2xs); font-weight: var(--oc-fw-bold); text-transform: uppercase; color: var(--oc-text-muted); } .oc-search-row { display: flex; align-items: center; gap: var(--oc-sp-3); padding: 10px var(--oc-sp-4); cursor: pointer; } .oc-search-row:hover { background: var(--oc-blue-soft); } /* ---------------- Empty State ---------------- */ .oc-empty { display: flex; flex-direction: column; align-items: center; gap: var(--oc-sp-2); padding: var(--oc-sp-12); text-align: center; color: var(--oc-text-muted); } .oc-empty-icon { width: 56px; height: 56px; border-radius: var(--oc-radius-xl); background: var(--oc-blue-soft); color: var(--oc-blue); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .oc-empty-title { font-size: var(--oc-fs-h3); font-weight: var(--oc-fw-bold); color: var(--oc-navy); } /* ---------------- Reward Card ---------------- */ .oc-reward-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-gap: var(--oc-sp-4); gap: var(--oc-sp-4); } .oc-reward { background: var(--oc-surface); border: 1px solid var(--oc-border); border-radius: var(--oc-radius-lg); overflow: hidden; transition: var(--oc-transition); } .oc-reward:hover { border-color: var(--oc-navy); transform: translateY(-2px); box-shadow: var(--oc-shadow); } .oc-reward-img { height: 140px; background: var(--oc-gradient-brand); display: flex; align-items: center; justify-content: center; font-size: 48px; position: relative; } .oc-reward-tag { position: absolute; top: var(--oc-sp-2); right: var(--oc-sp-2); font-size: 10px; font-weight: var(--oc-fw-bold); padding: 2px 8px; border-radius: var(--oc-radius-pill); background: #fff; } .oc-reward-body { padding: var(--oc-sp-4); display: flex; flex-direction: column; gap: var(--oc-sp-2); } .oc-reward-name { font-size: var(--oc-fs-base); font-weight: var(--oc-fw-semibold); color: var(--oc-navy); line-height: 1.3; } .oc-reward-meta { font-size: var(--oc-fs-xs); color: var(--oc-text-muted); } .oc-reward-foot { display: flex; justify-content: space-between; align-items: center; padding: var(--oc-sp-3) var(--oc-sp-4); border-top: 1px solid var(--oc-border); } .oc-reward-cost { font-size: var(--oc-fs-base); font-weight: var(--oc-fw-bold); color: var(--oc-navy); } /* ---------------- Points Hero ---------------- */ .oc-points-hero { display: flex; align-items: center; gap: var(--oc-sp-4); padding: 18px var(--oc-sp-5); background: var(--oc-blue-soft); border-radius: var(--oc-radius-lg); } .oc-points-hero-value { font-size: 36px; font-weight: var(--oc-fw-extrabold); color: var(--oc-blue); line-height: 1; } .oc-points-hero-label { font-size: var(--oc-fs-2xs); font-weight: var(--oc-fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--oc-text-muted); } /* ---------------- Tabs ---------------- */ .oc-tabs { display: flex; flex-direction: column; gap: 20px; } .oc-tablist { display: flex; gap: 4px; flex-wrap: wrap; background: var(--oc-surface); border: 1px solid var(--oc-border); border-radius: var(--oc-radius-lg); padding: 5px; box-shadow: var(--oc-shadow-sm); } .oc-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: none; background: transparent; cursor: pointer; border-radius: var(--oc-radius); font-size: var(--oc-fs-sm); font-weight: var(--oc-fw-semibold); color: var(--oc-text-muted); transition: all var(--oc-transition); white-space: nowrap; } .oc-tab:hover { color: var(--oc-navy); background: var(--oc-surface-2); } .oc-tab.is-active { color: #fff; background: var(--oc-blue-mid); box-shadow: 0 2px 8px rgba(37,99,235,0.3); } .oc-tabpanel { display: flex; flex-direction: column; gap: 20px; animation: oc-tabfade 0.18s ease; } @keyframes oc-tabfade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (max-width: 600px) { .oc-tablist { overflow-x: auto; flex-wrap: nowrap; } } /* ---------------- Image input / galeria ---------------- */ .oc-imageinput { display: flex; gap: 14px; align-items: flex-start; } .oc-imageinput-preview { width: 84px; height: 84px; flex-shrink: 0; border-radius: var(--oc-radius); border: 1px solid var(--oc-border); background: var(--oc-surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--oc-text-dim); } .oc-imageinput-preview img { width: 100%; height: 100%; object-fit: cover; } .oc-imageinput-main { flex: 1 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .oc-imageinput-actions { display: flex; gap: 6px; flex-wrap: wrap; } .oc-img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-gap: 12px; gap: 12px; max-height: 56vh; overflow-y: auto; } .oc-img-cell { position: relative; aspect-ratio: 1/1; border: 1px solid var(--oc-border); border-radius: var(--oc-radius); overflow: hidden; cursor: pointer; padding: 0; background: var(--oc-surface-2); transition: border-color var(--oc-transition); } .oc-img-cell:hover { border-color: var(--oc-blue-mid); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); } .oc-img-cell img { width: 100%; height: 100%; object-fit: cover; display: block; } .oc-img-del { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(220,38,38,0.92); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--oc-transition); } .oc-img-cell:hover .oc-img-del, .oc-multiimage-cell:hover .oc-img-del { opacity: 1; } .oc-img-err { background: var(--oc-danger-soft); color: var(--oc-danger); border-radius: var(--oc-radius); padding: 8px 12px; font-size: 13px; margin-bottom: 12px; } .oc-multiimage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); grid-gap: 10px; gap: 10px; } .oc-multiimage-cell { position: relative; aspect-ratio: 1/1; border-radius: var(--oc-radius); overflow: hidden; border: 1px solid var(--oc-border); } .oc-multiimage-cell img { width: 100%; height: 100%; object-fit: cover; } .oc-multiimage-cell .oc-img-del { opacity: 1; width: 24px; height: 24px; } .oc-multiimage-add { aspect-ratio: 1/1; border: 1.5px dashed var(--oc-border-strong); border-radius: var(--oc-radius); background: var(--oc-surface-2); color: var(--oc-text-muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11.5px; font-weight: 600; } .oc-multiimage-add:hover { border-color: var(--oc-blue-mid); color: var(--oc-blue-mid); } /* ---------------- Icon picker ---------------- */ .oc-iconpicker { position: relative; } .oc-iconpicker-trigger { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--oc-border); border-radius: var(--oc-radius); background: var(--oc-surface); cursor: pointer; font-size: var(--oc-fs-sm); color: var(--oc-text); transition: border-color var(--oc-transition); } .oc-iconpicker-trigger:hover { border-color: var(--oc-border-strong); } .oc-iconpicker-preview { width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--oc-radius-sm); background: var(--oc-blue-soft); color: var(--oc-blue-mid); display: flex; align-items: center; justify-content: center; } .oc-iconpicker-name { flex: 1 1; text-align: left; font-weight: var(--oc-fw-semibold); color: var(--oc-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oc-iconpicker-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 200; background: var(--oc-surface); border: 1px solid var(--oc-border); border-radius: var(--oc-radius-lg); box-shadow: var(--oc-shadow-lg); padding: 10px; min-width: 260px; } .oc-iconpicker-search { margin-bottom: 8px; } .oc-iconpicker-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 6px; gap: 6px; max-height: 220px; overflow-y: auto; } .oc-iconpicker-cell { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; border: 1px solid var(--oc-border); border-radius: var(--oc-radius-sm); background: var(--oc-surface); color: var(--oc-text-muted); cursor: pointer; transition: all var(--oc-transition); } .oc-iconpicker-cell:hover { color: var(--oc-blue-mid); border-color: var(--oc-blue-mid); background: var(--oc-blue-soft); } .oc-iconpicker-cell.is-active { color: #fff; background: var(--oc-blue-mid); border-color: var(--oc-blue-mid); } .oc-iconpicker-empty { grid-column: 1 / -1; text-align: center; color: var(--oc-text-muted); font-size: var(--oc-fs-sm); padding: 12px; } /* ---------------- Colapsar sidebar no desktop ---------------- */ @media (min-width: 1025px) { .oc-app.is-collapsed { grid-template-columns: 0 1fr; } .oc-app.is-collapsed .oc-sidebar { transform: translateX(-100%); overflow: hidden; transition: transform var(--oc-transition-slow); } } /* ---------------- Mobile sidebar toggle ---------------- */ @media (max-width: 1024px) { .oc-app { grid-template-columns: 1fr; } .oc-sidebar { position: fixed; top: 0; left: 0; z-index: 700; transform: translateX(-100%); transition: transform var(--oc-transition-slow); width: var(--oc-sidebar-w); } .oc-sidebar.is-open { transform: translateX(0); } } /* ===================== Kanban de Orçamentos ===================== */ .oc-kanban-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); grid-gap: 10px; gap: 10px; margin-bottom: 16px; } .oc-kpi-tile { background: var(--oc-surface, #fff); border: 1px solid var(--oc-border, #e6e8ec); border-top: 3px solid #2563eb; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; } .oc-kpi-tile-val { font-size: 22px; font-weight: 800; color: var(--oc-navy, #0f213a); } .oc-kpi-tile-lbl { font-size: 12px; color: var(--oc-text-muted, #64748b); } .oc-kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; } .oc-kanban-col { flex: 0 0 290px; width: 290px; background: var(--oc-bg-soft, #f4f6fa); border: 1px solid var(--oc-border, #e6e8ec); border-radius: 14px; display: flex; flex-direction: column; max-height: calc(100vh - 320px); } .oc-kanban-col.is-over { outline: 2px dashed var(--oc-blue, #2563eb); outline-offset: -2px; background: #eef4ff; } .oc-kanban-colhead { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 2px solid #2563eb; font-size: 14px; color: var(--oc-navy, #0f213a); } .oc-kanban-colhead strong { flex: 1 1; } .oc-kanban-dot { width: 9px; height: 9px; border-radius: 50%; } .oc-kanban-count { background: rgba(0,0,0,0.06); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; } .oc-kanban-cards { display: flex; flex-direction: column; gap: 10px; padding: 12px; overflow-y: auto; } .oc-kanban-card { background: #fff; border: 1px solid var(--oc-border, #e6e8ec); border-left: 4px solid #2563eb; border-radius: 10px; padding: 10px 12px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.04); transition: box-shadow .15s, transform .1s; } .oc-kanban-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.12); transform: translateY(-1px); } .oc-kanban-card:active { cursor: -webkit-grabbing; cursor: grabbing; } .oc-kanban-card-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; } .oc-kanban-tempo { color: var(--oc-text-muted, #64748b); } .oc-kanban-card-name { font-weight: 700; color: var(--oc-navy, #0f213a); margin-top: 4px; font-size: 14px; } .oc-kanban-card-sub { font-size: 12.5px; color: var(--oc-text-muted, #64748b); } .oc-kanban-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; color: var(--oc-text-muted, #64748b); } .oc-kanban-card-foot span { display: inline-flex; align-items: center; gap: 4px; } .oc-kanban-card-resp { margin-top: 6px; font-size: 11.5px; color: var(--oc-blue, #2563eb); display: inline-flex; align-items: center; gap: 4px; background: #eef4ff; padding: 2px 8px; border-radius: 999px; } .oc-kanban-empty { text-align: center; color: var(--oc-text-muted, #94a3b8); font-size: 12px; padding: 18px 0; border: 1px dashed var(--oc-border, #d8dee8); border-radius: 8px; } .oc-q-item { padding: 8px 0; border-bottom: 1px solid var(--oc-border, #eef1f5); } .oc-q-note { background: #f7f9fc; border: 1px solid var(--oc-border, #e6e8ec); border-radius: 8px; padding: 8px 10px; } .oc-status-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--oc-border, #e6e8ec); border-radius: 12px; background: var(--oc-surface, #fff); } .oc-kanban-card-origem { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; } .oc-origem-ia { font-size: 11px; color: #1f6feb; background: #eef4ff; padding: 2px 8px; border-radius: 999px; display: inline-flex; gap: 4px; align-items: center; font-weight: 600; } .oc-origem-cli { font-size: 11px; color: #64748b; background: #f1f5f9; padding: 2px 8px; border-radius: 999px; display: inline-flex; gap: 4px; align-items: center; } /* ===== Assistente DOM (chat de marketing) ===== */ .oc-domchat { display: flex; flex-direction: column; height: clamp(420px, 62vh, 680px); } .oc-domchat-msgs { flex: 1 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 6px 4px 12px; } .oc-domchat-msg { display: flex; gap: 10px; max-width: 86%; } .oc-domchat-msg.user { align-self: flex-end; flex-direction: row-reverse; } .oc-domchat-av { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--oc-brand, #c8101c); color: #fff; display: flex; align-items: center; justify-content: center; } .oc-domchat-bubble { background: #f1f5f9; color: var(--oc-ink, #15171c); border-radius: 14px; padding: 11px 14px; font-size: 14px; line-height: 1.5; } .oc-domchat-bubble p { margin: 0; } .oc-domchat-bubble p + p { margin-top: 6px; } .oc-domchat-msg.user .oc-domchat-bubble { background: var(--oc-brand, #c8101c); color: #fff; } .oc-domchat-typing { color: var(--oc-muted, #64748b); font-style: italic; } .oc-domchat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; } .oc-domchat-chips button { font-size: 12.5px; border: 1px solid var(--oc-border, #e6eaf1); background: #fff; color: var(--oc-ink-2, #334155); border-radius: 999px; padding: 7px 12px; cursor: pointer; transition: .15s; } .oc-domchat-chips button:hover { border-color: var(--oc-brand); color: var(--oc-brand); } .oc-domchat-input { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--oc-border, #e6eaf1); padding-top: 12px; } .oc-domchat-input > *:first-child { flex: 1 1; } /* ================================================================ Command Palette (oc-cmdk-*) ================================================================ */ .oc-cmdk-trigger { display: flex; align-items: center; gap: 9px; width: 100%; max-width: 520px; min-width: 240px; height: 40px; padding: 0 14px; border: 1px solid var(--oc-border, #e2e8f0); border-radius: 10px; background: var(--oc-bg-soft, #f4f6fa); color: var(--oc-muted, #64748b); font-size: 13.5px; cursor: pointer; transition: border-color .15s, box-shadow .15s; white-space: nowrap; } .oc-cmdk-trigger:hover { border-color: var(--oc-brand, #c8101c); box-shadow: 0 0 0 2px rgba(200,16,28,.08); color: var(--oc-ink, #15171c); } .oc-cmdk-trigger-text { flex: 1 1; text-align: left; } .oc-cmdk-kbd { font-size: 11px; font-family: inherit; background: var(--oc-bg, #fff); border: 1px solid var(--oc-border, #e2e8f0); border-radius: 4px; padding: 1px 5px; color: var(--oc-muted, #94a3b8); line-height: 1.4; } .oc-cmdk-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(15,33,58,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; } .oc-cmdk-panel { width: 100%; max-width: 560px; background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.2); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; } .oc-cmdk-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--oc-border, #e6e8ec); flex-shrink: 0; } .oc-cmdk-input { flex: 1 1; border: none; outline: none; background: transparent; font-size: 15px; color: var(--oc-ink, #15171c); } .oc-cmdk-input::placeholder { color: var(--oc-muted, #94a3b8); } .oc-cmdk-loading { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--oc-border, #e2e8f0); border-top-color: var(--oc-brand, #c8101c); animation: oc-spin .6s linear infinite; flex-shrink: 0; } @keyframes oc-spin { to { transform: rotate(360deg); } } .oc-cmdk-esc-btn { background: none; border: none; cursor: pointer; padding: 0; color: var(--oc-muted, #94a3b8); } .oc-cmdk-esc-btn kbd { font-size: 11px; font-family: inherit; background: var(--oc-bg-soft, #f4f6fa); border: 1px solid var(--oc-border, #e2e8f0); border-radius: 4px; padding: 2px 6px; color: var(--oc-muted, #64748b); } .oc-cmdk-body { overflow-y: auto; padding: 8px 0 12px; flex: 1 1; } .oc-cmdk-group-label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--oc-muted, #94a3b8); padding: 10px 16px 4px; line-height: 1; } .oc-cmdk-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 8px 16px; color: var(--oc-ink, #15171c); font-size: 13.5px; transition: background .1s; } .oc-cmdk-row:hover, .oc-cmdk-row.is-highlighted { background: var(--oc-bg-soft, #f4f6fa); } .oc-cmdk-row-label { flex: 1 1; font-weight: 500; } .oc-cmdk-row-sub { font-size: 12px; color: var(--oc-muted, #64748b); } .oc-cmdk-empty { text-align: center; color: var(--oc-muted, #94a3b8); font-size: 13.5px; padding: 32px 16px; } /* ================================================================ Notifications Bell (oc-notif-*) ================================================================ */ .oc-notif-wrap { position: relative; display: inline-flex; } .oc-notif-bell-btn { position: relative; } .oc-notif-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; border-radius: 999px; background: var(--oc-brand, #c8101c); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; padding: 0 3px; border: 2px solid #fff; pointer-events: none; } /* legacy dot (kept for Topbar's own hasNotifications, now unused) */ .oc-notif-dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--oc-brand, #c8101c); border: 2px solid #fff; pointer-events: none; } .oc-notif-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 380px; background: #fff; border: 1px solid var(--oc-border, #e6e8ec); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.14); z-index: 1100; overflow: hidden; display: flex; flex-direction: column; } .oc-notif-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--oc-border, #e6e8ec); flex-shrink: 0; } .oc-notif-header-title { font-size: 13.5px; font-weight: 700; color: var(--oc-navy, #0f213a); } .oc-notif-mark-all { font-size: 12px; color: var(--oc-brand, #c8101c); background: none; border: none; cursor: pointer; font-weight: 600; padding: 0; } .oc-notif-mark-all:hover { text-decoration: underline; } .oc-notif-list { overflow-y: auto; max-height: 380px; display: flex; flex-direction: column; } .oc-notif-empty { text-align: center; color: var(--oc-muted, #94a3b8); font-size: 13px; padding: 28px 16px; } .oc-notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--oc-border, #f1f3f6); cursor: pointer; transition: background .12s; } .oc-notif-item:last-child { border-bottom: none; } .oc-notif-item:hover { background: var(--oc-bg-soft, #f4f6fa); } .oc-notif-item.is-unread { background: #fef8f8; } .oc-notif-item.is-unread:hover { background: #fde9e9; } .oc-notif-item-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: var(--oc-bg-soft, #f4f6fa); display: flex; align-items: center; justify-content: center; color: var(--oc-brand, #c8101c); } .oc-notif-item-body { flex: 1 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .oc-notif-item-title { font-size: 13px; font-weight: 600; color: var(--oc-navy, #0f213a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-notif-item-sub { font-size: 11.5px; color: var(--oc-muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-notif-item-time { font-size: 11px; color: var(--oc-muted, #94a3b8); flex-shrink: 0; margin-top: 2px; } /* ---- Form Sections (oc-formsec-*) ---- */ .oc-formsec-title { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--oc-text-muted, #64748b); white-space: nowrap; } .oc-formsec-icon { display: flex; align-items: center; color: var(--oc-brand, #c8101c); opacity: 0.75; } .oc-formsec-line { flex: 1 1; height: 1px; background: var(--oc-border, #e8eaf0); margin-left: 4px; } /* ---- Portal invite banner ---- */ .oc-formsec-banner { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: var(--oc-bg-soft, #f4f6fa); border: 1px solid var(--oc-border, #e8eaf0); border-left: 3px solid var(--oc-brand, #c8101c); border-radius: 10px; } .oc-formsec-banner-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 9px; background: var(--oc-brand, #c8101c); color: #fff; display: flex; align-items: center; justify-content: center; } .oc-formsec-banner-title { font-size: 13px; font-weight: 700; color: var(--oc-text, #1e293b); margin-bottom: 3px; } .oc-formsec-banner-text { font-size: 12.5px; color: var(--oc-text-muted, #64748b); line-height: 1.5; } /* ---------------- User menu (topbar) ---------------- */ .oc-usermenu { position: relative; } .oc-usermenu-trigger { display: flex; align-items: center; gap: 10px; padding: 5px 8px 5px 6px; border: 1px solid var(--oc-border); border-radius: 10px; background: var(--oc-surface, #fff); cursor: pointer; transition: var(--oc-transition); } .oc-usermenu-trigger:hover { background: var(--oc-bg, #f8fafc); } .oc-usermenu-avatar { width: 34px; height: 34px; border-radius: 9px; background: var(--oc-blue, #1d4ed8); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; letter-spacing: -.02em; flex-shrink: 0; } .oc-usermenu-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; } .oc-usermenu-name { font-size: 13.5px; font-weight: 700; color: var(--oc-navy, #15171c); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; } .oc-usermenu-role { font-size: 11.5px; color: var(--oc-text-muted, #64748b); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; } .oc-usermenu-trigger > svg { color: var(--oc-text-muted, #64748b); flex-shrink: 0; } @media (max-width: 720px) { .oc-usermenu-meta { display: none; } } .oc-usermenu-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 260px; background: var(--oc-surface, #fff); border: 1px solid var(--oc-border); border-radius: 14px; box-shadow: 0 18px 44px rgba(15,23,42,.16); overflow: hidden; } .oc-usermenu-head { padding: 16px; border-bottom: 1px solid var(--oc-border); background: var(--oc-bg, #f8fafc); } .oc-usermenu-head .nm { font-size: 14.5px; font-weight: 800; color: var(--oc-navy, #15171c); } .oc-usermenu-head .em { font-size: 12.5px; color: var(--oc-text-muted, #64748b); margin-top: 2px; word-break: break-all; } .oc-usermenu-head .bdg { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--oc-blue, #1d4ed8); background: var(--oc-blue-soft, #eff6ff); padding: 2px 10px; border-radius: 999px; } .oc-usermenu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 16px; border: 0; background: none; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--oc-text, #334155); text-align: left; transition: background .14s; } .oc-usermenu-item:hover { background: var(--oc-bg, #f1f5f9); } .oc-usermenu-item.is-danger { color: var(--oc-danger, #dc2626); } .oc-usermenu-item.is-danger:hover { background: #fef2f2; } .oc-usermenu-sep { height: 1px; background: var(--oc-border); margin: 4px 0; } /*!*****************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../shared/styles/storefront.css ***! \*****************************************************************************************************************************************************************************************************************************************************************************/ /* ============================================================ OraCommerce — Storefront styles Componentes públicos. Usam tokens de marca (--oc-brand-*) definidos por .oc-brand-granpel / .oc-brand-mudolon. ============================================================ */ .oc-store { background: #fff; color: var(--oc-brand-ink, #161616); min-height: 100vh; display: flex; flex-direction: column; } .oc-container { max-width: 1320px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); width: 100%; } /* ---------------- Public Header ---------------- */ .oc-pubheader { position: -webkit-sticky; position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--oc-brand-line, #ececec); transition: box-shadow var(--oc-transition); } .oc-pubheader.is-scrolled { box-shadow: 0 6px 24px rgba(0,0,0,0.06); } .oc-pubheader-inner { display: flex; align-items: center; gap: 28px; padding: 16px 0; } /* ---- Top bar (infos + contato + entrar) ---- */ .oc-pubtopbar { background: var(--oc-brand-deep, var(--oc-brand)); color: #fff; font-size: 11px; line-height: 1; } .oc-pubtopbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 28px; min-height: 0; padding: 0; } .oc-pubtopbar-info { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; } .oc-pubtopbar-info span { display: inline-flex; align-items: center; gap: 5px; opacity: 0.9; line-height: 1; } .oc-pubtopbar-actions { display: flex; align-items: center; gap: 14px; white-space: nowrap; } .oc-pubtopbar-actions a, .oc-pubtopbar-login { display: inline-flex; align-items: center; gap: 5px; color: #fff; background: none; border: 0; font-size: 11px; line-height: 1; padding: 0; cursor: pointer; } .oc-pubtopbar-actions a:hover, .oc-pubtopbar-login:hover { opacity: 0.85; } /* ---- Linha principal: logo + busca + ações ---- */ .oc-pubheader-main { background: #fff; } .oc-pubheader-search { flex: 1 1; display: flex; justify-content: center; min-width: 0; } .oc-storesearch-wrap { position: relative; width: 100%; max-width: 620px; } .oc-storesearch { display: flex; align-items: center; gap: 0; width: 100%; border: 1.5px solid var(--oc-brand-line, #d9dde3); border-radius: 999px; background: #fff; padding-left: 16px; overflow: hidden; } .oc-storesearch > svg { color: var(--oc-brand-muted); flex-shrink: 0; } .oc-storesearch-input { flex: 1 1; border: 0; outline: 0; padding: 11px 14px; font-size: 14px; color: var(--oc-brand-ink); background: transparent; min-width: 0; } .oc-storesearch-btn { border: 0; background: var(--oc-brand); color: #fff; padding: 11px 22px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; transition: var(--oc-transition); white-space: nowrap; } .oc-storesearch-btn:hover { background: var(--oc-brand-hover, var(--oc-brand-deep)); } /* ---- Autocomplete (sugestões) ---- */ .oc-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; background: #fff; border: 1px solid var(--oc-brand-line, #e2e2e2); border-radius: 14px; box-shadow: 0 18px 44px rgba(0,0,0,0.16); overflow: hidden; max-height: 70vh; overflow-y: auto; } .oc-suggest-empty { padding: 16px; font-size: 13.5px; color: var(--oc-brand-muted); text-align: center; } .oc-suggest-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 14px; border: 0; background: none; cursor: pointer; text-align: left; border-bottom: 1px solid var(--oc-brand-line, #f0f0f0); } .oc-suggest-item:hover { background: var(--oc-brand-soft, #fafafa); } .oc-suggest-thumb { flex-shrink: 0; width: 42px; height: 42px; border-radius: 8px; background: #f4f4f5; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--oc-brand-muted); } .oc-suggest-thumb img { width: 100%; height: 100%; object-fit: cover; } .oc-suggest-info { flex: 1 1; min-width: 0; display: flex; flex-direction: column; } .oc-suggest-name { font-size: 13.5px; font-weight: 600; color: var(--oc-brand-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-suggest-cat { font-size: 11.5px; color: var(--oc-brand-muted); } .oc-suggest-price { flex-shrink: 0; font-size: 13.5px; font-weight: 800; color: var(--oc-brand); } .oc-suggest-all { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 11px; border: 0; background: var(--oc-brand-soft, #fafafa); color: var(--oc-brand); font-size: 13px; font-weight: 700; cursor: pointer; } .oc-suggest-all:hover { background: var(--oc-brand); color: #fff; } /* ---- Ações do header (favoritos / orçamento) ---- */ .oc-header-actions { display: flex; align-items: center; gap: 22px; } .oc-header-act { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; color: var(--oc-brand-ink-2, #2a2a2a); font-size: 13px; font-weight: 600; } .oc-header-act:hover { color: var(--oc-brand); } .oc-header-act-ic { position: relative; display: inline-flex; } .oc-header-badge { position: absolute; top: -7px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--oc-brand); color: #fff; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; } /* ---- Linha de menus ---- */ .oc-pubnav-row { border-top: 1px solid var(--oc-brand-line, #ececec); background: #fff; } .oc-pubnav-row .oc-pubnav { justify-content: flex-start; flex: none; gap: 28px; padding: 4px 0; } .oc-pubbrand { display: flex; align-items: center; gap: 12px; } .oc-pubbrand-mark { width: 46px; height: 46px; border-radius: 13px; background: var(--oc-brand, #c8101c); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.12); } .oc-pubbrand-name { font-size: 21px; font-weight: 900; letter-spacing: 0.01em; color: var(--oc-brand-ink); line-height: 1.05; text-transform: uppercase; } .oc-pubbrand-sub { font-size: 11px; color: var(--oc-brand-muted); letter-spacing: 0.02em; } .oc-pubnav { display: flex; align-items: center; gap: 30px; flex: 1 1; justify-content: center; } .oc-pubnav a { font-size: 14.5px; font-weight: 500; color: var(--oc-brand-ink-2, #2a2a2a); padding: 8px 0; transition: color var(--oc-transition); border-bottom: 2px solid transparent; } .oc-pubnav a:hover, .oc-pubnav a.is-active { color: var(--oc-brand); border-bottom-color: var(--oc-brand); font-weight: 600; } .oc-pubcta { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; background: var(--oc-brand); color: #fff; border: none; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--oc-brand-shadow); } .oc-pubcta:hover { background: var(--oc-brand-hover); } .oc-pubcta-badge { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .oc-menu-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--oc-brand-line); border-radius: 8px; background: #fff; cursor: pointer; align-items: center; justify-content: center; } /* Mega-menu (dropdown ao passar o mouse) */ .oc-navitem { position: relative; display: flex; align-items: center; } .oc-navitem-top { display: inline-flex; align-items: center; gap: 4px; font-size: 14.5px; font-weight: 500; color: var(--oc-brand-ink-2, #2a2a2a); padding: 8px 0; border-bottom: 2px solid transparent; } .oc-navitem:hover .oc-navitem-top, .oc-navitem-top.is-active { color: var(--oc-brand); border-bottom-color: var(--oc-brand); font-weight: 600; } .oc-megamenu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); margin-top: 10px; background: #fff; border: 1px solid var(--oc-brand-line); border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,0.14); padding: 16px; z-index: 60; max-height: min(72vh, 600px); overflow-y: auto; overflow-x: hidden; opacity: 0; visibility: hidden; transition: opacity var(--oc-transition), transform var(--oc-transition); } .oc-navitem:hover .oc-megamenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* fecha o mega menu ao clicar numa opção (até trocar de rota / re-hover) */ .oc-megamenu:has(.oc-mm.is-closed) { opacity: 0; visibility: hidden; pointer-events: none; } /* ponte invisível (fora do overflow do painel) cobre o gap entre item e menu */ .oc-navitem::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 16px; } .oc-megamenu.is-cats { width: max(520px, 100%); } /* ---- Mega Menu profissional de categorias ---- */ .oc-megamenu.oc-mm-wrap { width: min(960px, 92vw); padding: 14px; } .oc-mm { display: flex; flex-direction: column; gap: 12px; } .oc-mm-search { position: -webkit-sticky; position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--oc-brand-line, #e2e2e2); border-radius: 10px; padding: 8px 12px; } .oc-mm-search input { flex: 1 1; border: 0; outline: 0; font-size: 13.5px; background: transparent; color: var(--oc-brand-ink); } .oc-mm-search > svg { color: var(--oc-brand-muted); } .oc-mm-search button { border: 0; background: none; color: var(--oc-brand-muted); cursor: pointer; display: flex; } .oc-mm-cols { display: grid; grid-gap: 4px 10px; gap: 4px 10px; align-items: start; } .oc-mm-cell { min-width: 0; } .oc-mm-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--oc-brand-ink); border-left: 3px solid transparent; transition: background .14s, color .14s, border-color .14s; } .oc-mm-item:hover { background: var(--oc-brand-soft, #faf6f6); color: var(--mm-accent, var(--oc-brand)); border-left-color: var(--mm-accent, var(--oc-brand)); } .oc-mm-item.is-destaque { font-weight: 800; } .oc-mm-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: var(--oc-brand-soft, #f4f1f1); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--mm-accent, var(--oc-brand)); } .oc-mm-ic img { width: 100%; height: 100%; object-fit: cover; } .oc-mm-emoji { font-size: 17px; line-height: 1; } .oc-mm-name { flex: 1 1; min-width: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-mm-name small { font-size: 11px; font-weight: 600; color: var(--oc-brand-muted); } .oc-mm-cell > .oc-mm-item > svg:last-child { color: var(--oc-brand-muted); } .oc-mm-sub { display: flex; flex-direction: column; gap: 1px; margin: 0 0 8px 44px; } .oc-mm-sub a { padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--oc-brand-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-mm-sub a:hover { background: var(--oc-brand-soft, #fafafa); color: var(--oc-brand); } .oc-mm-sub a.oc-mm-more { color: var(--oc-brand); font-weight: 700; } .oc-mm-empty { padding: 20px; text-align: center; color: var(--oc-brand-muted); font-size: 13.5px; } .oc-mm-feature { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-radius: 14px; background: var(--oc-brand); background-size: cover; background-position: center; color: #fff; } .oc-mm-feature strong { font-size: 16px; font-weight: 800; display: block; } .oc-mm-feature p { font-size: 13px; opacity: 0.92; margin: 4px 0 0; } .oc-megamenu-grid { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); grid-gap: 8px; gap: 8px; } .oc-megamenu-cat { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--oc-brand-ink); transition: background var(--oc-transition); } .oc-megamenu-cat:hover { background: var(--oc-brand-soft, #fafafa); color: var(--oc-brand); } .oc-megamenu-thumb { width: 38px; height: 38px; flex-shrink: 0; border-radius: 9px; overflow: hidden; background: var(--oc-brand-soft, #f3f3f3); display: flex; align-items: center; justify-content: center; color: var(--oc-brand); } .oc-megamenu-thumb img { width: 100%; height: 100%; object-fit: cover; } .oc-megamenu-list { display: flex; flex-direction: column; min-width: 200px; } .oc-megamenu-list a { padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--oc-brand-ink-2); white-space: nowrap; } .oc-megamenu-list a:hover { background: var(--oc-brand-soft, #fafafa); color: var(--oc-brand); } /* ---------------- Hero ---------------- */ .oc-hero { padding: 18px 0 0; } .oc-hero-panel { position: relative; border-radius: 28px; overflow: hidden; /* altura por viewport: hero + diferenciais + ofertas cabem na 1ª tela no desktop */ min-height: clamp(300px, 40vh, 460px); display: flex; align-items: center; padding: clamp(28px, 4vw, 56px); background: linear-gradient(150deg, var(--oc-brand) 0%, var(--oc-brand-deep, var(--oc-brand)) 100%); box-shadow: 0 24px 50px rgba(0,0,0,0.16); } /* Ofertas logo abaixo do hero (gap curto) p/ ambos visíveis sem scroll */ .oc-offers-section { padding-top: 16px; } /* imagem ocupa 100% do painel */ .oc-hero-bg { position: absolute; inset: 0; z-index: 0; } .oc-hero-bg img { width: 100%; height: 100%; object-fit: cover; } .oc-hero-bg > svg { position: absolute; inset: 0; margin: auto; color: rgba(255,255,255,0.9); } /* overlay p/ legibilidade do texto (esquerda escura → direita transparente) */ .oc-hero-panel::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(15,17,22,0.82) 0%, rgba(15,17,22,0.62) 34%, rgba(15,17,22,0.22) 60%, rgba(15,17,22,0) 80%); } .oc-hero-copy { position: relative; z-index: 2; max-width: 560px; } .oc-hero-copy h1 { font-size: clamp(34px, 4vw, 56px); font-weight: 900; line-height: 1.06; letter-spacing: -0.03em; margin: 0 0 20px; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.25); } .oc-hero-copy h1 .accent { color: var(--oc-brand); } .oc-hero-copy p { max-width: 480px; font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,0.92); margin: 0 0 30px; font-weight: 500; } /* Carrossel do hero */ .oc-hero-carousel { position: absolute; inset: 0; } .oc-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; } .oc-hero-slide.is-active { opacity: 1; pointer-events: auto; } .oc-hero-slide-link, .oc-hero-slide-img { display: block; width: 100%; height: 100%; } .oc-hero-slide-img { object-fit: cover; } .oc-hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,0.85); color: var(--oc-brand-ink, #161616); font-size: 24px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.18); transition: background var(--oc-transition); } .oc-hero-arrow:hover { background: #fff; } .oc-hero-arrow-prev { left: 12px; } .oc-hero-arrow-next { right: 12px; } .oc-hero-dots { position: absolute; bottom: 14px; left: 0; right: 0; z-index: 3; display: flex; gap: 8px; justify-content: center; } .oc-hero-dot { width: 9px; height: 9px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,0.55); transition: all var(--oc-transition); padding: 0; } .oc-hero-dot.is-active { background: #fff; width: 26px; border-radius: 999px; } /* ---------------- Features strip ---------------- */ .oc-feats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 18px; gap: 18px; background: #fff; border: 1px solid var(--oc-brand-line); border-radius: 18px; padding: 24px 28px; margin: -34px clamp(8px, 2vw, 24px) 0; box-shadow: 0 18px 44px rgba(0,0,0,0.08); } .oc-feat { display: flex; align-items: center; gap: 14px; } .oc-feat-icon { width: 46px; height: 46px; background: var(--oc-brand); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; box-shadow: var(--oc-brand-shadow); } .oc-feat-title { font-size: 14px; font-weight: 700; color: var(--oc-brand-ink); } .oc-feat-sub { font-size: 12.5px; color: var(--oc-brand-muted); } /* ---------------- Section ---------------- */ .oc-section { padding: 32px 0; } .oc-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; } .oc-section-head h2 { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; margin: 0; } .oc-section-head p { font-size: 15px; color: var(--oc-brand-muted); margin: 6px 0 0; } /* ---------------- Product grid + card ---------------- */ .oc-product-grid { display: grid; grid-template-columns: repeat(var(--oc-product-cols, 5), 1fr); grid-gap: 18px; gap: 18px; align-items: stretch; } .oc-vistos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 16px; gap: 16px; align-items: stretch; } /* ---- Preview de fotos no hover do card ---- */ .oc-card-wrap { position: relative; } .oc-cardpop { position: absolute; top: -10px; left: -10px; right: -10px; z-index: 40; background: #fff; border: 1px solid var(--oc-brand-line, #e6e6e6); border-radius: 14px; box-shadow: 0 24px 50px rgba(0,0,0,.25); padding: 8px; transform-origin: top center; animation: oc-pop-in .14s ease; } @keyframes oc-pop-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } } .oc-cardpop-main { position: relative; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; background: #f4f4f5; cursor: pointer; } .oc-cardpop-main img { width: 100%; height: 100%; object-fit: cover; display: block; } .oc-cardpop-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); box-shadow: 0 3px 10px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--oc-brand-ink, #161616); } .oc-cardpop-nav.prev { left: 8px; } .oc-cardpop-nav.next { right: 8px; } .oc-cardpop-count { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .oc-cardpop-thumbs { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: thin; } .oc-cardpop-thumb { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: #f4f4f5; cursor: pointer; padding: 0; } .oc-cardpop-thumb.is-active { border-color: var(--oc-brand); } .oc-cardpop-thumb.is-pinned { box-shadow: 0 0 0 2px var(--oc-brand); } .oc-cardpop-thumb img { width: 100%; height: 100%; object-fit: cover; } .oc-cardpop-name { font-size: 12.5px; font-weight: 700; color: var(--oc-brand-ink, #161616); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ Page Builder (página Empresa) — blocos ============================================================ */ .oc-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .oc-reveal.is-in { opacity: 1; transform: none; } .oc-pb-h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 24px; color: var(--oc-brand-ink); } .oc-pb-text { line-height: 1.75; color: var(--oc-brand-ink-2, #333); font-size: 15.5px; } .oc-pb-text p { margin: 0 0 14px; } .oc-pb-btn, .oc-pb-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: 999px; background: var(--oc-brand); color: #fff; font-size: 15px; font-weight: 700; box-shadow: var(--oc-brand-shadow); } .oc-pb-btn:hover, .oc-pb-cta-btn:hover { background: var(--oc-brand-hover, var(--oc-brand-deep)); } /* hero */ .oc-pb-hero { position: relative; min-height: 440px; display: flex; align-items: center; background-size: cover; background-position: center; color: #fff; overflow: hidden; } .oc-pb-hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .oc-pb-hero-in { position: relative; padding: 60px 0; max-width: 720px; } .oc-pb-hero-in h1 { font-size: clamp(30px, 4.5vw, 56px); font-weight: 900; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 18px; } .oc-pb-hero-in p { font-size: clamp(15px, 1.6vw, 19px); opacity: 0.95; margin: 0 0 26px; line-height: 1.55; } /* imagem */ .oc-pb-fig { margin: 0; } .oc-pb-fig img { width: 100%; border-radius: 18px; display: block; } .oc-pb-fig figcaption { text-align: center; font-size: 13.5px; color: var(--oc-brand-muted); margin-top: 10px; } /* galeria / estrutura */ .oc-pb-gal { display: grid; grid-gap: 12px; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .oc-pb-gal.carrossel { grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; } .oc-pb-gal.mosaico .oc-pb-gal-item:nth-child(4n+1) { grid-column: span 2; } .oc-pb-gal-item { position: relative; border: 0; padding: 0; cursor: pointer; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; background: var(--oc-brand-soft, #f4f4f5); scroll-snap-align: start; } .oc-pb-gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .oc-pb-gal-item:hover img { transform: scale(1.06); } .oc-pb-gal-item span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 10px; background: linear-gradient(transparent, rgba(0,0,0,.6)); color: #fff; font-size: 13px; font-weight: 600; text-align: left; } /* video */ .oc-pb-video { position: relative; aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; background: #000; } .oc-pb-video iframe, .oc-pb-video video { width: 100%; height: 100%; border: 0; display: block; } /* Hero (page builder) com rotação de imagens de fundo */ .oc-pb-hero-in { position: relative; z-index: 2; } .oc-pb-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .oc-pb-hero-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; } .oc-pb-hero-img.is-active { opacity: 1; } .oc-pb-hero-bg .oc-pb-hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .oc-pb-hero-ov { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .oc-pb-hero-dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3; } /* Carrossel de slides (imagem/galeria/estrutura) */ .oc-pb-slides { position: relative; width: 100%; border-radius: 18px; overflow: hidden; background: var(--oc-brand-soft, #f4f4f5); box-shadow: 0 14px 40px rgba(0,0,0,0.10); } .oc-pb-slide { position: absolute; inset: 0; border: 0; padding: 0; cursor: zoom-in; opacity: 0; transition: opacity .8s ease; background: none; } .oc-pb-slide.is-active { opacity: 1; } .oc-pb-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .oc-pb-slide-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 18px 14px; background: linear-gradient(transparent, rgba(0,0,0,.62)); color: #fff; font-size: 14px; font-weight: 600; text-align: left; } .oc-pb-slides-cap { text-align: center; font-size: 13.5px; color: var(--oc-brand-muted); margin-top: 10px; } .oc-pb-cardots { display: flex; gap: 8px; justify-content: center; margin-top: 14px; } .oc-pb-slides .oc-pb-cardots { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; z-index: 3; } .oc-pb-cardot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.6); box-shadow: 0 1px 4px rgba(0,0,0,.3); transition: all var(--oc-transition); } .oc-pb-cardot.on { background: #fff; width: 26px; border-radius: 999px; } /* Playlist de vídeos */ .oc-pb-vplaylist { display: flex; flex-direction: column; gap: 16px; } .oc-pb-vsubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 12px; gap: 12px; } .oc-pb-vsub { display: flex; align-items: center; gap: 11px; padding: 8px; border: 1px solid var(--oc-brand-line, #ececec); border-radius: 12px; background: #fff; cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s, transform .15s; } .oc-pb-vsub:hover { border-color: var(--oc-brand); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.10); } .oc-pb-vsub.on { border-color: var(--oc-brand); background: var(--oc-brand-soft, #fceaea); } .oc-pb-vsub-thumb { position: relative; flex-shrink: 0; width: 72px; height: 48px; border-radius: 8px; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; color: #fff; } .oc-pb-vsub-thumb img { width: 100%; height: 100%; object-fit: cover; } .oc-pb-vsub-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.28); color: #fff; } .oc-pb-vsub-t { font-size: 13.5px; font-weight: 700; color: var(--oc-brand-ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* numeros */ .oc-pb-nums-wrap { background: linear-gradient(135deg, var(--oc-brand) 0%, var(--oc-brand-deep, var(--oc-brand)) 100%); color: #fff; } .oc-pb-nums-wrap .oc-pb-h2 { color: #fff; } .oc-pb-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); grid-gap: 24px; gap: 24px; } .oc-pb-num { text-align: center; } .oc-pb-num-ic { width: 54px; height: 54px; border-radius: 14px; background: rgba(255,255,255,.16); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; } .oc-pb-num-v { display: block; font-size: 38px; font-weight: 900; line-height: 1; } .oc-pb-num-l { display: block; font-size: 14px; opacity: 0.9; margin-top: 6px; } /* timeline */ .oc-pb-timeline { position: relative; padding-left: 28px; } .oc-pb-timeline::before { content: ''; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--oc-brand-line, #e6e6e6); } .oc-pb-tl-item { position: relative; margin-bottom: 22px; } .oc-pb-tl-dot { position: absolute; left: -28px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--oc-brand); box-shadow: 0 0 0 4px var(--oc-brand-soft, #faecec); } .oc-pb-tl-card { background: #fff; border: 1px solid var(--oc-brand-line, #ececec); border-radius: 14px; padding: 16px 18px; } .oc-pb-tl-ano { font-size: 13px; font-weight: 800; color: var(--oc-brand); } .oc-pb-tl-card h4 { margin: 4px 0 6px; font-size: 17px; font-weight: 700; } .oc-pb-tl-card p { margin: 0; color: var(--oc-brand-ink-2, #444); line-height: 1.6; font-size: 14.5px; } .oc-pb-tl-card img { margin-top: 12px; border-radius: 10px; max-width: 100%; } /* mvv */ .oc-pb-mvv { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 20px; gap: 20px; } .oc-pb-mvv-card { background: #fff; border: 1px solid var(--oc-brand-line, #ececec); border-radius: 16px; padding: 26px 22px; text-align: center; } .oc-pb-mvv-ic { width: 60px; height: 60px; border-radius: 16px; background: var(--oc-brand-soft, #faecec); color: var(--oc-brand); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; } .oc-pb-mvv-img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 14px; } .oc-pb-mvv-card h4 { margin: 0 0 8px; font-size: 19px; font-weight: 800; } .oc-pb-mvv-card p { margin: 0; color: var(--oc-brand-ink-2, #444); line-height: 1.65; font-size: 14.5px; } /* depoimentos */ .oc-pb-deps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 20px; gap: 20px; } .oc-pb-dep { background: #fff; border: 1px solid var(--oc-brand-line, #ececec); border-radius: 16px; padding: 24px; } .oc-pb-dep-txt { font-size: 15.5px; line-height: 1.7; color: var(--oc-brand-ink-2, #333); margin: 0 0 18px; font-style: italic; } .oc-pb-dep-aut { display: flex; align-items: center; gap: 12px; } .oc-pb-dep-aut img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; } .oc-pb-dep-aut strong { display: block; font-size: 14.5px; } .oc-pb-dep-aut span { font-size: 12.5px; color: var(--oc-brand-muted); } /* equipe */ .oc-pb-equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-gap: 20px; gap: 20px; } .oc-pb-membro { text-align: center; } .oc-pb-membro-foto { aspect-ratio: 1/1; border-radius: 16px; overflow: hidden; background: var(--oc-brand-soft, #f4f4f5); display: flex; align-items: center; justify-content: center; color: var(--oc-brand-muted); margin-bottom: 10px; } .oc-pb-membro-foto img { width: 100%; height: 100%; object-fit: cover; } .oc-pb-membro strong { display: block; font-size: 15px; } .oc-pb-membro span { font-size: 13px; color: var(--oc-brand-muted); } /* logos clientes/parceiros */ .oc-pb-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-gap: 14px; gap: 14px; align-items: center; } .oc-pb-logo { display: flex; align-items: center; justify-content: center; padding: 18px; background: #fff; border: 1px solid var(--oc-brand-line, #ececec); border-radius: 12px; height: 90px; } .oc-pb-logo img { max-width: 100%; max-height: 54px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; } .oc-pb-logo:hover img { filter: none; opacity: 1; } /* faq */ .oc-pb-faq-wrap { max-width: 820px; } .oc-pb-faq-item { border: 1px solid var(--oc-brand-line, #ececec); border-radius: 12px; margin-bottom: 10px; overflow: hidden; } .oc-pb-faq-item button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; background: #fff; border: 0; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--oc-brand-ink); text-align: left; } .oc-pb-faq-item.is-open button { color: var(--oc-brand); } .oc-pb-faq-item button svg { transition: transform .2s; flex-shrink: 0; } .oc-pb-faq-item.is-open button svg { transform: rotate(180deg); } .oc-pb-faq-ans { padding: 0 18px 16px; color: var(--oc-brand-ink-2, #444); line-height: 1.65; font-size: 14.5px; } /* downloads */ .oc-pb-dls { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-gap: 12px; gap: 12px; } .oc-pb-dl { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--oc-brand-line, #ececec); border-radius: 12px; color: var(--oc-brand-ink); font-weight: 600; font-size: 14px; background: #fff; } .oc-pb-dl:hover { border-color: var(--oc-brand); color: var(--oc-brand); } .oc-pb-dl span { flex: 1 1; } /* mapa */ .oc-pb-mapa { aspect-ratio: 16/7; border-radius: 18px; overflow: hidden; border: 1px solid var(--oc-brand-line, #ececec); } .oc-pb-mapa iframe { width: 100%; height: 100%; border: 0; } /* cta */ .oc-pb-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 40px; border-radius: 22px; background: var(--oc-brand-soft, #faecec); background-size: cover; background-position: center; } .oc-pb-cta.has-img { color: #fff; } .oc-pb-cta h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; margin: 0; } .oc-pb-cta p { margin: 8px 0 0; opacity: 0.92; } /* lightbox */ .oc-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(8,12,20,.9); display: flex; align-items: center; justify-content: center; } .oc-lightbox img { max-width: 88vw; max-height: 86vh; border-radius: 10px; } .oc-lightbox-x { position: absolute; top: 20px; right: 24px; background: none; border: 0; color: #fff; cursor: pointer; } .oc-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; } .oc-lightbox-nav.prev { left: 18px; } .oc-lightbox-nav.next { right: 18px; } @media (max-width: 760px) { .oc-pb-cta { flex-direction: column; align-items: flex-start; } .oc-pb-gal.mosaico .oc-pb-gal-item:nth-child(4n+1) { grid-column: auto; } } /* ============================================================ Portal do Cliente (redesign GRANPEL 123) ============================================================ */ .oc-pt { --pt-ink:#15171c; --pt-body:#3b4150; --pt-muted:#737a88; --pt-faint:#9aa0ac; --pt-line:#e9eaee; --pt-line2:#f0f1f4; --pt-card:#fff; --pt-rad:14px; --pt-sh-sm:0 1px 2px rgba(20,23,28,.05),0 1px 1px rgba(20,23,28,.04); --pt-sh-md:0 6px 20px -8px rgba(20,23,28,.14),0 2px 6px -2px rgba(20,23,28,.06); --pt-blue:#1f5fe0; --pt-blue-soft:#e8eefd; --pt-amber:#e08a00; --pt-amber-soft:#fbefd4; --pt-amber-ink:#9a5e00; --pt-green:#19975a; --pt-green-soft:#e1f4ea; --pt-green-ink:#0f6b40; background:#f5f6f8; padding:30px 0 50px; } .oc-pt-in { display:grid; grid-template-columns:268px 1fr; grid-gap:28px; gap:28px; align-items:start; } /* rail */ .oc-pt-rail { position:-webkit-sticky; position:sticky; top:18px; display:flex; flex-direction:column; gap:16px; } .oc-pt-usercard { background:var(--pt-card); border:1px solid var(--pt-line); border-radius:var(--pt-rad); padding:16px; display:flex; align-items:center; gap:13px; box-shadow:var(--pt-sh-sm); } .oc-pt-avatar { width:48px; height:48px; border-radius:50%; background:var(--oc-brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:19px; flex-shrink:0; } .oc-pt-userinfo b { display:block; color:var(--pt-ink); font-size:14.5px; font-weight:800; line-height:1.25; } .oc-pt-userinfo small { display:block; color:var(--pt-muted); font-size:12.5px; margin-top:3px; font-weight:600; } .oc-pt-railmenu { background:var(--pt-card); border:1px solid var(--pt-line); border-radius:var(--pt-rad); padding:8px; box-shadow:var(--pt-sh-sm); } .oc-pt-railitem { width:100%; display:flex; align-items:center; gap:12px; padding:11px 13px; border:0; background:none; border-radius:10px; color:var(--pt-body); font-weight:700; font-size:14.5px; text-align:left; cursor:pointer; transition:background .14s,color .14s; } .oc-pt-railitem .oc-pt-ic { color:var(--pt-faint); display:flex; transition:color .14s; flex-shrink:0; } .oc-pt-railitem:hover { background:var(--pt-line2); color:var(--pt-ink); } .oc-pt-railitem:hover .oc-pt-ic { color:var(--pt-body); } .oc-pt-railitem.on { background:var(--oc-brand); color:#fff; box-shadow:0 6px 16px -6px rgba(209,26,34,.55); } .oc-pt-railitem.on .oc-pt-ic { color:#fff; } .oc-pt-rcount { margin-left:auto; font-size:12px; font-weight:800; background:var(--pt-line2); color:var(--pt-muted); border-radius:20px; padding:2px 9px; } .oc-pt-railitem.on .oc-pt-rcount { background:rgba(255,255,255,.22); color:#fff; } .oc-pt-railsep { height:1px; background:var(--pt-line); margin:8px 6px; } .oc-pt-railitem.danger { color:var(--oc-brand); } .oc-pt-railitem.danger .oc-pt-ic { color:var(--oc-brand); } .oc-pt-railitem.danger:hover { background:var(--oc-brand-soft,#fceaea); } /* content */ .oc-pt-content { min-width:0; } .oc-pt-head { margin-bottom:22px; } .oc-pt-head h1 { font-size:30px; line-height:1.05; font-weight:800; letter-spacing:-.02em; color:var(--pt-ink); margin:0; } .oc-pt-head p { margin:7px 0 0; color:var(--pt-muted); font-size:14.5px; font-weight:600; } .oc-pt-sectitle { font-size:18px; font-weight:800; color:var(--pt-ink); margin:0 0 14px; display:flex; align-items:center; gap:10px; letter-spacing:-.01em; } .oc-pt-sectitle .all { margin-left:auto; font-size:13.5px; font-weight:800; color:var(--oc-brand); display:inline-flex; align-items:center; gap:4px; cursor:pointer; } .oc-pt-block { margin-bottom:34px; } /* stats */ .oc-pt-stats { display:grid; grid-template-columns:repeat(4,1fr); grid-gap:16px; gap:16px; } .oc-pt-stat { background:var(--pt-card); border:1px solid var(--pt-line); border-radius:var(--pt-rad); padding:20px; box-shadow:var(--pt-sh-sm); position:relative; overflow:hidden; transition:transform .16s,box-shadow .16s; } .oc-pt-stat:hover { transform:translateY(-2px); box-shadow:var(--pt-sh-md); } .oc-pt-statbar { position:absolute; left:0; top:0; width:4px; height:100%; } .oc-pt-static { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; } .oc-pt-statval { font-size:38px; font-weight:900; color:var(--pt-ink); letter-spacing:-.04em; line-height:1; margin:16px 0 4px; } .oc-pt-statlbl { font-size:14px; font-weight:800; color:var(--pt-ink); } .oc-pt-stathint { font-size:12.5px; color:var(--pt-muted); font-weight:600; margin-top:2px; } .oc-pt-stat.tone-red .oc-pt-static { background:var(--oc-brand-soft,#fceaea); color:var(--oc-brand); } .oc-pt-stat.tone-red .oc-pt-statbar { background:var(--oc-brand); } .oc-pt-stat.tone-amber .oc-pt-static { background:var(--pt-amber-soft); color:var(--pt-amber-ink); } .oc-pt-stat.tone-amber .oc-pt-statbar { background:var(--pt-amber); } .oc-pt-stat.tone-blue .oc-pt-static { background:var(--pt-blue-soft); color:var(--pt-blue); } .oc-pt-stat.tone-blue .oc-pt-statbar { background:var(--pt-blue); } .oc-pt-stat.tone-green .oc-pt-static { background:var(--pt-green-soft); color:var(--pt-green-ink); } .oc-pt-stat.tone-green .oc-pt-statbar { background:var(--pt-green); } /* last quote */ .oc-pt-lastquote { background:var(--pt-card); border:1px solid var(--pt-line); border-radius:var(--pt-rad); padding:22px 24px; box-shadow:var(--pt-sh-sm); display:flex; align-items:center; gap:20px; } .oc-pt-lq-ic { width:52px; height:52px; border-radius:14px; background:var(--oc-brand-soft,#fceaea); color:var(--oc-brand); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .oc-pt-lq-body { flex:1 1; min-width:0; } .oc-pt-lq-kicker { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--pt-muted); } .oc-pt-lq-id { font-size:20px; font-weight:900; color:var(--pt-ink); margin:3px 0 2px; } .oc-pt-lq-meta { font-size:13.5px; color:var(--pt-muted); font-weight:600; } .oc-pt-lq-cta { display:inline-flex; align-items:center; gap:7px; color:var(--oc-brand); font-weight:800; font-size:14.5px; white-space:nowrap; padding:11px 16px; border-radius:10px; border:1.5px solid var(--oc-brand-line,#f4d4d4); background:#fff; cursor:pointer; transition:.15s; } .oc-pt-lq-cta:hover { background:var(--oc-brand); color:#fff; border-color:var(--oc-brand); } /* quick actions */ .oc-pt-quick { display:grid; grid-template-columns:repeat(3,1fr); grid-gap:16px; gap:16px; } .oc-pt-qa { display:flex; align-items:center; gap:14px; background:var(--pt-card); border:1px solid var(--pt-line); border-radius:var(--pt-rad); padding:18px; box-shadow:var(--pt-sh-sm); text-align:left; cursor:pointer; transition:transform .16s,box-shadow .16s,border-color .16s; } .oc-pt-qa:hover { transform:translateY(-2px); box-shadow:var(--pt-sh-md); border-color:var(--oc-brand-line,#f4d4d4); } .oc-pt-qa-ic { width:44px; height:44px; border-radius:12px; background:var(--oc-brand-soft,#fceaea); color:var(--oc-brand); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .oc-pt-qa b { display:block; color:var(--pt-ink); font-size:15px; font-weight:800; } .oc-pt-qa small { display:block; color:var(--pt-muted); font-size:12.5px; font-weight:600; margin-top:2px; } .oc-pt-qa-go { margin-left:auto; color:var(--pt-faint); display:flex; } .oc-pt-qa:hover .oc-pt-qa-go { color:var(--oc-brand); } /* notifications */ .oc-pt-notifs { background:var(--pt-card); border:1px solid var(--pt-line); border-radius:var(--pt-rad); padding:18px 20px; box-shadow:var(--pt-sh-sm); } .oc-pt-notiflist { list-style:none; margin:0; padding:0; } .oc-pt-notiflist li { padding:10px 12px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--pt-body); display:flex; justify-content:space-between; gap:12px; cursor:pointer; } .oc-pt-notiflist li:hover { background:var(--pt-line2); } .oc-pt-notiflist li.unread { background:var(--oc-brand-soft,#fceaea); font-weight:700; } .oc-pt-notiflist li small { color:var(--pt-muted); white-space:nowrap; font-weight:600; } /* quotes list */ .oc-pt-qlist { display:flex; flex-direction:column; gap:13px; } .oc-pt-qrow { background:var(--pt-card); border:1px solid var(--pt-line); border-radius:var(--pt-rad); padding:18px 20px; box-shadow:var(--pt-sh-sm); display:flex; align-items:center; gap:18px; cursor:pointer; text-align:left; transition:transform .15s,box-shadow .15s,border-color .15s; } .oc-pt-qrow:hover { transform:translateY(-2px); box-shadow:var(--pt-sh-md); border-color:var(--oc-brand-line,#f4d4d4); } .oc-pt-qrow-ic { width:46px; height:46px; border-radius:12px; background:var(--oc-brand-soft,#fceaea); color:var(--oc-brand); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .oc-pt-qrow-body { flex:1 1; min-width:0; } .oc-pt-qrow-id { font-size:16px; font-weight:900; color:var(--pt-ink); } .oc-pt-qrow-meta { font-size:13px; color:var(--pt-muted); font-weight:600; margin-top:3px; } .oc-pt-qrow-go { color:var(--pt-faint); display:flex; } .oc-pt-qrow:hover .oc-pt-qrow-go { color:var(--oc-brand); } /* badge */ .oc-pt-badge { display:inline-flex; align-items:center; gap:7px; font-weight:800; font-size:12.5px; border-radius:30px; padding:6px 13px; white-space:nowrap; } .oc-pt-dot { width:7px; height:7px; border-radius:50%; } /* detail */ .oc-pt-back { border:0; background:none; color:var(--oc-brand); font-weight:800; font-size:14px; margin-bottom:18px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; } .oc-pt-detail-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .oc-pt-detail-head h1 { font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--pt-ink); margin:0; } .oc-pt-detail-sub { font-size:13.5px; color:var(--pt-muted); font-weight:600; margin:8px 0 26px; } .oc-pt-itemrow { background:var(--pt-card); border:1px solid var(--pt-line); border-radius:13px; padding:16px 18px; display:flex; align-items:center; gap:14px; margin-bottom:10px; box-shadow:var(--pt-sh-sm); } .oc-pt-itemrow-ic { width:38px; height:38px; border-radius:10px; background:var(--pt-line2); color:var(--pt-muted); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .oc-pt-itemrow b { flex:1 1; color:var(--pt-ink); font-size:14.5px; font-weight:700; } .oc-pt-qty { font-weight:800; font-size:13px; color:var(--pt-body); background:var(--pt-line2); border-radius:8px; padding:5px 11px; white-space:nowrap; } .oc-pt-obsbox { background:var(--oc-brand-soft,#fceaea); border:1px solid var(--oc-brand-line,#f4d4d4); border-radius:13px; padding:15px 18px; color:var(--pt-body); font-size:14px; font-weight:600; } .oc-pt-msgs { display:flex; flex-direction:column; gap:8px; } .oc-pt-msg { background:var(--pt-line2); border-radius:12px; padding:11px 14px; max-width:80%; } .oc-pt-msg.mine { align-self:flex-end; background:var(--pt-blue-soft); } .oc-pt-msg p { margin:0; font-size:14px; font-weight:600; color:var(--pt-body); } .oc-pt-msg small { color:var(--pt-muted); font-size:11.5px; font-weight:600; } .oc-pt-timeline { position:relative; } .oc-pt-tl { position:relative; padding:0 0 22px 28px; } .oc-pt-tl::before { content:""; position:absolute; left:6px; top:16px; bottom:-4px; width:2px; background:var(--pt-line); } .oc-pt-tl:last-child::before { display:none; } .oc-pt-tl-dot { position:absolute; left:0; top:3px; width:14px; height:14px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px var(--pt-line); } .oc-pt-tl b { color:var(--pt-ink); font-size:14.5px; font-weight:800; } .oc-pt-tl p { margin:3px 0 0; color:var(--pt-body); font-size:13.5px; font-weight:600; } .oc-pt-tl small { display:block; color:var(--pt-faint); font-size:12.5px; font-weight:600; margin-top:3px; } /* product grid */ .oc-pt-pgrid { display:grid; grid-template-columns:repeat(6,1fr); grid-gap:16px; gap:16px; } .oc-pt-pcard { background:var(--pt-card); border:1px solid var(--pt-line); border-radius:var(--pt-rad); overflow:hidden; box-shadow:var(--pt-sh-sm); display:flex; flex-direction:column; position:relative; transition:transform .16s,box-shadow .16s,border-color .16s; } .oc-pt-pcard:hover { transform:translateY(-3px); box-shadow:var(--pt-sh-md); border-color:var(--oc-brand-line,#f4d4d4); } .oc-pt-pfav { position:absolute; top:9px; right:9px; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; color:var(--pt-faint); box-shadow:var(--pt-sh-sm); cursor:pointer; border:0; z-index:2; transition:.15s; } .oc-pt-pfav:hover, .oc-pt-pfav.on { color:var(--oc-brand); } .oc-pt-pfav.on svg { fill:var(--oc-brand); } .oc-pt-pthumb { aspect-ratio:1; background:#eff0f2; display:flex; align-items:center; justify-content:center; color:#9aa0ac; overflow:hidden; } .oc-pt-pthumb img { width:100%; height:100%; object-fit:cover; } .oc-pt-pbody { padding:13px 14px 15px; display:flex; flex-direction:column; gap:8px; flex:1 1; } .oc-pt-pname { font-size:13.5px; font-weight:700; color:var(--pt-ink); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; } .oc-pt-pprice { font-size:17px; font-weight:900; color:var(--oc-brand); letter-spacing:-.02em; margin-top:auto; } .oc-pt-pprice.zero { color:var(--pt-muted); font-weight:700; font-size:14px; } /* empty */ .oc-pt-empty { background:var(--pt-card); border:1px dashed var(--pt-line); border-radius:var(--pt-rad); padding:48px 24px; text-align:center; color:var(--pt-muted); } .oc-pt-empty-ic { width:56px; height:56px; border-radius:16px; background:var(--pt-line2); color:var(--pt-faint); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; } .oc-pt-empty b { display:block; color:var(--pt-ink); font-size:16px; font-weight:800; margin-bottom:4px; } .oc-pt-empty span { font-size:14px; } /* forms */ .oc-pt-formcard { background:var(--pt-card); border:1px solid var(--pt-line); border-radius:var(--pt-rad); padding:26px; box-shadow:var(--pt-sh-sm); max-width:560px; } .oc-pt-field { margin-bottom:18px; } .oc-pt-field label { display:block; font-size:13px; font-weight:800; color:var(--pt-ink); margin-bottom:7px; } .oc-pt-field-row { display:grid; grid-template-columns:1fr 1fr; grid-gap:16px; gap:16px; } .oc-pt-input { width:100%; height:46px; border:1.5px solid var(--pt-line); border-radius:10px; padding:0 14px; font-size:14.5px; color:var(--pt-ink); background:#fff; outline:none; font-family:inherit; transition:border-color .15s,box-shadow .15s; } .oc-pt-input:focus { border-color:var(--oc-brand); box-shadow:0 0 0 3px var(--oc-brand-soft,#fceaea); } .oc-pt-input:disabled { background:var(--pt-line2); color:var(--pt-muted); } .oc-pt-help { font-size:12px; color:var(--pt-muted); font-weight:600; margin-top:6px; } .oc-pt-btn { height:48px; border-radius:11px; font-weight:800; font-size:15px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 22px; border:0; cursor:pointer; transition:.15s; } .oc-pt-btn-primary { background:var(--oc-brand); color:#fff; width:100%; } .oc-pt-btn-primary:hover { background:var(--oc-brand-hover,var(--oc-brand-deep)); } .oc-pt-btn:disabled { opacity:.6; cursor:not-allowed; } /* auth (login / troca de senha) */ .oc-pt-authwrap { display:flex; justify-content:center; } .oc-pt-authcard { width:100%; max-width:440px; background:var(--pt-card); border:1px solid var(--pt-line); border-radius:18px; padding:34px; box-shadow:var(--pt-sh-md); } .oc-pt-authcard h1 { font-size:27px; font-weight:800; letter-spacing:-.02em; color:var(--pt-ink); margin:0 0 6px; } .oc-pt-authsub { color:var(--pt-muted); font-size:14px; font-weight:600; margin:0 0 18px; } .oc-pt-authcard form { display:block; } .oc-pt-authtabs { display:flex; gap:6px; margin:8px 0 18px; background:var(--pt-line2); padding:4px; border-radius:11px; } .oc-pt-authtabs button { flex:1 1; border:0; background:none; padding:10px; border-radius:8px; font-size:13.5px; font-weight:800; color:var(--pt-muted); cursor:pointer; transition:.15s; } .oc-pt-authtabs button.on { background:#fff; color:var(--oc-brand); box-shadow:var(--pt-sh-sm); } .oc-pt-authfoot { margin-top:16px; font-size:12.5px; color:var(--pt-muted); font-weight:600; line-height:1.5; text-align:center; } .oc-pt-link { color:var(--oc-brand); font-weight:800; background:none; border:0; padding:0; cursor:pointer; font-size:inherit; } /* fade-in */ @keyframes oc-pt-fade-up { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } .oc-pt-fade { animation:oc-pt-fade-up .32s cubic-bezier(.22,1,.36,1) both; } /* coração de favorito nos cards (storefront geral) */ .oc-fav-btn { position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); box-shadow: 0 3px 10px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--oc-brand-muted); transition: color .15s, transform .15s; } .oc-fav-btn:hover { transform: scale(1.1); color: var(--oc-brand); } .oc-fav-btn.is-fav { color: var(--oc-brand); } @media (max-width:1080px){ .oc-pt-stats { grid-template-columns:repeat(2,1fr); } .oc-pt-pgrid { grid-template-columns:repeat(4,1fr); } .oc-pt-quick { grid-template-columns:1fr; } } @media (max-width:820px){ .oc-pt-in { grid-template-columns:1fr; } .oc-pt-rail { position:static; } .oc-pt-railmenu { display:flex; flex-wrap:wrap; gap:4px; } .oc-pt-railitem { width:auto; flex:1 1 auto; } } @media (max-width:560px){ .oc-pt-stats { grid-template-columns:1fr 1fr; } .oc-pt-pgrid { grid-template-columns:1fr 1fr; } .oc-pt-field-row { grid-template-columns:1fr; } .oc-pt-lastquote { flex-wrap:wrap; } } .oc-product { height: 100%; background: #fff; border: 1px solid var(--oc-brand-line); border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform var(--oc-transition), box-shadow var(--oc-transition); display: flex; flex-direction: column; } .oc-product:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.08); } .oc-product-thumb { aspect-ratio: 1/1; width: 100%; flex-shrink: 0; background: #f5f5f5; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .oc-product-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .oc-product-thumb-ph { color: var(--oc-brand-muted); opacity: 0.4; } .oc-product-tag { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--oc-brand-discount, var(--oc-brand)); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; } .oc-product-info { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1 1; } .oc-product-title { font-size: 14.5px; font-weight: 700; line-height: 1.3; margin: 0; } .oc-product-sub { font-size: 12.5px; color: var(--oc-brand-muted); margin: 0; } .oc-product-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; } .oc-product-price { display: flex; flex-direction: column; } .oc-product-price-label { font-size: 10.5px; color: var(--oc-brand-muted); text-transform: uppercase; letter-spacing: 0.04em; } .oc-product-price strong { font-size: 17px; font-weight: 800; color: var(--oc-brand-ink); } .oc-product-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .oc-product-oldprice { font-size: 12.5px; color: var(--oc-brand-muted); text-decoration: line-through; } .oc-product-badge { position: absolute; top: 10px; right: 10px; z-index: 3; background: #16a34a; color: #fff; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.18); } .oc-product-btn { padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--oc-brand); background: #fff; color: var(--oc-brand); font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--oc-transition); } .oc-product-btn:hover { background: var(--oc-brand); color: #fff; } /* ---- Faixa de Ofertas — 3 áreas: banner (25%) + carrossel (60%) + ver todas (15%) ---- */ .oc-offerstrip { display: grid; grid-template-columns: 1.35fr 3fr 0.75fr; grid-gap: 20px; gap: 20px; align-items: center; padding: 12px 22px; border-radius: 20px; color: #fff; background: radial-gradient(120% 140% at 0% 0%, var(--oc-brand-accent, var(--oc-brand)) 0%, var(--oc-brand) 42%, var(--oc-brand-deep, var(--oc-brand)) 100%); box-shadow: 0 18px 44px rgba(0,0,0,.18); } /* ESQUERDA — banner */ .oc-offerstrip-card { display: flex; flex-direction: row; align-items: center; gap: 18px; min-width: 0; padding-right: 8px; } .oc-offerstrip-ic { width: 92px; height: 92px; border-radius: 22px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); } .oc-offerstrip-ic.has-img { width: auto; height: auto; max-width: 150px; background: none; border: 0; box-shadow: none; overflow: visible; } .oc-offerstrip-ic.has-img img { max-height: 128px; max-width: 150px; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.28)); } .oc-offerstrip-text { min-width: 0; display: flex; flex-direction: column; gap: 10px; } .oc-offerstrip-card h3 { font-size: clamp(22px, 1.9vw, 30px); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; margin: 0; } .oc-offerstrip-card p { font-size: 14px; opacity: 0.9; margin: 0; line-height: 1.45; max-width: 300px; } .oc-offerstrip-btn { display: inline-flex; align-items: center; gap: 9px; margin-top: 4px; padding: 13px 26px; border-radius: 999px; background: #fff; color: var(--oc-brand); font-size: 14px; font-weight: 800; align-self: flex-start; box-shadow: 0 8px 20px rgba(0,0,0,.18); transition: transform .15s, box-shadow .15s; } .oc-offerstrip-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.24); } /* CENTRO — carrossel */ .oc-offerstrip-products { min-width: 0; display: flex; align-items: stretch; } .oc-offcar { position: relative; width: 100%; min-width: 0; } .oc-offcar-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 12px) / 4); grid-gap: 12px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px; scrollbar-width: none; } .oc-offcar-track::-webkit-scrollbar { display: none; } .oc-offcar-track > * { scroll-snap-align: start; } .oc-offcar-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; color: var(--oc-brand-ink, #161616); box-shadow: 0 6px 18px rgba(0,0,0,.22); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s; } .oc-offcar-nav:hover { transform: translateY(-50%) scale(1.08); } .oc-offcar-nav.prev { left: -6px; } .oc-offcar-nav.next { right: -6px; } /* DIREITA — ver todas */ .oc-offerstrip-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #fff; font-size: 14.5px; font-weight: 800; text-decoration: none; text-align: center; line-height: 1.2; border-left: 1px solid rgba(255,255,255,.16); } .oc-offerstrip-more-a { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.45); display: flex; align-items: center; justify-content: center; transition: background .15s, transform .15s; } .oc-offerstrip-more:hover .oc-offerstrip-more-a { background: rgba(255,255,255,.32); transform: translateX(3px); } /* card de produto da oferta */ .oc-mini { background: #fff; border-radius: 12px; padding: 8px 9px; position: relative; display: flex; flex-direction: column; cursor: pointer; min-height: 138px; transition: box-shadow .22s, transform .22s; color: var(--oc-brand-ink, #161616); } .oc-mini:hover { box-shadow: 0 18px 34px rgba(0,0,0,.2); transform: translateY(-4px); } .oc-mini-thumb { position: relative; height: 92px; display: flex; align-items: center; justify-content: center; margin-top: 2px; overflow: hidden; border-radius: 8px; background: #f4f4f5; } .oc-mini-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .oc-mini:hover .oc-mini-thumb img { transform: scale(1.07); } .oc-mini-ph { color: var(--oc-brand-muted); opacity: 0.4; } .oc-mini-tag { position: absolute; top: 8px; left: 8px; z-index: 3; background: var(--oc-brand); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; box-shadow: 0 4px 10px rgba(0,0,0,.2); } .oc-mini-name { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.25; margin: 8px 0 4px; min-height: 2.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .oc-mini-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; } .oc-mini-price { display: flex; flex-direction: column; line-height: 1.1; } .oc-mini-old { font-size: 11px; color: var(--oc-brand-muted); text-decoration: line-through; } .oc-mini-price strong { font-size: 14px; font-weight: 800; color: var(--oc-brand); } .oc-mini-consult { font-size: 11px; color: var(--oc-brand-muted); font-weight: 600; } .oc-mini-cart { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; border: 0; background: var(--oc-brand); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 5px 12px rgba(0,0,0,.18); transition: var(--oc-transition); } .oc-mini-cart:hover { background: var(--oc-brand-hover, var(--oc-brand-deep)); transform: translateY(-1px); } @media (max-width: 1080px) { .oc-offcar-track { grid-auto-columns: calc((100% - 12px) / 2); } } @media (max-width: 980px) { .oc-offerstrip { grid-template-columns: 1fr; gap: 18px; } .oc-offerstrip-more { flex-direction: row; border-left: 0; border-top: 1px solid rgba(255,255,255,.16); padding-top: 14px; } } @media (max-width: 560px) { .oc-offcar-track { grid-auto-columns: 78%; } } /* ---- Página de Busca (resultados + filtros) ---- */ .oc-crumbs { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--oc-brand-muted); margin-bottom: 10px; } .oc-crumbs a { color: var(--oc-brand-muted); } .oc-crumbs a:hover { color: var(--oc-brand); } .oc-search-title { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 24px; color: var(--oc-brand-ink); } .oc-search-title span { color: var(--oc-brand); } .oc-search-layout { display: grid; grid-template-columns: 250px 1fr; grid-gap: 28px; gap: 28px; align-items: start; } .oc-search-side { display: flex; flex-direction: column; gap: 18px; position: -webkit-sticky; position: sticky; top: 90px; } .oc-search-block { background: #fff; border: 1px solid var(--oc-brand-line, #ececec); border-radius: 14px; padding: 16px; } .oc-search-block h4 { font-size: 13px; font-weight: 700; margin: 0 0 12px; color: var(--oc-brand-ink); text-transform: uppercase; letter-spacing: 0.03em; } .oc-search-select { width: 100%; border: 1px solid var(--oc-brand-line, #e2e2e2); border-radius: 9px; padding: 9px 11px; font-size: 13.5px; background: #fff; cursor: pointer; } .oc-search-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; } .oc-search-cats button { display: flex; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: transparent; padding: 7px 9px; border-radius: 8px; font-size: 13.5px; color: var(--oc-brand-ink-2, #333); cursor: pointer; text-align: left; } .oc-search-cats button:hover { background: var(--oc-brand-soft, #fafafa); } .oc-search-cats button.is-active { background: var(--oc-brand); color: #fff; font-weight: 600; } .oc-search-count { color: var(--oc-brand-muted); font-size: 12.5px; } .oc-search-cats button.is-active .oc-search-count { color: rgba(255,255,255,.85); } .oc-search-price { display: flex; align-items: center; gap: 8px; } .oc-search-price input { width: 100%; border: 1px solid var(--oc-brand-line, #e2e2e2); border-radius: 8px; padding: 8px 10px; font-size: 13px; } .oc-search-apply { margin-top: 10px; width: 100%; border: 1.5px solid var(--oc-brand); background: #fff; color: var(--oc-brand); border-radius: 9px; padding: 8px; font-size: 13px; font-weight: 600; cursor: pointer; } .oc-search-apply:hover { background: var(--oc-brand); color: #fff; } .oc-search-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--oc-brand-ink-2, #333); padding: 5px 0; cursor: pointer; } .oc-busca-results { min-width: 0; } .oc-busca-results .oc-product-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; } .oc-search-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 0 16px; color: var(--oc-brand-muted); font-size: 14px; font-weight: 500; } .oc-search-pager { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 28px 0 0; } .oc-search-pager button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--oc-brand-line, #e2e2e2); background: #fff; border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 600; color: var(--oc-brand-ink); cursor: pointer; } .oc-search-pager button:disabled { opacity: 0.45; cursor: default; } .oc-search-pager button:not(:disabled):hover { border-color: var(--oc-brand); color: var(--oc-brand); } .oc-search-pager span { font-size: 13.5px; color: var(--oc-brand-muted); } @media (max-width: 860px) { .oc-search-layout { grid-template-columns: 1fr; } .oc-search-side { position: static; } } /* ---------------- Category card ---------------- */ .oc-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-gap: 18px; gap: 18px; } .oc-cat-card { border-radius: 16px; padding: 24px; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; cursor: pointer; transition: transform var(--oc-transition); background: var(--oc-brand); } .oc-cat-card:hover { transform: translateY(-4px); } .oc-cat-card.has-img { background-size: cover; background-position: center; position: relative; overflow: hidden; } .oc-cat-card.has-img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.72) 100%); } .oc-cat-card.has-img > * { position: relative; z-index: 1; } .oc-cat-card h3 { font-size: 20px; font-weight: 800; margin: 0 0 6px; } .oc-cat-card p { font-size: 13px; opacity: 0.85; margin: 0; } .oc-cat-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; } /* ---------------- Sobre + estatísticas (bloco vermelho) ---------------- */ .oc-about { background: linear-gradient(160deg, var(--oc-brand) 0%, var(--oc-brand-deep, var(--oc-brand)) 100%); color: #fff; padding: clamp(48px, 6vw, 80px) 0; } .oc-about-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: clamp(32px, 5vw, 72px); gap: clamp(32px, 5vw, 72px); align-items: center; } .oc-about-copy h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 18px; } .oc-about-copy p { font-size: 15.5px; line-height: 1.7; opacity: 0.92; margin: 0 0 26px; max-width: 480px; } .oc-about-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 999px; background: #fff; color: var(--oc-brand); font-size: 14.5px; font-weight: 700; transition: transform var(--oc-transition); } .oc-about-btn:hover { transform: translateY(-2px); } .oc-stats { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: clamp(22px, 3vw, 38px); gap: clamp(22px, 3vw, 38px); } .oc-stat { text-align: center; } .oc-stat-ic { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border: 2px solid rgba(255,255,255,0.35); border-radius: 50%; color: #fff; margin-bottom: 12px; } .oc-stat-value { font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1; } .oc-stat-label { font-size: 13px; opacity: 0.85; margin-top: 6px; } /* ---------------- CTA final ---------------- */ .oc-cta { background: var(--oc-brand-soft-2, #fdecec); padding: clamp(36px, 4vw, 56px) 0; } .oc-cta.has-img { position: relative; background-size: cover; background-position: center; } .oc-cta.has-img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.35) 100%); } .oc-cta.has-img .oc-cta-inner { position: relative; z-index: 1; } .oc-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .oc-cta-inner h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--oc-brand-ink); } .oc-cta-inner p { font-size: 15px; color: var(--oc-brand-muted); margin: 8px 0 0; max-width: 560px; } .oc-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 30px; border-radius: 999px; background: var(--oc-brand); color: #fff; font-size: 15px; font-weight: 700; box-shadow: var(--oc-brand-shadow); white-space: nowrap; transition: background var(--oc-transition); } .oc-cta-btn:hover { background: var(--oc-brand-hover); } /* ---------------- Footer ---------------- */ .oc-pubfooter { background: var(--oc-brand-deep, var(--oc-brand)); color: #fff; padding: 56px 0 24px; margin-top: auto; } .oc-pubfooter-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; grid-gap: 32px; gap: 32px; } .oc-pubfooter h4 { font-size: 13px; font-weight: 700; margin: 0 0 16px; opacity: 0.95; } .oc-pubfooter ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; } .oc-pubfooter a { font-size: 13.5px; opacity: 0.82; transition: var(--oc-transition); } .oc-pubfooter a:hover { opacity: 1; } .oc-pubfooter-tag { font-size: 13.5px; opacity: 0.82; line-height: 1.65; margin: 0 0 18px; max-width: 290px; } .oc-pubfooter-mark { width: 46px; height: 46px; border-radius: 13px; background: #fff; color: var(--oc-brand); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 17px; margin-bottom: 16px; } .oc-pubfooter-social { display: flex; gap: 10px; } .oc-social-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: #fff; transition: var(--oc-transition); } .oc-social-btn:hover { background: rgba(255,255,255,0.25); } .oc-pubfooter-contact li { display: flex; gap: 8px; align-items: center; font-size: 13.5px; opacity: 0.85; } .oc-pubfooter-copy { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 40px; padding-top: 22px; font-size: 12.5px; opacity: 0.7; text-align: center; } /* ---------------- Galeria de produto ---------------- */ .oc-gallery { display: flex; flex-direction: column; gap: 12px; } .oc-gallery-main { position: relative; aspect-ratio: 1/1; background: var(--oc-brand-soft, #fafafa); border-radius: 18px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .oc-gallery-main img { width: 100%; height: 100%; object-fit: cover; } .oc-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); box-shadow: 0 2px 10px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #161616; } .oc-gallery-nav.prev { left: 10px; } .oc-gallery-nav.next { right: 10px; } .oc-gallery-nav:hover { background: #fff; } .oc-gallery-thumbs { display: flex; gap: 10px; flex-wrap: wrap; } .oc-gallery-thumb { width: 66px; height: 66px; border-radius: 10px; overflow: hidden; border: 2px solid var(--oc-brand-line, #e6e8ec); background: #fff; cursor: pointer; padding: 0; transition: border-color .15s; } .oc-gallery-thumb.is-active { border-color: var(--oc-brand, #c8101c); } .oc-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; } /* ---------------- DOM Avatar (assistente 3D) ---------------- */ .oc-dom-root { position: fixed; z-index: 95; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .oc-dom-root.is-right { right: 22px; bottom: calc(90px + var(--oc-fab-shift, 0px)); align-items: flex-end; } .oc-dom-root.is-left { left: 22px; bottom: calc(90px + var(--oc-fab-shift, 0px)); align-items: flex-start; } .oc-dom-root.is-float { right: 22px; bottom: 50%; transform: translateY(50%); align-items: flex-end; } /* sem WhatsApp flutuante → chat assume a posição de baixo */ .oc-dom-root.no-zap.is-right { bottom: calc(22px + var(--oc-fab-shift, 0px)); } .oc-dom-root.no-zap.is-left { bottom: calc(22px + var(--oc-fab-shift, 0px)); } .oc-dom-launcher { width: 66px; height: 66px; border-radius: 50%; border: none; cursor: pointer; background: radial-gradient(circle at 30% 25%, #ffffff22, transparent 60%), var(--oc-dom-brand, #1f6feb); color: #fff; box-shadow: 0 10px 28px rgba(0,0,0,0.28); display: flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; transition: transform var(--oc-transition); } .oc-dom-launcher:hover { transform: scale(1.07); } .oc-dom-launcher-av { width: 100%; height: 100%; display: block; } .oc-dom-launcher-av canvas { width: 100% !important; height: 100% !important; } .oc-dom-panel { width: min(440px, calc(100vw - 32px)); height: 640px; max-height: calc(100vh - 120px); background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.30); display: flex; flex-direction: column; border: 1px solid var(--oc-border, #e6e8ec); transition: width .2s, height .2s; } /* Tela cheia (chat completo / shop no chat) */ .oc-dom-root.is-expanded .oc-dom-panel { position: fixed; inset: 0; margin: auto; width: min(900px, calc(100vw - 32px)); height: min(860px, calc(100vh - 32px)); z-index: 1000; } .oc-dom-backdrop { position: fixed; inset: 0; background: rgba(8,15,28,0.55); z-index: 999; } .oc-dom-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; color: #fff; background: linear-gradient(135deg, var(--oc-dom-brand, #1f6feb), #0b1f33); } .oc-dom-name { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 8px; } .oc-dom-name small { font-weight: 500; opacity: 0.7; font-size: 11px; margin-left: 4px; } .oc-dom-head-actions { display: flex; gap: 8px; } .oc-dom-close { background: rgba(255,255,255,0.15); border: none; color: #fff; border-radius: 8px; width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .oc-dom-close:hover { background: rgba(255,255,255,0.28); } .oc-dom-row { display: flex; flex-direction: column; gap: 8px; } /* shop no chat — cards de produto */ .oc-dom-products { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px; gap: 10px; margin: 2px 0 4px; align-items: stretch; } .oc-dom-root.is-expanded .oc-dom-products { grid-template-columns: repeat(3, 1fr); } .oc-dom-product { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--oc-border, #e6e8ec); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; } .oc-dom-product:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.12); transform: translateY(-2px); } .oc-dom-product-img { aspect-ratio: 1 / 1; width: 100%; flex-shrink: 0; background: #f1f4f9; display: flex; align-items: center; justify-content: center; color: #9fb0c6; } .oc-dom-product-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .oc-dom-product-body { padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; } .oc-dom-product-name { font-size: 13px; font-weight: 600; color: var(--oc-brand-ink, #161616); line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .oc-dom-product-price { font-size: 13px; font-weight: 800; color: var(--oc-dom-brand, #1f6feb); min-height: 1.15em; } .oc-dom-product-name { text-decoration: none; } .oc-dom-product-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 6px; } .oc-dom-add { border: none; background: var(--oc-dom-brand, #1f6feb); color: #fff; border-radius: 8px; padding: 4px 8px; font-size: 11px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; } .oc-dom-add:hover { filter: brightness(1.08); } .oc-dom-product-cta { font-size: 11px; color: var(--oc-text-muted, #64748b); display: flex; align-items: center; gap: 3px; text-decoration: none; } .oc-dom-finalizar { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: #16a34a; color: #fff; text-decoration: none; padding: 8px 14px; border-radius: 10px; font-weight: 700; font-size: 13px; } .oc-dom-cartbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #eef4ff; border-top: 1px solid var(--oc-border, #e6e8ec); color: var(--oc-dom-brand, #1f6feb); font-weight: 700; font-size: 13px; text-decoration: none; } .oc-dom-cartbar span { display: inline-flex; align-items: center; gap: 6px; } .oc-dom-cartbar-go { color: #16a34a; } .oc-dom-finform { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; background: #fff; border: 1px solid var(--oc-border, #e6e8ec); border-radius: 12px; padding: 12px; } .oc-dom-finform input { height: 40px; border: 1px solid var(--oc-border, #e6e8ec); border-radius: 9px; padding: 0 12px; font-size: 13px; outline: none; } .oc-dom-finform input:focus { border-color: var(--oc-dom-brand, #1f6feb); } .oc-dom-finform button { height: 42px; border: none; border-radius: 10px; background: #16a34a; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; } .oc-dom-finform button:disabled { opacity: .6; } .oc-dom-chat { flex: 1 1; display: flex; flex-direction: column; min-height: 0; } .oc-dom-messages { flex: 1 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #f7f9fc; } .oc-dom-msg { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; } .oc-dom-msg.is-dom { align-self: flex-start; background: #fff; border: 1px solid var(--oc-border, #e6e8ec); border-bottom-left-radius: 4px; } .oc-dom-msg.is-user { align-self: flex-end; background: var(--oc-dom-brand, #1f6feb); color: #fff; border-bottom-right-radius: 4px; } .oc-dom-typing { display: flex; gap: 4px; align-items: center; } .oc-dom-typing span { width: 7px; height: 7px; border-radius: 50%; background: #b3c0d4; animation: oc-dom-bounce 1s infinite; } .oc-dom-typing span:nth-child(2) { animation-delay: 0.15s; } .oc-dom-typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes oc-dom-bounce { 0%,60%,100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } } .oc-dom-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--oc-border, #e6e8ec); background: #fff; } .oc-dom-input input { flex: 1 1; border: 1px solid var(--oc-border, #e6e8ec); border-radius: 10px; padding: 10px 12px; font-size: 14px; outline: none; } .oc-dom-input input:focus { border-color: var(--oc-dom-brand, #1f6feb); } .oc-dom-input button { border: none; background: var(--oc-dom-brand, #1f6feb); color: #fff; border-radius: 10px; width: 42px; cursor: pointer; display: flex; align-items: center; justify-content: center; } @media (max-width: 600px) { .oc-dom-root.is-right, .oc-dom-root.is-left { bottom: calc(84px + var(--oc-fab-shift, 0px)); } .oc-dom-root.no-zap.is-right, .oc-dom-root.no-zap.is-left { bottom: calc(18px + var(--oc-fab-shift, 0px)); } .oc-dom-launcher { width: 58px; height: 58px; } } /* ---------------- WhatsApp flutuante ---------------- */ .oc-fab-zap { position: fixed; right: 22px; bottom: calc(22px + var(--oc-fab-shift, 0px)); z-index: 90; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(37,211,102,0.45); transition: transform var(--oc-transition); } .oc-fab-zap:hover { transform: scale(1.08); } @media (max-width: 600px) { .oc-fab-zap { right: 16px; bottom: 16px; width: 52px; height: 52px; } } /* ---------------- Cookie consent ---------------- */ .oc-cookiebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: flex; align-items: center; gap: 20px; padding: 16px clamp(16px, 3vw, 32px); background: var(--oc-brand-ink, #161616); color: #fff; box-shadow: 0 -6px 24px rgba(0,0,0,0.18); } .oc-cookiebar-text { font-size: 13.5px; line-height: 1.5; margin: 0; flex: 1 1; opacity: 0.92; } .oc-cookiebar-link { color: var(--oc-brand-contrast, #fff); font-weight: 700; text-decoration: underline; } .oc-cookiebar-btn { flex-shrink: 0; padding: 11px 26px; border-radius: 999px; border: none; cursor: pointer; background: var(--oc-brand, #c8101c); color: #fff; font-size: 14px; font-weight: 700; } .oc-cookiebar-btn:hover { background: var(--oc-brand-hover, #dc1f2c); } /* ---------------- Promo popup ---------------- */ .oc-popup-overlay { position: fixed; inset: 0; z-index: 120; background: rgba(15,18,28,0.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: oc-fade 0.2s ease; } @keyframes oc-fade { from { opacity: 0; } to { opacity: 1; } } .oc-popup-card { position: relative; background: #fff; border-radius: 18px; overflow: hidden; max-width: 460px; width: 100%; box-shadow: 0 30px 80px rgba(0,0,0,0.4); animation: oc-pop 0.25s cubic-bezier(0.16,1,0.3,1); } @keyframes oc-pop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } .oc-popup-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; background: rgba(0,0,0,0.45); color: #fff; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; } .oc-popup-close:hover { background: rgba(0,0,0,0.7); } .oc-popup-img { width: 100%; display: block; max-height: 320px; object-fit: cover; } .oc-popup-body { padding: 24px 26px 28px; text-align: center; } .oc-popup-title { font-size: 22px; font-weight: 800; margin: 0 0 8px; color: var(--oc-brand-ink, #161616); } .oc-popup-text { font-size: 14.5px; line-height: 1.55; color: var(--oc-brand-muted, #6b6b6b); margin: 0 0 18px; } .oc-popup-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 30px; border-radius: 999px; background: var(--oc-brand, #c8101c); color: #fff; font-size: 15px; font-weight: 700; box-shadow: var(--oc-brand-shadow); } .oc-popup-cta:hover { background: var(--oc-brand-hover, #dc1f2c); } @media (max-width: 600px) { .oc-cookiebar { flex-direction: column; gap: 12px; text-align: center; } } /* ---------------- Página institucional (privacidade) ---------------- */ .oc-legal { max-width: 860px; margin: 0 auto; } .oc-legal h1 { font-size: clamp(28px, 3vw, 38px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; } .oc-legal-sub { font-size: 15px; color: var(--oc-brand-muted); margin: 0 0 28px; } .oc-legal-body { font-size: 15px; line-height: 1.75; color: var(--oc-brand-ink-2); white-space: pre-wrap; } /* ---------------- Mobile drawer nav ---------------- */ .oc-mobile-nav { display: flex; flex-direction: column; } .oc-mobile-nav a { padding: 14px 0; border-bottom: 1px solid var(--oc-brand-line); font-size: 16px; font-weight: 600; color: var(--oc-brand-ink); } /* ---------------- Responsive ---------------- */ @media (max-width: 1100px) { .oc-product-grid { grid-template-columns: repeat(3, 1fr); } .oc-feats { grid-template-columns: repeat(2, 1fr); } .oc-hero-panel { min-height: 380px; } .oc-hero-panel::after { background: linear-gradient(100deg, rgba(15,17,22,0.84) 0%, rgba(15,17,22,0.6) 55%, rgba(15,17,22,0.3) 100%); } .oc-about-grid { grid-template-columns: 1fr; } .oc-empresa-grid { grid-template-columns: 1fr !important; } .oc-pubfooter-grid { grid-template-columns: 1.4fr 1fr 1fr; } } @media (max-width: 600px) { .oc-empresa-stats { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 760px) { .oc-container { padding: 0 20px; } .oc-pubnav, .oc-pubcta, .oc-pubnav-row, .oc-header-actions, .oc-pubtopbar-info { display: none; } .oc-pubheader-search { display: none; } .oc-menu-toggle { display: inline-flex; } .oc-pubtopbar-inner { justify-content: flex-end; } .oc-offerstrip { flex-direction: column; } .oc-feats { grid-template-columns: 1fr 1fr; margin-left: 0; margin-right: 0; gap: 10px; padding: 14px; } /* Mobile: hero menor + ofertas logo abaixo, para aparecerem juntos */ .oc-hero { padding-top: 14px; } .oc-hero-panel { min-height: 300px; padding: 26px 22px; } .oc-hero-copy h1 { font-size: 27px; margin-bottom: 12px; } .oc-hero-copy p { font-size: 13.5px; margin-bottom: 18px; } .oc-offers-section { padding-top: 16px; } .oc-product-grid { grid-template-columns: repeat(2, 1fr); } .oc-section-head { flex-direction: column; align-items: flex-start; gap: 10px; } .oc-section-head h2 { font-size: 26px; } .oc-cta-inner { flex-direction: column; align-items: flex-start; } .oc-pubfooter-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .oc-product-grid { grid-template-columns: 1fr 1fr; } .oc-stats { grid-template-columns: 1fr 1fr; } .oc-pubfooter-grid { grid-template-columns: 1fr; } } /* ===== Trabalhe Conosco ===== */ .oc-trabalhe-hero { background: linear-gradient(135deg, var(--oc-brand) 0%, color-mix(in srgb, var(--oc-brand) 70%, #000) 100%); color: #fff; text-align: center; } .oc-trabalhe-hero h1 { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; margin: 0; } .oc-trabalhe-hero p { font-size: 18px; opacity: .92; margin: 14px auto 0; max-width: 680px; } .oc-cand-wrap { max-width: 880px; margin: 0 auto; } .oc-cand-form { background: #fff; border: 1px solid var(--oc-brand-line, #eee); border-radius: 18px; padding: 28px; box-shadow: 0 8px 30px rgba(0,0,0,.05); } .oc-cand-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 16px; gap: 16px; } .oc-cand-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--oc-brand-ink-2, #444); } .oc-cand-grid label.oc-cand-full { grid-column: 1 / -1; } .oc-cand-grid input, .oc-cand-grid textarea { border: 1px solid var(--oc-brand-line, #ddd); border-radius: 10px; padding: 11px 13px; font-size: 14px; font-family: inherit; } .oc-cand-grid input:focus, .oc-cand-grid textarea:focus { outline: none; border-color: var(--oc-brand); } .oc-cand-form .oc-btn { margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; background: var(--oc-brand); color: #fff; padding: 13px 26px; border-radius: 12px; font-size: 14.5px; font-weight: 700; transition: var(--oc-transition); } .oc-cand-form .oc-btn:hover { background: var(--oc-brand-hover, var(--oc-brand-deep)); } .oc-cand-form .oc-btn:disabled { opacity: .6; cursor: not-allowed; } /* Dropzone de currículo */ .oc-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; cursor: pointer; padding: 28px 20px; border: 2px dashed var(--oc-brand-line, #d6d6d6); border-radius: 14px; background: var(--oc-brand-soft, #fafafa); transition: var(--oc-transition); } .oc-drop:hover, .oc-drop.is-over { border-color: var(--oc-brand); background: color-mix(in srgb, var(--oc-brand) 6%, #fff); } .oc-drop-ic { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--oc-brand) 12%, #fff); color: var(--oc-brand); margin-bottom: 4px; } .oc-drop strong { font-size: 14.5px; font-weight: 700; color: var(--oc-brand-ink, #222); } .oc-drop small { font-size: 12.5px; color: var(--oc-brand-muted); } .oc-drop-file { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--oc-brand-line, #e2e2e2); border-radius: 14px; background: #fff; } .oc-drop-file-ic { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: color-mix(in srgb, var(--oc-brand) 12%, #fff); color: var(--oc-brand); } .oc-drop-file-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1; } .oc-drop-file-info strong { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-drop-file-info small { font-size: 12.5px; color: var(--oc-brand-muted); } .oc-drop-file-x { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--oc-brand-soft, #f4f4f5); color: var(--oc-brand-muted); cursor: pointer; transition: var(--oc-transition); } .oc-drop-file-x:hover { background: #fee2e2; color: #dc2626; } .oc-cand-err { margin-top: 16px; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; border-radius: 10px; padding: 11px 14px; font-size: 14px; } .oc-cand-ok { text-align: center; max-width: 520px; margin: 0 auto; background: #fff; border: 1px solid var(--oc-brand-line, #eee); border-radius: 18px; padding: 40px 28px; } .oc-cand-ok h3 { font-size: 24px; margin: 16px 0 8px; } .oc-cand-ok p { color: var(--oc-brand-muted); margin: 0 0 12px; } .oc-cand-proto { display: inline-block; background: var(--oc-brand-soft, #f5f5f5); color: var(--oc-brand); font-size: 22px; font-weight: 800; letter-spacing: .04em; padding: 10px 22px; border-radius: 12px; } @media (max-width: 640px) { .oc-cand-grid { grid-template-columns: 1fr; } .oc-trabalhe-hero h1 { font-size: 32px; } } /* ============================================================ Downloads (storefront) ============================================================ */ .oc-dl-hero { background: linear-gradient(135deg, var(--oc-brand) 0%, color-mix(in srgb, var(--oc-brand) 70%, #000) 100%); background-size: cover; background-position: center; color: #fff; padding: 56px 0; text-align: center; } .oc-dl-hero h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 900; letter-spacing: -.02em; margin: 0; } .oc-dl-hero p { font-size: 17px; opacity: .92; margin: 12px auto 0; max-width: 640px; } .oc-dl-locked { text-align: center; max-width: 460px; margin: 0 auto; padding: 40px; color: var(--oc-brand-muted); display: flex; flex-direction: column; align-items: center; gap: 12px; } .oc-dl-locked h3 { font-size: 22px; color: var(--oc-brand-ink); margin: 6px 0 0; } .oc-dl-toolbar { display: flex; justify-content: flex-end; margin-bottom: 18px; } .oc-dl-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--oc-brand-line, #e2e2e2); border-radius: 12px; padding: 9px 14px; background: #fff; min-width: 280px; color: var(--oc-brand-muted); } .oc-dl-search input { border: 0; outline: 0; flex: 1 1; font-size: 14px; } .oc-dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-gap: 20px; gap: 20px; } .oc-dl-card { background: #fff; border: 1px solid var(--oc-brand-line, #ececec); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform .16s, box-shadow .16s; } .oc-dl-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.10); } .oc-dl-capa { position: relative; aspect-ratio: 16/10; background: var(--oc-brand-soft, #f4f4f5); display: flex; align-items: center; justify-content: center; color: var(--oc-brand); overflow: hidden; } .oc-dl-capa img { width: 100%; height: 100%; object-fit: cover; } .oc-dl-ext { position: absolute; top: 10px; left: 10px; background: var(--oc-brand); color: #fff; font-size: 10.5px; font-weight: 800; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; letter-spacing: .04em; } .oc-dl-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1 1; } .oc-dl-cat { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--oc-brand-muted); } .oc-dl-body h3 { font-size: 16px; font-weight: 800; color: var(--oc-brand-ink); margin: 0; line-height: 1.3; } .oc-dl-body p { font-size: 13.5px; color: var(--oc-brand-muted); margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .oc-dl-tags { display: flex; flex-wrap: wrap; gap: 6px; } .oc-dl-tags span { font-size: 11px; background: var(--oc-brand-soft, #f4f4f5); color: var(--oc-brand-muted); padding: 2px 8px; border-radius: 20px; font-weight: 600; } .oc-dl-btn { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; background: var(--oc-brand); color: #fff; padding: 11px; border-radius: 10px; font-size: 14px; font-weight: 700; transition: background .15s; } .oc-dl-btn:hover { background: var(--oc-brand-hover, var(--oc-brand-deep)); } .oc-dl-btn:disabled { opacity: .6; cursor: wait; } .oc-dl-btn small { opacity: .8; font-weight: 600; } .oc-dl-pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; font-size: 14px; color: var(--oc-brand-muted); } .oc-dl-pager button { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--oc-brand-line, #e2e2e2); background: #fff; border-radius: 10px; padding: 8px 14px; font-weight: 700; cursor: pointer; color: var(--oc-brand-ink); } .oc-dl-pager button:disabled { opacity: .45; cursor: not-allowed; } /* ============================================================ Catalogo Digital - Revista (storefront) ============================================================ */ .oc-mag { background: #1a1c22; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; color: #fff; } .oc-mag-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 22px; background: var(--mag-secondary, #15171c); border-bottom: 1px solid rgba(255,255,255,.08); flex-wrap: wrap; } .oc-mag-bar-l { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #fff; text-decoration: none; cursor: pointer; transition: opacity .15s; } .oc-mag-bar-l:hover { opacity: .82; } .oc-mag-catname { font-weight: 700; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.18); } @media (max-width: 560px) { .oc-mag-catname { display: none; } } .oc-mag-logo { height: 30px; width: auto; object-fit: contain; } .oc-mag-bar-r { display: flex; align-items: center; gap: 6px; } .oc-mag-bar-r button { width: 38px; height: 38px; border-radius: 9px; border: 0; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; } .oc-mag-bar-r button:hover { background: var(--mag-primary, var(--oc-brand)); } .oc-mag-search { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.08); border-radius: 9px; padding: 0 12px; color: rgba(255,255,255,.7); } .oc-mag-search input { border: 0; outline: 0; background: none; color: #fff; height: 38px; font-size: 13.5px; width: 180px; } .oc-mag-results { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 22px; background: rgba(0,0,0,.3); } .oc-mag-results button { background: rgba(255,255,255,.1); border: 0; color: #fff; border-radius: 8px; padding: 7px 12px; font-size: 13px; cursor: pointer; } .oc-mag-results button:hover { background: var(--mag-primary, var(--oc-brand)); } .oc-mag-results span { color: rgba(255,255,255,.6); font-size: 13px; } .oc-mag-stage { flex: 1 1; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 28px 16px; position: relative; } .oc-mag-nav { width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; } .oc-mag-nav:hover { background: var(--mag-primary, var(--oc-brand)); } .oc-mag-nav:disabled { opacity: .25; cursor: default; } .oc-mag-page { width: min(860px, 92vw); aspect-ratio: 16/10; background: #fff; color: #15171c; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.5); cursor: zoom-in; transform-origin: center; transition: transform .36s cubic-bezier(.22,1,.36,1); } .oc-mag-page.zoomed { transform: scale(1.35); cursor: zoom-out; } .oc-mag-page.flip-next { animation: oc-mag-fn .36s ease; } .oc-mag-page.flip-prev { animation: oc-mag-fp .36s ease; } @keyframes oc-mag-fn { 0% { transform: rotateY(0) translateX(0); opacity:.4 } 50% { transform: rotateY(-18deg) translateX(30px); opacity:.7 } 100% { transform: none; opacity:1 } } @keyframes oc-mag-fp { 0% { transform: rotateY(0) translateX(0); opacity:.4 } 50% { transform: rotateY(18deg) translateX(-30px); opacity:.7 } 100% { transform: none; opacity:1 } } .oc-mag-cover { width: 100%; height: 100%; background: var(--mag-primary, var(--oc-brand)); background-size: cover; background-position: center; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 40px; } .oc-mag-cover img { max-height: 80px; width: auto; object-fit: contain; } .oc-mag-cover h1 { font-size: clamp(28px, 4vw, 46px); font-weight: 900; letter-spacing: -.02em; margin: 0; } .oc-mag-cover p { font-size: 16px; opacity: .9; max-width: 560px; margin: 0; } .oc-mag-cover-emp { margin-top: auto; font-size: 14px; font-weight: 700; opacity: .85; } .oc-mag-prod { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; } .oc-mag-prod-img { background: #f0f1f4; display: flex; align-items: center; justify-content: center; color: #9aa0ac; overflow: hidden; } .oc-mag-prod-img img { width: 100%; height: 100%; object-fit: cover; } .oc-mag-prod-info { padding: clamp(20px, 4vw, 44px); display: flex; flex-direction: column; gap: 10px; overflow-y: auto; } .oc-mag-marca { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--mag-primary, var(--oc-brand)); } .oc-mag-prod-info h2 { font-size: clamp(20px, 2.6vw, 30px); font-weight: 900; letter-spacing: -.02em; color: var(--mag-secondary, #15171c); margin: 0; } .oc-mag-sku { font-size: 13px; color: #737a88; font-weight: 600; } .oc-mag-desc { font-size: 14px; color: #3b4150; line-height: 1.55; margin: 0; } .oc-mag-ficha { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-gap: 4px; gap: 4px; } .oc-mag-ficha li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #f0f1f4; } .oc-mag-ficha li span { color: #737a88; } .oc-mag-ficha li strong { color: #15171c; } .oc-mag-preco { margin-top: auto; padding-top: 12px; font-size: 28px; font-weight: 900; color: var(--mag-primary, var(--oc-brand)); letter-spacing: -.02em; } .oc-mag-preco .sub { font-size: 16px; font-weight: 700; color: #737a88; } .oc-mag-foot { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 12px; font-size: 13px; color: rgba(255,255,255,.7); } .oc-mag-trunc { color: rgba(255,255,255,.45); } .oc-mag-thumbs { display: flex; gap: 10px; overflow-x: auto; padding: 14px 22px; background: var(--mag-secondary, #15171c); border-top: 1px solid rgba(255,255,255,.08); } .oc-mag-thumb { flex-shrink: 0; width: 92px; border: 2px solid transparent; border-radius: 8px; background: rgba(255,255,255,.06); color: #fff; cursor: pointer; padding: 6px; display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; } .oc-mag-thumb.on { border-color: var(--mag-primary, var(--oc-brand)); } .oc-mag-thumb .cv { aspect-ratio: 1; border-radius: 5px; overflow: hidden; background: #2a2d35; display: flex; align-items: center; justify-content: center; } .oc-mag-thumb .cv img { width: 100%; height: 100%; object-fit: cover; } .oc-mag-thumb .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 640px) { .oc-mag-prod { grid-template-columns: 1fr; grid-template-rows: 40% 60%; } .oc-mag-search input { width: 110px; } }