/* ============================================================================ * tti-course-desktop.css * Enterprise desktop rendering for /courses// (post_type=courses) * Scope: ≥1024px. * * Layout: asymmetric grid with sticky pricing sidebar. * main.tti-course → grid "hero hero" / "body aside" / "cta cta" * max-width 1200px, column-gap 40px. * * Class map reference (post-- prefix stripped): * see tti-course-tablet.css header for full map. * ========================================================================== */ @media (min-width: 1024px){ /* ---- Cross-viewport hides (relocated from mobile.css 2026-04-24) ---- * These 3 rules were previously in tti-course-mobile.css inside a stray * @media (min-width: 768px) block. Copied here per user request so the * mobile file is fully isolated to <=767px. More-specific rules later * in this file (e.g. .tti-hero{display:block !important}) override these * where desktop needs the element visible. */ .tti-course-sticky{display:none !important} .tti-hero{display:none !important} .tti-course-final-cta{display:none !important} /* ---- Wallpaper ------------------------------------------------------- */ html, body{ background:linear-gradient(180deg, #500000 0%, #4c0404 100%) !important; background-attachment:fixed !important; color:#0f0f10; } body.single-courses{ font-family:'Epilogue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; } /* ---- Container (flex column, full-width) ---------------------------- */ main.tti-course{ max-width:1180px !important; margin:0 auto !important; padding:48px 32px 120px !important; display:flex !important; flex-direction:column !important; gap:40px !important; font-size:16.5px; line-height:1.68; color:#0f0f10; } main.tti-course, main.tti-course *, main.tti-course *::before, main.tti-course *::after{box-sizing:border-box; max-width:100%} /* Force every Droip wrapper between main and our section cards to fill the width — Droip ships them as narrow flex columns with inline widths. */ main.tti-course > .droip-body, main.tti-course > [class*="droip-body"], main.tti-course .droip-body, main.tti-course .droip-container, main.tti-course [class*="droip-container"], main.tti-course > div > [class*="post-3206-section"], main.tti-course [class*="post-3206-section"], main.tti-course [class*="post-3206-dped6anj"], main.tti-course [class*="dptbqvj2"], main.tti-course [class*="dp8h97bx"], main.tti-course [class*="dp436lui"], main.tti-course [class*="dptk43sj"], main.tti-course [class*="dpwcywdl"], main.tti-course [class*="dp0lc8fb"], main.tti-course [class*="dpixfqu2"], main.tti-course [class*="dpu7rh63"]{ width:100% !important; max-width:100% !important; flex:1 0 auto !important; margin-left:0 !important; margin-right:0 !important; } /* Outer chrome wrappers — strip styling, just flow gap */ main.tti-course > .droip-body, main.tti-course > [class*="droip-body"], main.tti-course .droip-body, main.tti-course .droip-container, main.tti-course [class*="droip-container"], main.tti-course [class*="post-3206-section"], main.tti-course [class*="post-3206-dped6anj"]{ display:flex !important; flex-direction:column !important; gap:40px !important; padding:0 !important; background:transparent !important; border:0 !important; } /* Hero fills full width */ main.tti-course .tti-hero{display:block !important} /* Sticky bar hidden on desktop (hero + final CTA handle conversion) */ main.tti-course .tti-course-sticky{display:none !important} /* Sticky pricing aside removed — hero + final CTA handle conversion */ /* ---- Typography ------------------------------------------------------ */ main.tti-course h1{ font-size:clamp(40px, 3.8vw, 52px) !important; line-height:1.1 !important; font-weight:800 !important; letter-spacing:-0.02em !important; color:#fff !important; margin:0 0 16px !important; } main.tti-course h2{ font-size:clamp(26px, 2.4vw, 30px) !important; line-height:1.2 !important; font-weight:800 !important; color:#0f0f10 !important; margin:0 0 20px !important; padding:0 0 12px !important; position:relative; } main.tti-course h2::after{ content:""; position:absolute; left:0; bottom:0; width:56px; height:3px; background:#7a0012; border-radius:2px; } main.tti-course h3{ font-size:19px !important; line-height:1.3 !important; font-weight:700 !important; margin:14px 0 6px !important; color:#0f0f10 !important; } main.tti-course p{ margin:0 0 14px; font-size:16.5px; line-height:1.7; color:#0f0f10; max-width:62ch; } main.tti-course a{ color:#7a0012; text-decoration:underline; text-underline-offset:2px; } /* ===================================================================== * HERO — full-width with 2-col interior (content left, price right) * =================================================================== */ main.tti-course .tti-hero{ background: radial-gradient(at 90% 10%, rgba(255,255,255,0.1) 0%, transparent 55%), radial-gradient(at 10% 90%, rgba(0,0,0,0.25) 0%, transparent 60%), linear-gradient(135deg, #5a0010 0%, #3a0303 100%) !important; padding:56px 56px !important; border-radius:20px !important; border:1px solid rgba(255,255,255,0.12) !important; color:#fff !important; display:grid !important; grid-template-columns:1fr 380px !important; grid-template-areas: "eyebrow eyebrow" "title price" "subtitle price" "stats stats" "proof proof" !important; column-gap:48px; row-gap:18px; align-items:start; box-shadow:0 10px 40px rgba(0,0,0,0.25); overflow:hidden; position:relative; } main.tti-course .tti-hero__eyebrow{ grid-area:eyebrow; display:inline-block; background:#7a0012 !important; color:#fff !important; padding:7px 14px !important; border-radius:6px !important; font-size:12px !important; font-weight:700 !important; letter-spacing:0.14em !important; text-transform:uppercase !important; border:none !important; justify-self:start; width:auto !important; margin:0 !important; } main.tti-course .tti-hero__title, main.tti-course .tti-hero h1{ grid-area:title; color:#fff !important; margin:0 !important; max-width:18ch; } main.tti-course .tti-hero__subtitle, main.tti-course .tti-hero h1 + p{ grid-area:subtitle; color:rgba(255,255,255,0.82) !important; font-size:19px !important; line-height:1.5 !important; max-width:52ch !important; margin:0 !important; } main.tti-course .tti-hero__price-block, main.tti-course .tti-hero [class*="price-block"]{ grid-area:price; display:flex !important; flex-direction:column; gap:14px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.22); border-radius:16px; padding:28px; align-self:start; backdrop-filter:blur(8px); } main.tti-course .tti-hero__price{ color:#fff !important; font-size:40px !important; font-weight:800 !important; line-height:1 !important; margin:0 !important; } main.tti-course .tti-hero__price-meta{ color:rgba(255,255,255,0.7); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; } main.tti-course .tti-hero__enroll, main.tti-course .tti-hero a[class*="enroll"]{ background:#fff !important; color:#4c0404 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:16px 24px !important; border-radius:10px !important; font-weight:800 !important; font-size:16px !important; text-decoration:none !important; min-height:52px; box-shadow:0 4px 14px rgba(0,0,0,0.2); transition:transform 0.15s ease, box-shadow 0.15s ease; } main.tti-course .tti-hero__enroll:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,0.28); } main.tti-course .tti-hero__facts, main.tti-course .tti-hero__stats{ grid-area:stats; display:grid !important; grid-template-columns:repeat(4, 1fr) !important; gap:14px; margin-top:28px; } main.tti-course .tti-hero__fact{ background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:12px; padding:18px 14px; text-align:center !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:6px; color:#fff; } main.tti-course .tti-hero__fact-value{ font-size:20px !important; font-weight:800 !important; color:#fff !important; line-height:1.1; } main.tti-course .tti-hero__fact-label{ font-size:12px !important; letter-spacing:0.05em; color:rgba(255,255,255,0.75) !important; text-transform:uppercase; line-height:1.2; } main.tti-course .tti-hero__proof{ grid-area:proof; display:flex !important; flex-wrap:wrap; gap:12px; margin-top:10px; } main.tti-course .tti-hero__proof > *{ background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:6px; padding:8px 12px; font-size:13px; font-weight:600; color:#fff; } main.tti-course .tti-hero__proof-rating{ background:#fff !important; color:#4c0404 !important; } /* ===================================================================== * CARD HELPER — applied per-section wrapper ONLY (dptbqvj2 stays * transparent because it is the outer container holding all sections; * styling it as a card would compound with inner card padding). * =================================================================== */ main.tti-course [class*="dptbqvj2"]{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; display:flex !important; flex-direction:column !important; gap:40px !important; } main.tti-course [class*="dptbqvj2"]::before{display:none !important} main.tti-course [class*="dp8h97bx"], main.tti-course [class*="dp436lui"], main.tti-course [class*="dptk43sj"], main.tti-course [class*="dpwcywdl"], main.tti-course [class*="dp0lc8fb"]{ background:#fff !important; border:1px solid #e8e1d6 !important; border-radius:16px !important; box-shadow:0 6px 20px rgba(14,10,8,0.07); padding:36px 40px !important; color:#0f0f10 !important; } /* Eyebrow labels */ main.tti-course [class*="dp8h97bx"]:not(:has(> h2.tti-h-instructor))::before{content:"Key Outcomes"} main.tti-course [class*="dp8h97bx"]:has(> h2.tti-h-instructor)::before{content:"Your Instructor"} main.tti-course [class*="dp436lui"]::before{content:"Curriculum"} main.tti-course [class*="dptk43sj"]::before{content:"Certification"} main.tti-course [class*="dpwcywdl"]::before{content:"What Students Say"} main.tti-course [class*="dp0lc8fb"]::before{content:"Related Training"} main.tti-course [class*="dp8h97bx"]::before, main.tti-course [class*="dp436lui"]::before, main.tti-course [class*="dptk43sj"]::before, main.tti-course [class*="dpwcywdl"]::before, main.tti-course [class*="dp0lc8fb"]::before{ display:block; font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#7a0012; margin:0 0 12px; } /* ===================================================================== * DESCRIPTION + stats card nested inside * =================================================================== */ main.tti-course [class*="dptbqvj2"] [class*="dp9v0niz"]{ position:static !important; top:auto !important; margin-top:28px !important; padding:24px !important; background:#f8f4ec !important; border:1px solid #e8e1d6 !important; border-radius:12px !important; display:grid !important; grid-template-columns:repeat(4, 1fr) !important; gap:16px !important; } main.tti-course [class*="dptbqvj2"] [class*="dphry4bp"]:nth-child(5), main.tti-course [class*="dptbqvj2"] [class*="dphry4bp"]:last-child:has([class*="rating-text"]){ display:none !important; } /* ===================================================================== * KEY OUTCOMES — 3-col grid on desktop * =================================================================== */ main.tti-course [class*="dp8h97bx"]:not(:has(> h2.tti-h-instructor)) ul{ list-style:none !important; padding:0 !important; margin:20px 0 0 !important; display:grid !important; grid-template-columns:repeat(3, 1fr) !important; gap:12px 18px !important; } main.tti-course [class*="dp8h97bx"] li{ padding:12px 14px 12px 38px !important; background:#f8f4ec !important; border:1px solid #e8e1d6 !important; border-radius:10px !important; font-size:15px !important; line-height:1.5 !important; position:relative; margin:0 !important; color:#0f0f10 !important; } main.tti-course [class*="dp8h97bx"] li::before{ content:"✓"; position:absolute; left:12px; top:12px; width:20px; height:20px; background:#1f8a4c; color:#fff; font-size:13px; font-weight:800; border-radius:50%; display:flex; align-items:center; justify-content:center; line-height:1; } /* ===================================================================== * MODULE ROWS — single card on dp794i0s (outer wrapper), badge via * CSS counter. Rewritten 2026-04-24 after PHP consolidation moved all * 28 modules inside dp436lui; prior rules duplicated card styling on * dpwy7tt7 (inner title row) AND clamped dp794i0s to 72px with * overflow:hidden, which hid every module's content. * =================================================================== */ main.tti-course{counter-reset:mod} main.tti-course [class*="dp436lui"]{counter-reset:none !important} /* Outer accordion = card (matches mobile pattern). */ main.tti-course [class*="dp794i0s"]{ counter-increment:mod; background:#fff !important; border:1px solid #e8e1d6 !important; border-left:4px solid #7a0012 !important; border-radius:12px !important; padding:20px 24px 20px 72px !important; margin:10px 0 !important; position:relative !important; box-shadow:0 2px 8px rgba(14,10,8,0.04); transition:box-shadow 0.15s ease, transform 0.15s ease; max-height:none !important; overflow:visible !important; } main.tti-course [class*="dp794i0s"]:hover{ box-shadow:0 6px 18px rgba(14,10,8,0.1); transform:translateY(-1px); } /* Numbered badge */ main.tti-course [class*="dp794i0s"]::before{ content:counter(mod, decimal-leading-zero); position:absolute; left:16px; top:20px; width:40px; height:40px; background:#f8f4ec; color:#7a0012; border:1px solid #e8e1d6; border-radius:8px; font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center; letter-spacing:0.02em; } /* Inner title row — transparent pass-through, no double card. */ main.tti-course [class*="dp794i0s"] [class*="dpwy7tt7"]{ background:transparent !important; border:0 !important; border-radius:0 !important; padding:0 !important; margin:0 !important; box-shadow:none !important; max-height:none !important; overflow:visible !important; position:static !important; transform:none !important; } main.tti-course [class*="dp794i0s"] [class*="dpwy7tt7"]::before{ content:none !important; } /* Module title (shipped as h2 or h3) — behave like a row heading */ main.tti-course [class*="dp794i0s"] h2, main.tti-course [class*="dp794i0s"] h3{ font-size:18px !important; font-weight:700 !important; line-height:1.4 !important; margin:0 !important; padding:0 !important; color:#0f0f10 !important; position:static !important; } main.tti-course [class*="dp794i0s"] h2::after, main.tti-course [class*="dp794i0s"] h3::after{display:none !important; content:none !important} /* Meta row: "1 Lesson · 0 Quiz" */ main.tti-course [class*="dp794i0s"] [class*="dp1icnsr"]{ margin-top:6px !important; font-size:13px !important; color:#5a5a63 !important; } /* Chevron icon inside module row */ main.tti-course [class*="dp794i0s"] [class*="dpgq8fyv"]{ width:20px !important; height:20px !important; color:#5a5a63 !important; } /* v36 (2026-04-27): scope the hide to CLOSED dropdowns only — the prior rule hid dp4unl3r in every dropdown state, which broke the module accordion entirely on desktop. textarea always hidden. */ main.tti-course [class*="dp794i0s"]:not(.droip-dropdown-open) [class*="dp4unl3r"], main.tti-course [class*="dp794i0s"] textarea{ display:none !important; } /* ===================================================================== * CERTIFICATE * =================================================================== */ main.tti-course [class*="dptk43sj"] img{ max-width:100% !important; height:auto !important; border:1px solid #e8e1d6; border-radius:12px; padding:18px; background:#f8f4ec; display:block; margin:18px auto 0; } /* Cert card layout: medallion (wrapped in gold laurel) left, title + copy right */ main.tti-course [class*="dpm1ko05"]{ align-items:center !important; gap:36px !important; } main.tti-course [class*="dptk43sj"]{ position:relative !important; display:grid !important; grid-template-columns: 160px 1fr !important; grid-template-areas: "icon eyebrow" "icon title" "icon support"; grid-template-rows: auto auto auto; column-gap: 28px !important; row-gap: 2px !important; align-items: center !important; } main.tti-course [class*="dptk43sj"]::before{ grid-area: eyebrow; align-self:end; margin:0 0 4px; } main.tti-course [class*="dptk43sj"] h2{ grid-area: title !important; margin:0 !important; font-size:28px !important; font-weight:800 !important; line-height:1.15 !important; color:#0f0f10 !important; align-self: center; } main.tti-course [class*="dptk43sj"] h2::before, main.tti-course [class*="dptk43sj"] h2::after{ display:none !important; content:none !important; } main.tti-course [class*="dptk43sj"]::after{ content:"Downloadable PDF · Digital credential · Shareable to LinkedIn"; grid-area: support; font-size:13.5px; line-height:1.45; color:#5a5a63; letter-spacing:0.01em; align-self: start; margin:4px 0 0; } /* Cert badge wrapper holds wings + medallion, takes the icon grid cell */ main.tti-course [class*="dptk43sj"] > .tti-cert-badge{ grid-area: icon !important; justify-self: center !important; align-self: center !important; position: relative !important; display: block !important; width: 150px !important; height: 150px !important; padding: 0 !important; margin: 0 !important; line-height: 0; } /* Wings fill the badge container, rendered under the medallion */ main.tti-course [class*="dptk43sj"] .tti-cert-wings{ position: absolute !important; inset: 0 !important; width: 150px !important; height: 150px !important; display: block !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; z-index: 0 !important; pointer-events: none; line-height: 0; } main.tti-course [class*="dptk43sj"] .tti-cert-wings > svg{ all: revert !important; display: block !important; width: 150px !important; height: 150px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #c9a45a !important; filter: drop-shadow(0 3px 5px rgba(100,65,10,0.18)); } main.tti-course [class*="dptk43sj"] .tti-cert-wings > svg path{ fill: #c9a45a !important; stroke: none !important; } /* Medallion: maroon disc with white glyph. Sits BEHIND the laurel wings (which are promoted to z-index:2). The disc is positioned so its center aligns with the visual bowl-center of the laurel wreath — the wings curl up and overlap the disc's lower-left and lower-right arcs in front. */ main.tti-course [class*="dptk43sj"] .tti-cert-badge > svg[class*="dpmxfl1r"]{ position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: 36px !important; height: 36px !important; padding: 22px !important; background: #7a0012 !important; color:#fff !important; border-radius: 50% !important; box-sizing: content-box !important; box-shadow: 0 6px 14px rgba(122,0,18,0.22) !important; z-index: 0 !important; display:block !important; margin: 0 !important; max-width: none !important; max-height: none !important; } /* Wings: promote above the medallion so the laurel leaves overlap the disc's left/right edges in front. The wings SVG lives inside a `.tti-cert-wings` span — promote that span. */ main.tti-course [class*="dptk43sj"] .tti-cert-badge .tti-cert-wings, main.tti-course [class*="dptk43sj"] .tti-cert-badge .tti-cert-wings > svg{ position: relative !important; z-index: 2 !important; } main.tti-course [class*="dptk43sj"] .tti-cert-badge > svg[class*="dpmxfl1r"] *{ fill: none !important; stroke: #fff !important; stroke-width: 1.4 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } /* ===================================================================== * INSTRUCTOR — horizontal card with avatar left * =================================================================== */ main.tti-course .tti-instructor-name{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0 0 22px; } main.tti-course .tti-instructor-name__name{ font-size:26px; font-weight:800; color:#0f0f10; } main.tti-course .tti-instructor-name__chips{ display:flex; flex-wrap:wrap; gap:6px; } main.tti-course .tti-instructor-name__chip{ background:#7a0012; color:#fff; padding:4px 10px; border-radius:4px; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; } main.tti-course .tti-instructor-name__role{ color:#5a5a63; font-size:15px; margin:0; flex-basis:100%; } /* 2-col layout: avatar | bio */ main.tti-course h2.tti-h-instructor ~ [class*="dpad2ibs"]{ display:grid !important; grid-template-columns:180px 1fr !important; gap:36px !important; align-items:start; } main.tti-course h2.tti-h-instructor ~ [class*="dpad2ibs"] [class*="dp97md4s"]{ width:180px !important; height:180px !important; border-radius:50% !important; border:4px solid #f8f4ec !important; overflow:hidden; box-shadow:0 6px 20px rgba(14,10,8,0.1); } main.tti-course h2.tti-h-instructor ~ [class*="dpad2ibs"] [class*="dp97md4s"] img{ width:100% !important; height:100% !important; object-fit:cover !important; border-radius:50% !important; } main.tti-course h2.tti-h-instructor ~ [class*="dpad2ibs"] [class*="dpv8oqt3"]{ font-size:16px !important; line-height:1.7 !important; color:#0f0f10 !important; max-width:62ch; } /* ===================================================================== * REVIEWS * =================================================================== */ main.tti-course [class*="dpwcywdl"] [class*="dp7th1rv"]{ display:flex !important; align-items:center; gap:20px; padding:10px 0 0 !important; } main.tti-course [class*="dpwcywdl"] [class*="dp4dah7m"], main.tti-course [class*="dpwcywdl"] [class*="dphf1qxd"]{ font-size:44px !important; font-weight:800 !important; color:#0f0f10 !important; line-height:1 !important; } main.tti-course [class*="dpwcywdl"] [class*="dpf3si3h"], main.tti-course [class*="dpwcywdl"] [class*="rating-text"]{ color:#e5a400 !important; font-size:28px !important; letter-spacing:3px; } /* ===================================================================== * SIMILAR COURSES — 3-col grid with thumbnails * dpixfqu2 is the container holding all 3 card outers stacked; * grid goes there (NOT on the wrapper dpu7rh63, which just holds a * hidden Droip template textarea + dpixfqu2). * =================================================================== */ main.tti-course [class*="dp0lc8fb"] [class*="dpu7rh63"]{ display:block !important; margin-top:20px !important; width:100% !important; } main.tti-course [class*="dp0lc8fb"] [class*="dpixfqu2"]{ display:grid !important; grid-template-columns:repeat(3, 1fr) !important; gap:22px !important; width:100% !important; min-width:0 !important; max-width:100% !important; } main.tti-course [class*="dp0lc8fb"] [class*="dpkrudh6"]{ display:flex !important; flex-direction:column !important; background:#fff !important; border:1px solid #e8e1d6 !important; border-radius:14px !important; box-shadow:0 2px 10px rgba(14,10,8,0.05); overflow:hidden; padding:0 !important; height:auto !important; min-height:0 !important; transition:transform 0.2s ease, box-shadow 0.2s ease; } main.tti-course [class*="dp0lc8fb"] [class*="dpkrudh6"]:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(14,10,8,0.12); } main.tti-course [class*="dp0lc8fb"] img[class*="dpv8oqt2"]{ display:block !important; width:100% !important; height:auto !important; aspect-ratio:16/9 !important; object-fit:cover !important; border-radius:0 !important; margin:0 !important; background:#f3eee8; } main.tti-course [class*="dp0lc8fb"] [class*="dpfenovj"]{ padding:16px 18px !important; min-height:0 !important; gap:8px; } main.tti-course [class*="dp0lc8fb"] [class*="dp2fgknj"]{ padding:16px 18px !important; min-height:0 !important; text-decoration:none !important; } main.tti-course [class*="dp0lc8fb"] h2{ font-size:17px !important; font-weight:700 !important; line-height:1.3 !important; margin:0 0 8px !important; padding:0 !important; color:#0f0f10 !important; } main.tti-course [class*="dp0lc8fb"] h2::after{display:none !important} main.tti-course [class*="dp0lc8fb"] [class*="price"], main.tti-course [class*="dp0lc8fb"] [class*="amount"]{ color:#7a0012 !important; font-size:19px !important; font-weight:800 !important; } /* ===================================================================== * FINAL CTA BAND * =================================================================== */ main.tti-course .tti-course-final-cta{ background: radial-gradient(at 90% 10%, rgba(255,255,255,0.08) 0%, transparent 55%), linear-gradient(135deg, #7a0012 0%, #4c0404 100%) !important; color:#fff !important; padding:72px 48px !important; border-radius:20px !important; text-align:center; margin-top:0 !important; display:block !important; box-shadow:0 10px 40px rgba(0,0,0,0.2); } main.tti-course .tti-course-final-cta__eyebrow{ font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.82); margin:0 0 12px; } main.tti-course .tti-course-final-cta__title{ font-size:36px !important; font-weight:800 !important; line-height:1.15 !important; color:#fff !important; margin:0 0 16px !important; padding:0 !important; max-width:22ch; margin-left:auto !important; margin-right:auto !important; } main.tti-course .tti-course-final-cta__title::after{display:none !important} main.tti-course .tti-course-final-cta__lede{ font-size:18px; line-height:1.55; color:rgba(255,255,255,0.82); margin:0 0 28px; max-width:56ch; margin-left:auto; margin-right:auto; } main.tti-course .tti-course-final-cta__buttons{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } main.tti-course .tti-course-final-cta__primary{ background:#fff !important; color:#4c0404 !important; padding:16px 28px !important; border-radius:10px !important; font-weight:800 !important; font-size:16px !important; text-decoration:none !important; min-height:52px; display:inline-flex; align-items:center; transition:transform 0.15s ease, box-shadow 0.15s ease; } main.tti-course .tti-course-final-cta__primary:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,0.3); } main.tti-course .tti-course-final-cta__secondary{ background:transparent !important; color:#fff !important; padding:16px 28px !important; border-radius:10px !important; border:1.5px solid rgba(255,255,255,0.45) !important; font-weight:700 !important; font-size:16px !important; text-decoration:none !important; min-height:52px; display:inline-flex; align-items:center; transition:background 0.15s ease, border-color 0.15s ease; } main.tti-course .tti-course-final-cta__secondary:hover{ background:rgba(255,255,255,0.1) !important; border-color:rgba(255,255,255,0.7) !important; } /* ===================================================================== * HIDE REDUNDANT / ORPHAN ELEMENTS (mirrored from mobile dedupe pass) * =================================================================== */ body > [class*="rating-text-"], body > div[class*="rating-text"]{display:none !important} main.tti-course [class*="dpjppmhx"], main.tti-course [class*="dp3ywrmr"], main.tti-course [class*="dpdawsr5"], main.tti-course [class*="dpxzxlyj"], main.tti-course [class*="dp8zj229"]{display:none !important} main.tti-course [class*="-meta-16"]:not([class*="meta-16-r-"]){display:none !important} main.tti-course [class*="dp8h97bx"] > [class*="dp436lui"]:not(:has(h2.tti-h-syllabus)):not(:has([class*="dpwy7tt7"])){display:none !important} main.tti-course [class*="dpft5oys"] img:first-child{display:none !important} main.tti-course [class*="dp8h97bx"] > h2:not(.tti-h-learn):not(.tti-h-syllabus):not(.tti-h-certificate):not(.tti-h-instructor):not(.tti-h-reviews):not(.tti-h-similar){display:none !important} main.tti-course [class*="dp8h97bx"] > h3{display:none !important} main.tti-course [class*="dptbqvj2"] [class*="dplqy9ef"]{display:none !important} main.tti-course [class*="dp0lc8fb"] [class*="dpc4dq03"], main.tti-course textarea, main.tti-course [class*="dp0lc8fb"] textarea, main.tti-course textarea[class*="dpu7rh63"], main.tti-course [class*="dp0lc8fb"] textarea[class*="dpu7rh63"], main.tti-course textarea[class*="dpixfqu2"]{display:none !important} main.tti-course [class*="dp0lc8fb"] [class*="author"], main.tti-course [class*="dp0lc8fb"] [class*="dpf3si3h"], main.tti-course [class*="dp0lc8fb"] [class*="dphf1qxd"]{display:none !important} main.tti-course [class*="dpwcywdl"] [class*="dpu4dil7"], main.tti-course [class*="dpwcywdl"] [class*="droip-collection-item"], main.tti-course [class*="dpwcywdl"] [class*="dp9oioq3"] > *:not([class*="dpc3m14p"]){display:none !important} main.tti-course [class*="dpm1ko05"] img ~ svg{display:none !important} main.tti-course [class*="dpwy7tt7"] h2::after, main.tti-course [class*="dp2fgknj"] h2::after, main.tti-course .tti-course-final-cta__title::after{ display:none !important; content:none !important; } /* ===================================================================== * CTA CHAIN HANDLING * =================================================================== */ main.tti-course [class*="dp1rg588"]:has(.tti-course-final-cta), main.tti-course [class*="dplqy9ef"]:has(.tti-course-final-cta), main.tti-course [class*="dp9v0niz"]:has(.tti-course-final-cta), main.tti-course [class*="dphry4bp"]:has(.tti-course-final-cta), main.tti-course [class*="dpuqrw05"]:has(.tti-course-final-cta){ display:block !important; visibility:visible !important; height:auto !important; padding:0 !important; margin:0 !important; background:transparent !important; } main.tti-course [class*="dp1rg588"]:has(.tti-course-final-cta) > *:not(:has(.tti-course-final-cta)):not(.tti-course-final-cta), main.tti-course [class*="dplqy9ef"]:has(.tti-course-final-cta) > *:not(:has(.tti-course-final-cta)):not(.tti-course-final-cta), main.tti-course [class*="dp9v0niz"]:has(.tti-course-final-cta) > *:not(:has(.tti-course-final-cta)):not(.tti-course-final-cta), main.tti-course [class*="dphry4bp"]:has(.tti-course-final-cta) > *:not(:has(.tti-course-final-cta)):not(.tti-course-final-cta), main.tti-course [class*="dpuqrw05"]:has(.tti-course-final-cta) > *:not(:has(.tti-course-final-cta)):not(.tti-course-final-cta){ display:none !important; } /* ===================================================================== * FOCUS + MOTION * =================================================================== */ main.tti-course a:focus-visible, main.tti-course button:focus-visible, main.tti-course input:focus-visible{ outline:3px solid #7a0012 !important; outline-offset:3px !important; border-radius:4px; } @media (prefers-reduced-motion: reduce){ main.tti-course *{transition:none !important; animation:none !important} } /* ========================================================================= v31 (2026-04-26) — Desktop polish: adapt v30 tablet language to >=1024px Reviews pill, Related Training card body order, star fills, h2 row, multi-col scaling at 1280/1440/1920. All scoped inside the existing @media (min-width:1024px) wrapper above. ========================================================================= */ main.tti-course{ --tti-maroon: #7a0012; --tti-brass: #C9A961; --tti-cream: #faf6ee; --tti-ink: #0f0f10; --tti-muted: #5a5a63; --tti-line: #efe7d6; --tti-serif: Georgia, "Times New Roman", serif; --tti-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Content frame — contained, breathing room at every width */ main.tti-course > .droip-body, main.tti-course > [class*="droip-body"], main.tti-course .droip-container, main.tti-course [class*="droip-container"]{ max-width: 1200px !important; margin-inline: auto !important; padding-inline: 32px !important; } /* ---------- REVIEWS — h2-row with pill on right (v30 parity, larger) ----- */ main.tti-course [class*="dpwcywdl"] [class*="dp9oioq3"], main.tti-course [class*="dpwcywdl"] [class*="dpc3m14p"]{ display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; width: 100% !important; } main.tti-course [class*="dpwcywdl"] [class*="dp7th1rv"]{ display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; column-gap: 28px !important; row-gap: 16px !important; width: 100% !important; } main.tti-course [class*="dpwcywdl"] [class*="dp7th1rv"] > h2.tti-h-reviews, main.tti-course [class*="dpwcywdl"] h2.tti-h-reviews{ flex: 0 1 auto !important; width: auto !important; max-width: 100% !important; margin: 0 !important; white-space: nowrap !important; } main.tti-course [class*="dpwcywdl"] [class*="dp7th1rv"] > [class*="dp4sd1eo"]{ flex: 0 0 auto !important; margin: 0 !important; } main.tti-course [class*="dpwcywdl"] [class*="dp4sd1eo"]{ display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 20px !important; padding: 16px 28px !important; background: var(--tti-cream) !important; border: 1px solid var(--tti-line) !important; border-radius: 16px !important; width: auto !important; max-width: 100% !important; height: auto !important; margin: 0 !important; box-shadow: 0 1px 0 rgba(15,15,16,0.02) !important; } main.tti-course [class*="dpwcywdl"] [class*="dp4dah7m"]{ font: 800 40px/1 var(--tti-serif) !important; color: var(--tti-maroon) !important; padding: 0 20px 0 0 !important; margin: 0 !important; border-right: 1px solid rgba(122,0,18,0.18) !important; height: auto !important; } main.tti-course [class*="dpwcywdl"] [class*="dpfi0pda"]{ display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; color: var(--tti-muted) !important; font: 600 12px/1 var(--tti-sans) !important; text-transform: uppercase !important; letter-spacing: 0.09em !important; height: auto !important; width: auto !important; } /* Pill stars: gold filled, grey empty (per-class) */ main.tti-course [class*="dpwcywdl"] svg[class*="dp90iezg"], main.tti-course [class*="dpwcywdl"] svg[class*="dp90iezg"] path{ fill: #FAA625 !important; color: #FAA625 !important; stroke: none !important; } main.tti-course [class*="dpwcywdl"] svg[class*="dp7omjyn"], main.tti-course [class*="dpwcywdl"] svg[class*="dp7omjyn"] path{ fill: #D8D5D5 !important; color: #D8D5D5 !important; stroke: none !important; } /* ---------- RELATED TRAINING — 3-col / 4-col grid + card body order ------ */ main.tti-course [class*="dp0lc8fb"] [class*="dpu7rh63"]{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; width: auto !important; max-width: 100% !important; } main.tti-course [class*="dp0lc8fb"] [class*="dpixfqu2"]{ width: auto !important; max-width: 100% !important; } main.tti-course [class*="dp0lc8fb"] [class*="dpkrudh6"]{ display: flex !important; flex-direction: column !important; background: #fff !important; border: 1px solid var(--tti-line) !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 1px 0 rgba(15,15,16,0.02) !important; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease !important; width: auto !important; height: 100% !important; } main.tti-course [class*="dp0lc8fb"] [class*="dpkrudh6"]:hover{ transform: translateY(-2px) !important; box-shadow: 0 6px 18px rgba(15,15,16,0.06) !important; border-color: rgba(122,0,18,0.18) !important; } main.tti-course [class*="dp0lc8fb"] img[class*="dpv8oqt2"]{ width: 100% !important; height: 168px !important; object-fit: cover !important; display: block !important; margin: 0 !important; border-radius: 0 !important; } /* Card body — explicit order: title (0) → rating+author (1) → price+cta (2) */ main.tti-course [class*="dp0lc8fb"] [class*="dpj03hg2"]{ display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 18px !important; flex: 1 1 auto !important; width: 100% !important; } main.tti-course [class*="dp0lc8fb"] [class*="dpj03hg2"] > div:has(> a[class*="dp2fgknj"]){ order: 0 !important; margin: 0 0 12px !important; padding: 0 !important; width: 100% !important; min-height: 48px !important; } main.tti-course [class*="dp0lc8fb"] [class*="dpj03hg2"] > [class*="dpc4dq03"]{ order: 1 !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; margin: 0 0 14px !important; padding: 0 !important; width: 100% !important; height: auto !important; min-height: 22px !important; flex-wrap: wrap !important; } main.tti-course [class*="dp0lc8fb"] [class*="dpj03hg2"] > [class*="dpaykrfk"]{ order: 2 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin: auto 0 0 !important; padding: 14px 0 0 !important; border-top: 1px solid var(--tti-line) !important; width: 100% !important; } main.tti-course [class*="dp0lc8fb"] [class*="dpj03hg2"] a[class*="dp2fgknj"]{ display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; color: var(--tti-ink) !important; font: 700 16px/1.35 var(--tti-sans) !important; text-decoration: none !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; letter-spacing: -0.005em !important; transition: color 160ms ease !important; } main.tti-course [class*="dp0lc8fb"] [class*="dpj03hg2"] a[class*="dp2fgknj"]:hover{ color: var(--tti-maroon) !important; } /* Card stars */ main.tti-course [class*="dp0lc8fb"] [class*="dpc4dq03"] [class*="dpuqrw01"]{ display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 4px !important; width: auto !important; height: auto !important; min-height: 18px !important; margin: 0 !important; padding: 0 !important; font: 700 12px/1 var(--tti-sans) !important; } main.tti-course [class*="dp0lc8fb"] [class*="dpc4dq03"] [class*="dpuqrw01"] svg{ width: 13px !important; height: 13px !important; } main.tti-course [class*="dp0lc8fb"] svg[class*="dp90iezg"], main.tti-course [class*="dp0lc8fb"] svg[class*="dp90iezg"] path{ fill: #FAA625 !important; color: #FAA625 !important; stroke: none !important; } main.tti-course [class*="dp0lc8fb"] svg[class*="dp7omjyn"], main.tti-course [class*="dp0lc8fb"] svg[class*="dp7omjyn"] path{ fill: #D8D5D5 !important; color: #D8D5D5 !important; stroke: none !important; } /* Hide leading numeric "0" / "5.0" — stars carry the meaning */ main.tti-course [class*="dp0lc8fb"] [class*="dpuqrw01"] > [class*="dpmtsiz0"]{ display: none !important; } /* Author cell — block container with inline children (no flex) */ main.tti-course [class*="dp0lc8fb"] [class*="dpc4dq03"] [class*="dp54a86x"]{ display: block !important; color: var(--tti-muted) !important; font: 500 12px/1.4 var(--tti-sans) !important; margin: 0 !important; padding: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; word-break: break-word !important; flex: 1 1 auto !important; min-width: 0 !important; } main.tti-course [class*="dp0lc8fb"] [class*="dp54a86x"] > p, main.tti-course [class*="dp0lc8fb"] [class*="dp54a86x"] > *{ display: inline !important; margin: 0 !important; padding: 0 !important; color: inherit !important; font: inherit !important; background: transparent !important; line-height: 1.4 !important; } main.tti-course [class*="dp0lc8fb"] [class*="dp54a86x"] > [class*="dpsg9jw3"]::after{ content: " " !important; white-space: pre !important; } /* Price */ main.tti-course [class*="dp0lc8fb"] [class*="dpaykrfk"] [class*="amount"], main.tti-course [class*="dp0lc8fb"] [class*="dpaykrfk"] [class*="price"], main.tti-course [class*="dp0lc8fb"] [class*="dpaykrfk"] > div:first-child{ color: var(--tti-maroon) !important; font: 800 19px/1 var(--tti-serif) !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } /* Add-to-cart pill */ main.tti-course [class*="dp0lc8fb"] [class*="dp8e6yri"]{ display: inline-flex !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } main.tti-course [class*="dp0lc8fb"] button[class*="dpp1ouz9"]{ display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 9px 16px !important; background: rgba(122,0,18,0.08) !important; color: var(--tti-maroon) !important; border: 1px solid rgba(122,0,18,0.22) !important; border-radius: 999px !important; font: 700 11.5px/1 var(--tti-sans) !important; text-transform: uppercase !important; letter-spacing: 0.09em !important; text-decoration: none !important; width: auto !important; height: auto !important; min-height: 32px !important; cursor: pointer !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 140px !important; transition: background 180ms ease, color 180ms ease, transform 180ms ease !important; } main.tti-course [class*="dp0lc8fb"] button[class*="dpp1ouz9"]:hover{ background: var(--tti-maroon) !important; color: #fff !important; transform: translateY(-1px) !important; } main.tti-course [class*="dp0lc8fb"] button[class*="dpp1ouz9"] *{ color: inherit !important; background: transparent !important; fill: currentColor !important; } /* ---------- OUTCOMES — guarantee 3-col on standard desktop ---------------- */ main.tti-course [class*="dp8h97bx"]:not(:has(> h2.tti-h-instructor)) ul{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px 28px !important; } /* ---------- HERO — keep enroll above the fold at 1024x800 ----------------- */ main.tti-course .tti-hero__title, main.tti-course .tti-hero h1{ font-size: clamp(28px, 3.4vw, 44px) !important; line-height: 1.12 !important; } /* ============================================================================ ≥1280 — laptop polish: bigger pill type, slightly larger card title ============================================================================ */ @media (min-width: 1280px){ main.tti-course > .droip-body, main.tti-course > [class*="droip-body"], main.tti-course .droip-container, main.tti-course [class*="droip-container"]{ max-width: 1240px !important; padding-inline: 40px !important; } main.tti-course [class*="dpwcywdl"] [class*="dp4dah7m"]{ font-size: 44px !important; padding-right: 24px !important; } main.tti-course [class*="dp0lc8fb"] [class*="dpj03hg2"] a[class*="dp2fgknj"]{ font-size: 17px !important; } main.tti-course [class*="dp0lc8fb"] img[class*="dpv8oqt2"]{ height: 184px !important; } } /* ============================================================================ ≥1440 — desktop wide: 4-col Related Training, 4-col Outcomes, wider frame ============================================================================ */ @media (min-width: 1440px){ main.tti-course > .droip-body, main.tti-course > [class*="droip-body"], main.tti-course .droip-container, main.tti-course [class*="droip-container"]{ max-width: 1320px !important; padding-inline: 48px !important; } main.tti-course [class*="dp0lc8fb"] [class*="dpu7rh63"]{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 28px !important; } main.tti-course [class*="dp0lc8fb"] img[class*="dpv8oqt2"]{ height: 176px !important; } main.tti-course [class*="dp8h97bx"]:not(:has(> h2.tti-h-instructor)) ul{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px 32px !important; } main.tti-course .tti-course-final-cta{ padding-block: 96px !important; } main.tti-course .tti-course-final-cta__title{ font-size: clamp(34px, 2.6vw, 48px) !important; } } /* ============================================================================ ≥1920 — large monitor: cap the frame, more breathing room ============================================================================ */ @media (min-width: 1920px){ main.tti-course > .droip-body, main.tti-course > [class*="droip-body"], main.tti-course .droip-container, main.tti-course [class*="droip-container"]{ max-width: 1400px !important; padding-inline: 56px !important; } main.tti-course [class*="dp0lc8fb"] img[class*="dpv8oqt2"]{ height: 188px !important; } main.tti-course .tti-course-final-cta{ padding-block: 120px !important; } } /* ========================================================================= v32 (2026-04-26) — Frame restructure + tablet-hero port - Drops the 1180px cap (was leaving 740px gutter at 1920) - Replaces dead v17 hero rules (which targeted classes that no longer exist in the DOM) with tablet's maroon-gradient hero, scaled up - Uses the live DOM class set: __cta, __lede, __price + , __fact + , __proof-mark, __proof-rating - Lives inside @media (min-width:1024px) only ========================================================================= */ main.tti-course{ /* Ports tablet's hero token set so .tti-hero rules below resolve */ --tti-maroon: #7a0012; --tti-maroon-deep: #3a0303; --tti-brass: #C9A961; --tti-cream: #faf6ee; --tti-ink: #0f0f10; --tti-muted: #5a5a63; --tti-line: #efe7d6; --tti-radius-pill: 999px; --tti-ease: cubic-bezier(.2,.7,.2,1); --tti-serif: Georgia, "Times New Roman", serif; --tti-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Wider canvas — no more 1180 squish */ max-width: 1640px !important; margin-inline: auto !important; padding: 56px clamp(32px, 4.5vw, 96px) 140px !important; gap: 64px !important; } /* Outer Droip wrappers fill the new canvas */ main.tti-course > .droip-body, main.tti-course > [class*="droip-body"], main.tti-course .droip-body, main.tti-course .droip-container, main.tti-course [class*="droip-container"]{ max-width: 100% !important; margin-inline: 0 !important; padding-inline: 0 !important; gap: 64px !important; } /* ========================================================================= HERO — port of tablet's maroon-gradient theme, scaled for desktop ========================================================================= */ main.tti-course .tti-hero{ position: relative !important; background: radial-gradient(at 90% 0%, rgba(201,169,97,0.16) 0%, transparent 55%), radial-gradient(at 4% 100%, rgba(0,0,0,0.32) 0%, transparent 55%), linear-gradient(135deg, #5c0010 0%, #3a0303 100%) !important; color: #fff !important; padding: 48px 56px !important; border-radius: 24px !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 24px 64px rgba(0,0,0,0.32) !important; overflow: hidden !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 340px !important; grid-template-areas: "eyebrow eyebrow" "title cta" "lede cta" "facts cta" "proof proof" !important; column-gap: 48px !important; row-gap: 18px !important; align-items: start !important; width: 100% !important; max-width: 100% !important; } main.tti-course .tti-hero::before{ content: "" !important; position: absolute !important; top: 0 !important; left: 56px !important; right: 56px !important; height: 1px !important; background: linear-gradient(90deg, transparent, var(--tti-brass) 30%, var(--tti-brass) 70%, transparent) !important; opacity: 0.7 !important; } main.tti-course .tti-hero__eyebrow{ grid-area: eyebrow !important; display: inline-flex !important; align-items: center !important; gap: 12px !important; background: transparent !important; color: var(--tti-brass) !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; font: 700 12px/1 var(--tti-sans) !important; letter-spacing: 0.24em !important; text-transform: uppercase !important; justify-self: start !important; width: auto !important; max-width: 100% !important; margin: 0 0 4px !important; height: auto !important; } main.tti-course .tti-hero__eyebrow::before{ content: "" !important; display: inline-block !important; width: 28px !important; height: 1px !important; background: var(--tti-brass) !important; } main.tti-course .tti-hero__title, main.tti-course .tti-hero h1{ grid-area: title !important; color: #fff !important; margin: 0 !important; padding: 0 !important; font: 800 clamp(36px, 3.6vw, 56px)/1.08 var(--tti-serif) !important; letter-spacing: -0.015em !important; text-shadow: 0 1px 0 rgba(0,0,0,0.12) !important; max-width: 18ch !important; } main.tti-course .tti-hero__lede, main.tti-course .tti-hero__subtitle, main.tti-course .tti-hero h1 + p{ grid-area: lede !important; color: rgba(255,255,255,0.84) !important; font: 400 clamp(15.5px, 1.15vw, 17.5px)/1.6 var(--tti-sans) !important; margin: 0 !important; padding: 0 !important; max-width: 56ch !important; display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; width: auto !important; background: transparent !important; } /* Glassy CTA card (right column) */ main.tti-course .tti-hero__cta{ grid-area: cta !important; display: flex !important; flex-direction: column !important; gap: 14px !important; background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(255,255,255,0.18) !important; border-radius: 16px !important; padding: 28px 26px !important; align-self: start !important; position: relative !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; list-style: none !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } main.tti-course .tti-hero__cta::before{ content: "" !important; position: absolute !important; top: -1px !important; left: 28px !important; right: 28px !important; height: 1px !important; background: var(--tti-brass) !important; opacity: 0.9 !important; } main.tti-course .tti-hero__price{ color: #fff !important; font: 800 44px/1 var(--tti-serif) !important; margin: 0 !important; padding: 0 !important; letter-spacing: -0.02em !important; display: block !important; background: transparent !important; border: 0 !important; width: auto !important; height: auto !important; } main.tti-course .tti-hero__price small{ display: block !important; margin-top: 8px !important; color: rgba(255,255,255,0.78) !important; font: 600 11.5px/1.3 var(--tti-sans) !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } main.tti-course .tti-hero__enroll, main.tti-course .tti-hero a[class*="enroll"]{ background: #fff !important; color: var(--tti-maroon-deep) !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 15px 22px !important; border-radius: 11px !important; border: 0 !important; font: 800 15px/1 var(--tti-sans) !important; letter-spacing: 0.04em !important; text-decoration: none !important; min-height: 50px !important; margin-top: 6px !important; box-shadow: 0 6px 16px rgba(0,0,0,0.22) !important; transition: transform 180ms var(--tti-ease), box-shadow 180ms var(--tti-ease) !important; width: 100% !important; cursor: pointer !important; } main.tti-course .tti-hero__enroll:hover, main.tti-course .tti-hero a[class*="enroll"]:hover{ transform: translateY(-2px) !important; box-shadow: 0 10px 24px rgba(0,0,0,0.32) !important; color: var(--tti-maroon-deep) !important; } /* Stats grid — 4-col with elevated tiles */ main.tti-course .tti-hero__facts, main.tti-course .tti-hero__stats{ grid-area: facts !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; margin: 22px 0 0 !important; padding: 0 !important; list-style: none !important; width: 100% !important; max-width: 100% !important; } main.tti-course .tti-hero__fact{ background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 12px !important; padding: 18px 14px !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; color: rgba(255,255,255,0.82) !important; position: relative !important; list-style: none !important; margin: 0 !important; min-height: 84px !important; font: 600 11px/1.3 var(--tti-sans) !important; text-transform: uppercase !important; letter-spacing: 0.09em !important; transition: transform 200ms var(--tti-ease), border-color 200ms var(--tti-ease) !important; } main.tti-course .tti-hero__fact::marker{ content: "" !important } main.tti-course .tti-hero__fact:hover{ transform: translateY(-2px) !important; border-color: rgba(201,169,97,0.45) !important; } main.tti-course .tti-hero__fact strong{ font: 800 24px/1.05 var(--tti-serif) !important; color: #fff !important; letter-spacing: -0.01em !important; display: block !important; margin: 0 0 2px !important; background: transparent !important; } /* Tiles without a numeric value (e.g. "Self-paced online") */ main.tti-course .tti-hero__fact:not(:has(strong)){ font: 700 13px/1.35 var(--tti-sans) !important; color: #fff !important; letter-spacing: 0.06em !important; } /* Proof row */ main.tti-course .tti-hero__proof{ grid-area: proof !important; display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin: 16px 0 0 !important; padding: 0 !important; justify-content: flex-start !important; list-style: none !important; width: 100% !important; } main.tti-course .tti-hero__proof > li, main.tti-course .tti-hero__proof-mark{ background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(201,169,97,0.42) !important; border-radius: var(--tti-radius-pill) !important; padding: 8px 16px !important; font: 600 12.5px/1 var(--tti-sans) !important; color: #fff !important; letter-spacing: 0.03em !important; margin: 0 !important; list-style: none !important; display: inline-flex !important; align-items: center !important; height: auto !important; width: auto !important; } main.tti-course .tti-hero__proof-rating{ background: var(--tti-brass) !important; border-color: var(--tti-brass) !important; color: var(--tti-maroon-deep) !important; font-weight: 800 !important; padding: 8px 16px !important; border-radius: var(--tti-radius-pill) !important; } main.tti-course .tti-hero__proof li::marker, main.tti-course .tti-hero__facts li::marker{ content: "" !important } /* ========================================================================= SECTION SCALING — sections fill the wider canvas with breathing room ========================================================================= */ main.tti-course h2{ font-size: clamp(28px, 2.2vw, 34px) !important; line-height: 1.18 !important; letter-spacing: -0.012em !important; } main.tti-course [class*="dp8h97bx"], main.tti-course [class*="dp436lui"], main.tti-course [class*="dptk43sj"], main.tti-course [class*="dpwcywdl"], main.tti-course [class*="dp0lc8fb"]{ padding: 40px 44px !important; border-radius: 18px !important; } /* Outcomes grid — gets the wider canvas */ main.tti-course [class*="dp8h97bx"]:not(:has(> h2.tti-h-instructor)) ul{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px 36px !important; } /* ========================================================================= ≥1280 — bigger hero, more padding ========================================================================= */ @media (min-width: 1280px){ main.tti-course .tti-hero{ grid-template-columns: minmax(0, 1fr) 380px !important; padding: 56px 64px !important; column-gap: 56px !important; } main.tti-course .tti-hero__cta{ padding: 32px 28px !important } main.tti-course .tti-hero__price{ font-size: 48px !important } } /* ========================================================================= ≥1440 — wider CTA, 4-col outcomes, bigger section padding ========================================================================= */ @media (min-width: 1440px){ main.tti-course{ padding: 64px clamp(64px, 5vw, 100px) 160px !important; } main.tti-course .tti-hero{ grid-template-columns: minmax(0, 1fr) 420px !important; padding: 64px 72px !important; } main.tti-course .tti-hero__cta{ padding: 36px 32px !important } main.tti-course [class*="dp8h97bx"]:not(:has(> h2.tti-h-instructor)) ul{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } main.tti-course [class*="dp8h97bx"], main.tti-course [class*="dp436lui"], main.tti-course [class*="dptk43sj"], main.tti-course [class*="dpwcywdl"], main.tti-course [class*="dp0lc8fb"]{ padding: 48px 56px !important; } } /* ========================================================================= ≥1920 — cap canvas at 1640, tile sections breathe ========================================================================= */ @media (min-width: 1920px){ main.tti-course{ max-width: 1640px !important; padding: 72px 100px 180px !important; } main.tti-course .tti-hero{ padding: 72px 80px !important; grid-template-columns: minmax(0, 1fr) 440px !important; } } /* ========================================================================= v33 (2026-04-26) 1) Course card image relocated to hero top-right (smaller, framed) 2) More breathing room above the hero 3) Outcomes (What You'll Learn): tablet's cream/maroon-rail theme, but 3-col grid instead of tablet's 2-col ========================================================================= */ /* Add tokens used by tablet outcomes that v32 didn't include locally */ main.tti-course{ --tti-cream-line: #e8e1d6; --tti-ink-2: #1a1a1f; } /* ---------- 2) Padding above hero ----------------------------------------- */ main.tti-course{ position: relative !important; /* anchor for absolute course image */ padding-top: 96px !important; } @media (min-width: 1280px){ main.tti-course{ padding-top: 104px !important } } @media (min-width: 1440px){ main.tti-course{ padding-top: 120px !important } } @media (min-width: 1920px){ main.tti-course{ padding-top: 128px !important } } /* ---------- 1) Course card image into hero top-right ---------------------- */ /* Image lives at .dptbqvj2 > img.dpg8khjp in DOM (sibling of hero, deeper). Pull it OUT of flow and pin to top-right of main.tti-course (positioned). Hide its sibling stats wrapper if it would now look orphaned at desktop. The image is 1296x785 in flow — at desktop we shrink to ~280x175. */ main.tti-course img[class*="dpg8khjp"]{ position: absolute !important; top: 152px !important; right: clamp(72px, 6vw, 120px) !important; width: 260px !important; height: 165px !important; max-width: 260px !important; max-height: 165px !important; object-fit: cover !important; object-position: center !important; border-radius: 14px !important; border: 1px solid rgba(255,255,255,0.22) !important; box-shadow: 0 18px 40px rgba(0,0,0,0.40), 0 4px 10px rgba(0,0,0,0.18) !important; z-index: 5 !important; margin: 0 !important; padding: 0 !important; display: block !important; flex: 0 0 auto !important; pointer-events: none !important; } /* Make the original wrapper (.dptbqvj2) collapse to a no-op once the image leaves flow. The wrapper still holds other content (stats etc) — leave that alone, just zero its image-area padding. */ main.tti-course [class*="dptbqvj2"] > img[class*="dpg8khjp"]:first-child + *{ margin-top: 0 !important; } /* CTA card sits BELOW the absolutely-positioned image in the right column. Image is out of flow, so the right-column grid track measures only the CTA card height. Use margin-top to push CTA down to clear the image (image_height + 24px gap, per breakpoint). */ main.tti-course .tti-hero__cta{ align-self: start !important; margin-top: 192px !important; /* 165 + 27 base */ } @media (min-width: 1280px){ main.tti-course img[class*="dpg8khjp"]{ top: 168px !important; width: 290px !important; height: 184px !important; max-width: 290px !important; max-height: 184px !important; } main.tti-course .tti-hero__cta{ margin-top: 212px !important; /* 184 + 28 */ } } @media (min-width: 1440px){ main.tti-course img[class*="dpg8khjp"]{ top: 192px !important; right: clamp(96px, 6vw, 140px) !important; width: 320px !important; height: 204px !important; max-width: 320px !important; max-height: 204px !important; border-radius: 16px !important; } main.tti-course .tti-hero__cta{ margin-top: 236px !important; /* 204 + 32 */ } } @media (min-width: 1920px){ main.tti-course img[class*="dpg8khjp"]{ top: 208px !important; right: 192px !important; width: 360px !important; height: 230px !important; max-width: 360px !important; max-height: 230px !important; } main.tti-course .tti-hero__cta{ margin-top: 268px !important; /* 230 + 38 */ } } /* ---------- 3) Outcomes: tablet theme, 3-col -------------------------------*/ main.tti-course [class*="dp8h97bx"]:not(:has(> h2.tti-h-instructor)) [class*="dp2yrjh1"]{ background: transparent !important; list-style: none !important; padding: 0 !important; margin: 0 !important; display: block !important; grid-template-columns: none !important; gap: 0 !important; border: 0 !important; width: 100% !important; max-width: 100% !important; } main.tti-course [class*="dp8h97bx"]:not(:has(> h2.tti-h-instructor)) ul, main.tti-course [class*="dp8h97bx"]:not(:has(> h2.tti-h-instructor)) [class*="dp6tfcba"]{ background: transparent !important; list-style: none !important; padding: 0 !important; margin: 12px 0 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; border: 0 !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; } /* Each card: tablet cream + maroon left rail */ main.tti-course [class*="dp8h97bx"] li, main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"]{ padding: 14px 16px 14px 42px !important; background: var(--tti-cream) !important; border: 1px solid var(--tti-cream-line) !important; border-left: 3px solid var(--tti-maroon) !important; border-radius: 10px !important; font: 500 14.5px/1.5 var(--tti-sans) !important; color: var(--tti-ink-2) !important; position: relative !important; margin: 0 !important; min-height: 52px !important; display: flex !important; align-items: flex-start !important; word-break: normal !important; overflow-wrap: break-word !important; hyphens: none !important; overflow: hidden !important; box-shadow: 0 1px 2px rgba(14,10,8,0.03) !important; list-style: none !important; transition: transform 180ms var(--tti-ease), background 180ms var(--tti-ease), box-shadow 180ms var(--tti-ease), border-left-color 180ms var(--tti-ease) !important; } main.tti-course [class*="dp8h97bx"] li:hover, main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"]:hover{ transform: translateY(-2px) !important; background: #fff !important; box-shadow: 0 8px 18px rgba(14,10,8,0.08) !important; } /* Maroon dot bullet with white check overlay */ main.tti-course [class*="dp8h97bx"] li::before, main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"]::before{ content: "" !important; position: absolute !important; left: 14px !important; top: 16px !important; width: 16px !important; height: 16px !important; background: var(--tti-maroon) !important; border-radius: 50% !important; box-shadow: 0 0 0 3px rgba(122,0,18,0.10) !important; z-index: 1 !important; display: block !important; border: 0 !important; transform: none !important; } main.tti-course [class*="dp8h97bx"] li::after, main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"]::after{ content: "✓" !important; position: absolute !important; left: 16.5px !important; top: 16px !important; color: #fff !important; font: 900 10px/16px var(--tti-sans) !important; width: 11px !important; height: 16px !important; text-align: center !important; z-index: 2 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Inner text wrapper: flat block, no padding */ main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"] [class*="dpr80ali"], main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"] > *, main.tti-course [class*="dp8h97bx"] li > *{ display: block !important; width: 100% !important; overflow: visible !important; text-overflow: clip !important; background: transparent !important; color: var(--tti-ink-2) !important; } /* Hide raw Droip check icons inside outcome rows (image dpg8khjp NOT inside dpft5oys, so the broad img hide is safe — but exclude defensively) */ main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"] svg, main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"] img:not([class*="dpg8khjp"]), main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"] [class*="dpeo7kpf"], main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"] [class*="dpowkss3"], main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"] [class*="dpybtudm"]{ display: none !important; } main.tti-course [class*="dpft5oys"] span{ display: inline !important } /* v33 keeps outcomes at 3-col across all desktop widths. Override v32's @1440 push to 4-col (user explicitly asked for 3). */ @media (min-width: 1440px){ main.tti-course [class*="dp8h97bx"]:not(:has(> h2.tti-h-instructor)) ul, main.tti-course [class*="dp8h97bx"]:not(:has(> h2.tti-h-instructor)) [class*="dp6tfcba"]{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; } } /* ========================================================================= v34 (2026-04-26) 1) Hero background → beige (was maroon gradient) 2) Course image flush + same dimensions as the Enroll-Now CTA card 3) All in-hero type/effects flipped from white→maroon for beige bg ========================================================================= */ /* ---------- 1) Hero bg → beige with subtle brass + maroon accents ----- */ main.tti-course .tti-hero{ background: radial-gradient(at 92% 0%, rgba(201,169,97,0.20) 0%, transparent 55%), radial-gradient(at 4% 100%, rgba(122,0,18,0.05) 0%, transparent 60%), linear-gradient(135deg, #faf6ee 0%, #f3ebd7 100%) !important; color: var(--tti-ink) !important; border: 1px solid var(--tti-cream-line, #e8e1d6) !important; box-shadow: 0 18px 48px rgba(122,0,18,0.08), 0 2px 8px rgba(15,15,16,0.04) !important; } /* Keep the brass top hairline — works on beige */ main.tti-course .tti-hero::before{ background: linear-gradient(90deg, transparent, var(--tti-brass) 28%, var(--tti-brass) 72%, transparent) !important; opacity: 0.85 !important; } /* ---------- 3) Type/effects → maroon/ink for beige bg ------------------ */ main.tti-course .tti-hero__eyebrow{ color: var(--tti-maroon) !important; } main.tti-course .tti-hero__eyebrow::before{ background: var(--tti-maroon) !important; } main.tti-course .tti-hero__title, main.tti-course .tti-hero h1{ color: var(--tti-maroon) !important; text-shadow: none !important; } main.tti-course .tti-hero__lede, main.tti-course .tti-hero__subtitle, main.tti-course .tti-hero h1 + p{ color: rgba(15,15,16,0.85) !important; background: transparent !important; } /* Fact tiles — white surface on beige */ main.tti-course .tti-hero__fact{ background: #ffffff !important; border: 1px solid var(--tti-cream-line, #e8e1d6) !important; color: var(--tti-muted) !important; box-shadow: 0 1px 2px rgba(122,0,18,0.04) !important; } main.tti-course .tti-hero__fact:hover{ border-color: rgba(122,0,18,0.28) !important; box-shadow: 0 6px 14px rgba(122,0,18,0.08) !important; } main.tti-course .tti-hero__fact strong{ color: var(--tti-maroon) !important; } main.tti-course .tti-hero__fact:not(:has(strong)){ color: var(--tti-ink) !important; } /* Proof pills — maroon-on-cream, rating stays solid maroon */ main.tti-course .tti-hero__proof > li, main.tti-course .tti-hero__proof-mark{ background: #ffffff !important; border: 1px solid rgba(122,0,18,0.28) !important; color: var(--tti-maroon) !important; } main.tti-course .tti-hero__proof > li.tti-hero__proof-rating, main.tti-course .tti-hero__proof-rating{ background: var(--tti-maroon) !important; border-color: var(--tti-maroon) !important; color: var(--tti-cream) !important; } /* CTA card — clean white card on beige */ main.tti-course .tti-hero__cta{ background: #ffffff !important; border: 1px solid var(--tti-cream-line, #e8e1d6) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 8px 24px rgba(122,0,18,0.08), 0 2px 6px rgba(15,15,16,0.04) !important; } /* Keep brass top hairline for elegance */ main.tti-course .tti-hero__cta::before{ background: var(--tti-brass) !important; opacity: 1 !important; } main.tti-course .tti-hero__price{ color: var(--tti-maroon) !important; text-shadow: none !important; } main.tti-course .tti-hero__price small{ color: var(--tti-muted) !important; } /* Enroll button: maroon bg with cream text (inverts the prior white bg) */ main.tti-course .tti-hero__enroll, main.tti-course .tti-hero a[class*="enroll"]{ background: var(--tti-maroon) !important; color: #ffffff !important; box-shadow: 0 6px 16px rgba(122,0,18,0.28), 0 2px 4px rgba(122,0,18,0.18) !important; } main.tti-course .tti-hero__enroll:hover, main.tti-course .tti-hero a[class*="enroll"]:hover{ background: var(--tti-maroon-deep) !important; color: #ffffff !important; box-shadow: 0 10px 24px rgba(122,0,18,0.36), 0 3px 6px rgba(122,0,18,0.22) !important; } /* ---------- 2) Course image: same size as CTA, flush-right alignment --- */ /* Image right edge aligns with CTA right edge (= hero content right edge). Image width matches the CTA grid track. Image height ≈ CTA height for visual symmetry. */ main.tti-course img[class*="dpg8khjp"]{ /* width/height/right/top reset per breakpoint below */ border: 1px solid var(--tti-cream-line, #e8e1d6) !important; box-shadow: 0 8px 24px rgba(122,0,18,0.10), 0 2px 6px rgba(15,15,16,0.04) !important; border-radius: 12px !important; } /* Base 1024 — CTA is 340w, ~195h. Image right offset = main_padding_right (~46) + hero_padding_right (56) = 102 */ main.tti-course img[class*="dpg8khjp"]{ top: 168px !important; right: 102px !important; width: 340px !important; height: 200px !important; max-width: 340px !important; max-height: 200px !important; } main.tti-course .tti-hero__cta{ margin-top: 224px !important; /* image 200 + 24 gap */ } /* ≥1280 — CTA 380w, ~210h. Image right offset = 58 + 64 = 122 */ @media (min-width: 1280px){ main.tti-course img[class*="dpg8khjp"]{ top: 184px !important; right: 122px !important; width: 380px !important; height: 210px !important; max-width: 380px !important; max-height: 210px !important; } main.tti-course .tti-hero__cta{ margin-top: 234px !important; /* 210 + 24 */ } } /* ≥1440 — CTA 420w, ~215h. Image right offset = 72 + 72 = 144 */ @media (min-width: 1440px){ main.tti-course img[class*="dpg8khjp"]{ top: 208px !important; right: 144px !important; width: 420px !important; height: 220px !important; max-width: 420px !important; max-height: 220px !important; border-radius: 14px !important; } main.tti-course .tti-hero__cta{ margin-top: 244px !important; /* 220 + 24 */ } } /* ≥1920 — CTA 440w, ~215h. Image right offset = 100 + 80 = 180 */ @media (min-width: 1920px){ main.tti-course img[class*="dpg8khjp"]{ top: 224px !important; right: 180px !important; width: 440px !important; height: 220px !important; max-width: 440px !important; max-height: 220px !important; } main.tti-course .tti-hero__cta{ margin-top: 244px !important; /* 220 + 24 */ } } /* ============================================================================ v35 (2026-04-27) — Section background + spacing polish ----------------------------------------------------------------------------- User-reported defects (post-v34): 1) "What you'll learn" sits on a lavender (~rgb 237,240,255) backdrop and carries excess vertical space above the heading and above its content. 2) "Curriculum" (Course Syllabus, [class*=dp436lui]) needs an explicit beige background to match the site's cream palette. 3) Instructor card ([class*=dpad2ibs] / .tti-instructor-card) inherits the same lavender; the avatar column is 180px wide while the image renders at 120px, leaving dead space; needs visual cleanup. 4) Certification panel ([class*=dptk43sj] inside lavender [class*=dpm1ko05]) is left-aligned and sits on lavender; needs centered content + cream bg. Root cause of the lavender purple: Droip's autogenerated post-NNNN-dpm1ko05 wrapper (the outer course content block) carries an inline-style background:#edf0ff. That same hue is reused by [class*=dp4unl3r], [class*=dpad2ibs], [class*=dpohdhgr], [class*=dpthhgdd]. We override at the class-fragment selector level so the rule is post-id-agnostic. ========================================================================== */ /* ---------- 1) Kill lavender on the outer course wrapper + repeated children */ main.tti-course [class*="dpm1ko05"], main.tti-course [class*="dpad2ibs"], main.tti-course [class*="dpohdhgr"], main.tti-course [class*="dpthhgdd"], main.tti-course [class*="dp4unl3r"]{ background: var(--tti-cream) !important; background-color: var(--tti-cream) !important; background-image: none !important; } /* The syllabus module dropdown rows ([class*=dp4unl3r]) read better as white cards on cream. Override the cream we just set to white inside the syllabus. */ main.tti-course [class*="dp436lui"] [class*="dp4unl3r"]{ background: #ffffff !important; } /* ---------- 1a) "What you'll learn" — tighten heading + content spacing ---- */ /* The outcomes section is the dp8h97bx wrapper without the instructor h2. */ main.tti-course [class*="dp8h97bx"]:not(:has(> h2.tti-h-instructor)){ padding-top: 16px !important; margin-top: 12px !important; } main.tti-course h2.tti-h-learn{ margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 12px !important; } /* First grid/list directly under the outcomes h2 */ main.tti-course h2.tti-h-learn + ul, main.tti-course h2.tti-h-learn + [class*="dp2yrjh1"], main.tti-course h2.tti-h-learn + [class*="dp6tfcba"]{ margin-top: 8px !important; padding-top: 0 !important; } /* Tighten gap between outcome modules in the 3-col grid (was 16px → 8px). */ main.tti-course [class*="dp8h97bx"]:not(:has(> h2.tti-h-instructor)) [class*="dp6tfcba"], main.tti-course [class*="dp8h97bx"]:not(:has(> h2.tti-h-instructor)) [class*="dp2yrjh1"]{ gap: 8px !important; row-gap: 8px !important; column-gap: 8px !important; } /* Also tighten any ul-based layout in case some posts render the outcomes as a list rather than the dp6tfcba grid. */ main.tti-course [class*="dp8h97bx"]:not(:has(> h2.tti-h-instructor)) ul{ row-gap: 8px !important; } main.tti-course [class*="dp8h97bx"]:not(:has(> h2.tti-h-instructor)) ul > li{ margin-bottom: 0 !important; } /* ---------- 2) "Curriculum" (Course Syllabus) — 3-col tile grid + cream bg v36 (2026-04-27): convert from a 1-column flex stack to a 3-col grid of compact module tiles. Each tile keeps Droip's accordion semantics — the dropdown opens in place inside its tile and the surrounding tiles do NOT stretch (align-items: start ensures only the opened tile grows). */ main.tti-course [class*="dp436lui"]{ background: var(--tti-cream) !important; background-color: var(--tti-cream) !important; background-image: none !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* v37.8: every tile gets the same fixed height (158px — fits 2-line titles + meta). Module titles are clamped to 2 lines below so no module exceeds 158px and no row overlaps. row-gap reduced to 14px for a tighter rhythm. align-items: stretch makes 1-line tiles match the row height too. */ grid-auto-rows: 158px !important; align-items: stretch !important; gap: 14px 14px !important; row-gap: 14px !important; column-gap: 14px !important; padding: 16px !important; } /* Clamp module titles to 2 lines so all tiles render uniform height */ main.tti-course [class*="dp436lui"] [class*="dpwy7tt7"]{ display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.3 !important; word-break: break-word !important; } /* Hide the Droip raw JSON collection placeholder that renders as a grid cell. */ main.tti-course [class*="dp436lui"] > [droip_collection_random_id], main.tti-course [class*="dp436lui"] > [data-droip="dpyiw1zk"]{ display: none !important; } /* The container's first non-tile child is a small section header ("Course Syllabus · N modules · X hours"). Span the full grid row. */ main.tti-course [class*="dp436lui"] > [data-droip="dpfq0t44"]{ grid-column: 1 / -1 !important; margin: 0 0 4px !important; padding: 4px 4px 8px !important; border-bottom: 1px solid rgba(122,0,18,0.10) !important; } /* Each module tile = the dpbojbtd wrapper that contains a dropdown. */ main.tti-course [class*="dp436lui"] > [class*="dpbojbtd"], main.tti-course [class*="dp436lui"] > .droip-dropdown, main.tti-course [class*="dp436lui"] > [class*="dp794i0s"]{ background: #ffffff !important; border: 1px solid rgba(122,0,18,0.14) !important; border-radius: 10px !important; overflow: hidden !important; margin: 0 !important; align-self: stretch !important; } /* The dpbojbtd tile + the dropdown inside it must stack their children vertically (header on top, body below). Default Droip styling is flex-row, which split the header to ~161px and squeezed module titles. Force block layout so each child takes the full tile width. */ main.tti-course [class*="dp436lui"] > [class*="dpbojbtd"]{ display: block !important; /* v37.8: uniform tile height — fits 2-line titles + meta. Combined with align-self: stretch above, all tiles render at the same height. */ min-height: 158px !important; height: 158px !important; } main.tti-course [class*="dp436lui"] [class*="dp794i0s"]{ display: block !important; width: 100% !important; /* Droip ships dp794i0s with 72px left-pad + 24px right-pad + 4px left-border (a leftover from a sidebar-rail design). That ate 100px of the 262px tile width and squeezed module titles to ~133px. Zero them all. */ padding: 0 !important; border-width: 0 !important; border-left: 0 !important; /* v36.2: kill the white background on dp794i0s so the outer tile (dpbojbtd) provides the only card surface — no double white edge. */ background: transparent !important; background-color: transparent !important; box-shadow: none !important; /* Reset transform set on hover by older rule (line ~441). */ transform: none !important; } /* v36.2: cancel the legacy hover translate (was lifting the dropdown by 1px and creating a perceivable double-card edge against the outer tile). */ main.tti-course [class*="dp436lui"] [class*="dp794i0s"]:hover{ transform: none !important; box-shadow: none !important; } /* v36.2: reposition the auto-generated module-number chip ("01" "02" ...) to the TOP-LEFT corner of the tile and reserve padding so the title's first line never wraps under it. Originally a 40×40 cream chip floated 20px down inside the dropdown — at 3-col widths the chip overlapped the 2nd line of long titles. */ main.tti-course [class*="dp436lui"] [class*="dp794i0s"]::before{ /* override the line 446-461 absolute placement */ top: 8px !important; left: 10px !important; width: 30px !important; height: 20px !important; border-radius: 4px !important; font-size: 11px !important; font-weight: 700 !important; background: var(--tti-maroon) !important; color: #fff !important; border: 0 !important; z-index: 5 !important; letter-spacing: 0.04em !important; } /* Reserve space for the chip on the title's first line. */ main.tti-course [class*="dp436lui"] [class*="dpwy7tt7"]{ padding-left: 36px !important; min-height: 22px !important; } /* Clamp the title to 2 lines so closed tiles all match height. */ main.tti-course [class*="dp436lui"] [class*="dpwy7tt7"] h2{ display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; max-height: calc(2 * 1.35 * 14px) !important; } /* When opened, allow full title (lift the clamp). */ main.tti-course [class*="dp436lui"] [class*="dp794i0s"].droip-dropdown-open [class*="dpwy7tt7"] h2{ -webkit-line-clamp: unset !important; max-height: none !important; display: block !important; } /* When the dropdown inside a tile opens, span the row + let it grow tall. */ main.tti-course [class*="dp436lui"] > [class*="dpbojbtd"]:has(.droip-dropdown-open){ grid-column: span 3 !important; grid-row: span 3 !important; border-color: var(--tti-maroon) !important; height: auto !important; min-height: 0 !important; } /* Compact header bar inside each tile. Original Droip padding 24px 32px is too large for 3-col tile mode. v36.1: switch from flex-row (which split 264px tile width 50/50 between title and lesson-count, squeezing titles to ~66px wide and wrapping them character-by-character) to flex-column so title gets the full row, lesson-count meta sits below. */ main.tti-course [class*="dp436lui"] > [class*="dp794i0s"] > [class*="dpdkfvn5"], main.tti-course [class*="dp436lui"] [class*="dpdkfvn5"]{ padding: 12px 14px !important; cursor: pointer !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 6px !important; width: 100% !important; box-sizing: border-box !important; } /* Title wrapper takes full tile width; H2 inside flows normally. */ main.tti-course [class*="dp436lui"] [class*="dpwy7tt7"]{ width: 100% !important; min-width: 0 !important; flex: 0 0 auto !important; display: flex !important; align-items: flex-start !important; gap: 8px !important; } main.tti-course [class*="dp436lui"] [class*="dpwy7tt7"] h2{ font-size: 14px !important; line-height: 1.35 !important; margin: 0 !important; width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; white-space: normal !important; word-break: break-word !important; overflow-wrap: anywhere !important; color: var(--tti-ink-1, #1a1a1f) !important; font-weight: 600 !important; } /* Lesson-count meta row sits below the title, full width. */ main.tti-course [class*="dp436lui"] [class*="dp1icnsr"]{ width: 100% !important; flex: 0 0 auto !important; display: flex !important; align-items: center !important; gap: 10px !important; font-size: 12px !important; color: var(--tti-ink-2, #5a5a63) !important; } main.tti-course [class*="dp436lui"] [class*="dp1icnsr"] [class*="dp3i4z9o"]{ flex: 1 1 auto !important; min-width: 0 !important; gap: 8px !important; font-size: 12px !important; } /* Chevron — keep visible at fixed size, push to far right. */ main.tti-course [class*="dp436lui"] [class*="dp1icnsr"] > svg, main.tti-course [class*="dp436lui"] [class*="dpgq8fyv"]{ flex: 0 0 16px !important; width: 16px !important; height: 16px !important; margin-left: auto !important; color: var(--tti-maroon) !important; transition: transform 200ms ease !important; } /* Tile-state hover */ main.tti-course [class*="dp436lui"] > [class*="dp794i0s"]:hover{ border-color: rgba(122,0,18,0.30) !important; box-shadow: 0 2px 8px -4px rgba(0,0,0,0.10) !important; } main.tti-course [class*="dp436lui"] > [class*="dp794i0s"].droip-dropdown-open{ border-color: var(--tti-maroon) !important; grid-column: span 3 !important; /* opened tile takes the full row width */ } /* ---------- 2a) Dropdown infrastructure (port of tablet rules ~1038-1196) The desktop CSS previously had only the closed-state hide and was missing all the open-state styling, so the lesson list never rendered. Bring the full set in (lesson list / badge / icon / chevron / backdrop hide). */ /* Hide Droip's raw JSON placeholders inside dropdowns regardless of state. */ main.tti-course [class*="dp794i0s"] textarea, main.tti-course [class*="dp794i0s"] [class*="dpesa6lh"], main.tti-course [class*="dp794i0s"] [droip_collection_random_id], main.tti-course [class*="dp794i0s"] [class*="dpfdplh4"]{ display: none !important; visibility: hidden !important; height: 0 !important; max-height: 0 !important; overflow: hidden !important; } /* Open-state expansion wrapper. Force visible + transparent (Droip ships dp4unl3r with rgb(237,240,255) lavender). */ main.tti-course [class*="dp794i0s"].droip-dropdown-open [class*="dp4unl3r"]{ background: transparent !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 12px 12px !important; margin: 0 !important; color: var(--tti-ink-2) !important; font-size: 14px !important; line-height: 1.5 !important; display: block !important; max-height: none !important; height: auto !important; overflow: visible !important; } /* Module detail panel (PHP-injected from topic post_content). */ main.tti-course [class*="dp436lui"] .tti-module-detail{ display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 12px 14px !important; background: var(--tti-cream) !important; border: 1px solid var(--tti-cream-line, rgba(122,0,18,0.14)) !important; border-radius: 8px !important; margin: 6px 0 4px !important; } main.tti-course [class*="dp436lui"] .tti-module-detail__desc{ margin: 0 !important; color: var(--tti-ink-2) !important; font-size: 13.5px !important; line-height: 1.6 !important; } /* Lesson list (PHP-injected from Tutor topics). */ main.tti-course [class*="dp436lui"] .tti-module-lessons{ list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; background: transparent !important; border: 1px solid var(--tti-cream-line, rgba(122,0,18,0.14)) !important; border-radius: 8px !important; overflow: hidden !important; } /* Outcomes section's `li > *` rule (line ~738) forces width:100% which squeezes lesson titles to one-char-per-line. Reset that for lesson list. */ main.tti-course [class*="dp436lui"] .tti-module-lessons li > *{ width: auto !important; display: inline-flex !important; } main.tti-course [class*="dp436lui"] .tti-module-lessons__title{ background: transparent !important; flex: 1 1 auto !important; min-width: 0 !important; display: inline !important; white-space: normal !important; color: var(--tti-ink-2) !important; font-weight: 500 !important; word-break: break-word !important; } main.tti-course [class*="dp436lui"] .tti-module-lessons li{ display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 14px !important; margin: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; color: var(--tti-ink-2) !important; font-size: 13px !important; line-height: 1.45 !important; min-height: 0 !important; border-bottom: 1px solid rgba(232,225,214,0.6) !important; transition: background 160ms var(--tti-ease), padding-left 160ms var(--tti-ease) !important; } main.tti-course [class*="dp436lui"] .tti-module-lessons li:last-child{ border-bottom: 0 !important; } main.tti-course [class*="dp436lui"] .tti-module-lessons li:hover{ background: #fff !important; padding-left: 18px !important; } main.tti-course [class*="dp436lui"] .tti-module-lessons li::before, main.tti-course [class*="dp436lui"] .tti-module-lessons li::after{ content: none !important; display: none !important; } main.tti-course [class*="dp436lui"] .tti-module-lessons__icon{ display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; flex: 0 0 20px !important; background: var(--tti-maroon) !important; color: #fff !important; font-size: 10px !important; font-weight: 800 !important; border-radius: 50% !important; line-height: 1 !important; } main.tti-course [class*="dp436lui"] .tti-module-lessons__badge{ display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-left: auto !important; padding: 3px 8px !important; background: rgba(122,0,18,0.08) !important; color: var(--tti-maroon) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; border-radius: 4px !important; line-height: 1 !important; flex: 0 0 auto !important; } /* Hide Droip's full-viewport dropdown backdrop. */ main.tti-course [class*="dp794i0s"] .droip-dropdown-backdrop{ display: none !important; } /* Chevron — visible always; rotate on open. */ main.tti-course [class*="dp794i0s"] > [class*="dpwy7tt7"] > [class*="dpgq8fyv"], main.tti-course [class*="dp794i0s"] [class*="dpwy7tt7"] > [class*="dpgq8fyv"]{ display: inline-flex !important; } main.tti-course [class*="dp794i0s"].droip-dropdown-open > [class*="dpwy7tt7"] > [class*="dpgq8fyv"], main.tti-course [class*="dp794i0s"].droip-dropdown-open [class*="dpwy7tt7"] > [class*="dpgq8fyv"]{ transform: rotate(180deg) !important; color: var(--tti-maroon) !important; } /* ---------- 3) "Meet Your Instructor" — visual defect cleanup ------------- */ /* Card frame: white-on-cream with maroon hairline rail, consistent with v33 outcomes language. */ main.tti-course .tti-instructor-card, main.tti-course h2.tti-h-instructor ~ [class*="dpad2ibs"]{ background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; border: 1px solid rgba(122,0,18,0.16) !important; border-radius: 12px !important; box-shadow: 0 1px 0 rgba(122,0,18,0.04), 0 8px 24px -16px rgba(0,0,0,0.18) !important; } /* Tighten the avatar column so the 120px image no longer leaves a 60px gap. Use auto for the image column and let the image size itself; cap at 160. */ main.tti-course .tti-instructor-card{ grid-template-columns: 160px 1fr !important; column-gap: 28px !important; align-items: center !important; padding: 24px 32px !important; } /* Higher specificity than line 688's 4-class chain by targeting the dp97md4s wrapper and the img inside .tti-instructor-card together. */ main.tti-course h2.tti-h-instructor ~ [class*="dpad2ibs"] [class*="dp97md4s"]:has(> img){ width: 132px !important; max-width: 132px !important; flex: 0 0 132px !important; align-self: center !important; } main.tti-course h2.tti-h-instructor ~ [class*="dpad2ibs"] [class*="dp97md4s"] img, main.tti-course .tti-instructor-card [class*="dp97md4s"] img, main.tti-course .tti-instructor-card > img, main.tti-course h2.tti-h-instructor ~ [class*="dpad2ibs"] > img{ width: 160px !important; height: 160px !important; max-width: 160px !important; max-height: 160px !important; min-width: 160px !important; min-height: 160px !important; object-fit: cover !important; border-radius: 50% !important; border: 2px solid var(--tti-maroon) !important; display: block !important; margin: 0 !important; } /* Name / role / chips — clean type rhythm */ main.tti-course .tti-instructor-name__name{ margin: 0 0 4px 0 !important; line-height: 1.2 !important; } main.tti-course .tti-instructor-name__role{ margin: 0 0 10px 0 !important; color: var(--tti-maroon) !important; font-weight: 600 !important; } main.tti-course .tti-instructor-name__chips{ margin: 0 !important; gap: 8px !important; flex-wrap: wrap !important; } main.tti-course .tti-instructor-name__chip{ background: var(--tti-cream) !important; color: var(--tti-maroon) !important; border: 1px solid rgba(122,0,18,0.20) !important; } /* ---------- 4) "Certification" — center content + cream/beige bg --------- */ main.tti-course [class*="dptk43sj"]{ background: var(--tti-cream) !important; background-color: var(--tti-cream) !important; background-image: none !important; text-align: center !important; padding: 32px 40px !important; border-radius: 12px !important; border: 1px solid rgba(122,0,18,0.16) !important; } main.tti-course [class*="dptk43sj"] > *{ margin-left: auto !important; margin-right: auto !important; } main.tti-course [class*="dptk43sj"] h2.tti-h-certificate, main.tti-course [class*="dptk43sj"] p, main.tti-course [class*="dptk43sj"] li{ text-align: center !important; } main.tti-course [class*="dptk43sj"] ul, main.tti-course [class*="dptk43sj"] ol{ list-style-position: inside !important; padding-left: 0 !important; } main.tti-course [class*="dptk43sj"] img{ margin-left: auto !important; margin-right: auto !important; display: block !important; } } /* ============================================================================ * v37 (2026-04-27) — Trust-signals grid + Related-Training flat cards * Reviews top (full), Instructor | Cert paired row, Related polished to home. * DOM probed: main.tti-course direct children = .tti-hero, content-wrapper, * .droip-pagination, dpm1ko05 (cert), .tti-instructor-card (NEW v35 wrap), * dpwcywdl, dp0lc8fb, dp1rg588. * Strategy: * - display:grid on main.tti-course with named areas * - display:contents on dpm1ko05 + dpnjdwkl to lift cert into grid * - .tti-instructor-card (top-level v35 wrap) goes directly to "instructor" * - hide deep duplicate dpad2ibs that lives inside dped6anj (the v35 wrap copy) * ============================================================================ */ @media (min-width: 1024px){ /* --- Trust-signals grid layout ------------------------------------------ */ main.tti-course{ display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-areas: "hero hero" "content content" "reviews reviews" "instructor cert" "related related" "extra extra" !important; column-gap: 24px !important; row-gap: 36px !important; align-items: stretch !important; } /* Hero — explicit assignment */ main.tti-course > section.tti-hero{ grid-area: hero !important; } /* Inner content stack (outcomes + curriculum + deep duplicates) — full width */ main.tti-course > div:not([class]){ grid-area: content !important; min-width: 0; } main.tti-course > .droip-pagination{ display: none !important; } /* Lift cert out of dpm1ko05 > dpnjdwkl */ main.tti-course > [class*="dpm1ko05"], main.tti-course > [class*="dpm1ko05"] > [class*="dpnjdwkl"]{ display: contents !important; } main.tti-course > [class*="dpm1ko05"] > [class*="dpnjdwkl"] > [class*="dptk43sj"]{ grid-area: cert !important; } /* Top-level trust-trio wraps */ main.tti-course > .tti-instructor-card{ grid-area: instructor !important; } main.tti-course > [class*="dpwcywdl"]{ grid-area: reviews !important; } main.tti-course > [class*="dp0lc8fb"]{ grid-area: related !important; } main.tti-course > [class*="dp1rg588"]{ grid-area: extra !important; } /* Hide the deep duplicate dpad2ibs inside dped6anj (the v35 wrap is what we keep) */ main.tti-course [class*="dped6anj"] [class*="dpad2ibs"]{ display: none !important; } /* --- Instructor + Cert pair: equal-height column cards ------------------ */ main.tti-course > .tti-instructor-card, main.tti-course > [class*="dpm1ko05"] > [class*="dpnjdwkl"] > [class*="dptk43sj"]{ height: auto !important; align-self: stretch !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* --- Related Training: 1-row card row matching home's flat fingerprint --- */ /* Home cards (probed): 16:9 image, 0 radius, transparent bg, no shadow, pill button 28px radius, 14px font, 8px 14px padding. */ main.tti-course [class*="dp0lc8fb"] [class*="dpu7rh63"]{ display: block !important; margin-top: 20px !important; width: 100% !important; } main.tti-course [class*="dp0lc8fb"] [class*="dpixfqu2"]{ display: grid !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; grid-auto-flow: column !important; grid-auto-columns: minmax(260px, 1fr) !important; gap: 28px !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; } /* Card item — flat (matches home) */ main.tti-course [class*="dp0lc8fb"] [class*="dpkrudh6"]{ display: flex !important; flex-direction: column !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; padding: 0 !important; height: auto !important; min-height: 0 !important; transition: transform 0.2s var(--tti-ease, ease), opacity 0.2s ease !important; scroll-snap-align: start; } main.tti-course [class*="dp0lc8fb"] [class*="dpkrudh6"]:hover{ transform: translateY(-2px) !important; box-shadow: none !important; opacity: 0.94; } main.tti-course [class*="dp0lc8fb"] img[class*="dpv8oqt2"]{ display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 16/9 !important; object-fit: cover !important; border-radius: 0 !important; margin: 0 0 14px !important; background: #f3eee8 !important; } main.tti-course [class*="dp0lc8fb"] [class*="dpfenovj"]{ padding: 0 !important; min-height: 0 !important; gap: 8px !important; } /* Title link — plain dark text matching home (NOT styled as a button). v37.1 fix: previous selector `a:not([class*="dpv8oqt2"]):last-of-type` matched the title wrapping

, painting the entire title as a maroon button. Scope tightly to title classes now. */ main.tti-course [class*="dp0lc8fb"] [class*="dpkrudh6"] [class*="dp2fgknj"]{ display: block !important; background: transparent !important; color: var(--tti-ink-1, #0f0f10) !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; text-decoration: none !important; text-align: left !important; transition: color 0.2s var(--tti-ease, ease) !important; } main.tti-course [class*="dp0lc8fb"] [class*="dpkrudh6"] [class*="dp2fgknj"]:hover{ color: var(--tti-maroon, #7a0012) !important; } main.tti-course [class*="dp0lc8fb"] [class*="dpkrudh6"] [class*="dp2fgknj"] h2, main.tti-course [class*="dp0lc8fb"] [class*="dpkrudh6"] [class*="dp89urhc"]{ font-size: 16px !important; font-weight: 500 !important; line-height: 24px !important; color: inherit !important; margin: 0 0 6px !important; text-transform: none !important; letter-spacing: 0 !important; } /* Author byline (dp54a86x = "by " wrapper) */ main.tti-course [class*="dp0lc8fb"] [class*="dpkrudh6"] [class*="dp54a86x"]{ display: flex !important; gap: 4px !important; align-items: baseline !important; margin: 4px 0 6px !important; flex-wrap: wrap !important; } main.tti-course [class*="dp0lc8fb"] [class*="dpkrudh6"] [class*="dp54a86x"] p{ font-size: 12px !important; color: rgba(15,15,16,0.55) !important; margin: 0 !important; line-height: 1.4 !important; font-weight: 400 !important; } /* CTA — scope ONLY to actual