/* ============================================================ MEL — Brutalist theme Activates on . Raw, high-contrast, structural. Thick black borders, hard offset shadows (no blur), zero radius, heavy grotesque type, flat saturated color blocks. Honey is the loud accent. Same token contract as the other Mel themes. ============================================================ */ @layer theme { :root[data-theme="brutal"] { color-scheme: only light; /* ---------- BRAND ---------- */ --color-primary: var(--honey-500); --color-primary-hover: var(--honey-400); --color-primary-fg: #111111; /* black ink on honey */ --color-primary-text: #6b3d05; /* honey-ink link color */ --color-secondary: #111111; --color-secondary-hover: #000000; /* flat, full-strength semantics (no soft tints) */ --color-error: #e23b3b; --color-success: #1f9d57; --color-warning: #f59e0b; --color-info: #2f6fe0; /* ---------- GLOBAL ---------- */ --bg-base: #f3eee1; /* warm paper */ --bg-surface: #ffffff; /* ---------- TYPE COLORS ---------- */ --text-main: #111111; --text-muted: #4a4a4a; --text-inverted: #ffffff; /* ---------- BORDERS (ink) ---------- */ --border-subtle: #111111; --border-base: #111111; /* ---------- FORMS ---------- */ --input-bg: #ffffff; --input-bg-disabled: #ece7da; --input-border: #111111; --input-border-hover: #111111; --input-ring-focus: 4px 4px 0 var(--honey-500); --input-text: #111111; --input-placeholder: #8a8275; --input-addon-bg: #ece7da; --fieldset-border: #111111; --checkbox-border: #111111; /* ---------- BUTTONS ---------- */ --btn-bg: #ffffff; --btn-bg-hover: #f3eee1; --btn-text: #111111; --btn-outline-border: #111111; --btn-outline-text: #111111; --btn-ghost-text: #111111; --btn-ghost-hover: rgba(17, 17, 17, 0.08); --btn-outline-hover-bg: var(--honey-100); /* ---------- TOGGLE / RANGE / RATING ---------- */ --toggle-bg: #ffffff; --toggle-bg-checked: var(--honey-500); --toggle-knob: #111111; --range-track-bg: #ffffff; --range-track-fill: var(--honey-500); --range-thumb: #111111; --rating-color: #d8d2c4; --rating-color-active: var(--honey-500); /* ---------- BADGE / TAG ---------- */ --badge-outline-border: #111111; --badge-bg: #ece7da; --tag-bg: #ece7da; --tag-text: #111111; /* ---------- PROGRESS / SKELETON ---------- */ --progress-bg: #ece7da; --progress-fill: var(--honey-500); --skeleton-bg: #ece7da; --skeleton-shine: #f6f2e8; /* ---------- AVATAR ---------- */ --avatar-ring-offset: #ffffff; --avatar-bg: var(--honey-300); --avatar-color: #111111; /* ---------- DIVIDER ---------- */ --divider-color: #111111; /* ---------- TABLES ---------- */ --table-header-bg: var(--honey-100); --table-border: #111111; --table-row-hover: var(--honey-50); --table-striped-bg: #f6f2e8; /* ---------- CODE / QUOTE ---------- */ --code-bg: #111111; --blockquote-bg: var(--honey-100); /* ---------- DIALOG ---------- */ --dialog-border: #111111; --backdrop-bg: rgba(17, 17, 17, 0.4); --backdrop-blur: none; /* ---------- DETAILS / MEDIA ---------- */ --details-bg: #ffffff; --details-header-bg: var(--honey-100); --details-border: #111111; --audio-bg: #ece7da; /* ---------- ALERTS (flat blocks, ink border) ---------- */ --alert-bg: #ffffff; --alert-border: #111111; --alert-info-bg: color-mix(in srgb, var(--color-info), white 80%); --alert-info-border: #111111; --alert-success-bg: color-mix(in srgb, var(--color-success), white 80%); --alert-success-border: #111111; --alert-warning-bg: var(--honey-200); --alert-warning-border: #111111; --alert-error-bg: color-mix(in srgb, var(--color-error), white 80%); --alert-error-border: #111111; --alert-info-text: #14305f; --alert-success-text: #0f4a29; --alert-warning-text: #6b3d05; --alert-error-text: #6f1414; /* ---------- BOX / DIFF ---------- */ --box-bg: #ffffff; --diff-bg: #ffffff; --diff-border: #111111; --diff-header-bg: var(--honey-100); /* ---------- CARD ---------- */ --card-bg: #ffffff; --card-border: #111111; --card-header-bg: var(--honey-100); --card-footer-border: #111111; /* ---------- NAVBAR / PAGINATION ---------- */ --navbar-bg: #ffffff; --navbar-border: #111111; --pagination-bg: #ffffff; --pagination-border: #111111; --pagination-text: #111111; --pagination-hover-bg: var(--honey-100); /* ---------- TABS / MODAL / ACCORDION ---------- */ --tabs-border: #111111; --modal-bg: #ffffff; --accordion-border: #111111; --accordion-header-bg: var(--honey-100); --accordion-header-hover-bg: var(--honey-200); /* ---------- DROPDOWN / TOOLTIP / MENU ---------- */ --dropdown-bg: #ffffff; --dropdown-border: #111111; --dropdown-hover-bg: var(--honey-100); --tooltip-bg: #111111; --tooltip-text: #ffffff; --menu-item-hover-bg: var(--honey-100); --menu-item-active-bg: var(--honey-200); /* ---------- TOAST / MESSAGE ---------- */ --toast-bg: #ffffff; --message-bg: #ffffff; --message-border: #111111; /* ---------- STAT / TIMELINE ---------- */ --stat-bg: #ffffff; --stat-border: #111111; --stat-icon-bg: var(--honey-300); --stat-icon-color: #111111; --timeline-line: #111111; --timeline-marker-ring: #ffffff; /* ---------- LISTS / DRAWER / OFFCANVAS / POPOVER / PANEL ---------- */ --list-group-bg: #ffffff; --list-group-border: #111111; --list-group-hover-bg: var(--honey-50); --drawer-bg: #ffffff; --drawer-border: #111111; --offcanvas-bg: #ffffff; --bottom-nav-bg: #ffffff; --bottom-nav-border: #111111; --popover-bg: #ffffff; --popover-border: #111111; --panel-bg: #ffffff; --panel-border: #111111; /* ---------- PRICING / HERO / CHAT / CAROUSEL ---------- */ --pricing-bg: #ffffff; --pricing-border: #111111; --hero-bg: var(--honey-100); --chat-bubble-bg: #ece7da; --carousel-nav-bg: #ffffff; --carousel-nav-border: #111111; --carousel-nav-hover-bg: var(--honey-100); /* ---------- TYPOGRAPHY ---------- */ --font-sans: 'Space Grotesk', 'Nunito', system-ui, sans-serif; /* ---------- SHADOWS (hard offset, no blur) ---------- */ --shadow-xs: 2px 2px 0 #111111; --shadow-sm: 3px 3px 0 #111111; --shadow-md: 5px 5px 0 #111111; --shadow-lg: 8px 8px 0 #111111; --shadow-modal: 10px 10px 0 #111111; /* ---------- RADII (square) ---------- */ --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-pill: 0; } } /* ============================================================ STRUCTURAL — raw brutalist surfaces (outside @layer so they win) ============================================================ */ [data-theme="brutal"] body { background: var(--bg-base); } /* heavier, tighter headings; tracked uppercase utility labels */ [data-theme="brutal"] h1:not([class]), [data-theme="brutal"] .page-head h1, [data-theme="brutal"] .content-head h2 { font-weight: 700; letter-spacing: -0.02em; } [data-theme="brutal"] .section-label { color: #111111; font-weight: 700; } [data-theme="brutal"] .card-header { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; } [data-theme="brutal"] .table th { color: #111111; } /* ---- containers: 2px ink border + hard shadow, square ---- */ [data-theme="brutal"] .data-card, [data-theme="brutal"] .filter-bar, [data-theme="brutal"] .form-card, [data-theme="brutal"] .card, [data-theme="brutal"] .stat-card, [data-theme="brutal"] .stat-horizontal, [data-theme="brutal"] .set-menu, [data-theme="brutal"] .auth-card, [data-theme="brutal"] dialog.modal { border: 2px solid #111111 !important; border-radius: 0 !important; box-shadow: var(--shadow-md); } [data-theme="brutal"] .card-header { border-bottom: 2px solid #111111; } [data-theme="brutal"] .form-section + .form-section { border-top: 2px solid #111111; } [data-theme="brutal"] .form-foot { border-top: 2px solid #111111; background: var(--honey-50); } [data-theme="brutal"] .table-foot { border-top: 2px solid #111111; } [data-theme="brutal"] .data-card table.table thead th { border-bottom: 2px solid #111111; } [data-theme="brutal"] .data-card table.table tbody tr { border-top: 1px solid #111111; } [data-theme="brutal"] .kv { border-top: 1px solid #111111; } /* stat-card hover: exaggerate the offset */ [data-theme="brutal"] .stat-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); } /* ---- rail + topbar ---- */ [data-theme="brutal"] .mel-rail { background: #ffffff; border-right: 3px solid #111111; } [data-theme="brutal"] .mel-rail a { color: #111111; border-radius: 0; } [data-theme="brutal"] .mel-rail a:hover { background: var(--honey-100); } [data-theme="brutal"] .mel-rail a.is-active { background: var(--honey-500); color: #111111; border: 2px solid #111111; box-shadow: 3px 3px 0 #111111; } [data-theme="brutal"] .app-topbar { background: #ffffff; border-bottom: 3px solid #111111; } /* ---- buttons: ink border + hard shadow, press collapses the shadow ---- */ [data-theme="brutal"] .btn { border: 2px solid #111111; border-radius: 0; box-shadow: 3px 3px 0 #111111; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); } [data-theme="brutal"] .btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #111111; } [data-theme="brutal"] .btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 #111111; } [data-theme="brutal"] .btn-sm { box-shadow: 2px 2px 0 #111111; } [data-theme="brutal"] .btn-icon { box-shadow: 2px 2px 0 #111111; } [data-theme="brutal"] .btn-primary, [data-theme="brutal"] button[type="submit"]:not([class]) { background-image: none; background-color: var(--honey-500); color: #111111; } [data-theme="brutal"] .btn-primary:hover:not(:disabled) { background-color: var(--honey-400); } [data-theme="brutal"] .btn-danger { background-color: var(--color-error); color: #ffffff; } [data-theme="brutal"] .btn-ghost { box-shadow: none; border-color: transparent; } [data-theme="brutal"] .btn-ghost:hover:not(:disabled) { transform: none; box-shadow: none; border-color: #111111; } /* soft action chips -> flat ink-bordered blocks */ [data-theme="brutal"] .btn-soft-edit { background: var(--color-info); color: #ffffff; } [data-theme="brutal"] .btn-soft-del { background: var(--color-error); color: #ffffff; } /* ---- inputs: 2px ink, square, hard honey focus ---- */ [data-theme="brutal"] .input, [data-theme="brutal"] .select, [data-theme="brutal"] .textarea, [data-theme="brutal"] input:not([class]), [data-theme="brutal"] select:not([class]), [data-theme="brutal"] textarea:not([class]) { border: 2px solid #111111; border-radius: 0; box-shadow: none; background: #ffffff; } [data-theme="brutal"] .input:focus, [data-theme="brutal"] .select:focus, [data-theme="brutal"] .textarea:focus, [data-theme="brutal"] input:not([class]):focus, [data-theme="brutal"] select:not([class]):focus, [data-theme="brutal"] textarea:not([class]):focus { border-color: #111111; box-shadow: 4px 4px 0 var(--honey-500); } [data-theme="brutal"] .label, [data-theme="brutal"] label:not([class]) { color: #111111; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--text-xs); } /* ---- pills / badges: square ink-bordered blocks, uppercase ---- */ [data-theme="brutal"] .badge-soft, [data-theme="brutal"] .yn, [data-theme="brutal"] .role-pill, [data-theme="brutal"] .badge, [data-theme="brutal"] .tag { border-radius: 0; border: 1.5px solid #111111; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; } [data-theme="brutal"] .badge-soft::before, [data-theme="brutal"] .yn::before { display: none; } [data-theme="brutal"] .badge-soft-success, [data-theme="brutal"] .yn-yes { background: var(--color-success); color: #ffffff; } [data-theme="brutal"] .badge-soft-warning { background: var(--honey-400); color: #111111; } [data-theme="brutal"] .badge-soft-error { background: var(--color-error); color: #ffffff; } [data-theme="brutal"] .badge-soft-info { background: var(--color-info); color: #ffffff; } [data-theme="brutal"] .badge-soft-neutral, [data-theme="brutal"] .yn-no { background: #ece7da; color: #111111; } [data-theme="brutal"] .role-super { background: var(--honey-400); color: #111111; } [data-theme="brutal"] .role-admin { background: var(--color-info); color: #ffffff; } [data-theme="brutal"] .code-chip { background: #111111; color: #ffffff; border-radius: 0; } /* ---- avatar: square block with ink border ---- */ [data-theme="brutal"] .id-avatar, [data-theme="brutal"] .avatar, [data-theme="brutal"] .u-avatar { border-radius: 0 !important; border: 2px solid #111111; } /* ---- segmented control + toggles ---- */ [data-theme="brutal"] .seg { background: #ffffff; border: 2px solid #111111; border-radius: 0; } [data-theme="brutal"] .seg button { border-radius: 0; } [data-theme="brutal"] .seg button.on { background: var(--honey-500); color: #111111; box-shadow: none; } [data-theme="brutal"] .toggle-track { border: 2px solid #111111; border-radius: 0; } [data-theme="brutal"] .checkbox { border-radius: 0; border: 2px solid #111111; } /* ---- progress ---- */ [data-theme="brutal"] .progress { border: 2px solid #111111; border-radius: 0; background: #ffffff; padding: 0; } [data-theme="brutal"] .progress-bar { border-radius: 0; } /* ---- alerts: thick ink border + hard shadow ---- */ [data-theme="brutal"] .alert { border: 2px solid #111111; border-radius: 0; box-shadow: var(--shadow-sm); } /* ---- settings top bar (non-shell page) ---- */ [data-theme="brutal"] .top { background: #ffffff; border-bottom: 3px solid #111111; } [data-theme="brutal"] .set-menu a { border-radius: 0; } [data-theme="brutal"] .set-menu a.is-active { background: var(--honey-300); color: #111111; border: 2px solid #111111; } [data-theme="brutal"] .top nav a { border-radius: 0; } [data-theme="brutal"] .top nav a.is-active { background: var(--honey-300); color: #111111; } /* ---- auth accent strip ---- */ [data-theme="brutal"] .auth-accent, [data-theme="brutal"] .mel-login-accent { background: var(--honey-500); border-bottom: 2px solid #111111; } /* kill the soft entrance fade — brutalism is instant */ [data-theme="brutal"] .app-main-inner { animation: none; }