/* ============================================================ ELT Consultants — Stylesheet Editorial-warm direction · Fraunces display · Manrope body ============================================================ */ /* ============================================================ 0. Tokens — Themed palette system ------------------------------------------------------------ Switch palettes by setting `data-theme` on : (default — warm earth, LATAM) (paprika + chalkboard green) (clay + deep indigo + saffron) The brand logo's teal stays constant across themes — it's a fixed asset (JPG with teal baked in) and acts as a brand stamp. ============================================================ */ :root { /* Default — Verdant: deep teal-green + warm cream */ --bg-page: #FBF7EE; /* warm cream */ --bg-surface: #F2EBD6; /* warmer surface */ --bg-elevated: #FFFDF8; /* near-white */ --border-subtle: #E6DDC4; --border-strong: #D2C7A7; --text-primary: #1B2A26; --text-secondary: #3F524C; --text-muted: #6B7C76; --brand-primary: #2A7C6F; /* deep teal-green */ --brand-primary-hover: #1F665B; --brand-primary-deep: #0D4F3D; --brand-primary-soft: #3C9A8B; --brand-secondary: #6E7943; /* olive — quiet accent */ --brand-secondary-soft: #97C693; --brand-accent: #97C693; /* sage */ --brand-accent-soft: #D7EBC9; /* light sage */ --brand-accent-deep: #4B916D; --shadow-tint: 13, 79, 61; /* deep teal for shadows */ } [data-theme="terracotta"] { --bg-page: #FAF1DD; --bg-surface: #F3E5C7; --bg-elevated: #FFFBF1; --border-subtle: #E9D5A5; --border-strong: #DDC489; --text-primary: #2C1F14; --text-secondary: #4F3E2C; --text-muted: #7A6952; --brand-primary: #B65238; --brand-primary-hover: #9A4128; --brand-primary-deep: #6D2A18; --brand-primary-soft: #D88468; --brand-secondary: #6E7943; --brand-secondary-soft: #A2A674; --brand-accent: #E0A24A; --brand-accent-soft: #F3D8A7; --brand-accent-deep: #B7791F; --shadow-tint: 109, 42, 24; } [data-theme="schoolroom"] { --bg-page: #FBF4E4; --bg-surface: #F5E2BA; --bg-elevated: #FFFCEF; --border-subtle: #ECD594; --border-strong: #D9BD72; --text-primary: #1B1F19; --text-secondary: #3A3C30; --text-muted: #6E705F; --brand-primary: #D86C3E; /* paprika */ --brand-primary-hover: #B85327; --brand-primary-deep: #8E3A18; --brand-primary-soft: #E59573; --brand-secondary: #264027; /* chalkboard green */ --brand-secondary-soft: #5C7A5C; --brand-accent: #F3C969; /* mustard */ --brand-accent-soft: #F8E4AC; --brand-accent-deep: #C49B3E; --shadow-tint: 38, 64, 39; } [data-theme="indigo"] { --bg-page: #F9EDD7; --bg-surface: #ECCFA3; --bg-elevated: #FFF7E3; --border-subtle: #DDB67F; --border-strong: #C99B62; --text-primary: #231E1A; --text-secondary: #443A30; --text-muted: #7A6F61; --brand-primary: #CE7340; /* clay */ --brand-primary-hover: #A4582A; --brand-primary-deep: #7E411B; --brand-primary-soft: #DE9269; --brand-secondary: #374A6C; /* indigo */ --brand-secondary-soft: #6F84A8; --brand-accent: #E8B33A; /* saffron */ --brand-accent-soft: #ECCFA3; --brand-accent-deep: #B58818; --shadow-tint: 35, 30, 26; } [data-theme="dark"] { /* Surfaces — near-black with a hint of cool green */ --bg-page: #060A08; /* near-black, slight green tint */ --bg-surface: #0E1612; /* card surface */ --bg-elevated: #15201A; /* raised */ --border-subtle: #1B2620; --border-strong: #2A3A30; /* Text — soft near-white with green tint */ --text-primary: #E2F5E8; --text-secondary: #A8C4B0; --text-muted: #6F8A78; /* Brand — phosphor / glow-in-the-dark green */ --brand-primary: #5EFFB0; /* vivid phosphor green */ --brand-primary-hover: #82FFC4; --brand-primary-deep: #2BC07A; --brand-primary-soft: #92F0BB; --brand-secondary: #1F3026; --brand-secondary-soft: #4A6B55; --brand-accent: #B7FFD0; /* soft mint glow */ --brand-accent-soft: #1A2620; /* dark elevated for nav pill */ --brand-accent-deep: #4ED69A; --shadow-tint: 0, 12, 6; /* near-black warm-shifted for shadow */ color-scheme: dark; } /* The legacy aliases declared in :root re-resolve automatically because they reference var(--bg-page) etc., which the [data-theme] block overrides. No need to re-alias here. */ /* Brand logo stamp — fixed across all themes (the JPG has teal baked in) */ :root { --logo-stamp: #2A7C6F; /* Legacy aliases — keep older CSS working without rewrites. New tokens above are the canonical names. */ --cream-50: var(--bg-page); --cream-100: var(--bg-surface); --cream-200: var(--border-subtle); --cream-300: var(--border-strong); --ink: var(--text-primary); --ink-soft: var(--text-secondary); --ink-mute: var(--text-muted); --teal-400: var(--brand-primary-soft); --teal-500: var(--brand-primary); --teal-600: var(--brand-primary-hover); --teal-700: var(--brand-primary-deep); --sage-200: var(--brand-accent-soft); --sage-300: var(--brand-accent-soft); --sage-400: var(--brand-accent); --beige: var(--brand-secondary-soft); --sky: var(--brand-secondary); /* Type */ --font-display: "Fraunces", "Iowan Old Style", "Apple Garamond", Georgia, serif; --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Spacing scale */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 6.5rem; --s-10: 9rem; /* Radii */ --r-sm: 0.5rem; --r-md: 1rem; --r-lg: 1.5rem; --r-xl: 2rem; --r-pill: 999px; /* Shadows — use shadow-tint per theme */ --shadow-sm: 0 1px 3px rgba(var(--shadow-tint), 0.08), 0 1px 2px rgba(var(--shadow-tint), 0.05); --shadow-md: 0 10px 30px -10px rgba(var(--shadow-tint), 0.20), 0 4px 12px -4px rgba(var(--shadow-tint), 0.10); --shadow-lg: 0 30px 70px -20px rgba(var(--shadow-tint), 0.25); /* Container */ --container: 1200px; --container-narrow: 880px; /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- 1. Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background: var(--cream-50); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Subtle paper grain texture across the page */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: 0.35; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } /* In dark mode the paper-multiply texture goes invisible; swap to a screen-blended green-tinted noise that reads as faint phosphor grain. */ [data-theme="dark"] body::before { mix-blend-mode: screen; opacity: 0.10; background-image: url("data:image/svg+xml;utf8,"); } /* Subtle glow on italic emphasis in dark mode — phosphorescent feel */ [data-theme="dark"] h1 em, [data-theme="dark"] h2 em, [data-theme="dark"] .hero__title em, [data-theme="dark"] .site-footer__tagline em { text-shadow: 0 0 18px color-mix(in srgb, var(--brand-primary) 55%, transparent), 0 0 38px color-mix(in srgb, var(--brand-primary) 25%, transparent); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color 180ms var(--ease-out); } ul, ol { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; border: 0; background: transparent; } ::selection { background: var(--teal-500); color: var(--cream-50); } /* ---------- 2. Typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 0; letter-spacing: -0.02em; line-height: 1.05; margin: 0; color: var(--teal-700); } h1 em, h2 em, h3 em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; color: var(--teal-500); } p { margin: 0; } /* Utility — small caps eyebrow */ .eyebrow { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-600); margin: 0; } .eyebrow__leaf { width: 18px; height: 18px; color: var(--sage-400); } .eyebrow__dot { width: 8px; height: 8px; background: var(--teal-500); border-radius: 50%; } /* ---------- 3. Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-6); padding: var(--s-4) var(--s-7); background: color-mix(in srgb, var(--bg-page) 85%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--brand-primary-deep) 8%, transparent); } .brand { display: inline-flex; align-items: center; gap: var(--s-3); } .brand__mark { width: 44px; height: 44px; object-fit: cover; object-position: center; border-radius: 50%; /* Cream pill around the logo so its baked-in teal reads as a brand stamp, decoupled from the active page palette. */ background: var(--bg-elevated); padding: 3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-primary-deep) 14%, transparent), 0 2px 4px color-mix(in srgb, var(--brand-primary-deep) 12%, transparent); } .brand__wordmark { display: flex; flex-direction: column; line-height: 1; } .brand__name { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; color: var(--teal-700); } .brand__tag { font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-500); margin-top: 3px; } /* Nav middle — pill bar with italic Roman numerals + scroll-spy active state */ .site-nav { justify-self: center; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem; background: color-mix(in srgb, var(--brand-accent-soft) 50%, transparent); border: 1px solid color-mix(in srgb, var(--brand-accent) 28%, transparent); border-radius: var(--r-pill); box-shadow: inset 0 1px 0 color-mix(in srgb, white 30%, transparent); } .site-nav a { position: relative; display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0.55rem 0.95rem 0.6rem; border-radius: var(--r-pill); color: var(--text-secondary); font-family: var(--font-body); font-weight: 500; font-size: 0.92rem; letter-spacing: -0.005em; white-space: nowrap; transition: color 240ms var(--ease-out), background 240ms var(--ease-out), box-shadow 240ms var(--ease-out); } /* Filled-circle dot prefix — small, neutral indicator */ .site-nav a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-accent-deep); opacity: 0.55; transform: translateY(-1px); transition: background 240ms var(--ease-out), opacity 240ms var(--ease-out), transform 240ms var(--ease-out); } .site-nav a:hover { color: var(--brand-primary); background: color-mix(in srgb, var(--bg-elevated) 70%, transparent); } .site-nav a:hover::before { background: var(--brand-primary); opacity: 1; transform: translateY(-1px) scale(1.5); } .site-nav a.is-active { color: var(--brand-primary-deep); background: var(--bg-elevated); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-accent) 60%, transparent), 0 2px 8px -2px color-mix(in srgb, var(--brand-primary-deep) 18%, transparent); } .site-nav a.is-active::before { background: var(--brand-primary); opacity: 1; transform: translateY(-1px) scale(1.5); } /* Legacy separator from earlier markup — hide if present */ .site-nav .dot { display: none; } /* Theme toggle — sun/moon icon button in the header right cluster */ .site-header__right { display: inline-flex; align-items: center; gap: var(--s-3); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary); cursor: pointer; transition: transform 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out), background 200ms var(--ease-out); } .theme-toggle:hover { color: var(--brand-primary); border-color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 8%, transparent); } .theme-toggle:active { transform: scale(0.92); } .theme-toggle:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; } .theme-toggle__icon { width: 18px; height: 18px; } /* Show moon by default (light mode); sun in dark mode */ .theme-toggle__icon--sun { display: none; } [data-theme="dark"] .theme-toggle__icon--sun { display: block; } [data-theme="dark"] .theme-toggle__icon--moon { display: none; } /* ---------- Theme-switch animation ---------- Two coordinated mechanisms: 1. View Transitions API (modern browsers): a circular clip-reveal of the new theme blooming from the toggle button's position. Dark reveals slowly (dusk), light reveals briskly (sunrise). 2. Fallback (older browsers): a `.theme-switching` class on forces a one-shot 380 ms transition on color/border/shadow/fill so the swap fades instead of flashing. */ ::view-transition-old(root) { /* Old screen stays put underneath while new one wipes over it */ animation: none; } ::view-transition-new(root) { animation: theme-reveal 600ms cubic-bezier(0.45, 0, 0.55, 1); } /* Going INTO dark — slower, more gradual (dusk) */ [data-transition-to="dark"]::view-transition-new(root) { animation-duration: 720ms; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); } /* Going INTO light — brisker, hopeful (sunrise) */ [data-transition-to="light"]::view-transition-new(root) { animation-duration: 520ms; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @keyframes theme-reveal { from { clip-path: circle(0 at var(--toggle-x, 90%) var(--toggle-y, 5%)); } to { clip-path: circle(150vmax at var(--toggle-x, 90%) var(--toggle-y, 5%)); } } /* Fallback: when the View Transitions API isn't available, the toggle handler adds `.theme-switching` to for ~400 ms so color properties animate instead of flashing. The !important is necessary to win against per-element transitions during this window only. */ body.theme-switching, body.theme-switching *, body.theme-switching *::before, body.theme-switching *::after { transition-property: background-color, color, border-color, box-shadow, fill, stroke !important; transition-duration: 380ms !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } body.theme-switching, body.theme-switching *, body.theme-switching *::before, body.theme-switching *::after { transition: none !important; } } .cta { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.7rem 1.15rem; font-size: 0.92rem; font-weight: 600; border-radius: var(--r-pill); transition: transform 200ms var(--ease-out), background 200ms var(--ease-out), color 200ms var(--ease-out); } .cta--pill { background: var(--teal-700); color: var(--cream-50); } .cta--pill:hover { background: var(--teal-500); transform: translateY(-1px); } .cta .arrow, .btn .arrow { display: inline-block; transition: transform 200ms var(--ease-out); } .cta:hover .arrow, .btn:hover .arrow { transform: translate(2px, -2px); } /* ---------- 4. Hero ---------- The hero is full-bleed (max-width:none) with responsive side padding that centers the content area. This lets .hero__bg span the full viewport width and the glow fade off the edges naturally, while the inner grid (text + photo) stays inside the same visual container as every other section. */ .hero { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-9); align-items: center; max-width: none; margin: 0; padding-block: var(--s-10) var(--s-9); padding-inline: max(var(--s-7), calc((100% - var(--container)) / 2)); overflow: hidden; } /* Decorative section backgrounds (looping video or still image). Full-bleed across the viewport even when the parent section is max-width-constrained. Opacity is per-section, set via --bg-opacity so the visual presence can be tuned from one place. */ .bg-video, .bg-image { position: absolute; inset: 0; width: 100vw; height: 100%; left: 50%; transform: translateX(-50%); object-fit: cover; pointer-events: none; opacity: var(--bg-opacity, 0.18); } .hero { --bg-opacity: 0.22; } .section--work { --bg-opacity: 0.14; isolation: isolate; } .section--philosophy { --bg-opacity: 0.16; } .section--proud { --bg-opacity: 0.16; isolation: isolate; } .section--team { --bg-opacity: 0.16; isolation: isolate; } .hero .bg-video { z-index: -2; } .section--work .bg-video { z-index: -2; } .section--philosophy .bg-video { z-index: -1; } .section--proud .bg-image { z-index: -1; } .section--team .bg-video { z-index: -1; } @media (prefers-reduced-motion: reduce) { .bg-video { display: none; } } /* ---------- First-load entrance ---------- Staggered fade + rise on the hero so the page "materializes" on first paint. Pure CSS, fires once on load (no JS, no replay). Curve is ease-out-expo for a premium settle. Honors prefers-reduced-motion. */ @keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes hero-media-rise { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .hero .eyebrow { animation: hero-rise 700ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both; } .hero__title { animation: hero-rise 850ms cubic-bezier(0.16, 1, 0.3, 1) 220ms both; } .hero__lede { animation: hero-rise 700ms cubic-bezier(0.16, 1, 0.3, 1) 440ms both; } .hero__actions { animation: hero-rise 700ms cubic-bezier(0.16, 1, 0.3, 1) 580ms both; } .hero__media { animation: hero-media-rise 950ms cubic-bezier(0.16, 1, 0.3, 1) 360ms both; } /* Hero background video — fade is driven by JS, not a CSS clock. The video stays at opacity 0 until JS detects the `canplay` event and adds .is-ready, at which point the transition runs. This keeps the fade in sync with what the user actually sees: on first load (file still downloading) the bloom waits for real frames; on cached visits it starts immediately. Duration is intentionally long (~2.8s) so the reveal reads as a slow bloom rather than a flash. */ .hero .bg-video { opacity: 0; transition: opacity 3600ms cubic-bezier(0.16, 1, 0.3, 1); } .hero .bg-video.is-ready { opacity: var(--bg-opacity, 0.22); } @media (prefers-reduced-motion: reduce) { .hero .eyebrow, .hero__title, .hero__lede, .hero__actions, .hero__media { animation: none; } .hero .bg-video { opacity: var(--bg-opacity, 0.22); transition: none; } } .hero__bg { /* Soft luminous bloom — two layered gradients that decay on different scales so the eye reads it as natural light (quadratic-ish falloff) rather than a contained ellipse with a visible boundary. Layer 1: small bright core. Layer 2: very wide, very soft ambient halo. Many fractional stops simulate exponential alpha decay. */ position: absolute; inset: 0; background: radial-gradient(ellipse 28% 38% at 30% 46%, color-mix(in srgb, var(--brand-accent-soft) 60%, transparent) 0%, color-mix(in srgb, var(--brand-accent-soft) 38%, transparent) 22%, color-mix(in srgb, var(--brand-accent-soft) 18%, transparent) 50%, color-mix(in srgb, var(--brand-accent-soft) 6%, transparent) 75%, transparent 100%), radial-gradient(ellipse 95% 110% at 30% 46%, color-mix(in srgb, var(--brand-accent-soft) 14%, transparent) 0%, color-mix(in srgb, var(--brand-accent-soft) 8%, transparent) 25%, color-mix(in srgb, var(--brand-accent-soft) 4%, transparent) 50%, color-mix(in srgb, var(--brand-accent-soft) 1%, transparent) 75%, transparent 100%); z-index: -1; } .hero__text { position: relative; z-index: 2; } .hero__title { font-size: clamp(3rem, 7.2vw, 6.25rem); font-weight: 350; line-height: 0.98; margin-top: var(--s-5); letter-spacing: -0.035em; color: var(--teal-700); } .hero__lede { max-width: 36ch; margin-top: var(--s-6); font-size: 1.125rem; line-height: 1.55; color: var(--ink-soft); } .hero__lede .amp { font-family: var(--font-display); font-style: italic; font-size: 1.25em; color: var(--teal-500); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; margin: 0 0.05em; } .hero__actions { display: flex; gap: var(--s-3); margin-top: var(--s-7); flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.95rem 1.4rem; font-size: 0.98rem; font-weight: 600; border-radius: var(--r-pill); transition: all 220ms var(--ease-out); border: 1px solid transparent; } .btn--primary { background: var(--teal-700); color: var(--cream-50); } .btn--primary:hover { background: var(--teal-500); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn--ghost { background: transparent; color: var(--teal-700); border-color: var(--cream-300); } .btn--ghost:hover { background: var(--cream-100); border-color: var(--teal-500); } /* Hero media — asymmetric framed photo */ .hero__media { position: relative; margin: 0; align-self: stretch; display: flex; flex-direction: column; gap: var(--s-4); } .hero__media-frame { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; background: var(--cream-100); box-shadow: var(--shadow-lg); transform: rotate(1.2deg); } .hero__media-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--brand-primary-deep) 45%, transparent) 100%); } .hero__media-frame img { width: 100%; height: 100%; object-fit: cover; } /* Hero photo: both variants always rendered, crossfade via opacity so the image change is part of the theme transition rather than a hard swap */ .hero__media-img { position: absolute; inset: 0; transition: opacity 420ms cubic-bezier(0.4, 0, 0.2, 1); } .hero__media-img--light { opacity: 1; } .hero__media-img--dark { opacity: 0; } [data-theme="dark"] .hero__media-img--light { opacity: 0; } [data-theme="dark"] .hero__media-img--dark { opacity: 1; } @media (prefers-reduced-motion: reduce) { .hero__media-img { transition: none; } } .hero__media figcaption { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--s-3); font-size: 0.82rem; color: var(--ink-mute); } .hero__caption-label { font-family: var(--font-display); font-style: italic; font-size: 0.96rem; color: var(--teal-600); } .hero__caption-meta { letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; font-size: 0.7rem; } .hero__sprig { position: absolute; right: 3%; bottom: -2%; width: 80px; height: auto; color: var(--sage-400); opacity: 0.6; z-index: 0; } /* ---------- 5. Section base ---------- */ .section { max-width: var(--container); margin: 0 auto; padding: var(--s-10) var(--s-7); position: relative; } /* Quiet hairline divider between consecutive sections */ .section + .section::before { content: ""; display: block; width: 56px; height: 1px; margin: calc(var(--s-9) * -1) auto var(--s-9); background: var(--border-strong); opacity: 0.6; } .section.section--proud + .section::before { margin-top: var(--s-2); } .section__header { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: var(--s-6); row-gap: var(--s-3); align-items: start; margin-bottom: var(--s-8); } .section__number { grid-row: 1 / -1; font-family: var(--font-display); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 300; color: var(--sage-400); line-height: 1; letter-spacing: -0.04em; } .section__title { font-size: clamp(2.25rem, 4.8vw, 4rem); font-weight: 350; letter-spacing: -0.03em; } .section__title--center { text-align: center; margin: 0 auto; } .section__lede { max-width: 56ch; font-size: 1.125rem; line-height: 1.6; color: var(--ink-soft); } .section__header .eyebrow { grid-column: 2; } /* ---------- 6. What We Do (services) ---------- */ .section--work { position: relative; isolation: isolate; background: radial-gradient(900px 400px at 90% 0%, color-mix(in srgb, var(--brand-accent) 22%, transparent), transparent 70%); } /* Very subtle dot-grid texture — barely-there methodology paper feel */ .section--work::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, color-mix(in srgb, var(--brand-primary-deep) 18%, transparent) 1px, transparent 1.4px); background-size: 28px 28px; background-position: 0 0; opacity: 0.18; pointer-events: none; z-index: -1; /* Soft fade-out at the edges so the pattern doesn't read as a hard slab */ -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, #000 40%, transparent 100%); } .services { display: grid; grid-template-columns: 0.35fr 1fr; gap: var(--s-8); } .services__caption { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--teal-600); line-height: 1.4; position: sticky; top: 100px; align-self: start; } .services__list { display: flex; flex-direction: column; gap: 0; } .service { position: relative; display: grid; grid-template-columns: 4.5rem 1fr; column-gap: var(--s-5); padding: var(--s-5) var(--s-3) var(--s-5) var(--s-4); border-bottom: 1px solid var(--cream-200); border-radius: var(--r-md); transition: all 240ms var(--ease-out); } .service:first-child { padding-top: var(--s-4); } .service:last-child { border-bottom: 0; } .service::after { /* Small terracotta dot in the right margin — a recurring graphic accent */ content: ""; position: absolute; right: var(--s-4); top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--brand-accent); opacity: 0.35; transition: all 240ms var(--ease-out); } .service:hover { background: color-mix(in srgb, var(--bg-elevated) 80%, transparent); padding-left: var(--s-5); transform: translateX(2px); } .service:hover::after { background: var(--brand-primary); opacity: 1; transform: translateY(-50%) scale(1.4); } .service:hover .service__icon { color: var(--brand-primary); transform: rotate(-3deg) scale(1.06); } /* Subject-matching SVG icon — replaces the old Roman numeral */ .service__icon { grid-column: 1; grid-row: 1 / span 2; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--brand-accent-deep); transition: color 240ms var(--ease-out), transform 280ms var(--ease-out); /* Pull up so icon visually aligns with the title baseline */ margin-top: 2px; } .service__icon svg { width: 100%; height: 100%; display: block; } .service__title { grid-column: 2; font-size: 1.65rem; font-weight: 400; letter-spacing: -0.015em; color: var(--text-primary); } .service__body { grid-column: 2; margin-top: var(--s-2); color: var(--ink-soft); max-width: 58ch; } /* ---------- 6.5 Carousel ---------- */ .carousel { margin-top: var(--s-9); position: relative; } .carousel__eyebrow { font-family: var(--font-display); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0; font-size: 1.15rem; color: var(--teal-600); margin-bottom: var(--s-5); text-align: center; } .carousel__viewport { position: relative; overflow: hidden; /* Mask the edges for a soft horizontal fade */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .carousel__track { display: flex; gap: var(--s-5); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: var(--s-3) var(--s-2) var(--s-5); scrollbar-width: none; } .carousel__track::-webkit-scrollbar { display: none; } .carousel__slide { flex: 0 0 calc((100% - var(--s-5) * 2) / 3); scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; gap: var(--s-3); } .carousel__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-xl); overflow: hidden; background: var(--cream-100); box-shadow: var(--shadow-md); isolation: isolate; } .carousel__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--brand-primary-deep) 28%, transparent) 100%); pointer-events: none; } .carousel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); } .carousel__slide:hover .carousel__media img { transform: scale(1.04); } .carousel__caption { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--s-3); font-size: 0.88rem; color: var(--ink-mute); } .carousel__caption-title { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--teal-600); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; } .carousel__caption-meta { letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.7rem; font-weight: 600; color: var(--ink-mute); } .carousel__controls { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin-top: var(--s-5); } .carousel__btn { width: 44px; height: 44px; border-radius: 50%; background: var(--cream-50); color: var(--teal-700); border: 1px solid var(--cream-300); display: inline-flex; align-items: center; justify-content: center; transition: all 200ms var(--ease-out); cursor: pointer; } .carousel__btn:hover { background: var(--teal-700); color: var(--cream-50); border-color: var(--teal-700); transform: translateY(-2px); box-shadow: var(--shadow-md); } .carousel__btn:active { transform: translateY(0); } .carousel__btn:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 3px; } .carousel__dots { display: inline-flex; align-items: center; gap: var(--s-2); } .carousel__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--cream-300); cursor: pointer; transition: all 200ms var(--ease-out); } .carousel__dot.is-active { width: 28px; border-radius: 4px; background: var(--teal-500); } .carousel__dot:hover { background: var(--sage-400); } .carousel__dot.is-active:hover { background: var(--teal-600); } @media (max-width: 960px) { .carousel__slide { flex: 0 0 calc((100% - var(--s-4)) / 2); } .carousel__track { gap: var(--s-4); } } @media (max-width: 600px) { .carousel__slide { flex: 0 0 85%; } .carousel__viewport { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 2%, #000 92%, transparent); } } /* ---------- 7. Philosophy ---------- */ .section--philosophy { position: relative; isolation: isolate; text-align: center; max-width: var(--container-narrow); padding: var(--s-9) var(--s-7); } /* Subtle botanical sprig accent — bottom-left, very low opacity */ .section--philosophy::before { content: ""; position: absolute; left: -10px; bottom: 8%; width: 140px; height: 100px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: contain; opacity: 0.22; pointer-events: none; z-index: -1; } /* Mirrored sprig at top-right for balance */ .section--philosophy::after { content: ""; position: absolute; right: -10px; top: 8%; width: 140px; height: 100px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: contain; opacity: 0.22; pointer-events: none; z-index: -1; transform: scaleX(-1); } /* All direct children sit above the decorative ::before / ::after sprigs (which are at z-index: -1). .bg-video is excluded so it can keep its absolute positioning and act as a background instead of a normal-flow banner. */ .section--philosophy > *:not(.bg-video) { position: relative; z-index: 1; } /* Dark-mode: brighten the green sprigs to a phosphor glow */ [data-theme="dark"] .section--philosophy::before, [data-theme="dark"] .section--philosophy::after { opacity: 0.22; filter: brightness(1.4) saturate(1.5) drop-shadow(0 0 6px color-mix(in srgb, var(--brand-primary) 35%, transparent)); } .section--philosophy .section__number { display: block; text-align: center; margin: 0 auto var(--s-4); } .philosophy__quote { font-family: var(--font-display); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.25; letter-spacing: -0.015em; color: var(--teal-700); margin: var(--s-7) auto 0; max-width: 28ch; position: relative; } .philosophy__mark { position: absolute; top: -0.6em; left: -0.5em; font-size: 4em; line-height: 1; color: var(--sage-400); opacity: 0.6; } .philosophy__body { max-width: 60ch; margin: var(--s-7) auto 0; font-size: 1.0625rem; color: var(--ink-soft); line-height: 1.75; } .philosophy__body em { font-family: var(--font-display); font-style: italic; color: var(--teal-600); font-size: 1.1em; } /* ---------- 8. Proud of ---------- */ .section--proud { background: var(--cream-100); max-width: none; padding-left: 0; padding-right: 0; } .section--proud > .section__header, .section--proud > .proud-groups { max-width: var(--container); margin-left: auto; margin-right: auto; padding-left: var(--s-7); padding-right: var(--s-7); } .eyebrow--proud { font-family: var(--font-display); font-style: italic; text-transform: none; font-size: 1.1rem; letter-spacing: 0.01em; color: var(--teal-500); font-weight: 350; } .proud-groups { display: flex; flex-direction: column; gap: var(--s-9); } .proud-group__title { display: flex; align-items: baseline; gap: var(--s-4); font-size: 1.65rem; font-weight: 400; color: var(--teal-700); padding-bottom: var(--s-4); border-bottom: 1px solid var(--cream-300); margin-bottom: var(--s-6); } .proud-group__index { font-family: var(--font-display); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; font-weight: 300; color: var(--sage-400); font-size: 1.4em; } .proud-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-5) var(--s-7); } .proud-item { display: grid; grid-template-columns: 48px 1fr; column-gap: var(--s-4); align-items: start; padding: var(--s-4); background: color-mix(in srgb, var(--bg-elevated) 65%, transparent); border: 1px solid color-mix(in srgb, var(--brand-accent) 18%, transparent); border-radius: var(--r-md); transition: all 240ms var(--ease-out); } .proud-item:hover { background: var(--bg-elevated); border-color: color-mix(in srgb, var(--brand-primary) 38%, transparent); transform: translateY(-3px); box-shadow: var(--shadow-md); } .flag { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--cream-200), var(--shadow-sm); } .flag-stack { position: relative; width: 48px; height: 40px; } .flag-stack .flag--stacked { position: absolute; width: 26px; height: 26px; top: 0; left: 0; } .flag-stack .flag--stacked:nth-child(2) { left: 11px; top: 7px; z-index: 2; } .flag-stack .flag--stacked:nth-child(3) { left: 22px; top: 14px; z-index: 3; } .proud-item__body { font-size: 0.98rem; color: var(--ink-soft); line-height: 1.55; } .proud-item__body strong { color: var(--teal-700); font-weight: 600; } .proud-item__body em { font-family: var(--font-display); font-style: italic; color: var(--ink); font-size: 1.05em; } .proud-item__body .cn { font-weight: 600; color: var(--teal-600); letter-spacing: 0.01em; } .proud-item__link { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 0.85rem; font-weight: 600; color: var(--teal-500); text-decoration: underline; text-decoration-color: var(--sage-300); text-underline-offset: 3px; } .proud-item__link:hover { color: var(--teal-700); } /* Inline links within proud-item__body text */ .proud-item__body a:not(.proud-item__link) { color: inherit; text-decoration: underline; text-decoration-color: var(--sage-400); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 180ms var(--ease-out), text-decoration-color 180ms var(--ease-out); } .proud-item__body a:not(.proud-item__link):hover { color: var(--teal-700); text-decoration-color: var(--teal-500); } /* When the link wraps a or , preserve emphasis */ .proud-item__body a strong { color: var(--teal-700); } .proud-item__body a:hover strong { color: var(--teal-500); } /* ---------- 9. Team ---------- */ .section--team { padding-top: var(--s-10); padding-bottom: var(--s-10); } .team-grid { display: grid; gap: var(--s-8); margin: 0 auto; } .team-grid--founders { grid-template-columns: repeat(2, 1fr); max-width: 820px; } .team-grid--associates { grid-template-columns: 1fr; max-width: 380px; } /* Associates tree — Florencia at the top, SVG branches down to three anonymous trainee/teacher nodes */ .associates { display: flex; flex-direction: column; align-items: center; max-width: 600px; margin: 0 auto; gap: 0; } .associates__root { /* Re-uses .member layout; nothing to override structurally */ margin-bottom: var(--s-2); } .associates__connectors { width: 100%; height: 72px; margin-top: var(--s-3); color: var(--brand-accent-deep); opacity: 0.55; } .associates__children { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-7); width: 100%; margin-top: calc(var(--s-3) * -1); padding: 0; } .associates__child { display: flex; justify-content: center; } .associates__child svg { width: 56px; height: 56px; padding: 12px; box-sizing: border-box; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--brand-primary); box-shadow: var(--shadow-sm); transition: transform 260ms var(--ease-out), color 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 260ms var(--ease-out); } .associates__child:hover svg { color: var(--brand-primary-deep); border-color: var(--brand-primary); transform: translateY(-3px); box-shadow: var(--shadow-md); } .associates__caption { margin-top: var(--s-5); font-family: var(--font-display); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; font-size: 1.05rem; color: var(--text-muted); letter-spacing: 0.01em; } /* Dark mode — connectors and child nodes pick up the phosphor glow */ [data-theme="dark"] .associates__connectors { opacity: 0.7; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--brand-primary) 30%, transparent)); } [data-theme="dark"] .associates__child svg { box-shadow: 0 0 0 1px var(--border-strong), 0 0 12px color-mix(in srgb, var(--brand-primary) 18%, transparent); } [data-theme="dark"] .associates__child:hover svg { box-shadow: 0 0 0 1px var(--brand-primary), 0 0 24px color-mix(in srgb, var(--brand-primary) 40%, transparent); } @media (max-width: 600px) { .associates__children { gap: var(--s-5); } .associates__connectors { height: 56px; } } .member { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-4); } .member__portrait { position: relative; width: 180px; height: 180px; border-radius: 50%; overflow: hidden; background: var(--cream-100); box-shadow: 0 0 0 1px var(--cream-300), 0 0 0 8px var(--cream-50), 0 0 0 9px var(--sage-300), var(--shadow-md); transition: transform 300ms var(--ease-out); } .member__portrait::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary-deep) 12%, transparent); } .member:hover .member__portrait { transform: translateY(-4px) rotate(-1deg); } .member__portrait img { width: 100%; height: 100%; object-fit: cover; } .member__name { font-size: 2rem; font-weight: 350; letter-spacing: -0.02em; color: var(--teal-700); } .member__role { margin-top: var(--s-1); font-size: 0.95rem; color: var(--ink-soft); line-height: 1.5; max-width: 36ch; } .member__org { display: block; font-size: 0.85rem; color: var(--teal-500); font-weight: 600; letter-spacing: 0.04em; margin-top: 2px; } .member__links { display: inline-flex; gap: var(--s-3); margin-top: var(--s-2); } .member__link { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; border-radius: var(--r-pill); background: var(--cream-100); color: var(--teal-700); border: 1px solid var(--cream-200); transition: all 200ms var(--ease-out); } .member__link:hover { background: var(--teal-700); color: var(--cream-50); border-color: var(--teal-700); } .team-divider { display: flex; align-items: center; gap: var(--s-5); max-width: 600px; margin: var(--s-10) auto var(--s-9); } .team-divider__rule { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--cream-300), transparent); } .team-divider__label { font-family: var(--font-display); font-style: italic; font-weight: 350; font-size: 1.05rem; color: var(--teal-600); letter-spacing: 0.02em; } /* ---------- 10. Footer ---------- */ .site-footer { background: var(--teal-700); color: var(--cream-100); padding: var(--s-10) var(--s-7); position: relative; overflow: hidden; } .site-footer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 300px at 20% 0%, color-mix(in srgb, var(--brand-accent) 16%, transparent), transparent 70%), radial-gradient(700px 300px at 80% 100%, color-mix(in srgb, var(--brand-accent-soft) 18%, transparent), transparent 70%); pointer-events: none; } .site-footer__inner { position: relative; max-width: var(--container-narrow); margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s-6); } .site-footer__tagline { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 350; line-height: 1.2; letter-spacing: -0.015em; color: var(--cream-50); } .site-footer__tagline em { font-style: italic; color: var(--sage-300); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; } .site-footer__links { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; } .site-footer__email, .site-footer__social { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.9rem 1.5rem; background: color-mix(in srgb, var(--bg-page) 10%, transparent); border: 1px solid color-mix(in srgb, var(--bg-page) 24%, transparent); border-radius: var(--r-pill); color: var(--bg-page); font-weight: 500; font-size: 1rem; transition: all 200ms var(--ease-out); } .site-footer__email:hover, .site-footer__social:hover { background: var(--cream-50); color: var(--teal-700); border-color: var(--cream-50); } .site-footer__social svg { flex-shrink: 0; } /* Copy-email button — same pill styling as the social link, with a default ↔ feedback swap */ button.site-footer__email { font-family: inherit; font-size: 1rem; cursor: pointer; -webkit-tap-highlight-color: transparent; } .copy-email__default, .copy-email__feedback { display: inline-flex; align-items: center; gap: var(--s-2); transition: opacity 200ms var(--ease-out); } .copy-email__feedback { display: none; color: var(--brand-accent); } .site-footer__email.is-copied .copy-email__default { display: none; } .site-footer__email.is-copied .copy-email__feedback { display: inline-flex; } /* Subtle pulse on success so the change is noticed even outside focus */ .site-footer__email.is-copied { background: color-mix(in srgb, var(--brand-primary) 22%, transparent); border-color: color-mix(in srgb, var(--brand-primary) 60%, transparent); } @media (prefers-reduced-motion: reduce) { .copy-email__default, .copy-email__feedback { transition: none; } } .site-footer__meta { display: flex; align-items: center; gap: var(--s-3); font-size: 0.85rem; letter-spacing: 0.04em; color: color-mix(in srgb, var(--bg-page) 60%, transparent); } .site-footer__sep { color: var(--sage-400); } /* Dark-mode footer — deeper near-black with green-glow bloom */ [data-theme="dark"] .site-footer { background: #03050A; color: var(--text-primary); } [data-theme="dark"] .site-footer::before { background: radial-gradient(900px 320px at 18% 0%, color-mix(in srgb, var(--brand-primary) 20%, transparent), transparent 70%), radial-gradient(700px 300px at 82% 100%, color-mix(in srgb, var(--brand-primary-deep) 16%, transparent), transparent 70%); } [data-theme="dark"] .site-footer__tagline { color: var(--text-primary); } [data-theme="dark"] .site-footer__tagline em { color: var(--brand-primary); } [data-theme="dark"] .site-footer__email, [data-theme="dark"] .site-footer__social { background: color-mix(in srgb, var(--brand-primary) 10%, transparent); border-color: color-mix(in srgb, var(--brand-primary) 35%, transparent); color: var(--text-primary); } [data-theme="dark"] .site-footer__email:hover, [data-theme="dark"] .site-footer__social:hover { background: var(--brand-primary); color: var(--bg-page); border-color: var(--brand-primary); } [data-theme="dark"] .site-footer__meta { color: color-mix(in srgb, var(--text-primary) 45%, transparent); } /* Dark-mode hero — same two-layer bloom recipe, phosphor green tuned a touch brighter on the core */ [data-theme="dark"] .hero__bg { background: radial-gradient(ellipse 28% 38% at 30% 46%, color-mix(in srgb, var(--brand-primary) 42%, transparent) 0%, color-mix(in srgb, var(--brand-primary) 26%, transparent) 22%, color-mix(in srgb, var(--brand-primary) 12%, transparent) 50%, color-mix(in srgb, var(--brand-primary) 4%, transparent) 75%, transparent 100%), radial-gradient(ellipse 95% 110% at 30% 46%, color-mix(in srgb, var(--brand-primary) 12%, transparent) 0%, color-mix(in srgb, var(--brand-primary) 6%, transparent) 30%, color-mix(in srgb, var(--brand-primary) 2%, transparent) 60%, transparent 100%); } /* Dark-mode services dots — faint star field, not aggressive grid */ [data-theme="dark"] .section--work::before { opacity: 0.28; background-image: radial-gradient(circle, color-mix(in srgb, var(--brand-primary) 70%, transparent) 1px, transparent 1.4px); } /* ---------- 11. Motion — placeholder, polish phase ---------- */ /* Entrance animations intentionally omitted in structure pass. Reintroduce with IntersectionObserver-based reveal in polish phase. */ /* ---------- 12. Responsive ---------- */ @media (max-width: 960px) { .site-header { padding: var(--s-3) var(--s-5); grid-template-columns: auto auto; } .site-nav { display: none; } .brand__name { font-size: 1rem; } .brand__tag { font-size: 0.66rem; } .hero { grid-template-columns: 1fr; gap: var(--s-7); padding: var(--s-8) var(--s-5) var(--s-7); } .hero__media-frame { aspect-ratio: 4 / 3; transform: rotate(0); } .section { padding: var(--s-8) var(--s-5); } .section--proud > .section__header, .section--proud > .proud-groups { padding-left: var(--s-5); padding-right: var(--s-5); } .section__header { grid-template-columns: 1fr; } .section__number { grid-row: auto; } .section__header .eyebrow { grid-column: 1; } .services { grid-template-columns: 1fr; gap: var(--s-5); } .services__caption { position: static; } .service { grid-template-columns: 3rem 1fr; } .team-grid--founders { grid-template-columns: 1fr; } .proud-item__body { font-size: 0.95rem; } .site-footer { padding: var(--s-8) var(--s-5); } } @media (max-width: 520px) { :root { font-size: 16px; } .hero__title { font-size: 2.75rem; } .section__title { font-size: 2rem; } .philosophy__quote { font-size: 1.4rem; } .member__portrait { width: 140px; height: 140px; } .member__name { font-size: 1.6rem; } .hero__actions { width: 100%; } .btn { flex: 1; justify-content: center; } }