/* ========================================================= EDITORIAL SYSTEM — everBetter Shared tokens + typographic primitives for editorial pages. Namespace: .ed-* Typography: Helvetica (brand font). All three semantic tokens (--ed-sans / --ed-serif / --ed-mono) resolve to the same family. The "mono" and "serif" aliases are retained for semantic clarity at call sites but render identically. ========================================================= */ :root { --ed-ink: #0a1410; --ed-ink-soft: #1a2822; --ed-paper: #F0F0F0; --ed-paper-deep: #E5E5E5; --ed-teal: #008374; --ed-teal-deep: #006b5f; --ed-rule: rgba(10, 20, 16, 0.14); --ed-muted: rgba(10, 20, 16, 0.58); --ed-sans: "Helvetica Neue", Helvetica, Arial, sans-serif; --ed-serif: var(--ed-sans); --ed-mono: var(--ed-sans); /* Shared motion token used by interactive elements across the site */ --ed-ease: cubic-bezier(0.2, 0.8, 0.2, 1); } /* Smooth native anchor-jump behaviour */ html { scroll-behavior: smooth; } /* Respect user preference for reduced motion — overrides every animation / transition on the site. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------- Page transitions ---------- Cross-document View Transitions enable a smooth crossfade between every page navigation on the site. Supported in Chrome 126+, Safari 18.2+, Edge 126+. Other browsers do standard navigation — no regression, no loading page needed. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: ed-page-fade-out 0.22s var(--ed-ease) both; } ::view-transition-new(root) { animation: ed-page-fade-in 0.32s var(--ed-ease) both; } @keyframes ed-page-fade-out { to { opacity: 0; } } @keyframes ed-page-fade-in { from { opacity: 0; } } /* A subtle entrance for the first paint too — makes the initial page load feel less abrupt. Tiny opacity drop so it doesn't hurt LCP timing. NOTE: we use opacity only, not transform, because any transform value on (even translateY(0)) creates a new containing block for position:fixed descendants — which breaks the fixed navbar (it would stick to the body instead of the viewport). */ body { animation: ed-page-enter 0.35s var(--ed-ease) both; } @keyframes ed-page-enter { from { opacity: 0.6; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root), body { animation: none !important; } } /* ---------- Page shell ---------- */ .ed { font-family: var(--ed-sans); color: var(--ed-ink); background: var(--ed-paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .ed * { box-sizing: border-box; } .ed-container { max-width: 1240px; margin: 0 auto; padding: 0 2rem; } @media (max-width: 575.98px) { .ed-container { padding: 0 1.25rem; } } /* ---------- Sections & chapter markers ---------- */ .ed-section { /* Tightened from clamp(4rem..7rem) for faster scroll rhythm. Sections now pack more content per screen. */ padding: clamp(2.5rem, 5.5vw, 4.5rem) 0; position: relative; } .ed-section + .ed-section { border-top: 1px solid var(--ed-rule); } .ed-section--ink { background: var(--ed-ink); color: var(--ed-paper); --ed-rule: rgba(240, 240, 240, 0.1); --ed-muted: rgba(240, 240, 240, 0.62); } .ed-section--deep { background: var(--ed-paper-deep); } .ed-chap { display: flex; align-items: baseline; gap: 1rem; margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); font-family: var(--ed-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; } .ed-chap__num { color: var(--ed-teal); font-weight: 500; } .ed-chap__label { color: var(--ed-muted); } .ed-chap__rule { flex: 1; height: 1px; background: var(--ed-rule); align-self: center; margin-left: 0.5rem; } .ed-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; } @media (max-width: 767.98px) { .ed-split { grid-template-columns: 1fr; gap: 1.25rem; } } /* ---------- Typography ---------- */ .ed-eyebrow { font-family: var(--ed-mono); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ed-teal); display: inline-flex; align-items: center; gap: 0.75rem; margin: 0 0 1.5rem; } .ed-eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--ed-teal); } .ed-h1 { font-family: var(--ed-serif); font-weight: 300; font-size: clamp(2.75rem, 9vw, 7rem); line-height: 0.95; letter-spacing: -0.03em; margin: 0 0 1.5rem; /* No intrinsic max-width — the hero content wrapper (.ed-hero__content) sets a single, consistent column so every page's headline sits in the same visual box regardless of how short or long the text is. */ } .ed-h1 em { font-style: italic; color: var(--ed-teal); } .ed-h2 { font-family: var(--ed-serif); font-weight: 300; font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 1rem; max-width: 22ch; } .ed-h2 em { font-style: italic; color: var(--ed-teal); } .ed-h3 { font-family: var(--ed-serif); font-weight: 400; font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 0.5rem; } .ed-lede { font-family: var(--ed-serif); font-weight: 300; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.5; color: var(--ed-ink); max-width: 54ch; margin: 0 0 1.25rem; } .ed-section--ink .ed-lede { color: rgba(240, 240, 240, 0.82); } .ed-body { font-family: var(--ed-sans); font-size: 0.98rem; line-height: 1.6; color: var(--ed-muted); max-width: 64ch; } .ed-body p { margin: 0 0 0.85rem; } .ed-body p:last-child { margin-bottom: 0; } .ed-tagline { font-family: var(--ed-serif); font-style: italic; font-weight: 300; font-size: clamp(1.1rem, 2vw, 1.45rem); line-height: 1.4; /* No own max-width; the hero content wrapper controls column width so every hero reads consistently. */ color: rgba(240, 240, 240, 0.78); margin: 0 0 clamp(2rem, 5vw, 3rem); } /* ---------- Hero shell (dark chapter opener) ---------- */ .ed-hero { position: relative; background: var(--ed-ink); color: var(--ed-paper); /* Hero fills the full viewport on every page. Flex column with a centered content wrapper: the breadcrumb top row sits at the top, and .ed-hero__content (eyebrow + h1 + tagline) is vertically centered in the remaining space via margin:auto 0. dvh is used where supported so mobile browser UI bars don't shift layout. */ padding: clamp(6rem, 9vw, 7.5rem) 0 clamp(3rem, 6vw, 4.5rem); min-height: 100vh; min-height: 100dvh; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; } .ed-hero > .ed-container { flex: 1; display: flex; flex-direction: column; } .ed-hero__content { margin: auto 0; width: 100%; /* No own max-width — the hero content fills the same container width (1240px, via .ed-container) as the body sections below, so the hero reads as part of the same visual column instead of a narrower pinched block floating inside a wider shell. */ } .ed-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 75% 15%, rgba(0, 131, 116, 0.32), transparent 55%), radial-gradient(ellipse at 8% 95%, rgba(0, 131, 116, 0.15), transparent 50%); } .ed-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.91 0 0 0 0 0.82 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.75; mix-blend-mode: overlay; pointer-events: none; } .ed-hero .ed-h1 { color: var(--ed-paper); } /* Align every page's hero typography with the homepage hero (.hp-hero__*). The generic .ed-h1 / .ed-eyebrow / .ed-tagline are reused for section headers elsewhere, so we only override them inside .ed-hero. Result: about, services, portfolio, careers, contact all read with the same hero rhythm as /. */ .ed-hero .ed-h1 { font-size: clamp(2.5rem, 7vw, 5.5rem); } .ed-hero .ed-eyebrow { margin: 0 0 1.75rem; } .ed-hero .ed-eyebrow::before { width: 32px; } .ed-hero .ed-tagline { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.5; font-style: normal; margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem); } .ed-hero__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; font-family: var(--ed-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240, 240, 240, 0.5); margin-bottom: clamp(3rem, 7vw, 5rem); } .ed-hero__vol { color: var(--ed-teal); } .ed-hero__vol::before { content: "— "; } .ed-crumbs { list-style: none; display: flex; gap: 0.5rem; padding: 0; margin: 0; align-items: center; flex-wrap: wrap; } .ed-crumbs li, .ed-crumbs a { color: rgba(240, 240, 240, 0.55); text-decoration: none; } .ed-crumbs a:hover { color: var(--ed-paper); } .ed-crumbs .sep { color: rgba(240, 240, 240, 0.25); } .ed-crumbs .current { color: var(--ed-paper); } /* ---------- Buttons ---------- */ .ed-btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.6rem; font-family: var(--ed-sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; border-radius: 999px; transition: all 0.25s ease; border: 1px solid transparent; cursor: pointer; background: none; } .ed-btn--primary { background: var(--ed-paper); color: var(--ed-ink); } .ed-btn--primary:hover { background: var(--ed-teal); color: var(--ed-paper); transform: translateY(-1px); } .ed-btn--primary-ink { background: var(--ed-ink); color: var(--ed-paper); } .ed-btn--primary-ink:hover { background: var(--ed-teal); color: var(--ed-paper); transform: translateY(-1px); } .ed-btn--ghost { background: transparent; color: var(--ed-paper); border-color: rgba(240, 240, 240, 0.28); } .ed-btn--ghost:hover { border-color: var(--ed-paper); background: rgba(240, 240, 240, 0.06); } .ed-btn--outline { background: transparent; color: var(--ed-ink); border-color: var(--ed-rule); } .ed-btn--outline:hover { background: var(--ed-ink); color: var(--ed-paper); } .ed-btn--teal { background: var(--ed-teal); color: var(--ed-paper); } .ed-btn--teal:hover { background: var(--ed-teal-deep); color: var(--ed-paper); transform: translateY(-1px); } /* ---------- Misc primitives ---------- */ .ed-rule { height: 1px; background: var(--ed-rule); border: 0; margin: clamp(2rem, 4vw, 3rem) 0; } .ed-kicker { font-family: var(--ed-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ed-teal); display: block; margin-bottom: 1rem; } .ed-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; } .ed-chip { font-family: var(--ed-mono); font-size: 0.72rem; padding: 0.3rem 0.8rem; border: 1px solid var(--ed-rule); border-radius: 999px; color: var(--ed-muted); letter-spacing: 0.02em; } .ed-section--ink .ed-chip { border-color: rgba(240, 240, 240, 0.22); color: rgba(240, 240, 240, 0.75); } /* ========================================================= ERROR / UTILITY PAGES Full-viewport editorial treatment for 404, 500, 401, coming-soon, maintenance. Dark ink + grain + massive serif numeral or headline. ========================================================= */ .ed-err { min-height: 100vh; background: var(--ed-ink); color: var(--ed-paper); position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; /* Top padding must clear the 64px fixed navbar + breathing room. */ padding: clamp(5.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); } .ed-err::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 70% 15%, rgba(0, 131, 116, 0.3), transparent 55%), radial-gradient(ellipse at 10% 95%, rgba(0, 131, 116, 0.15), transparent 50%); } .ed-err::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.91 0 0 0 0 0.82 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.7; mix-blend-mode: overlay; pointer-events: none; } .ed-err__top { max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; font-family: var(--ed-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240, 240, 240, 0.5); } .ed-err__top .vol { color: var(--ed-teal); } .ed-err__top .vol::before { content: "— "; } .ed-err__top .status { display: inline-flex; align-items: center; gap: 0.6rem; } .ed-err__top .status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ed-teal); box-shadow: 0 0 10px var(--ed-teal); animation: ed-pulse 2.4s ease-in-out infinite; } @keyframes ed-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.7); } } .ed-err__stage { max-width: 1240px; width: 100%; margin: 0 auto; padding: clamp(3rem, 10vw, 6rem) 2rem 2rem; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; flex: 1; } @media (max-width: 767.98px) { .ed-err__stage { grid-template-columns: 1fr; padding-top: 2rem; gap: 2rem; } .ed-err__top { padding: 0 1.25rem; } } @media (max-width: 575.98px) { .ed-err__stage { padding: 2rem 1.25rem; } } .ed-err__code { font-family: var(--ed-serif); font-weight: 200; font-size: clamp(7rem, 22vw, 18rem); line-height: 0.82; letter-spacing: -0.05em; color: var(--ed-paper); margin: 0; display: block; } .ed-err__code em { font-style: italic; color: var(--ed-teal); } .ed-err__eyebrow { font-family: var(--ed-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ed-teal); display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; } .ed-err__eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--ed-teal); } .ed-err__title { font-family: var(--ed-serif); font-weight: 300; font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 1.25rem; color: var(--ed-paper); max-width: 22ch; } .ed-err__title em { font-style: italic; color: var(--ed-teal); } .ed-err__body { font-family: var(--ed-sans); font-size: 1rem; line-height: 1.65; color: rgba(240, 240, 240, 0.72); max-width: 46ch; margin: 0 0 2rem; } .ed-err__ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; } .ed-err__notify { display: flex; gap: 0.4rem; align-items: stretch; margin: 0 0 2rem; max-width: 420px; } .ed-err__notify input { flex: 1; padding: 0.85rem 1rem; background: rgba(240, 240, 240, 0.06); border: 1px solid rgba(240, 240, 240, 0.14); border-radius: 999px 0 0 999px; color: var(--ed-paper); font-family: var(--ed-sans); font-size: 0.95rem; outline: none; transition: border-color 0.2s ease; } .ed-err__notify input::placeholder { color: rgba(240, 240, 240, 0.4); } .ed-err__notify input:focus { border-color: var(--ed-teal); background: rgba(240, 240, 240, 0.1); } .ed-err__notify button { padding: 0.85rem 1.5rem; background: var(--ed-paper); color: var(--ed-ink); border: 0; border-radius: 0 999px 999px 0; font-family: var(--ed-sans); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .ed-err__notify button:hover { background: var(--ed-teal); color: var(--ed-paper); } .ed-err__quick { max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 2rem; border-top: 1px solid rgba(240, 240, 240, 0.1); padding-top: 2rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; font-family: var(--ed-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240, 240, 240, 0.5); } @media (max-width: 575.98px) { .ed-err__quick { padding: 2rem 1.25rem 0; } } .ed-err__quick ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 2rem; flex-wrap: wrap; } .ed-err__quick a { color: rgba(240, 240, 240, 0.65); text-decoration: none; transition: color 0.2s ease; } .ed-err__quick a:hover { color: var(--ed-teal); }