/* ========================================================================== CORPORATE PREMIUM THEME for Bootstrap 5.3 - Load AFTER bootstrap.css - Optional dark mode: ========================================================================== */ /* ---------------------------- 0) Base tokens ---------------------------- */ :root{ /* Fonts */ --cp-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; --cp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Corporate palette */ --cp-navy-950:#081227; --cp-navy-900:#0b1936; --cp-navy-800:#0f2450; --cp-blue-700:#1e3a8a; --cp-blue-600:#2563eb; --cp-blue-500:#3b82f6; --cp-gold-600:#c8a24a; --cp-gold-500:#d8b35b; --cp-gold-200:#f5e8c7; --cp-slate-900:#0f172a; --cp-slate-700:#334155; --cp-slate-500:#64748b; /* Surfaces */ --cp-bg:#f4f6fb; --cp-surface:#ffffff; --cp-surface-2: rgba(255,255,255,.72); --cp-border: rgba(15,23,42,.10); --cp-text:#0b1220; --cp-muted: rgba(11,18,32,.62); /* Radius (premium, not bubbly) */ --cp-r-sm: 12px; --cp-r-md: 16px; --cp-r-lg: 20px; --cp-r-xl: 26px; /* Shadow (executive) */ --cp-sh-1: 0 10px 30px rgba(2,6,23,.08); --cp-sh-2: 0 18px 50px rgba(2,6,23,.14); --cp-sh-inset: inset 0 1px 0 rgba(255,255,255,.7); /* Motion */ --cp-ease: cubic-bezier(.22,1,.36,1); --cp-fast: 160ms; --cp-med: 240ms; /* Premium gradients */ --cp-g-hero: radial-gradient(1200px 700px at 15% -10%, rgba(37,99,235,.16), transparent 55%), radial-gradient(900px 600px at 85% 10%, rgba(216,179,91,.14), transparent 55%), linear-gradient(180deg, #ffffff 0%, var(--cp-bg) 100%); --cp-g-primary: linear-gradient(135deg, var(--cp-blue-600) 0%, var(--cp-blue-700) 55%, var(--cp-navy-900) 100%); --cp-g-gold: linear-gradient(135deg, rgba(216,179,91,1) 0%, rgba(200,162,74,1) 100%); /* Focus ring */ --cp-ring: 0 0 0 .26rem rgba(37,99,235,.18); /* Controls */ --cp-control-h: 44px; --cp-control-pad-x: 14px; /* Bootstrap overrides */ --bs-body-font-family: var(--cp-font-sans); --bs-body-bg: var(--cp-bg); --bs-body-color: var(--cp-text); --bs-primary: var(--cp-blue-600); --bs-secondary: var(--cp-slate-700); --bs-success: #16a34a; --bs-info: #06b6d4; --bs-warning: var(--cp-gold-500); --bs-danger: #ef4444; --bs-link-color: var(--cp-blue-700); --bs-link-hover-color: var(--cp-navy-900); --bs-border-color: var(--cp-border); --bs-border-radius: var(--cp-r-sm); --bs-border-radius-sm: 10px; --bs-border-radius-lg: var(--cp-r-lg); --bs-box-shadow: var(--cp-sh-1); --bs-box-shadow-sm: 0 8px 20px rgba(2,6,23,.08); --bs-box-shadow-lg: var(--cp-sh-2); --bs-focus-ring-color: rgba(37,99,235,.25); --bs-focus-ring-box-shadow: var(--cp-ring); --bs-card-border-color: rgba(15,23,42,.10); --bs-card-border-radius: var(--cp-r-lg); --bs-dropdown-border-color: rgba(15,23,42,.10); --bs-dropdown-link-hover-bg: rgba(37,99,235,.08); --bs-input-border-color: rgba(15,23,42,.16); --bs-input-focus-border-color: rgba(37,99,235,.45); } /* Dark mode */ :root[data-bs-theme="dark"]{ --cp-bg:#070d1b; --cp-surface:#0b1326; --cp-surface-2: rgba(11,19,38,.62); --cp-border: rgba(148,163,184,.16); --cp-text:#e5e7eb; --cp-muted: rgba(229,231,235,.68); --cp-sh-1: 0 14px 44px rgba(0,0,0,.45); --cp-sh-2: 0 24px 70px rgba(0,0,0,.56); --bs-body-bg: var(--cp-bg); --bs-body-color: var(--cp-text); --bs-border-color: var(--cp-border); --bs-link-color:#9bb8ff; --bs-link-hover-color:#c7d2fe; --cp-g-hero: radial-gradient(1200px 700px at 15% -10%, rgba(37,99,235,.18), transparent 55%), radial-gradient(900px 600px at 85% 10%, rgba(216,179,91,.12), transparent 55%), linear-gradient(180deg, #050a14 0%, #03060d 100%); } /* ---------------------------- 1) Page polish ---------------------------- */ html, body{height:100%;} body{ background: var(--cp-g-hero); letter-spacing: .15px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection{ background: rgba(37,99,235,.18); } a{ text-decoration: none; } a:hover{ text-decoration: underline; text-underline-offset: 3px; } h1,h2,h3,h4,h5,h6{ letter-spacing: -0.02em; } .lead{ color: var(--cp-muted); } .container, .container-fluid{ padding-left: 18px; padding-right: 18px; } /* Subtle premium separators */ .hr-premium{ border:0; height:1px; background: linear-gradient(to right, transparent, rgba(148,163,184,.32), transparent); margin: 1.25rem 0; } /* ---------------------------- 2) Buttons (executive) ---------------------------- */ .btn{ border-radius: calc(var(--cp-r-sm) + 2px); padding: .62rem 1rem; font-weight: 650; letter-spacing: .2px; transition: transform var(--cp-fast) var(--cp-ease), box-shadow var(--cp-fast) var(--cp-ease), background-color var(--cp-fast) var(--cp-ease), border-color var(--cp-fast) var(--cp-ease), filter var(--cp-fast) var(--cp-ease); box-shadow: 0 10px 24px rgba(2,6,23,.10); } .btn:active{ transform: translateY(1px); box-shadow: 0 8px 18px rgba(2,6,23,.12); } .btn:focus-visible{ box-shadow: var(--cp-ring), 0 14px 34px rgba(2,6,23,.12); } /* Primary: navy/blue gradient */ .btn-primary{ border:0; background: var(--cp-g-primary); } .btn-primary:hover{ filter: brightness(1.03); } /* Secondary: quiet executive */ .btn-secondary{ border:1px solid rgba(15,23,42,.18); background: rgba(255,255,255,.78); backdrop-filter: blur(10px); color: var(--cp-slate-900); } :root[data-bs-theme="dark"] .btn-secondary{ background: rgba(11,19,38,.62); color: var(--cp-text); border-color: rgba(148,163,184,.18); } /* Outline primary: very corporate */ .btn-outline-primary{ border-color: rgba(37,99,235,.45); color: var(--bs-primary); background: transparent; } .btn-outline-primary:hover{ background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.60); } /* Gold button utility */ .btn-gold{ border:0 !important; color: #1b1303 !important; background: var(--cp-g-gold) !important; box-shadow: 0 14px 32px rgba(216,179,91,.22); } .btn-gold:hover{ filter: brightness(1.02); } /* Pill option */ .btn-pill{ border-radius: 999px !important; } /* ---------------------------- 3) Forms (premium field style) ---------------------------- */ .form-control, .form-select{ border-radius: var(--cp-r-md); min-height: var(--cp-control-h); padding: .6rem var(--cp-control-pad-x); border: 1px solid var(--bs-input-border-color); background: rgba(255,255,255,.82); backdrop-filter: blur(10px); box-shadow: var(--cp-sh-inset); transition: border-color var(--cp-fast) var(--cp-ease), box-shadow var(--cp-fast) var(--cp-ease), background-color var(--cp-fast) var(--cp-ease); } :root[data-bs-theme="dark"] .form-control, :root[data-bs-theme="dark"] .form-select{ background: rgba(11,19,38,.62); } .form-control:focus, .form-select:focus{ border-color: var(--bs-input-focus-border-color); box-shadow: var(--cp-ring); background: rgba(255,255,255,.94); } :root[data-bs-theme="dark"] .form-control:focus, :root[data-bs-theme="dark"] .form-select:focus{ background: rgba(11,19,38,.78); } .form-control::placeholder{ color: rgba(100,116,139,.88); } :root[data-bs-theme="dark"] .form-control::placeholder{ color: rgba(203,213,225,.55); } /* Input group */ .input-group .input-group-text{ border-radius: var(--cp-r-md); border: 1px solid var(--bs-input-border-color); background: rgba(255,255,255,.78); backdrop-filter: blur(10px); box-shadow: var(--cp-sh-inset); font-weight: 650; } :root[data-bs-theme="dark"] .input-group .input-group-text{ background: rgba(11,19,38,.58); } .input-group > :first-child{ border-top-left-radius: var(--cp-r-md) !important; border-bottom-left-radius: var(--cp-r-md) !important; } .input-group > :last-child{ border-top-right-radius: var(--cp-r-md) !important; border-bottom-right-radius: var(--cp-r-md) !important; } /* Checks / switches */ .form-check-input{ width: 1.1em; height: 1.1em; border-radius: 6px; border-color: rgba(15,23,42,.26); transition: box-shadow var(--cp-fast) var(--cp-ease), border-color var(--cp-fast) var(--cp-ease); } .form-check-input:focus{ box-shadow: var(--cp-ring); border-color: rgba(37,99,235,.55); } .form-check-input:checked{ background-color: var(--cp-blue-600); border-color: var(--cp-blue-600); } .form-switch .form-check-input{ border-radius: 999px; width: 2.45em; height: 1.25em; } /* Validation */ .is-valid, .was-validated .form-control:valid{ border-color: rgba(22,163,74,.55) !important; } .is-invalid, .was-validated .form-control:invalid{ border-color: rgba(239,68,68,.55) !important; } /* ---------------------------- 4) Cards / Panels (porcelain + glass) ---------------------------- */ .card{ border-radius: var(--cp-r-xl); border: 1px solid rgba(15,23,42,.10); background: var(--cp-surface-2); backdrop-filter: blur(14px); box-shadow: var(--cp-sh-1); } :root[data-bs-theme="dark"] .card{ border-color: rgba(148,163,184,.16); background: rgba(11,19,38,.62); } .card-header{ background: transparent; border-bottom: 1px solid rgba(15,23,42,.08); padding: 1rem 1.1rem; } .card-body{ padding: 1.1rem; } .card-footer{ background: transparent; border-top: 1px solid rgba(15,23,42,.08); } /* Executive “summary” card */ .card-exec{ position: relative; overflow: hidden; } .card-exec::before{ content:""; position:absolute; inset:-2px; background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(216,179,91,.14)); filter: blur(18px); opacity: .65; pointer-events:none; } /* ---------------------------- 5) Navbar (glass corporate) ---------------------------- */ .navbar{ border-bottom: 1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.72) !important; backdrop-filter: blur(14px); } :root[data-bs-theme="dark"] .navbar{ background: rgba(11,19,38,.60) !important; border-bottom-color: rgba(148,163,184,.16); } .navbar .navbar-brand{ font-weight: 800; letter-spacing: -0.02em; } .navbar .nav-link{ border-radius: 999px; padding: .52rem .9rem; transition: background-color var(--cp-fast) var(--cp-ease), color var(--cp-fast) var(--cp-ease); } .navbar .nav-link:hover{ background: rgba(37,99,235,.08); } .navbar .nav-link.active{ background: rgba(37,99,235,.12); color: var(--cp-text); } /* ---------------------------- 6) Dropdowns (floating premium) ---------------------------- */ .dropdown-menu{ border-radius: var(--cp-r-lg); border: 1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.90); backdrop-filter: blur(14px); box-shadow: var(--cp-sh-2); padding: .55rem; } :root[data-bs-theme="dark"] .dropdown-menu{ background: rgba(11,19,38,.78); border-color: rgba(148,163,184,.16); } .dropdown-item{ border-radius: 12px; padding: .6rem .75rem; font-weight: 650; transition: transform var(--cp-fast) var(--cp-ease), background-color var(--cp-fast) var(--cp-ease); } .dropdown-item:hover{ transform: translateY(-1px); background: rgba(37,99,235,.08); } /* ---------------------------- 7) Tables (SaaS-grade) ---------------------------- */ .table{ --bs-table-bg: transparent; border-color: rgba(15,23,42,.10); } .table thead th{ font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cp-muted); border-bottom: 1px solid rgba(15,23,42,.10); } .table > :not(caption) > * > *{ padding: .85rem .9rem; } .table-hover tbody tr{ transition: background-color var(--cp-fast) var(--cp-ease); } .table-hover tbody tr:hover{ background: rgba(37,99,235,.06); } /* Wrapper premium */ .table-premium{ border-radius: var(--cp-r-xl); overflow: hidden; border: 1px solid rgba(15,23,42,.10); background: var(--cp-surface-2); backdrop-filter: blur(12px); box-shadow: var(--cp-sh-1); } :root[data-bs-theme="dark"] .table-premium{ border-color: rgba(148,163,184,.16); background: rgba(11,19,38,.62); } /* ---------------------------- 8) Alerts / Badges ---------------------------- */ .alert{ border-radius: var(--cp-r-xl); border: 1px solid rgba(15,23,42,.10); background: var(--cp-surface-2); backdrop-filter: blur(12px); box-shadow: var(--cp-sh-1); } .badge{ border-radius: 999px; padding: .45em .7em; font-weight: 750; letter-spacing: .02em; } /* Gold badge utility */ .badge-gold{ background: rgba(216,179,91,.18) !important; color: #2b2107 !important; border: 1px solid rgba(216,179,91,.35); } /* ---------------------------- 9) Modals / Offcanvas ---------------------------- */ .modal-content{ border-radius: var(--cp-r-xl); border: 1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.92); backdrop-filter: blur(16px); box-shadow: var(--cp-sh-2); } :root[data-bs-theme="dark"] .modal-content{ background: rgba(11,19,38,.82); border-color: rgba(148,163,184,.16); } .modal-header, .modal-footer{ border-color: rgba(15,23,42,.08); } .offcanvas{ background: rgba(255,255,255,.90); backdrop-filter: blur(16px); } :root[data-bs-theme="dark"] .offcanvas{ background: rgba(11,19,38,.82); } /* ---------------------------- 10) Accordion / Tabs / Pills ---------------------------- */ .accordion-item{ border-radius: var(--cp-r-xl); overflow: hidden; border: 1px solid rgba(15,23,42,.10); background: var(--cp-surface-2); backdrop-filter: blur(12px); box-shadow: var(--cp-sh-1); margin-bottom: 12px; } :root[data-bs-theme="dark"] .accordion-item{ border-color: rgba(148,163,184,.16); background: rgba(11,19,38,.62); } .accordion-button{ font-weight: 800; letter-spacing: -0.01em; background: transparent; } .accordion-button:focus{ box-shadow: var(--cp-ring); } .accordion-button:not(.collapsed){ color: var(--cp-text); background: rgba(37,99,235,.08); } .nav-pills .nav-link{ border-radius: 999px; font-weight: 750; padding: .6rem .95rem; } .nav-pills .nav-link.active{ background: var(--cp-g-primary); box-shadow: 0 14px 36px rgba(37,99,235,.22); } .nav-tabs{ border-bottom: 1px solid rgba(15,23,42,.10); } .nav-tabs .nav-link{ border:0; border-radius: 0px; margin-bottom: .35rem; } .nav-tabs .nav-link.active{ background: rgba(37,99,235,.08); } .nav-tabs .nav-link:not(.active) { color: #6f6f6f; } /* ---------------------------- 11) Pagination / Progress ---------------------------- */ .pagination .page-link{ border-radius: 12px; border: 1px solid rgba(15,23,42,.10); margin: 0 4px; padding: .55rem .8rem; font-weight: 750; background: rgba(255,255,255,.82); backdrop-filter: blur(10px); box-shadow: var(--cp-sh-inset); transition: transform var(--cp-fast) var(--cp-ease), background-color var(--cp-fast) var(--cp-ease); } :root[data-bs-theme="dark"] .pagination .page-link{ background: rgba(11,19,38,.62); border-color: rgba(148,163,184,.16); } .pagination .page-link:hover{ transform: translateY(-1px); background: rgba(37,99,235,.06); } .pagination .page-item.active .page-link{ border:0; background: var(--cp-g-primary); box-shadow: 0 16px 40px rgba(37,99,235,.22); } .progress{ height: 12px; border-radius: 999px; background: rgba(15,23,42,.10); } .progress-bar{ border-radius: 999px; background: var(--cp-g-primary); } /* ---------------------------- 12) Toast / Popover / Tooltip ---------------------------- */ .toast{ border-radius: var(--cp-r-xl); border: 1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.90); backdrop-filter: blur(14px); box-shadow: var(--cp-sh-2); } :root[data-bs-theme="dark"] .toast{ background: rgba(11,19,38,.82); border-color: rgba(148,163,184,.16); } .popover{ border-radius: var(--cp-r-xl); border: 1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.90); backdrop-filter: blur(14px); box-shadow: var(--cp-sh-2); } :root[data-bs-theme="dark"] .popover{ background: rgba(11,19,38,.82); border-color: rgba(148,163,184,.16); } .tooltip-inner{ border-radius: 12px; padding: .55rem .7rem; font-weight: 750; } /* ---------------------------- 13) Breadcrumb / List group ---------------------------- */ .breadcrumb{ padding: .65rem .9rem; border-radius: 999px; background: rgba(255,255,255,.72); backdrop-filter: blur(12px); border: 1px solid rgba(15,23,42,.10); } :root[data-bs-theme="dark"] .breadcrumb{ background: rgba(11,19,38,.62); border-color: rgba(148,163,184,.16); } .list-group{ border-radius: var(--cp-r-xl); overflow: hidden; box-shadow: var(--cp-sh-1); } .list-group-item{ border-color: rgba(15,23,42,.08); background: rgba(255,255,255,.74); backdrop-filter: blur(12px); padding: .9rem 1rem; } :root[data-bs-theme="dark"] .list-group-item{ background: rgba(11,19,38,.62); border-color: rgba(148,163,184,.14); } .list-group-item-action:hover{ background: rgba(37,99,235,.06); } /* ---------------------------- 14) Small utilities (brand feel) ---------------------------- */ .bg-glass{ background: var(--cp-surface-2) !important; backdrop-filter: blur(14px) !important; border: 1px solid rgba(15,23,42,.10) !important; border-radius: var(--cp-r-xl) !important; } .shadow-exec{ box-shadow: var(--cp-sh-2) !important; } .rounded-exec{ border-radius: var(--cp-r-xl) !important; } .text-muted-exec{ color: var(--cp-muted) !important; } /* Gold underline accent for headings */ .title-accent{ position: relative; display: inline-block; padding-bottom: .2rem; } .title-accent::after{ content:""; position:absolute; left:0; right:0; bottom:-.2rem; height: 3px; border-radius: 999px; background: var(--cp-g-gold); opacity: .9; } /* Make borders across the UI softer */ .border, .border-top, .border-bottom, .border-start, .border-end{ border-color: var(--bs-border-color) !important; } /* Code blocks */ code, pre{ font-family: var(--cp-font-mono); } pre{ border-radius: var(--cp-r-xl); border: 1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.72); backdrop-filter: blur(10px); padding: 1rem; box-shadow: var(--cp-sh-1); } :root[data-bs-theme="dark"] pre{ background: rgba(11,19,38,.62); border-color: rgba(148,163,184,.16); } /* Close button */ .btn-close{ opacity: .7; } .btn-close:hover{ opacity: 1; }