/* FONTS loaded via in HTML */
/* VARIABLES for LIGHT & DARK MODE ************************* */
:root {
--sidebar-link-color-light: #3c3c3c;
--dialogue-wrapper-light: #f2f2f2;
--header-light: #000000;
--card-border-light: #f7f7f7;
--sidebar-link-color-dark: #f4f4f4;
--dialogue-wrapper-dark: #444444;
--header-dark: #2d66b6;
--card-border-dark: #494949;
}
html[data-bs-theme="light"] {
--sidebar-link-color: var(--sidebar-link-color-light);
--dialogue-wrapper: var(--dialogue-wrapper-light);
--header: var(--header-light);
--card-border: var(--card-border-light);
}
html[data-bs-theme="dark"] {
--sidebar-link-color: var(--sidebar-link-color-dark);
--dialogue-wrapper: var(--dialogue-wrapper-dark);
--header: var(--header-dark);
--card-border: var(--card-border-dark);
}
/* END ************************* */
body { font-family: Nunito, Inter, sans-serif; display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
.legal-section {
background-color: #F2F2F2; padding: 2rem !important;}
.navbar-brand {
font-family: "Inter", sans-serif;
font-size: 1.3em;
padding-bottom: 0.5em;
}
h1, h2, h3, h4 { color: var(--header); }
h2, h3, h4 { font-weight: 800 !important; }
.card-body { border: 1px var(--card-border) solid !important; }
.about-section .card,
.about-section .card-body {
background-color: #FCF7F4 !important;
}
footer {
flex-shrink: 0;
box-sizing: border-box;
background-color: #4c5153;
}
footer p {
color: #ffffff;
text-align: start;
padding-left: 0.5rem;
order: 2;
}
footer .nav-link {
font-size: 0.9rem;
color: #ffffff;
padding-top: 0.35rem;
padding-bottom: 0.35rem;
}
footer .nav {
flex-direction: column;
align-items: flex-start;
padding-left: 0.5rem;
order: 1;
}
@media (max-width: 575px) {
footer .col { align-items: flex-start !important; }
}
@media (min-width: 576px) {
footer p { order: 0; padding-left: 0; }
footer .nav { order: 0; flex-direction: row; flex-wrap: nowrap; padding-left: 0; }
footer .nav-link { font-size: 0.8rem; }
}
/* NAVBAR ************************* */
.navbar {
padding: 1rem 0;
}
.navbar .container-fluid {
max-width: 990px;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
.navbar-center {
position: absolute; left: 50%;
transform: translateX(-50%); margin-top: 6px;
}
.navbar-center .navbar-nav {
text-align: center; gap: 1rem;
}
.navbar-center .nav-link {
text-transform: uppercase;
font-weight: 500;
font-size: 0.95rem;
color: #212529;
padding: 0.5rem 1.5rem;
font-family: Nunito, sans-serif;
}
.navbar-center .nav-link:hover {
color: #0d6efd;
}
.navbar-center .btn {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.active {
text-decoration-line: underline;
text-decoration-thickness: 3px;
text-underline-offset: 10px;
text-decoration-color: #00B2E5;
}
/* LAYOUT ************************* */
.container {
max-width: 990px;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
/* HERO CARDS ************************* */
.hero-card {
display: flex; align-items: stretch;
margin: 4rem 0;
text-decoration: none;
color: inherit;
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.hero-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
.hero-card.reverse {
flex-direction: row-reverse;
}
.hero-image {
flex: 0 0 50%; display: flex; align-items: center;
justify-content: center;
font-size: 10rem;
gap: 1.5rem;
min-height: 300px;
}
.hero-content {
flex: 0 0 50%;
box-sizing: border-box;
min-width: 0;
padding: 3rem 2rem;
display: flex;
flex-direction: column;
justify-content: center;
background: white;
}
.hero-content h2 {
font-size: clamp(1.8rem, 4vw, 2.2rem);
font-weight: 700;
margin-bottom: 1.5rem;
color: #212529;
line-height: 1.1;
overflow-wrap: break-word;
hyphens: auto;
}
@media (min-width: 992px) {
.hero-content h2 {
hyphens: none;
}
}
.hero-content p {
font-size: 1rem;
line-height: 1.6;
color: #495057;
margin: 0; padding-bottom: 1.5rem;
}
.transition-ribbon {
text-align: center;
padding: 2rem;
margin: 5rem 0 5rem 0rem;
font-size: 1.3rem;
font-weight: 500;
color: #2c4c6b;
line-height: 1.5;
font-style: italic;
position: relative;
background: white;
background-color: #F2F2F2;
border-radius: 1.3rem;
}
/* THEME TOGGLE ************************* */
[data-theme-toggle] {
font-size: 0.85rem;
padding: 0.35rem 0.9rem;
border-radius: 50px;
border: 1px solid #ccc;
background: #fff;
color: #212529;
cursor: pointer;
white-space: nowrap;
}
[data-bs-theme="dark"] [data-theme-toggle] {
background: #343a40;
color: #f8f9fa;
border-color: #555;
}
.offcanvas [data-theme-toggle] {
align-self: flex-start;
}
/* OFFCANVAS ************************* */
.offcanvas .navbar-nav .nav-link {
text-transform: uppercase;
font-weight: 500;
font-size: 0.95rem;
}
.offcanvas .dropdown-toggle {
border: none;
background: none;
padding: 4px 0;
font-size: 0.85rem;
cursor: pointer;
color: inherit;
}
/* DARK MODE ************************* */
[data-bs-theme="dark"] .card {
background-color: #1e1e1e;
border-color: #3a3a3a;
}
[data-bs-theme="dark"] .card-body {
background-color: #1e1e1e !important;
border-color: #3a3a3a !important;
}
[data-bs-theme="dark"] .card-title,
[data-bs-theme="dark"] .card-text {
color: #e0e0e0;
}
[data-bs-theme="dark"] body {
background-color: #1a1a1a;
color: #e0e0e0;
}
[data-bs-theme="dark"] .navbar {
background-color: #1a1a1a !important;
border-color: #333 !important;
}
[data-bs-theme="dark"] .navbar-center .nav-link {
color: #e0e0e0;
}
[data-bs-theme="dark"] .navbar-brand {
color: #f0f0f0;
}
[data-bs-theme="dark"] .hero-content {
background: #252525;
}
[data-bs-theme="dark"] .hero-content h2 {
color: #f0f0f0;
}
[data-bs-theme="dark"] .hero-content p {
color: #b0b0b0;
}
[data-bs-theme="dark"] .transition-ribbon {
background: #1a1a1a;
color: #c0c0c0;
}
[data-bs-theme="dark"] footer {
background-color: #B6EDFF !important;
border-color: rgba(0,0,0,0.15) !important;
}
[data-bs-theme="dark"] footer p,
[data-bs-theme="dark"] footer a {
color: #212529;
}
[data-bs-theme="dark"] .hero-card {
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
[data-bs-theme="dark"] .hero-card:hover {
box-shadow: 0 8px 16px rgba(0,0,0,0.6);
}
/* RESPONSIVE ************************* */
@media (max-width: 991px) {
.navbar-center {
position: static;
transform: none;
width: 100%;
}
.hero-card,
.hero-card.reverse {
flex-direction: column;
}
.hero-image {
flex: none;
width: 100%;
min-height: 250px;
}
.hero-content {
flex: none; width: 100%;
padding: 2rem 1.5rem 0rem 1.5rem;
}
.hero-content h2 {
font-size: 1.8rem;
}
.hero-content p {
font-size: 1rem;
}
.transition-ribbon {
font-size: 1.3rem;
padding: 1rem 1.5rem;
font-style: italic;
margin: 1rem 0 1rem 0;
}
}