/* templateType: none isAvailableForNewContent: false */ /* ============================================================ DealerTeam Blog Theme — blog.css v2.0 Dark-mode-aware · Fully token-driven · HubSpot-compatible ============================================================ */ /* ── GOOGLE FONTS ────────────────────────────────────────────── */ /* Font loaded via in templates instead of @import */ /* ================================================================ LIGHT MODE TOKENS (default) ================================================================ */ :root { /* Brand */ --dt-blue: #0284C7; --dt-blue-dk: #0369A1; --dt-blue-bg: rgba(2, 132, 199, 0.06); --dt-blue-glow: rgba(2, 132, 199, 0.3); /* Surfaces */ --dt-bg: #F7F9FB; --dt-surface: #FFFFFF; --dt-surface-2: #F0F4F8; /* Borders */ --dt-border: #E4EAF0; --dt-border-md: #CBD5E1; /* Text */ --dt-text-dark: #0D1726; --dt-text-body: #344054; --dt-text-muted: #667085; --dt-text-subtle: #98A2B3; /* Gradients */ --dt-hero-bg: #FFFFFF; --dt-cta-bg-1: #0D1726; --dt-cta-bg-2: #0E3A60; --dt-cta-text: #94A3B8; /* Card placeholders */ --dt-ph-1: linear-gradient(145deg, #EFF6FF, #DBEAFE); --dt-ph-2: linear-gradient(145deg, #F0F9FF, #BAE6FD); --dt-ph-3: linear-gradient(145deg, #F0F9FF, #BFDBFE); --dt-ph-4: linear-gradient(145deg, #F0FDFF, #CFFAFE); --dt-ph-5: linear-gradient(145deg, #EEF2FF, #C7D2FE); /* Sidebar CTA gradient */ --dt-scta-bg: linear-gradient(145deg, #EFF6FF, #DBEAFE); --dt-scta-border: rgba(2, 132, 199, 0.18); /* Shadow */ --dt-shadow-sm: 0 2px 8px rgba(13, 23, 38, 0.05); --dt-shadow-md: 0 14px 40px rgba(13, 23, 38, 0.08); --dt-shadow-lg: 0 20px 52px rgba(13, 23, 38, 0.09); /* Prose distinction card */ --dt-dist-bg: #FFFFFF; /* Radius */ --dt-r: 12px; --dt-rL: 18px; /* Motion */ --dt-t: 0.22s ease; --dt-ease: cubic-bezier(0.22, 0.68, 0, 1.2); /* Layout */ --dt-max-w: 1140px; --dt-sidebar-w: 260px; /* Color scheme hint */ color-scheme: light; } /* ================================================================ DARK MODE TOKENS — auto-switches on OS/browser preference ================================================================ */ @media (prefers-color-scheme: dark) { :root { /* Brand (unchanged — stays DealerTeam blue) */ --dt-blue: #38BDF8; --dt-blue-dk: #0EA5E9; --dt-blue-bg: rgba(56, 189, 248, 0.08); --dt-blue-glow: rgba(56, 189, 248, 0.25); /* Surfaces */ --dt-bg: #0D1117; --dt-surface: #161B22; --dt-surface-2: #1C2128; /* Borders */ --dt-border: #30363D; --dt-border-md: #444C56; /* Text */ --dt-text-dark: #F0F6FC; --dt-text-body: #C9D1D9; --dt-text-muted: #8B949E; --dt-text-subtle: #6E7681; /* Hero / backgrounds */ --dt-hero-bg: #161B22; --dt-cta-bg-1: #010409; --dt-cta-bg-2: #0D1117; --dt-cta-text: #8B949E; /* Card placeholders (dark tints) */ --dt-ph-1: linear-gradient(145deg, #1c2a3a, #1e3448); --dt-ph-2: linear-gradient(145deg, #162030, #182840); --dt-ph-3: linear-gradient(145deg, #1a2035, #1e2a4a); --dt-ph-4: linear-gradient(145deg, #142830, #163238); --dt-ph-5: linear-gradient(145deg, #1c2040, #22284e); /* Sidebar CTA gradient (dark) */ --dt-scta-bg: linear-gradient(145deg, #161B22, #1C2128); --dt-scta-border: rgba(56, 189, 248, 0.15); /* Shadow (stronger in dark to show depth) */ --dt-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --dt-shadow-md: 0 14px 40px rgba(0, 0, 0, 0.5); --dt-shadow-lg: 0 20px 52px rgba(0, 0, 0, 0.6); /* Prose distinction card */ --dt-dist-bg: #1C2128; color-scheme: dark; } } /* ================================================================ MANUAL DARK MODE OVERRIDE (class-based, for a toggle switch) Add class="dt-dark" to or to force dark mode Add class="dt-light" to force light mode regardless of OS ================================================================ */ .dt-dark, .dt-dark :root { --dt-blue: #38BDF8; --dt-blue-dk: #0EA5E9; --dt-blue-bg: rgba(56, 189, 248, 0.08); --dt-blue-glow: rgba(56, 189, 248, 0.25); --dt-bg: #0D1117; --dt-surface: #161B22; --dt-surface-2: #1C2128; --dt-border: #30363D; --dt-border-md: #444C56; --dt-text-dark: #F0F6FC; --dt-text-body: #C9D1D9; --dt-text-muted: #8B949E; --dt-text-subtle: #6E7681; --dt-hero-bg: #161B22; --dt-cta-bg-1: #010409; --dt-cta-bg-2: #0D1117; --dt-cta-text: #8B949E; --dt-ph-1: linear-gradient(145deg, #1c2a3a, #1e3448); --dt-ph-2: linear-gradient(145deg, #162030, #182840); --dt-ph-3: linear-gradient(145deg, #1a2035, #1e2a4a); --dt-ph-4: linear-gradient(145deg, #142830, #163238); --dt-ph-5: linear-gradient(145deg, #1c2040, #22284e); --dt-scta-bg: linear-gradient(145deg, #161B22, #1C2128); --dt-scta-border: rgba(56, 189, 248, 0.15); --dt-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --dt-shadow-md: 0 14px 40px rgba(0, 0, 0, 0.5); --dt-shadow-lg: 0 20px 52px rgba(0, 0, 0, 0.6); --dt-dist-bg: #1C2128; color-scheme: dark; } .dt-light, .dt-light :root { color-scheme: light; /* All light defaults restored — no overrides needed */ } /* ================================================================ RESET & BASE ================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } html { scroll-behavior: smooth; } body { background-color: var(--dt-bg); color: var(--dt-text-body); font-family: 'Poppins', sans-serif; font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color 0.3s ease, color 0.3s ease; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* ================================================================ LAYOUT UTILITIES ================================================================ */ .dt-wrap { max-width: var(--dt-max-w); margin: 0 auto; padding: 0 48px; } /* ================================================================ ANIMATIONS ================================================================ */ @keyframes dt-fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .dt-a1 { animation: dt-fadeUp 0.48s ease 0.04s both; } .dt-a2 { animation: dt-fadeUp 0.48s ease 0.10s both; } .dt-a3 { animation: dt-fadeUp 0.48s ease 0.18s both; } .dt-a4 { animation: dt-fadeUp 0.48s ease 0.26s both; } .dt-a5 { animation: dt-fadeUp 0.48s ease 0.34s both; } /* ================================================================ DARK MODE THEME TOGGLE BUTTON ================================================================ */ .dt-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--dt-surface); border: 1px solid var(--dt-border); color: var(--dt-text-muted); cursor: pointer; transition: background var(--dt-t), border-color var(--dt-t), color var(--dt-t); } .dt-theme-toggle:hover { border-color: var(--dt-blue); color: var(--dt-blue); } .dt-theme-toggle .icon-sun { display: none; } .dt-theme-toggle .icon-moon { display: block; } @media (prefers-color-scheme: dark) { .dt-theme-toggle .icon-sun { display: block; } .dt-theme-toggle .icon-moon { display: none; } } .dt-dark .dt-theme-toggle .icon-sun { display: block; } .dt-dark .dt-theme-toggle .icon-moon { display: none; } /* ================================================================ BACK BAR ================================================================ */ .dt-back-bar { width: 100%; background: var(--dt-surface); border-bottom: 1px solid var(--dt-border); transition: background var(--dt-t), border-color var(--dt-t); } .dt-back-bar-inner { max-width: var(--dt-max-w); margin: 0 auto; padding: 0 48px; height: 52px; display: flex; align-items: center; justify-content: space-between; } .dt-breadcrumb { display: inline-flex !important; align-items: center !important; gap: 7px !important; font-size: 12px !important; font-weight: 500 !important; color: var(--dt-text-subtle) !important; font-family: 'Poppins', sans-serif !important; text-decoration: none !important; transition: color var(--dt-t); } .dt-breadcrumb:hover { color: var(--dt-blue) !important; } .dt-breadcrumb svg { transition: transform var(--dt-t); } .dt-breadcrumb:hover svg { transform: translateX(-3px); } /* ================================================================ HERO SECTION (Blog Listing) ================================================================ */ .dt-hero { background: var(--dt-hero-bg) !important; border-bottom: 1px solid var(--dt-border) !important; padding: 80px 48px 68px !important; text-align: center !important; font-family: 'Poppins', sans-serif !important; transition: background var(--dt-t), border-color var(--dt-t); } .dt-hero__title, .dt-hero h1 { font-size: clamp(40px, 6vw, 80px) !important; font-weight: 700 !important; line-height: 1.02 !important; letter-spacing: -3px !important; color: var(--dt-text-dark) !important; max-width: 900px !important; margin: 0 auto !important; font-family: 'Poppins', sans-serif !important; transition: color var(--dt-t); } .dt-hero__title em, .dt-hero h1 em { font-style: normal; } .title-gradient { background: linear-gradient(90deg, #2563eb 0%, #3b82f6 50%, #06b6d4 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 3s linear infinite; } .dt-hero__subtitle, .dt-hero p { font-size: clamp(15px, 1.5vw, 18px) !important; font-weight: 300 !important; color: var(--dt-text-muted) !important; max-width: 560px !important; margin: 16px auto 0 !important; line-height: 1.7 !important; font-family: 'Poppins', sans-serif !important; } /* ================================================================ FEATURED POST CARD ================================================================ */ .dt-featured { display: grid; grid-template-columns: 1.05fr 1fr; border-radius: var(--dt-rL); overflow: hidden; background: var(--dt-surface); border: 1px solid var(--dt-border); margin: 56px 0 68px; transition: box-shadow var(--dt-t), transform var(--dt-t), background var(--dt-t), border-color var(--dt-t); } .dt-featured:hover { box-shadow: var(--dt-shadow-lg); transform: translateY(-2px); } .dt-featured__img { overflow: hidden; min-height: 360px; background: var(--dt-ph-1); position: relative; } .dt-featured__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .dt-featured:hover .dt-featured__img img { transform: scale(1.03); } .dt-featured__pill { position: absolute; top: 16px; left: 16px; background: var(--dt-blue); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 11px; border-radius: 100px; } .dt-featured__copy { padding: 52px 56px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--dt-border); transition: border-color var(--dt-t); } .dt-featured__copy h2 { font-size: clamp(18px, 1.8vw, 26px) !important; font-weight: 700 !important; line-height: 1.28 !important; letter-spacing: -0.3px !important; color: var(--dt-text-dark) !important; margin-bottom: 14px !important; margin-top: 0 !important; padding: 0 !important; font-family: 'Poppins', sans-serif !important; transition: color var(--dt-t); } .dt-featured__copy p { font-size: 14px !important; font-weight: 300 !important; color: var(--dt-text-muted) !important; line-height: 1.8 !important; margin-bottom: 32px !important; font-family: 'Poppins', sans-serif !important; transition: color var(--dt-t); } .dt-featured__meta { font-size: 11.5px !important; color: var(--dt-text-subtle) !important; margin-bottom: 28px !important; font-family: 'Poppins', sans-serif !important; transition: color var(--dt-t); } .dt-featured__link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 100px; border: 1.5px solid var(--dt-blue); color: var(--dt-blue); font-size: 13px; font-weight: 600; transition: background var(--dt-t), color var(--dt-t); align-self: flex-start; } .dt-featured__link:hover { background: var(--dt-blue); color: #fff; } .dt-featured__link svg { transition: transform var(--dt-t); } .dt-featured:hover .dt-featured__link svg { transform: translateX(3px); } /* ================================================================ CARD GRID ================================================================ */ .dt-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .dt-list-head h2 { font-size: 16px !important; font-weight: 700 !important; color: var(--dt-text-dark) !important; letter-spacing: -0.2px !important; margin: 0 !important; padding: 0 !important; font-family: 'Poppins', sans-serif !important; transition: color var(--dt-t); } .dt-list-head__link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 18px; border-radius: 100px; border: 1.5px solid var(--dt-blue); color: var(--dt-blue); font-size: 12px; font-weight: 600; transition: background var(--dt-t), color var(--dt-t); } .dt-list-head__link:hover { background: var(--dt-blue); color: #fff; } .dt-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 60px; } /* 3-col variant */ .dt-cards--3col { grid-template-columns: repeat(3, 1fr); } .dt-card { background: var(--dt-surface); border: 1px solid var(--dt-border); border-radius: var(--dt-rL); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--dt-t), transform var(--dt-t), border-color var(--dt-t), background var(--dt-t); } .dt-card:hover { box-shadow: var(--dt-shadow-md); transform: translateY(-3px); border-color: rgba(2, 132, 199, 0.28); } .dt-card__thumb { width: 100%; aspect-ratio: 16/9; overflow: hidden; flex-shrink: 0; } .dt-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s ease; } .dt-card:hover .dt-card__thumb img { transform: scale(1.04); } /* Placeholder thumbnails */ .dt-card__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .dt-ph-1 { background: var(--dt-ph-1); } .dt-ph-2 { background: var(--dt-ph-2); } .dt-ph-3 { background: var(--dt-ph-3); } .dt-ph-4 { background: var(--dt-ph-4); } .dt-ph-5 { background: var(--dt-ph-5); } .dt-ph-svg { width: 32px; height: 32px; stroke: rgba(2,132,199,.2); fill: none; stroke-width: 1.5; } .dt-card__body { padding: 20px 22px 22px !important; display: flex !important; flex-direction: column !important; flex: 1 !important; } .dt-card__body h3 { font-size: 14.5px !important; font-weight: 600 !important; line-height: 1.42 !important; letter-spacing: -0.1px !important; color: var(--dt-text-dark) !important; margin-bottom: 8px !important; margin-top: 0 !important; padding: 0 !important; font-family: 'Poppins', sans-serif !important; transition: color var(--dt-t); } .dt-card__body p { font-size: 13px !important; font-weight: 300 !important; color: var(--dt-text-muted) !important; line-height: 1.68 !important; flex: 1 !important; font-family: 'Poppins', sans-serif !important; margin-bottom: 0 !important; transition: color var(--dt-t); } .dt-card__foot { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-top: 16px !important; } .dt-card__date { font-size: 11px !important; color: var(--dt-text-subtle) !important; font-family: 'Poppins', sans-serif !important; transition: color var(--dt-t); } .dt-card__arr { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--dt-border); color: var(--dt-text-subtle); transition: background var(--dt-t), border-color var(--dt-t), color var(--dt-t); } .dt-card:hover .dt-card__arr { background: var(--dt-blue); border-color: var(--dt-blue); color: #fff; } /* ================================================================ CTA BAND ================================================================ */ .dt-cta-band { display: flex; align-items: center; justify-content: space-between; gap: 36px; padding: 44px 52px; margin-bottom: 56px; border-radius: var(--dt-rL); background: linear-gradient(130deg, var(--dt-cta-bg-1) 0%, #0C2340 55%, var(--dt-cta-bg-2) 100%); overflow: hidden; position: relative; transition: background var(--dt-t); } .dt-cta-band::before { content: ''; position: absolute; right: -80px; top: -80px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, transparent 70%); pointer-events: none; } .dt-cta-band__text { position: relative; z-index: 1; } .dt-cta-band__text h2 { font-size: 22px !important; font-weight: 700 !important; color: #fff !important; letter-spacing: -0.4px !important; margin-bottom: 6px !important; margin-top: 0 !important; font-family: 'Poppins', sans-serif !important; line-height: 1.3 !important; } .dt-cta-band__text p { font-size: 13.5px !important; font-weight: 300 !important; color: var(--dt-cta-text) !important; max-width: 400px !important; font-family: 'Poppins', sans-serif !important; margin-bottom: 0 !important; transition: color var(--dt-t); } .dt-btn-band { position: relative; z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 11px 28px; border-radius: 100px; background: var(--dt-blue); color: #fff; border: 1.5px solid var(--dt-blue); font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; white-space: nowrap; transition: background var(--dt-t), transform var(--dt-t), border-color var(--dt-t); box-shadow: 0 4px 20px var(--dt-blue-glow); } .dt-btn-band:hover { background: var(--dt-blue-dk); border-color: var(--dt-blue-dk); transform: translateY(-1px); } /* ================================================================ NEWSLETTER ================================================================ */ .dt-newsletter { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 36px 48px; margin-bottom: 60px; border-radius: var(--dt-rL); background: var(--dt-surface); border: 1px solid var(--dt-border); transition: background var(--dt-t), border-color var(--dt-t); } .dt-newsletter__text h2 { font-size: 17px !important; font-weight: 700 !important; color: var(--dt-text-dark) !important; letter-spacing: -0.2px !important; margin-bottom: 4px !important; margin-top: 0 !important; font-family: 'Poppins', sans-serif !important; line-height: 1.3 !important; transition: color var(--dt-t); } .dt-newsletter__text p { font-size: 13px !important; font-weight: 300 !important; color: var(--dt-text-muted) !important; font-family: 'Poppins', sans-serif !important; margin-bottom: 0 !important; transition: color var(--dt-t); } .dt-newsletter__form { display: flex; gap: 8px; } .dt-newsletter__form input { padding: 10px 18px; width: 220px; border-radius: 100px; border: 1px solid var(--dt-border); font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--dt-text-dark); background: var(--dt-bg); outline: none; transition: border-color var(--dt-t), background var(--dt-t), color var(--dt-t); } .dt-newsletter__form input:focus { border-color: var(--dt-blue); } .dt-newsletter__form input::placeholder { color: var(--dt-text-subtle); } .dt-newsletter__form button { padding: 10px 22px; border: 1.5px solid var(--dt-blue); border-radius: 100px; cursor: pointer; background: var(--dt-blue); color: #fff; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; transition: background var(--dt-t), border-color var(--dt-t); } .dt-newsletter__form button:hover { background: var(--dt-blue-dk); border-color: var(--dt-blue-dk); } /* ── HubSpot Form overrides inside newsletter ──────────────── */ .dt-newsletter__form .hs-form { display: flex; align-items: flex-end; gap: 8px; flex-wrap: nowrap; } .dt-newsletter__form .hs-form fieldset { max-width: none !important; } .dt-newsletter__form .hs-form .hs-form-field { margin-bottom: 0; } .dt-newsletter__form .hs-form .hs-form-field > label { display: none !important; } .dt-newsletter__form .hs-form .input { margin-right: 0 !important; } .dt-newsletter__form .hs-form input[type="email"], .dt-newsletter__form .hs-form input[type="text"] { padding: 10px 18px !important; width: 220px !important; border-radius: 100px !important; border: 1px solid var(--dt-border) !important; font-family: 'Poppins', sans-serif !important; font-size: 13px !important; color: var(--dt-text-dark) !important; background: var(--dt-bg) !important; outline: none !important; box-shadow: none !important; height: auto !important; line-height: normal !important; transition: border-color var(--dt-t), background var(--dt-t), color var(--dt-t); } .dt-newsletter__form .hs-form input[type="email"]:focus, .dt-newsletter__form .hs-form input[type="text"]:focus { border-color: var(--dt-blue) !important; box-shadow: none !important; } .dt-newsletter__form .hs-form input::placeholder { color: var(--dt-text-subtle) !important; } .dt-newsletter__form .hs-form .hs-button, .dt-newsletter__form .hs-form input[type="submit"] { padding: 10px 22px !important; border: 1.5px solid var(--dt-blue) !important; border-radius: 100px !important; cursor: pointer; background: var(--dt-blue) !important; color: #fff !important; font-family: 'Poppins', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; white-space: nowrap; line-height: normal !important; height: auto !important; box-shadow: none !important; text-shadow: none !important; transition: background var(--dt-t), border-color var(--dt-t); } .dt-newsletter__form .hs-form .hs-button:hover, .dt-newsletter__form .hs-form input[type="submit"]:hover { background: var(--dt-blue-dk) !important; border-color: var(--dt-blue-dk) !important; } .dt-newsletter__form .hs-form .hs-error-msgs { position: absolute; margin-top: 4px; font-size: 11px; color: #ef4444; } .dt-newsletter__form .hs-form .hs-error-msgs label { color: #ef4444 !important; font-size: 11px !important; } .dt-newsletter__form .hs-form .submitted-message { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; color: var(--dt-blue); } /* Hide HubSpot legal/GDPR consent text if present */ .dt-newsletter__form .hs-form .legal-consent-container { display: none; } /* ================================================================ PAGINATION ================================================================ */ .dt-pager { display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 80px; } .dt-pg { width: 36px; height: 36px; border-radius: 100px; display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--dt-border); color: var(--dt-text-muted); background: var(--dt-surface); transition: all var(--dt-t); } .dt-pg:hover { border-color: var(--dt-blue); color: var(--dt-blue); background: var(--dt-blue-bg); } .dt-pg--active { background: var(--dt-blue); border-color: var(--dt-blue); color: #fff; font-weight: 600; } .dt-pg-dot { color: var(--dt-text-subtle); font-size: 14px; padding: 0 3px; user-select: none; } /* ================================================================ POST PAGE LAYOUT ================================================================ */ .dt-post-page { max-width: var(--dt-max-w) !important; margin: 0 auto !important; padding: 56px 48px 100px !important; display: grid !important; grid-template-columns: 1fr var(--dt-sidebar-w) !important; gap: 64px !important; align-items: start !important; font-family: 'Poppins', sans-serif !important; font-size: 15px !important; line-height: 1.7 !important; } .dt-article-col { min-width: 0 !important; } /* ================================================================ SERIES BADGE ================================================================ */ .dt-series-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 100px; background: var(--dt-blue-bg); border: 1px solid rgba(2, 132, 199, 0.2); margin-top: 8px; margin-bottom: 20px; transition: background var(--dt-t), border-color var(--dt-t); } @media (prefers-color-scheme: dark) { .dt-series-badge { border-color: rgba(56, 189, 248, 0.2); } } .dt-dark .dt-series-badge { border-color: rgba(56, 189, 248, 0.2); } .dt-series-badge__label { font-size: 9px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--dt-blue) !important; font-family: 'Poppins', sans-serif !important; } .dt-series-badge__title { font-size: 11px !important; font-weight: 500 !important; color: var(--dt-text-muted) !important; font-family: 'Poppins', sans-serif !important; } .dt-series-sep { width: 1px; height: 12px; background: var(--dt-border); } /* ================================================================ POST HEADER ================================================================ */ .dt-post-eyebrow { font-size: 10px !important; font-weight: 600 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--dt-blue) !important; margin-bottom: 14px !important; margin-top: 0 !important; padding: 0 !important; font-family: 'Poppins', sans-serif !important; transition: color var(--dt-t); } .dt-article-col h1 { font-size: clamp(26px, 3.2vw, 42px) !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -1.2px !important; color: var(--dt-text-dark) !important; margin-bottom: 8px !important; margin-top: 0 !important; padding: 0 !important; font-family: 'Poppins', sans-serif !important; transition: color var(--dt-t); } .dt-post-subtitle { font-size: 17px !important; font-weight: 400 !important; color: var(--dt-text-muted) !important; line-height: 1.6 !important; margin-bottom: 22px !important; margin-top: 0 !important; padding: 0 !important; font-family: 'Poppins', sans-serif !important; transition: color var(--dt-t); } .dt-post-meta { display: flex !important; align-items: center !important; gap: 16px !important; font-size: 12px !important; color: var(--dt-text-subtle) !important; padding-bottom: 28px !important; border-bottom: 1px solid var(--dt-border) !important; margin-bottom: 36px !important; margin-top: 0 !important; font-family: 'Poppins', sans-serif !important; transition: color var(--dt-t), border-color var(--dt-t); } .dt-post-meta-dot { width: 3px !important; height: 3px !important; border-radius: 50% !important; background: var(--dt-border) !important; flex-shrink: 0 !important; transition: background var(--dt-t); } /* ================================================================ HERO IMAGE ================================================================ */ .dt-post-hero-img { width: 100% !important; border-radius: var(--dt-rL) !important; overflow: hidden !important; margin-bottom: 44px !important; } .dt-post-hero-img img { width: 100% !important; height: auto !important; display: block !important; } /* ================================================================ PROSE (post body — styles RICH TEXT output) ================================================================ */ .dt-prose { color: var(--dt-text-body) !important; font-family: 'Poppins', sans-serif !important; font-size: 15px !important; line-height: 1.7 !important; transition: color var(--dt-t); } .dt-prose h2 { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.5px !important; color: var(--dt-text-dark) !important; margin: 48px 0 16px !important; scroll-margin-top: 80px; font-family: 'Poppins', sans-serif !important; line-height: 1.25 !important; padding: 0 !important; transition: color var(--dt-t); } .dt-prose h3 { font-size: 16px !important; font-weight: 700 !important; color: var(--dt-text-dark) !important; margin: 28px 0 10px !important; scroll-margin-top: 80px; font-family: 'Poppins', sans-serif !important; line-height: 1.3 !important; padding: 0 !important; letter-spacing: 0 !important; transition: color var(--dt-t); } .dt-prose h4 { font-size: 15px !important; font-weight: 700 !important; color: var(--dt-text-dark) !important; margin: 24px 0 8px !important; font-family: 'Poppins', sans-serif !important; line-height: 1.3 !important; padding: 0 !important; } .dt-prose p { margin-bottom: 22px !important; line-height: 1.85 !important; font-size: 15px !important; margin-top: 0 !important; font-family: 'Poppins', sans-serif !important; color: var(--dt-text-body) !important; } .dt-prose strong { font-weight: 700 !important; color: var(--dt-text-dark) !important; transition: color var(--dt-t); } .dt-prose em { font-style: italic !important; color: var(--dt-text-muted) !important; } .dt-prose a { color: var(--dt-blue) !important; text-decoration: underline !important; text-decoration-color: var(--dt-blue-bg) !important; transition: text-decoration-color var(--dt-t); } .dt-prose a:hover { text-decoration-color: var(--dt-blue) !important; } .dt-prose ul { list-style: none !important; padding: 0 !important; margin: 0 0 20px !important; } .dt-prose ul li { position: relative !important; padding-left: 18px !important; margin-bottom: 8px !important; line-height: 1.75 !important; font-size: 15px !important; } .dt-prose ul li::before { content: '' !important; position: absolute !important; left: 0 !important; top: 9px !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: var(--dt-blue) !important; } .dt-prose ol { padding-left: 22px !important; margin: 0 0 20px !important; } .dt-prose ol li { margin-bottom: 8px !important; line-height: 1.75 !important; font-size: 15px !important; } .dt-prose blockquote { border-left: 3px solid var(--dt-blue) !important; padding: 14px 20px !important; margin: 28px 0 !important; background: var(--dt-blue-bg) !important; border-radius: 0 var(--dt-r) var(--dt-r) 0 !important; font-style: italic !important; color: var(--dt-text-dark) !important; transition: background var(--dt-t), color var(--dt-t); } .dt-prose code { background: var(--dt-surface-2) !important; border: 1px solid var(--dt-border) !important; border-radius: 4px !important; padding: 2px 6px !important; font-size: 13px !important; font-family: 'SF Mono', 'Fira Code', monospace !important; color: var(--dt-blue) !important; transition: background var(--dt-t), border-color var(--dt-t); } .dt-prose pre { background: var(--dt-surface-2) !important; border: 1px solid var(--dt-border) !important; border-radius: var(--dt-r) !important; padding: 20px 24px !important; overflow-x: auto !important; margin: 24px 0 !important; transition: background var(--dt-t), border-color var(--dt-t); } .dt-prose pre code { background: none !important; border: none !important; padding: 0 !important; } .dt-prose hr { border: none !important; border-top: 1px solid var(--dt-border) !important; margin: 36px 0 !important; transition: border-color var(--dt-t); } .dt-prose img { border-radius: var(--dt-r) !important; margin: 24px 0 !important; max-width: 100% !important; height: auto !important; } .dt-prose table { width: 100% !important; border-collapse: collapse !important; margin: 24px 0 !important; font-size: 14px !important; } .dt-prose th { background: var(--dt-surface-2) !important; color: var(--dt-text-dark) !important; font-weight: 600 !important; padding: 10px 14px !important; border: 1px solid var(--dt-border) !important; text-align: left !important; transition: background var(--dt-t), color var(--dt-t), border-color var(--dt-t); } .dt-prose td { padding: 10px 14px !important; border: 1px solid var(--dt-border) !important; color: var(--dt-text-body) !important; font-size: 14px !important; transition: border-color var(--dt-t), color var(--dt-t); } .dt-prose tr:nth-child(even) td { background: var(--dt-surface-2) !important; transition: background var(--dt-t); } /* ================================================================ PULL QUOTE ================================================================ */ .dt-pull-quote { border-left: 3px solid var(--dt-blue); padding: 18px 24px; margin: 36px 0; background: var(--dt-blue-bg); border-radius: 0 var(--dt-r) var(--dt-r) 0; transition: background var(--dt-t); } .dt-pull-quote p { font-size: 17px; font-weight: 600; color: var(--dt-text-dark); line-height: 1.55; margin: 0; font-style: normal; letter-spacing: -0.2px; transition: color var(--dt-t); } /* ================================================================ DISTINCTION CARD (architecture comparison) ================================================================ */ .dt-distinction { background: var(--dt-surface); border: 1px solid var(--dt-border); border-radius: var(--dt-rL); padding: 0; margin: 36px 0; overflow: hidden; transition: background var(--dt-t), border-color var(--dt-t); } .dt-distinction__head { padding: 20px 28px 16px; border-bottom: 1px solid var(--dt-border); transition: border-color var(--dt-t); } .dt-distinction__head p { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--dt-text-subtle); margin: 0; transition: color var(--dt-t); } .dt-distinction__body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .dt-dist-col { padding: 22px 24px; border-right: 1px solid var(--dt-border); transition: border-color var(--dt-t), background var(--dt-t); } .dt-dist-col:last-child { border-right: none; } .dt-dist-col h4 { font-size: 12px; font-weight: 700; color: var(--dt-text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; transition: color var(--dt-t); } .dt-dist-col p { font-size: 13px; color: var(--dt-text-body); line-height: 1.65; margin: 0; transition: color var(--dt-t); } .dt-dist-col--highlight { background: var(--dt-blue-bg); } .dt-dist-col--highlight h4 { color: var(--dt-blue); } /* ================================================================ DEMAND LIST ================================================================ */ .dt-demand-list { list-style: none; padding: 0; margin: 20px 0; display: flex; flex-direction: column; gap: 10px; } .dt-demand-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--dt-text-body); line-height: 1.7; transition: color var(--dt-t); } .dt-demand-list li::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--dt-blue); margin-top: 8px; } /* ================================================================ INLINE CTA ================================================================ */ .dt-inline-cta { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 40px !important; padding: 40px 48px !important; margin: 48px 0 !important; border-radius: 16px !important; background: var(--dt-surface) !important; border: 1px solid var(--dt-border) !important; flex-direction: row !important; flex-wrap: nowrap !important; font-family: 'Poppins', sans-serif !important; transition: background var(--dt-t), border-color var(--dt-t); } .dt-inline-cta__eyebrow { display: inline-block !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; color: var(--dt-blue) !important; margin-bottom: 10px !important; font-family: 'Poppins', sans-serif !important; transition: color var(--dt-t); } .dt-inline-cta__headline { font-size: 20px !important; font-weight: 700 !important; color: var(--dt-text-dark) !important; margin: 0 0 6px !important; line-height: 1.25 !important; letter-spacing: -0.4px !important; font-family: 'Poppins', sans-serif !important; transition: color var(--dt-t); } .dt-inline-cta__sub { display: block !important; font-size: 13px !important; font-weight: 300 !important; color: var(--dt-text-muted) !important; line-height: 1.6 !important; font-family: 'Poppins', sans-serif !important; transition: color var(--dt-t); } .dt-btn-cta { flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 14px 30px !important; border-radius: 100px !important; background: var(--dt-blue) !important; color: #fff !important; border: 1.5px solid var(--dt-blue) !important; font-family: 'Poppins', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; white-space: nowrap !important; text-decoration: none !important; line-height: 1.4 !important; letter-spacing: 0 !important; text-indent: 0 !important; text-align: center !important; -webkit-text-fill-color: #fff !important; overflow: visible !important; width: auto !important; height: auto !important; transition: background var(--dt-t), transform var(--dt-t), border-color var(--dt-t); box-shadow: 0 4px 18px var(--dt-blue-glow) !important; } .dt-btn-cta:hover { background: var(--dt-blue-dk) !important; border-color: var(--dt-blue-dk) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; transform: translateY(-1px); } .dt-btn-cta svg { stroke: #fff !important; } /* Override prose link styles when CTA is inside article body */ .dt-prose .dt-inline-cta { text-decoration: none !important; } .dt-prose .dt-inline-cta a, .dt-prose a.dt-btn-cta, .dt-prose .dt-btn-cta, a.dt-btn-cta { color: #fff !important; -webkit-text-fill-color: #fff !important; text-decoration: none !important; font-size: 14px !important; font-weight: 600 !important; font-family: 'Poppins', sans-serif !important; background: var(--dt-blue) !important; } .dt-prose .dt-inline-cta .dt-inline-cta__headline, .dt-prose .dt-inline-cta p { color: var(--dt-text-dark) !important; -webkit-text-fill-color: var(--dt-text-dark) !important; text-decoration: none !important; font-size: 20px !important; margin-bottom: 6px !important; } .dt-prose .dt-inline-cta .dt-inline-cta__eyebrow { color: var(--dt-blue) !important; -webkit-text-fill-color: var(--dt-blue) !important; font-size: 9px !important; text-decoration: none !important; } .dt-prose .dt-inline-cta .dt-inline-cta__sub { color: var(--dt-text-muted) !important; -webkit-text-fill-color: var(--dt-text-muted) !important; text-decoration: none !important; } /* ================================================================ PART 2 TEASER ================================================================ */ .dt-part-teaser { background: var(--dt-cta-bg-1); border-radius: var(--dt-rL); padding: 36px 40px; margin: 52px 0; border: 1px solid var(--dt-border); transition: background var(--dt-t), border-color var(--dt-t); } .dt-part-teaser h3 { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 12px; } .dt-part-teaser h2 { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.3px; margin-bottom: 18px; line-height: 1.3; } .dt-part-teaser ul { list-style: none; padding: 0; margin-bottom: 24px; display: flex; flex-direction: column; gap: 8px; } .dt-part-teaser ul li { font-size: 13px; color: rgba(255,255,255,.7); padding-left: 18px; position: relative; line-height: 1.6; } .dt-part-teaser ul li::before { content: '→'; position: absolute; left: 0; color: var(--dt-blue); font-weight: 600; } /* ================================================================ POST TAGS ================================================================ */ .dt-post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--dt-border); transition: border-color var(--dt-t); } .dt-tag { display: inline-block; padding: 5px 14px; border-radius: 100px; border: 1px solid var(--dt-border); font-size: 11px; font-weight: 500; color: var(--dt-text-muted); transition: border-color var(--dt-t), color var(--dt-t), background var(--dt-t); } .dt-tag:hover { border-color: var(--dt-blue); color: var(--dt-blue); background: var(--dt-blue-bg); } /* ================================================================ SIDEBAR ================================================================ */ .dt-sidebar { position: sticky !important; top: 40px !important; display: flex !important; flex-direction: column !important; gap: 20px !important; font-family: 'Poppins', sans-serif !important; } .dt-widget { background: var(--dt-surface) !important; border: 1px solid var(--dt-border) !important; border-radius: var(--dt-rL) !important; padding: 20px 22px !important; transition: background var(--dt-t), border-color var(--dt-t); } .dt-widget__label { font-size: 10px !important; font-weight: 600 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; color: var(--dt-text-subtle) !important; margin-bottom: 12px !important; font-family: 'Poppins', sans-serif !important; transition: color var(--dt-t); } /* TOC */ .dt-toc { list-style: none !important; display: flex !important; flex-direction: column !important; gap: 1px !important; padding: 0 !important; margin: 0 !important; } .dt-toc li { padding: 0 !important; margin: 0 !important; list-style: none !important; } .dt-toc li::before { display: none !important; } .dt-toc a { display: block !important; font-size: 12.5px !important; font-weight: 400 !important; color: var(--dt-text-muted) !important; padding: 6px 10px 6px 14px !important; border-left: 2px solid transparent !important; border-radius: 0 var(--dt-r) var(--dt-r) 0 !important; transition: all var(--dt-t); line-height: 1.4 !important; font-family: 'Poppins', sans-serif !important; text-decoration: none !important; } .dt-toc a:hover { color: var(--dt-blue) !important; border-left-color: var(--dt-blue) !important; background: var(--dt-blue-bg) !important; } .dt-toc a.dt-toc--active { color: var(--dt-blue) !important; border-left-color: var(--dt-blue) !important; background: var(--dt-blue-bg) !important; font-weight: 600 !important; } /* Series sidebar widget */ .dt-series-part { display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important; border-radius: var(--dt-r) !important; margin-bottom: 4px !important; transition: background var(--dt-t); } .dt-series-part--active { background: var(--dt-blue-bg) !important; } .dt-series-part__num { flex-shrink: 0 !important; width: 26px !important; height: 26px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 11px !important; font-weight: 700 !important; font-family: 'Poppins', sans-serif !important; transition: background var(--dt-t), color var(--dt-t), border-color var(--dt-t); } .dt-series-part--active .dt-series-part__num { background: var(--dt-blue) !important; color: #fff !important; } .dt-series-part:not(.dt-series-part--active) .dt-series-part__num { background: var(--dt-bg) !important; color: var(--dt-text-subtle) !important; border: 1px solid var(--dt-border) !important; } .dt-series-part__text { font-size: 12px !important; line-height: 1.4 !important; font-family: 'Poppins', sans-serif !important; } .dt-series-part--active .dt-series-part__text { font-weight: 600 !important; color: var(--dt-text-dark) !important; } .dt-series-part:not(.dt-series-part--active) .dt-series-part__text { color: var(--dt-text-muted) !important; } .dt-series-part__sublabel { display: block !important; font-size: 10px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: var(--dt-text-subtle) !important; margin-bottom: 2px !important; font-family: 'Poppins', sans-serif !important; } .dt-series-part--active .dt-series-part__sublabel { color: var(--dt-blue) !important; } /* Sidebar CTA */ .dt-sidebar-cta { background: var(--dt-scta-bg) !important; border: 1px solid var(--dt-scta-border) !important; border-radius: var(--dt-rL) !important; padding: 24px 22px !important; text-align: center !important; transition: background var(--dt-t), border-color var(--dt-t); } .dt-sidebar-cta h3 { font-size: 14px !important; font-weight: 700 !important; color: var(--dt-text-dark) !important; margin-bottom: 8px !important; margin-top: 0 !important; font-family: 'Poppins', sans-serif !important; line-height: 1.3 !important; transition: color var(--dt-t); } .dt-sidebar-cta p { font-size: 12px !important; font-weight: 300 !important; color: var(--dt-text-muted) !important; margin-bottom: 18px !important; line-height: 1.6 !important; font-family: 'Poppins', sans-serif !important; transition: color var(--dt-t); } .dt-btn-sidebar { display: block !important; width: 100% !important; padding: 11px 20px !important; border-radius: 100px !important; background: var(--dt-blue) !important; color: #fff !important; border: 1.5px solid var(--dt-blue) !important; font-family: 'Poppins', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; text-align: center !important; text-decoration: none !important; transition: background var(--dt-t), border-color var(--dt-t); box-shadow: 0 3px 12px var(--dt-blue-glow) !important; } .dt-btn-sidebar:hover { background: var(--dt-blue-dk) !important; border-color: var(--dt-blue-dk) !important; color: #fff !important; } /* ================================================================ RESPONSIVE ================================================================ */ /* ── 960px — Tablet landscape / small desktop ── */ @media (max-width: 960px) { /* Layout */ .dt-hero { padding: 56px 28px 48px; } .dt-wrap { padding: 0 28px; } .dt-back-bar-inner { padding: 0 28px; } /* Hero typography */ .dt-hero h1 { font-size: 52px; letter-spacing: -2.5px; } /* Featured card — stack vertically */ .dt-featured { grid-template-columns: 1fr; margin: 36px 0 48px; } .dt-featured__img { min-height: 220px; } .dt-featured__copy { border-left: none; border-top: 1px solid var(--dt-border); padding: 28px 32px; } /* Cards — 2-col */ .dt-cards--3col { grid-template-columns: repeat(2, 1fr); } /* CTA band — stack */ .dt-cta-band { flex-direction: column; align-items: flex-start; padding: 36px 32px; gap: 20px; } /* Newsletter — stack */ .dt-newsletter { flex-direction: column; gap: 20px; padding: 32px; } .dt-newsletter__form { width: 100%; } .dt-newsletter__form input { flex: 1; width: auto; min-width: 0; } /* Post layout — single column, sidebar goes below */ .dt-post-page { grid-template-columns: 1fr !important; gap: 0 !important; padding: 40px 28px 80px !important; } .dt-sidebar { position: static !important; flex-direction: row !important; flex-wrap: wrap !important; margin-top: 48px !important; } .dt-sidebar .dt-widget, .dt-sidebar .dt-sidebar-cta { flex: 1 !important; min-width: 220px !important; } /* Inline CTA — stack */ .dt-inline-cta { flex-direction: column !important; align-items: flex-start !important; padding: 28px 32px !important; gap: 20px !important; } .dt-inline-cta .dt-btn-cta { width: 100% !important; justify-content: center !important; white-space: normal !important; text-align: center !important; } /* Distinction card — single column */ .dt-distinction__body { grid-template-columns: 1fr; } .dt-dist-col { border-right: none; border-bottom: 1px solid var(--dt-border); } .dt-dist-col:last-child { border-bottom: none; } } /* ── 620px — Tablet portrait / large mobile ── */ @media (max-width: 620px) { /* Layout */ .dt-hero { padding: 44px 18px 38px; } .dt-wrap { padding: 0 18px; } .dt-back-bar-inner { padding: 0 18px; } .dt-back-bar { height: 46px; } /* Hero typography */ .dt-hero h1 { font-size: 36px; letter-spacing: -1.5px; } .dt-hero p { font-size: 14px; } /* Featured */ .dt-featured { margin: 28px 0 36px; } .dt-featured__copy { padding: 22px 20px; } .dt-featured__copy h2 { font-size: 17px; } /* Cards — 1-col */ .dt-cards { grid-template-columns: 1fr; } .dt-cards--3col { grid-template-columns: 1fr; } /* CTA band */ .dt-cta-band { padding: 26px 20px; gap: 18px; } .dt-cta-band h2 { font-size: 18px; } .dt-btn-band { width: 100%; justify-content: center; text-align: center; } /* Newsletter */ .dt-newsletter { padding: 24px 20px; gap: 16px; } .dt-newsletter__form { flex-direction: column; gap: 8px; } .dt-newsletter__form input { width: 100%; } .dt-newsletter__form button { width: 100%; text-align: center; } /* Post */ .dt-post-page { padding: 28px 18px 64px !important; } .dt-article-col h1 { font-size: 26px !important; letter-spacing: -0.6px !important; } .dt-post-subtitle { font-size: 14px !important; } .dt-post-meta { gap: 6px !important; font-size: 10px !important; flex-wrap: wrap !important; } .dt-post-meta .dt-post-meta-dot { display: none !important; } /* Inline CTA */ .dt-inline-cta { flex-direction: column !important; align-items: stretch !important; padding: 24px 20px !important; gap: 16px !important; } .dt-inline-cta .dt-btn-cta { width: 100% !important; justify-content: center !important; text-align: center !important; padding: 12px 20px !important; font-size: 13px !important; } .dt-inline-cta__headline { font-size: 17px !important; } /* Part teaser */ .dt-part-teaser { padding: 22px 18px; } /* Sidebar — full stack on mobile */ .dt-sidebar { flex-direction: column !important; } .dt-sidebar .dt-widget, .dt-sidebar .dt-sidebar-cta { flex: none !important; min-width: 0 !important; width: 100% !important; } /* Pagination — compact */ .dt-pager { gap: 2px; padding-bottom: 48px; } .dt-pager-btn { width: 30px; height: 30px; font-size: 11px; } /* Post hero image */ .dt-post-hero-img { height: 160px; } } /* ── 400px — Small mobile ── */ @media (max-width: 400px) { .dt-hero h1 { font-size: 28px; letter-spacing: -1px; } .dt-hero p { font-size: 13px; } .dt-featured__copy h2 { font-size: 14px; } .dt-post-page__title { font-size: 22px; } .dt-series-badge { flex-wrap: wrap; } .dt-back-bar-inner { padding: 0 14px; } .dt-wrap { padding: 0 14px; } } /* ================================================================ PRINT STYLES ================================================================ */ @media print { .dt-back-bar, .dt-sidebar, .dt-inline-cta, .dt-part-teaser, .dt-cta-band, .dt-newsletter, .dt-pager { display: none; } .dt-post-page { grid-template-columns: 1fr; padding: 0; } .dt-prose h2, .dt-prose h3 { break-after: avoid; } } /* ================================================================ SIDEBAR CTA STYLE VARIANTS ================================================================ */ .dt-sidebar-cta--dark { background: var(--dt-cta-bg-1); border-color: var(--dt-border); } .dt-sidebar-cta--dark h3, .dt-sidebar-cta--dark p { color: rgba(255,255,255,0.85); } .dt-sidebar-cta--minimal { background: transparent; border: 1.5px solid var(--dt-border); } /* ================================================================ PULL QUOTE VARIANTS ================================================================ */ .dt-pull-quote--centered { border-left: none; text-align: center; border-top: 2px solid var(--dt-blue); border-bottom: 2px solid var(--dt-blue); border-radius: var(--dt-r); padding: 24px 32px; } .dt-pull-quote--dark { background: var(--dt-cta-bg-1); border-left: 3px solid var(--dt-blue); border-radius: 0 var(--dt-r) var(--dt-r) 0; } .dt-pull-quote--dark p { color: #fff; } /* ================================================================ POST PAGE — no sidebar variant ================================================================ */ .dt-post-page--no-sidebar { grid-template-columns: 1fr; max-width: 780px; } /* ================================================================ POST TAGS — no border variant ================================================================ */ .dt-post-tags--no-border { border-top: none; padding-top: 0; } /* ================================================================ CARD LINK — make entire card clickable without nesting ================================================================ */ .dt-card__link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }