/* SEARM Brand Guide Implementation */ /* * Hyper Theme Integration Guide: * * To activate different color schemes, add these attributes to your tag: * * Light Menu: * Dark Menu: * Brand Menu: * * Light Topbar: * Dark Topbar: * Brand Topbar: * * Dark Mode: * * Examples: * * */ /* Override Hyper theme default colors with SEARM brand palette */ :root { /* Override Hyper theme primary colors with SEARM colors */ --ct-primary: var(--searm-green); --ct-primary-rgb: 0, 204, 153; --ct-secondary: var(--searm-blue); --ct-secondary-rgb: 21, 155, 255; --ct-success: var(--searm-green); --ct-success-rgb: 0, 204, 153; --ct-info: var(--searm-blue); --ct-info-rgb: 21, 155, 255; --ct-warning: var(--searm-coral); --ct-warning-rgb: 255, 138, 120; --ct-danger: var(--searm-red); --ct-danger-rgb: 229, 68, 44; /* Override Hyper theme semantic colors */ --ct-blue: var(--searm-blue); --ct-indigo: var(--searm-dark-blue); --ct-green: var(--searm-green); --ct-teal: var(--searm-dark-green); /* Override Hyper theme component colors */ --ct-menu-item-hover-color: var(--searm-green); --ct-menu-item-active-color: var(--searm-green); --ct-topbar-item-hover-color: var(--searm-green); --ct-help-box-bg: var(--searm-green); } /* Override Hyper theme menu colors for different themes */ html[data-menu-color=light] { --ct-menu-item-hover-color: var(--searm-green); --ct-menu-item-active-color: var(--searm-green); --ct-help-box-bg: var(--searm-green); } html[data-menu-color=dark] { --ct-menu-item-hover-color: var(--searm-green); --ct-menu-item-active-color: var(--searm-green); --ct-help-box-bg: rgba(0, 204, 153, 0.07); } html[data-menu-color=brand] { --ct-menu-bg: linear-gradient(135deg, var(--searm-green) 0%, var(--searm-dark-green) 100%); --ct-menu-item-color: rgba(255, 255, 255, 0.8); --ct-menu-item-hover-color: #ffffff; --ct-menu-item-active-color: #ffffff; --ct-help-box-bg: rgba(255, 255, 255, 0.07); } /* Override Hyper theme topbar colors */ html[data-topbar-color=light] { --ct-topbar-bg: #036E54; --ct-topbar-item-color: #ffffff; --ct-topbar-item-hover-color: #e0e0e0; } html[data-topbar-color=dark] { --ct-topbar-bg: #036E54; --ct-topbar-item-color: #ffffff; --ct-topbar-item-hover-color: #e0e0e0; } html[data-topbar-color=brand] { --ct-topbar-bg: #036E54; --ct-topbar-item-color: #ffffff; --ct-topbar-item-hover-color: #e0e0e0; --ct-topbar-search-bg: rgba(255, 255, 255, 0.1); --ct-topbar-user-bg: rgba(255, 255, 255, 0.1); --ct-topbar-user-border: rgba(255, 255, 255, 0.15); } /* Override Hyper theme button colors */ .btn-primary { background-color: var(--ct-primary) !important; border-color: var(--ct-primary) !important; } .btn-primary:hover { background-color: var(--searm-dark-green) !important; border-color: var(--searm-dark-green) !important; } .btn-secondary { background-color: var(--ct-secondary) !important; border-color: var(--ct-secondary) !important; } .btn-secondary:hover { background-color: var(--searm-dark-blue) !important; border-color: var(--searm-dark-blue) !important; } .btn-success { background-color: var(--ct-success) !important; border-color: var(--ct-success) !important; } .btn-info { background-color: var(--ct-info) !important; border-color: var(--ct-info) !important; } .btn-warning { background-color: var(--ct-warning) !important; border-color: var(--ct-warning) !important; } .btn-danger { background-color: var(--ct-danger) !important; border-color: var(--ct-danger) !important; } /* Override Hyper theme form focus states */ .form-control:focus { border-color: var(--ct-primary) !important; box-shadow: 0 0 0 0.2rem rgba(var(--ct-primary-rgb), 0.25) !important; } /* Override Hyper theme alert colors */ .alert-primary { background-color: rgba(var(--ct-primary-rgb), 0.1) !important; border-color: rgba(var(--ct-primary-rgb), 0.2) !important; color: var(--ct-primary) !important; } .alert-success { background-color: rgba(var(--ct-success-rgb), 0.1) !important; border-color: rgba(var(--ct-success-rgb), 0.2) !important; color: var(--ct-success) !important; } .alert-info { background-color: rgba(var(--ct-info-rgb), 0.1) !important; border-color: rgba(var(--ct-info-rgb), 0.2) !important; color: var(--ct-info) !important; } .alert-warning { background-color: rgba(var(--ct-warning-rgb), 0.1) !important; border-color: rgba(var(--ct-warning-rgb), 0.2) !important; color: var(--ct-warning) !important; } .alert-danger { background-color: rgba(var(--ct-danger-rgb), 0.1) !important; border-color: rgba(var(--ct-danger-rgb), 0.2) !important; color: var(--ct-danger) !important; } /* SEARM Brand Variables */ :root { /* Color Palette */ --searm-green: #00CC99; --searm-dark-green: #036E54; --searm-light-green: #E0E0E0; --searm-blue: #159BFF; --searm-dark-blue: #1D51CA; --searm-dark-gray: #454545; --searm-medium-gray: #373737; --searm-light-gray: #939393; --searm-very-light-gray: #CECECE; --searm-coral: #FF8A78; --searm-red: #E5442C; --searm-off-white: #F2F4F3; /* American Sailing Brand Colors */ --american-sailing-red: #ed2024; --american-sailing-blue-dark: #003858; --american-sailing-blue-light: #29abe2; /* Typography Scale */ --font-satoshi: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-archivo: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Font Sizes */ --text-page-header: 1.5625rem; /* 25pt */ --text-h1: 1.5rem; /* 24pt */ --text-h2: 1rem; /* 16pt */ --text-body: 1rem; /* 16pt */ --text-menu: 1.125rem; /* 18pt */ --text-submenu: 1rem; /* 16pt */ /* Letter Spacing (Tracking) */ --tracking-page-header: 0.25em; /* 25% */ --tracking-h1: 0.05em; /* 5% */ --tracking-school-name: 0.15em; /* 15% */ --tracking-affiliate-title: 0.1em; /* 10% */ } /* Typography Classes */ .text-page-header { font-family: var(--font-satoshi); font-weight: 900; /* Black */ font-size: var(--text-page-header); letter-spacing: var(--tracking-page-header); text-transform: uppercase; } .text-h1 { font-family: var(--font-satoshi); font-weight: 700; /* Bold */ font-size: var(--text-h1); letter-spacing: var(--tracking-h1); } .text-h2 { font-family: var(--font-satoshi); font-weight: 500; /* Medium */ font-size: var(--text-h2); } .text-body { font-family: var(--font-satoshi); font-weight: 400; /* Regular */ font-size: var(--text-body); } .text-menu-category { font-family: var(--font-archivo); font-weight: 600; /* SemiBold */ font-size: var(--text-menu); } .text-submenu { font-family: var(--font-archivo); font-weight: 400; /* Regular */ font-size: var(--text-submenu); } .text-school-name { font-family: var(--font-archivo); font-weight: 600; /* SemiBold */ font-size: var(--text-menu); letter-spacing: var(--tracking-school-name); text-transform: uppercase; } .text-affiliate-title { font-family: var(--font-archivo); font-weight: 600; /* SemiBold */ font-size: var(--text-menu); letter-spacing: var(--tracking-affiliate-title); color: var(--searm-green); } /* Color Utility Classes */ .text-searm-green { color: var(--searm-green); } .text-searm-dark-green { color: var(--searm-dark-green); } .text-searm-blue { color: var(--searm-blue); } .text-searm-dark-blue { color: var(--searm-dark-blue); } .text-searm-dark-gray { color: var(--searm-dark-gray); } .text-searm-medium-gray { color: var(--searm-medium-gray); } .text-searm-light-gray { color: var(--searm-light-gray); } /* American Sailing Color Utilities */ .text-american-sailing-red { color: var(--american-sailing-red); } .text-american-sailing-blue-dark { color: var(--american-sailing-blue-dark); } .text-american-sailing-blue-light { color: var(--american-sailing-blue-light); } .bg-searm-green { background-color: var(--searm-green); } .bg-searm-dark-green { background-color: var(--searm-dark-green); } .bg-searm-blue { background-color: var(--searm-blue); } .bg-searm-dark-blue { background-color: var(--searm-dark-blue); } .bg-searm-off-white { background-color: var(--searm-off-white); } .bg-searm-very-light-gray { background-color: var(--searm-very-light-gray); } .bg-searm-coral { background-color: var(--searm-coral); } /* American Sailing Background Utilities */ .bg-american-sailing-red { background-color: var(--american-sailing-red); } .bg-american-sailing-blue-dark { background-color: var(--american-sailing-blue-dark); } .bg-american-sailing-blue-light { background-color: var(--american-sailing-blue-light); } .border-searm-green { border-color: var(--searm-green); } .border-searm-very-light-gray { border-color: var(--searm-very-light-gray); } /* Button Classes */ .btn-searm-primary { background-color: var(--searm-green); border-color: var(--searm-green); color: white; } .btn-searm-primary:hover { background-color: var(--searm-dark-green); border-color: var(--searm-dark-green); color: white; } .btn-searm-secondary { background-color: var(--searm-blue); border-color: var(--searm-blue); color: white; } .btn-searm-secondary:hover { background-color: var(--searm-dark-blue); border-color: var(--searm-dark-blue); color: white; } .btn-outline-searm-green { color: var(--searm-green); border-color: var(--searm-green); background-color: transparent; } .btn-outline-searm-green:hover { color: white; background-color: var(--searm-green); border-color: var(--searm-green); } .btn-outline-searm-blue { color: var(--searm-blue); border-color: var(--searm-blue); background-color: transparent; } .btn-outline-searm-blue:hover { color: white; background-color: var(--searm-blue); border-color: var(--searm-blue); } /* Badge Classes */ .badge.bg-searm-green { background-color: var(--searm-green) !important; } .badge.bg-searm-blue { background-color: var(--searm-blue) !important; } .badge.bg-searm-dark-blue { background-color: var(--searm-dark-blue) !important; } .badge.bg-searm-dark-green { background-color: var(--searm-dark-green) !important; } .badge.bg-searm-light-gray { background-color: var(--searm-light-gray) !important; } .badge.bg-searm-coral { background-color: var(--searm-coral) !important; } /* SEARM-specific component styles */ .searm-logo { font-family: var(--font-archivo); font-weight: 600; color: var(--searm-green); } .searm-nav-item { font-family: var(--font-archivo); font-weight: 600; color: var(--searm-dark-gray); } .searm-nav-item:hover { color: var(--searm-green); } .searm-card-header { font-family: var(--font-satoshi); font-weight: 700; color: var(--searm-dark-gray); } .searm-form-label { font-family: var(--font-satoshi); font-weight: 700; color: var(--searm-dark-gray); } /* Override Hyper theme defaults with SEARM colors */ .navbar-custom { background: #444444 !important; border-left: 1px solid #f2f4f3; } /* Ensure proper contrast for navbar text and icons */ .navbar-custom .topbar-menu .nav-link { color: #ffffff !important; border:none; } .navbar-custom .topbar-menu .nav-link:hover { color: #e0e0e0 !important; } .navbar-custom .topbar-menu .nav-link.show { color: #ffffff !important; } /* Search form styling for better contrast */ .navbar-custom .app-search .form-control { color: #036E54 !important; background-color: rgba(255, 255, 255, 0.9) !important; } .navbar-custom .app-search .form-control::placeholder { color: #036E54 !important; opacity: 0.7; } .navbar-custom .app-search .search-icon { color: #036E54 !important; } /* Profile section styling */ .nav-user .nav-link { color: #ffffff !important; background-color: var(--searm-dark-gray) !important; } .nav-user .nav-link:hover { color: #e0e0e0 !important; background-color: var(--searm-medium-gray) !important; } /* Profile dropdown background */ .nav-user .dropdown-menu { background-color: var(--searm-dark-gray) !important; /* Using SeaRM dark gray */ border-color: var(--searm-medium-gray) !important; } .nav-user .dropdown-menu .dropdown-item { color: #ffffff !important; } .nav-user .dropdown-menu .dropdown-item:hover { background-color: var(--searm-medium-gray) !important; color: #ffffff !important; } .nav-user .dropdown-menu .dropdown-divider { border-color: var(--searm-medium-gray) !important; } /* Search button styling */ .navbar-custom .app-search .btn { background-color: #ffffff !important; border-color: #ffffff !important; color: #036E54 !important; } .navbar-custom .app-search .btn:hover { background-color: #f0f0f0 !important; border-color: #f0f0f0 !important; color: #036E54 !important; } /* Notification badge styling */ .navbar-custom .noti-icon-badge { background-color: #ffffff !important; color: #036E54 !important; } /* Menu toggle button styling */ .navbar-custom .button-toggle-menu { color: #ffffff !important; } .navbar-custom .button-toggle-menu:hover { color: #e0e0e0 !important; } .leftside-menu { background-color: var(--searm-dark-gray); } .side-nav .side-nav-link { color: var(--searm-light-gray); } .side-nav .side-nav-link:hover, .side-nav .side-nav-link.active { color: var(--searm-green); } .side-nav-title { color: var(--searm-light-gray); font-family: var(--font-archivo); font-weight: 600; } /* Topbar user dropdown styling */ .nav-user { background-color: var(--searm-dark-gray) !important; } .nav-user .account-user-avatar .avatar-sm { background-color: var(--searm-green) !important; } .profile-dropdown .dropdown-header { background-color: var(--searm-off-white); color: var(--searm-dark-gray); } /* Content area styling */ .content-page { background-color: var(--searm-off-white); } .card { border-color: var(--searm-very-light-gray); } .card-header { background-color: white; border-bottom-color: var(--searm-very-light-gray); } /* Form styling */ .form-control:focus { border-color: var(--searm-green); box-shadow: 0 0 0 0.2rem rgba(0, 204, 153, 0.25); } .btn-primary { background-color: var(--searm-green); border-color: var(--searm-green); } .btn-primary:hover { background-color: var(--searm-dark-green); border-color: var(--searm-dark-green); } .btn-secondary { background-color: var(--searm-blue); border-color: var(--searm-blue); } .btn-secondary:hover { background-color: var(--searm-dark-blue); border-color: var(--searm-dark-blue); } /* Page title styling */ .page-title-box .page-title { font-family: var(--font-satoshi); font-weight: 900; letter-spacing: var(--tracking-page-header); text-transform: uppercase; } /* Header title styling */ .header-title { font-family: var(--font-satoshi); font-weight: 700; color: var(--searm-dark-gray); } /* Table styling */ .table th { font-family: var(--font-satoshi); font-weight: 700; color: var(--searm-dark-gray); } .table td { font-family: var(--font-satoshi); font-weight: 400; } /* Avatar styling */ .avatar-title { font-family: var(--font-satoshi); font-weight: 600; background-color: var(--searm-dark-green) !important; color: #fff !important; } /* Logo styling */ .logo img { max-width: 100%; height: auto; display: block; padding:10px; } .logo-topbar img { max-width: 100%; height: auto; display: block; } /* Affiliate name display in topbar */ .topbar h3.text-white { font-family: var(--font-satoshi); font-weight: 600; font-size: 1.2rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); margin: 0; padding: 0; line-height: 1.2; display: flex; align-items: center; height: 100%; } /* Ensure the affiliate name container is properly aligned */ .topbar .d-none.d-lg-block { display: flex !important; align-items: center; height: 100%; } /* Fix CSS conflicts with form fields */ #affiliate_status, #user_status { display: block !important; visibility: visible !important; opacity: 1 !important; } /* Global badge font size increase by 25% (0.75em * 1.25 = 0.9375em) */ :root, [data-bs-theme=light], [data-bs-theme=dark] { --ct-badge-font-size: 0.9375em !important; } /* Direct badge styling override */ .badge { font-size: 0.9375em !important; } /* User Avatar Styles */ .user-avatar { /* Clean avatar styling without borders or shadows */ } .user-avatar img { /* Ensure perfect circle for images */ border-radius: 50% !important; } .user-avatar .rounded-circle { /* Ensure perfect circle for initials containers */ border-radius: 50% !important; aspect-ratio: 1; } /* Avatar size variations */ .avatar-xs { width: 24px; height: 24px; } .avatar-sm { width: 32px; height: 32px; } .avatar-md { width: 48px; height: 48px; } .avatar-lg { width: 64px; height: 64px; } .avatar-xl { width: 80px; height: 80px; }