/* ========================================================================== PRINTON — dark-mode.css Activated by . The class is set before first paint by an inline script in , so there is no white flash on load. ========================================================================== */ html.dark { color-scheme: dark; --paper: #11121E; --surface: #1A1B2C; --surface-2: #26283D; --ink: #F1F1F6; --ink-soft: #A6A8BF; --line: rgba(255, 255, 255, .1); --magenta: #FF2E93; --magenta-deep: #FF6FB3; --cyan: #29B8F0; --yellow: #FFD84F; --green: #2BC486; --tint-m: #3A1B31; --tint-c: #14304A; --tint-y: #3A3217; --tint-g: #173529; --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35); --shadow-md: 0 16px 36px -14px rgba(0, 0, 0, .7); --shadow-lg: 0 30px 70px -24px rgba(0, 0, 0, .8); } html.dark body { background: var(--paper); color: var(--ink); } /* Buttons that use the ink colour as a fill need readable text on the light ink */ html.dark .btn-dark { --btn-bg: #F1F1F6; --btn-fg: #11121E; } html.dark .btn-dark:hover { --btn-fg: #fff; } html.dark .btn-primary { --btn-fill: #F1F1F6; } html.dark .btn-primary:hover { --btn-fg: #11121E; } html.dark .btn-outline:hover { --btn-fg: #11121E; } /* Header glass */ html.dark .site-header.is-scrolled { background: color-mix(in srgb, #11121E 80%, transparent); box-shadow: 0 1px 0 var(--line), 0 12px 30px -18px rgba(0, 0, 0, .9); } html.dark .logo-mark i { mix-blend-mode: screen; } /* Surfaces that were intentionally dark in light mode stay dark but lift slightly */ html.dark .marquee { background: #1F2035; color: #F1F1F6; } html.dark .marquee.alt { background: var(--magenta); color: #fff; } html.dark .stat-band { background: #1A1B2C; border: 1px solid var(--line); } html.dark .site-footer, html.dark .foot-bottom { background: #0B0C15; } html.dark .auth-visual { background: #0B0C15; } html.dark .dash-side { background: #0B0C15; border-inline-end: 1px solid var(--line); } html.dark .p-badge { background: #F1F1F6; color: #11121E; } html.dark .p-badge.b-new { background: var(--cyan); color: #06202C; } html.dark .p-badge.b-trend { background: var(--magenta); color: #fff; } html.dark .p-badge.b-best { background: var(--yellow); color: #1B1C33; } /* Product cards */ html.dark .p-card { background: var(--surface); } html.dark .p-card:hover { box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .9), 0 0 0 1px var(--line); } html.dark .p-add { background: #F1F1F6; color: #11121E; } html.dark .p-add:hover { background: var(--magenta); color: #fff; } html.dark .p-add.is-done { background: var(--green); color: #fff; } html.dark .p-act { background: #26283D; color: #F1F1F6; } html.dark .p-act:hover { background: #F1F1F6; color: #11121E; } html.dark .wish-btn.is-active { background: #26283D; color: var(--magenta); } html.dark .swatch-dot { box-shadow: inset 0 0 0 1.5px var(--surface); } /* Tabs / chips / segmented */ html.dark .tab.is-active { color: #11121E; } html.dark .tab-ink { background: #F1F1F6; } html.dark .chip.is-active, html.dark .opt.is-active { background: #F1F1F6; color: #11121E; border-color: #F1F1F6; } html.dark .view-toggle button.is-active, html.dark .pager button.is-active { background: #F1F1F6; color: #11121E; } /* Imagery sitting on light tints: soften so it does not glare */ html.dark .p-media img, html.dark .cat-card img, html.dark .art-tile img, html.dark .gallery-main img, html.dark .thumb img { filter: brightness(.92) saturate(1.05); } html.dark .hero-item img { filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .6)); } html.dark .cz-stage { background: var(--tint-c); } html.dark .hero-dots, html.dark .cz-stage .halftone { color: #fff; } /* Forms */ html.dark .input, html.dark .select, html.dark .textarea { background-color: #151625; border-color: rgba(255, 255, 255, .12); } html.dark .select { background-repeat: no-repeat; background-size: 18px; background-position: right 14px center; } html.dark[dir="rtl"] .select { background-position: left 14px center; } html.dark .select option { background: #1A1B2C; color: #F1F1F6; } html.dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.7); cursor: pointer; } html.dark .input:hover, html.dark .select:hover, html.dark .textarea:hover { border-color: rgba(255, 255, 255, .25); } html.dark .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6A8BF' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } html.dark .check input { background: #151625; } html.dark .toggle span::after { background: #F1F1F6; } html.dark .field-error { color: #FF6B81; } html.dark .field.has-error .input, html.dark .field.has-error .select, html.dark .field.has-error .textarea { border-color: #FF6B81; } /* Overlays */ html.dark .backdrop { background: rgba(0, 0, 0, .65); } html.dark .toast { background: #F1F1F6; color: #11121E; } html.dark .toast a { color: var(--magenta-deep); color: #B8005F; } html.dark .chart-tip { background: #F1F1F6; color: #11121E; } html.dark .dd-menu, html.dark .modal-panel, html.dark .drawer { border: 1px solid var(--line); } html.dark .back-top { background: #F1F1F6; color: #11121E; } html.dark .back-top:hover { background: var(--magenta); color: #fff; } /* Dashboard */ html.dark .dash-top { background: color-mix(in srgb, #11121E 86%, transparent); } html.dark .d-card { border: 1px solid var(--line); } html.dark .d-table tbody tr:hover td { background: color-mix(in srgb, var(--magenta) 8%, var(--surface)); } html.dark .st-new { color: #6FD3FF; } html.dark .st-processing { color: #B99BFF; background: rgba(185, 155, 255, .14); } html.dark .st-printing { color: #FF7DBB; } html.dark .st-fulfilled, html.dark .st-pending { color: #FFD84F; background: rgba(255, 216, 79, .13); } html.dark .st-shipped { color: #FFA05C; } html.dark .st-delivered, html.dark .st-published { color: #4BE0A0; } html.dark .st-out { color: #FF6B81; background: rgba(255, 107, 129, .12); } html.dark .trend.down { color: #FF6B81; } html.dark .ftl-step.is-done .ftl-dot { background: #F1F1F6; border-color: #F1F1F6; color: #11121E; } html.dark .vtl-step.is-done .vtl-dot { background: #F1F1F6; border-color: #F1F1F6; color: #11121E; } html.dark .dz { border-color: rgba(255, 255, 255, .18); } html.dark .step-num { background: var(--surface); } html.dark .count-box { border: 1px solid var(--line); } /* 404 plates use multiply in light mode; screen reads correctly on dark */ html.dark .big-404 span:nth-child(1), html.dark .big-404 span:nth-child(3) { mix-blend-mode: screen; } /* Registration animation keeps its CMY plates, headline ink is light */ html.dark .reg-title { color: var(--ink); } /* Crop marks */ html.dark .crop::before, html.dark .crop::after { border-color: #fff; opacity: .3; } /* Rail button */ html.dark .rail-btn { border-color: rgba(255, 255, 255, .3); } html.dark .rail-btn:hover { background: #F1F1F6; color: #11121E; } /* Scrollbars */ html.dark ::-webkit-scrollbar { width: 10px; height: 10px; } html.dark ::-webkit-scrollbar-track { background: #11121E; } html.dark ::-webkit-scrollbar-thumb { background: #2E3048; border-radius: 10px; border: 2px solid #11121E; }