/* ============================================================
FITNESS MADE SIMPLE — styles.css
Shared stylesheet. One file for all pages.
============================================================ */
/* Fonts are loaded with tags in each page's , not with an
@import here. An @import inside a stylesheet serialises the requests:
the browser has to download and parse this file before it even learns
the fonts exist, which costs a full round trip on mobile connections.
If you add a page, copy the three font tags from index.html. */
/* ============================================================
1. CSS CUSTOM PROPERTIES
============================================================ */
:root {
/* Color palette */
--clr-bg: #1A1A18;
--clr-surface: #252520;
--clr-deep-forest: #2A4A2A;
--clr-green: #4A8C4A;
--clr-brown: #8E5A28;
--clr-light-brown: #C49050;
--clr-text: #F0ECE4;
--clr-text-muted: rgba(240, 236, 228, 0.6);
--clr-border: rgba(74, 140, 74, 0.18);
--clr-border-warm: rgba(196, 144, 80, 0.2);
/* Typography */
--font-headline: 'Oswald', sans-serif;
--font-body: 'Mulish', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Layout */
--max-width: 1100px;
--nav-height: 68px;
--section-gap: 6rem;
--radius: 10px;
--radius-sm: 5px;
/* Transitions */
--ease: 0.22s ease;
}
/* ============================================================
2. RESET & BASE
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
background-color: var(--clr-bg);
color: var(--clr-text);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.7;
min-height: 100vh;
overflow-x: hidden;
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
ul, ol {
list-style: none;
}
button {
cursor: pointer;
border: none;
background: none;
font: inherit;
color: inherit;
}
input, textarea {
font: inherit;
}
/* ============================================================
3. TYPOGRAPHY
============================================================ */
h1, h2, h3, h4, h5 {
font-family: var(--font-headline);
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.08;
font-weight: 700;
}
.highlight {
color: var(--clr-light-brown);
}
.highlight-green {
color: var(--clr-green);
}
/* ============================================================
4. LAYOUT UTILITIES
============================================================ */
.container {
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1.5rem;
}
section {
padding: var(--section-gap) 0;
}
.section-label {
display: block;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--clr-green);
margin-bottom: 0.75rem;
}
/* ============================================================
5. BUTTONS
============================================================ */
.btn {
display: inline-block;
padding: 0.85rem 2.1rem;
border-radius: var(--radius-sm);
font-family: var(--font-headline);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
transition: all var(--ease);
white-space: nowrap;
line-height: 1;
}
.btn-primary {
background: var(--clr-brown);
color: var(--clr-text);
border: 2px solid var(--clr-brown);
}
.btn-primary:hover {
background: #a06430;
border-color: #a06430;
transform: translateY(-1px);
}
.btn-secondary {
background: transparent;
color: var(--clr-green);
border: 2px solid var(--clr-green);
}
.btn-secondary:hover {
background: var(--clr-green);
color: var(--clr-bg);
transform: translateY(-1px);
}
.btn-sm {
padding: 0.6rem 1.4rem;
font-size: 0.875rem;
}
/* ============================================================
6. NAVIGATION
============================================================ */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--nav-height);
background: rgba(26, 26, 24, 0.94);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--clr-border);
z-index: 1000;
display: flex;
align-items: center;
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1.5rem;
}
.nav__brand {
display: flex;
align-items: center;
gap: 0.65rem;
flex-shrink: 0;
}
/* Split Diamond mark.
The viewBox is cropped to the artwork (14 4 62 82) rather than the
original 0 0 90 90, which left a third of the box as empty gutter and
made the mark read undersized next to the wordmark. Height is the
controlling dimension; width follows the 62:82 aspect ratio. */
.logo-mark {
height: 34px;
width: auto;
aspect-ratio: 62 / 82; /* belt and braces: older Safari can be shaky
about deriving an SVG's intrinsic ratio
from the viewBox inside a flex container */
display: block;
flex-shrink: 0;
}
/* stroke-width is measured in viewBox user units, so it shrinks along
with the mark. At the original 1.8 it fell below one device pixel
anywhere under ~60px and the outline greyed out, which matters here
because the outline IS the logo against charcoal. Set it per
placement to land near 1px, but never so heavy that it closes the
4-unit gap that defines the split. */
.logo-mark polygon {
stroke-width: 2.4;
}
/* Brand lockup: business name on top with the accent word in green,
personal byline underneath. Both lines use line-height 1 so the pair
stacks tightly enough to sit inside the 68px nav. */
.nav__lockup {
display: flex;
flex-direction: column;
gap: 0.22rem;
}
.nav__name {
font-family: var(--font-headline);
font-size: 0.98rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--clr-text);
line-height: 1;
white-space: nowrap;
}
/* The wordmark rule, used everywhere the business name appears as a
brand lockup: "Fitness Made" in off-white, "Simple" in forest green.
Deliberately NOT applied to the name inside running prose, where a
coloured word mid-sentence reads as a typo rather than as branding. */
.nav__accent,
.brand-accent {
color: var(--clr-green);
}
.nav__byline {
font-family: var(--font-body);
font-size: 0.66rem;
font-style: italic;
font-weight: 400;
letter-spacing: 0.05em;
color: var(--clr-text-muted);
line-height: 1;
white-space: nowrap;
}
.nav__links {
display: flex;
align-items: center;
gap: 2.25rem;
}
/* Nav links sit in Light Brown and go Forest Green on hover and for the
current page. Light Brown rather than the darker --clr-brown, which
only reaches about 3:1 against charcoal at this size and fails the
4.5:1 readability floor for body-size text. Light Brown clears 6:1. */
.nav__links a {
font-family: var(--font-headline);
font-size: 0.88rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--clr-light-brown);
transition: color var(--ease);
position: relative;
padding-bottom: 2px;
}
.nav__links a::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
right: 0;
height: 2px;
background: var(--clr-green);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--ease);
}
.nav__links a:hover,
.nav__links a:focus-visible {
color: var(--clr-green);
}
.nav__links a:hover::after,
.nav__links a:focus-visible::after,
.nav__links a.active::after {
transform: scaleX(1);
}
/* Current page */
.nav__links a.active {
color: var(--clr-green);
}
/* Hamburger */
.nav__hamburger {
display: none;
flex-direction: column;
gap: 5px;
padding: 6px 4px;
cursor: pointer;
}
.nav__hamburger span {
display: block;
width: 24px;
height: 2px;
background: var(--clr-text);
border-radius: 2px;
transition: all var(--ease);
transform-origin: center;
}
.nav__hamburger.is-open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav__hamburger.is-open span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.nav__hamburger.is-open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Mobile menu */
.nav__mobile {
display: none;
position: fixed;
top: var(--nav-height);
left: 0;
right: 0;
background: var(--clr-surface);
border-bottom: 1px solid var(--clr-border);
padding: 1.5rem;
flex-direction: column;
gap: 0;
z-index: 999;
transform: translateY(-8px);
opacity: 0;
transition: all var(--ease);
}
.nav__mobile.is-open {
display: flex;
transform: translateY(0);
opacity: 1;
}
/* Same brown-to-green behaviour as the desktop links. */
.nav__mobile a {
font-family: var(--font-headline);
font-size: 1.1rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--clr-light-brown);
transition: color var(--ease);
padding: 0.85rem 0;
border-bottom: 1px solid rgba(240, 236, 228, 0.07);
}
.nav__mobile a:last-child {
border-bottom: none;
}
.nav__mobile a:hover,
.nav__mobile a:focus-visible,
.nav__mobile a.active {
color: var(--clr-green);
}
/* ============================================================
7. FOOTER
============================================================ */
.footer {
background: var(--clr-surface);
border-top: 1px solid var(--clr-border);
padding: 3.5rem 0 2rem;
}
.footer__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 2rem;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1.5rem;
}
.footer__brand {
display: flex;
align-items: center;
gap: 0.6rem;
}
.footer__brand .logo-mark {
height: 30px;
}
.footer__brand-name {
font-family: var(--font-headline);
font-size: 0.95rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--clr-text-muted);
}
.footer__nav {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.footer__nav a {
font-family: var(--font-headline);
font-size: 0.82rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--clr-text-muted);
transition: color var(--ease);
}
.footer__nav a:hover {
color: var(--clr-green);
}
.footer__social a {
color: var(--clr-text-muted);
font-size: 0.9rem;
transition: color var(--ease);
}
.footer__social a:hover {
color: var(--clr-light-brown);
}
.footer__copy {
width: 100%;
text-align: center;
padding-top: 2rem;
margin-top: 1rem;
border-top: 1px solid rgba(240, 236, 228, 0.07);
font-size: 0.78rem;
color: var(--clr-text-muted);
}
/* ============================================================
8. CARD COMPONENT
============================================================ */
.card {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
padding: 2rem;
transition: border-color var(--ease), transform var(--ease);
}
.card:hover {
border-color: rgba(74, 140, 74, 0.4);
transform: translateY(-2px);
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
/* ============================================================
9. FORMS
============================================================ */
.form-group {
margin-bottom: 1.35rem;
}
.form-group label {
display: block;
font-family: var(--font-headline);
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--clr-text-muted);
margin-bottom: 0.45rem;
}
.form-group input,
.form-group textarea {
width: 100%;
background: var(--clr-bg);
border: 1px solid rgba(74, 140, 74, 0.22);
border-radius: var(--radius-sm);
color: var(--clr-text);
font-size: 1rem;
padding: 0.8rem 1rem;
transition: border-color var(--ease);
outline: none;
appearance: none;
}
.form-group input:focus,
.form-group textarea:focus {
border-color: var(--clr-green);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--clr-text-muted);
opacity: 0.5;
}
.form-group textarea {
resize: vertical;
min-height: 140px;
}
/* ============================================================
10. PAGE HEADER (inner pages)
============================================================ */
.page-header {
padding: calc(var(--nav-height) + 4.5rem) 0 4rem;
background: linear-gradient(140deg, var(--clr-deep-forest) 0%, var(--clr-bg) 55%);
border-bottom: 1px solid var(--clr-border);
position: relative;
overflow: hidden;
}
.page-header::after {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 40%;
background: linear-gradient(to left, rgba(74, 140, 74, 0.05) 0%, transparent 100%);
clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.page-header__inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1.5rem;
position: relative;
z-index: 1;
}
.page-header h1 {
font-size: clamp(2.6rem, 6vw, 4.5rem);
line-height: 1.03;
margin-bottom: 1rem;
}
.page-header p {
max-width: 580px;
color: var(--clr-text-muted);
font-size: 1.1rem;
}
/* ============================================================
11. HERO (index.html)
============================================================ */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding-top: var(--nav-height);
}
.hero__bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 70% at 72% 38%, rgba(42, 74, 42, 0.38) 0%, transparent 65%),
radial-gradient(ellipse 40% 50% at 15% 75%, rgba(142, 90, 40, 0.12) 0%, transparent 55%),
var(--clr-bg);
z-index: 0;
}
.hero__accent {
position: absolute;
right: 0;
top: 0;
width: 42%;
height: 100%;
background: linear-gradient(145deg, transparent 0%, rgba(42, 74, 42, 0.10) 100%);
clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%);
z-index: 0;
}
.hero__inner {
position: relative;
z-index: 1;
max-width: var(--max-width);
margin: 0 auto;
padding: 5rem 1.5rem;
}
.hero__label {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--clr-green);
margin-bottom: 1.5rem;
border: 1px solid rgba(74, 140, 74, 0.3);
padding: 0.35rem 0.8rem;
border-radius: 3px;
}
.hero__headline {
font-size: clamp(3.2rem, 8.5vw, 6.8rem);
line-height: 0.98;
font-weight: 700;
margin-bottom: 1.75rem;
max-width: 12ch;
}
.hero__sub {
font-size: clamp(1rem, 2vw, 1.15rem);
max-width: 520px;
color: var(--clr-text-muted);
margin-bottom: 2.75rem;
line-height: 1.75;
}
.hero__cta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
/* ============================================================
12. PHILOSOPHY (index.html)
============================================================ */
.philosophy {
background: var(--clr-deep-forest);
border-top: 1px solid var(--clr-border);
border-bottom: 1px solid var(--clr-border);
}
.philosophy__inner {
max-width: 800px;
margin: 0 auto;
padding: 0 1.5rem;
text-align: center;
}
.philosophy__quote {
font-size: clamp(1.05rem, 2.2vw, 1.3rem);
line-height: 1.85;
color: var(--clr-text);
margin-bottom: 3rem;
}
.pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 1rem;
}
.pillar {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
text-align: center;
}
.pillar__name {
font-family: var(--font-headline);
font-size: 1.4rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--clr-light-brown);
line-height: 1;
}
.pillar__desc {
font-size: 0.88rem;
color: var(--clr-text-muted);
}
/* ============================================================
13. SERVICES TEASER (index.html)
============================================================ */
.services-teaser {
background: var(--clr-bg);
}
.services-teaser__inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1.5rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4.5rem;
align-items: center;
}
.services-teaser__text h2 {
font-size: clamp(2rem, 4vw, 3.2rem);
margin-bottom: 1.25rem;
line-height: 1.05;
}
.services-teaser__text p {
color: var(--clr-text-muted);
margin-bottom: 2.25rem;
font-size: 1.05rem;
}
.teaser-list {
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.teaser-list li {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--clr-text-muted);
font-size: 0.95rem;
}
.teaser-list li::before {
content: '';
display: block;
width: 6px;
height: 6px;
background: var(--clr-green);
border-radius: 50%;
flex-shrink: 0;
}
/* ============================================================
14. CONTACT SECTION (index.html)
============================================================ */
.contact {
background: var(--clr-surface);
border-top: 1px solid var(--clr-border);
}
.contact__inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1.5rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4.5rem;
align-items: start;
}
.contact__info h2 {
font-size: clamp(1.9rem, 3.5vw, 2.8rem);
margin-bottom: 1.25rem;
line-height: 1.05;
}
.contact__info p {
color: var(--clr-text-muted);
margin-bottom: 2.25rem;
font-size: 1.05rem;
}
.contact__details {
display: flex;
flex-direction: column;
gap: 0.9rem;
margin-bottom: 2rem;
}
.contact__detail {
display: flex;
align-items: center;
gap: 0.65rem;
font-size: 0.95rem;
color: var(--clr-text-muted);
}
.contact__detail-label {
font-family: var(--font-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--clr-green);
flex-shrink: 0;
}
.contact__detail a {
color: var(--clr-light-brown);
transition: color var(--ease);
}
.contact__detail a:hover {
color: var(--clr-text);
}
/* Calendly placeholder */
.calendly-placeholder {
margin-top: 1.75rem;
padding: 1.25rem 1.5rem;
border: 1px dashed rgba(74, 140, 74, 0.28);
border-radius: var(--radius);
color: var(--clr-text-muted);
font-size: 0.8rem;
font-family: var(--font-mono);
line-height: 1.6;
}
/* ============================================================
15. ABOUT PAGE
============================================================ */
.about-layout {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1.5rem;
display: grid;
grid-template-columns: 1fr 320px;
gap: 4.5rem;
align-items: start;
}
.about-bio p {
font-size: 1.08rem;
color: var(--clr-text-muted);
margin-bottom: 1.6rem;
line-height: 1.82;
}
.about-bio p:last-child {
margin-bottom: 0;
}
/* Headshot slot. Reads as an intentional branded panel rather than an
unfinished placeholder, so it can sit on the live site without
announcing that content is missing. */
.photo-panel {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
aspect-ratio: 3 / 4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
text-align: center;
padding: 2rem;
}
.photo-panel .logo-mark {
height: 62px;
opacity: 0.9;
}
.photo-panel__name {
font-family: var(--font-headline);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--clr-text);
}
.photo-panel__meta {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--clr-green);
}
/* Ready for the real photo: drop in
and it just works. */
.about-photo {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: var(--radius);
border: 1px solid var(--clr-border);
}
.credentials {
background: var(--clr-surface);
border-top: 1px solid var(--clr-border);
border-bottom: 1px solid var(--clr-border);
padding: var(--section-gap) 0;
}
.credentials__inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1.5rem;
}
.credentials h2 {
font-size: clamp(1.8rem, 3.5vw, 2.5rem);
margin-bottom: 2rem;
}
.credentials__list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.credentials__item {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.25rem 1.5rem;
background: var(--clr-bg);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
transition: border-color var(--ease);
}
.credentials__item:hover {
border-color: rgba(74, 140, 74, 0.35);
}
.credentials__badge {
background: var(--clr-deep-forest);
border: 1px solid var(--clr-green);
border-radius: 3px;
padding: 0.3rem 0.65rem;
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--clr-green);
text-transform: uppercase;
letter-spacing: 0.1em;
white-space: nowrap;
flex-shrink: 0;
}
.credentials__text {
font-size: 0.95rem;
color: var(--clr-text-muted);
}
/* ============================================================
16. SERVICES PAGE
============================================================ */
.services-grid {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1.5rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.service-card {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-left: 3px solid var(--clr-green);
border-radius: var(--radius);
padding: 2rem;
display: flex;
flex-direction: column;
transition: border-color var(--ease), transform var(--ease), border-left-color var(--ease);
}
.service-card:hover {
border-color: rgba(74, 140, 74, 0.4);
border-left-color: var(--clr-light-brown);
transform: translateY(-2px);
}
.service-card__location {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--clr-light-brown);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 0.4rem;
}
.service-card__title {
font-family: var(--font-headline);
font-size: 1.35rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--clr-text);
margin-bottom: 1rem;
line-height: 1.15;
}
.service-card__body {
flex: 1;
font-size: 0.95rem;
color: var(--clr-text-muted);
line-height: 1.72;
margin-bottom: 1.75rem;
}
/* How it works */
.how-it-works {
background: var(--clr-deep-forest);
border-top: 1px solid var(--clr-border);
border-bottom: 1px solid var(--clr-border);
}
.how-it-works__inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1.5rem;
}
.how-it-works h2 {
font-size: clamp(1.9rem, 3.5vw, 2.8rem);
margin-bottom: 3.5rem;
}
.steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
}
.step {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.step__num {
font-family: var(--font-mono);
font-size: 2.8rem;
font-weight: 500;
color: var(--clr-light-brown);
line-height: 1;
opacity: 0.85;
}
.step__title {
font-family: var(--font-headline);
font-size: 1.15rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--clr-text);
}
.step__desc {
font-size: 0.92rem;
color: var(--clr-text-muted);
line-height: 1.65;
}
/* Free Resources */
.free-resources {
background: var(--clr-bg);
}
.free-resources__inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1.5rem;
}
.free-resources__header {
margin-bottom: 2.5rem;
}
.free-resources h2 {
font-size: clamp(1.9rem, 3.5vw, 2.8rem);
margin-bottom: 0.75rem;
}
.free-resources__sub {
color: var(--clr-text-muted);
font-size: 1.05rem;
max-width: 560px;
}
.resource-card {
background: var(--clr-surface);
border: 1px solid var(--clr-border-warm);
border-radius: var(--radius);
padding: 2rem;
display: flex;
flex-direction: column;
transition: border-color var(--ease), transform var(--ease);
}
.resource-card:hover {
border-color: rgba(196, 144, 80, 0.45);
transform: translateY(-2px);
}
.resource-card__tag {
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--clr-light-brown);
text-transform: uppercase;
letter-spacing: 0.18em;
margin-bottom: 0.6rem;
}
.resource-card__title {
font-family: var(--font-headline);
font-size: 1.15rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--clr-text);
margin-bottom: 0.75rem;
line-height: 1.2;
}
.resource-card__body {
flex: 1;
font-size: 0.9rem;
color: var(--clr-text-muted);
line-height: 1.7;
margin-bottom: 1.5rem;
}
/* ============================================================
17. PROGRAMS PAGE
============================================================ */
.programs__inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1.5rem;
}
.programs__intro {
max-width: 580px;
color: var(--clr-text-muted);
margin-bottom: 3rem;
font-size: 1.05rem;
}
.programs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
}
.program-card {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
overflow: hidden;
transition: border-color var(--ease), transform var(--ease);
}
.program-card:hover {
border-color: rgba(74, 140, 74, 0.5);
transform: translateY(-3px);
}
.program-card__preview {
background: linear-gradient(140deg, var(--clr-deep-forest) 0%, var(--clr-bg) 100%);
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
border-bottom: 1px solid var(--clr-border);
position: relative;
overflow: hidden;
}
.program-card__preview::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 60% 40%, rgba(74, 140, 74, 0.15) 0%, transparent 60%);
}
.program-card__preview .logo-mark {
height: 46px;
opacity: 0.85;
position: relative;
z-index: 1;
}
/* Bigger placement, so the stroke can come back down toward the
proportions of the original 90px artwork. */
.program-card__preview .logo-mark polygon {
stroke-width: 2.1;
}
.program-card__preview-label {
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--clr-green);
text-transform: uppercase;
letter-spacing: 0.22em;
position: relative;
z-index: 1;
}
.program-card__body {
padding: 2rem;
}
.program-card__tag {
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--clr-green);
text-transform: uppercase;
letter-spacing: 0.18em;
margin-bottom: 0.6rem;
}
.program-card__title {
font-family: var(--font-headline);
font-size: 1.45rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--clr-text);
margin-bottom: 0.85rem;
line-height: 1.1;
}
.program-card__desc {
font-size: 0.95rem;
color: var(--clr-text-muted);
line-height: 1.72;
margin-bottom: 1.75rem;
}
/* ============================================================
18. AI CHAT WIDGET
============================================================ */
.chat-widget {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 2000;
}
.chat-toggle {
width: 56px;
height: 56px;
background: var(--clr-brown);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
transition: all var(--ease);
color: var(--clr-text);
position: relative;
}
.chat-toggle:hover {
background: #a06430;
transform: scale(1.07);
}
.chat-toggle svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.chat-toggle__close {
display: none;
}
.chat-widget.is-open .chat-toggle__open {
display: none;
}
.chat-widget.is-open .chat-toggle__close {
display: block;
}
.chat-panel {
position: absolute;
bottom: calc(100% + 1rem);
right: 0;
width: 350px;
background: var(--clr-surface);
border: 1px solid rgba(74, 140, 74, 0.28);
border-radius: 14px;
display: flex;
flex-direction: column;
box-shadow: 0 10px 50px rgba(0, 0, 0, 0.55);
overflow: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(12px) scale(0.96);
transition: opacity var(--ease), transform var(--ease);
}
.chat-panel.is-open {
opacity: 1;
pointer-events: all;
transform: translateY(0) scale(1);
}
/* Surface rather than deep forest. The wordmark's green "Simple" only
reaches about 2:1 against #2A4A2A, which is unreadable; against the
surface tone it clears 4.5:1. The green top border keeps the accent. */
.chat-panel__header {
background: var(--clr-surface);
padding: 1rem 1.2rem;
border-top: 3px solid var(--clr-green);
border-bottom: 1px solid var(--clr-border);
display: flex;
align-items: center;
gap: 0.65rem;
}
.chat-panel__header .logo-mark {
height: 28px;
flex-shrink: 0;
}
.chat-panel__info {
flex: 1;
}
.chat-panel__title {
font-family: var(--font-headline);
font-size: 0.88rem;
text-transform: uppercase;
letter-spacing: 0.1em;
line-height: 1.2;
}
.chat-panel__sub {
font-family: var(--font-mono);
font-size: 0.65rem;
color: var(--clr-green);
letter-spacing: 0.05em;
}
.chat-panel__close {
color: var(--clr-text-muted);
font-size: 1.3rem;
line-height: 1;
transition: color var(--ease);
padding: 0 0.25rem;
margin-left: auto;
}
.chat-panel__close:hover {
color: var(--clr-text);
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
min-height: 220px;
max-height: 310px;
}
.chat-messages::-webkit-scrollbar {
width: 4px;
}
.chat-messages::-webkit-scrollbar-track {
background: transparent;
}
.chat-messages::-webkit-scrollbar-thumb {
background: rgba(74, 140, 74, 0.3);
border-radius: 4px;
}
.chat-msg {
display: flex;
flex-direction: column;
max-width: 86%;
}
.chat-msg--user {
align-self: flex-end;
align-items: flex-end;
}
.chat-msg--assistant {
align-self: flex-start;
align-items: flex-start;
}
.chat-msg__bubble {
padding: 0.6rem 0.95rem;
border-radius: 11px;
font-size: 0.875rem;
line-height: 1.55;
}
.chat-msg--user .chat-msg__bubble {
background: var(--clr-brown);
color: var(--clr-text);
border-bottom-right-radius: 3px;
}
.chat-msg--assistant .chat-msg__bubble {
background: var(--clr-bg);
color: var(--clr-text);
border-bottom-left-radius: 3px;
border: 1px solid rgba(74, 140, 74, 0.15);
}
.chat-typing {
display: flex;
align-items: center;
gap: 5px;
padding: 0.7rem 0.95rem;
background: var(--clr-bg);
border-radius: 11px;
border-bottom-left-radius: 3px;
border: 1px solid rgba(74, 140, 74, 0.15);
width: fit-content;
}
.chat-typing span {
width: 6px;
height: 6px;
background: var(--clr-green);
border-radius: 50%;
animation: typing-dot 1.4s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-dot {
0%, 80%, 100% { transform: scale(0.55); opacity: 0.35; }
40% { transform: scale(1); opacity: 1; }
}
.chat-error {
font-size: 0.78rem;
color: var(--clr-light-brown);
padding: 0.5rem 0.95rem;
background: rgba(196, 144, 80, 0.08);
border: 1px solid rgba(196, 144, 80, 0.2);
border-radius: 8px;
align-self: flex-start;
}
.chat-panel__input {
padding: 0.75rem;
border-top: 1px solid rgba(74, 140, 74, 0.14);
display: flex;
gap: 0.5rem;
align-items: center;
}
.chat-panel__input input {
flex: 1;
background: var(--clr-bg);
border: 1px solid rgba(74, 140, 74, 0.2);
border-radius: 7px;
color: var(--clr-text);
font-size: 0.875rem;
padding: 0.55rem 0.8rem;
outline: none;
transition: border-color var(--ease);
appearance: none;
}
.chat-panel__input input:focus {
border-color: var(--clr-green);
}
.chat-panel__input input::placeholder {
color: var(--clr-text-muted);
opacity: 0.55;
}
.chat-send {
width: 38px;
height: 38px;
min-width: 38px;
background: var(--clr-green);
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--ease);
flex-shrink: 0;
}
.chat-send:hover {
background: #5aaa5a;
}
.chat-send:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.chat-send svg {
width: 16px;
height: 16px;
fill: none;
stroke: var(--clr-bg);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ============================================================
19. ENTRANCE ANIMATIONS
============================================================ */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-up {
opacity: 0;
animation: fadeUp 0.65s ease forwards;
}
.fade-up.delay-1 { animation-delay: 0.1s; }
.fade-up.delay-2 { animation-delay: 0.22s; }
.fade-up.delay-3 { animation-delay: 0.34s; }
/* ============================================================
20. RESPONSIVE — MOBILE FIRST
============================================================ */
@media (max-width: 860px) {
.services-teaser__inner {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.contact__inner {
grid-template-columns: 1fr;
gap: 3rem;
}
.about-layout {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.about-layout .photo-panel,
.about-layout .about-photo {
aspect-ratio: 4 / 3;
max-width: 380px;
}
.steps {
grid-template-columns: 1fr;
gap: 2.25rem;
}
.pillars {
grid-template-columns: 1fr;
gap: 1.75rem;
}
}
@media (max-width: 768px) {
:root {
--section-gap: 4rem;
}
.nav__links {
display: none;
}
.nav__hamburger {
display: flex;
}
.hero__headline {
font-size: clamp(2.8rem, 11vw, 4.2rem);
}
}
@media (max-width: 520px) {
.chat-panel {
width: calc(100vw - 2rem);
right: -0.5rem;
}
.programs-grid {
grid-template-columns: 1fr;
}
/* Both lockup lines are nowrap, so on narrow phones the type comes
down rather than wrapping mid-name. Tested down to a 320px viewport
alongside the hamburger. */
.nav__name {
font-size: 0.82rem;
letter-spacing: 0.1em;
}
.nav__byline {
font-size: 0.6rem;
}
.nav__brand .logo-mark {
height: 30px;
}
.nav__brand {
gap: 0.5rem;
}
}
/* ============================================================
14. VISUALLY HIDDEN
Hides the contact form's spam honeypot from people while leaving
it in the DOM for bots to trip over.
This used to live in an inline