/* Calm Waters Care Network — site styles Brand tokens (--cw-*) come from brand/tokens.css and are never overridden. This file adds a semantic THEME layer (--page-bg, --text-heading, ...) so the same markup renders light or dark. Light is the default; add data-theme="dark" on to switch. The dark theme is the current active design. */ /* ============================================================ THEME TOKENS ============================================================ */ :root { /* Surfaces */ --page-bg: #FDFDFE; --header-bg: #FDFDFE; --header-border: transparent; --section-bg: #FDFDFE; /* Ways We Support You */ /* Feathered both edges so the band fades in from the section above and out into the mission below — no hard seam. Top/bottom stops equal --page-bg. */ --band-bg: linear-gradient(180deg, #FDFDFE 0%, #E0E8F3 11%, #E0E8F3 89%, #FDFDFE 100%); /* This community is for you */ --mission-bg: #FDFDFE; /* Top fades in from the page (smooth out of Mission); bottom holds colour so it meets the footer as a deliberate hard line. */ --closing-bg: linear-gradient(180deg, #FDFDFE 0%, #dbe9f7 32%, #cfe1f3 100%); --footer-bg: var(--cw-navy); --nav-panel-bg: #ffffff; /* mobile dropdown */ --nav-panel-border:#eef0f3; /* Text */ --text-heading: var(--cw-navy); --text-body: #33455f; --text-muted: #4a5b73; --nav-fg: var(--cw-navy); /* Hero */ --hero-title: var(--cw-navy); --hero-subtitle: var(--cw-blue); --hero-lede: #33455f; --hero-wash: linear-gradient(180deg, #FDFDFE 0%, rgba(253,253,254,0.92) 14%, rgba(253,253,254,0) 42%), linear-gradient(100deg, rgba(253,253,254,0.95) 0%, rgba(253,253,254,0.78) 30%, rgba(253,253,254,0.25) 52%, rgba(253,253,254,0) 70%); --hero-wash-mobile: linear-gradient(180deg, #FDFDFE 0%, rgba(253,253,254,0.9) 28%, rgba(253,253,254,0.4) 56%, rgba(253,253,254,0) 80%); --hero-image: url('../assets/images/hero-water-sunrise.webp'); --hero-position: right bottom; /* Icons */ --icon-strong: var(--cw-navy); /* service icons */ --icon-accent: var(--cw-blue); /* persona icons */ --mission-leaf-image: url('../assets/images/mission-leaf.webp'); --mission-leaf-opacity: 0.6; /* Founding story */ --story-kicker: var(--cw-blue); /* Links */ --link: var(--cw-blue); --link-hover: var(--cw-navy); /* Theme toggle control */ --toggle-border: rgba(15, 46, 93, 0.28); --toggle-bg: transparent; /* Buttons */ --btn-primary-bg: var(--cw-blue); --btn-primary-bg-hover: var(--cw-navy); --btn-primary-fg: #ffffff; --btn-primary-shadow: 0 8px 24px rgba(90, 140, 200, 0.35); --btn-ghost-fg: var(--cw-navy); --btn-ghost-border: var(--cw-blue); --btn-ghost-fg-hover: #ffffff; --btn-ghost-bg-hover: var(--cw-navy); --cta-bg: var(--cw-navy); --cta-fg: #ffffff; /* Footer text */ --footer-fg: #d7e2f2; --footer-fg-soft: #cfe0f1; --footer-fg-muted: #9fb3cf; --footer-rule: rgba(255, 255, 255, 0.12); --social-bg: transparent; --social-border: rgba(255, 255, 255, 0.25); --social-fg: #cfe0f1; /* Shadows */ --mission-shadow: 0 16px 44px rgba(15, 46, 93, 0.12); --mission-ring: transparent; /* Newsletter popup */ --modal-surface: #FFFFFF; --modal-border: 1px solid rgba(15, 46, 93, 0.10); --modal-shadow: 0 20px 55px rgba(15, 46, 93, 0.20); --modal-accent: var(--cw-blue); --modal-close-fg: #9aa9bf; --modal-close-hover: var(--cw-navy); --modal-input-bg: #FFFFFF; --modal-input-border: #d3dae3; --modal-input-focus: var(--cw-blue); --modal-fineprint: #8593a8; } /* ---------- DARK THEME (active design) ---------- */ [data-theme="dark"] { /* Surfaces — deep navy sampled from the hero photograph so the baked-in wave at the bottom of the image melts into the page. */ --page-bg: #01193E; --header-bg: transparent; /* over the stars; solidifies on scroll */ --header-border: transparent; --section-bg: #01193E; /* Same feathered band, deep-navy edges so it melts into the page above/below. */ --band-bg: linear-gradient(180deg, #01193E 0%, #0A2D5A 14%, #072650 86%, #01193E 100%); --mission-bg: #01193E; --closing-bg: linear-gradient(180deg, #01193E 0%, #072449 45%, #021A3D 100%); --footer-bg: #00142E; --nav-panel-bg: rgba(3, 24, 56, 0.97); --nav-panel-border:rgba(255, 255, 255, 0.10); /* Text */ --text-heading: #F4F8FF; --text-body: #BBCDE9; --text-muted: #93AAC9; --nav-fg: #E7EFFB; /* Hero */ --hero-title: #FFFFFF; --hero-subtitle: #9FC2EC; --hero-lede: #C6D6EE; --hero-wash: linear-gradient(180deg, #01193E 0%, rgba(1,25,62,0) 24%); --hero-wash-mobile: linear-gradient(180deg, #01193E 0%, rgba(1,25,62,0) 24%); --hero-image: url('../assets/images/hero-night-sky.webp'); --hero-position: center bottom; /* Icons */ --icon-strong: #E9F1FE; --icon-accent: #6FA3DC; --mission-leaf-image: url('../assets/images/mission-leaf-dark.webp'); --mission-leaf-opacity: 0.5; /* Founding story */ --story-kicker: #7FB0E4; /* Links */ --link: #8FB6E6; --link-hover: #FFFFFF; /* Theme toggle control */ --toggle-border: rgba(255, 255, 255, 0.32); --toggle-bg: rgba(255, 255, 255, 0.06); /* Buttons */ --btn-primary-bg: var(--cw-blue); --btn-primary-bg-hover: #7AA6D8; --btn-primary-fg: #ffffff; --btn-primary-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); --btn-ghost-fg: #EAF1FB; --btn-ghost-border: rgba(255, 255, 255, 0.45); --btn-ghost-fg-hover: var(--cw-navy); --btn-ghost-bg-hover: #EAF1FB; --cta-bg: var(--cw-blue); --cta-fg: #ffffff; /* Footer */ --footer-fg: #CDD9F0; --footer-fg-soft: #C3D3EC; --footer-fg-muted: #7E93B6; --footer-rule: rgba(255, 255, 255, 0.10); --social-bg: var(--cw-blue); --social-border: transparent; --social-fg: #ffffff; /* Shadows */ --mission-shadow: 0 16px 50px rgba(0, 0, 0, 0.32); --mission-ring: 1px solid rgba(255, 255, 255, 0.08); /* Newsletter popup */ --modal-surface: #0C2A57; --modal-border: 1px solid rgba(255, 255, 255, 0.12); --modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); --modal-accent: #7FB0E4; --modal-close-fg: rgba(231, 239, 251, 0.55); --modal-close-hover: #FFFFFF; --modal-input-bg: rgba(255, 255, 255, 0.06); --modal-input-border: rgba(255, 255, 255, 0.20); --modal-input-focus: #7FB0E4; --modal-fineprint: #8195b5; } /* ============================================================ BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Offset in-page anchor jumps so the sticky header never covers the section top */ section[id], footer[id] { scroll-margin-top: 100px; } body { margin: 0; background: var(--page-bg); color: var(--text-body); font-family: var(--cw-font-ui); font-size: var(--cw-body); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); } /* Show one asset per theme (logos, mission photo) */ .is-dark-only { display: none; } [data-theme="dark"] .is-light-only { display: none; } [data-theme="dark"] .is-dark-only { display: block; } .container { width: 100%; max-width: var(--cw-maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } /* ---------- Buttons ---------- */ .btn { display: inline-block; font-family: var(--cw-font-ui); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.85em 1.7em; border-radius: 999px; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease; } .btn:hover { transform: translateY(-2px); } .btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); box-shadow: var(--btn-primary-shadow); } .btn--primary:hover { background: var(--btn-primary-bg-hover); color: var(--btn-primary-fg); } .btn--ghost { background: transparent; color: var(--btn-ghost-fg); border-color: var(--btn-ghost-border); } .btn--ghost:hover { background: var(--btn-ghost-bg-hover); color: var(--btn-ghost-fg-hover); border-color: var(--btn-ghost-bg-hover); } .btn--cta { background: var(--cta-bg); color: var(--cta-fg); padding: 0.7em 1.4em; } .btn--cta:hover { background: var(--cw-orange); color: #fff; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); border-bottom: 1px solid var(--header-border); transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease; } /* Dark: header is transparent over the night sky, then gains a translucent navy panel once the user scrolls past the hero. */ [data-theme="dark"] .site-header.is-scrolled { background: rgba(3, 22, 50, 0.82); border-bottom-color: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 88px; } .header__logo img { height: 66px; width: auto; } .header__actions { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.6rem); } .nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); } /* ---------- Light / dark toggle ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid var(--toggle-border); background: var(--toggle-bg); color: var(--nav-fg); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease; } .theme-toggle:hover { transform: translateY(-2px); border-color: var(--cw-orange); color: var(--cw-orange); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle__sun { display: none; } .theme-toggle__moon { display: block; } [data-theme="dark"] .theme-toggle__sun { display: block; } [data-theme="dark"] .theme-toggle__moon { display: none; } .nav > a:not(.btn) { font-family: var(--cw-font-ui); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.03em; color: var(--nav-fg); position: relative; padding-block: 0.25rem; } .nav > a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--cw-orange); transition: width .2s ease; } .nav > a:not(.btn):hover::after { width: 100%; } /* Mobile menu button */ .nav__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; } .nav__toggle span { display: block; height: 2px; width: 24px; background: var(--nav-fg); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; } .nav__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__toggle.is-active span:nth-child(2) { opacity: 0; } .nav__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; background-color: var(--page-bg); } .hero__media { position: absolute; inset: 0; background-image: var(--hero-image); background-size: cover; background-position: var(--hero-position); background-repeat: no-repeat; pointer-events: none; } /* Readability wash + seams into the header above and the section below. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--hero-wash); pointer-events: none; } .hero__inner { position: relative; z-index: 2; display: flex; align-items: flex-start; min-height: clamp(560px, 82vh, 780px); padding-block: clamp(4rem, 7vw, 5rem) clamp(7rem, 14vw, 11rem); } .hero__content { max-width: 36rem; } .hero__title { font-family: var(--cw-font-display); font-weight: 500; font-size: var(--cw-h1); line-height: 0.95; letter-spacing: 0.01em; color: var(--hero-title); margin: 0 0 0.5rem; } .hero__subtitle { font-family: var(--cw-font-accent); font-style: italic; font-size: clamp(1.25rem, 2.4vw, 1.6rem); color: var(--hero-subtitle); margin: 0 0 1.5rem; position: relative; padding-left: 0; } .hero__lede { font-size: 1.125rem; color: var(--hero-lede); max-width: 32rem; margin: 0 0 2rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; } /* ---------- Leaf divider (reusable) ---------- */ .divider { display: flex; justify-content: center; margin: 1.1rem 0 1.5rem; } .divider img { width: clamp(200px, 26vw, 280px); height: auto; opacity: 0.9; } .divider--left { justify-content: flex-start; margin: 0.5rem 0 1.2rem; } .divider--left img { width: clamp(240px, 40vw, 300px); } /* ---------- Section scaffolding ---------- */ .section { padding-block: var(--cw-space-section); } .section__title { font-family: var(--cw-font-display); font-weight: 500; font-size: var(--cw-h2); letter-spacing: 0.02em; color: var(--text-heading); text-align: center; margin: 0; } .section__title--left { text-align: left; } /* ---------- Our Story (founding) ---------- */ /* A quiet, centered narrative beat between the hero and the services. It sits on the same feathered band as the personas, so it reads as a held moment that melts in from the hero and resolves back into the page. */ .story { background: var(--band-bg); text-align: center; padding-block: clamp(3.5rem, 8vw, 6.5rem); } .story__inner { max-width: 48rem; } .story__kicker { font-family: var(--cw-font-ui); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--story-kicker); margin: 0 0 0.9rem; } .story__text { font-size: 1.125rem; line-height: 1.8; color: var(--text-body); max-width: 40rem; margin: 0 auto 1.4rem; } .story__belief { font-family: var(--cw-font-accent); font-style: italic; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.5; color: var(--text-heading); max-width: 42rem; margin: 1.7rem auto 0; } /* ---------- Ways We Support You ---------- */ .services { background: var(--section-bg); padding-top: clamp(0.75rem, 2vw, 1.5rem); padding-bottom: clamp(5rem, 11vw, 9rem); } .services__grid { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); } .service { text-align: center; } .service__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; color: var(--icon-strong); margin-bottom: 1rem; } .service__icon svg { width: 52px; height: 52px; } .service__title { font-family: var(--cw-font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.2; color: var(--text-heading); margin: 0 0 0.6rem; } .service__text { font-size: 0.95rem; color: var(--text-muted); margin: 0; } /* ---------- This community is for you ---------- */ .personas { background: var(--band-bg); padding-block: clamp(2.25rem, 4.5vw, 3.5rem); } .personas__grid { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 3vw, 2rem); } .persona { text-align: center; } .persona__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; color: var(--icon-accent); margin-bottom: 0.75rem; } .persona__icon svg { width: 42px; height: 42px; } .persona__text { font-size: 0.95rem; color: var(--text-body); margin: 0 auto; max-width: 12rem; } /* ---------- Our Mission ---------- */ .mission { position: relative; overflow: hidden; background: var(--mission-bg); /* More room above (space from the band) and below (so the softened image shadow fully fades before the section clip, leaving no hard line). */ padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 6vw, 5rem); } .mission__leaf { position: absolute; right: clamp(-40px, -2vw, 0px); top: 50%; transform: translateY(-50%); width: clamp(120px, 16vw, 230px); aspect-ratio: 1024 / 1536; background: var(--mission-leaf-image) no-repeat center / contain; opacity: var(--mission-leaf-opacity); pointer-events: none; } .mission__wrap { position: relative; z-index: 1; } .mission__header { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); } .mission__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 4rem); } .mission__media img { width: 100%; max-width: 420px; /* a touch smaller, centred in its column */ margin-inline: auto; border-radius: 18px; box-shadow: var(--mission-shadow); border: var(--mission-ring); } .mission__text { font-size: 1.1rem; color: var(--text-body); margin: 0 0 1.25rem; max-width: 32rem; } .mission__aside { font-family: var(--cw-font-accent); font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--text-heading); max-width: 32rem; margin: 0 0 1.75rem; } /* ---------- Closing band ---------- */ .closing { background: var(--closing-bg); text-align: center; padding-block: clamp(3rem, 7vw, 5rem); } .closing__quote { font-family: var(--cw-font-accent); font-style: italic; font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.5; color: var(--text-heading); margin: 0; } .closing .divider { margin-bottom: 0; } /* ---------- Footer ---------- */ .site-footer { background: var(--footer-bg); color: var(--footer-fg); padding-block: clamp(2.25rem, 5vw, 3.25rem); } .site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; } .site-footer__brand { display: inline-flex; } .site-footer__logo { height: 88px; width: auto; } .site-footer__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.6rem; font-size: 0.95rem; } .site-footer__contact a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--footer-fg-soft); } .site-footer__contact a:hover { color: #fff; } .site-footer__contact svg { width: 18px; height: 18px; } .site-footer__social { display: flex; align-items: center; gap: 0.9rem; } .site-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--social-bg); border: 1px solid var(--social-border); color: var(--social-fg); transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease; } .site-footer__social a:hover { background: var(--cw-orange); border-color: var(--cw-orange); color: #fff; transform: translateY(-2px); } .site-footer__social svg { width: 18px; height: 18px; } .site-footer__legal { flex-basis: 100%; text-align: center; margin: 0.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--footer-rule); font-size: 0.8rem; color: var(--footer-fg-muted); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 860px) { /* Hero: wash from the top so text reads over the water on small screens */ .hero::before { background: var(--hero-wash-mobile); } .hero__media { background-position: 45% bottom; } .hero__inner { display: block; } .hero__content { max-width: 100%; text-align: center; } .hero__content .divider--left { justify-content: center; } .hero__lede { max-width: 100%; } .hero__actions { flex-direction: column; align-items: stretch; width: 100%; } .hero__actions .btn { width: 100%; text-align: center; } .nav__toggle { display: flex; } .nav { position: absolute; top: 88px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--nav-panel-bg); border-bottom: 1px solid var(--nav-panel-border); padding: 0.5rem 1.25rem 1.25rem; box-shadow: 0 18px 30px rgba(0,0,0,0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none; transition: clip-path .25s ease, opacity .2s ease; } .nav.is-open { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; } .nav > a:not(.btn) { padding: 0.9rem 0.25rem; border-bottom: 1px solid var(--nav-panel-border); } .nav > a:not(.btn)::after { display: none; } .nav__cta { margin-top: 1rem; text-align: center; } } /* Tablet — reflow the five-up grids */ @media (max-width: 1000px) { .services__grid { grid-template-columns: repeat(3, 1fr); row-gap: 2.75rem; } .personas__grid { grid-template-columns: repeat(3, 1fr); row-gap: 2.25rem; } } /* Stack the mission + center its left-aligned bits */ @media (max-width: 860px) { .mission__inner { grid-template-columns: 1fr; } .mission__media { order: -1; } .section__title--left { text-align: center; } .mission .divider--left { justify-content: center; } .mission__body { text-align: center; } .mission__text, .mission__aside { margin-inline: auto; } .mission__leaf { opacity: 0.3; } .site-footer__inner { justify-content: center; text-align: center; } .site-footer__contact { justify-content: center; } } /* Phones — two-up, then single column on the smallest screens */ @media (max-width: 600px) { .services__grid { grid-template-columns: repeat(2, 1fr); } .personas__grid { grid-template-columns: repeat(2, 1fr); } /* 5 items in 2 columns leaves the last one alone — span it full width so it centers in the empty right cell instead of hugging the left. */ .services__grid > .service:last-child, .personas__grid > .persona:last-child { grid-column: 1 / -1; } .services__grid > .service:last-child .service__text { max-width: 18rem; margin-inline: auto; } } @media (max-width: 380px) { .services__grid, .personas__grid { grid-template-columns: 1fr; } } /* ============================================================ DARK-MODE REFINEMENTS (override base; order-independent via [data-theme]) ============================================================ */ /* Match the two logos in visual size across themes. The dark PNG was trimmed of its baked-in padding so it now sizes like the light marks (~52px of ink, same as the light logo at 66px / footer logo at 88px). */ [data-theme="dark"] .header__logo img { height: 52px; } [data-theme="dark"] .site-footer__logo { height: 51px; } /* ============================================================ MOTION — load + scroll reveals, gentle ambient life. Animations touch only opacity/transform, so they render identically in light and dark. Everything here is gated on `prefers-reduced-motion: no-preference`, and the initial hidden state is gated on `html.js`, so visitors who prefer stillness (or have JS off) always see full content. ============================================================ */ @media (prefers-reduced-motion: no-preference) { /* Soft easing for a calm, watery settle (no bounce). */ html.js [data-reveal], html.js [data-reveal-group] > * { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.22, .61, .36, 1); will-change: opacity, transform; } html.js [data-reveal].is-visible, html.js [data-reveal-group].is-visible > * { opacity: 1; transform: none; } /* Staggered cascade for grouped children (hero copy, card grids, mission body). */ html.js [data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0s; } html.js [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: .09s; } html.js [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: .18s; } html.js [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: .27s; } html.js [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: .36s; } html.js [data-reveal-group].is-visible > *:nth-child(6) { transition-delay: .45s; } /* Ambient life — barely-there, slow, never distracting. */ /* The hero scene breathes, like light moving on water. */ .hero__media { animation: none; /* hero breathe/zoom off — restore: cw-breathe 30s ease-in-out infinite alternate */ } @keyframes cw-breathe { from { transform: scale(1); } to { transform: scale(1.05); } } /* The mission leaf drifts gently, as if floating on a current. */ .mission__leaf { animation: cw-drift 9s ease-in-out infinite alternate; } @keyframes cw-drift { from { transform: translateY(calc(-50% - 6px)) rotate(-1.5deg); } to { transform: translateY(calc(-50% + 6px)) rotate(1.5deg); } } } /* ============================================================ STORY "read full story" link (homepage → about) ============================================================ */ .story__more { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.6rem; font-family: var(--cw-font-ui); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--link); } .story__more:hover { color: var(--link-hover); } .story__more svg { width: 16px; height: 16px; transition: transform .2s ease; } .story__more:hover svg { transform: translateX(3px); } /* ============================================================ ABOUT PAGE Shares every token + the section scaffolding with the homepage, so light/dark and spacing stay in sync. Only new layout lives here. ============================================================ */ .about-intro { text-align: center; } .about-intro__inner { max-width: 50rem; } .about-intro__title { font-family: var(--cw-font-display); font-weight: 500; font-size: var(--cw-h1); line-height: 1.04; letter-spacing: 0.01em; color: var(--text-heading); margin: 0; } .about-intro__lede { font-size: 1.2rem; line-height: 1.7; color: var(--text-body); max-width: 42rem; margin: 0 auto; } /* Reusable image + text split (mirrors the mission layout for consistency) */ .split__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 4rem); } .split__media img { width: 100%; max-width: 420px; margin-inline: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 18px; box-shadow: var(--mission-shadow); border: var(--mission-ring); } .split__body p { font-size: 1.1rem; color: var(--text-body); margin: 0 0 1.1rem; max-width: 34rem; } .split__body p:last-of-type { margin-bottom: 0; } .split--mirror .split__media { order: 2; } /* Tinted band utility (same feathered band as the personas) */ .bg-band { background: var(--band-bg); } /* About invitation band */ .about-cta { background: var(--closing-bg); text-align: center; } .about-cta__title { font-family: var(--cw-font-display); font-weight: 500; font-size: var(--cw-h2); color: var(--text-heading); margin: 0 0 1rem; } .about-cta__text { font-size: 1.15rem; color: var(--text-body); max-width: 38rem; margin: 0 auto 2rem; } .about-cta__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; } @media (max-width: 860px) { .split__inner { grid-template-columns: 1fr; } .split__media, .split--mirror .split__media { order: -1; } .split__body { text-align: center; } .split__body .divider--left { justify-content: center; } .split__body p { margin-inline: auto; } .about-intro__title { font-size: clamp(2.2rem, 8vw, 3rem); } .about-cta__actions { flex-direction: column; align-items: stretch; } } /* Persistent underline for the current nav item (multi-page) */ .nav > a[aria-current="page"]::after { width: 100%; } /* ============================================================ Dark hero: drop the image + the sections below by 20px; hold the headline. Scoped to the homepage hero (main.page-home) so the About page keeps identical light/dark spacing. ============================================================ */ @media (min-width: 861px) { [data-theme="dark"] main.page-home { padding-top: 80px; } [data-theme="dark"] .hero__content { margin-top: -80px; } } /* ============================================================ NEWSLETTER POPUP — compact card that slides up from the bottom, horizontally centered. No backdrop: the page stays fully usable. Shared layout/spacing; only colour branches via --modal-* tokens. ============================================================ */ .modal { position: fixed; left: 50%; bottom: 1.5rem; z-index: 200; width: min(40rem, calc(100vw - 2rem)); /* --rest is the horizontal resting transform (centered on desktop, none on mobile). translateY animates the slide-up on top of it. */ --rest: translateX(-50%); opacity: 0; visibility: hidden; transform: var(--rest) translateY(28px); transition: opacity .4s ease, transform .55s cubic-bezier(0.22, 1, 0.36, 1), visibility .4s ease; } .modal.is-open { opacity: 1; visibility: visible; transform: var(--rest) translateY(0); } .modal__card { position: relative; width: 100%; padding: 1.5rem 1.75rem 1.4rem; text-align: left; background: var(--modal-surface); border: var(--modal-border); border-radius: 16px; box-shadow: var(--modal-shadow); } .modal__close { position: absolute; top: 1rem; right: 1.1rem; background: none; border: 0; padding: 0.2rem; font-size: 1.5rem; line-height: 1; color: var(--modal-close-fg); cursor: pointer; transition: color .2s ease; } .modal__close:hover { color: var(--modal-close-hover); } .modal__title { margin: 0 2rem 0.3rem 0; /* keep clear of the close button */ font-family: var(--cw-font-display); font-weight: 600; font-size: 1.45rem; line-height: 1.2; color: var(--text-heading); } .modal__lede { margin: 0 0 1.1rem; font-family: var(--cw-font-ui); font-size: 0.95rem; line-height: 1.55; color: var(--text-body); } .modal__form { display: flex; flex-direction: column; gap: 0.7rem; } /* Name + Email sit side by side, stacking on narrow screens. */ .modal__row { display: flex; gap: 0.7rem; } .modal__row .modal__input { flex: 1 1 0; min-width: 0; } .modal__input { width: 100%; padding: 0.8rem 1rem; font-family: var(--cw-font-ui); font-size: 0.95rem; color: var(--text-heading); background: var(--modal-input-bg); border: 1.5px solid var(--modal-input-border); border-radius: 10px; transition: border-color .2s ease, box-shadow .2s ease; } .modal__input::placeholder { color: var(--text-muted); opacity: 0.65; } .modal__input:focus { outline: none; border-color: var(--modal-input-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--modal-input-focus) 20%, transparent); } .modal__input[aria-invalid="true"] { border-color: var(--cw-orange); } .modal__error { margin: 0; font-family: var(--cw-font-ui); font-size: 0.82rem; color: var(--cw-orange); } .modal__submit { width: 100%; padding: 0.85rem 1rem; font-family: var(--cw-font-ui); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.04em; color: var(--btn-primary-fg); background: var(--btn-primary-bg); border: 0; border-radius: 10px; cursor: pointer; transition: background .2s ease, transform .15s ease; } .modal__submit:hover { background: var(--btn-primary-bg-hover); transform: translateY(-1px); } .modal__fineprint { margin: 0.9rem 0 0; text-align: center; font-family: var(--cw-font-ui); font-size: 0.78rem; color: var(--modal-fineprint); } @media (max-width: 540px) { /* Span the bottom edge; no horizontal centering needed. */ .modal { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; width: auto; --rest: translateX(0); } .modal__row { flex-direction: column; } } /* Respect reduced-motion: skip the slide, just fade (rest position only). */ @media (prefers-reduced-motion: reduce) { .modal { transition: opacity .3s ease, visibility .3s ease; transform: var(--rest) translateY(0); } } /* ============================================================ BOOK A CALL — interest form section Shared layout/spacing; colour via theme tokens (reuses the --modal-input-* tokens so inputs match in light and dark). ============================================================ */ .booking { background: var(--section-bg); text-align: center; /* Tighter top than the default section + a header-clearing scroll offset, so a "Book a Call" / "Let's Connect" click lands on the form, not on empty space. */ padding-top: clamp(2rem, 4vw, 3rem); scroll-margin-top: 80px; } .booking__inner { max-width: 42rem; margin: 0 auto; } .booking__lede { margin: 0 auto 2.25rem; max-width: 34rem; font-family: var(--cw-font-ui); font-size: 1.05rem; line-height: 1.6; color: var(--text-body); } .booking__form { max-width: 34rem; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: 1.15rem; } .booking__row { display: flex; gap: 1.15rem; } .booking__row .booking__field { flex: 1 1 0; min-width: 0; } .booking__field { display: flex; flex-direction: column; gap: 0.4rem; } .booking__field label { font-family: var(--cw-font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .booking__optional { font-weight: 400; letter-spacing: 0.04em; text-transform: none; opacity: 0.75; } .booking__field input, .booking__field textarea { width: 100%; padding: 0.85rem 1rem; font-family: var(--cw-font-ui); font-size: 1rem; color: var(--text-heading); background: var(--modal-input-bg); border: 1.5px solid var(--modal-input-border); border-radius: 10px; transition: border-color .2s ease, box-shadow .2s ease; } .booking__field textarea { resize: vertical; min-height: 6.5rem; line-height: 1.55; } .booking__field input::placeholder, .booking__field textarea::placeholder { color: var(--text-muted); opacity: 0.6; } .booking__field input:focus, .booking__field textarea:focus { outline: none; border-color: var(--modal-input-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--modal-input-focus) 20%, transparent); } .booking__field input[aria-invalid="true"], .booking__field textarea[aria-invalid="true"] { border-color: var(--cw-orange); } /* Honeypot: keep it out of sight and off the tab order. */ .booking__honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .booking__error { margin: 0; font-family: var(--cw-font-ui); font-size: 0.88rem; color: var(--cw-orange); } .booking__submit { align-self: center; margin-top: 0.35rem; min-width: 14rem; cursor: pointer; } .booking__note { margin: 0.4rem 0 0; text-align: center; font-family: var(--cw-font-accent); font-style: italic; font-size: 0.95rem; color: var(--text-muted); } .booking__done { max-width: 34rem; margin: 0 auto; } .booking__done-title { margin: 0 0 0.6rem; font-family: var(--cw-font-display); font-weight: 500; font-size: clamp(1.6rem, 4vw, 2rem); color: var(--text-heading); } .booking__done-text { margin: 0; font-family: var(--cw-font-ui); font-size: 1.05rem; line-height: 1.6; color: var(--text-body); } @media (max-width: 560px) { .booking__row { flex-direction: column; gap: 1.15rem; } .booking__submit { width: 100%; min-width: 0; } }