/* ============================================================
BASE STYLESHEET — base.css
============================================================
Hey students! 👋 This is the FOUNDATION of your entire site.
Every page links to this file FIRST.
WHAT'S IN HERE:
─────────────────────────────────────────────────────────────
1. CSS Variables → Your site's colors, fonts, and spacing
2. Reset → Removes weird default browser styles
3. Typography → How text looks everywhere
4. Navigation Bar → The top menu on every page
5. Buttons → Reusable button styles
6. Section Utilities → Quick classes to style any section
7. Footer → Bottom of every page
8. Animations → Fade-ins and motion effects
9. Responsive → Makes everything work on phones!
─────────────────────────────────────────────────────────────
📝 HOW CSS FILES WORK TOGETHER:
Each HTML page loads TWO stylesheets:
1. base.css (this file) — shared styles for ALL pages
2. A page-specific file — styles only for THAT page
Example in your HTML :
The page-specific file loads AFTER base.css, so its styles
can override or add to whatever is defined here.
============================================================ */
/* ============================================================
1. CSS VARIABLES
============================================================
Variables start with -- and live inside :root { }.
They let you define a value ONCE and reuse it everywhere.
🎨 TO THEME YOUR SITE: Just change the values below!
Every element that uses var(--primary-color) will update
automatically. It's like a "find and replace" for colors.
COLOR IDEAS BY TOPIC:
🧠 Mental Health → Blues & Greens (calming)
🌿 Environment → Greens & Earth Tones (natural)
📚 Education → Warm Oranges & Yellows (energizing)
🍎 Food Access → Reds & Warm Tones (inviting)
🏥 Healthcare → Blues & Whites (trustworthy)
⚖️ Social Justice → Deep Purples & Golds (bold)
============================================================ */
:root {
/* ─── Primary Colors ─── */
--primary-color: #cb718f; /* Main brand color — used for links, accents */
--primary-light: #52ab86; /* Lighter shade — hover states, highlights */
--primary-dark: #1a4f4a; /* Darkest shade — headings, navbar, footer */
--accent-color: rgb(
250,
216,
225
); /* Soft background color — section backgrounds */
--highlight-color: rgb(
230,
162,
179
); /* Pop of color — buttons, important elements */
/* ─── Neutral Colors ─── */
/* These rarely need changing — they work with any color theme */
--white: #ffffff;
--off-white: #f9fbf9;
--light-gray: #e5ebe5;
--medium-gray: #6b8072;
--dark-gray: #375143;
--near-black: #132d23;
/* ─── Fonts ─── */
/* These fonts are loaded via Google Fonts in each HTML .
If you want different fonts, update BOTH the HTML link AND here.
Browse fonts at: https://fonts.google.com */
--font-heading: "Playfair Display", Georgia, serif;
--font-body: "Source Sans 3", "Segoe UI", sans-serif;
/* ─── Spacing ─── */
--section-padding: 80px 0; /* Top & bottom padding for sections */
--container-width: 1140px; /* Max width of content area */
/* ─── Shadows ─── */
/* Shadows add depth. "sm" = subtle, "lg" = dramatic */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
/* ─── Border Radius ─── */
/* Controls how rounded corners are. Higher = rounder */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
/* ─── Transitions ─── */
/* Controls how fast hover/animation effects happen */
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
}
/* ============================================================
2. CSS RESET
============================================================
Browsers add their own default styles (margins on ,
padding on
, etc.). This "reset" removes those defaults
so YOUR styles are the only ones that matter.
📝 box-sizing: border-box → When you set width: 300px,
the element stays 300px even WITH padding. Without this,
padding would ADD to the width (300px + 20px padding = 320px).
============================================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth; /* Smooth scrolling for anchor links (#section) */
}
body {
font-family: var(--font-body);
color: var(--dark-gray);
line-height: 1.7; /* Space between text lines — improves readability */
background-color: var(--off-white);
/* This prevents the page from jumping when scrollbars appear/disappear */
overflow-x: hidden;
}
/* ============================================================
3. TYPOGRAPHY
============================================================
Controls how ALL text looks across the site.
📝 FONT SIZE UNITS:
- rem = relative to root (html) font size (usually 16px)
So 2rem = 32px, 1.5rem = 24px
- em = relative to parent element's font size
- px = fixed pixels (doesn't scale with user settings)
We use rem for accessibility — if a user has their browser
set to larger text, rem-based sizes will respect that.
============================================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
color: var(--primary-dark);
line-height: 1.3;
margin-bottom: 0.5em;
}
h1 {
font-size: 3rem;
} /* ~48px — Page titles */
h2 {
font-size: 2.25rem;
} /* ~36px — Section headings */
h3 {
font-size: 1.5rem;
} /* ~24px — Card titles, subheadings */
h4 {
font-size: 1.25rem;
} /* ~20px — Smaller subheadings */
p {
margin-bottom: 1rem;
}
/* ─── Links ─── */
a {
color: var(--primary-color);
text-decoration: none; /* Removes the default underline */
transition: var(--transition-fast);
}
a:hover {
color: var(--highlight-color);
}
/* ─── Images ─── */
img {
max-width: 100%; /* Images never overflow their container */
height: auto; /* Keeps correct proportions (no stretching) */
display: block; /* Removes tiny gap below images */
}
/* ============================================================
4. NAVIGATION BAR
============================================================
The fixed menu at the top of every page.
Uses Bootstrap's navbar component for mobile responsiveness.
📝 HOW THE NAVBAR WORKS:
- On desktop: Links show horizontally
- On mobile (<992px): Links collapse into a hamburger menu
- Bootstrap handles the toggle automatically with JS
- "fixed-top" keeps it visible as you scroll
The "!important" overrides Bootstrap's default navbar colors.
We need it because Bootstrap has very specific selectors.
============================================================ */
.navbar-custom {
background-color: var(--primary-dark) !important;
padding: 15px 0;
box-shadow: var(--shadow-sm);
/* Adds a subtle blur effect behind the navbar */
backdrop-filter: blur(10px);
}
/* Site name/logo in the navbar */
.navbar-custom .navbar-brand {
font-family: var(--font-heading);
font-size: 1.5rem;
color: var(--white) !important;
font-weight: 700;
letter-spacing: 0.5px;
}
/* Individual nav links */
.navbar-custom .nav-link {
color: var(--accent-color) !important;
font-weight: 500;
padding: 8px 16px !important;
border-radius: var(--radius-sm);
transition: var(--transition-fast);
font-size: 0.95rem;
}
/* Hover state AND active (current page) state */
.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active {
color: var(--white) !important;
background-color: rgba(255, 255, 255, 0.1);
}
/* Mobile hamburger menu button */
.navbar-custom .navbar-toggler {
border-color: rgba(255, 255, 255, 0.3);
}
/* Makes the hamburger icon white (it's dark by default) */
.navbar-custom .navbar-toggler-icon {
filter: invert(1);
}
/* ============================================================
5. BUTTONS
============================================================
Reusable button styles you can add to any or