/* ========================================================================== Bethlehem Telephone Sanitarium — style.css Vanilla CSS, mobile-first, no frameworks/build tools. Fonts: Cormorant Garamond (headings) + Inter (body) — link via Google Fonts in . ========================================================================== */ /* ---------- 1. Custom Properties ---------- */ :root { /* Color palette */ --color-forest: #183D32; --color-sage: #78927D; --color-cream: #F7F3E8; --color-gold: #C5A45D; --color-charcoal: #26312D; --color-white: #FFFFFF; /* Semantic color roles */ --color-bg: var(--color-white); --color-bg-alt: var(--color-cream); --color-bg-dark: var(--color-forest); --color-text: var(--color-charcoal); --color-text-inverse: var(--color-cream); --color-text-muted: var(--color-sage); --color-accent: var(--color-gold); --color-border: rgba(38, 49, 45, 0.12); --color-border-inverse: rgba(247, 243, 232, 0.2); /* Typography */ --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --fs-base: 1rem; --fs-sm: 0.875rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-h3: 1.75rem; --fs-h2: 2.25rem; --fs-h1: 2.75rem; --lh-base: 1.65; --lh-heading: 1.2; /* Spacing scale */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 4rem; --space-7: 6rem; /* Layout */ --container-width: 1200px; --container-padding: var(--space-2); --header-height: 76px; --radius: 6px; --radius-lg: 12px; /* Effects */ --shadow-sm: 0 2px 8px rgba(38, 49, 45, 0.08); --shadow-md: 0 8px 24px rgba(38, 49, 45, 0.12); --transition: 200ms ease-in-out; } /* ---------- 2. Reset / Base ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, picture, svg { max-width: 100%; display: block; } h1, h2, h3, h4 { font-family: var(--font-heading); line-height: var(--lh-heading); font-weight: 600; color: var(--color-forest); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { margin-bottom: var(--space-2); } a { color: var(--color-forest); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--color-gold); } ul, ol { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, textarea, select { font-family: inherit; font-size: inherit; } /* ---------- 3. Accessibility helpers ---------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100%; left: var(--space-2); z-index: 1000; padding: var(--space-1) var(--space-3); background-color: var(--color-forest); color: var(--color-white); border-radius: var(--radius); transition: top var(--transition); } .skip-link:focus { top: var(--space-2); color: var(--color-white); } /* Consistent, visible focus state for every interactive element */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .btn:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; border-radius: var(--radius); } /* ---------- 4. Layout Utilities ---------- */ .container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--container-padding); } .section { padding-block: var(--space-6); } .section--alt { background-color: var(--color-bg-alt); } .section-header { max-width: 640px; margin-inline: auto; margin-bottom: var(--space-5); text-align: center; } .section-eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-1); } .section-header p { color: var(--color-sage); font-size: var(--fs-lg); margin-bottom: 0; } /* ---------- 5. Buttons ---------- */ .btn { display: inline-block; padding: 0.85em 1.75em; font-size: var(--fs-base); font-weight: 600; border-radius: var(--radius); border: 2px solid transparent; transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); } .btn:hover { transform: translateY(-2px); } .btn--primary { background-color: var(--color-forest); color: var(--color-white); } .btn--primary:hover { background-color: var(--color-charcoal); color: var(--color-white); } .btn--secondary { background-color: transparent; color: var(--color-forest); border-color: var(--color-forest); } .btn--secondary:hover { background-color: var(--color-forest); color: var(--color-white); } .btn--gold { background-color: var(--color-gold); color: var(--color-charcoal); } .btn--gold:hover { background-color: var(--color-cream); color: var(--color-charcoal); } .btn--outline-light { background-color: transparent; color: var(--color-white); border-color: var(--color-border-inverse); } .btn--outline-light:hover { background-color: var(--color-white); color: var(--color-forest); } /* ---------- 6. Site Header & Navigation ---------- */ .site-header { position: sticky; top: 0; z-index: 900; background-color: var(--color-white); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition); } .site-header.scrolled { box-shadow: var(--shadow-md); } .nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); } .nav__brand { display: flex; align-items: center; gap: var(--space-1); font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 700; color: var(--color-forest); } .nav__brand img { height: 40px; width: auto; } .nav__toggle { position: relative; z-index: 1000; width: 32px; height: 24px; display: flex; flex-direction: column; justify-content: space-between; } .nav__toggle-bar { display: block; width: 100%; height: 3px; border-radius: 2px; background-color: var(--color-forest); transition: transform var(--transition), opacity var(--transition); } .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(10.5px) rotate(45deg); } .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); } .nav__list { position: fixed; inset: var(--header-height) 0 0 0; height: calc(100vh - var(--header-height)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); background-color: var(--color-white); transform: translateX(100%); transition: transform var(--transition); overflow-y: auto; } .nav__list.is-open { transform: translateX(0); } .nav__link { font-size: var(--fs-lg); font-weight: 500; color: var(--color-forest); } .nav__link--cta { padding: 0.6em 1.5em; border-radius: var(--radius); background-color: var(--color-forest); color: var(--color-white); } .nav__link--cta:hover { background-color: var(--color-gold); color: var(--color-charcoal); } /* ---------- 7. Hero ---------- */ .hero { position: relative; display: flex; align-items: center; min-height: 78vh; padding-block: var(--space-6); color: var(--color-white); text-align: center; /* Subtle grain texture + brand-color gradient over a real photo, so text always stays legible regardless of the photo's own contrast. */ background-image: url("images/texture-overlay.png"), linear-gradient(160deg, rgba(24, 61, 50, 0.92) 0%, rgba(38, 49, 45, 0.88) 55%, rgba(120, 146, 125, 0.75) 100%), url("images/hero-bg.jpg"); background-repeat: repeat, no-repeat, no-repeat; background-size: auto, cover, cover; background-position: center, center, center; overflow: hidden; } .hero--education { background-image: url("images/texture-overlay.png"), linear-gradient(160deg, rgba(24, 61, 50, 0.92) 0%, rgba(38, 49, 45, 0.88) 55%, rgba(120, 146, 125, 0.75) 100%), url("images/health-education-room.jpg"); } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top right, rgba(197, 164, 93, 0.25), transparent 60%); pointer-events: none; } .hero__content { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; } .hero__eyebrow { display: inline-block; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-2); } .hero h1 { color: var(--color-white); font-size: 2.25rem; margin-bottom: var(--space-2); } .hero p { font-size: var(--fs-lg); color: var(--color-cream); margin-bottom: var(--space-4); } .hero__actions { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; justify-content: center; } /* ---------- 7b. Two-column intro (image + text) ---------- */ .intro__grid { display: grid; gap: var(--space-4); align-items: center; } .intro__media { overflow: hidden; } .intro__media img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); } /* ---------- 8. Card Grid (Health Education topics) ---------- */ .cards { display: grid; grid-template-columns: 1fr; gap: var(--space-3); } .card { display: flex; flex-direction: column; background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); transition: transform var(--transition), box-shadow var(--transition); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .card__icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--color-bg-alt); color: var(--color-forest); font-size: 1.5rem; margin-bottom: var(--space-3); } .card__icon svg { width: 28px; height: 28px; } /* Small inline icons: checklist markers and disclaimer callouts */ .check-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 0.15em; color: var(--color-gold); } .disclaimer-box__icon { flex-shrink: 0; width: 22px; height: 22px; margin-top: 0.1em; } .card h3 { font-size: var(--fs-xl); margin-bottom: var(--space-1); } .card p { color: var(--color-text); font-size: var(--fs-sm); margin-bottom: var(--space-2); } .card__link { margin-top: auto; font-weight: 600; font-size: var(--fs-sm); color: var(--color-gold); } /* ---------- 9. NEWSTART Section ---------- */ .newstart { background-color: var(--color-forest); color: var(--color-text-inverse); } .newstart .section-header p { color: var(--color-sage); } .newstart .section-header h2 { color: var(--color-white); } .newstart__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } .newstart__item { text-align: center; padding: var(--space-3) var(--space-1); border: 1px solid var(--color-border-inverse); border-radius: var(--radius-lg); transition: background-color var(--transition); } .newstart__item:hover { background-color: rgba(247, 243, 232, 0.06); } .newstart__letter { display: block; font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; color: var(--color-gold); line-height: 1; margin-bottom: var(--space-1); } .newstart__item h4 { color: var(--color-white); font-size: var(--fs-base); font-weight: 600; margin-bottom: 0.25rem; } .newstart__item p { color: var(--color-sage); font-size: var(--fs-sm); margin-bottom: 0; } /* ---------- 10. Newsletter Signup ---------- */ .newsletter { background-color: var(--color-bg-alt); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .newsletter__inner { max-width: 680px; margin-inline: auto; text-align: center; } .newsletter__inner p { color: var(--color-sage); margin-bottom: var(--space-3); } .newsletter__form { display: flex; flex-direction: column; gap: var(--space-2); } .newsletter__field { width: 100%; padding: 0.85em 1.1em; font-size: var(--fs-base); color: var(--color-text); background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); transition: border-color var(--transition), box-shadow var(--transition); } .newsletter__field::placeholder { color: var(--color-sage); } .newsletter__field:focus-visible { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(197, 164, 93, 0.25); } .newsletter__interests { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-1) var(--space-2); text-align: left; font-size: var(--fs-sm); margin-block: var(--space-1); } .newsletter__interests label { display: flex; align-items: center; gap: 0.5em; } .newsletter__note { font-size: var(--fs-sm); color: var(--color-sage); margin-top: var(--space-1); } /* ---------- 11. Footer ---------- */ .site-footer { background-color: var(--color-charcoal); color: var(--color-cream); } .footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); padding-block: var(--space-6) var(--space-4); } .footer__col h4 { color: var(--color-white); font-size: var(--fs-lg); margin-bottom: var(--space-2); } .footer__col p, .footer__col li { color: var(--color-sage); font-size: var(--fs-sm); margin-bottom: var(--space-1); } .footer__col a { color: var(--color-sage); } .footer__col a:hover { color: var(--color-gold); } .footer__social { display: flex; gap: var(--space-2); margin-top: var(--space-2); } .footer__social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border-inverse); color: var(--color-cream); } .footer__social a:hover { background-color: var(--color-gold); border-color: var(--color-gold); color: var(--color-charcoal); } .footer__disclaimer { border-top: 1px solid var(--color-border-inverse); padding-block: var(--space-3); font-size: 0.8125rem; color: var(--color-sage); text-align: center; line-height: 1.6; } .footer__bottom { border-top: 1px solid var(--color-border-inverse); padding-block: var(--space-2); text-align: center; font-size: var(--fs-sm); color: var(--color-sage); } /* ---------- 12. Tablet / Desktop — 768px breakpoint ---------- */ @media (min-width: 768px) { :root { --fs-h1: 3.5rem; --fs-h2: 2.75rem; --container-padding: var(--space-4); } .hero h1 { font-size: var(--fs-h1); } .hero__actions { flex-direction: row; } .intro__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } .cards { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .newstart__grid { grid-template-columns: repeat(4, 1fr); } .newsletter__form { flex-direction: row; align-items: flex-start; } .newsletter__field { flex: 1; } .newsletter__form .btn { flex-shrink: 0; } .footer__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } } @media (min-width: 1024px) { .newstart__grid { grid-template-columns: repeat(8, 1fr); } /* The full nav (long brand name + six links) needs more room than a typical tablet viewport, so the horizontal menu only takes over at 1024px; below that, the mobile hamburger menu keeps things tidy. */ .nav__toggle { display: none; } .nav__list { position: static; inset: auto; height: auto; flex-direction: row; background-color: transparent; transform: none; transition: none; overflow: visible; gap: var(--space-2); } .nav__brand { font-size: 1.05rem; gap: 0.4rem; white-space: nowrap; } .nav__link { font-size: var(--fs-base); white-space: nowrap; } .nav__link--cta { padding: 0.6em 1.25em; } } /* ---------- 13. Print ---------- */ @media print { .site-header, .nav__toggle, .newsletter, .site-footer, .skip-link { display: none !important; } body { background: var(--color-white); color: #000; } a { color: #000; text-decoration: underline; } .hero { background: none; color: #000; min-height: auto; padding-block: var(--space-3); } .hero::before { display: none; } .hero h1, .hero p { color: #000; } }