/* ==========================================================================
WALDO'S & COMPANY — PRINTMAKING RETREAT
Shared stylesheet for every page.
HOW THIS FILE IS ORGANIZED (search for these headings to jump around):
1. THEME CONTROLS .......... colors + fonts you will edit most often
2. BASE / RESET ............ default element styling
3. LAYOUT HELPERS .......... page width, sections, spacing
4. HEADER + NAV ............ top menu, repeated on every page
5. BUTTONS ................. register / general buttons
6. IMAGE PLACEHOLDERS ...... gray labeled boxes you swap for photos
7. HERO .................... big headline area on the home page
8. SECTION MARKERS ......... small label text
9. DISPLAY HEADINGS ........ oversized bold type
10. CLASS PAGES ............. sticky photo + scrolling text + instructor
11. ELECTIVES / CARD GRID ... card layout
12. OUTINGS ................. outings list
13. FAQ .................... question / answer list
14. EMAIL CAPTURE .......... sign-up form at bottom of home page
15. SCROLL-REVEAL ......... the slide-in image + text on the home page
16. FORMS ................. contact form fields
17. FOOTER ................
18. RESPONSIVE ............ phone / tablet adjustments
========================================================================== */
/* ==========================================================================
1. THEME CONTROLS ← EDIT COLORS AND FONTS HERE
--------------------------------------------------------------------------
Change a value once here and it updates everywhere on every page.
========================================================================== */
:root {
/* ---- BRAND COLORS (the yellow / black / white scheme) ---- */
--color-accent: #9d0c0c; /* the bright yellow. Highlights + blocks */
--color-ink: #111111; /* near-black. Most text + big headings */
--color-paper: #FFFFFF; /* page background (white) */
/* ---- SUPPORTING GRAYS ---- */
--color-muted: #6B6B6B; /* small/secondary text */
--color-line: #E6E6E6; /* thin divider lines */
--color-placeholder: #E9E9E6; /* fill color of image placeholder boxes */
--color-placeholder-ink: #9A9A95; /* label text inside placeholders */
/* ---- BUTTON COLORS ---- */
--btn-bg: var(--color-ink);
--btn-text: var(--color-paper);
--btn-bg-hover: var(--color-accent);
--btn-text-hover:var(--color-ink);
/* ---- FONTS (loaded from Google Fonts in each page's ) ---- */
--font-display: "Anton", Impact, sans-serif; /* heavy display headlines */
--font-serif: "Fraunces", Georgia, serif; /* serif accent words */
--font-ui: "Archivo", system-ui, -apple-system, sans-serif; /* body/nav */
/* ---- LAYOUT SIZING ---- */
--page-max: 1200px;
--gutter: 24px;
--section-y: 96px;
--radius: 2px;
/* ---- HEADER HEIGHT (used to pin the sticky class photo just below it) --- */
--header-h: 66px;
}
/* ==========================================================================
2. BASE / RESET
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--color-paper);
color: var(--color-ink);
font-family: var(--font-ui);
font-size: 17px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden; /* prevents sideways scroll from slide-in bits */
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1rem; }
.accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.highlight { background: var(--color-accent); padding: 0 0.15em; }
/* ==========================================================================
3. LAYOUT HELPERS
========================================================================== */
.wrap {
width: 100%;
max-width: var(--page-max);
margin: 0 auto;
padding: 0 var(--gutter);
}
.section { padding: var(--section-y) 0; }
.section--tight { padding: calc(var(--section-y) / 2) 0; }
.divider { border: 0; border-top: 1px solid var(--color-line); margin: 0; }
.eyebrow {
font-family: var(--font-ui);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-muted);
margin: 0 0 1rem;
}
/* Location label used on the home page (e.g. "Gettysburg, PA") */
.location-tag {
font-family: var(--font-ui);
font-size: clamp(1.05rem, 2vw, 1.4rem);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
margin: 0;
}
/* ==========================================================================
4. HEADER + NAV
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--color-paper);
border-bottom: 1px solid var(--color-line);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px var(--gutter);
max-width: var(--page-max);
margin: 0 auto;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
font-family: var(--font-display);
letter-spacing: 0.02em;
font-size: 1.15rem;
text-transform: uppercase;
white-space: nowrap;
}
.logo__mark {
width: 36px; height: 36px;
background: var(--color-accent);
display: grid; place-items: center;
font-family: var(--font-ui);
font-size: 0.55rem; font-weight: 700;
color: var(--color-ink);
text-align: center; line-height: 1.05;
}
.nav { display: flex; align-items: center; gap: 22px; }
.nav a {
text-decoration: none;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-ink);
padding: 4px 0;
border-bottom: 2px solid transparent;
white-space: nowrap;
}
.nav a:hover,
.nav a[aria-current="page"] { border-bottom-color: var(--color-accent); }
.nav-toggle {
display: none;
background: none;
border: 1px solid var(--color-ink);
padding: 8px 12px;
font-family: var(--font-ui);
font-weight: 700; font-size: 0.75rem;
letter-spacing: 0.1em; text-transform: uppercase;
cursor: pointer;
}
/* ==========================================================================
5. BUTTONS
========================================================================== */
.btn {
display: inline-block;
font-family: var(--font-ui);
font-weight: 700; font-size: 0.8rem;
letter-spacing: 0.1em; text-transform: uppercase;
text-decoration: none;
padding: 14px 26px;
border: 1px solid var(--color-ink);
background: var(--btn-bg);
color: var(--btn-text);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--btn-bg-hover); color: var(--btn-text-hover); }
.btn--outline { background: transparent; color: var(--color-ink); }
.btn--outline:hover { background: var(--color-ink); color: var(--color-paper); }
/* ==========================================================================
6. IMAGE PLACEHOLDERS
--------------------------------------------------------------------------
TO ADD A REAL PHOTO: replace ...
with
========================================================================== */
.img-ph {
position: relative;
background: var(--color-placeholder);
border: 1px dashed #cfcfca;
display: grid; place-items: center;
color: var(--color-placeholder-ink);
font-family: var(--font-ui);
font-size: 0.75rem; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
text-align: center; padding: 16px;
aspect-ratio: 4 / 3;
}
.img-ph--wide { aspect-ratio: 16 / 9; }
.img-ph--tall { aspect-ratio: 3 / 4; }
.img-ph--square { aspect-ratio: 1 / 1; }
.photo--wide { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.photo--tall { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.photo--square { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
/* ==========================================================================
7. HERO (home page only)
========================================================================== */
.hero { position: relative; border-bottom: 1px solid var(--color-line); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; }
.hero__words { position: relative; background: var(--color-accent); padding: 64px var(--gutter) 56px; min-height: 520px; }
.hero__huge {
font-family: var(--font-display);
font-size: clamp(3rem, 8vw, 7rem);
line-height: 0.86;
margin: 0;
text-transform: uppercase;
color: var(--color-paper);
word-break: break-word;
}
.hero__stack { margin-top: 0.1em; position: relative; z-index: 2; }
.hero__stack span {
display: block;
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(2rem, 5.5vw, 3.4rem);
line-height: 1.05;
color: var(--color-ink);
}
.hero__stack span.is-marked { background: var(--color-paper); display: inline-block; padding: 0 0.2em; }
.hero__media { background: var(--color-placeholder); }
.hero__media .img-ph { height: 100%; border: 0; aspect-ratio: auto; }
/* When you replace the hero placeholder with 
,
this makes the image fill the hero area neatly. */
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ==========================================================================
8. SECTION MARKERS
========================================================================== */
.marker {
font-family: var(--font-ui);
font-size: 0.8rem; font-weight: 700;
letter-spacing: 0.1em; color: var(--color-muted);
}
/* ==========================================================================
9. DISPLAY HEADINGS
========================================================================== */
.display {
font-family: var(--font-display);
text-transform: uppercase;
line-height: 0.92;
letter-spacing: 0.005em;
margin: 0;
}
.display--xl { font-size: clamp(3rem, 9vw, 6.5rem); }
.display--lg { font-size: clamp(2.4rem, 6vw, 4.5rem); }
.display--md { font-size: clamp(1.8rem, 4vw, 3rem); }
/* Two-column intro (left label, right text) */
.intro-split {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 40px;
align-items: start;
margin-top: 8px;
}
/* ==========================================================================
10. CLASS PAGES
--------------------------------------------------------------------------
Two columns: the LEFT column scrolls (description, tuition, register,
instructor), the RIGHT column holds the class photo, which stays "stuck"
just under the menu as you scroll. On phones these stack (photo on top).
========================================================================== */
.class-detail {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: start;
/* No top padding here, so the photo column reaches all the way up and
touches the bottom of the menu. The text column gets its own top spacing. */
padding-top: 0;
padding-bottom: var(--section-y);
}
.class-detail__main { min-width: 0; padding-top: var(--section-y); }
.class-detail__media {
position: sticky;
/* pin the photo right against the bottom of the sticky menu */
top: var(--header-h);
}
.class-detail__media .img-ph { aspect-ratio: 3 / 4; }
.class-lead { max-width: 60ch; font-size: 1.05rem; }
/* Tuition + register. Price sits ABOVE the button. (Font size reduced.) */
.enroll {
margin-top: 36px;
padding: 24px;
background: var(--color-accent);
display: inline-block;
}
.enroll__price {
font-family: var(--font-display);
font-size: clamp(1.4rem, 3vw, 1.9rem); /* smaller than before */
line-height: 1;
margin: 0 0 4px;
}
.enroll__label {
font-size: 0.78rem; font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--color-ink); margin: 0 0 16px;
}
/* Instructor block: stacked under the register button, with a divider above.
Order: eyebrow > name > role > photo > bio. */
.instructor {
border-top: 1px solid var(--color-line);
margin-top: var(--section-y);
padding-top: 40px;
}
.instructor__name {
font-family: var(--font-display);
text-transform: uppercase;
font-size: clamp(1.6rem, 4vw, 2.4rem);
line-height: 1; margin: 0 0 4px;
}
.instructor__role {
font-size: 0.82rem; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--color-muted); margin: 0 0 16px;
}
.instructor__photo { width: 240px; max-width: 100%; margin: 0 0 20px; }
.instructor__photo .img-ph { aspect-ratio: 1 / 1; }
.instructor__bio { max-width: 60ch; }
/* ==========================================================================
11. ELECTIVES / CARD GRID
========================================================================== */
.electives-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
margin-top: 40px;
}
.elective { border: 1px solid var(--color-line); padding: 20px; }
.elective__title {
font-family: var(--font-display); text-transform: uppercase;
font-size: 1.5rem; line-height: 1; margin: 18px 0 6px;
}
.elective__meta {
font-size: 0.78rem; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--color-muted); margin: 0 0 12px;
}
/* Generic two-up layout (used on Lodging & Dining, Classes overview) */
.class-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
/* ==========================================================================
12. OUTINGS
========================================================================== */
.outing {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 40px; align-items: center;
padding: 48px 0;
border-bottom: 1px solid var(--color-line);
}
.outing:nth-child(even) { direction: rtl; }
.outing:nth-child(even) > * { direction: ltr; }
.outing__title {
font-family: var(--font-display); text-transform: uppercase;
font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1; margin: 0 0 12px;
}
/* ==========================================================================
13. FAQ
========================================================================== */
.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-item summary {
list-style: none; cursor: pointer;
padding: 24px 0;
display: flex; justify-content: space-between; gap: 16px;
font-family: var(--font-display); text-transform: uppercase; font-size: 1.25rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--font-ui); }
.faq-item[open] summary::after { content: "-"; }
.faq-item__body { padding: 0 0 24px; max-width: 70ch; }
/* ==========================================================================
14. EMAIL CAPTURE
========================================================================== */
.email-capture { background: var(--color-ink); color: var(--color-paper); padding: var(--section-y) 0; }
.email-capture .display { color: var(--color-paper); }
.email-form { display: flex; gap: 12px; margin-top: 24px; max-width: 520px; flex-wrap: wrap; }
.email-form input[type="email"] {
flex: 1 1 240px; padding: 14px 16px;
border: 1px solid var(--color-paper); background: transparent;
color: var(--color-paper); font-family: var(--font-ui); font-size: 1rem;
}
.email-form input[type="email"]::placeholder { color: #b9b9b9; }
.email-note { font-size: 0.85rem; color: #b9b9b9; margin-top: 12px; }
/* ==========================================================================
15. FEATURE-BG (home page: the "Artist-Led" section with a background photo)
--------------------------------------------------------------------------
TO SET THE BACKGROUND PHOTO: edit the inline style on the in
index.html, e.g. style="--bg-img:url('images/5.jpg')"
The text sits inside a light panel so it stays readable over any photo.
========================================================================== */
.feature-bg {
background-image: var(--bg-img, none);
background-size: cover;
background-position: center;
background-color: var(--color-placeholder); /* shows if no photo is set yet */
padding: var(--section-y) 0;
}
/* The panel is positioned from the LEFT EDGE of the screen, so it never runs
off the page on a narrow window. Change ONE number to move it:
--feature-left = how far the box sits from the left edge.
Smaller = further left (e.g. 0px hugs the edge). Larger = further right. */
.feature-bg__inner {
padding-left: var(--feature-left, 24px);
padding-right: var(--gutter);
}
.feature-bg__panel {
background: rgba(255, 255, 255, 0.88);
padding: 36px;
max-width: 560px; /* the box's width; it shrinks to fit narrow screens */
}
/* ==========================================================================
16. FORMS (contact page)
========================================================================== */
.form-field { margin-bottom: 18px; max-width: 620px; }
.form-field label {
display: block; font-weight: 600; font-size: 0.85rem;
letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px;
}
.form-field input,
.form-field textarea {
width: 100%; padding: 12px 14px;
border: 1px solid var(--color-ink);
font-family: var(--font-ui); font-size: 1rem;
background: var(--color-paper); color: var(--color-ink);
}
.form-field textarea { min-height: 160px; resize: vertical; }
/* ==========================================================================
17. FOOTER
========================================================================== */
.site-footer { border-top: 1px solid var(--color-line); padding: 56px 0; font-size: 0.9rem; }
.site-footer__grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { border-bottom: 1px solid var(--color-accent); }
.site-footer__links { display: flex; gap: 20px; flex-wrap: wrap; }
/* ==========================================================================
18. RESPONSIVE
========================================================================== */
/* Collapse the navigation into a menu button when it gets tight */
@media (max-width: 1024px) {
.nav-toggle { display: inline-block; }
.nav {
display: none;
position: absolute; left: 0; right: 0; top: 100%;
flex-direction: column; align-items: flex-start; gap: 0;
background: var(--color-paper);
border-bottom: 1px solid var(--color-line);
padding: 8px var(--gutter) 16px;
}
.nav.is-open { display: flex; }
.nav a { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--color-line); }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--color-line); color: var(--color-muted); }
}
/* Stack the two-column layouts on tablets / phones */
@media (max-width: 880px) {
:root { --section-y: 64px; }
.hero__grid,
.class-split,
.intro-split,
.electives-grid,
.outing { grid-template-columns: 1fr; }
.outing:nth-child(even) { direction: ltr; }
.hero__words { min-height: 360px; }
/* Class pages: stack with the photo on top, and turn OFF the sticky pin.
The photo stays flush to the top; the text follows with the grid gap. */
.class-detail { grid-template-columns: 1fr; gap: 28px; }
.class-detail__main { padding-top: 0; }
.class-detail__media { position: static; top: auto; order: -1; }
.class-detail__media .img-ph { aspect-ratio: 16 / 9; }
/* Background-photo panel gets a little tighter on small screens */
.feature-bg__panel { padding: 24px; }
}
/* On narrow screens, keep a comfortable gap so text never touches the edge */
@media (max-width: 520px) {
:root { --gutter: 20px; }
body { font-size: 16px; }
}
/* ==========================================================================
ACCESSIBILITY: visible keyboard focus + respect reduced-motion settings
========================================================================== */
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}