/* ==========================================================================
Liquid Glass UI — lightweight iOS-style glass design system
One file, no build step, no dependencies. Light + dark, RTL-ready.
Copy as-is into a project; put page-specific styles in a separate file.
========================================================================== */
/* ---------- 1. Tokens: light ---------- */
:root {
color-scheme: light;
--g-font: "Vazirmatn", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
/* wallpaper behind the glass (glass needs color behind it to read as glass) */
--g-bg: #eef1f7;
--g-wall:
radial-gradient(42rem 32rem at 12% 8%, rgba(120, 170, 255, .55), transparent 70%),
radial-gradient(36rem 30rem at 92% 18%, rgba(255, 170, 205, .50), transparent 70%),
radial-gradient(40rem 34rem at 70% 96%, rgba(140, 230, 205, .45), transparent 70%),
radial-gradient(30rem 26rem at 8% 92%, rgba(190, 170, 255, .40), transparent 70%);
/* glass materials */
--g-surface: rgba(255, 255, 255, .58);
--g-surface-thin: rgba(255, 255, 255, .38);
--g-surface-thick: rgba(255, 255, 255, .80);
--g-surface-solid: #f8f9fc; /* fallback when blur is unavailable / reduced */
--g-sheen: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 42%);
--g-border: rgba(255, 255, 255, .75);
--g-edge: rgba(15, 23, 42, .07); /* hairline that defines the shape on light walls */
--g-highlight: inset 0 1px 0 rgba(255, 255, 255, .9);
--g-shadow: 0 10px 30px -8px rgba(15, 23, 42, .14), 0 1px 2px rgba(15, 23, 42, .06);
--g-blur: 22px;
--g-sat: 180%;
/* fills (for things inside glass — never blur inside blur) */
--g-fill: rgba(118, 118, 128, .12);
--g-fill-hover: rgba(118, 118, 128, .18);
--g-separator: rgba(60, 60, 67, .14);
/* text */
--g-text: #1d1d1f;
--g-text-2: rgba(60, 60, 67, .78);
--g-text-3: rgba(60, 60, 67, .55);
/* system colors (iOS) */
--g-accent: #007aff;
--g-accent-tint: rgba(0, 122, 255, .14);
--g-on-accent: #fff;
--g-green: #248a3d; --g-green-tint: rgba(52, 199, 89, .18);
--g-red: #d70015; --g-red-tint: rgba(255, 59, 48, .14);
--g-orange: #c93400; --g-orange-tint: rgba(255, 149, 0, .18);
/* shape + motion */
--g-radius: 22px;
--g-radius-md: 16px;
--g-radius-sm: 12px;
--g-pill: 999px;
--g-ease: cubic-bezier(.32, .72, 0, 1);
--g-dur: 200ms;
--g-focus: 0 0 0 3px rgba(0, 122, 255, .35);
}
/* ---------- 2. Tokens: dark (auto via OS, or forced with data-theme) ---------- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--g-bg: #07090e;
--g-wall:
radial-gradient(42rem 32rem at 12% 8%, rgba(40, 90, 220, .42), transparent 70%),
radial-gradient(36rem 30rem at 92% 18%, rgba(150, 60, 200, .34), transparent 70%),
radial-gradient(40rem 34rem at 70% 96%, rgba(20, 150, 140, .30), transparent 70%),
radial-gradient(30rem 26rem at 8% 92%, rgba(90, 70, 220, .30), transparent 70%);
--g-surface: rgba(38, 40, 52, .52);
--g-surface-thin: rgba(38, 40, 52, .32);
--g-surface-thick: rgba(30, 32, 42, .82);
--g-surface-solid: #1a1c24;
--g-sheen: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 42%);
--g-border: rgba(255, 255, 255, .13);
--g-edge: rgba(0, 0, 0, .35);
--g-highlight: inset 0 1px 0 rgba(255, 255, 255, .12);
--g-shadow: 0 12px 34px -8px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .4);
--g-fill: rgba(118, 118, 128, .24);
--g-fill-hover: rgba(118, 118, 128, .32);
--g-separator: rgba(255, 255, 255, .10);
--g-text: #f5f5f7;
--g-text-2: rgba(235, 235, 245, .72);
--g-text-3: rgba(235, 235, 245, .46);
--g-accent: #0a84ff;
--g-accent-tint: rgba(10, 132, 255, .22);
--g-green: #30d158; --g-green-tint: rgba(48, 209, 88, .18);
--g-red: #ff6961; --g-red-tint: rgba(255, 69, 58, .20);
--g-orange: #ffb340; --g-orange-tint: rgba(255, 159, 10, .20);
--g-focus: 0 0 0 3px rgba(10, 132, 255, .5);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--g-bg: #07090e;
--g-wall:
radial-gradient(42rem 32rem at 12% 8%, rgba(40, 90, 220, .42), transparent 70%),
radial-gradient(36rem 30rem at 92% 18%, rgba(150, 60, 200, .34), transparent 70%),
radial-gradient(40rem 34rem at 70% 96%, rgba(20, 150, 140, .30), transparent 70%),
radial-gradient(30rem 26rem at 8% 92%, rgba(90, 70, 220, .30), transparent 70%);
--g-surface: rgba(38, 40, 52, .52);
--g-surface-thin: rgba(38, 40, 52, .32);
--g-surface-thick: rgba(30, 32, 42, .82);
--g-surface-solid: #1a1c24;
--g-sheen: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 42%);
--g-border: rgba(255, 255, 255, .13);
--g-edge: rgba(0, 0, 0, .35);
--g-highlight: inset 0 1px 0 rgba(255, 255, 255, .12);
--g-shadow: 0 12px 34px -8px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .4);
--g-fill: rgba(118, 118, 128, .24);
--g-fill-hover: rgba(118, 118, 128, .32);
--g-separator: rgba(255, 255, 255, .10);
--g-text: #f5f5f7;
--g-text-2: rgba(235, 235, 245, .72);
--g-text-3: rgba(235, 235, 245, .46);
--g-accent: #0a84ff;
--g-accent-tint: rgba(10, 132, 255, .22);
--g-green: #30d158; --g-green-tint: rgba(48, 209, 88, .18);
--g-red: #ff6961; --g-red-tint: rgba(255, 69, 58, .20);
--g-orange: #ffb340; --g-orange-tint: rgba(255, 159, 10, .20);
--g-focus: 0 0 0 3px rgba(10, 132, 255, .5);
}
/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
min-height: 100dvh;
font-family: var(--g-font);
font-size: 15px;
line-height: 1.6;
color: var(--g-text);
background: var(--g-bg);
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
}
/* fixed wallpaper as a layer (background-attachment: fixed is janky on phones) */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background: var(--g-wall), var(--g-bg);
pointer-events: none;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0; }
a { color: var(--g-accent); text-decoration: none; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: none; box-shadow: var(--g-focus); border-radius: var(--g-radius-sm); }
::selection { background: var(--g-accent-tint); }
/* ---------- 4. Glass materials ---------- */
.glass, .glass-thin, .glass-thick {
position: relative;
background: var(--g-sheen), var(--g-surface);
-webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
border: 1px solid var(--g-border);
border-radius: var(--g-radius);
box-shadow: var(--g-highlight), 0 0 0 .5px var(--g-edge), var(--g-shadow);
}
.glass-thin { background: var(--g-sheen), var(--g-surface-thin); }
.glass-thick { background: var(--g-sheen), var(--g-surface-thick); }
/* Never stack blur on blur: nested glass becomes a simple fill (cheaper + cleaner) */
:is(.glass, .glass-thin, .glass-thick) :is(.glass, .glass-thin, .glass-thick) {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: var(--g-fill);
border-color: transparent;
box-shadow: none;
}
/* Fallbacks: no blur support, or user asked for less transparency */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass, .glass-thin, .glass-thick { background: var(--g-surface-solid); }
}
@media (prefers-reduced-transparency: reduce) {
.glass, .glass-thin, .glass-thick {
background: var(--g-surface-solid);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
/* Phones: smaller blur radius = much cheaper to render */
@media (max-width: 640px) { :root { --g-blur: 14px; } }
/* ---------- 5. App shell (sidebar + topbar + content) ---------- */
.g-app {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 16px;
padding: 16px;
min-height: 100dvh;
}
.g-sidebar {
position: sticky;
top: 16px;
align-self: start;
height: calc(100dvh - 32px);
padding: 18px 12px;
display: flex;
flex-direction: column;
gap: 4px;
overflow-y: auto;
}
.g-brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 16px; font-weight: 700; font-size: 1.05rem; }
.g-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: var(--g-radius-sm);
color: var(--g-text);
font-weight: 500;
transition: background var(--g-dur) var(--g-ease);
}
.g-nav-item svg { width: 20px; height: 20px; flex: none; color: var(--g-text-2); }
.g-nav-item:hover { background: var(--g-fill); }
.g-nav-item[aria-current="page"] { background: var(--g-accent-tint); color: var(--g-accent); }
.g-nav-item[aria-current="page"] svg { color: var(--g-accent); }
.g-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.g-topbar {
position: sticky;
top: 16px;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px 10px 16px;
border-radius: var(--g-pill);
}
@media (max-width: 900px) {
.g-app { grid-template-columns: minmax(0, 1fr); padding: 12px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.g-sidebar { display: none; }
.g-topbar { top: max(12px, env(safe-area-inset-top)); }
}
/* Floating bottom tab bar (iOS style) for phones */
.g-tabbar {
position: fixed;
inset-inline: 16px;
bottom: calc(14px + env(safe-area-inset-bottom));
z-index: 20;
display: none;
justify-content: space-around;
padding: 6px;
border-radius: var(--g-pill);
}
.g-tabbar a {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 6px 4px;
border-radius: var(--g-pill);
font-size: 11px;
font-weight: 500;
color: var(--g-text-2);
}
.g-tabbar a svg { width: 22px; height: 22px; }
.g-tabbar a[aria-current="page"] { color: var(--g-accent); background: var(--g-fill); }
@media (max-width: 900px) { .g-tabbar { display: flex; } }
/* ---------- 6. Layout helpers ---------- */
.g-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.g-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); } /* KPI tiles: 2-up on phones */
.g-stack { display: flex; flex-direction: column; gap: 12px; }
.g-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.g-spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.g-card { padding: 20px; }
@media (max-width: 640px) { .g-card { padding: 16px; } .g-stat-value { font-size: 1.5rem; } }
.g-muted { color: var(--g-text-2); }
.g-faint { color: var(--g-text-3); }
.g-small { font-size: 13px; }
.g-num { font-variant-numeric: tabular-nums; }
/* KPI tile */
.g-stat-label { font-size: 13px; color: var(--g-text-2); }
.g-stat-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin-top: 4px; font-variant-numeric: tabular-nums; }
.g-icon-chip {
display: grid; place-items: center;
width: 40px; height: 40px;
border-radius: 12px;
background: var(--g-accent-tint);
color: var(--g-accent);
}
.g-icon-chip svg { width: 20px; height: 20px; }
/* ---------- 7. Controls ---------- */
.g-btn {
-webkit-appearance: none; appearance: none;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 40px;
padding: 0 18px;
border: 0;
border-radius: var(--g-pill);
font: inherit; font-weight: 600; font-size: 14px;
color: var(--g-on-accent);
background: var(--g-accent);
cursor: pointer;
user-select: none; -webkit-user-select: none;
transition: transform 160ms var(--g-ease), background var(--g-dur) var(--g-ease), opacity var(--g-dur);
}
.g-btn svg { width: 18px; height: 18px; }
.g-btn:active { transform: scale(.97); }
.g-btn--glass { color: var(--g-text); background: var(--g-fill); }
.g-btn--glass:hover { background: var(--g-fill-hover); }
.g-btn--ghost { color: var(--g-accent); background: transparent; }
.g-btn--ghost:hover { background: var(--g-accent-tint); }
.g-btn--danger { background: var(--g-red); }
.g-btn--icon { width: 40px; padding: 0; }
.g-btn:disabled { opacity: .45; pointer-events: none; }
.g-field { display: flex; flex-direction: column; gap: 6px; }
.g-label { font-size: 13px; font-weight: 500; color: var(--g-text-2); }
.g-input, .g-select, .g-textarea {
-webkit-appearance: none; appearance: none;
width: 100%;
min-height: 42px;
padding: 0 14px;
border: 1px solid transparent;
border-radius: var(--g-radius-sm);
font: inherit;
font-size: 16px; /* ≥16px stops iOS zoom on focus */
color: var(--g-text);
background: var(--g-fill);
transition: box-shadow var(--g-dur) var(--g-ease), background var(--g-dur);
}
.g-textarea { padding-block: 10px; min-height: 96px; resize: vertical; }
.g-input::placeholder, .g-textarea::placeholder { color: var(--g-text-3); }
.g-input:focus, .g-select:focus, .g-textarea:focus { outline: none; box-shadow: var(--g-focus); background: var(--g-fill-hover); }
/* Search pill */
.g-search { position: relative; flex: 1; max-width: 360px; }
.g-search svg { position: absolute; inset-inline-start: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--g-text-3); pointer-events: none; }
.g-search .g-input { border-radius: var(--g-pill); padding-inline-start: 38px; min-height: 38px; font-size: 15px; }
@media (max-width: 640px) { .g-search .g-input { font-size: 16px; } }
/* iOS switch: */
.g-switch {
-webkit-appearance: none; appearance: none;
position: relative;
width: 51px; height: 31px;
margin: 0;
border-radius: var(--g-pill);
background: var(--g-fill-hover);
cursor: pointer;
transition: background var(--g-dur) var(--g-ease);
flex: none;
}
.g-switch::after {
content: "";
position: absolute;
top: 2px; inset-inline-start: 2px;
width: 27px; height: 27px;
border-radius: 50%;
background: #fff;
box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16);
transition: transform 260ms var(--g-ease);
}
.g-switch:checked { background: #34c759; }
.g-switch:checked::after { transform: translateX(20px); }
[dir="rtl"] .g-switch:checked::after { transform: translateX(-20px); }
/* Segmented control: …
*/
.g-segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--g-pill); background: var(--g-fill); }
.g-segmented button {
-webkit-appearance: none; appearance: none;
border: 0; background: transparent;
min-height: 32px; padding: 0 14px;
border-radius: var(--g-pill);
font: inherit; font-size: 13px; font-weight: 500;
color: var(--g-text-2);
cursor: pointer;
transition: background var(--g-dur) var(--g-ease), color var(--g-dur);
}
.g-segmented button svg { width: 16px; height: 16px; }
.g-segmented button[aria-pressed="true"] { background: var(--g-surface-thick); color: var(--g-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
/* Badges */
.g-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--g-pill); font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--g-fill); color: var(--g-text-2); }
.g-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.g-badge--blue { background: var(--g-accent-tint); color: var(--g-accent); }
.g-badge--green { background: var(--g-green-tint); color: var(--g-green); }
.g-badge--red { background: var(--g-red-tint); color: var(--g-red); }
.g-badge--orange { background: var(--g-orange-tint); color: var(--g-orange); }
/* ---------- 8. Data ---------- */
/* Put the table inside ONE .glass panel; rows stay unblurred for speed and legibility */
.g-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.g-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.g-table th {
text-align: start;
font-size: 12px; font-weight: 600;
color: var(--g-text-2);
padding: 10px 16px;
border-bottom: 1px solid var(--g-separator);
white-space: nowrap;
}
.g-table td { padding: 12px 16px; border-bottom: 1px solid var(--g-separator); vertical-align: middle; white-space: nowrap; }
.g-table td.g-wrap { white-space: normal; min-width: 200px; } /* long text cells */
.g-table tr:last-child td { border-bottom: 0; }
.g-table tbody tr { transition: background var(--g-dur); }
.g-table tbody tr:hover { background: var(--g-fill); }
.g-table .g-num { text-align: end; }
/* iOS inset grouped list (settings-style) */
.g-list { list-style: none; margin: 0; padding: 0; }
.g-list > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 16px; }
.g-list > li + li { border-top: 1px solid var(--g-separator); }
/* Progress */
.g-progress { height: 6px; border-radius: var(--g-pill); background: var(--g-fill); overflow: hidden; }
.g-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--g-accent); }
/* ---------- 9. Overlays ---------- */
/*