/* ============================================================ MEL — Liquid Glass theme Activates on . Apple-style translucent materials: frosted surfaces with backdrop-blur + saturation, specular edge highlights, depth by layered transparency, generous radii, and a soft ambient color field behind everything so the glass has light to refract. Honey stays the brand. Built on the same token contract as theme-mel / -dark. ============================================================ */ @layer theme { :root[data-theme="glass"] { color-scheme: only light; /* ---------- BRAND ---------- */ --color-primary: var(--honey-500); --color-primary-hover: var(--honey-600); --color-primary-fg: #ffffff; --color-primary-text: var(--honey-700); --color-secondary: var(--slate-600); --color-secondary-hover: var(--slate-700); /* ---------- GLOBAL ---------- */ --bg-base: #eaf0f7; /* fallback under the ambient field */ --bg-surface: rgba(255, 255, 255, 0.72); /* frosted glass */ /* ---------- TYPE COLORS ---------- */ --text-main: #1c2530; --text-muted: #566273; --text-inverted: #ffffff; /* ---------- BORDERS (translucent) ---------- */ --border-subtle: rgba(255, 255, 255, 0.7); --border-base: rgba(255, 255, 255, 0.85); /* ---------- FORMS ---------- */ --input-bg: rgba(255, 255, 255, 0.5); --input-bg-disabled: rgba(255, 255, 255, 0.3); --input-border: rgba(255, 255, 255, 0.7); --input-border-hover: rgba(255, 255, 255, 0.9); --input-ring-focus: 0 0 0 4px color-mix(in srgb, var(--color-primary), transparent 74%); --input-text: var(--text-main); --input-placeholder: #7a8696; --input-addon-bg: rgba(255, 255, 255, 0.4); --fieldset-border: rgba(255, 255, 255, 0.5); --checkbox-border: #9aa6b5; /* ---------- BUTTONS ---------- */ --btn-bg: rgba(255, 255, 255, 0.5); --btn-bg-hover: rgba(255, 255, 255, 0.72); --btn-text: var(--slate-700); --btn-outline-border: rgba(255, 255, 255, 0.75); --btn-outline-text: var(--slate-700); --btn-ghost-text: var(--slate-600); --btn-ghost-hover: rgba(255, 255, 255, 0.4); --btn-outline-hover-bg: rgba(255, 255, 255, 0.55); /* ---------- TOGGLE / RANGE / RATING ---------- */ --toggle-bg: rgba(120, 134, 150, 0.4); --range-track-bg: rgba(255, 255, 255, 0.5); --rating-color: rgba(120, 134, 150, 0.4); /* ---------- BADGE / TAG ---------- */ --badge-outline-border: rgba(255, 255, 255, 0.7); --badge-bg: rgba(255, 255, 255, 0.55); --tag-bg: rgba(255, 255, 255, 0.55); --tag-text: var(--slate-700); /* ---------- PROGRESS / SKELETON ---------- */ --progress-bg: rgba(255, 255, 255, 0.45); --skeleton-bg: rgba(255, 255, 255, 0.4); --skeleton-shine: rgba(255, 255, 255, 0.75); /* ---------- AVATAR ---------- */ --avatar-ring-offset: transparent; --avatar-bg: color-mix(in srgb, var(--honey-400), transparent 55%); --avatar-color: var(--honey-800); /* ---------- DIVIDER ---------- */ --divider-color: rgba(255, 255, 255, 0.6); /* ---------- TABLES ---------- */ --table-header-bg: rgba(255, 255, 255, 0.4); --table-border: rgba(255, 255, 255, 0.55); --table-row-hover: rgba(255, 255, 255, 0.5); --table-striped-bg: rgba(255, 255, 255, 0.35); /* ---------- CODE / QUOTE ---------- */ --code-bg: rgba(255, 255, 255, 0.5); --blockquote-bg: rgba(255, 255, 255, 0.45); /* ---------- DIALOG ---------- */ --dialog-border: rgba(255, 255, 255, 0.6); --backdrop-bg: rgba(20, 28, 40, 0.32); --backdrop-blur: blur(6px); /* ---------- DETAILS / MEDIA ---------- */ --details-bg: var(--bg-surface); --details-header-bg: rgba(255, 255, 255, 0.4); --details-border: rgba(255, 255, 255, 0.55); --audio-bg: rgba(255, 255, 255, 0.4); /* ---------- ALERTS ---------- */ --alert-bg: rgba(255, 255, 255, 0.5); --alert-border: rgba(255, 255, 255, 0.6); --alert-info-bg: color-mix(in srgb, var(--color-info), transparent 80%); --alert-info-border:color-mix(in srgb, var(--color-info), transparent 60%); --alert-success-bg: color-mix(in srgb, var(--color-success), transparent 82%); --alert-success-border: color-mix(in srgb, var(--color-success), transparent 60%); --alert-warning-bg: color-mix(in srgb, var(--honey-400), transparent 80%); --alert-warning-border: color-mix(in srgb, var(--honey-500), transparent 55%); --alert-error-bg: color-mix(in srgb, var(--color-error), transparent 82%); --alert-error-border: color-mix(in srgb, var(--color-error), transparent 60%); --alert-info-text: color-mix(in srgb, var(--color-info), black 28%); --alert-success-text: color-mix(in srgb, var(--color-success), black 26%); --alert-warning-text: var(--honey-800); --alert-error-text: color-mix(in srgb, var(--color-error), black 22%); /* ---------- BOX / DIFF ---------- */ --box-bg: var(--bg-surface); --diff-bg: var(--bg-surface); --diff-border: rgba(255, 255, 255, 0.55); --diff-header-bg: rgba(255, 255, 255, 0.4); /* ---------- CARD ---------- */ --card-bg: var(--bg-surface); --card-border: rgba(255, 255, 255, 0.85); --card-header-bg: rgba(255, 255, 255, 0.32); --card-footer-border: rgba(255, 255, 255, 0.6); /* ---------- NAVBAR / PAGINATION ---------- */ --navbar-bg: var(--bg-surface); --navbar-border: rgba(255, 255, 255, 0.5); --pagination-bg: rgba(255, 255, 255, 0.45); --pagination-border: rgba(255, 255, 255, 0.55); --pagination-text: var(--text-main); --pagination-hover-bg: rgba(255, 255, 255, 0.7); /* ---------- TABS / MODAL / ACCORDION ---------- */ --tabs-border: rgba(255, 255, 255, 0.5); --modal-bg: rgba(255, 255, 255, 0.72); --accordion-border: rgba(255, 255, 255, 0.5); --accordion-header-bg: rgba(255, 255, 255, 0.35); --accordion-header-hover-bg: rgba(255, 255, 255, 0.5); /* ---------- DROPDOWN / TOOLTIP / MENU ---------- */ --dropdown-bg: rgba(255, 255, 255, 0.72); --dropdown-border: rgba(255, 255, 255, 0.6); --dropdown-hover-bg: rgba(255, 255, 255, 0.6); --tooltip-bg: rgba(28, 37, 48, 0.82); --tooltip-text: #ffffff; --menu-item-hover-bg: rgba(255, 255, 255, 0.5); --menu-item-active-bg: color-mix(in srgb, var(--color-primary), transparent 80%); /* ---------- TOAST / MESSAGE ---------- */ --toast-bg: rgba(255, 255, 255, 0.78); --message-bg: var(--bg-surface); --message-border: rgba(255, 255, 255, 0.55); /* ---------- STAT / TIMELINE ---------- */ --stat-bg: var(--bg-surface); --stat-border: rgba(255, 255, 255, 0.6); --stat-icon-bg: color-mix(in srgb, var(--color-primary), transparent 80%); --stat-icon-color: var(--honey-700); --timeline-line: rgba(255, 255, 255, 0.6); --timeline-marker-ring: rgba(255, 255, 255, 0.6); /* ---------- LISTS / DRAWER / OFFCANVAS / POPOVER / PANEL ---------- */ --list-group-bg: var(--bg-surface); --list-group-border: rgba(255, 255, 255, 0.5); --list-group-hover-bg: rgba(255, 255, 255, 0.5); --drawer-bg: rgba(255, 255, 255, 0.72); --drawer-border: rgba(255, 255, 255, 0.5); --offcanvas-bg: rgba(255, 255, 255, 0.72); --bottom-nav-bg: var(--bg-surface); --bottom-nav-border: rgba(255, 255, 255, 0.5); --popover-bg: rgba(255, 255, 255, 0.72); --popover-border: rgba(255, 255, 255, 0.6); --panel-bg: var(--bg-surface); --panel-border: rgba(255, 255, 255, 0.5); /* ---------- PRICING / HERO / CHAT / CAROUSEL ---------- */ --pricing-bg: var(--bg-surface); --pricing-border: rgba(255, 255, 255, 0.6); --hero-bg: rgba(255, 255, 255, 0.35); --chat-bubble-bg: rgba(255, 255, 255, 0.55); --carousel-nav-bg: rgba(255, 255, 255, 0.6); --carousel-nav-border: rgba(255, 255, 255, 0.6); --carousel-nav-hover-bg: rgba(255, 255, 255, 0.78); /* ---------- SHADOWS (soft, layered for depth) ---------- */ --shadow-xs: 0 1px 2px rgba(20, 28, 40, 0.08); --shadow-sm: 0 4px 16px -4px rgba(20, 28, 40, 0.18), 0 1px 3px rgba(20, 28, 40, 0.10); --shadow-md: 0 14px 38px -10px rgba(20, 28, 40, 0.28), 0 4px 10px -4px rgba(20, 28, 40, 0.14); --shadow-lg: 0 28px 64px -18px rgba(20, 28, 40, 0.38), 0 10px 24px -12px rgba(20, 28, 40, 0.2); --shadow-modal: 0 40px 88px -22px rgba(20, 28, 40, 0.48); /* ---------- RADII (generous, Apple-soft) ---------- */ --radius-sm: 0.625rem; /* 10px */ --radius-md: 0.875rem; /* 14px */ --radius-lg: 1.25rem; /* 20px */ --radius-xl: 1.625rem; /* 26px */ } } /* ============================================================ STRUCTURAL — frosted materials (outside @layer so they win) These add backdrop-filter + specular edges that flat tokens can't express. Scoped to [data-theme="glass"]. ============================================================ */ /* ---- ambient color field behind the glass ---- */ [data-theme="glass"] body, html[data-theme="glass"] body { background-color: #dde6f1; background-image: radial-gradient(62vw 58vh at 6% -10%, rgba(249, 178, 52, 0.50), transparent 58%), radial-gradient(54vw 56vh at 102% -4%, rgba(96, 170, 240, 0.48), transparent 60%), radial-gradient(64vw 64vh at 48% 118%, rgba(199, 150, 255, 0.46), transparent 60%), radial-gradient(50vw 52vh at 90% 94%, rgba(62, 175, 110, 0.34), transparent 62%), radial-gradient(70vw 80vh at 50% 45%, rgba(255, 214, 150, 0.22), transparent 70%); background-attachment: fixed; } [data-theme="glass"] .app-shell { background: transparent; } /* shared glass material */ [data-theme="glass"] .mel-rail, [data-theme="glass"] .app-topbar, [data-theme="glass"] .data-card, [data-theme="glass"] .filter-bar, [data-theme="glass"] .form-card, [data-theme="glass"] .stat-card, [data-theme="glass"] .stat-horizontal, [data-theme="glass"] .card, [data-theme="glass"] .set-menu, [data-theme="glass"] .auth-card, [data-theme="glass"] dialog.modal, [data-theme="glass"] .toast { -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%); background-color: var(--bg-surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.22); } /* rail + topbar: frosted chrome */ [data-theme="glass"] .mel-rail { background-color: rgba(255, 255, 255, 0.45); border-right: 1px solid rgba(255, 255, 255, 0.5); box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.4), var(--shadow-sm); } [data-theme="glass"] .app-topbar { background-color: rgba(255, 255, 255, 0.6); border-bottom: 1px solid rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), var(--shadow-sm); } [data-theme="glass"] .mel-rail a { color: #4a5868; } [data-theme="glass"] .mel-rail a:hover { background: rgba(255, 255, 255, 0.55); color: var(--text-main); } [data-theme="glass"] .mel-rail a.is-active { background: color-mix(in srgb, var(--honey-400), transparent 62%); color: var(--honey-800); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); } /* cards: header strip stays translucent, content rounds with the glass */ [data-theme="glass"] .card, [data-theme="glass"] .data-card, [data-theme="glass"] .filter-bar, [data-theme="glass"] .form-card { border-radius: var(--radius-lg); } [data-theme="glass"] .card-header { background: transparent; border-bottom-color: rgba(255, 255, 255, 0.5); color: var(--text-main); } [data-theme="glass"] .data-card table.table tbody tr { border-top-color: rgba(255, 255, 255, 0.45); } [data-theme="glass"] .table-foot { border-top-color: rgba(255, 255, 255, 0.5); } [data-theme="glass"] .form-section + .form-section { border-top-color: rgba(255, 255, 255, 0.45); } [data-theme="glass"] .form-foot { background: rgba(255, 255, 255, 0.3); border-top-color: rgba(255, 255, 255, 0.5); } [data-theme="glass"] .kv { border-top-color: rgba(255, 255, 255, 0.45); } /* inputs: liquid wells */ [data-theme="glass"] .input, [data-theme="glass"] .select, [data-theme="glass"] .textarea, [data-theme="glass"] input:not([class]), [data-theme="glass"] select:not([class]), [data-theme="glass"] textarea:not([class]) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 1px 2px rgba(20, 28, 40, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5); } /* primary button: translucent honey glass (frosted, not solid) */ [data-theme="glass"] .btn-primary, [data-theme="glass"] button[type="submit"]:not([class]), [data-theme="glass"] input[type="submit"]:not([class]) { background-image: none; background-color: color-mix(in srgb, var(--honey-500), transparent 44%); color: var(--honey-900); border: 1px solid color-mix(in srgb, var(--honey-400), transparent 30%); -webkit-backdrop-filter: blur(14px) saturate(190%); backdrop-filter: blur(14px) saturate(190%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 18px -8px color-mix(in srgb, var(--honey-600), transparent 55%); } [data-theme="glass"] .btn-primary:hover:not(:disabled), [data-theme="glass"] button[type="submit"]:not([class]):hover:not(:disabled), [data-theme="glass"] input[type="submit"]:not([class]):hover:not(:disabled) { background-color: color-mix(in srgb, var(--honey-500), transparent 28%); color: var(--honey-900); } /* neutral / ghost buttons: frosted chips */ [data-theme="glass"] .btn { -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), var(--shadow-xs); } [data-theme="glass"] .btn-ghost { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } /* segmented control + pills: keep contrast over glass */ [data-theme="glass"] .seg { background: rgba(255, 255, 255, 0.4); } [data-theme="glass"] .seg button.on { background: rgba(255, 255, 255, 0.85); color: var(--honey-700); } [data-theme="glass"] .code-chip { background: rgba(255, 255, 255, 0.55); color: var(--slate-700); } [data-theme="glass"] .role-pill { background: rgba(255, 255, 255, 0.55); color: var(--slate-700); } [data-theme="glass"] .badge-soft-neutral, [data-theme="glass"] .yn-no { background: rgba(255, 255, 255, 0.55); color: var(--slate-600); } /* progress / toggles get a touch of gloss */ [data-theme="glass"] .progress { box-shadow: inset 0 1px 2px rgba(20,28,40,0.08); } /* dialog + toast float higher */ [data-theme="glass"] dialog.modal { border-radius: var(--radius-xl); box-shadow: var(--shadow-modal), inset 0 1px 0 rgba(255,255,255,0.7); } /* Settings top bar (non-shell page) */ [data-theme="glass"] .top { -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%); background-color: rgba(255, 255, 255, 0.5); border-bottom-color: rgba(255, 255, 255, 0.5); }