, and since

is later in the document, it would paint over the dropdown — making the dropdown items unclickable. */ body.de-studio main, body.de-studio .de-shell { position: relative; z-index: 1; } /* ============================================================ Studio nav header (dark version of cd-header) ============================================================ */ body.de-studio .cd-header { background: rgba(6,16,42,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--de-border); } body.de-studio .cd-nav-a { color: var(--de-fg-muted); } body.de-studio .cd-nav-a:hover { color: var(--brand-blue); } body.de-studio #cd-user-dropdown { background: var(--de-bg-elev-1); border-color: var(--de-border); box-shadow: var(--de-shadow-lg); } body.de-studio .cd-dd-header { border-bottom-color: var(--de-border); } body.de-studio .cd-dd-name { color: var(--de-fg); } body.de-studio .cd-dd-email { color: var(--de-fg-subtle); } body.de-studio .cd-dd-link { color: var(--de-fg-muted); } body.de-studio .cd-dd-link:hover { background: var(--de-bg-elev-2); color: var(--de-fg); } body.de-studio .cd-dd-link.red { color: var(--red-400); } body.de-studio .cd-dd-sep { background: var(--de-border); } body.de-studio #cd-mob-menu { background: rgba(6,16,42,0.97); border-top-color: var(--de-border); } body.de-studio .cd-mob-link { color: var(--de-fg-muted); } body.de-studio .cd-mob-link:hover { background: var(--de-bg-elev-1); color: var(--brand-blue); } body.de-studio .cd-mob-sep { background: var(--de-border); } body.de-studio .cd-mob-label { color: var(--de-fg-subtle); } /* ============================================================ Breadcrumb on dark ============================================================ */ body.de-studio .de-breadcrumb { border-bottom: 1px solid var(--de-border); background: rgba(6,16,42,0.5); } body.de-studio .de-breadcrumb a { color: var(--de-fg-subtle); text-decoration: none; transition: color var(--de-dur-fast); } body.de-studio .de-breadcrumb a:hover { color: var(--brand-blue); } body.de-studio .de-breadcrumb .current { color: var(--de-fg); font-weight: 700; } body.de-studio .de-breadcrumb .sep { color: var(--de-fg-disabled); } /* ============================================================ Reusable building blocks ============================================================ */ .de-shell { max-width: 1280px; margin: 0 auto; padding: 32px; } @media (max-width: 640px) { .de-shell { padding: 20px 16px 40px; } } .de-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-blue); } .de-h1 { font-size: clamp(32px, 4vw, 56px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.05; color: var(--de-fg); margin: 0; } .de-h1 .accent { color: var(--brand-blue); font-style: italic; } .de-lede { color: var(--de-fg-muted); font-size: 16px; line-height: 1.55; max-width: 720px; margin: 8px 0 0; } .de-section-label { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--de-fg-subtle); } .de-section-label::before { content: ''; width: 32px; height: 2px; background: var(--brand-blue); } /* Card (used for tool tiles) */ .de-card { position: relative; display: flex; flex-direction: column; padding: 32px; background: var(--de-bg-elev-1); border: 1px solid var(--de-border); border-radius: var(--de-radius-lg); color: inherit; text-decoration: none; transition: all var(--de-dur-base) var(--de-ease-out); overflow: hidden; min-height: 280px; } .de-card::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 3px; background: var(--brand-blue); transition: width var(--de-dur-base) var(--de-ease-out); } .de-card:hover { background: var(--de-bg-elev-2); border-color: rgba(64,158,215,0.4); transform: translateY(-2px); box-shadow: var(--de-shadow-md); } .de-card:hover::before { width: 100%; } .de-card-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(64,158,215,0.12); border: 1px solid rgba(64,158,215,0.3); border-radius: var(--de-radius-md); margin-bottom: 24px; color: var(--brand-blue); transition: all var(--de-dur-base) var(--de-ease-out); } .de-card:hover .de-card-icon { background: rgba(64,158,215,0.22); border-color: var(--brand-blue); } .de-card-icon svg { width: 28px; height: 28px; } .de-card-title { font-size: 22px; font-weight: 700; color: var(--de-fg); margin: 0 0 8px; letter-spacing: -0.01em; } .de-card-desc { font-size: 14px; color: var(--de-fg-muted); line-height: 1.55; margin: 0 0 24px; flex: 1; } .de-card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .de-card-chip { padding: 4px 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--de-border); border-radius: var(--de-radius-pill); font-size: 10.5px; font-weight: 600; color: var(--de-fg-subtle); letter-spacing: 0.06em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .de-card-action { display: flex; align-items: center; gap: 8px; color: var(--brand-blue); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .de-card-action svg { width: 16px; height: 16px; transition: transform var(--de-dur-base) var(--de-ease-racing); } .de-card:hover .de-card-action svg { transform: translateX(4px); } .de-card[aria-disabled="true"] { opacity: 0.55; pointer-events: none; } .de-card[aria-disabled="true"] .de-card-action::after { content: '· coming soon'; margin-left: 6px; color: var(--de-fg-subtle); font-weight: 500; } /* Card grid */ .de-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } /* Buttons (primary brand-blue + ghost) */ .de-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font-family: var(--de-font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: transparent; color: var(--de-fg); border: 1px solid var(--de-border-strong); border-radius: var(--de-radius-sm); cursor: pointer; text-decoration: none; transition: all var(--de-dur-fast) var(--de-ease-out); } .de-btn:hover { border-color: var(--brand-blue); color: var(--brand-blue); background: rgba(64,158,215,0.08); } .de-btn-primary { background: var(--brand-blue); border-color: var(--brand-blue); color: var(--brand-navy); } .de-btn-primary:hover { background: var(--blue-500); border-color: var(--blue-500); color: var(--brand-navy); box-shadow: var(--de-glow-blue); } .de-btn-danger { border-color: rgba(205,32,45,0.5); color: var(--red-400); } .de-btn-danger:hover { background: rgba(205,32,45,0.12); border-color: var(--brand-red); color: #ffd0d3; } /* Tabs — shared underline-tab pattern. The Studio's canonical view-switcher look: flat strip with a 1px bottom rule, 2px brand-blue underline on the active tab. Use anywhere a page has Layouts / Planner-style switching. */ .de-tabs { display: flex; gap: 4px; margin: 0 0 24px; border-bottom: 1px solid var(--de-border); flex-wrap: wrap; } .de-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--de-fg-subtle); font-family: var(--de-font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: color 0.15s, border-color 0.15s; } .de-tab:hover { color: var(--de-fg-muted); } .de-tab.active, .de-tab[aria-selected="true"] { color: var(--brand-blue); border-bottom-color: var(--brand-blue); } /* Inputs / selects (dark-themed) */ .de-input, .de-select, .de-textarea { width: 100%; background: var(--de-bg-inset); border: 1px solid var(--de-border); border-radius: var(--de-radius-sm); color: var(--de-fg); font-family: var(--de-font-sans); font-size: 13px; font-weight: 500; padding: 10px 12px; transition: border-color var(--de-dur-fast), box-shadow var(--de-dur-fast); } .de-input:focus, .de-select:focus, .de-textarea:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(64,158,215,0.18); } .de-textarea { font-feature-settings: "tnum" 1; resize: vertical; min-height: 120px; } .de-label { display: block; font-size: 10.5px; font-weight: 700; color: var(--de-fg-subtle); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; } /* Status / toast */ .de-status { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: var(--de-radius-sm); display: inline-flex; align-items: center; gap: 6px; } .de-status-success { color: var(--green-400); background: rgba(47,201,128,0.10); } .de-status-error { color: var(--red-400); background: rgba(241,78,85,0.10); } .de-status-info { color: var(--brand-blue); background: rgba(64,158,215,0.10); } /* Footer */ body.de-studio footer.de-footer { margin-top: 48px; padding: 24px 32px; border-top: 1px solid var(--de-border); color: var(--de-fg-subtle); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } /* ============================================================ Tailwind-utility reskin for studio pages Pages built originally with Tailwind light-theme utilities (bg-white, text-slate-*, border-slate-*, status colour pills) work as-is when their body has class="de-studio" — the rules below retone them onto DiGit-edge dark surfaces. Scoped to body.de-studio so existing light pages aren't affected. Targeted at the exact classes used in the invoices, yt-downloader and admin pages. ============================================================ */ /* Surfaces */ body.de-studio .bg-white, body.de-studio .bg-background-light { background: var(--de-bg-elev-1) !important; } body.de-studio .bg-slate-50, body.de-studio .bg-slate-100 { background: var(--de-bg-elev-2) !important; } body.de-studio .bg-slate-200 { background: var(--de-bg-inset) !important; } /* Text */ body.de-studio .text-slate-900, body.de-studio .text-slate-800, body.de-studio .text-slate-700 { color: var(--de-fg) !important; } body.de-studio .text-slate-600, body.de-studio .text-slate-500 { color: var(--de-fg-muted) !important; } body.de-studio .text-slate-400 { color: var(--de-fg-subtle) !important; } body.de-studio .text-slate-300 { color: var(--de-fg-disabled) !important; } /* Borders / dividers */ body.de-studio .border-slate-100, body.de-studio .border-slate-200, body.de-studio .border-slate-300 { border-color: var(--de-border) !important; } body.de-studio .divide-slate-100 > * + *, body.de-studio .divide-slate-200 > * + * { border-color: var(--de-border) !important; } /* Form controls */ body.de-studio input[type="text"], body.de-studio input[type="email"], body.de-studio input[type="password"], body.de-studio input[type="number"], body.de-studio input[type="search"], body.de-studio input[type="date"], body.de-studio input[type="tel"], body.de-studio input[type="url"], body.de-studio textarea, body.de-studio select { color: var(--de-fg); background-color: var(--de-bg-inset); } body.de-studio .placeholder-slate-400::placeholder { color: var(--de-fg-disabled) !important; } body.de-studio code { background: var(--de-bg-elev-2) !important; color: var(--brand-blue) !important; } /* Shadows tone — dark bg already has implicit lift; soften CSS shadows */ body.de-studio .shadow-sm, body.de-studio .shadow, body.de-studio .shadow-md, body.de-studio .shadow-lg, body.de-studio .shadow-xl { box-shadow: var(--de-shadow-md) !important; } /* Status / accent classes (badges, alerts, info chips) */ body.de-studio .bg-amber-50, body.de-studio .bg-amber-100, body.de-studio .bg-yellow-50, body.de-studio .bg-yellow-100 { background: rgba(255,180,50,0.10) !important; } body.de-studio .border-amber-200, body.de-studio .border-yellow-200 { border-color: rgba(255,180,50,0.35) !important; } body.de-studio .text-amber-600, body.de-studio .text-amber-700, body.de-studio .text-yellow-600, body.de-studio .text-yellow-700 { color: #ffd991 !important; } body.de-studio .bg-emerald-50, body.de-studio .bg-emerald-100, body.de-studio .bg-green-50, body.de-studio .bg-green-100 { background: rgba(47,201,128,0.12) !important; } body.de-studio .border-emerald-200, body.de-studio .border-green-200 { border-color: rgba(47,201,128,0.35) !important; } body.de-studio .text-emerald-600, body.de-studio .text-emerald-700, body.de-studio .text-green-600, body.de-studio .text-green-700 { color: var(--green-400) !important; } body.de-studio .bg-rose-50, body.de-studio .bg-rose-100, body.de-studio .bg-red-50, body.de-studio .bg-red-100 { background: rgba(241,78,85,0.12) !important; } body.de-studio .border-rose-200, body.de-studio .border-red-200 { border-color: rgba(241,78,85,0.35) !important; } body.de-studio .text-rose-500, body.de-studio .text-rose-600, body.de-studio .text-rose-700, body.de-studio .text-red-500, body.de-studio .text-red-600 { color: #ffd0d3 !important; } body.de-studio .bg-blue-50, body.de-studio .bg-blue-100 { background: rgba(64,158,215,0.12) !important; } body.de-studio .border-blue-200 { border-color: rgba(64,158,215,0.35) !important; } body.de-studio .text-blue-600, body.de-studio .text-blue-700 { color: var(--brand-blue) !important; } /* primary/* references (Tailwind config maps "primary" to #0d64cc) — retone */ body.de-studio [class*="bg-primary"] { background-color: var(--brand-blue) !important; color: var(--brand-navy); } body.de-studio [class*="text-primary"]{ color: var(--brand-blue) !important; } body.de-studio [class*="border-primary"] { border-color: var(--brand-blue) !important; } body.de-studio [class*="ring-primary"]{ --tw-ring-color: rgba(64,158,215,0.4) !important; } /* ── Hover variants ─────────────────────────────────────────────── Tailwind's `hover:bg-white` / `hover:bg-slate-50` etc. generate classes that, without retoning, flash to white on dark surfaces. Match by attribute substring + :hover state to retone uniformly. */ body.de-studio [class*="hover:bg-white"]:hover, body.de-studio [class*="hover:bg-slate-50"]:hover { background: var(--de-bg-elev-2) !important; } body.de-studio [class*="hover:bg-slate-100"]:hover, body.de-studio [class*="hover:bg-slate-200"]:hover { background: var(--de-bg-inset) !important; } body.de-studio [class*="hover:text-slate-900"]:hover, body.de-studio [class*="hover:text-slate-700"]:hover { color: var(--de-fg) !important; } body.de-studio [class*="hover:text-slate-600"]:hover, body.de-studio [class*="hover:text-slate-500"]:hover { color: var(--de-fg-muted) !important; } body.de-studio [class*="hover:border-slate"]:hover { border-color: var(--de-border-strong) !important; } /* Hover variants on accent backgrounds */ body.de-studio [class*="hover:bg-rose-50"]:hover, body.de-studio [class*="hover:bg-rose-100"]:hover { background: rgba(241,78,85,0.16) !important; } body.de-studio [class*="hover:bg-amber-50"]:hover, body.de-studio [class*="hover:bg-amber-100"]:hover { background: rgba(255,180,50,0.16) !important; } body.de-studio [class*="hover:bg-emerald-50"]:hover, body.de-studio [class*="hover:bg-emerald-100"]:hover { background: rgba(47,201,128,0.16) !important; } body.de-studio [class*="hover:bg-blue-50"]:hover, body.de-studio [class*="hover:bg-blue-100"]:hover { background: rgba(64,158,215,0.16) !important; } /* Group-hover variants (Tailwind `group-hover:*`) — same fix */ body.de-studio .group:hover [class*="group-hover:bg-white"], body.de-studio .group:hover [class*="group-hover:bg-slate-50"] { background: var(--de-bg-elev-2) !important; } body.de-studio .group:hover [class*="group-hover:text-primary"] { color: var(--brand-blue) !important; } /* Catch-all: any tr:hover inside a studio page that defaults to a light hover */ body.de-studio tr:hover { background: rgba(64,158,215,0.05) !important; }