/* ============================================================================ HaloExpressSites — Starter Template Stylesheet Static Site Express tier · Bear Media Services ---------------------------------------------------------------------------- REBRAND CONTRACT: change only the tokens in :root below to reskin the whole site. Component CSS never hardcodes a color, font, or radius — it references a token. If you find yourself typing a hex value outside :root, stop and add a token instead. (PRD §6: "Design tokens all in :root — zero hardcoded colors in component CSS.") ========================================================================== */ /* ---- 1. DESIGN TOKENS ------------------------------------------------------- The 10-ish variables that define the brand. Swap these per client. Contrast note: --color-text on --color-bg and --color-on-accent on --color-accent must both clear WCAG AA (4.5:1 body, 3:1 large). The defaults below are verified AA. If you change --color-accent, re-check --color-on-accent. --------------------------------------------------------------------------- */ :root { /* Brand palette (swap these) */ --color-accent: #2f6b3f; /* primary brand color: links, buttons, focus */ --color-accent-hover: #24542f; /* darker accent for hover/active */ --color-on-accent: #ffffff; /* text/icons that sit ON the accent (AA on accent) */ --color-bg: #ffffff; /* page background */ --color-surface: #f4f2ec; /* cards, alternating sections */ --color-surface-2: #e9e6dd; /* deeper surface / footer */ --color-text: #29332c; /* body text (AA on bg + surface) */ --color-muted: #55605a; /* secondary text (AA on bg + surface) */ --color-border: #d8d3c7; /* hairlines, inputs, dividers */ --color-heading: #1b2b21; /* headings */ /* Feedback colors (forms) */ --color-success: #1a7f37; --color-success-bg: #dafbe1; --color-error: #cf222e; --color-error-bg: #ffebe9; /* Typography (system stack by default — zero network cost, instant render). To use Google Fonts: add the in each page and swap the family names below. Keep the fallback stack. */ --font-heading: "Georgia", "Times New Roman", serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Type scale (fluid, clamped) */ --step--1: clamp(0.83rem, 0.79rem + 0.2vw, 0.94rem); --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.13rem); --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); --step-2: clamp(1.44rem, 1.28rem + 0.8vw, 2rem); --step-3: clamp(1.73rem, 1.48rem + 1.25vw, 2.66rem); --step-4: clamp(2.07rem, 1.68rem + 1.95vw, 3.55rem); /* Spacing scale */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; /* Structure */ --radius: 10px; --radius-sm: 6px; --radius-pill: 999px; --shadow: 0 1px 2px rgba(27, 31, 36, 0.04), 0 4px 16px rgba(27, 31, 36, 0.08); --content-max: 1080px; --measure: 68ch; /* readable line length */ --focus-ring: 3px solid var(--color-accent); } /* ---- 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; } } body { font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; display: flex; flex-direction: column; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-heading); line-height: 1.15; text-wrap: balance; font-weight: 600; } h1 { font-size: var(--step-4); letter-spacing: -0.01em; } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); } p, ul, ol { max-width: var(--measure); } p + p { margin-top: var(--space-md); } a { color: var(--color-accent); text-underline-offset: 0.15em; } a:hover { color: var(--color-accent-hover); } /* Visible focus for every interactive element (WCAG 2.4.7) */ :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* ---- 3. SKIP LINK & A11Y HELPERS -------------------------------------------- */ .skip-link { position: absolute; left: var(--space-sm); top: -100px; z-index: 1000; background: var(--color-accent); color: var(--color-on-accent); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm); font-weight: 600; transition: top 0.15s ease; } .skip-link:focus { top: var(--space-sm); color: var(--color-on-accent); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- 4. LAYOUT PRIMITIVES --------------------------------------------------- */ .container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-lg); } .section { padding-block: var(--space-3xl); } .section--tight { padding-block: var(--space-2xl); } .section--surface { background: var(--color-surface); } .stack > * + * { margin-top: var(--space-md); } .stack-lg > * + * { margin-top: var(--space-lg); } .grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .eyebrow { font-family: var(--font-body); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); } .lead { font-size: var(--step-1); color: var(--color-muted); max-width: var(--measure); } /* ---- 5. BUTTONS ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); font-family: var(--font-body); font-size: var(--step-0); font-weight: 600; line-height: 1; padding: 0.85em 1.5em; border-radius: var(--radius-pill); border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .btn--primary { background: var(--color-accent); color: var(--color-on-accent); } .btn--primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); } .btn--ghost { background: transparent; color: var(--color-accent); border-color: var(--color-border); } .btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent-hover); } /* ---- 6. HEADER / NAV -------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--color-border); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); } .brand { font-family: var(--font-heading); font-weight: 700; font-size: var(--step-1); color: var(--color-heading); text-decoration: none; white-space: nowrap; } .brand:hover { color: var(--color-heading); } .nav__toggle { display: none; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.5em 0.6em; cursor: pointer; color: var(--color-heading); } .nav__toggle svg { width: 24px; height: 24px; } .nav__list { display: flex; align-items: center; gap: var(--space-lg); list-style: none; padding: 0; margin: 0; } .nav__link { font-weight: 500; color: var(--color-text); text-decoration: none; padding-block: var(--space-2xs); } .nav__link:hover { color: var(--color-accent); } .nav__link[aria-current="page"] { color: var(--color-accent); box-shadow: inset 0 -2px 0 var(--color-accent); } @media (max-width: 768px) { .nav__toggle { display: inline-flex; } .nav__list { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: var(--space-xs) var(--space-lg) var(--space-md); } .nav__list.is-open { display: flex; } .nav__link { padding-block: var(--space-sm); border-bottom: 1px solid var(--color-border); } .nav__link[aria-current="page"] { box-shadow: none; } } /* ---- 7. HERO ---------------------------------------------------------------- */ .hero { background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%); padding-block: var(--space-3xl); } .hero__inner { display: grid; gap: var(--space-xl); align-items: center; } @media (min-width: 860px) { .hero__inner { grid-template-columns: 1.1fr 0.9fr; } } .hero__title { margin-top: var(--space-sm); } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); } .hero__media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-surface-2); } /* ---- 8. CARDS --------------------------------------------------------------- */ .card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-lg); box-shadow: var(--shadow); height: 100%; } .card__title { font-size: var(--step-1); margin-bottom: var(--space-xs); } .card__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); margin-bottom: var(--space-sm); } .card__icon svg { width: 24px; height: 24px; } /* ---- 9. FEATURE / SPLIT ----------------------------------------------------- */ .split { display: grid; gap: var(--space-xl); align-items: center; } @media (min-width: 800px) { .split { grid-template-columns: 1fr 1fr; } .split--reverse .split__media { order: -1; } } .split__media img { width: 100%; border-radius: var(--radius); aspect-ratio: 3 / 2; object-fit: cover; background: var(--color-surface-2); } /* ---- 10. CTA BANNER --------------------------------------------------------- */ .cta-banner { background: var(--color-accent); color: var(--color-on-accent); border-radius: var(--radius); padding: var(--space-xl); text-align: center; } .cta-banner h2 { color: var(--color-on-accent); } .cta-banner p { color: var(--color-on-accent); opacity: 0.92; margin-inline: auto; } .cta-banner .btn--primary { background: var(--color-on-accent); color: var(--color-accent); margin-top: var(--space-md); } .cta-banner .btn--primary:hover { background: color-mix(in srgb, var(--color-on-accent) 88%, var(--color-accent)); } /* ---- 11. TESTIMONIAL -------------------------------------------------------- */ .quote { border-left: 4px solid var(--color-accent); padding-left: var(--space-lg); font-size: var(--step-1); font-style: italic; color: var(--color-heading); } .quote cite { display: block; margin-top: var(--space-sm); font-size: var(--step-0); font-style: normal; color: var(--color-muted); } /* ---- 12. FORMS -------------------------------------------------------------- */ .form { max-width: 34rem; } .form__row { margin-bottom: var(--space-md); } .form__label { display: block; font-weight: 600; margin-bottom: var(--space-2xs); color: var(--color-heading); } .form__req { color: var(--color-error); } .form__control { width: 100%; font: inherit; color: var(--color-text); background: var(--color-bg); padding: 0.7em 0.85em; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .form__control:focus-visible { outline: var(--focus-ring); outline-offset: 1px; border-color: var(--color-accent); } textarea.form__control { min-height: 8rem; resize: vertical; } .form__hint { font-size: var(--step--1); color: var(--color-muted); margin-top: var(--space-2xs); } /* Honeypot — visually and programmatically hidden from real users */ .form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form__status { margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); font-weight: 500; } .form__status[hidden] { display: none; } .form__status--success { background: var(--color-success-bg); color: var(--color-success); } .form__status--error { background: var(--color-error-bg); color: var(--color-error); } /* ---- 13. FOOTER ------------------------------------------------------------- */ .site-footer { margin-top: auto; background: var(--color-surface-2); border-top: 1px solid var(--color-border); padding-block: var(--space-2xl) var(--space-lg); } .site-footer__grid { display: grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .site-footer h2 { font-size: var(--step-1); } .site-footer address { font-style: normal; color: var(--color-muted); } .site-footer a { color: var(--color-text); } .site-footer a:hover { color: var(--color-accent); } .footer-nav { list-style: none; padding: 0; } .footer-nav li + li { margin-top: var(--space-xs); } .site-footer__legal { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--color-border); font-size: var(--step--1); color: var(--color-muted); display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: space-between; } /* ---- 14. UTILITIES ---------------------------------------------------------- */ .text-center { text-align: center; } .mx-auto { margin-inline: auto; } .mt-lg { margin-top: var(--space-lg); } .section-head { max-width: var(--measure); margin-bottom: var(--space-xl); } .section-head--center { margin-inline: auto; text-align: center; }