/*
* ╔══════════════════════════════════════════════════════════════╗
* ║ Culpeper Human Services — Shared Stylesheet ║
* ║ Used by all inner pages (about, resources, hotlines, etc.) ║
* ║ index.html has its own inline styles for page-specific ║
* ║ sections like the hero and service cards. ║
* ╚══════════════════════════════════════════════════════════════╝
*
* TABLE OF CONTENTS
* -----------------
* 1. Reset & Base
* 2. Color Tokens (CSS Variables)
* 3. Utility Classes
* 4. Buttons
* 5. Typography Helpers
* 6. Emergency Banner
* 7. Utility Bar (address/hours bar)
* 8. Header & Navigation
* 9. Page Banner (inner-page hero)
* 10. Content Layout Helpers
* 11. Cards
* 12. Info / Contact Blocks
* 13. Call-to-Action Boxes
* 14. Footer
* 15. Responsive Breakpoints
*/
/* ═══════════════════════════════════════════════════════
1. RESET & BASE
═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
color: #2c3e50;
background: #fafaf8;
line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
/* ═══════════════════════════════════════════════════════
2. COLOR TOKENS
Change brand colors here and they update everywhere.
═══════════════════════════════════════════════════════ */
:root {
--teal: #2D7D9A; /* Primary brand color */
--teal-dark: #1F5F77; /* Darker teal (nav, etc.) */
--teal-light: #EBF6FA; /* Very light teal (bg) */
--orange: #F4A261; /* Accent / hover */
--orange-dark: #E76F51; /* CTA buttons */
--cream: #FAFAF8; /* Page background */
--warm-gray: #F5F0EB; /* Alternating section bg */
--text: #2C3E50; /* Main body text */
--text-muted: #5E7180; /* Secondary / helper text */
--white: #FFFFFF;
--red-alert: #C0392B; /* Emergency red */
--shadow-sm: 0 2px 10px rgba(0,0,0,.06);
--shadow-md: 0 6px 24px rgba(45,125,154,.15);
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
}
/* ═══════════════════════════════════════════════════════
3. UTILITY CLASSES
═══════════════════════════════════════════════════════ */
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
}
section { padding: 72px 0; }
section.bg-white { background: var(--white); }
section.bg-gray { background: var(--warm-gray); }
section.bg-teal-lt { background: var(--teal-light); }
/* ═══════════════════════════════════════════════════════
4. BUTTONS
Usage: Click Me
═══════════════════════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 26px;
border-radius: 50px;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
border: none;
transition: all .2s;
}
/* Orange / primary CTA */
.btn-primary { background: var(--orange-dark); color: #fff; }
.btn-primary:hover {
background: var(--orange);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(231,111,81,.35);
}
/* Teal button */
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-dark); transform: translateY(-1px); }
/* White outline (for use on dark backgrounds) */
.btn-outline-white {
background: transparent;
color: #fff;
border: 2px solid rgba(255,255,255,.7);
}
.btn-outline-white:hover { background: rgba(255,255,255,.15); }
/* Smaller button variant */
.btn-sm { padding: 9px 20px; font-size: .85rem; }
/* ═══════════════════════════════════════════════════════
5. TYPOGRAPHY HELPERS
═══════════════════════════════════════════════════════ */
/* Small ALL-CAPS label above section headings */
.section-label {
display: inline-block;
font-size: .78rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 10px;
}
h2.section-title {
font-size: 2rem;
font-weight: 700;
color: var(--text);
margin-bottom: 16px;
}
.section-subtitle {
font-size: 1.05rem;
color: var(--text-muted);
max-width: 600px;
margin-bottom: 40px;
}
/* Divider line */
.divider {
border: none;
border-top: 1px solid #eee;
margin: 32px 0;
}
/* ═══════════════════════════════════════════════════════
6. EMERGENCY BANNER
The red bar at the very top of every page.
TO EDIT: Change phone numbers in the HTML, not here.
═══════════════════════════════════════════════════════ */
.emergency-bar {
background: var(--red-alert);
color: #fff;
padding: 10px 24px;
text-align: center;
font-size: .88rem;
font-weight: 500;
}
.emergency-bar a { color: #fff; font-weight: 700; text-decoration: underline; }
.emergency-bar .sep { margin: 0 14px; opacity: .45; }
/* ═══════════════════════════════════════════════════════
7. UTILITY BAR
Dark teal bar below emergency bar (address / hours / links).
═══════════════════════════════════════════════════════ */
.util-bar {
background: var(--teal-dark);
color: rgba(255,255,255,.85);
padding: 7px 0;
font-size: .82rem;
}
.util-bar .container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.util-bar a { color: rgba(255,255,255,.85); transition: color .15s; }
.util-bar a:hover { color: #fff; }
.util-bar-links { display: flex; gap: 20px; align-items: center; }
/* ═══════════════════════════════════════════════════════
8. HEADER & NAVIGATION
Sticky white nav bar with logo + links + CTA button.
═══════════════════════════════════════════════════════ */
header {
background: var(--white);
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
nav {
display: flex;
align-items: center;
gap: 32px;
height: 72px;
}
/* Logo */
.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo-icon {
width: 44px; height: 44px;
border-radius: 10px;
background: var(--teal);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.logo-icon svg {
width: 26px; height: 26px;
fill: none; stroke: white;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.logo-text { line-height: 1.2; }
.logo-text strong { display: block; font-size: 1rem; color: var(--teal-dark); font-weight: 700; }
.logo-text span { font-size: .75rem; color: var(--text-muted); }
/* Nav links */
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a {
padding: 8px 14px;
border-radius: 8px;
font-size: .9rem;
font-weight: 500;
color: var(--text);
transition: background .15s, color .15s;
}
.nav-links a:hover,
.nav-links a.active {
background: var(--teal-light);
color: var(--teal-dark);
}
/* "Call Us" button in nav */
.nav-cta { margin-left: 8px; }
/* Mobile hamburger (visible only on small screens) */
.hamburger { display: none; }
/* ═══════════════════════════════════════════════════════
9. PAGE BANNER
The gradient header block used on every inner page.
Usage:
Page Title
Optional subtitle
═══════════════════════════════════════════════════════ */
.page-banner {
background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 100%);
color: #fff;
padding: 56px 0 48px;
}
/* Breadcrumb trail inside the page banner */
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: .82rem;
margin-bottom: 16px;
opacity: .8;
}
.breadcrumb a { color: rgba(255,255,255,.85); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .sep { opacity: .5; }
.page-banner h1 { font-size: 2.4rem; font-weight: 800; margin-bottom: 10px; }
.page-banner p { font-size: 1.05rem; opacity: .88; max-width: 560px; }
/* Optional colored tag/badge in the page banner */
.page-badge {
display: inline-block;
background: rgba(255,255,255,.15);
border: 1px solid rgba(255,255,255,.3);
color: #fff;
font-size: .8rem;
font-weight: 600;
padding: 4px 14px;
border-radius: 50px;
margin-bottom: 16px;
}
/* ═══════════════════════════════════════════════════════
10. CONTENT LAYOUT HELPERS
═══════════════════════════════════════════════════════ */
/* Two equal columns */
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
/* Two columns, left is wider (2/3 + 1/3) */
.two-col-wide {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 48px;
align-items: start;
}
/* Three equal columns */
.three-col {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* Four equal columns */
.four-col {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
/* Auto-fit responsive grid */
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}
/* ═══════════════════════════════════════════════════════
11. CARDS
═══════════════════════════════════════════════════════ */
/* Standard white content card */
.card {
background: var(--white);
border-radius: var(--radius-md);
padding: 28px;
box-shadow: var(--shadow-sm);
border: 1.5px solid transparent;
transition: border-color .2s, box-shadow .2s, transform .2s;
}
.card:hover {
border-color: var(--teal);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.card h3 { font-size: 1rem; font-weight: 700; color: var(--teal-dark); margin-bottom: 10px; }
.card p { font-size: .88rem; color: var(--text-muted); line-height: 1.65; }
/* Card with a colored left border accent */
.card-accent { border-left: 4px solid var(--teal); }
.card-accent-orange { border-left: 4px solid var(--orange-dark); }
.card-accent-red { border-left: 4px solid var(--red-alert); }
/* Card icon (rounded square with SVG) */
.card-icon {
width: 50px; height: 50px;
border-radius: 13px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 16px;
}
.card-icon svg { width: 26px; height: 26px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-teal { background: var(--teal-light); }
.icon-teal svg { stroke: var(--teal-dark); }
.icon-orange { background: #FEF0E7; }
.icon-orange svg { stroke: var(--orange-dark); }
.icon-green { background: #E8F5E9; }
.icon-green svg { stroke: #2E7D32; }
.icon-red { background: #FDECEA; }
.icon-red svg { stroke: #C62828; }
.icon-purple { background: #F3E5F5; }
.icon-purple svg { stroke: #6A1B9A; }
.icon-blue { background: #E3F2FD; }
.icon-blue svg { stroke: #1565C0; }
/* Announcement card variant */
.announcement-card {
background: var(--white);
border-radius: var(--radius-md);
padding: 28px;
box-shadow: var(--shadow-sm);
border-top: 4px solid var(--teal);
display: flex;
flex-direction: column;
gap: 12px;
}
.announcement-card .ann-date {
font-size: .78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-muted);
}
.announcement-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.announcement-card p { font-size: .88rem; color: var(--text-muted); line-height: 1.6; }
.announcement-card .card-link { font-size: .85rem; font-weight: 600; color: var(--teal); }
.announcement-card .card-link:hover { text-decoration: underline; }
/* Hotline card (used on hotlines.html) */
.hotline-card {
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.18);
border-radius: var(--radius-md);
padding: 24px;
}
.hotline-card h4 {
font-size: .78rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--orange);
margin-bottom: 14px;
}
.hotline-entry {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
}
.hotline-entry:last-child { margin-bottom: 0; }
.hotline-entry svg { width: 16px; height: 16px; stroke: rgba(255,255,255,.55); flex-shrink: 0; margin-top: 3px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hotline-entry div strong { display: block; font-size: .95rem; color: #fff; }
.hotline-entry div span { font-size: .78rem; opacity: .7; color: rgba(255,255,255,.8); }
/* Emergency 911 card */
.card-911 {
background: var(--red-alert);
border-radius: var(--radius-md);
padding: 24px;
display: flex;
align-items: center;
gap: 18px;
color: #fff;
}
.card-911-icon {
width: 52px; height: 52px;
background: rgba(255,255,255,.15);
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.card-911-icon svg { width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card-911 strong { display: block; font-size: 1.5rem; font-weight: 800; }
.card-911 span { font-size: .88rem; opacity: .85; }
/* Resource list inside a card */
.resource-list { display: flex; flex-direction: column; gap: 8px; }
.resource-list li {
font-size: .88rem;
color: var(--text-muted);
display: flex;
align-items: flex-start;
gap: 10px;
}
.resource-list li::before {
content: '';
width: 6px; height: 6px;
background: var(--orange);
border-radius: 50%;
flex-shrink: 0;
margin-top: 7px;
}
.resource-list a { color: var(--teal); font-weight: 500; }
.resource-list a:hover { text-decoration: underline; }
/* ═══════════════════════════════════════════════════════
12. INFO / CONTACT BLOCKS
═══════════════════════════════════════════════════════ */
/* Icon + text contact item */
.contact-item { display: flex; gap: 16px; align-items: flex-start; }
.contact-item-icon {
width: 46px; height: 46px;
background: var(--teal-light);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.contact-item-icon svg { width: 20px; height: 20px; stroke: var(--teal-dark); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contact-item strong {
display: block;
font-size: .8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--teal);
margin-bottom: 4px;
}
.contact-item p { font-size: .92rem; color: var(--text-muted); }
/* Map placeholder box */
.map-placeholder {
background: var(--teal-light);
border-radius: var(--radius-lg);
min-height: 280px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: var(--teal-dark);
font-size: .9rem;
border: 2px dashed rgba(45,125,154,.3);
text-align: center;
padding: 32px;
}
.map-placeholder svg { width: 42px; height: 42px; stroke: var(--teal); opacity: .55; fill: none; stroke-width: 1.5; }
/* Hours table rows */
.hours-row {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #f0f0f0;
font-size: .9rem;
}
.hours-row:last-child { border-bottom: none; }
.hours-row strong { color: var(--text); }
.hours-row span { color: var(--text-muted); }
/* Mission / Vision card (used on about page) */
.mv-card {
background: var(--warm-gray);
border-radius: var(--radius-sm);
padding: 24px;
border-left: 4px solid var(--teal);
margin-bottom: 16px;
}
.mv-card h4 {
font-size: .78rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 10px;
}
.mv-card p { font-size: .93rem; color: var(--text-muted); line-height: 1.7; }
/* ═══════════════════════════════════════════════════════
13. CALL-TO-ACTION BOXES
═══════════════════════════════════════════════════════ */
/* Orange gradient CTA box */
.cta-box-orange {
background: linear-gradient(135deg, var(--orange), var(--orange-dark));
border-radius: var(--radius-md);
padding: 28px;
color: #fff;
}
.cta-box-orange h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }
.cta-box-orange p { font-size: .9rem; opacity: .92; margin-bottom: 18px; }
.cta-box-orange .btn { background: #fff; color: var(--orange-dark); font-size: .88rem; padding: 10px 22px; }
/* Teal info box */
.info-box-teal {
background: var(--teal-light);
border-radius: var(--radius-md);
padding: 20px 24px;
border-left: 4px solid var(--teal);
font-size: .9rem;
color: var(--text-muted);
}
.info-box-teal strong { color: var(--teal-dark); display: block; margin-bottom: 4px; }
/* Full-width dark banner (like on hotlines page) */
.dark-banner {
background: linear-gradient(135deg, #1F3F4F, var(--teal-dark));
border-radius: var(--radius-lg);
padding: 52px 48px;
color: #fff;
}
.dark-banner .section-label { color: var(--orange); }
.dark-banner h2 { color: #fff; margin-bottom: 8px; }
.dark-banner .section-subtitle { color: rgba(255,255,255,.75); margin-bottom: 36px; }
/* Apply methods row */
.apply-methods { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
.apply-method {
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.3);
border-radius: 12px;
padding: 14px 22px;
min-width: 140px;
text-align: center;
flex: 1;
}
.apply-method strong { display: block; font-size: 1rem; margin-bottom: 2px; }
.apply-method span { font-size: .82rem; opacity: .85; }
/* Placeholder box (for template sections with no content yet) */
.placeholder-box {
background: var(--warm-gray);
border: 2px dashed #ccc;
border-radius: var(--radius-md);
padding: 40px;
text-align: center;
color: var(--text-muted);
font-size: .9rem;
}
.placeholder-box strong { display: block; font-size: 1rem; color: var(--text); margin-bottom: 8px; }
/* ═══════════════════════════════════════════════════════
14. FOOTER
The same footer appears on every page.
TO EDIT: change address/phone in each HTML file.
═══════════════════════════════════════════════════════ */
footer {
background: #1A2E3A;
color: rgba(255,255,255,.75);
padding: 56px 0 28px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 40px;
}
.footer-brand .logo-text strong { color: #fff; }
.footer-brand .logo-text span { color: rgba(255,255,255,.45); }
.footer-brand > p { margin-top: 14px; font-size: .85rem; line-height: 1.7; max-width: 260px; }
footer h4 {
color: #fff;
font-size: .82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
margin-bottom: 14px;
}
.footer-links { display: flex; flex-direction: column; gap: 9px; }
.footer-links a { font-size: .85rem; color: rgba(255,255,255,.6); transition: color .15s; }
.footer-links a:hover { color: var(--orange); }
.footer-links li:not(:has(a)) { font-size: .85rem; color: rgba(255,255,255,.6); }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.08);
padding-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
font-size: .8rem;
}
.footer-bottom a { color: rgba(255,255,255,.45); }
.footer-bottom a:hover { color: var(--orange); }
.footer-bottom-links { display: flex; gap: 16px; }
.facebook-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(255,255,255,.65);
font-size: .85rem;
padding: 8px 16px;
border: 1px solid rgba(255,255,255,.15);
border-radius: 8px;
margin-top: 16px;
transition: all .2s;
}
.facebook-link:hover { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
.facebook-link svg { width: 15px; height: 15px; fill: currentColor; }
/* ═══════════════════════════════════════════════════════
15. RESPONSIVE BREAKPOINTS
═══════════════════════════════════════════════════════ */
/* Tablet / smaller desktop */
@media (max-width: 960px) {
.two-col, .two-col-wide { grid-template-columns: 1fr; }
.three-col { grid-template-columns: 1fr 1fr; }
.four-col { grid-template-columns: 1fr 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.page-banner h1 { font-size: 1.9rem; }
.dark-banner { padding: 40px 32px; }
/* Hide desktop nav links, show hamburger */
.nav-links, .nav-cta { display: none; }
.hamburger {
display: flex;
flex-direction: column;
gap: 5px;
padding: 8px;
margin-left: auto;
background: none;
border: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 24px;
height: 2px;
background: var(--text);
border-radius: 2px;
}
}
/* Mobile */
@media (max-width: 600px) {
.footer-grid, .three-col, .four-col { grid-template-columns: 1fr; }
section { padding: 52px 0; }
h2.section-title { font-size: 1.6rem; }
.page-banner { padding: 40px 0 36px; }
.page-banner h1 { font-size: 1.6rem; }
.apply-methods { flex-direction: column; }
.dark-banner { padding: 32px 24px; }
.dark-banner h2 { font-size: 1.5rem; }
}