/* ============================================================================
DESIGN SYSTEM — "Monochrome" (was "Aurora Glass" until 2026-08-05)
----------------------------------------------------------------------------
A centralized, professional black-on-white + glassmorphism design language.
Borrows the Artlist toolkit's glass structure (pills, off-canvas menu,
frosted nav, bottom composer toolbar). There is no brand hue: the accent is
BLACK on a true-white page, and every brand fill carries near-white ink.
The previous violet/cyan ("Aurora Glass") palette is archived in
design-backup/2026-08-05-aurora-glass/ if it ever needs to come back.
GOALS
- Single source of truth for the new look (tokens + components).
- Fully namespaced (`.ds-*` classes, `--ds-*` tokens) so it coexists with
the legacy `style.css` and never clobbers existing pages.
- Opt in per page by adding the `ds` class to a wrapper (or ).
- To restyle the whole app in the future, you edit ONLY the tokens block.
USAGE
<- enables base background + font
...components...
Or scope a single section:
SECTIONS
1. Design tokens (:root / .ds)
2. Base / reset (.ds-root)
3. Layout helpers
4. Buttons (black CTA, glass pills, icon buttons, send button)
5. Top navigation + hamburger
6. Slide-out menu (off-canvas)
7. Cards + masonry gallery
8. Model / feature list rows
9. Badges + tags + chips
10. Bottom toolbar (composer)
11. Forms / inputs
12. Utilities
============================================================================ */
/* ============================================================================
1. DESIGN TOKENS
----------------------------------------------------------------------------
Change the look of everything here. Components only reference these vars.
============================================================================ */
.ds,
.ds-root {
/* ==========================================================================
These are ALIASES onto public/css/theme.css — the one file that holds
colour literals. Re-theme the platform there, not here.
========================================================================== */
/* --- Surfaces / backgrounds --- */
--ds-bg: var(--surface-page); /* page background */
--ds-bg-elev: var(--surface-raised); /* raised panels / cards */
--ds-bg-elev-2: var(--surface-sunken); /* hover / nested panels */
/* --- Glass --- */
--ds-glass: var(--glass); /* default frosted surface */
--ds-glass-strong: var(--glass-strong); /* hover / active frosted */
--ds-glass-border: var(--glass-line); /* hairline on glass */
--ds-glass-border-soft: var(--line-soft);
--ds-blur: 18px;
--ds-blur-strong: 32px;
/* --- Brand accent ---
A brand fill always carries --ds-text-on-brand on top of it. Nothing in
the system is tinted; hierarchy comes from lightness, weight and space. */
--ds-brand: var(--brand-fill);
--ds-brand-light: var(--brand-fill);
--ds-brand-dark: var(--brand-fill-hover);
--ds-cyan: var(--ink-soft); /* legacy alias — kept neutral */
--ds-brand-grad: var(--brand-gradient);
--ds-brand-grad-hover: var(--brand-gradient-hover);
--ds-brand-glow: var(--shadow-md);
/* Secondary accent for edge glows (toolbar hairline). */
--ds-edge-glow: var(--line-strong);
--ds-edge-glow-2: var(--line);
/* --- Text --- */
--ds-text: var(--ink);
--ds-text-soft: var(--ink-soft);
--ds-text-muted: var(--ink-muted);
--ds-text-on-brand: var(--brand-ink); /* label on a brand fill */
/* --- Lines --- */
--ds-line: var(--line);
--ds-line-soft: var(--line-soft);
/* --- Shadows --- */
--ds-shadow-sm: var(--shadow-sm);
--ds-shadow-md: var(--shadow-md);
--ds-shadow-lg: var(--shadow-lg);
--ds-shadow-toolbar: 0 -10px 40px rgba(0, 0, 0, 0.10);
/* --- Radii --- */
--ds-r-sm: 10px;
--ds-r-md: 14px;
--ds-r-lg: 20px;
--ds-r-xl: 28px;
--ds-r-pill: 999px;
/* --- Spacing scale --- */
--ds-1: 4px;
--ds-2: 8px;
--ds-3: 12px;
--ds-4: 16px;
--ds-5: 20px;
--ds-6: 24px;
--ds-8: 32px;
--ds-10: 40px;
--ds-12: 48px;
/* --- Typography --- */
--ds-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--ds-fw-regular: 400;
--ds-fw-medium: 500;
--ds-fw-semibold: 600;
--ds-fw-bold: 700;
/* --- Motion --- */
--ds-t-fast: 0.16s ease;
--ds-t: 0.26s cubic-bezier(0.22, 1, 0.36, 1);
--ds-t-bounce: 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.275);
/* --- Control sizes --- */
--ds-ctrl-h: 44px;
--ds-icon-btn: 48px;
/* --- Z layers --- */
--ds-z-nav: 1100;
--ds-z-toolbar: 1150;
--ds-z-menu: 1300;
--ds-z-overlay: 1290;
}
/* ============================================================================
2. BASE / RESET
============================================================================ */
.ds-root {
margin: 0;
background: var(--ds-bg);
color: var(--ds-text);
font-family: var(--ds-font);
font-weight: var(--ds-fw-regular);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* A soft radial vignette / ambient glow behind content, Artlist-style. */
.ds-root.ds-ambient {
background:
radial-gradient(1200px 600px at 50% -10%, rgba(0, 0, 0, 0.02), transparent 60%),
var(--ds-bg);
background-attachment: fixed;
}
.ds *,
.ds *::before,
.ds *::after {
box-sizing: border-box;
}
.ds h1, .ds h2, .ds h3, .ds h4 {
font-weight: var(--ds-fw-semibold);
color: var(--ds-text);
margin: 0 0 var(--ds-3);
letter-spacing: -0.01em;
}
.ds h1 { font-size: clamp(1.75rem, 4vw, 2.6rem); }
.ds h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.ds h3 { font-size: 1.2rem; }
.ds p { color: var(--ds-text-soft); line-height: 1.6; margin: 0 0 var(--ds-3); }
.ds a { color: var(--ds-text); text-decoration: none; }
/* ============================================================================
3. LAYOUT HELPERS
============================================================================ */
.ds-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding-inline: var(--ds-5);
}
.ds-stack > * + * { margin-top: var(--ds-4); }
.ds-row { display: flex; align-items: center; gap: var(--ds-3); }
.ds-row-wrap { flex-wrap: wrap; }
.ds-spacer { flex: 1 1 auto; }
/* ============================================================================
4. BUTTONS
============================================================================ */
.ds-btn {
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ds-2);
height: var(--ds-ctrl-h);
padding: 0 var(--ds-5);
border: 0;
border-radius: var(--ds-r-pill);
font-family: inherit;
font-size: 0.95rem;
font-weight: var(--ds-fw-semibold);
line-height: 1;
cursor: pointer;
white-space: nowrap;
transition: transform var(--ds-t-fast), box-shadow var(--ds-t),
background var(--ds-t), border-color var(--ds-t);
user-select: none;
}
.ds-btn:active { transform: scale(0.97); }
.ds-btn:focus-visible {
outline: 2px solid var(--ds-brand-light);
outline-offset: 2px;
}
/* Primary — the black brand "Start Free Now" pill (light label) */
.ds-btn-primary {
background: var(--ds-brand-grad);
color: var(--ds-text-on-brand);
box-shadow: var(--ds-brand-glow), inset 0 1px 0 rgba(0, 0, 0, 0.06);
}
.ds-btn-primary:hover {
background: var(--ds-brand-grad-hover);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16),
inset 0 1px 0 rgba(0, 0, 0, 0.06);
transform: translateY(-1px);
}
/* Glass — dark frosted pill (e.g. "Sign In", "Apps", "Video") */
.ds-btn-glass {
background: var(--ds-glass);
color: var(--ds-text);
border: 1px solid var(--ds-glass-border);
-webkit-backdrop-filter: blur(var(--ds-blur));
backdrop-filter: blur(var(--ds-blur));
}
.ds-btn-glass:hover {
background: var(--ds-glass-strong);
border-color: var(--line-strong);
transform: translateY(-1px);
}
/* Ghost — text only */
.ds-btn-ghost {
background: transparent;
color: var(--ds-text-soft);
}
.ds-btn-ghost:hover { color: var(--ds-text); background: var(--ds-glass); }
/* Sizes */
.ds-btn-sm { height: 36px; padding: 0 var(--ds-4); font-size: 0.85rem; }
.ds-btn-lg { height: 54px; padding: 0 var(--ds-8); font-size: 1.05rem; }
.ds-btn-block { width: 100%; }
/* Icon button — circular glass (the "+" composer button) */
.ds-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--ds-icon-btn);
height: var(--ds-icon-btn);
flex: 0 0 auto;
border-radius: var(--ds-r-full, 50%);
border: 1px solid var(--ds-glass-border);
background: var(--ds-glass);
color: var(--ds-text);
font-size: 1.2rem;
cursor: pointer;
-webkit-backdrop-filter: blur(var(--ds-blur));
backdrop-filter: blur(var(--ds-blur));
transition: background var(--ds-t), transform var(--ds-t-fast), border-color var(--ds-t);
}
.ds-icon-btn:hover { background: var(--ds-glass-strong); border-color: var(--line-strong); }
.ds-icon-btn:active { transform: scale(0.92); }
.ds-icon-btn-sm { width: 38px; height: 38px; font-size: 1rem; }
/* Send button — light/white gradient circle with up arrow */
.ds-send-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
flex: 0 0 auto;
border: 0;
border-radius: 50%;
cursor: pointer;
color: var(--ink-inverse);
background: radial-gradient(120% 120% at 30% 25%, #000000 0%, #151515 55%, #2d2d2d 100%);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(0, 0, 0, 0.06);
transition: transform var(--ds-t-fast), box-shadow var(--ds-t);
}
.ds-send-btn:hover { transform: translateY(-1px) scale(1.04); }
.ds-send-btn:active { transform: scale(0.94); }
/* ============================================================================
5. TOP NAVIGATION + HAMBURGER
============================================================================ */
.ds-nav {
position: sticky;
top: 0;
z-index: var(--ds-z-nav);
display: flex;
align-items: center;
gap: var(--ds-4);
height: 64px;
padding-inline: var(--ds-5);
background: linear-gradient(180deg, rgba(245, 245, 245, 0.92), rgba(245, 245, 245, 0.6));
-webkit-backdrop-filter: blur(var(--ds-blur-strong));
backdrop-filter: blur(var(--ds-blur-strong));
border-bottom: 1px solid var(--ds-line-soft);
}
.ds-nav-brand {
display: inline-flex;
align-items: center;
gap: var(--ds-2);
font-size: 1.4rem;
font-weight: var(--ds-fw-bold);
letter-spacing: -0.02em;
color: var(--ds-brand-light);
}
.ds-nav-brand img { height: 26px; width: auto; display: block; }
.ds-nav-spacer { flex: 1 1 auto; }
.ds-nav-links { display: flex; align-items: center; gap: var(--ds-2); }
@media (max-width: 860px) { .ds-nav-links { display: none; } }
/* Hamburger button (3 lines) */
.ds-hamburger {
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 11px 9px;
border: 0;
border-radius: var(--ds-r-sm);
background: transparent;
cursor: pointer;
}
.ds-hamburger span {
display: block;
height: 2px;
width: 100%;
background: var(--ds-text);
border-radius: 2px;
transition: transform var(--ds-t), opacity var(--ds-t);
}
.ds-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ds-hamburger.is-open span:nth-child(2) { opacity: 0; }
.ds-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ============================================================================
6. SLIDE-OUT MENU (off-canvas)
============================================================================ */
.ds-menu-overlay {
position: fixed;
inset: 0;
z-index: var(--ds-z-overlay);
background: var(--veil);
opacity: 0;
visibility: hidden;
transition: opacity var(--ds-t), visibility var(--ds-t);
}
.ds-menu-overlay.is-open { opacity: 1; visibility: visible; }
.ds-menu {
position: fixed;
top: 0;
right: 0;
z-index: var(--ds-z-menu);
display: flex;
flex-direction: column;
width: min(420px, 100%);
height: 100%;
padding: var(--ds-5) var(--ds-5) calc(var(--ds-5) + env(safe-area-inset-bottom));
background:
radial-gradient(600px 400px at 70% 30%, rgba(189, 189, 189, 0.35), transparent 70%),
linear-gradient(180deg, #e7e7e7 0%, #f2f2f2 100%);
-webkit-backdrop-filter: blur(var(--ds-blur-strong));
backdrop-filter: blur(var(--ds-blur-strong));
border-left: 1px solid var(--ds-line);
box-shadow: var(--ds-shadow-lg);
transform: translateX(100%);
transition: transform var(--ds-t);
overflow-y: auto;
}
.ds-menu.is-open { transform: translateX(0); }
.ds-menu-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--ds-6);
}
.ds-menu-close {
background: transparent;
border: 0;
color: var(--ds-text-soft);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
padding: var(--ds-2);
}
.ds-menu-close:hover { color: var(--ds-text); }
/* Expandable section */
.ds-menu-section { border-bottom: 1px solid var(--ds-line-soft); }
.ds-menu-section-head {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--ds-4) 0;
background: transparent;
border: 0;
color: var(--ds-text);
font-size: 1.15rem;
font-weight: var(--ds-fw-medium);
cursor: pointer;
}
.ds-menu-section-head .ds-chevron {
transition: transform var(--ds-t);
color: var(--ds-text-muted);
}
.ds-menu-section.is-open .ds-chevron { transform: rotate(180deg); }
.ds-menu-section-body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--ds-t);
}
.ds-menu-section.is-open .ds-menu-section-body { grid-template-rows: 1fr; }
.ds-menu-section-body > div { overflow: hidden; }
/* Menu item (icon + label), with active "outlined pill" state */
.ds-menu-item {
display: flex;
align-items: center;
gap: var(--ds-3);
padding: var(--ds-3) var(--ds-4);
margin-bottom: var(--ds-2);
border-radius: var(--ds-r-pill);
border: 1px solid transparent;
color: var(--ds-text-soft);
font-size: 1.05rem;
cursor: pointer;
transition: background var(--ds-t), color var(--ds-t), border-color var(--ds-t);
}
.ds-menu-item:hover { background: var(--ds-glass); color: var(--ds-text); }
.ds-menu-item.is-active {
border-color: var(--ds-glass-border);
background: var(--ds-glass);
color: var(--ds-text);
}
.ds-menu-item .ds-i { font-size: 1.3rem; opacity: 0.9; }
.ds-menu-footer { margin-top: auto; padding-top: var(--ds-6); display: grid; gap: var(--ds-3); }
/* ============================================================================
7. CARDS + MASONRY GALLERY
============================================================================ */
.ds-card {
background: var(--ds-bg-elev);
border: 1px solid var(--ds-line-soft);
border-radius: var(--ds-r-md);
overflow: hidden;
transition: transform var(--ds-t), border-color var(--ds-t), box-shadow var(--ds-t);
}
.ds-card:hover {
transform: translateY(-3px);
border-color: var(--ds-glass-border);
box-shadow: var(--ds-shadow-md);
}
.ds-card-media {
position: relative;
display: block;
width: 100%;
background: var(--ds-bg-elev-2);
overflow: hidden;
}
.ds-card-media img,
.ds-card-media video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ds-card-body { padding: var(--ds-4); }
.ds-card-title { font-size: 1.05rem; font-weight: var(--ds-fw-semibold); margin: 0 0 var(--ds-1); }
.ds-card-sub { font-size: 0.875rem; color: var(--ds-text-muted); margin: 0; }
/* Small overlay control (e.g. mute icon) bottom-left of media */
.ds-media-ctrl {
position: absolute;
bottom: var(--ds-3);
left: var(--ds-3);
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--veil);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: var(--ink);
border: 0;
cursor: pointer;
}
/* Masonry — CSS columns, like the Artlist gallery */
.ds-masonry {
column-count: 2;
column-gap: var(--ds-4);
}
@media (min-width: 720px) { .ds-masonry { column-count: 3; } }
@media (min-width: 1080px) { .ds-masonry { column-count: 4; } }
.ds-masonry > * {
break-inside: avoid;
margin-bottom: var(--ds-4);
}
/* Plain responsive grid alternative */
.ds-grid {
display: grid;
gap: var(--ds-4);
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
/* ============================================================================
8. MODEL / FEATURE LIST ROWS (the "Models" screen)
============================================================================ */
.ds-list { display: flex; flex-direction: column; }
.ds-list-row {
display: flex;
align-items: flex-start;
gap: var(--ds-4);
padding: var(--ds-5) var(--ds-4);
border-bottom: 1px solid var(--ds-line-soft);
transition: background var(--ds-t);
cursor: pointer;
}
.ds-list-row:hover { background: var(--ds-glass); }
.ds-list-row.is-active { background: var(--ds-glass-strong); }
.ds-list-icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--ds-text);
font-size: 1.4rem;
}
.ds-list-main { flex: 1 1 auto; min-width: 0; }
.ds-list-titlerow { display: flex; align-items: center; gap: var(--ds-3); flex-wrap: wrap; }
.ds-list-title { font-size: 1.2rem; font-weight: var(--ds-fw-semibold); margin: 0; }
.ds-list-desc { color: var(--ds-text-soft); margin: var(--ds-2) 0 var(--ds-3); line-height: 1.5; }
.ds-list-tags { display: flex; flex-wrap: wrap; gap: var(--ds-2); }
/* ============================================================================
9. BADGES + TAGS + CHIPS
============================================================================ */
/* Solid white "NEW" / "FREE" badge */
.ds-badge {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 var(--ds-2);
border-radius: 6px;
background: var(--brand-fill);
color: var(--ink-inverse);
font-size: 0.72rem;
font-weight: var(--ds-fw-bold);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ds-badge-brand { background: var(--ds-brand); color: var(--ds-text-on-brand); }
.ds-badge-outline {
background: transparent;
border: 1px solid var(--ds-glass-border);
color: var(--ds-text-soft);
}
/* Pill "tag" (Multi-Type References, 4K, 15 sec…) */
.ds-tag {
display: inline-flex;
align-items: center;
height: 34px;
padding: 0 var(--ds-4);
border-radius: var(--ds-r-pill);
background: var(--ds-glass);
border: 1px solid var(--ds-glass-border-soft);
color: var(--ds-text-soft);
font-size: 0.875rem;
white-space: nowrap;
}
/* ============================================================================
10. BOTTOM TOOLBAR (composer)
----------------------------------------------------------------------------
The frosted, rounded-top panel anchored to the bottom of the viewport.
Use .ds-toolbar inside a positioned/relative shell, or position: fixed.
============================================================================ */
.ds-toolbar {
position: relative;
width: 100%;
padding: var(--ds-4) var(--ds-4) calc(var(--ds-4) + env(safe-area-inset-bottom));
background: linear-gradient(180deg, rgba(232, 232, 232, 0.82), rgba(240, 240, 240, 0.92));
-webkit-backdrop-filter: blur(var(--ds-blur-strong));
backdrop-filter: blur(var(--ds-blur-strong));
border-top: 1px solid var(--ds-glass-border);
border-top-left-radius: var(--ds-r-xl);
border-top-right-radius: var(--ds-r-xl);
box-shadow: var(--ds-shadow-toolbar);
}
/* Faint warm hairline glow on the top edge corners, like the reference. */
.ds-toolbar::before {
content: "";
position: absolute;
top: -1px;
left: var(--ds-6);
right: var(--ds-6);
height: 1px;
background: linear-gradient(90deg, var(--ds-edge-glow), transparent 30%, transparent 70%, var(--ds-edge-glow-2));
opacity: 0.55;
border-radius: 2px;
}
.ds-toolbar-fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ds-z-toolbar); }
.ds-toolbar-actions {
display: flex;
align-items: center;
gap: var(--ds-3);
margin-bottom: var(--ds-3);
}
.ds-toolbar-input {
width: 100%;
min-height: 56px;
border: 0;
background: transparent;
color: var(--ds-text);
font-family: inherit;
font-size: 1.05rem;
resize: none;
outline: none;
padding: var(--ds-2) var(--ds-1);
}
.ds-toolbar-input::placeholder { color: var(--ds-text-muted); }
.ds-toolbar-footer {
display: flex;
align-items: center;
gap: var(--ds-3);
margin-top: var(--ds-3);
}
/* Segmented "Apps | grid | chat" cluster of glass pills */
.ds-segment {
display: inline-flex;
align-items: center;
gap: var(--ds-2);
padding: 4px;
border-radius: var(--ds-r-pill);
background: var(--ds-glass);
border: 1px solid var(--ds-glass-border-soft);
}
.ds-segment .ds-btn-glass { border-color: transparent; background: transparent; height: 38px; }
.ds-segment .ds-btn-glass.is-active { background: var(--ds-glass-strong); border-color: var(--ds-glass-border); }
/* ============================================================================
11. FORMS / INPUTS
============================================================================ */
.ds-field { display: block; margin-bottom: var(--ds-4); }
.ds-label { display: block; font-size: 0.85rem; color: var(--ds-text-soft); margin-bottom: var(--ds-2); }
.ds-input,
.ds-textarea,
.ds-select {
width: 100%;
height: var(--ds-ctrl-h);
padding: 0 var(--ds-4);
border-radius: var(--ds-r-md);
border: 1px solid var(--ds-glass-border);
background: var(--ds-glass);
color: var(--ds-text);
font-family: inherit;
font-size: 0.95rem;
outline: none;
transition: border-color var(--ds-t), background var(--ds-t), box-shadow var(--ds-t);
}
.ds-textarea { height: auto; min-height: 110px; padding: var(--ds-3) var(--ds-4); resize: vertical; }
.ds-input:focus,
.ds-textarea:focus,
.ds-select:focus {
border-color: var(--ds-brand);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-text-muted); }
/* ============================================================================
12. UTILITIES
============================================================================ */
.ds-glass-panel {
background: var(--ds-glass);
border: 1px solid var(--ds-glass-border);
border-radius: var(--ds-r-lg);
-webkit-backdrop-filter: blur(var(--ds-blur));
backdrop-filter: blur(var(--ds-blur));
padding: var(--ds-5);
}
.ds-divider { height: 1px; background: var(--ds-line); border: 0; margin: var(--ds-5) 0; }
.ds-muted { color: var(--ds-text-muted); }
.ds-soft { color: var(--ds-text-soft); }
.ds-brand-text { color: var(--ds-brand-light); }
.ds-center { text-align: center; }
.ds-hide-scroll { scrollbar-width: none; }
.ds-hide-scroll::-webkit-scrollbar { display: none; }
/* No-JS / reduced motion respect */
@media (prefers-reduced-motion: reduce) {
.ds *, .ds *::before, .ds *::after { transition: none !important; }
}