@charset "UTF-8"; /** * ============================================================================ * IZZI THEME STYLES (v1.0) * ============================================================================ * To activate this theme, add the class "theme-izzi" to the or tag. * Example: */ .theme-izzi { /* ------------------------------------------------------------------------ * 1. BRAND COLOR PALETTE (Extracted from Brand Guidelines) * ------------------------------------------------------------------------ */ /* Core Brand Colors */ --izzi-teal: #00C1B5; /* PANTONE 3262 C */ --izzi-orange: #FF6C07; /* PANTONE 2018 C */ --izzi-yellow: #FCD116; /* PANTONE 116 C */ --izzi-pink: #D60270; /* PANTONE 226 C */ /* Secondary & Neutrals */ --izzi-gray-sub: #5F5A52; /* PANTONE P 179-13 U */ --izzi-black: #00C1B5; /* PANTONE 426 C equivalent slightly tinted */ --izzi-black-true: #1A1A1A; /* Better readability black than absolute #000 */ --izzi-white: #FFFFFF; /* Functional Semantic Colors based on Brand */ --izzi-primary: var(--izzi-teal); --izzi-secondary: var(--izzi-gray-sub); --izzi-success: var(--izzi-teal); --izzi-danger: var(--izzi-pink); --izzi-warning: var(--izzi-yellow); --izzi-info: var(--izzi-orange); /* ------------------------------------------------------------------------ * 2. TYPOGRAPHY (DIN Font Family) * ------------------------------------------------------------------------ */ --izzi-font-family: 'DIN', 'DIN Next LT Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-family: var(--izzi-font-family); color: var(--izzi-black-true); } body.theme-izzi { background-color: var(--izzi-black-true); } /* * ============================================================================ * TYPOGRAPHY RULES OVERRIDES * ============================================================================ * Rule 3.4: All main messages and headers must be written in lowercase. */ .theme-izzi h1, .theme-izzi h2, .theme-izzi h3, .theme-izzi h4, .theme-izzi h5, .theme-izzi h6, .theme-izzi .h1, .theme-izzi .h2, .theme-izzi .h3, .theme-izzi .h4, .theme-izzi .h5, .theme-izzi .h6 { font-family: var(--izzi-font-family); font-weight: bold; /* DIN Bold */ /* text-transform: lowercase; */ /* Required by brand guideline */ color: var(--izzi-black-true); } /* Secondary messages (regular weight but still lowercase) */ .theme-izzi .subtitle, .theme-izzi .mensaje-secundario { font-weight: normal; /* DIN Regular */ /* text-transform: lowercase; */ } /* Body Text / Large running texts */ .theme-izzi p, .theme-izzi span, .theme-izzi div { font-family: var(--izzi-font-family); /* "Textos largos corridos: mayúsculas y minúsculas para facilitar lectura" */ } /* * ============================================================================ * GENERIC COMPONENT OVERRIDES (Bootstrap / Tailwind generic classes) * ============================================================================ */ /* ---------- BUTTONS ---------- */ .theme-izzi .btn, .theme-izzi button, .theme-izzi [type="button"], .theme-izzi [type="submit"] { font-family: var(--izzi-font-family) !important; /* Buttons treated as main messages */ font-weight: bold !important; border-radius: 4px; /* Slightly square based on isometric 4play cubes */ transition: all 0.2s ease-in-out; } .theme-izzi .btn-primary, .theme-izzi .bg-primary { background-color: var(--izzi-primary) !important; border-color: var(--izzi-primary) !important; color: var(--izzi-white) !important; } .theme-izzi .btn-primary:hover, .theme-izzi .btn-primary:focus { background-color: #00a89d !important; /* Slightly darker teal */ border-color: #00a89d !important; } /* Filament / Tailwind primary overrides (heuristics) */ .theme-izzi .fi-btn-color-primary, .theme-izzi .bg-primary-600 { background-color: var(--izzi-primary) !important; } .theme-izzi .text-primary-600 { color: var(--izzi-primary) !important; } .theme-izzi .btn-secondary, .theme-izzi .bg-secondary { background-color: var(--izzi-secondary) !important; border-color: var(--izzi-secondary) !important; color: var(--izzi-white) !important; } .theme-izzi .btn-warning, .theme-izzi .bg-warning { background-color: var(--izzi-warning) !important; border-color: var(--izzi-warning) !important; color: var(--izzi-black-true) !important; } .theme-izzi .btn-danger, .theme-izzi .bg-danger { background-color: var(--izzi-danger) !important; border-color: var(--izzi-danger) !important; color: var(--izzi-white) !important; } .theme-izzi .btn-info, .theme-izzi .bg-info { background-color: var(--izzi-info) !important; border-color: var(--izzi-info) !important; color: var(--izzi-white) !important; } /* ---------- LINKS ---------- */ .theme-izzi a { color: var(--izzi-primary-true); font-weight: bold; } .theme-izzi a:hover { color: var(--izzi-primary-dark); /* Darker Teal */ } /* ---------- CARDS & PANELS ---------- */ .theme-izzi .card, .theme-izzi .panel, .theme-izzi .box { border: none !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Soft, modern shadow */ } .theme-izzi .card-header, .theme-izzi .panel-heading { background-color: var(--izzi-white) !important; border-bottom: 2px solid var(--izzi-primary) !important; } /* * ============================================================================ * IZZI SPECIFIC DESIGN ASSETS (Based on Page 43 & 46) * ============================================================================ */ /* Prisma Gradient Backgrounds (Functional combinations) */ .theme-izzi .bg-prisma-teal-pink { background: linear-gradient(135deg, var(--izzi-teal) 0%, var(--izzi-pink) 100%); color: var(--izzi-white); } .theme-izzi .bg-prisma-orange-yellow { background: linear-gradient(135deg, var(--izzi-orange) 0%, var(--izzi-yellow) 100%); color: var(--izzi-white); } /* Subtle highlights for emphasis */ .theme-izzi .highlight-izzi { color: var(--izzi-primary); font-weight: bold; } /* Utility to force secondary font style */ .theme-izzi .font-din-regular { font-family: var(--izzi-font-family) !important; font-weight: normal !important; } .theme-izzi .font-din-light { font-family: var(--izzi-font-family) !important; font-weight: 300 !important; } /* * ============================================================================ * LAYOUT OVERRIDES (Sidebar / Menu) * ============================================================================ */ .theme-izzi .left_col { background: var(--izzi-black-true) !important; } .theme-izzi .nav_title { background: var(--izzi-black-true) !important; } .theme-izzi .nav.side-menu>li>a, .theme-izzi .nav.child_menu>li>a { color: var(--izzi-white) !important; font-weight: bold; } .theme-izzi .nav.side-menu>li>a:hover { color: var(--izzi-yellow) !important; } .theme-izzi .nav>li>a:hover, .theme-izzi .nav>li>a:focus, .theme-izzi .nav.side-menu>li.active>a { background: var(--izzi-primary) !important; color: var(--izzi-white) !important; } .theme-izzi .menu_section h3 { color: var(--izzi-white) !important; text-transform: lowercase; } .theme-izzi .nav.child_menu { background: var(--izzi-black-true) !important; } .form-control:focus { border-color: #ccd0d7 !important; box-shadow: none !important; }