/*
* App Custom CSS (app.css)
*
* Getting-started examples for fine-tuning look & feel.
* Load this file after Bootstrap CSS to override defaults.
*
* Place in your HTML ,
* after Bootstrap, e.g.:
*
*
*
* 1. Color Palette
* --------------- */
/* Define custom color variables (if Bootstrap version supports CSS variables) */
:root {
--primary-color: #1a73e8;
--secondary-color: #00bfa5;
--success-color: #28a745;
--warning-color: #ffc107;
--danger-color: #dc3545;
--info-color: #17a2b8;
}
/* Override Bootstrap button styles */
.btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.btn-primary:hover,
.btn-primary:focus {
/* darken utility not available in plain CSS; adjust manually */
background-color: #1554b3;
border-color: #1554b3;
}
.btn-secondary {
background-color: var(--secondary-color);
border-color: var(--secondary-color);
}
/* 2. Typography
-------------- */
body {
font-family: 'Open Sans', Arial, sans-serif;
color: #333;
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Merriweather', serif;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
/* 3. Container Breakpoint Override
------------------------------- */
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
/* 4. Card Styles
--------------- */
.card {
border-radius: 0.75rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* 5. Utilities
------------ */
/* Text shadow utility */
.text-shadow {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
/* Flex center utility */
.d-flex-center {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Custom spacing utility (example) */
.m-sm-1 { margin: 0.25rem !important; }
.p-sm-1 { padding: 0.25rem !important; }
/* 6. Form Controls
---------------- */
.form-control {
border-radius: 0.5rem;
}
.form-control:focus {
box-shadow: 0 0 0 0.2rem rgba(26, 115, 232, 0.25);
border-color: var(--primary-color);
}
/* 7. Navbar Example
----------------- */
.navbar-custom {
background-color: var(--primary-color);
}
.navbar-custom .navbar-nav .nav-link {
color: #fff;
}
.navbar-custom .navbar-nav .nav-link:hover {
color: var(--secondary-color);
}
/*
* Add any additional custom rules below.
*/