/* ============================================================ Academic Health — academichealth.com Two themes controlled by data-theme on : (default) → "Minimal": charcoal on warm white, restrained teal data-theme="brand" → "Brand": Georgia headlines, deep teal + orange accent To lock the final site to one theme, see js/site.js (THEME_LOCK). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap'); :root { /* -------- Minimal theme (default) -------- */ --bg: #FBFAF8; /* warm white */ --bg-alt: #F1EFEA; /* card / band background */ --ink: #1A1D21; /* near-black charcoal */ --ink-soft: #4A5058; /* body gray */ --accent: #1D6A7A; /* restrained teal */ --accent-link: #175864; --btn-bg: #1A1D21; /* charcoal pill buttons */ --btn-ink: #FFFFFF; --btn2-border: #1A1D21; --btn2-ink: #1A1D21; --rule: #E3E0D9; --footer-bg: #16181B; --footer-ink: #E9E7E2; --font-head: "Cinzel", Georgia, "Times New Roman", serif; /* matches logo's Roman capitals */ --font-sub: "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif; --font-body: "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif; --head-weight: 600; --head-spacing: 0.025em; } html[data-theme="brand"] { /* -------- Academic Health brand theme -------- */ --bg: #FDFCFA; --bg-alt: #EAF2F4; /* pale teal stat-panel tint */ --ink: #14323A; /* deep teal-charcoal */ --ink-soft: #3E5C64; --accent: #E87722; /* Academic Health orange */ --accent-link: #C45F12; --btn-bg: #1D6A7A; /* deep teal buttons */ --btn-ink: #FFFFFF; --btn2-border: #1D6A7A; --btn2-ink: #1D6A7A; --rule: #D8E4E7; --footer-bg: #14323A; --footer-ink: #EAF2F4; --font-head: Georgia, "Times New Roman", serif; --font-sub: Georgia, "Times New Roman", serif; --font-body: Calibri, "Segoe UI", Helvetica, Arial, sans-serif; --head-weight: 700; --head-spacing: 0; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 1.075rem; line-height: 1.65; } h1, h2, h3 { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-spacing); line-height: 1.15; margin: 0 0 0.5em; } h1 { font-size: clamp(1.85rem, 4.4vw, 3rem); line-height: 1.22; } h2 { font-size: clamp(1.4rem, 2.9vw, 1.95rem); line-height: 1.3; } h3 { font-size: 1.14rem; font-family: var(--font-sub); letter-spacing: 0; } p { margin: 0 0 1em; color: var(--ink-soft); } a { color: var(--accent-link); } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; } .eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem; } /* ---------------- Header ---------------- */ header.site { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); } .site-bar { display: flex; align-items: center; gap: 28px; padding: 16px 0; } .wordmark { font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; } .wordmark img { height: 44px; width: auto; display: block; } footer.site .wordmark img { height: 52px; } nav.primary { margin-left: auto; display: flex; align-items: center; gap: 22px; } nav.primary a { color: var(--ink); text-decoration: none; font-size: 0.98rem; } nav.primary a:hover, nav.primary a[aria-current="page"] { color: var(--accent-link); text-decoration: underline; text-underline-offset: 5px; } .menu-toggle { display: none; } /* ---------------- Buttons ---------------- */ .btn, .btn2 { display: inline-block; text-decoration: none; padding: 13px 26px; border-radius: 999px; font-size: 1rem; font-family: var(--font-body); cursor: pointer; } .btn { background: var(--btn-bg); color: var(--btn-ink); border: 1.5px solid var(--btn-bg); } .btn:hover { filter: brightness(1.15); } .btn2 { background: transparent; color: var(--btn2-ink); border: 1.5px solid var(--btn2-border); } .btn2:hover { background: var(--bg-alt); } .btn-row { display: flex; gap: 14px; flex-wrap: wrap; } .btn-sm { padding: 9px 20px; font-size: 0.92rem; } /* ---------------- Hero ---------------- */ .hero { position: relative; color: #fff; overflow: hidden; min-height: 62vh; display: flex; align-items: flex-end; background-size: cover; background-position: center; } /* Rotating hero slides (home page) */ .hero .slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s ease; } .hero .slide.on { opacity: 1; } @media (prefers-reduced-motion: reduce) { .hero .slide { transition: none; } } .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,14,16,0.72) 0%, rgba(10,14,16,0.25) 55%, rgba(10,14,16,0.15) 100%); } .hero .wrap { position: relative; z-index: 1; padding-top: 90px; padding-bottom: 64px; } .hero h1 { color: #fff; } .hero p.lead { color: #F0EFEC; font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 46em; } .hero .eyebrow { color: #FFD9B3; } html:not([data-theme="brand"]) .hero .eyebrow { color: #BFE3EA; } .hero-short { min-height: 42vh; } /* ---------------- Sections ---------------- */ section.band { padding: 76px 0; } section.band.alt { background: var(--bg-alt); } .center { text-align: center; } .narrow { max-width: 46em; margin-left: auto; margin-right: auto; } .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; } .card { background: var(--bg); border: 1px solid var(--rule); border-radius: 14px; padding: 30px 26px; } section.band:not(.alt) .card { background: var(--bg-alt); border-color: transparent; } .card h3 { margin-bottom: 0.5em; } .card p { margin: 0; font-size: 0.99rem; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; } .split img { width: 100%; height: auto; border-radius: 14px; display: block; } /* Hover-swap image: fades from base photo to alternate on hover/focus */ .swap { position: relative; border-radius: 14px; overflow: hidden; } .swap img { display: block; width: 100%; height: auto; border-radius: 0; } .swap img.alt { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; } .swap:hover img.alt, .swap:focus-within img.alt { opacity: 1; } @media (prefers-reduced-motion: reduce) { .swap img.alt { transition: none; } } /* Centered standalone pill link (mimics live site's section marker) */ .pill-center { text-align: center; padding: 40px 0 8px; } .feature-list { margin: 26px 0 0; padding: 0; list-style: none; } .feature-list li { padding: 20px 0; border-top: 1px solid var(--rule); } .feature-list li:first-child { border-top: none; padding-top: 0; } .feature-list h3 { margin-bottom: 0.25em; } .feature-list p { margin: 0; font-size: 0.99rem; } /* ---------------- Latest ---------------- */ .pub-list { list-style: none; margin: 46px 0 0; padding: 0; max-width: 50em; } .pub-list li { padding: 26px 0; border-top: 1px solid var(--rule); } .pub-list li:first-child { border-top: none; padding-top: 0; } .pub-list a.pub-title { font-family: var(--font-sub); font-weight: 600; font-size: 1.28rem; line-height: 1.3; color: var(--ink); text-decoration: none; } .pub-list a.pub-title:hover { color: var(--accent-link); text-decoration: underline; text-underline-offset: 4px; } .pub-list p { margin: 0.5em 0 0; font-size: 1rem; } /* ---------------- Contact form ---------------- */ form.contact { max-width: 40em; margin-top: 34px; } .field { margin-bottom: 20px; } .field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.98rem; } .field .hint { font-size: 0.88rem; color: var(--ink-soft); margin: 4px 0 6px; } .field input, .field textarea { width: 100%; padding: 12px 14px; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 10px; } .field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } .req { color: var(--accent); } .form-success { display: none; margin-top: 22px; padding: 18px 20px; background: var(--bg-alt); border-left: 4px solid var(--accent); border-radius: 8px; } /* ---------------- Footer ---------------- */ footer.site { background: var(--footer-bg); color: var(--footer-ink); padding: 54px 0 40px; margin-top: 0; } footer.site .wordmark { color: var(--footer-ink); } footer.site p.tag { color: var(--footer-ink); opacity: 0.85; margin: 10px 0 24px; } footer.site nav { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 22px; } footer.site nav a, footer.site .social a { color: var(--footer-ink); text-decoration: none; } footer.site nav a:hover, footer.site .social a:hover { text-decoration: underline; text-underline-offset: 4px; } footer.site .social { display: flex; gap: 16px; margin-bottom: 26px; } footer.site .fine { font-size: 0.88rem; opacity: 0.7; margin: 0; } /* ---------------- Logo mark placements ---------------- */ .hero-mark { height: 68px; width: auto; display: block; margin-bottom: 18px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35)); } .section-mark { height: 48px; width: auto; display: inline-block; margin-bottom: 14px; opacity: 0.9; } .footer-logo { height: 120px !important; width: auto; } /* ---------------- Theme toggle (preview aid) ---------------- */ #themeToggle { position: fixed; left: 18px; bottom: 18px; z-index: 90; background: var(--ink); color: var(--bg); border: none; border-radius: 999px; padding: 10px 18px; font: 600 0.85rem var(--font-body); cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.25); } /* ---------------- Responsive ---------------- */ @media (max-width: 840px) { .cards { grid-template-columns: 1fr; } .split { grid-template-columns: 1fr; gap: 30px; } nav.primary { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--rule); flex-direction: column; align-items: flex-start; padding: 18px 24px; gap: 14px; display: none; } nav.primary.open { display: flex; } .menu-toggle { display: block; margin-left: auto; background: none; border: 1px solid var(--rule); border-radius: 8px; padding: 8px 12px; font-size: 1.1rem; color: var(--ink); cursor: pointer; } .hero { min-height: 54vh; } } /* Fix: nav link color rule must not override the CTA button's ink */ nav.primary a.btn { color: var(--btn-ink); } nav.primary a.btn:hover { color: var(--btn-ink); text-decoration: none; filter: brightness(1.15); }