/* td-insights.css Turbo Digital Insights shared stylesheet Usage: wrap each article page in ... and use the td-ins-* classes below. */ .td-ins-root{ /* Theme tokens */ --td-ins-bg:#0b0f14; --td-ins-card:#111826; --td-ins-muted:#93a4b8; --td-ins-text:#e9f0fb; --td-ins-accent:#c8a04a; /* Turbo Digital gold */ --td-ins-accent2:#4e8b73; /* secondary */ --td-ins-border:rgba(255,255,255,.10); --td-ins-shadow: 0 10px 30px rgba(0,0,0,.35); --td-ins-radius:18px; --td-ins-max: 900px; --td-ins-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; --td-ins-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; --td-ins-lh: 1.65; margin:0; font-family:var(--td-ins-font); line-height:var(--td-ins-lh); color:var(--td-ins-text); background: radial-gradient(1200px 600px at 20% -10%, rgba(200,160,74,.18), transparent 60%), radial-gradient(900px 600px at 95% 15%, rgba(78,139,115,.14), transparent 55%), var(--td-ins-bg); } .td-ins-root *{ box-sizing:border-box; } /* scoped base elements */ .td-ins-root a{ color:var(--td-ins-text); text-decoration:none; } .td-ins-root a:hover{ text-decoration: underline; text-decoration-color: rgba(200,160,74,.7); } /* layout */ .td-ins-wrap{ max-width:var(--td-ins-max); margin:0 auto; padding:28px 18px 60px; } .td-ins-topbar{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding:14px 16px; border:1px solid var(--td-ins-border); border-radius:999px; background: rgba(17,24,38,.65); backdrop-filter: blur(10px); } .td-ins-brand{ display:flex; align-items:center; gap:12px; } /* .td-ins-logo{ width:34px; height:34px; border-radius:10px; background: linear-gradient(135deg, rgba(200,160,74,.95), rgba(200,160,74,.45)); box-shadow: 0 8px 18px rgba(200,160,74,.15); } */ .td-ins-logo{ height:32px; /* controls visual size */ width:auto; /* preserve aspect ratio */ max-width:160px; /* safety cap for very wide logos */ display:block; object-fit:contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); } .td-ins-nav a{ margin-left:12px; color:var(--td-ins-muted); } .td-ins-nav a:hover{ color:var(--td-ins-text); } .td-ins-hero{ margin-top:24px; } .td-ins-kicker{ display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid var(--td-ins-border); color:var(--td-ins-muted); background: rgba(17,24,38,.55); font-size: 13px; } .td-ins-dot{ width:8px; height:8px; border-radius:999px; background: var(--td-ins-accent); box-shadow: 0 0 0 6px rgba(200,160,74,.12); } .td-ins-h1{ margin:14px 0 10px; font-size: clamp(28px, 3.2vw, 42px); line-height:1.15; letter-spacing:-.4px; } .td-ins-meta{ display:flex; flex-wrap:wrap; gap:10px 14px; color:var(--td-ins-muted); font-size: 14px; margin-bottom: 18px; } .td-ins-pill{ border:1px solid var(--td-ins-border); padding:6px 10px; border-radius:999px; background: rgba(17,24,38,.55); } /* cards + grid */ .td-ins-card{ border:1px solid var(--td-ins-border); background: rgba(17,24,38,.62); border-radius: var(--td-ins-radius); box-shadow: var(--td-ins-shadow); overflow:hidden; } .td-ins-card-inner{ padding:18px; } .td-ins-grid{ display:grid; grid-template-columns: 1fr; gap:16px; } @media (min-width: 920px){ .td-ins-grid{ grid-template-columns: 280px 1fr; align-items:start; } .td-ins-sticky{ position: sticky; top: 18px; } } /* toc */ .td-ins-toc h2, .td-ins-content h2{ font-size: 18px; margin: 0 0 10px; letter-spacing: -.2px; } .td-ins-toc ol{ margin:0; padding-left:18px; color: var(--td-ins-muted); } .td-ins-toc li{ margin:8px 0; } .td-ins-toc a{ color: var(--td-ins-muted); } .td-ins-toc a:hover{ color: var(--td-ins-text); } /* content typography */ .td-ins-content h2{ margin-top: 26px; font-size: 22px; } .td-ins-content h3{ margin-top: 18px; font-size: 18px; color: rgba(233,240,251,.92); } .td-ins-content p{ margin:10px 0; color: rgba(233,240,251,.92); } .td-ins-content ul, .td-ins-content ol{ margin:10px 0; padding-left:22px; color: rgba(233,240,251,.92); } .td-ins-content li{ margin:8px 0; } /* callouts, code-ish */ .td-ins-callout{ border: 1px solid rgba(200,160,74,.28); background: linear-gradient(135deg, rgba(200,160,74,.12), rgba(17,24,38,.35)); padding: 14px; border-radius: 16px; margin: 18px 0; } .td-ins-callout strong{ color: var(--td-ins-text); } .td-ins-kbd{ font-family: var(--td-ins-mono); font-size: 12.5px; padding: 2px 6px; border: 1px solid var(--td-ins-border); border-bottom-color: rgba(255,255,255,.22); border-radius: 8px; background: rgba(11,15,20,.65); color: rgba(233,240,251,.92); } /* separators + footer */ .td-ins-hr{ height:1px; background: var(--td-ins-border); margin: 14px 0; } .td-ins-footer{ margin-top: 22px; color: var(--td-ins-muted); font-size: 13px; text-align: center; } /* CTA */ .td-ins-cta{ margin-top: 26px; border: 1px solid rgba(78,139,115,.28); background: linear-gradient(135deg, rgba(78,139,115,.12), rgba(17,24,38,.35)); padding: 16px; border-radius: 18px; } .td-ins-cta h3{ margin:0 0 6px; } .td-ins-cta p{ margin:0 0 10px; color: rgba(233,240,251,.9); } .td-ins-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(200,160,74,.55); background: rgba(200,160,74,.18); color: var(--td-ins-text); font-weight: 600; letter-spacing:.1px; } .td-ins-btn:hover{ background: rgba(200,160,74,.24); text-decoration:none; } /* table styling (for article 2 and 3) */ .td-ins-table{ width:100%; border-collapse: separate; border-spacing: 0; overflow:hidden; border:1px solid var(--td-ins-border); border-radius: 16px; background: rgba(11,15,20,.35); margin: 14px 0 8px; } .td-ins-table th, .td-ins-table td{ padding: 12px; border-bottom: 1px solid var(--td-ins-border); vertical-align: top; text-align:left; } .td-ins-table th{ color: rgba(233,240,251,.95); font-weight:700; background: rgba(17,24,38,.55); } .td-ins-table td{ color: rgba(233,240,251,.90); } .td-ins-table tr:last-child td{ border-bottom:none; } /* small tags (article 2) */ .td-ins-tag{ display:inline-block; font-size: 12px; padding: 3px 8px; border-radius:999px; border:1px solid var(--td-ins-border); color: var(--td-ins-muted); background: rgba(17,24,38,.45); margin-right: 6px; margin-top: 6px; }