/* ========================================================================== Woven Within — Counseling & Art Therapy Palette is "colorful earthtones" from the design brief. Every color used for body text or links has been checked against its background and meets WCAG AA (4.5:1 for normal text, 3:1 for large text/UI). Brighter tones (sage, mustard, coral, terracotta) are reserved for accents, borders, and large decorative elements — never for small text on light backgrounds. ========================================================================== */ :root { /* Core palette */ --ivory: #fbf6ef; --ivory-alt: #f3ede2; --ink: #2e2a24; /* Text/link-safe dark tones (all ≥4.5:1 on --ivory) */ --olive: #4b5a2e; --wine: #5c1f30; --teal: #1f4b49; --deep-blue: #1c314a; --terracotta-deep: #8a3e22; --mustard-deep: #7a5a12; --coral-deep: #8c3a2a; /* Accent-only tones (decorative: borders, icons, washes, large shapes) */ --sage: #c7d2b8; --sage-mid: #8fa07c; --mustard: #c99a2e; --coral: #e2725b; --terracotta: #c1653d; --wine-mid: #8c2f45; --deep-blue-mid: #2c4a6b; --teal-mid: #2e7873; --font-heading: "Quicksand", "Comfortaa", ui-rounded, "Segoe UI", system-ui, sans-serif; --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif; --max-width: 68rem; --radius: 1rem; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @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 { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--olive); margin-top: 0; } h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); } h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); } h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); } p { margin: 0 0 1.1em; } a { color: var(--deep-blue); text-decoration-thickness: 0.08em; text-underline-offset: 0.15em; } a:hover { color: var(--wine); } :focus-visible { outline: 3px solid var(--terracotta-deep); outline-offset: 3px; } .skip-link { position: absolute; left: -999px; top: auto; background: var(--ink); color: var(--ivory); padding: 0.75em 1.25em; border-radius: 0 0 var(--radius) 0; z-index: 1000; } .skip-link:focus { left: 0; top: 0; } .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-3); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Header / nav ---------- */ .site-header { border-bottom: 1px solid var(--sage); background: var(--ivory); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-2); } .site-logo { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; color: var(--olive); text-decoration: none; line-height: 1.1; } .site-logo span { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.9rem; color: var(--ink); } .nav-toggle { display: none; align-items: center; gap: 0.5em; background: none; border: 2px solid var(--olive); border-radius: 0.6em; padding: 0.5em 0.9em; font-family: var(--font-body); font-size: 1rem; color: var(--olive); cursor: pointer; } /* Without JavaScript, .js is never added to , so the toggle stays hidden and .site-nav below keeps its default `display: block` — the full nav is always visible and reachable. Only with JS confirmed running do we collapse it behind the hamburger button. */ .js .nav-toggle { display: inline-flex; } .js .site-nav { display: none; width: 100%; } .js .site-nav.is-open { display: block; } .site-nav ul { list-style: none; margin: 0; padding: var(--space-2) 0; display: flex; flex-direction: column; gap: var(--space-1); } .site-nav a { display: block; padding: 0.6em 0; color: var(--ink); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--ivory-alt); } .site-nav a[aria-current="page"] { color: var(--wine); } /* The booking button lives inside the nav, so it has to restate its look at nav-link specificity. Otherwise ".site-nav a" repaints it dark text on dark blue (about 1.6:1) and strips its padding. */ .site-nav a.book-button { display: inline-block; color: #fff; padding: 0.7em 1.3em; border-bottom: none; } .book-button { display: inline-block; background: var(--deep-blue-mid); color: #fff; padding: 0.7em 1.3em; border-radius: 2em; text-decoration: none; font-weight: 700; font-family: var(--font-heading); margin-top: var(--space-1); } .book-button:hover { background: var(--deep-blue); color: #fff; } @media (min-width: 56rem) { .js .nav-toggle { display: none; } /* Same specificity as the mobile ".js .site-nav { display: none }" rule above; this one is later in the source, so it wins the cascade at this breakpoint and the nav stays visible even with JS enabled. */ .js .site-nav { display: block; width: auto; } .site-nav ul { flex-direction: row; align-items: center; justify-content: space-between; padding: 0; /* Items spread across the full header width; the gap is only the minimum spacing once the row gets crowded. Desktop only: the mobile menu is a column and never sees this rule. */ gap: var(--space-3); } .site-nav a { border-bottom: none; padding: 0.3em 0; } .book-button { margin-top: 0; } } /* ---------- Hero ---------- */ .hero { position: relative; padding-block: var(--space-5); overflow: hidden; background: var(--ivory-alt); } .hero__bg { position: absolute; inset: 0; z-index: 0; opacity: 0.16; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; } .hero__content { position: relative; z-index: 1; text-align: center; max-width: 42rem; margin-inline: auto; } .hero__content .lede { font-size: 1.2rem; } /* ---------- Value cards ---------- */ .values-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-block: var(--space-4); } @media (min-width: 40rem) { .values-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64rem) { .values-grid { grid-template-columns: repeat(5, 1fr); } } .value-card { background: var(--ivory-alt); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; } .value-card__media { aspect-ratio: 4 / 3; background: var(--sage); overflow: hidden; } .value-card__media img { width: 100%; height: 100%; object-fit: cover; } .value-card__body { padding: var(--space-2); } .value-card h3 { color: var(--wine); margin-bottom: 0.3em; } /* ---------- Generic content sections ---------- */ .section { padding-block: var(--space-4); } .section--alt { background: var(--ivory-alt); } .section--washed { position: relative; overflow: hidden; } .section--washed .section__bg { position: absolute; inset: 0; opacity: 0.14; z-index: 0; } .section--washed .section__bg img { width: 100%; height: 100%; object-fit: cover; } .section--washed > .container { position: relative; z-index: 1; } .prose { max-width: 42rem; } .prose h2, .prose h3 { margin-top: 1.6em; } figure { margin: var(--space-3) 0; } figure img { border-radius: var(--radius); } .bio-photo { max-width: 16rem; margin: 0 0 var(--space-3); } .bio-photo img { border-radius: var(--radius); } @media (min-width: 40rem) { .bio-photo { float: right; margin: 0 0 var(--space-3) var(--space-3); } } /* Photos inserted into page text through the CMS */ .prose img.body-image { border-radius: var(--radius); margin-block: var(--space-2); } figcaption { font-size: 0.9rem; color: var(--ink); opacity: 0.8; margin-top: 0.5em; } .todo { display: inline-block; background: var(--mustard); color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.25em 0.7em; border-radius: 0.4em; margin: 0.2em 0; } .callout { background: var(--sage); border-radius: var(--radius); padding: var(--space-3); margin-block: var(--space-3); } .callout p:last-child { margin-bottom: 0; } /* ---------- Contact form ---------- */ .contact-form { background: var(--ivory-alt); border-radius: var(--radius); padding: var(--space-3); max-width: 34rem; } .form-instructions { font-size: 0.95rem; margin-bottom: var(--space-3); } .form-field { margin-bottom: var(--space-2); } .form-field label { display: block; font-weight: 700; margin-bottom: 0.35em; } .form-field .hint { font-size: 0.85rem; opacity: 0.75; margin-top: 0.25em; } .form-field input[type="text"], .form-field input[type="email"], .form-field input[type="tel"], .form-field select, .form-field textarea { width: 100%; font: inherit; padding: 0.7em 0.8em; border: 2px solid var(--sage-mid); border-radius: 0.5em; background: #fff; color: var(--ink); } .form-field textarea { min-height: 8em; resize: vertical; } fieldset { border: none; padding: 0; margin: 0 0 var(--space-2); } fieldset legend { font-weight: 700; padding: 0 0 0.35em; } .choice-group { display: flex; flex-wrap: wrap; gap: var(--space-2); } .choice-group label { font-weight: 400; display: inline-flex; align-items: center; gap: 0.4em; } .choice-group input, .consent-field input { width: 1.15em; height: 1.15em; accent-color: var(--olive); flex-shrink: 0; } fieldset.form-field .hint { margin: 0 0 0.5em; } .consent-field label { display: flex; align-items: flex-start; gap: 0.6em; font-weight: 400; } .consent-field input { margin-top: 0.25em; } .submit-button { background: var(--wine-mid); color: #fff; border: none; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; padding: 0.8em 1.6em; border-radius: 2em; cursor: pointer; } .submit-button:hover { background: var(--wine); } .form-status { margin-top: var(--space-2); font-weight: 700; } .form-status[data-state="success"] { color: var(--olive); } .form-status[data-state="error"] { color: var(--wine); } /* honeypot field, hidden from sighted users and screen readers */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------- Footer ---------- */ .site-footer { background: var(--ink); color: var(--ivory); padding-block: var(--space-4); margin-top: var(--space-5); } .site-footer a { color: var(--sage); } .site-footer a:hover { color: var(--ivory); } .footer-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; } @media (min-width: 48rem) { .footer-grid { grid-template-columns: repeat(3, 1fr); } } .footer-grid h2 { color: var(--ivory); font-size: 1.1rem; margin-bottom: 0.5em; } .footer-badge img { background: var(--ivory); border-radius: 0.4em; padding: 0.3em; } .footer-bottom { border-top: 1px solid rgba(251, 246, 239, 0.2); margin-top: var(--space-3); padding-top: var(--space-3); font-size: 0.9rem; opacity: 0.9; }