/* ========================= Todd Henneman Website CSS Sitewide Styles ========================= */ /* ---------- Font Imports ---------- */ /* Adobe Caslon Pro is loaded through Adobe Fonts. Make sure this line appears in the of every HTML page: */ /* National 2 is self-hosted. Place your purchased .woff2 files in a folder named "fonts" in the same directory as styles.css. */ @font-face { font-family: "National2"; src: url("fonts/National2-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "National2"; src: url("fonts/National2-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "National2"; src: url("fonts/National2-Bold.woff2") format("woff2"); font-weight: 700 800; font-style: normal; font-display: swap; } /* ---------- Design Tokens ---------- */ :root { --color-black: #111111; --color-white: #ffffff; --color-cream: #f7f5f1; --color-gold: #c79a2b; --color-text: #1a1a1a; --color-muted: #666666; --color-border: #dedbd4; --font-heading: "adobe-caslon-pro", Georgia, "Times New Roman", serif; --font-body: "National2", Arial, sans-serif; --max-width: 1200px; --section-spacing: 5rem; } /* ---------- Global Reset ---------- */ * { box-sizing: border-box; } body { margin: 0; background: var(--color-cream); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.1; font-weight: 500; margin: 0; } h1 { font-size: clamp(3rem, 6vw, 5rem); } h2 { font-size: clamp(2rem, 4vw, 3rem); } h3 { font-size: 1.25rem; } p { margin-top: 0; } a { color: inherit; } /* ---------- Header / Navigation ---------- */ .site-header { background: var(--color-black); color: var(--color-white); padding: 1.25rem 3rem; display: flex; justify-content: space-between; align-items: center; } .site-logo { text-decoration: none; } .site-logo-name { font-family: var(--font-heading); font-size: 1.75rem; letter-spacing: 0.04em; } .site-logo-tagline { color: var(--color-gold); font-family: var(--font-body); font-size: 0.9rem; margin-top: 0.25rem; } .site-nav { display: flex; align-items: center; gap: 2rem; } .site-nav a { color: var(--color-white); text-decoration: none; font-family: var(--font-body); font-weight: 700; } .site-nav a:hover, .site-nav a.active { color: var(--color-gold); } .nav-button { background: var(--color-gold); color: var(--color-black) !important; padding: 0.75rem 1.1rem; } /* ---------- Layout ---------- */ .page-wrapper { max-width: var(--max-width); margin: 0 auto; padding: 4rem 2rem; } .section { margin-bottom: var(--section-spacing); } .section-heading { margin-bottom: 1.5rem; } /* ---------- Hero ---------- */ .hero { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 4rem; align-items: center; margin-bottom: var(--section-spacing); } .hero-image img { width: 100%; display: block; object-fit: cover; } .hero-kicker { color: var(--color-gold); font-family: var(--font-body); text-transform: uppercase; font-weight: 800; letter-spacing: 0.08em; margin: 1rem 0; } .gold-rule { width: 52px; height: 2px; background: var(--color-gold); margin: 1rem 0 1.5rem; } .hero-copy p { font-size: 1.05rem; max-width: 680px; } .primary-button { display: inline-block; margin-top: 1.5rem; background: var(--color-black); color: var(--color-white); padding: 0.9rem 1.4rem; text-decoration: none; font-family: var(--font-body); font-weight: 800; letter-spacing: 0.03em; } .primary-button span { color: var(--color-gold); margin-left: 0.5rem; } /* ---------- Highlight Cards ---------- */ .highlights-grid { display: grid; grid-template-columns: repeat(6, 1fr); background: var(--color-white); border: 1px solid var(--color-border); } .highlight-card { padding: 2rem 1.25rem; text-align: center; border-right: 1px solid var(--color-border); } .highlight-card:last-child { border-right: none; } .highlight-icon { color: var(--color-gold); font-size: 2.4rem; margin-bottom: 1rem; } .highlight-card h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 800; margin-bottom: 0.8rem; } .highlight-card p { font-size: 0.92rem; margin: 0; } /* ---------- Theme Cards ---------- */ .theme-intro { text-align: center; margin-bottom: 2rem; } .theme-rule { display: flex; align-items: center; gap: 2rem; justify-content: center; } .theme-rule::before, .theme-rule::after { content: ""; height: 1px; background: var(--color-border); flex: 1; } .theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .theme-card { background: var(--color-white); border: 1px solid var(--color-border); padding: 1.75rem; } .theme-card h3 { margin-bottom: 0.75rem; } .theme-card p { margin: 0; color: var(--color-muted); } /* ---------- Interior Pages ---------- */ .page-title { margin-bottom: 1rem; } .page-intro { max-width: 760px; font-size: 1.1rem; color: var(--color-muted); margin-bottom: 3rem; } .content-block { background: var(--color-white); border: 1px solid var(--color-border); padding: 2rem; margin-bottom: 1.5rem; } .content-block h2, .content-block h3 { margin-bottom: 0.75rem; } .content-block p:last-child { margin-bottom: 0; } /* ---------- Lists ---------- */ .clean-list { list-style: none; padding: 0; margin: 0; } .clean-list li { padding: 0.85rem 0; border-bottom: 1px solid var(--color-border); } .clean-list li:last-child { border-bottom: none; } /* ---------- Footer ---------- */ .site-footer { background: var(--color-black); color: var(--color-white); padding: 2rem 3rem; margin-top: 4rem; } .site-footer-inner { max-width: var(--max-width); margin: 0 auto; display: flex; justify-content: space-between; gap: 2rem; } .site-footer a { color: var(--color-gold); text-decoration: none; } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .highlights-grid { grid-template-columns: repeat(3, 1fr); } .highlight-card { border-bottom: 1px solid var(--color-border); } } @media (max-width: 900px) { .site-header { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.25rem; } .site-nav { flex-wrap: wrap; gap: 1rem; } .hero { grid-template-columns: 1fr; } .theme-grid { grid-template-columns: 1fr; } } @media (max-width: 650px) { .page-wrapper { padding: 2rem 1.25rem; } .highlights-grid { grid-template-columns: 1fr; } .highlight-card { border-right: none; } .site-footer-inner { flex-direction: column; } }