/* ============================================================ Cube-Age — Shared styles for the 8 US Market Info category pages (market-usa / market-texas / market-houston-population / market-customs / market-trade-shows-2026 / market-ecommerce / market-foreigntrade / market-latam) Single source of truth so every category page renders identically. Load this LAST in so it wins over any legacy inline styles. ============================================================ */ /* ─── Gradient hero (shared by all 8 category pages) ─── */ .cat-hero{background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 50%,#0f172a 100%);padding:120px 32px 60px;text-align:center;position:relative;overflow:hidden} .cat-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(59,130,246,.18),transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(244,63,94,.12),transparent 50%)} .cat-hero .crumb{position:relative;font-size:11.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:14px} .cat-hero .crumb a{color:rgba(255,255,255,.75);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:1px} .cat-hero .crumb a:hover{color:#fff} .cat-hero .cat-flag{margin:0 auto 18px;display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:20px;color:#fff;position:relative;box-shadow:0 12px 28px rgba(0,0,0,.25)} .cat-hero .cat-flag i[data-icon]{width:36px;height:36px} .cat-hero h1{font-family:'Outfit',sans-serif;font-size:clamp(28px,3.8vw,46px);font-weight:800;color:#fff;letter-spacing:-1.2px;margin-bottom:14px;position:relative;line-height:1.15;max-width:900px;margin-left:auto;margin-right:auto} .cat-hero h1 em{font-style:normal;background:linear-gradient(135deg,#fbbf24,#f43f5e);-webkit-background-clip:text;-webkit-text-fill-color:transparent} .cat-hero .lead{font-size:15px;color:rgba(255,255,255,.66);max-width:760px;margin:0 auto;position:relative;line-height:1.65} .cat-hero .cat-meta{position:relative;margin-top:18px;display:inline-flex;gap:18px;font-size:11.5px;color:rgba(255,255,255,.55);letter-spacing:.5px;flex-wrap:wrap;justify-content:center} .cat-hero .cat-meta span{display:inline-flex;align-items:center;gap:6px} .cat-hero .cat-meta i[data-icon]{width:14px;height:14px;opacity:.7} /* ─── Optional key-stat strip (content pages: texas / houston / tradeshow) ─── */ .cat-statbar{max-width:1100px;margin:-36px auto 0;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative;z-index:5} .cat-stat{background:var(--bg);border:1px solid var(--bdr);border-radius:14px;padding:18px 16px 16px;text-align:center;box-shadow:0 10px 30px rgba(15,23,42,.07)} .cat-stat-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;margin-bottom:8px;background:linear-gradient(135deg,var(--ic1,#3b82f6),var(--ic2,#06b6d4));color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.08)} .cat-stat-ic i[data-icon]{width:20px;height:20px} .cat-stat-n{font-family:'Outfit',sans-serif;font-size:24px;font-weight:800;color:var(--blue);letter-spacing:-.6px;line-height:1.1} .cat-stat-n.warn{color:#d97706} .cat-stat-n.bad{color:#dc2626} .cat-stat-l{font-size:11.5px;color:var(--tx2);margin-top:4px;font-weight:600;line-height:1.35} .cat-stat-sub{font-size:10px;color:var(--tx3);margin-top:3px;font-style:italic;line-height:1.3} /* ─── Horizontal category tab bar (shared by all 8 pages) ─── */ .mi-tabs{display:flex;justify-content:center;gap:8px;padding:30px 24px 4px;background:var(--bg);position:relative;z-index:3;flex-wrap:wrap;max-width:1180px;margin:0 auto} .mi-tab{padding:9px 18px;border-radius:100px;font-size:13px;font-weight:600;color:var(--tx2);text-decoration:none;border:1px solid var(--bdr);transition:.2s} .mi-tab:hover{color:var(--blue);border-color:var(--blue);background:rgba(37,99,235,.04)} .mi-tab.active{background:var(--blue);color:#fff;border-color:var(--blue)} /* ─── Article-row list (hub pages) ─── */ .cat-wrap{max-width:1100px;margin:32px auto 64px;padding:0 24px} .cat-list{display:flex;flex-direction:column;gap:12px} .cat-row{display:grid;grid-template-columns:118px 1fr auto;align-items:center;gap:18px;padding:18px 22px;background:var(--bg);border:1px solid var(--bdr);border-radius:14px;text-decoration:none;color:inherit;transition:.2s;position:relative;overflow:hidden} .cat-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--cc1),var(--cc2));opacity:.85} .cat-row:hover{transform:translateY(-2px);border-color:transparent;box-shadow:0 18px 40px rgba(0,0,0,.08)} .cat-date{font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;letter-spacing:.4px;color:#fff;background:linear-gradient(135deg,var(--cc1),var(--cc2));padding:6px 10px;border-radius:8px;text-align:center;white-space:nowrap} .cat-date .y{display:block;font-size:10px;opacity:.85;font-weight:600;letter-spacing:1px} .cat-date .md{display:block;font-size:14px;font-weight:800} .cat-title{font-family:'Outfit',sans-serif;font-size:15.5px;font-weight:700;color:var(--tx);line-height:1.4;letter-spacing:-.1px} .cat-title em{font-style:normal;background:linear-gradient(135deg,var(--cc1),var(--cc2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:800} .cat-cta{font-size:12.5px;font-weight:700;color:var(--blue);letter-spacing:.2px;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;transition:.2s} .cat-row:hover .cat-cta{gap:8px} .cat-foot{margin-top:34px;background:linear-gradient(135deg,#fef3c7,#fde68a);border-radius:14px;padding:24px 28px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center} .cat-foot h3{font-family:'Outfit',sans-serif;font-size:17px;font-weight:800;color:#78350f;margin:0 0 6px;letter-spacing:-.2px} .cat-foot p{font-size:13px;color:#92400e;line-height:1.6;margin:0;max-width:680px} .cat-foot .btn-w{background:#0f172a;color:#fff;border-color:#0f172a;white-space:nowrap} .cat-foot .btn-w:hover{background:#1e3a5f;border-color:#1e3a5f} /* ─── "Browse this report" section list (content pages: texas / tradeshow) ─── */ .pg-toc{max-width:1100px;margin:0 auto;padding:24px 24px 8px} .pg-toc-head{text-align:center;margin-bottom:18px} .pg-toc-head h2{font-family:'Outfit',sans-serif;font-size:20px;font-weight:800;color:var(--tx);letter-spacing:-.4px;margin:0 0 4px} .pg-toc-head p{font-size:12.5px;color:var(--tx2);margin:0;line-height:1.5} .pg-toc-list{display:flex;flex-direction:column;gap:12px} .pg-toc-row{display:grid;grid-template-columns:118px 1fr auto;gap:18px;align-items:center;padding:18px 22px;background:var(--bg);border:1px solid var(--bdr);border-radius:14px;text-decoration:none;color:inherit;transition:.2s;cursor:pointer;position:relative;overflow:hidden;font-family:'Plus Jakarta Sans',sans-serif;text-align:left;width:100%} .pg-toc-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--pgc1,#3b82f6),var(--pgc2,#06b6d4));opacity:.85;transition:.2s} .pg-toc-row:hover{transform:translateY(-2px);border-color:transparent;box-shadow:0 18px 40px rgba(0,0,0,.08)} .pg-toc-row.active{border-color:transparent;box-shadow:0 18px 40px rgba(15,23,42,.10)} .pg-toc-num{font-family:'Outfit',sans-serif;font-size:11px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--pgc1,#3b82f6),var(--pgc2,#06b6d4));padding:6px 10px;border-radius:8px;text-align:center;line-height:1;letter-spacing:.5px;align-self:center} .pg-toc-title{font-family:'Outfit',sans-serif;font-size:15.5px;font-weight:700;color:var(--tx);line-height:1.4;letter-spacing:-.1px} .pg-toc-title em{font-style:normal;background:linear-gradient(135deg,var(--pgc1,#3b82f6),var(--pgc2,#06b6d4));-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:800} .pg-toc-date{font-family:'Outfit',sans-serif;font-size:10.5px;font-weight:800;color:#16a34a;letter-spacing:.4px;padding:3px 9px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.22);border-radius:100px;white-space:nowrap;justify-self:end;align-self:center} .pg-toc-cta{font-size:12.5px;font-weight:700;color:var(--blue);letter-spacing:.2px;white-space:nowrap;display:none} .pg-toc-head .pg-toc-updated{display:inline-block;margin-top:6px;font-size:11px;color:var(--tx3);letter-spacing:.3px} .pg-toc-head .pg-toc-updated time{font-family:'Outfit',sans-serif;font-weight:800;color:#16a34a;margin-left:6px;padding:2px 8px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.22);border-radius:100px;font-size:10.5px} .pg-back-row{max-width:1100px;margin:0 auto;padding:18px 24px 0} .pg-back{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--blue);border:1px solid var(--blue);border-radius:100px;font-size:12px;font-weight:700;color:#fff;text-decoration:none;letter-spacing:.2px;cursor:pointer;transition:.15s;box-shadow:0 4px 12px rgba(37,99,235,.28)} .pg-back:hover{background:#1d4ed8;border-color:#1d4ed8;transform:translateX(-2px);box-shadow:0 6px 16px rgba(37,99,235,.36)} .pg-section-wrap[data-pg-section]{display:none} .pg-section-wrap[data-pg-section].active{display:block} @media(max-width:720px){ .cat-hero{padding:90px 22px 48px} .cat-wrap{padding:0 16px;margin-top:28px} .cat-row,.pg-toc-row{grid-template-columns:80px 1fr;gap:14px;padding:14px 16px} .cat-cta{display:none} .cat-title,.pg-toc-title{font-size:14px} .cat-foot{grid-template-columns:1fr;text-align:center} .cat-statbar{grid-template-columns:repeat(2,1fr);margin-top:-28px} .pg-toc{padding:18px 16px 6px} .pg-toc-date{grid-column:2;justify-self:start;margin-top:4px} .mi-tabs{padding:22px 16px 0;gap:6px} .mi-tab{padding:8px 14px;font-size:12px} } @media(max-width:460px){ .cat-statbar{grid-template-columns:1fr} } /* ─── Sub-topic filter bar (long category lists, e.g. market-usa) ─── */ .cat-filter{display:flex;flex-wrap:wrap;gap:8px;max-width:1100px;margin:0 auto 18px;padding:0} .cat-filter-btn{padding:7px 16px;border-radius:100px;font-size:12.5px;font-weight:700;color:var(--tx2);background:var(--bg);border:1px solid var(--bdr);cursor:pointer;transition:.15s;font-family:'Plus Jakarta Sans',sans-serif} .cat-filter-btn:hover{border-color:var(--blue);color:var(--blue)} .cat-filter-btn.active{background:var(--blue);border-color:var(--blue);color:#fff} .cat-row.hide{display:none}