/* --- Material You Inspired Theme --- */ /* Suggest loading a Material You-friendly font like Roboto Flex or Manrope */ /* Uncomment @import in or link fonts directly */ :root { /* --- M3 Color Palette Simulation (Example - ADJUST TO SALAMA BRAND) --- */ /* Using Salama's blue as the primary seed */ --m3-color-primary: #005a9e; /* Salama's Blue */ --m3-color-on-primary: #ffffff; --m3-color-primary-container: #d0e4ff; /* Light blue container */ --m3-color-on-primary-container: #001c3b; /* Dark blue text on light container */ --m3-color-secondary: #535f70; /* Neutral secondary */ --m3-color-on-secondary: #ffffff; --m3-color-secondary-container: #d7e3f8; /* Lighter neutral container */ --m3-color-on-secondary-container: #101c2b; --m3-color-tertiary: #6b5778; /* Example accent */ --m3-color-on-tertiary: #ffffff; --m3-color-tertiary-container: #f3daff; --m3-color-on-tertiary-container: #251431; --m3-color-error: #ba1a1a; --m3-color-on-error: #ffffff; --m3-color-error-container: #ffdad6; --m3-color-on-error-container: #410002; --m3-color-background: #fdfcff; /* Slightly off-white */ --m3-color-on-background: #1a1c1e; --m3-color-surface: #fdfcff; /* Cards, modals etc. */ --m3-color-on-surface: #1a1c1e; --m3-color-surface-variant: #dfe3eb; /* Subtle borders, dividers */ --m3-color-on-surface-variant: #43474e; --m3-color-outline: #73777f; --m3-color-shadow: #000000; /* --- Bootstrap Variable Overrides --- */ --bs-primary: var(--m3-color-primary); --bs-primary-rgb: 0, 90, 158; /* Need RGB for Bootstrap opacity utilities */ --bs-secondary: var(--m3-color-secondary); --bs-secondary-rgb: 83, 95, 112; --bs-light: var(--m3-color-surface); --bs-light-rgb: 253, 252, 255; --bs-dark: var(--m3-color-on-background); /* Using dark text color as BS dark */ --bs-dark-rgb: 26, 28, 30; --bs-body-color: var(--m3-color-on-background); --bs-body-bg: var(--m3-color-background); /* Apply suggested font - uncomment line below if loading font */ /* --bs-body-font-family: 'Roboto Flex', sans-serif; */ --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Bootstrap default fallback */ /* --- Rounding --- */ --bs-border-radius: 0.75rem; /* Default rounding (medium) */ --bs-border-radius-sm: 0.5rem; /* Small rounding */ --bs-border-radius-lg: 1rem; /* Large rounding */ --bs-border-radius-xl: 1.25rem; /* Extra large */ --bs-border-radius-pill: 50rem; /* Keep pill shape */ /* --- Shadows (Softer) --- */ /* Add RGB version of shadow color if needed, defaulting to black */ --m3-color-shadow-rgb: 0, 0, 0; --bs-box-shadow-sm: 0 1px 3px 0 rgba(var(--m3-color-shadow-rgb, 0, 0, 0), 0.1), 0 1px 2px -1px rgba(var(--m3-color-shadow-rgb, 0, 0, 0), 0.1); --bs-box-shadow: 0 4px 6px -1px rgba(var(--m3-color-shadow-rgb, 0, 0, 0), 0.1), 0 2px 4px -2px rgba(var(--m3-color-shadow-rgb, 0, 0, 0), 0.1); --bs-box-shadow-lg: 0 10px 15px -3px rgba(var(--m3-color-shadow-rgb, 0, 0, 0), 0.1), 0 4px 6px -4px rgba(var(--m3-color-shadow-rgb, 0, 0, 0), 0.1); /* Custom properties for easier use (optional) */ --salama-primary: var(--m3-color-primary); --salama-secondary: var(--m3-color-secondary); /* Adjust if needed */ --salama-dark: #003366; /* Keep a darker blue if needed for contrast */ } body { font-family: var(--bs-body-font-family); /* Ensure font applies */ background-color: var(--bs-body-bg); color: var(--bs-body-color); } /* --- Component Adjustments --- */ /* Top Bar */ .top-bar { background-color: var(--m3-color-surface-variant); /* Use surface variant */ padding: 0.5rem 0; font-size: 0.9rem; border-bottom: 1px solid var(--m3-color-outline); /* Subtle border */ } .top-bar a { color: var(--m3-color-on-surface-variant); /* Appropriate text color */ text-decoration: none; margin: 0 10px; transition: color 0.2s ease; } .top-bar a:hover { color: var(--m3-color-primary); } .lang-switch a { font-weight: bold; } .lang-switch .active { color: var(--m3-color-primary); } /* Navbar */ .navbar { /* background-color: var(--m3-color-surface) !important; */ /* Ensure surface color if needed, often white/light */ box-shadow: var(--bs-box-shadow-sm); /* Softer shadow */ transition: background-color 0.3s ease, box-shadow 0.3s ease; padding-top: 0.75rem; padding-bottom: 0.75rem; } .navbar.scrolled { box-shadow: var(--bs-box-shadow); /* Slightly stronger shadow on scroll */ background-color: rgba(255, 255, 255, 0.85); /* Example: Slightly transparent white bg on scroll */ backdrop-filter: blur(10px); } .navbar-brand img { max-height: 40px; } .nav-active { color: var(--m3-color-primary) !important; } .navbar .btn { border-radius: var(--bs-border-radius-pill); /* Pill shape for buttons in nav */ padding: 0.5rem 1.25rem; /* Slightly larger padding */ font-weight: 500; } .nav-link { font-weight: 500; color: var(--m3-color-on-surface-variant); } .nav-link:hover, .nav-link.active { color: var(--m3-color-primary); } .dropdown-menu { border-radius: var(--bs-border-radius-lg); /* Rounded dropdown */ box-shadow: var(--bs-box-shadow); border: 1px solid var(--m3-color-surface-variant); } .dropdown-item { padding: 0.5rem 1.2rem; } .page-header { background-color: var(--m3-color-primary); padding: 2rem 0; margin-bottom: 3rem; color: var(--m3-color-on-primary); } .page-header .breadcrumb li a, .page-header .breadcrumb li::before { color: #ffeb3b; } .page-header .breadcrumb .active { color: #FFFFFF; } /* About section */ .page-aheader { background-color: var(--m3-color-surface-variant); padding: 4rem 0; text-align: center; } .page-aheader h1 { color: var(--m3-color-primary); font-weight: 700; } .about-section { padding: 3rem 0; } .about-section .logo-wrapper img { max-width: 100%; height: auto; border-radius: var(--bs-border-radius-lg); } /* Stats Section */ .stats-section { background-color: var(--m3-color-surface-variant); padding: 5rem 0; } .stat-card { background-color: var(--m3-color-surface); padding: 2rem 1.5rem; text-align: center; border-radius: var(--bs-border-radius-lg); box-shadow: var(--bs-box-shadow-sm); transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; } .stat-card:hover { transform: translateY(-5px); box-shadow: var(--bs-box-shadow); } .stat-number { font-size: 2.5rem; font-weight: 700; color: var(--m3-color-primary); display: block; margin-bottom: 0.5rem; } .stat-label { font-size: 1rem; color: var(--m3-color-on-surface-variant); } /* Director's Quote Section */ .director-quote-section { padding: 5rem 0; } .director-quote { background-color: var(--m3-color-primary); color: var(--m3-color-on-primary); padding: 3rem; border-radius: var(--bs-border-radius-xl); position: relative; overflow: hidden; border-left: 5px solid var(--m3-color-primary-container); box-shadow: var(--bs-box-shadow); } .director-quote::before { content: "\f10d"; /* Font Awesome quote-left */ font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 1rem; left: 1.5rem; font-size: 4rem; color: rgba(255, 255, 255, 0.1); } .director-quote p { font-size: 1.15rem; line-height: 1.8; position: relative; z-index: 1; } .director-quote .d-footer { font-size: 1.1rem; font-weight: 600; margin-top: 1.5rem; text-align: right; position: relative; z-index: 1; background-color: transparent !important; color: #ffeb3b !important; padding-top: 10px !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; border-top: 1px solid #ffeb3b; } /* Partner Section */ .partner-section { padding: 5rem 0; background-color: #212529; /* Dark background */ color: var(--m3-color-background); } .partner-section h2 { color: var(--m3-color-primary-container); } .partner-section .logo-wrapper { background-color: rgb(0, 0, 0); /* White background for logo visibility */ padding: 2rem; display: flex; align-items: center; justify-content: center; } /* End About */ /* Centres Section */ .page-cheader { background-color: var(--m3-color-primary); padding: 5rem 0; text-align: center; color: var(--m3-color-on-primary); } .page-cheader h1 { font-weight: 700; } .page-cheader .lead { color: rgba(255, 255, 255, 0.85); } /* Search form inside header */ .page-cheader .search-form { max-width: 600px; margin: 2rem auto 0; } .page-cheader .form-control { border-radius: var(--bs-border-radius-pill); padding: 0.8rem 1.5rem; border: none; } .page-cheader .btn { padding: 0.8rem 1.8rem; } /* Highlights section */ .highlights-section { padding: 5rem 0; background-color: var(--m3-color-surface-variant); } .highlight-card { text-align: center; padding: 1rem; } .highlight-icon { font-size: 2.5rem; color: var(--m3-color-primary); margin-bottom: 1rem; } .highlight-card h4 { font-weight: 500; font-size: 1.2rem; color: var(--m3-color-on-surface-variant); margin-bottom: 0.5rem; } .highlight-card p { color: var(--m3-color-on-surface-variant); opacity: 0.85; font-size: 0.95rem; } /* Map and list section */ .centers-map-section { padding: 5rem 0; } .region-list .list-group-item { padding: 1rem 1.25rem; border: 1px solid var(--m3-color-surface-variant); border-radius: var(--bs-border-radius) !important; /* Override BS specificity */ margin-bottom: 0.5rem; font-weight: 500; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .region-list .list-group-item:hover, .region-list .list-group-item.active { background-color: var(--m3-color-primary-container); border-color: var(--m3-color-primary-container); color: var(--m3-color-on-primary-container); } .region-color-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 4px; margin-right: 1rem; vertical-align: middle; } .map-container { position: relative; background-color: var(--m3-color-surface); border-radius: var(--bs-border-radius-lg); padding: 1rem; box-shadow: var(--bs-box-shadow); height: 100%; display: flex; align-items: center; justify-content: center; } .map-container img { max-width: 100%; height: auto; } #searchResults { max-height: 300px; overflow-y: auto; border: 1px solid var(--m3-color-outline); border-radius: var(--bs-border-radius); margin-top: 0.25rem; box-shadow: var(--bs-box-shadow-sm); } #searchResults .list-group-item { cursor: pointer; background-color: var(--m3-color-surface); color: var(--m3-color-on-surface); } #searchResults .list-group-item:hover { background-color: var(--m3-color-surface-variant); } /* End Centres */ /* Centres Section */ .page-rheader { background-color: var(--m3-color-primary); padding: 4rem 0; text-align: center; color: var(--m3-color-on-primary); } .page-rheader h1 { font-weight: 700; } .page-rheader h2 { color: var(--m3-color-primary-container); font-size: 1.5rem; font-weight: 400; } .centers-list-section { padding: 5rem 0; background-color: var(--m3-color-surface-variant); min-height: 60vh; } /* Filter Bar */ .filter-bar { background-color: var(--m3-color-surface); padding: 1rem; border-radius: var(--bs-border-radius-lg); box-shadow: var(--bs-box-shadow); margin-bottom: 3rem; } .filter-bar .form-control, .filter-bar .form-select { border-radius: var(--bs-border-radius); border: 1px solid var(--m3-color-outline); } /* Center Card Styles */ .center-card-wrapper { position: relative; margin-top: 40px; /* Space for the floating icon */ } .center-icon { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; background-color: var(--m3-color-primary); color: var(--m3-color-on-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; box-shadow: var(--bs-box-shadow); z-index: 2; } .center-card { border: none; border-radius: var(--bs-border-radius-lg); box-shadow: var(--bs-box-shadow); background-color: var(--m3-color-surface); transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; display: flex; flex-direction: column; text-align: center; } .center-card:hover { transform: translateY(-8px); box-shadow: var(--bs-box-shadow-lg); } .center-card .card-body { padding: 3rem 1.5rem 1.5rem 1.5rem; /* More top padding to clear the icon */ flex-grow: 1; display: flex; flex-direction: column; } .center-card .card-title { font-weight: 600; color: var(--m3-color-on-surface); margin-bottom: 1.5rem; } .center-card .info-list { list-style: none; padding: 0; margin: 0; text-align: left; font-size: 0.9rem; color: var(--m3-color-on-surface-variant); flex-grow: 1; } .center-card .info-list li { margin-bottom: 0.75rem; display: flex; align-items: flex-start; } .center-card .info-list i { color: var(--m3-color-primary); margin-right: 0.75rem; margin-top: 4px; width: 16px; text-align: center; } .center-card .badge { font-size: 0.8rem; font-weight: 500; padding: 0.4em 0.8em; } .center-card .card-footer { background-color: transparent; border-top: 1px solid var(--m3-color-surface-variant); padding: 1rem 1.5rem; } .center-card .btn { width: 100%; } /* End Centre Section */ /* Centre Detail Section */ .center-detail-section { padding: 4rem 0; } .detail-card { background-color: var(--m3-color-surface); border: 1px solid var(--m3-color-surface-variant); border-radius: var(--bs-border-radius-lg); margin-bottom: 2rem; box-shadow: var(--bs-box-shadow-sm); } .detail-card .card-header { background-color: var(--m3-color-surface); border-bottom: 1px solid var(--m3-color-surface-variant); font-weight: 600; font-size: 1.1rem; padding: 1rem 1.5rem; } .detail-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--m3-color-surface-variant); flex-wrap: wrap; /* For responsiveness */ } .detail-card .list-group-item:last-child { border-bottom: none; } .detail-label { display: flex; align-items: center; font-weight: 500; color: var(--m3-color-on-surface-variant); margin-right: 1rem; } .detail-label i { color: var(--m3-color-primary); width: 24px; text-align: center; margin-right: 0.75rem; } .detail-value { font-weight: 500; color: var(--m3-color-on-surface); text-align: right; } .detail-value a { color: inherit; text-decoration: none; } .detail-value a:hover { color: var(--m3-color-primary); text-decoration: underline; } .detail-value .badge { font-size: 0.9rem; padding: 0.5em 0.9em; } /* Map and Actions */ .map-icontainer { border-radius: var(--bs-border-radius-lg); overflow: hidden; box-shadow: var(--bs-box-shadow); position: relative; width: 100%; padding-top: 75%; /* 4:3 Aspect Ratio */ } .map-icontainer iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: 0; } .action-box { margin-top: 2rem; } /* End Centre Detail Section */ /* Point Section */ .control-points-accordion .accordion-item { background-color: var(--m3-color-surface); border: 1px solid var(--m3-color-surface-variant); border-radius: var(--bs-border-radius-lg) !important; margin-bottom: 1rem; box-shadow: var(--bs-box-shadow-sm); } .control-points-accordion .accordion-button { background-color: var(--m3-color-surface); color: var(--m3-color-on-surface); font-weight: 600; font-size: 1.2rem; padding: 1.25rem 1.5rem; border-radius: var(--bs-border-radius-lg) !important; } .control-points-accordion .accordion-button:not(.collapsed) { background-color: var(--m3-color-primary-container); color: var(--m3-color-on-primary-container); box-shadow: none; } .control-points-accordion .accordion-button:focus { box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.2); } .control-points-accordion .accordion-body { padding: 1rem 2rem 2rem 2rem; } .accordion-category-number { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background-color: var(--m3-color-primary-container); color: var(--m3-color-on-primary-container); border-radius: 50%; font-weight: 700; margin-right: 1rem; transition: background-color 0.2s ease, color 0.2s ease; } .accordion-button:not(.collapsed) .accordion-category-number { background-color: var(--m3-color-primary); color: var(--m3-color-on-primary); } /* Accordion Content Styling */ .control-point-group { margin-bottom: 1.5rem; } .control-point-group h5 { font-weight: 600; color: var(--m3-color-primary); margin-bottom: 0.75rem; } .control-point-list { list-style: none; padding-left: 0; } .control-point-list li { background-color: var(--m3-color-surface-variant); padding: 0.75rem 1.25rem; border-radius: var(--bs-border-radius); margin-bottom: 0.5rem; color: var(--m3-color-on-surface-variant); position: relative; padding-left: 2.5rem; } .control-point-list li::before { content: "\f00c"; /* Font Awesome check icon */ font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--m3-color-primary); } /* End Point Section*/ /* Periodicite Section */ .periodicity-table { border-radius: var(--bs-border-radius-lg); overflow: hidden; box-shadow: var(--bs-box-shadow); } .periodicity-table .table { margin-bottom: 0; /* Remove default bootstrap margin */ font-size: 0.95rem; } .periodicity-table thead th { background-color: var(--m3-color-primary); color: var(--m3-color-on-primary); border: none; padding: 1rem 1.25rem; } .periodicity-table tbody tr { background-color: var(--m3-color-surface); border-bottom: 1px solid var(--m3-color-surface-variant); } .periodicity-table tbody tr:last-child { border-bottom: none; } .periodicity-table tbody td { padding: 1rem 1.25rem; vertical-align: middle; color: var(--m3-color-on-surface-variant); } .periodicity-table tbody td:first-child { font-weight: 500; color: var(--m3-color-on-surface); } /* Info Card Style */ .info-card { background-color: var(--m3-color-primary-container); color: var(--m3-color-on-primary-container); border-radius: var(--bs-border-radius-lg); padding: 1.5rem; margin-bottom: 2rem; } .info-card h5 { font-weight: 600; color: var(--m3-color-on-primary-container); margin-bottom: 1rem; } .info-card ul { padding-left: 1.25rem; margin-bottom: 0; } .info-card ul li { margin-bottom: 0.5rem; line-height: 1.6; } /* Alert Box for Follow-up Visit */ .alert-box { background-color: var(--m3-color-error-container); color: var(--m3-color-on-error-container); border-radius: var(--bs-border-radius-lg); padding: 2rem; margin-top: 3rem; display: flex; align-items: flex-start; } .alert-box-icon { font-size: 2rem; margin-right: 1.5rem; } .alert-box h4 { font-weight: 600; color: var(--m3-color-on-error-container); margin-top: 0; margin-bottom: 0.5rem; } /* End Periodicite Section */ /* Cyclemoteur Section */ .procedure-container { background-color: var(--m3-color-surface); border-radius: var(--bs-border-radius-lg); padding: 2rem; box-shadow: var(--bs-box-shadow-sm); } /* Tab Navigation */ .procedure-nav { margin-bottom: 2rem; border-bottom: 1px solid var(--m3-color-surface-variant); } .procedure-nav .nav-link { color: var(--m3-color-on-surface-variant); font-weight: 500; border: none; border-bottom: 3px solid transparent; border-radius: 0; padding: 0.75rem 1.25rem; } .procedure-nav .nav-link.active, .procedure-nav .nav-link:hover { color: var(--m3-color-primary); border-bottom-color: var(--m3-color-primary); background: none; } /* Content Styling */ .tab-content h3 { font-weight: 600; color: var(--m3-color-primary); margin-top: 1.5rem; margin-bottom: 1rem; } .tab-content h4 { font-weight: 500; color: var(--m3-color-on-surface); margin-top: 1.5rem; margin-bottom: 1rem; } .tab-content ul { list-style: none; padding-left: 0; } .tab-content ul li { position: relative; padding-left: 1.75rem; margin-bottom: 0.5rem; } .tab-content ul li::before { content: "\f101"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 4px; color: var(--m3-color-primary); } /* Definition Tab */ .definition-card { background-color: var(--m3-color-surface); border: 1px solid var(--m3-color-surface-variant); padding: 1.5rem; border-radius: var(--bs-border-radius); margin-bottom: 1rem; } .definition-card strong { color: var(--m3-color-primary); display: block; margin-bottom: 0.5rem; font-size: 1.1rem; } /* TPE Tab */ .tpe-image { border-radius: var(--bs-border-radius-lg); box-shadow: var(--bs-box-shadow-sm); max-width: 100%; height: auto; } /* Duplicata/Mutation Tab */ .procedure-card { border-radius: var(--bs-border-radius-lg); border: none; box-shadow: var(--bs-box-shadow-sm); height: 100%; } .procedure-card .card-header { background-color: var(--m3-color-primary); color: var(--m3-color-on-primary); font-weight: 600; text-align: center; } /* Tarifications Tab */ .pricing-table { border-radius: var(--bs-border-radius-lg); overflow: hidden; box-shadow: var(--bs-box-shadow-sm); } .pricing-table .table { margin-bottom: 0; } .pricing-table thead th { background-color: var(--m3-color-primary); color: var(--m3-color-on-primary); } .pricing-table tbody td { vertical-align: middle; } .pricing-table .table-footer { background-color: var(--m3-color-surface-variant); font-size: 0.85rem; padding: 1rem; color: var(--m3-color-on-surface-variant); } /* End Cyclemoteur Section */ /* Tarification Section */ .page-trheader { padding: 2rem 0; text-align: center; } .page-trheader h1 { color: var(--m3-color-primary); font-weight: 700; } .page-tr h1::after { content: ''; display: block; width: 60px; height: 3px; background-color: var(--m3-color-primary); margin: 1rem auto 0; } .pricing-card { background-color: var(--m3-color-surface); border-radius: var(--bs-border-radius-lg); box-shadow: var(--bs-box-shadow); padding: 2rem 1.5rem; text-align: center; height: 100%; display: flex; flex-direction: column; } .pricing-card h3 { font-size: 1.25rem; font-weight: 600; color: var(--m3-color-on-surface); } .pricing-card .text-muted { color: var(--m3-color-on-surface-variant) !important; font-size: 0.9rem; } .price-section { padding: 1.5rem 0; } .price-item { margin-bottom: 1.5rem; } .price-item .price-label { font-weight: 500; color: var(--m3-color-on-surface-variant); } .price-item .price-amount { font-size: 2.75rem; font-weight: 700; color: var(--m3-color-primary); line-height: 1.1; } .price-item .price-currency { font-size: 1.5rem; font-weight: 500; margin-left: 0.25rem; } .tax-section { border-top: 1px solid var(--m3-color-surface-variant); padding-top: 1.5rem; flex-grow: 1; } .tax-section h5 { font-weight: 600; font-size: 1rem; color: var(--m3-color-on-surface-variant); margin-bottom: 1rem; } .tax-item p { margin-bottom: 0.25rem; } .tax-item .tax-price { font-size: 1.5rem; font-weight: 600; color: var(--m3-color-on-surface); } .tax-item .decree-info { font-size: 0.8rem; color: var(--m3-color-outline); } /* Special highlighted tax box */ .highlighted-tax-box { background-color: var(--m3-color-primary-container); border-radius: var(--bs-border-radius); padding: 1.5rem; margin-top: 1rem; } .highlighted-tax-box h5 { color: var(--m3-color-on-primary-container); } .highlighted-tax-box p { color: var(--m3-color-on-primary-container); } .highlighted-tax-box .decree-info { opacity: 0.7; } .fiscal-power-grid { margin-top: 1rem; } .fiscal-power-item { background-color: var(--m3-color-primary); color: var(--m3-color-on-primary); padding: 0.75rem; border-radius: var(--bs-border-radius); margin-bottom: 0.5rem; } .fiscal-power-item .power-range { font-size: 0.85rem; display: block; opacity: 0.8; } .fiscal-power-item .power-price { font-size: 1.25rem; font-weight: 600; } /* End Tarification Section */ /* --- Page Specific Styles --- */ .simulator-section { min-height: 60vh; } /* Modal Styling */ .modal-content { background-color: var(--m3-color-surface); border: none; border-radius: var(--bs-border-radius-lg); box-shadow: var(--bs-box-shadow-lg); } .modal-header { background-color: var(--m3-color-surface-variant); border-bottom: 1px solid var(--m3-color-outline); } .modal-title { color: var(--m3-color-on-surface-variant); font-weight: 600; } .contact-section { padding: 4rem 0; } .contact-info-item { display: flex; align-items: flex-start; margin-bottom: 2.5rem; } .info-icon { flex-shrink: 0; width: 56px; height: 56px; background-color: var(--m3-color-primary-container); color: var(--m3-color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-right: 1.5rem; } .info-text h4 { font-size: 1.2rem; font-weight: 600; color: var(--m3-color-on-surface); margin-bottom: 0.5rem; } .info-text p, .info-text a { color: var(--m3-color-on-surface-variant); margin-bottom: 0.25rem; text-decoration: none; display: block; } .info-text a:hover { color: var(--m3-color-primary); text-decoration: underline; } /* Contact Form Column */ .contact-form-wrapper { background-color: var(--m3-color-surface); padding: 2.5rem; border-radius: var(--bs-border-radius-lg); box-shadow: var(--bs-box-shadow); } .form-control { background-color: var(--m3-color-surface-variant); border: 1px solid var(--m3-color-outline); padding: 0.8rem 1rem; } .form-control:focus { background-color: var(--m3-color-surface); border-color: var(--m3-color-primary); box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.2); } .btn-primary { background-color: var(--m3-color-primary); color: var(--m3-color-on-primary); padding: 0.75rem 2rem; } /* Map Section */ .map-ccontainer { border-radius: var(--bs-border-radius-lg); overflow: hidden; box-shadow: var(--bs-box-shadow); margin-top: 4rem; } .map-ccontainer iframe { display: block; border: 0; width: 100%; height: 450px; } /* Result Area */ #resultArea { background-color: var(--m3-color-primary-container); color: var(--m3-color-on-primary-container); border-radius: var(--bs-border-radius); padding: 1.5rem; margin-top: 1.5rem; text-align: center; } #resultArea .result-label { font-weight: 500; } #resultArea .price-display { font-size: 2.5rem; font-weight: 700; color: var(--m3-color-primary); } /* --- Page Specific Styles --- */ .login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem 0; } .login-card { background-color: var(--m3-color-surface); border-radius: var(--bs-border-radius-lg); box-shadow: var(--bs-box-shadow); padding: 2.5rem; width: 100%; max-width: 450px; } .login-header { text-align: center; margin-bottom: 2rem; } .login-icon { width: 64px; height: 64px; background-color: var(--m3-color-primary-container); color: var(--m3-color-primary); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem; margin-bottom: 1rem; } .login-header h1 { font-weight: 700; color: var(--m3-color-on-surface); } .login-header p { color: var(--m3-color-on-surface-variant); } /* Form Styling */ .form-floating > .form-control, .form-floating > .form-select { height: calc(3.5rem + 2px); padding: 1rem 1rem; } .form-floating > label { padding: 1rem 1rem; } .password-toggle-btn { cursor: pointer; border: none; background: none; color: var(--m3-color-outline); } .btn-primary { padding: 0.8rem; font-weight: 600; } .form-check-label { color: var(--m3-color-on-surface-variant); } .forgot-password-link { font-size: 0.9rem; text-decoration: none; color: var(--m3-color-primary); } .forgot-password-link:hover { text-decoration: underline; } .signup-link { text-align: center; margin-top: 1.5rem; font-size: 0.9rem; color: var(--m3-color-on-surface-variant); } .signup-link a { font-weight: 600; text-decoration: none; color: var(--m3-color-primary); } /* --- Dashboard Specific Styles --- */ .dashboard-header { background-color: var(--m3-color-primary); box-shadow: var(--bs-box-shadow-sm); color: var(--m3-color-on-primary); } .dashboard-header .navbar-brand { font-weight: 600; color: var(--m3-color-on-primary); } .dashboard-header .navbar-text { color: var(--m3-color-on-primary); } .dashboard-header .navbar-nav .nav-link { font-weight: 500; color: var(--m3-color-on-secondary); } .dashboard-header .navbar-nav .nav-link.active, .dashboard-header .navbar-nav .nav-link:hover { color: var(--m3-color-primary-container); /* Use the main theme color */ } .dashboard-header .btn-logout { background-color: var(--m3-color-primary-container); color: var(--m3-color-on-primary-container); } .dashboard-title-wrapper { display: flex; align-items: center; } .dashboard-title-btn { text-decoration: none; color: inherit; background: none; border: none; padding: 0; text-align: left; transition: opacity 0.2s ease; } .dashboard-title-btn:hover { opacity: 0.8; } .dashboard-title { color: var(--m3-color-primary); font-weight: 700; } .center-accordion .accordion-item { background-color: var(--m3-color-surface); border: none; border-radius: var(--bs-border-radius-lg) !important; margin-bottom: 1.5rem; box-shadow: var(--bs-box-shadow-sm); overflow: hidden; } .center-accordion .accordion-button { font-weight: 600; font-size: 1.2rem; color: var(--m3-color-on-surface); background-color: var(--m3-color-surface); flex-wrap: wrap; gap: 1rem; } .center-accordion .accordion-button:not(.collapsed) { color: var(--m3-color-on-primary-container); background-color: var(--m3-color-primary-container); box-shadow: inset 0 -1px 0 var(--m3-color-outline); } .center-accordion .accordion-button:focus { box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2); } .center-accordion .accordion-body { padding: 1.5rem; } .accordion-button-details { font-size: 0.9rem; font-weight: 400; color: var(--m3-color-on-surface-variant); } .accordion-button-details i { color: var(--m3-color-primary); } .db-stats-section h5 { font-weight: 600; color: var(--m3-color-on-surface-variant); margin-bottom: 1rem; font-size: 1rem; } .stats-list .list-group-item { background-color: var(--m3-color-surface-variant); border-color: var(--m3-color-outline); color: var(--m3-color-on-surface-variant); } .stats-list .badge { background-color: var(--m3-color-primary) !important; color: var(--m3-color-on-primary) !important; } .center-actions { border-top: 1px solid var(--m3-color-surface-variant); padding-top: 1.5rem; margin-top: 1.5rem; } .center-actions .btn { border-radius: var(--bs-border-radius-pill); font-weight: 500; padding: 0.6rem 1.25rem; box-shadow: var(--bs-box-shadow-sm); border: none; } .center-actions .btn-primary { background-color: var(--m3-color-primary); color: var(--m3-color-on-primary); } /* Modal Styling */ .modal-content { background-color: var(--m3-color-surface); border: none; border-radius: var(--bs-border-radius-lg); box-shadow: var(--bs-box-shadow-lg); } .modal-header { background-color: var(--m3-color-surface-variant); border-bottom: 1px solid var(--m3-color-outline); } .modal-title { color: var(--m3-color-on-surface-variant); font-weight: 600; } .data-card .btn { border-radius: var(--bs-border-radius-pill); font-weight: 500; padding: 0.6rem 1.25rem; box-shadow: var(--bs-box-shadow-sm); border: none; } .data-card .btn-primary { background-color: var(--m3-color-primary); color: var(--m3-color-on-primary); } .data-card .btn-secondary { background-color: var(--m3-color-secondary); color: var(--m3-color-on-secondary); } .data-card .btn-success { background-color: #198754; color: #fff; } /* --- Page Specific Styles --- */ .data-card { background-color: var(--m3-color-surface); border-radius: var(--bs-border-radius-lg); padding: 2rem; box-shadow: var(--bs-box-shadow-sm); } .data-card-header h2 { color: var(--m3-color-primary); font-weight: 700; } .chart-container { padding: 1.5rem; border: 1px solid var(--m3-color-surface-variant); border-radius: var(--bs-border-radius-lg); } .chart-container h5 { font-weight: 600; color: var(--m3-color-on-surface-variant); text-align: center; margin-bottom: 1.5rem; } .line-chart-wrapper { position: relative; height: 400px; } .status-bar { color: var(--m3-color-on-surface-variant); font-size: 0.9rem; font-weight: 500; } .status-bar .data-updated { color: #198754; } .status-bar .data-error { color: #f03a3a; } .filter-toolbar { padding: 1rem 0; } /* Table Styling */ .controls-table thead th { background-color: var(--m3-color-surface-variant); color: var(--m3-color-on-surface-variant); border-bottom: 2px solid var(--m3-color-outline); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; } .controls-table tbody tr { font-size: 13px !important; } .controls-table tbody td { vertical-align: middle; color: var(--m3-color-on-surface-variant); } .controls-table tbody tr:hover { background-color: var(--m3-color-surface-variant); } .controls-table .result-badge { font-weight: 600; } /* --- Charge --- */ .data-charge .dashboard-header { background-color: var(--m3-color-surface); box-shadow: var(--bs-box-shadow-sm); } .data-charge .dashboard-header .navbar-brand { font-weight: 600; } .data-charge .data-card { background-color: var(--m3-color-surface); border-radius: var(--bs-border-radius-lg); padding: 2rem; box-shadow: var(--bs-box-shadow-sm); } .data-charge .data-card-header h2 { color: var(--m3-color-primary); font-weight: 700; } .data-charge .form-section { background-color: var(--m3-color-surface-variant); padding: 1.5rem; border-radius: var(--bs-border-radius-lg); } /* Table Styling */ .data-charge .list-header { margin-top: 2.5rem; margin-bottom: 1.5rem; } .data-charge .list-header h4 { color: var(--m3-color-on-surface); font-weight: 600; } .data-charge .list-header .badge { background-color: var(--m3-color-secondary-container) !important; color: var(--m3-color-on-secondary-container) !important; font-size: 1rem; } .data-charge .charges-table thead th { background-color: var(--m3-color-surface-variant); color: var(--m3-color-on-surface-variant); border-bottom: 2px solid var(--m3-color-outline); font-weight: 600; text-transform: uppercase; } .data-charge .charges-table tbody td { vertical-align: middle; color: var(--m3-color-on-surface-variant); } .data-charge .charges-table .empty-row td { text-align: center; padding: 2rem; } /* Versement */ .data-vers .dashboard-header { background-color: var(--m3-color-surface); box-shadow: var(--bs-box-shadow-sm); } .data-vers .dashboard-header .navbar-brand { font-weight: 600; } .data-vers .data-card { background-color: var(--m3-color-surface); border-radius: var(--bs-border-radius-lg); padding: 2rem; box-shadow: var(--bs-box-shadow-sm); } .data-vers .data-card-header h2 { color: var(--m3-color-primary); font-weight: 700; } .data-vers .form-section { background-color: var(--m3-color-surface-variant); padding: 1.5rem; border-radius: var(--bs-border-radius-lg); } /* Table Styling */ .data-vers-header { padding: 0px !important; } .data-vers .list-header { margin-top: 2.5rem; margin-bottom: 1.5rem; } .data-vers .list-header h4 { color: var(--m3-color-on-surface); font-weight: 600; } .data-vers .list-header .badge { background-color: var(--m3-color-secondary-container) !important; color: var(--m3-color-on-secondary-container) !important; font-size: 1rem; } .data-vers .notifications-table thead th { background-color: var(--m3-color-surface-variant); color: var(--m3-color-on-surface-variant); border-bottom: 2px solid var(--m3-color-outline); font-weight: 600; text-transform: uppercase; } .data-vers .notifications-table tbody td { vertical-align: middle; color: var(--m3-color-on-surface-variant); } .data-vers .notifications-table .empty-row td { text-align: center; padding: 2rem; } .sl-pagination { display: flex; justify-content: center; margin-top: 2rem; } .sl-pagination .pagination li > a, .sl-pagination .pagination li > span { border: none; background-color: transparent; color: var(--m3-color-on-surface-variant); font-weight: 600; border-radius: var(--bs-border-radius-pill); /* Pill shape */ margin: 0 0.25rem; min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0 0.75rem; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; } .sl-pagination .pagination li > a:hover { background-color: var(--m3-color-surface-variant); color: var(--m3-color-on-surface); } .sl-pagination .pagination .active > span { background-color: var(--m3-color-primary); color: var(--m3-color-on-primary); box-shadow: var(--bs-box-shadow-sm); } .sl-pagination .pagination .disabled > span { opacity: 0.5; background-color: transparent; pointer-events: none; } .sl-pagination .pagination a[rel="next"] { font-size: 0; } .sl-pagination .pagination a[rel="next"]::before { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1rem; } .sl-pagination .pagination a[rel="prev"], .sl-pagination .pagination .disabled:first-child > span { font-size: 0; } .sl-pagination .pagination a[rel="prev"]::before, .sl-pagination .pagination .disabled:first-child > span::before { content: "\f053"; /* Font Awesome unicode for chevron-left */ font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1rem; /* Restore font size for the icon */ } .loader-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(253, 252, 255, 0.85); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .loader-overlay.is-loading { opacity: 1; visibility: visible; } .loader-text { font-weight: 500; color: var(--m3-color-on-surface-variant); } /* Hero Section */ .hero-section { position: relative; min-height: 75vh; /* --- IMPORTANT: Replace with actual high-quality image --- */ background: url('https://via.placeholder.com/1920x1080/D0E4FF/001C3B?text=Salama+Hero+Background+(Material)') no-repeat center center; background-size: cover; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6rem 1rem; } .in-data-card { background-color: var(--m3-color-surface); border-radius: var(--bs-border-radius-lg); padding: 1rem; box-shadow: var(--bs-box-shadow-sm); } .in-page-title { color: var(--m3-color-primary); font-weight: 700; margin-bottom: 1.5rem; } .invoice-card { background-color: var(--m3-color-surface); border-radius: var(--bs-border-radius-lg); padding: 2rem; box-shadow: var(--bs-box-shadow-sm); margin-top: 2rem; } .invoice-summary { background-color: var(--m3-color-surface-variant); border-radius: var(--bs-border-radius-lg); padding: 1rem; margin-bottom: 2rem; } .invoice-summary .summary-item { text-align: center; } .invoice-summary .summary-label { font-weight: 600; color: var(--m3-color-on-surface-variant); } .invoice-summary .summary-value { font-size: 1.5rem; font-weight: 700; color: var(--m3-color-primary); } .invoice-section { border-left: 4px solid; padding-left: 1.5rem; margin-bottom: 2rem; } .invoice-section.vl { border-color: #e57373; } .invoice-section.ml { border-color: #ffb74d; } .invoice-section.pl { border-color: #9575cd; } .stat-item { text-align: center; background-color: var(--m3-color-surface-variant); padding: 1rem; border-radius: var(--bs-border-radius-lg); height: 100%; } .stat-label { font-size: 0.85rem; font-weight: 500; color: var(--m3-color-on-surface-variant); display: block; margin-bottom: 0.5rem; } .stat-value { font-size: 1.25rem; font-weight: 600; color: var(--m3-color-on-surface); } .stat-value small { font-size: 0.9rem; font-weight: 400; color: var(--m3-color-on-surface-variant); } .final-totals .list-group-item { background: none; border: none; padding-left: 16px; padding-right: 16px; } .final-totals .list-group-item.total-ttc { background-color: var(--m3-color-primary); color: var(--m3-color-on-primary); border-radius: var(--bs-border-radius-lg); } .final-totals .total-ttc .fw-bold { color: var(--m3-color-on-primary); } .modal-content { background-color: var(--m3-color-surface); border: none; border-radius: var(--bs-border-radius-lg); box-shadow: 0 8px 24px rgba(0,0,0,0.15); } .modal-header { background-color: var(--m3-color-surface-variant); border-bottom: 1px solid var(--m3-color-outline); } .modal-title { color: var(--m3-color-on-surface-variant); font-weight: 600; } /* Custom Table Styling within the Modal */ .modal-table-wrapper { max-height: 50vh; /* Set a max height for the scrollable area */ overflow-y: auto; } .modal-table { margin-bottom: 0; } .modal-table thead { position: sticky; /* This makes the header "stick" to the top of the scrollable container */ top: 0; z-index: 1; } .modal-table thead th { background-color: var(--m3-color-surface-variant); color: var(--m3-color-on-surface-variant); border-bottom: 2px solid var(--m3-color-outline); font-weight: 600; } .modal-table tbody td { vertical-align: middle; color: var(--m3-color-on-surface-variant); padding: 0.8rem 0.75rem; } .modal-table tbody tr { border-bottom: 1px solid var(--m3-color-surface-variant); } .modal-table tbody tr:last-child { border-bottom: none; } .sitemap-section { padding: 4rem 0; } .sitemap-list { list-style: none; padding-left: 0; } .sitemap-list h3 { font-weight: 600; color: var(--m3-color-primary); margin-bottom: 1.5rem; } .sitemap-list li { margin-bottom: 0.75rem; } .sitemap-list a { color: var(--m3-color-on-surface-variant); text-decoration: none; font-weight: 500; transition: color 0.2s ease; } .sitemap-list a:hover { color: var(--m3-color-primary); } .sitemap-list a i { margin-right: 0.75rem; font-size: 0.8em; } /* Nested list for sub-pages */ .sitemap-list ul { list-style: none; padding-left: 1.5rem; margin-top: 0.75rem; } .legal-section { padding: 4rem 0; } .legal-content h2 { font-weight: 600; color: var(--m3-color-primary); margin-top: 2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--m3-color-surface-variant); } .legal-content h2:first-of-type { margin-top: 0; } .legal-content p, .legal-content li { color: var(--m3-color-on-surface-variant); line-height: 1.7; } .legal-content ul { padding-left: 1.5rem; margin-top: 1rem; } .invoice-wrapper { background-color: var(--m3-color-surface); border-radius: var(--bs-border-radius-lg); padding: 2rem; box-shadow: var(--bs-box-shadow-sm); } .invoice-header { border-bottom: 2px solid var(--m3-color-surface-variant); padding-bottom: 2rem; margin-bottom: 2rem; } .invoice-header h2 { font-weight: 700; color: var(--m3-color-on-surface); } .invoice-details p, .recipient-details p { margin-bottom: 0.25rem; color: var(--m3-color-on-surface-variant); } .invoice-details strong { color: var(--m3-color-on-surface); } /* Table Styling */ .invoice-table thead th { background-color: var(--m3-color-surface-variant); color: var(--m3-color-on-surface-variant); font-weight: 600; } .invoice-table .text-end { text-align: right; } .invoice-table .fw-bold { color: var(--m3-color-on-surface); } .invoice-footer { margin-top: 2rem; padding-top: 2rem; border-top: 2px solid var(--m3-color-surface-variant); } .invoice-footer p { color: var(--m3-color-on-surface-variant); font-size: 0.9rem; } .invoice-footer .total-in-words { font-weight: 500; text-transform: uppercase; color: var(--m3-color-on-surface); } /* --- Print-Specific Styles --- */ @media print { body { background-color: white !important; -webkit-print-color-adjust: exact; /* Ensures colors print in Chrome/Safari */ color-adjust: exact; /* Ensures colors print in Firefox */ } .dashboard-header, .invoice-actions, .no-print { display: none !important; } .container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; } .invoice-wrapper { box-shadow: none !important; border: 1px solid var(--m3-color-outline); border-radius: 0; } } .notifications-alert { background-color: var(--m3-color-error-container); color: var(--m3-color-on-error-container); border: none; font-size: 1.5rem; font-weight: 600; text-align: center; } /* Toolbar (Show Entries & Search) */ .dataTables_wrapper .row:first-of-type { padding: 1rem 0; } .dataTables_length label, .dataTables_filter label { color: var(--m3-color-on-surface-variant); font-weight: 500; } .dataTables_length select, .dataTables_filter input { background-color: var(--m3-color-surface-variant); border: 1px solid var(--m3-color-outline); border-radius: var(--bs-border-radius-pill) !important; padding: 0.5rem 1rem; margin: 0 0.5rem; } .dataTables_filter input { min-width: 250px; } /* Table Styling */ .notifications-table thead th { background-color: var(--m3-color-surface-variant); color: var(--m3-color-on-surface-variant); border-bottom: 2px solid var(--m3-color-outline); font-weight: 600; font-size: 0.85rem; white-space: nowrap; text-transform: uppercase; } .notifications-table tbody td { vertical-align: middle; color: var(--m3-color-on-surface-variant); } .notifications-table.table-hover > tbody > tr:hover > * { background-color: var(--m3-color-surface-variant); } .negative-value { color: var(--m3-color-error); font-weight: 600; } table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before { top: 14px; background-color: var(--m3-color-primary); } /* Table Footer (Info & Pagination) */ .dataTables_wrapper .row:last-of-type { padding-top: 1rem; align-items: center; } .dataTables_info { color: var(--m3-color-on-surface-variant); font-size: 0.9rem; } .dataTables_paginate .page-item .page-link { border: none; background-color: transparent; color: var(--m3-color-on-surface-variant); font-weight: 600; border-radius: var(--bs-border-radius-pill); margin: 0 0.25rem; min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .dataTables_paginate .page-item .page-link:hover { background-color: var(--m3-color-surface-variant); color: var(--m3-color-on-surface); } .dataTables_paginate .page-item.active .page-link { background-color: var(--m3-color-primary); color: var(--m3-color-on-primary); box-shadow: var(--bs-box-shadow-sm); } .construct { flex-grow: 1; } .construction-icon { font-size: 6rem; color: var(--m3-color-primary); } .construct .btn-primary { background-color: var(--m3-color-primary); color: var(--m3-color-on-primary); border-radius: var(--bs-border-radius-pill); font-weight: 500; padding: 0.75rem 1.5rem; } .error-code { font-size: 8rem; font-weight: 700; color: var(--m3-color-surface-variant); line-height: 1; } .p-note .btn { border-radius: var(--bs-border-radius-pill); font-weight: 500; padding: 0.6rem 1.25rem; box-shadow: var(--bs-box-shadow-sm); border: none; } .p-note .btn-primary { background-color: var(--m3-color-primary); color: var(--m3-color-on-primary); } .p-note .btn-secondary-soft { background-color: var(--m3-color-surface-variant); color: var(--m3-color-on-surface-variant); } .p-note .btn-danger-soft { background-color: var(--m3-color-error-container); color: var(--m3-color-on-error-container); } .p-note .dashboard-header { background-color: var(--m3-color-surface); box-shadow: var(--bs-box-shadow-sm); } .p-note .dashboard-header .navbar-brand { font-weight: 600; } .p-note .page-title { color: var(--m3-color-primary); font-weight: 700; } .p-note .data-card { background-color: var(--m3-color-surface); border-radius: var(--bs-border-radius-lg); padding: 2rem; box-shadow: var(--bs-box-shadow-sm); margin-bottom: 1.5rem; } .note-card { background-color: var(--m3-color-surface); border: 1px solid var(--m3-color-surface-variant); border-radius: var(--bs-border-radius-lg); box-shadow: var(--bs-box-shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease; height: 100%; } .note-card:hover { transform: translateY(-5px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .note-thumbnail { width: 100%; height: 180px; object-fit: cover; border-top-left-radius: var(--bs-border-radius-lg); border-top-right-radius: var(--bs-border-radius-lg); } .note-title { font-weight: 600; color: var(--m3-color-on-surface); } .note-description { font-size: 0.9rem; color: var(--m3-color-on-surface-variant); } .page-subtitle-bar { color: var(--m3-color-on-surface-variant); font-weight: 500; } .page-subtitle-bar .badge { background-color: var(--m3-color-secondary-container) !important; color: var(--m3-color-on-secondary-container) !important; font-size: 1rem; } .hero-overlay { /* Option 1: Remove overlay for a lighter feel */ /* display: none; */ /* Option 2: Use a lighter, primary-based overlay (Current) */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(var(--bs-primary-rgb), 0.1); /* Very subtle primary overlay */ /* Or a neutral scrim: */ /* background-color: rgba(var(--m3-color-shadow-rgb), 0.2); */ z-index: 1; } .hero-content { position: relative; z-index: 2; /* Adjust text color based on overlay choice */ color: var(--m3-color-on-surface); /* Darker text if overlay is light/gone */ /* color: white; */ /* Keep white if using a dark overlay */ } .hero-section h1 { font-weight: 700; color: var(--m3-color-primary); /* Use primary color for headline */ font-size: calc(1.5rem + 2.5vw); /* Responsive font size */ } .hero-section .lead { color: var(--m3-color-on-surface-variant); /* Subtler text */ margin-bottom: 2.5rem; /* More space */ font-size: 1.1rem; } .hero-section .btn { border-radius: var(--bs-border-radius-pill); padding: 0.8rem 1.8rem; /* Generous padding */ font-weight: 500; box-shadow: var(--bs-box-shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease; font-size: 1rem; margin: 0.5rem; /* Spacing between buttons on mobile */ } .hero-section .btn:hover { transform: translateY(-2px); box-shadow: var(--bs-box-shadow); } /* Style buttons based on background/overlay */ .hero-section .btn-style-primary { /* Example: if you need a primary-colored button */ background-color: var(--m3-color-primary); color: var(--m3-color-on-primary); border: none; } .hero-section .btn-style-secondary { /* Example: if you need a contrasting button */ background-color: var(--m3-color-primary-container); color: var(--m3-color-on-primary-container); border: none; } .hero-section .btn-style-outline { /* Example: Outline */ background-color: transparent; border: 1px solid var(--m3-color-primary); /* Use primary or outline color */ color: var(--m3-color-primary); } .hero-section .btn-style-outline:hover { background-color: var(--m3-color-primary-container); color: var(--m3-color-on-primary-container); border-color: var(--m3-color-primary-container); } /* Section Titles */ .section-title { color: var(--m3-color-primary); margin-bottom: 3.5rem; /* More space */ font-weight: 700; /* Bold titles */ font-size: clamp(1.8rem, 5vw, 2.5rem); /* Responsive title size */ text-align: center; } /* Product Cards */ .product-card { border-radius: var(--bs-border-radius-lg); /* Large rounding */ border: 1px solid var(--m3-color-outline); /* Subtle outline */ background-color: var(--m3-color-surface); box-shadow: none; /* Remove default shadow, rely on border/bg */ padding: 1.5rem; /* More padding inside card */ transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; height: 100%; /* Ensure cards in a row have same height */ display: flex; /* Use flex for alignment */ flex-direction: column; text-align: center; } .product-card:hover { /* background-color: var(--m3-color-secondary-container); /* Change bg on hover */ /* border-color: var(--m3-color-secondary); */ transform: translateY(-5px); /* Subtle lift */ box-shadow: var(--bs-box-shadow); /* Add shadow on hover */ border-color: transparent; /* Hide border when shadow appears */ } .product-card .card-body { padding: 0; /* Remove default padding, we added to .product-card */ display: flex; flex-direction: column; align-items: center; /* Center content */ flex-grow: 1; /* Allow body to grow */ } /* Card Icons (Material Style) */ .product-card .icon-wrapper { background-color: var(--m3-color-primary-container); border-radius: var(--bs-border-radius-lg); /* Rounded container */ color: var(--m3-color-on-primary-container); width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; /* More space below icon */ transition: background-color 0.3s ease, color 0.3s ease; } .product-card .icon-wrapper i { font-size: 1.75rem; /* Adjust icon size */ } .product-card:hover .icon-wrapper { background-color: var(--m3-color-primary); /* Primary color on hover */ color: var(--m3-color-on-primary); /* White icon */ } .product-card .card-title { color: var(--m3-color-on-surface); font-weight: 500; margin-bottom: 0.5rem; font-size: 1.15rem; } .product-card .card-text { color: var(--m3-color-on-surface-variant); /* Subtler text color */ font-size: 0.9rem; flex-grow: 1; /* Push button down */ margin-bottom: 1.5rem; } .product-card .btn { border-radius: var(--bs-border-radius-pill); margin-top: auto; /* Pushes button to bottom */ font-size: 0.9rem; padding: 0.5rem 1rem; } /* Specific button styles within product card */ .product-card .btn-outline-primary { border-color: var(--m3-color-outline); /* Use outline color for border */ color: var(--m3-color-primary); background-color: transparent; box-shadow: none; } .product-card .btn-outline-primary:hover { background-color: var(--m3-color-primary-container); border-color: var(--m3-color-primary-container); color: var(--m3-color-on-primary-container); transform: none; /* Optional: disable lift for outline hover */ box-shadow: none; } .product-section .btn-primary { /* Button below cards */ padding: 0.75rem 1.75rem; font-size: 1rem; } /* Why Choose Section */ .why-choose-section { /* Add this class to the section */ background-color: var(--m3-color-surface-variant) !important; /* Use surface variant for bg */ padding-top: 5rem; padding-bottom: 5rem; } .feature-item { /* Wrap each col content in this */ padding: 1rem; text-align: center; } .feature-icon { font-size: 2.75rem; /* Larger icons */ color: var(--m3-color-primary); margin-bottom: 1.5rem; /* Optional: Background container for icons */ /* background-color: var(--m3-color-primary-container); */ /* width: 70px; height: 70px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; */ /* color: var(--m3-color-on-primary-container); */ } .feature-item h4 { font-weight: 500; font-size: 1.2rem; color: var(--m3-color-on-surface-variant); /* Appropriate title color for this bg */ margin-bottom: 0.75rem; } .feature-item p { color: var(--m3-color-on-surface-variant); opacity: 0.85; /* Slightly faded text */ font-size: 0.95rem; line-height: 1.6; } /* CTA Section */ .cta-section { background-color: var(--m3-color-tertiary-container); /* Use tertiary or secondary container color */ color: var(--m3-color-on-tertiary-container); /* Text for that container */ padding: 5rem 1rem; /* Generous padding */ text-align: center; } .cta-section h2 { font-weight: 700; color: var(--m3-color-on-tertiary-container); /* Ensure contrast */ font-size: clamp(1.6rem, 5vw, 2.2rem); /* Responsive */ margin-bottom: 1rem; } .cta-section .lead { margin-bottom: 2.5rem; opacity: 0.9; font-size: 1.1rem; } .cta-section .btn { border-radius: var(--bs-border-radius-pill); padding: 0.8rem 1.8rem; font-weight: 500; box-shadow: var(--bs-box-shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease; font-size: 1rem; margin: 0.5rem; } .cta-section .btn:hover { transform: translateY(-2px); box-shadow: var(--bs-box-shadow); } .cta-section .btn-action-primary { /* Example: Button on the container */ background-color: var(--m3-color-tertiary); /* Use the matching primary/secondary/tertiary */ color: var(--m3-color-on-tertiary); border: none; } .cta-section .btn-action-outline { /* Example: Outline button */ border: 1px solid var(--m3-color-tertiary); color: var(--m3-color-tertiary); background: transparent; } .cta-section .btn-action-outline:hover { background-color: var(--m3-color-tertiary); color: var(--m3-color-on-tertiary); } /* News Section */ .news-section { /* Add class to section */ padding-top: 5rem; padding-bottom: 5rem; } .news-card { border-radius: var(--bs-border-radius-lg); border: 1px solid var(--m3-color-surface-variant); background-color: var(--m3-color-surface); box-shadow: none; transition: box-shadow 0.3s ease, transform 0.3s ease; overflow: hidden; /* Ensure image rounding works */ height: 100%; display: flex; flex-direction: column; } .news-card:hover { box-shadow: var(--bs-box-shadow); transform: translateY(-5px); } .news-card .card-img-top { aspect-ratio: 16 / 10; /* Maintain aspect ratio */ object-fit: cover; } .news-card .card-body { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; /* Take remaining height */ } .news-card .card-title { font-weight: 500; color: var(--m3-color-on-surface); font-size: 1.1rem; margin-bottom: 0.5rem; } .news-card .card-text.small { /* Date */ color: var(--m3-color-on-surface-variant); margin-bottom: 0.75rem; } .news-card .card-text:not(.small) { /* Excerpt */ color: var(--m3-color-on-surface-variant); font-size: 0.9rem; line-height: 1.6; flex-grow: 1; /* Push link down */ margin-bottom: 1rem; } .news-card .btn-link { color: var(--m3-color-primary); font-weight: 500; text-decoration: none; margin-top: auto; /* Push to bottom */ padding: 0; /* Reset padding for link */ align-self: flex-start; /* Align left */ } .news-card .btn-link:hover { text-decoration: underline; } /* Footer */ footer { background-color: var(--m3-color-surface-variant); /* Lighter footer bg */ color: var(--m3-color-on-surface-variant); /* Appropriate text color */ padding-top: 4rem; padding-bottom: 2rem; font-size: 0.95rem; } footer h5 { color: var(--m3-color-on-surface); /* Slightly darker headings */ font-weight: 500; margin-bottom: 1rem; font-size: 1.1rem; } footer a { color: var(--m3-color-on-surface-variant); text-decoration: none; transition: color 0.2s ease; } footer a:hover { color: var(--m3-color-primary); /* Primary color on hover */ text-decoration: none; } footer .list-unstyled li { margin-bottom: 0.6rem; /* Spacing in lists */ } footer .list-unstyled i { /* Icons in lists */ color: var(--m3-color-primary); margin-right: 0.75rem; /* More space for icon */ width: 20px; /* Align icons */ text-align: center; } footer .social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--m3-color-secondary-container); /* Icon background */ color: var(--m3-color-on-secondary-container); /* Icon color */ font-size: 1.1rem; margin: 0 5px; transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; } footer .social-icons a:hover { background-color: var(--m3-color-primary); color: var(--m3-color-on-primary); transform: scale(1.1); } footer hr { /* Use RGB of outline or surface-variant */ border-color: rgba(var(--bs-dark-rgb), 0.1); } footer .copyright-text { /* Target copyright paragraph */ color: var(--m3-color-on-surface-variant) !important; font-size: 0.9rem; opacity: 0.8; } footer .footer-logo { /* Add class to footer logo img */ max-height: 40px; margin-bottom: 1rem; /* Adjust filter based on footer bg */ filter: brightness(0.5) sepia(1) hue-rotate(180deg) saturate(5); /* Example filter for blue logo on light bg */ } /* General Button Styles Override (ensure consistency) */ .btn { border-radius: var(--bs-border-radius-pill); /* Default to pill */ font-weight: 500; padding: 0.6rem 1.5rem; /* Consistent padding */ box-shadow: var(--bs-box-shadow-sm); border: none; /* Material buttons often don't have borders unless outlined */ transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .btn:hover:not(.btn-link):not(.btn-outline-primary) { /* Exclude link/outline from lift */ transform: translateY(-2px); box-shadow: var(--bs-box-shadow); } .btn:focus { box-shadow: var(--bs-box-shadow-sm), 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25); /* Focus ring */ } .btn-primary { background-color: var(--m3-color-primary); color: var(--m3-color-on-primary); } .btn-primary:hover { background-color: #004a80; /* Slightly darker primary on hover */ color: var(--m3-color-on-primary); } .btn-outline-primary { border: 1px solid var(--m3-color-outline); background-color: transparent; color: var(--m3-color-primary); box-shadow: none; } .btn-outline-primary:hover { background-color: var(--m3-color-primary-container); color: var(--m3-color-on-primary-container); border-color: var(--m3-color-primary-container); box-shadow: none; transform: none; /* No lift on outline hover */ } .dh { line-height: 2 !important; font-size: 40px !important; } /* AOS Animation defaults */ [data-aos] { /* transition-property: transform, opacity; */ /* Default AOS might handle this */ }