/** * Marlev Webmail UI — visual theme presets (Faz 11.7 + 11.10 polish) * Activated via [data-theme] on . Modern Split = default (no overrides). */ /* ── Corporate ── */ [data-theme="corporate"] { --wm-border: #cbd5e1; --wm-border-strong: #94a3b8; --wm-text-muted: #475569; --wm-radius: 8px; --wm-radius-lg: 12px; --wm-shadow-lg: 0 24px 48px -16px rgba(15, 23, 42, 0.12), 0 8px 16px -8px rgba(15, 23, 42, 0.06); } [data-theme="corporate"] .wm-split-brand__title { font-weight: 700; letter-spacing: -0.035em; color: #0c1427; } [data-theme="corporate"] .wm-split-brand__desc { color: #475569; } [data-theme="corporate"] .wm-split-features li { color: #334155; } [data-theme="corporate"] .wm-split-features__icon { width: 28px; height: 28px; border-radius: 6px; background: color-mix(in srgb, var(--wm-primary) 7%, #f8fafc); } [data-theme="corporate"] .wm-split-features__icon svg { width: 14px; height: 14px; } [data-theme="corporate"] .wm-split-brand { background: linear-gradient(180deg, color-mix(in srgb, var(--wm-primary) 10%, #f1f5f9) 0%, #f8fafc 100%); border-color: #cbd5e1; } [data-theme="corporate"] .wm-split-card { border: 1px solid #cbd5e1; box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.1); } [data-theme="corporate"] .wm-label { color: #334155; font-weight: 600; } /* ── Minimal ── */ [data-theme="minimal"] { --wm-bg: #ffffff; --wm-surface: #ffffff; --wm-border: #eceef1; --wm-border-strong: #dfe3e8; --wm-shadow-sm: none; --wm-shadow-md: 0 2px 8px rgba(15, 23, 42, 0.03); --wm-shadow-lg: 0 4px 16px rgba(15, 23, 42, 0.04); --wm-radius: 8px; --wm-radius-lg: 12px; } [data-theme="minimal"] body { background: #ffffff; } [data-theme="minimal"] .wm-split-brand { background: #fafbfc; border-bottom: 1px solid #eceef1; padding-top: 48px; padding-bottom: 48px; } [data-theme="minimal"] .wm-split-panel { padding-top: 48px; padding-bottom: 48px; } [data-theme="minimal"] .wm-split-card { box-shadow: none; border: 1px solid #eceef1; padding: 40px; } [data-theme="minimal"] .wm-form { gap: 24px; } [data-theme="minimal"] .wm-split-card__header { margin-bottom: 32px; } [data-theme="minimal"] .wm-split-brand__logo { margin-bottom: 32px; } [data-theme="minimal"] .wm-split-features { gap: 16px; } [data-theme="minimal"] .wm-input { box-shadow: none; } [data-theme="minimal"] .wm-btn { box-shadow: none; } [data-theme="minimal"] .wm-card { box-shadow: none; border: 1px solid #eceef1; padding: 40px; } /* ── Dark ── */ [data-theme="dark"] { --wm-bg: #0b1220; --wm-surface: #1a2332; --wm-border: #2d3a4d; --wm-border-strong: #3d4d63; --wm-text: #f1f5f9; --wm-text-muted: #a8b4c4; --wm-text-subtle: #7b8a9e; --wm-shadow-lg: 0 32px 64px -16px rgba(0, 0, 0, 0.45), 0 12px 24px -8px rgba(0, 0, 0, 0.3); } [data-theme="dark"] body { background: #0b1220; color: #f1f5f9; } [data-theme="dark"] .wm-split-brand { background: linear-gradient(165deg, #1a2332 0%, #0b1220 100%); border-color: #2d3a4d; } [data-theme="dark"] .wm-split-brand__title, [data-theme="dark"] .wm-split-card__title, [data-theme="dark"] h1 { color: #f8fafc; } [data-theme="dark"] .wm-split-brand__desc, [data-theme="dark"] .wm-split-card__subtitle, [data-theme="dark"] .wm-muted { color: #a8b4c4; } [data-theme="dark"] .wm-label { color: #c5ced9; } [data-theme="dark"] .wm-split-features li { color: #cbd5e1; } [data-theme="dark"] .wm-split-panel { background: #0b1220; } [data-theme="dark"] .wm-split-card { background: #1a2332; border-color: #2d3a4d; } [data-theme="dark"] .wm-input { background: #0f1728; border-color: #3d4d63; color: #f1f5f9; } [data-theme="dark"] .wm-input::placeholder { color: #7b8a9e; } [data-theme="dark"] .wm-input:hover:not(:disabled):not(:focus) { background: #131d2e; border-color: #526380; } [data-theme="dark"] .wm-input:not(:placeholder-shown):not(:focus):not(:disabled) { background: #131d2e; border-color: #526380; } [data-theme="dark"] .wm-check__label { color: #a8b4c4; } [data-theme="dark"] .wm-form > .wm-muted { color: #7b8a9e; } [data-theme="dark"] .wm-error { color: #fecaca; background: #3f1d1d; border-color: #7f1d1d; } [data-theme="dark"] .wm-card { background: #1a2332; border: 1px solid #2d3a4d; } /* ── Glass ── */ [data-theme="glass"] { --wm-bg: #dbeafe; --wm-surface: rgba(255, 255, 255, 0.65); --wm-border: rgba(255, 255, 255, 0.42); --wm-border-strong: rgba(255, 255, 255, 0.55); --wm-shadow-lg: 0 24px 48px -12px rgba(14, 116, 144, 0.1), 0 8px 16px -8px rgba(14, 116, 144, 0.06); --wm-radius-lg: 20px; } [data-theme="glass"] body { background: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(186, 230, 253, 0.8) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 80% 100%, rgba(219, 234, 254, 0.7) 0%, transparent 55%), linear-gradient(145deg, #e0f2fe 0%, #f0f9ff 45%, #dbeafe 100%); } [data-theme="glass"] .wm-split-brand { background: rgba(255, 255, 255, 0.28); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); border-color: rgba(255, 255, 255, 0.38); } [data-theme="glass"] .wm-split-card, [data-theme="glass"] .wm-card { background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(24px) saturate(1.15); -webkit-backdrop-filter: blur(24px) saturate(1.15); border: 1px solid rgba(255, 255, 255, 0.48); } [data-theme="glass"] .wm-split-panel { background: transparent; } [data-theme="glass"] .wm-input { background: rgba(255, 255, 255, 0.72); border-color: rgba(255, 255, 255, 0.55); } /* ── Gradient ── */ [data-theme="gradient"] { --wm-radius-lg: 20px; --wm-shadow-lg: 0 32px 64px -16px rgba(124, 58, 237, 0.12), 0 16px 32px -8px rgba(124, 58, 237, 0.08); } [data-theme="gradient"] body { background: radial-gradient(ellipse 100% 80% at 0% 0%, color-mix(in srgb, var(--wm-primary) 12%, white) 0%, transparent 50%), radial-gradient(ellipse 80% 60% at 100% 100%, color-mix(in srgb, var(--wm-primary) 8%, var(--wm-bg)) 0%, transparent 50%), linear-gradient( 145deg, var(--wm-bg) 0%, color-mix(in srgb, var(--wm-primary) 10%, white) 28%, color-mix(in srgb, var(--wm-primary) 14%, white) 52%, color-mix(in srgb, var(--wm-primary) 6%, var(--wm-bg)) 78%, var(--wm-bg) 100% ); } [data-theme="gradient"] .wm-split-brand { background: linear-gradient( 165deg, color-mix(in srgb, var(--wm-primary) 16%, white) 0%, transparent 65% ); } [data-theme="gradient"] .wm-split-card { border-radius: 20px; border: none; box-shadow: 0 32px 64px -16px rgba(124, 58, 237, 0.1), 0 12px 24px -8px rgba(15, 23, 42, 0.06); } /* ── Nature ── */ [data-theme="nature"] { --wm-bg: #f3faf6; --wm-surface: #ffffff; --wm-border: #d8ebe2; --wm-text-muted: #5f7168; --wm-shadow-lg: 0 32px 64px -16px rgba(16, 120, 88, 0.08), 0 12px 24px -8px rgba(16, 120, 88, 0.05); } [data-theme="nature"] body { background: radial-gradient(ellipse 90% 60% at 50% -10%, color-mix(in srgb, var(--wm-primary) 8%, transparent) 0%, transparent 55%), linear-gradient(180deg, #f3faf6 0%, #eef6f1 100%); } [data-theme="nature"] .wm-split-brand { background: linear-gradient(165deg, #eef6f1 0%, #f3faf6 100%); border-color: #d8ebe2; } [data-theme="nature"] .wm-split-brand__desc, [data-theme="nature"] .wm-split-features li { color: #5f7168; } [data-theme="nature"] .wm-split-card { background: #ffffff; border: 1px solid #d8ebe2; box-shadow: 0 24px 48px -16px rgba(16, 120, 88, 0.07); } [data-theme="nature"] .wm-split-panel { background: transparent; } [data-theme="nature"] .wm-split-features__icon { background: color-mix(in srgb, var(--wm-primary) 10%, #f3faf6); color: color-mix(in srgb, var(--wm-primary) 85%, #065f46); }