/* ==========================================================================
GRACE WORLD MINISTRIES — Shared stylesheet
--------------------------------------------------------------------------
This ONE file styles the whole website (English pages, Spanish pages,
and the Higher Learning Academy section).
HOW TO CHANGE THE COLORS
Scroll to ":root" just below. Every color in the site is listed there once.
Change it in that one place and it updates everywhere.
HOW THIS FILE IS ORGANIZED
1. Design tokens (colors, spacing, fonts) <- edit here
2. Reset & base elements
3. Layout helpers (.wrap, .section)
4. Buttons
5. Site header + navigation (incl. mobile menu)
6. Academy sub-header (HLA)
7. Hero
8. Cards & feature grids
9. Text blocks, beliefs, quotes, steps
10. Image placeholders & gallery
11. Forms
12. Call-to-action band
13. Site footer
14. Utilities & accessibility
15. Print
Written mobile-first: the plain rules are for phones, and the
"@media (min-width: ...)" blocks add changes for bigger screens.
========================================================================== */
/* ==========================================================================
1. DESIGN TOKENS — edit colors, fonts and spacing here
========================================================================== */
:root {
/* --- Brand colors: Grace World Ministries -------------------------- */
--color-primary: #12386b; /* deep blue — headers, footer, links */
--color-primary-dark: #0b2447; /* darker blue — hovers, footer bottom */
--color-primary-light: #2a5fa5; /* lighter blue — accents, borders */
--color-accent: #e0a52c; /* warm gold — buttons, underlines */
--color-accent-dark: #8f6212; /* darker gold — hover state, small text */
--color-accent-soft: #fdf4e0; /* pale gold — soft backgrounds */
/* --- Neutrals ------------------------------------------------------ */
--color-text: #1f2430; /* body text */
--color-text-muted: #545c6b; /* secondary text (passes AA on white) */
--color-bg: #ffffff; /* page background */
--color-bg-alt: #f4f7fb; /* alternating section background */
--color-border: #d9e0ea; /* hairlines, card borders */
--color-on-dark: #ffffff; /* text on the blue background */
--color-on-dark-muted: #ccd7e6; /* secondary text on blue */
/* --- Image placeholder boxes (shown until real photos arrive) ------ */
--color-ph-bg: #e8edf4;
--color-ph-text: #4c5665;
/* --- Type ---------------------------------------------------------- */
/* Uses the fonts already installed on the visitor's device: fast, and
nothing to download. To use a Google Font instead, add its to
each page's and put the font name first in this list. */
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif;
--font-heading: var(--font-body);
/* --- Spacing & shape ----------------------------------------------- */
--wrap-max: 1120px; /* max page width */
--gutter: 1.25rem; /* side padding on phones */
--section-y: 3rem; /* vertical padding inside a section */
--radius: 14px; /* rounded corners — friendly, not childish */
--radius-sm: 8px;
--shadow: 0 2px 4px rgba(11, 36, 71, .06),
0 10px 24px rgba(11, 36, 71, .07);
--shadow-hover: 0 4px 8px rgba(11, 36, 71, .09),
0 16px 34px rgba(11, 36, 71, .12);
}
/* --- HIGHER LEARNING ACADEMY sub-brand ------------------------------------
Academy pages carry class="academy" on the . Same blue family, but a
brighter, more playful accent so it reads as a friendly sub-brand. */
body.academy {
--color-accent: #17a89a; /* bright teal */
--color-accent-dark: #0d766c;
--color-accent-soft: #e4f7f4;
--hla-sun: #f2994a; /* warm orange, used sparingly */
}
/* ==========================================================================
2. RESET & BASE ELEMENTS
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 1.0625rem; /* 17px — comfortable on phones */
line-height: 1.65;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
font-family: var(--font-heading);
line-height: 1.2;
color: var(--color-primary);
margin: 0 0 .6em;
letter-spacing: -0.015em;
}
h1 { font-size: clamp(2rem, 6vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 4.4vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.45rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1.15em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--color-primary-dark); }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: .4em; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: 2rem 0; }
/* Visible keyboard focus everywhere — required for accessibility. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid var(--color-accent-dark);
outline-offset: 2px;
border-radius: 3px;
}
/* ==========================================================================
3. LAYOUT HELPERS
========================================================================== */
/* .wrap centers content and keeps it from getting too wide. */
.wrap {
width: 100%;
max-width: var(--wrap-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 760px; }
/* .section is one horizontal band of the page. */
.section { padding-block: var(--section-y); }
.section--alt { background: var(--color-bg-alt); }
.section--tight { padding-block: 2rem; }
/* Small heading above a section title. */
.eyebrow {
display: block;
font-size: .78rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--color-accent-dark);
margin-bottom: .6rem;
}
/* Short decorative gold rule under a heading. */
.rule {
width: 64px; height: 4px;
background: var(--color-accent);
border-radius: 2px;
margin: 0 0 1.5rem;
}
.lead { font-size: 1.15rem; color: var(--color-text-muted); }
@media (min-width: 768px) {
:root { --gutter: 2rem; --section-y: 4.5rem; }
body { font-size: 1.09375rem; }
}
/* ==========================================================================
4. BUTTONS
========================================================================== */
.btn {
display: inline-block;
padding: .8rem 1.5rem;
border: 2px solid transparent;
border-radius: 999px;
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color .15s ease, color .15s ease,
border-color .15s ease, transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
/* Gold button with dark text — the main "Give" / primary action. */
.btn--primary {
background: var(--color-accent);
border-color: var(--color-accent);
color: #1f2430;
}
.btn--primary:hover {
background: var(--color-accent-dark);
border-color: var(--color-accent-dark);
color: #ffffff;
}
/* Blue outline button — secondary action on light backgrounds. */
.btn--outline {
background: transparent;
border-color: var(--color-primary);
color: var(--color-primary);
}
.btn--outline:hover { background: var(--color-primary); color: var(--color-on-dark); }
/* White outline button — for use on the dark blue bands. */
.btn--ghost {
background: transparent;
border-color: rgba(255,255,255,.7);
color: var(--color-on-dark);
}
.btn--ghost:hover { background: rgba(255,255,255,.14); color: var(--color-on-dark); }
.btn--lg { padding: 1rem 2.1rem; font-size: 1.09rem; }
/* A button that is not usable yet (e.g. the yearbook download). */
.btn--disabled,
.btn[aria-disabled="true"] {
background: var(--color-ph-bg);
border-color: var(--color-border);
color: var(--color-ph-text);
cursor: not-allowed;
}
.btn--disabled:hover,
.btn[aria-disabled="true"]:hover { transform: none; background: var(--color-ph-bg); color: var(--color-ph-text); }
/* Row of buttons that wraps neatly on small screens. */
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
/* ==========================================================================
5. SITE HEADER + NAVIGATION
========================================================================== */
.site-header {
background: var(--color-bg);
border-bottom: 1px solid var(--color-border);
position: relative;
z-index: 50;
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 72px;
padding-block: .65rem;
}
/* --- Logo / wordmark ------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; }
.brand__logo { width: 44px; height: 44px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
font-size: 1.02rem; font-weight: 800; color: var(--color-primary);
letter-spacing: -.01em;
}
.brand__tag {
font-size: .68rem; font-weight: 600; letter-spacing: .09em;
text-transform: uppercase; color: var(--color-text-muted);
}
/* Temporary text wordmark shown until the real logo file is added. */
.brand__mark {
width: 44px; height: 44px; flex: none;
display: grid; place-items: center;
border-radius: 12px;
background: var(--color-primary);
color: var(--color-on-dark);
font-weight: 800; font-size: .82rem; letter-spacing: .02em;
}
body.academy .brand__mark--hla { background: var(--color-accent); color: #ffffff; }
/* --- Hamburger button (visible under 768px only) --------------------- */
.nav-toggle {
display: inline-flex; align-items: center; gap: .5rem;
padding: .55rem .8rem;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-primary);
font: inherit; font-size: .9rem; font-weight: 700;
cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 18px; height: 2px; background: currentColor; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
/* --- The navigation itself ------------------------------------------- */
/* On phones the menu is hidden until the hamburger is pressed.
main.js adds/removes the "is-open" class. */
.site-nav {
display: none;
position: absolute;
left: 0; right: 0; top: 100%;
background: var(--color-bg);
border-bottom: 1px solid var(--color-border);
box-shadow: var(--shadow);
padding: .5rem var(--gutter) 1.25rem;
}
.site-nav.is-open { display: block; }
.site-nav__list {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column;
}
.site-nav__list a {
display: block;
padding: .7rem .25rem;
color: var(--color-text);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid var(--color-border);
}
.site-nav__list a:hover { color: var(--color-primary); }
/* The page you are currently on. */
.site-nav__list a[aria-current="page"] {
color: var(--color-primary);
box-shadow: inset 3px 0 0 var(--color-accent);
padding-left: .75rem;
}
.site-nav__list .btn { display: inline-block; border-bottom: 0; margin-top: 1rem; padding: .7rem 1.6rem; }
.site-nav__list .btn[aria-current="page"] { box-shadow: none; padding-left: 1.6rem; }
/* --- Language toggle EN | ES ---------------------------------------- */
.lang-switch {
display: flex; align-items: center; gap: .4rem;
margin-top: 1.1rem;
font-size: .85rem; font-weight: 700;
}
.lang-switch__sep { color: var(--color-border); }
.lang-switch a { color: var(--color-text-muted); text-decoration: none; padding: .2rem .35rem; }
.lang-switch a:hover { color: var(--color-primary); text-decoration: underline; }
.lang-switch__current { color: var(--color-primary); padding: .2rem .35rem; }
/* --- Desktop navigation (768px and up) ------------------------------- */
@media (min-width: 768px) {
.nav-toggle { display: none; }
.site-nav {
/* On desktop the links and the EN|ES toggle sit on one row. */
display: flex;
align-items: center;
position: static;
padding: 0;
border: 0;
box-shadow: none;
background: none;
}
.site-nav__list { flex-direction: row; align-items: center; gap: .2rem; }
.site-nav__list a {
border-bottom: 0;
padding: .5rem .6rem;
font-size: .96rem;
border-radius: var(--radius-sm);
}
.site-nav__list a[aria-current="page"] {
box-shadow: none;
padding-left: .6rem;
border-bottom: 3px solid var(--color-accent);
border-radius: 0;
}
.site-nav__list .btn { margin: 0 0 0 .5rem; padding: .6rem 1.35rem; font-size: .95rem; }
.site-nav__list .btn[aria-current="page"] { border-bottom: 0; padding-left: 1.35rem; }
.lang-switch { margin: 0 0 0 .75rem; padding-left: .9rem; border-left: 1px solid var(--color-border); }
}
@media (min-width: 1000px) {
.brand__logo, .brand__mark { width: 50px; height: 50px; }
.brand__name { font-size: 1.15rem; }
}
/* ==========================================================================
6. ACADEMY SUB-HEADER (Higher Learning Academy pages only)
========================================================================== */
.subheader {
background: var(--color-accent-soft);
border-bottom: 1px solid var(--color-border);
}
.subheader__inner {
display: flex; flex-wrap: wrap; align-items: center;
gap: .5rem 1.25rem;
padding-block: .7rem;
}
.subheader__back {
font-size: .86rem; font-weight: 700;
color: var(--color-primary);
text-decoration: none;
white-space: nowrap;
}
.subheader__back:hover { text-decoration: underline; }
.subnav__list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: .1rem .35rem;
}
.subnav__list a {
display: inline-block;
padding: .35rem .6rem;
border-radius: 999px;
font-size: .9rem; font-weight: 600;
color: var(--color-primary);
text-decoration: none;
}
.subnav__list a:hover { background: rgba(255,255,255,.75); }
.subnav__list a[aria-current="page"] {
background: var(--color-accent-dark); /* darker teal: white text needs AA contrast */
color: #ffffff;
}
@media (min-width: 768px) {
.subheader__inner { flex-wrap: nowrap; justify-content: space-between; }
}
/* ==========================================================================
7. HERO
========================================================================== */
.hero { background: var(--color-primary); color: var(--color-on-dark); }
.hero__inner { display: grid; gap: 2rem; padding-block: 2.75rem 3rem; }
.hero h1 { color: var(--color-on-dark); }
.hero p { color: var(--color-on-dark-muted); }
.hero__tagline { font-size: 1.13rem; max-width: 46ch; }
.hero .eyebrow { color: var(--color-accent); }
.hero__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.hero__img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
/* hero-home.jpg is already 4:3, so nothing is cropped and this line does
nothing today. It only takes effect if you swap in a photo that is NOT
4:3 — then it decides which part stays visible. If someone's head gets
cut off, use a SMALLER number to show more of the top of the picture. */
object-position: center 26%;
}
/* --- White card for the Higher Learning Academy logo ----------------------
The HLA logo is dark maroon with a transparent background, so placing it
straight onto the navy hero would make it almost unreadable. It sits on a
clean white card instead. The card keeps the same 4:3 shape as the photo
hero on the other pages, so both heroes line up the same way. */
.logo-card {
display: grid;
place-items: center;
aspect-ratio: 4 / 3;
padding: clamp(1.25rem, 5vw, 3rem);
background: #ffffff;
border-radius: var(--radius);
}
.logo-card__img {
width: 100%;
max-width: 340px; /* keeps the logo from ballooning on wide screens */
max-height: 100%;
height: auto;
object-fit: contain; /* never distort or crop the logo */
}
/* Smaller hero used on interior pages (no photo). */
.page-hero {
background: var(--color-primary);
color: var(--color-on-dark);
padding-block: 2.5rem;
}
.page-hero h1 { color: var(--color-on-dark); margin-bottom: .35rem; }
.page-hero p { color: var(--color-on-dark-muted); max-width: 60ch; margin-bottom: 0; }
.page-hero .rule { margin-block: 1rem .25rem; }
/* Academy home hero — same blue, playful accent details. */
body.academy .hero { background: var(--color-primary); }
body.academy .hero .eyebrow,
body.academy .page-hero .eyebrow { color: var(--color-accent); }
@media (min-width: 900px) {
.hero__inner {
grid-template-columns: 1.05fr 1fr;
align-items: center;
gap: 3rem;
padding-block: 4rem 4.5rem;
}
.page-hero { padding-block: 3.5rem; }
}
/* ==========================================================================
8. CARDS & FEATURE GRIDS
========================================================================== */
.card-grid { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .card-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.card {
display: flex; flex-direction: column;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1.6rem;
box-shadow: var(--shadow);
transition: box-shadow .15s ease, transform .15s ease;
}
.card > :last-child { margin-top: auto; padding-top: 1.1rem; }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--color-text-muted); }
/* A section heading used inside a card. Sized to sit comfortably in the card
instead of at full page-heading size, while still being a real . */
.card h2 {
font-size: clamp(1.15rem, 2.6vw, 1.4rem);
margin-bottom: .5rem;
}
/* By default a card pushes its last line to the bottom, which lines up the
"read more" links across a row. Cards that end in ordinary body text should
keep that text directly under the heading instead. */
.card--text > :last-child { margin-top: 0; padding-top: 0; }
/* Cards that are whole links (the two feature cards on the home page). */
.card--link:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
/* Small round icon/number at the top of a card. */
.card__badge {
width: 46px; height: 46px;
display: grid; place-items: center;
margin-bottom: 1rem;
border-radius: 50%;
background: var(--color-accent-soft);
color: var(--color-accent-dark);
font-weight: 800; font-size: 1.15rem;
}
/* Simple link that looks like a call to action inside a card. */
.card__more { font-weight: 700; text-decoration: none; color: var(--color-primary); }
.card__more::after { content: " \2192"; }
.card__more:hover { text-decoration: underline; }
/* ==========================================================================
9. TEXT BLOCKS, BELIEFS, QUOTES, STEPS
========================================================================== */
/* .prose is a comfortable reading column for long text. */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }
/* One numbered article of the Statement of Faith. */
.belief {
padding: 1.6rem 0 0;
border-top: 1px solid var(--color-border);
margin-top: 1.6rem;
}
.belief:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.belief h2 {
display: flex; align-items: baseline; gap: .7rem;
margin-top: 0; font-size: clamp(1.25rem, 3.2vw, 1.6rem);
}
.belief__num {
flex: none;
font-size: .8rem; font-weight: 800;
color: var(--color-accent-dark);
background: var(--color-accent-soft);
border-radius: 999px;
padding: .22em .7em;
letter-spacing: .03em;
}
/* Pull quote / director's message. */
.quote {
margin: 0;
padding: 1.5rem 1.5rem 1.4rem;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-left: 5px solid var(--color-accent);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.quote p { font-size: 1.08rem; }
.quote cite {
display: block;
font-style: normal; font-weight: 700;
color: var(--color-primary);
margin-top: .9rem;
}
.quote cite span { display: block; font-weight: 500; font-size: .9rem; color: var(--color-text-muted); }
/* Big centered quotation (the Mandela quote). */
.quote--feature {
border: 0; border-left: 0;
background: var(--color-accent-soft);
box-shadow: none;
text-align: center;
padding: 2rem 1.5rem;
}
.quote--feature p {
font-size: clamp(1.2rem, 3.2vw, 1.6rem);
line-height: 1.4; font-weight: 600;
color: var(--color-primary);
max-width: 32ch; margin-inline: auto;
}
.quote--feature cite { color: var(--color-text-muted); font-weight: 600; }
/* Numbered process steps (admissions). */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.step {
display: grid;
grid-template-columns: 46px 1fr;
gap: 1rem;
align-items: start;
padding: 1.35rem;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
margin: 0;
}
.step__num {
width: 46px; height: 46px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--color-primary);
color: var(--color-on-dark);
font-weight: 800;
}
.step h3 { margin-bottom: .3rem; }
.step p { color: var(--color-text-muted); margin-bottom: 0; }
/* Plain contact details list. */
.details { list-style: none; padding: 0; margin: 0; }
.details li { margin-bottom: 1rem; }
.details strong { display: block; color: var(--color-primary); font-size: .82rem;
letter-spacing: .09em; text-transform: uppercase; }
/* Small note badge used to mark information still being confirmed. */
.note {
display: inline-block;
padding: .3rem .7rem;
background: var(--color-accent-soft);
border-radius: 999px;
font-size: .82rem; font-weight: 700;
color: var(--color-accent-dark);
}
/* ==========================================================================
10. IMAGE PLACEHOLDERS & GALLERY
========================================================================== */
/* A styled box that stands in for a photo we do not have yet, so the page
never shows a broken image. Each one is marked with a TODO comment in the
HTML explaining exactly which ![]()
tag to paste in its place. */
.img-ph {
display: flex; align-items: center; justify-content: center;
min-height: 200px;
padding: 1rem;
background-color: var(--color-ph-bg);
background-image: repeating-linear-gradient(45deg,
transparent 0 12px, rgba(18,56,107,.05) 12px 24px);
border: 2px dashed var(--color-border);
border-radius: var(--radius);
color: var(--color-ph-text);
font-size: .85rem; font-weight: 700;
text-align: center;
}
.hero__media .img-ph { border-radius: 0; aspect-ratio: 4 / 3; min-height: 0; }
.gallery {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.gallery figure { margin: 0; }
.gallery img,
.gallery .img-ph {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
/* The gallery photos are tall portraits shown in 4:3 frames, so the top and
bottom are trimmed. This keeps the faces in view rather than centring the
crop. A SMALLER number shows more of the top of each picture. */
object-position: center 26%;
border-radius: var(--radius);
min-height: 0;
}
.gallery figcaption {
margin-top: .5rem;
font-size: .88rem;
color: var(--color-text-muted);
}
/* ==========================================================================
11. FORMS
========================================================================== */
.form { display: grid; gap: 1.1rem; max-width: 34rem; }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 700; font-size: .95rem; color: var(--color-primary); }
.field input,
.field textarea {
width: 100%;
padding: .75rem .85rem;
font: inherit;
color: var(--color-text);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
.field input:focus, .field textarea:focus { border-color: var(--color-primary-light); }
.field textarea { min-height: 9rem; resize: vertical; }
.field__hint { font-size: .85rem; color: var(--color-text-muted); }
/* Message shown because the form has no backend connected yet. */
.form-notice {
padding: 1rem 1.15rem;
background: var(--color-accent-soft);
border-radius: var(--radius-sm);
font-size: .93rem;
color: var(--color-text);
}
/* ==========================================================================
12. CALL-TO-ACTION BAND
========================================================================== */
.cta-band {
background: var(--color-primary-dark);
color: var(--color-on-dark);
text-align: center;
}
.cta-band h2 { color: var(--color-on-dark); }
.cta-band p { color: var(--color-on-dark-muted); max-width: 54ch; margin-inline: auto; }
.cta-band .rule { margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 1.75rem; }
/* ==========================================================================
13. SITE FOOTER
========================================================================== */
.site-footer { background: var(--color-primary); color: var(--color-on-dark-muted); }
.site-footer a { color: var(--color-on-dark); text-decoration: none; }
.site-footer a:hover { color: #ffffff; text-decoration: underline; }
.site-footer h2, .site-footer h3 { color: var(--color-on-dark); font-size: 1rem;
letter-spacing: .08em; text-transform: uppercase; }
.site-footer__top { display: grid; gap: 2rem; padding-block: 2.75rem; }
.site-footer__name { font-size: 1.25rem; font-weight: 800; color: var(--color-on-dark);
margin-bottom: .25rem; }
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { margin-bottom: .5rem; }
/* Social icon placeholders. */
.social { display: flex; gap: .6rem; margin-top: 1rem; }
.social a {
width: 40px; height: 40px;
display: grid; place-items: center;
border: 1px solid rgba(255,255,255,.3);
border-radius: 50%;
font-size: .72rem; font-weight: 800;
}
.social a:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.site-footer__bottom {
border-top: 1px solid rgba(255,255,255,.18);
padding-block: 1.25rem 1.5rem;
display: flex; flex-direction: column; gap: .5rem;
font-size: .85rem;
}
/* Small credit line — present on every page. */
.credit { font-size: .8rem; color: var(--color-on-dark-muted); }
.credit a { color: var(--color-on-dark-muted); text-decoration: underline; }
.credit a:hover { color: #ffffff; }
@media (min-width: 700px) {
.site-footer__top { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.site-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
/* ==========================================================================
14. UTILITIES & ACCESSIBILITY
========================================================================== */
/* "Skip to content" link — hidden until a keyboard user tabs to it. */
.skip-link {
position: absolute; left: -9999px; top: 0;
z-index: 100;
padding: .75rem 1.15rem;
background: var(--color-accent);
color: #1f2430;
font-weight: 700;
border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }
/* Text for screen readers only. */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.stack > * + * { margin-top: 1.25rem; }
.mt-2 { margin-top: 2rem; }
/* Respect visitors who ask for less animation. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* ==========================================================================
15. PRINT
========================================================================== */
@media print {
.site-header, .subheader, .cta-band, .site-footer, .skip-link { display: none; }
body { font-size: 11pt; color: #000; }
a { text-decoration: underline; color: #000; }
}