/* ========================================================================= Hyphi | hyphi.com/about Colors and type follow the Hyphi brand book (Figma). Edit the token blocks at the top (brand palette, then light and dark semantic tokens); nothing below them hard-codes a color or a font family. Contrast ratios in the comments are WCAG 2 ratios for text on that pair. ========================================================================= */ /* Headings: PP Agrandir (Pangram Pangram; web license held by Hyphi). The .woff2 files live in site/about/fonts/. Until they are there the browser falls back to Manrope, which is loaded from Google Fonts by a in each page's (weights 400, 500, 700, 800). */ @font-face { font-family: "PP Agrandir"; src: url("/about/fonts/PPAgrandir-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { color-scheme: light dark; /* Brand palette (brand book, Colors) */ --pine: #052616; --moss: #043F2D; --pea: #39B53F; --lime: #C7F169; --chestnut: #C39365; --soil: #482300; --dark: #030712; --light-gray: #F3F4F6; --white: #FFFFFF; /* Brand neutrals */ --gray-500: #6B7280; /* secondary text on white: 4.83 */ --gray-300: #D1D5DB; /* hairlines */ /* Derived from the palette for contrast */ --gray-600: #4B5563; /* secondary text on light gray: 6.87 (gray-500 is only 4.39 there) */ --mist: #C0C9C5; /* secondary text on greens and dark: white at 75% over pine; pine 9.57, moss 7.07, dark 11.89 */ /* Type */ --font-heading: "PP Agrandir", "Manrope", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Manrope", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Shape and layout */ --radius-lg: 28px; --radius: 20px; --radius-sm: 12px; --wrap: 1180px; --gutter: 32px; --header-h: 72px; } /* Semantic tokens for the page surface (white sections). .on-page resets them inside a green panel (the contact form card). */ :root, .on-page { --color-bg: var(--white); --color-text: var(--dark); /* 20.13 */ --color-text-muted: var(--gray-500); /* 4.83 */ --color-accent: var(--moss); /* 11.97 */ --color-link: var(--moss); --color-line: var(--gray-300); --color-card: var(--light-gray); --color-card-muted: var(--gray-600); /* 6.87 on light gray */ --color-alt-bg: var(--light-gray); --color-alt-card: var(--white); --color-field-bg: var(--white); --color-field-line: var(--gray-500); /* 4.83: field edges stay visible */ --color-button-bg: var(--pine); /* white on pine 16.21 */ --color-button-text: var(--white); --color-button-hover: var(--moss); --color-chip-bg: var(--pine); /* lime on pine 12.52 */ --color-chip-text: var(--lime); --color-mark: var(--dark); /* logo: near-black on white */ --color-focus: var(--moss); } @media (prefers-color-scheme: dark) { :root, .on-page { --color-bg: var(--dark); --color-text: var(--light-gray); /* 18.30 */ --color-text-muted: var(--mist); /* 11.89 */ --color-accent: var(--lime); /* 15.55 */ --color-link: var(--lime); --color-line: rgba(255, 255, 255, 0.14); --color-card: var(--pine); --color-card-muted: var(--mist); /* 9.57 on pine, 7.07 on moss */ --color-alt-bg: var(--pine); --color-alt-card: var(--moss); --color-field-bg: var(--pine); --color-field-line: #82928A; /* 4.96 on pine */ --color-button-bg: var(--lime); /* pine on lime 12.52 */ --color-button-text: var(--pine); --color-button-hover: #D8F596; /* lime mixed with 30% white */ --color-chip-bg: var(--lime); --color-chip-text: var(--pine); --color-mark: var(--pea); /* logo: pea green on dark */ --color-focus: var(--lime); } } /* Green surfaces (header, hero, pilot band, contact panel): the same in both schemes. */ .on-green { --color-bg: var(--pine); --color-text: var(--white); /* 16.21 on pine, 11.97 on moss */ --color-text-muted: var(--mist); --color-accent: var(--lime); /* 12.52 on pine, 9.24 on moss */ --color-link: var(--lime); --color-line: rgba(255, 255, 255, 0.16); --color-button-bg: var(--lime); --color-button-text: var(--pine); --color-button-hover: #D8F596; --color-chip-bg: var(--lime); --color-chip-text: var(--pine); --color-mark: var(--pea); /* logo: pea green on pine */ --color-focus: var(--lime); background: var(--color-bg); color: var(--color-text); } .band { --color-bg: var(--moss); } .on-page { background: var(--color-bg); color: var(--color-text); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 400 17px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { display: block; max-width: 100%; height: auto; } svg { display: block; } a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 3px; } :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; } p { margin: 0 0 16px; } ul, ol { margin: 0; padding: 0; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } @media (max-width: 720px) { :root { --gutter: 20px; --header-h: 64px; } } .nowrap { white-space: nowrap; } /* Manrope's contextual ligatures turn "(c)" into a copyright sign; keep 501(c)(3) literal. */ .nolig { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; } .skip-link { position: absolute; left: 12px; top: -100px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--lime); color: var(--pine); font-weight: 700; text-decoration: none; } .skip-link:focus { top: 12px; } /* ---------- Type ---------- */ /* Headings ask for weight 800: PP Agrandir resolves that to its Bold (700), the Manrope fallback to ExtraBold, which is the closer match in color. */ h1, h2, h3 { font-family: var(--font-heading); font-weight: 800; font-synthesis: none; letter-spacing: -0.022em; line-height: 1.06; margin: 0 0 20px; text-wrap: balance; } h1 { font-size: clamp(40px, 5.2vw, 66px); line-height: 1.02; } h2 { font-size: clamp(32px, 3.9vw, 50px); } h3 { font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: -0.012em; margin-bottom: 8px; } .lede { font-size: clamp(18px, 1.7vw, 20px); line-height: 1.55; color: var(--color-text-muted); max-width: 52ch; } .eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; font: 700 13px/1.2 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); } .eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; } /* Section label, after the brand book's divider slides: a numeral in lime on pine. */ .chapter { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; font: 700 13px/1.2 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text); } .chapter-num { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 10px; background: var(--color-chip-bg); color: var(--color-chip-text); font: 700 17px/1 var(--font-heading); letter-spacing: 0; } /* ---------- Buttons ---------- */ .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 28px; border-radius: 999px; border: 1.5px solid var(--color-button-bg); background: var(--color-button-bg); color: var(--color-button-text); font: 700 16px/1.2 var(--font-body); text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .btn:hover { background: var(--color-button-hover); border-color: var(--color-button-hover); } .btn-ghost { background: transparent; color: var(--color-text); border-color: color-mix(in srgb, var(--color-text) 40%, transparent); } .btn-ghost:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); border-color: var(--color-text); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--color-line); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: 11px; color: var(--color-text); text-decoration: none; font: 800 25px/1 var(--font-heading); letter-spacing: -0.02em; } .brand-mark { width: 38px; height: auto; flex: none; color: var(--color-mark); } .site-nav { display: flex; align-items: center; gap: 30px; } .site-nav a { color: var(--color-text-muted); text-decoration: none; font-size: 15px; font-weight: 500; } .site-nav a:hover { color: var(--color-text); } .site-nav .nav-cta { color: var(--color-button-text); background: var(--color-button-bg); padding: 9px 20px; border-radius: 999px; font-weight: 700; } .site-nav .nav-cta:hover { color: var(--color-button-text); background: var(--color-button-hover); } @media (max-width: 720px) { .site-nav a:not(.nav-cta) { display: none; } } /* ---------- Sections ---------- */ .section { padding: clamp(80px, 9vw, 128px) 0; } .section-alt { background: var(--color-alt-bg); --color-card: var(--color-alt-card); --color-text-muted: var(--color-card-muted); } .card { background: var(--color-card); border-radius: var(--radius); --color-text-muted: var(--color-card-muted); } /* Photo frames keep their shape, and show the mark (pea on moss, per the brand book) while a photo is loading or missing. */ .frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--moss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 13.1494 133 107.701' fill='%2339B53F'%3E%3Cpath d='M66.5201 13.1494C66.5201 13.1494 66.504 13.1494 66.496 13.1494C66.496 13.1494 66.4799 13.1494 66.4718 13.1494C29.7866 13.3828 0 43.2542 0 79.9514V79.9997C0 85.9401 0.685027 94.2551 6.46343 98.0705C13.0316 102.401 21.6469 98.7387 32.5509 94.0861C42.1654 89.989 54.1171 84.9098 66.504 84.8051C78.8909 84.9098 90.8346 89.989 100.457 94.0861C111.361 98.7306 119.976 102.401 126.545 98.0705C132.323 94.2551 133 85.9401 133.008 79.9997V79.9514C132.992 43.2542 103.213 13.3828 66.5201 13.1494ZM66.5201 75.1378C66.5201 75.1378 66.504 75.1378 66.496 75.1378C66.496 75.1378 66.4799 75.1378 66.4718 75.1378C58.6464 75.1942 51.24 76.8604 44.422 79.0901C44.6396 67.0321 54.4153 57.2682 66.4879 57.0589C78.5605 57.2682 88.3362 67.0321 88.5538 79.0901C81.7439 76.8604 74.3295 75.2022 66.504 75.1378H66.5201ZM106.542 86.1735C105.768 85.8435 104.994 85.5215 104.253 85.1996C102.287 84.3624 100.24 83.4931 98.1039 82.6238C98.2087 81.5854 98.257 80.539 98.257 79.5006C98.257 61.9368 84.0649 47.625 66.5282 47.3996C66.5282 47.3996 66.5121 47.3996 66.504 47.3996C66.504 47.3996 66.4879 47.3996 66.4799 47.3996C48.9432 47.625 34.751 61.9368 34.751 79.5006C34.751 80.539 34.8074 81.5854 34.9041 82.6238C32.7685 83.4931 30.7134 84.3705 28.755 85.1996C28.0055 85.5215 27.2399 85.8435 26.4662 86.1735C26.2647 84.5234 26.1519 82.8572 26.1519 81.191C26.1519 58.8861 44.2205 40.7186 66.504 40.5013C88.7876 40.7186 106.856 58.8861 106.856 81.191C106.856 82.8572 106.743 84.5234 106.542 86.1735ZM121.209 90.0051C120.275 90.6249 118.284 90.3592 115.802 89.6428C116.277 86.8577 116.519 84.0244 116.519 81.1829C116.519 53.5574 94.1308 31.0593 66.5201 30.8339C66.5201 30.8339 66.504 30.8339 66.496 30.8339C66.496 30.8339 66.4799 30.8339 66.4718 30.8339C38.8612 31.0674 16.4729 53.5574 16.4729 81.1829C16.4729 84.0244 16.7147 86.8497 17.1901 89.6428C14.716 90.3592 12.7173 90.6168 11.7825 90.0051C11.4279 89.7716 9.66291 88.1859 9.66291 79.9594C9.67097 48.5748 35.1298 23.026 66.504 22.8087C97.8783 23.026 123.337 48.5748 123.337 79.9594C123.337 88.1859 121.572 89.7716 121.218 90.0051H121.209Z'/%3E%3Cpath d='M94.695 98.5453C87.5546 95.068 77.2309 91.2445 66.5203 91.2687C66.5203 91.2687 66.5042 91.2687 66.4961 91.2687C66.4961 91.2687 66.48 91.2687 66.4719 91.2687C55.7613 91.2445 45.4456 95.076 38.2972 98.5453C35.8955 99.7125 34.8962 102.602 36.0648 105.001C36.9029 106.715 38.6276 107.714 40.4167 107.714C41.1259 107.714 41.8512 107.561 42.5282 107.223C50.9984 103.101 59.3637 100.936 66.488 100.936C73.6204 100.936 81.9777 103.101 90.4479 107.223C91.1329 107.553 91.8502 107.714 92.5594 107.714C94.3485 107.714 96.0731 106.715 96.9113 105.001C98.0799 102.602 97.0805 99.7125 94.6789 98.5453H94.695Z'/%3E%3Cpath d='M85.9426 111.65C78.4879 108.132 74.3616 107.054 66.52 106.659C66.52 106.659 66.5039 106.659 66.4959 106.659C66.4959 106.659 66.4798 106.659 66.4717 106.659C58.6301 107.054 54.5039 108.124 47.0492 111.65C44.6314 112.793 43.5998 115.666 44.7442 118.081C45.5663 119.82 47.299 120.842 49.1042 120.842H49.1365C49.8215 120.842 50.5226 120.689 51.1835 120.375C57.3246 117.478 60.2662 116.665 66.4959 116.326C72.7175 116.665 75.6591 117.478 81.8082 120.375C82.4691 120.689 83.1702 120.834 83.8553 120.842H83.8875C85.6927 120.842 87.4255 119.82 88.2475 118.081C89.3919 115.666 88.3603 112.793 85.9426 111.65Z'/%3E%3C/svg%3E") center / 32% auto no-repeat; } .frame img { width: 100%; height: 100%; object-fit: cover; } .frame.is-missing { outline: 1px solid rgba(255, 255, 255, 0.14); outline-offset: -1px; } .frame.is-missing img { opacity: 0; } /* Hero */ .hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 104px) 0 clamp(72px, 9vw, 120px); } .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: center; } .hero h1 { max-width: 12.5ch; } .hero .lede { max-width: 40ch; } .hero-photo { margin: 0; } .hero-photo .frame { border-radius: var(--radius-lg); } .hero-photo figcaption { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; font-weight: 500; color: var(--color-text-muted); } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); flex: none; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero h1 { max-width: 14ch; } } /* Mission */ .mission-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 88px); align-items: start; } .mission-intro h2 { max-width: 16ch; } @media (max-width: 960px) { .mission-grid { grid-template-columns: 1fr; } .mission-intro h2 { max-width: 18ch; } } .pillars { list-style: none; display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 600px) { .pillars { grid-template-columns: 1fr; } } .pillar { padding: 28px 28px 30px; } .pillar-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: clamp(24px, 3vw, 40px); border-radius: 14px; background: var(--color-chip-bg); color: var(--color-chip-text); } .pillar-icon svg { width: 24px; height: 24px; } .pillar p { margin: 0; color: var(--color-text-muted); font-size: 16px; line-height: 1.55; } /* Pilot band */ .band-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(40px, 6vw, 88px); align-items: end; } .band-head h2 { max-width: 12ch; margin-bottom: 0; } .band-intro p:last-child { margin-bottom: 0; } .band-intro p:not(.lede) { color: var(--color-text-muted); } @media (max-width: 900px) { .band-head { grid-template-columns: 1fr; } } .timeline { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; margin-top: clamp(48px, 6vw, 72px); } .step { display: flex; flex-direction: column; min-width: 0; } .step-num { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font: 800 34px/1 var(--font-heading); letter-spacing: -0.02em; color: var(--lime); } .step-num::after { content: ""; flex: 1; height: 1px; background: var(--color-line); } .step:last-child .step-num::after { background: linear-gradient(to right, var(--color-line), transparent); } .step .frame { aspect-ratio: 4 / 5; border-radius: 16px; } .step-text { padding-top: 20px; } .step h3 { margin: 0; font-size: 21px; } .step-text p:last-child { margin: 8px 0 0; color: var(--color-text-muted); font-size: 16px; line-height: 1.5; } @media (max-width: 960px) { .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .timeline { grid-template-columns: 1fr; gap: 44px; } .step .frame { aspect-ratio: 4 / 3; } .step .frame-portrait { aspect-ratio: 4 / 5; } } /* Team */ .team { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(36px, 4vw, 52px); } @media (max-width: 760px) { .team { grid-template-columns: 1fr; } } .person { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 22px; align-items: center; align-content: start; padding: clamp(26px, 3vw, 36px); } .person h3 { margin: 0; font-size: clamp(24px, 2.4vw, 28px); } .monogram { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--color-chip-bg); color: var(--color-chip-text); font: 700 20px/1 var(--font-heading); letter-spacing: 0.02em; } .facts { grid-column: 1 / -1; list-style: none; display: grid; gap: 12px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--color-line); } .facts li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.5; } .facts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 10px; height: 2px; border-radius: 2px; background: var(--pea); } /* Contact */ .contact-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 72px); align-items: start; padding: clamp(28px, 5.5vw, 72px); border-radius: var(--radius-lg); } @media (max-width: 900px) { .contact-panel { grid-template-columns: 1fr; } } .contact-copy h2 { max-width: 12ch; } .contact-list { display: grid; gap: 14px; margin: 36px 0 0; padding-top: 28px; border-top: 1px solid var(--color-line); } .contact-list div { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; } .contact-list dt { min-width: 92px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); } .contact-list dd { margin: 0; font-size: 18px; font-weight: 700; } .form-card { display: grid; gap: 18px; padding: clamp(22px, 3vw, 36px); border-radius: var(--radius); } .field { display: grid; gap: 7px; } .field label { font-size: 14px; font-weight: 700; } input, select, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--color-field-line); border-radius: var(--radius-sm); background: var(--color-field-bg); color: var(--color-text); font: 400 16px/1.4 var(--font-body); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; border-color: var(--color-focus); } textarea { min-height: 140px; resize: vertical; } .form-card .btn { justify-self: start; } .form-note { margin: 0; font-size: 14px; color: var(--color-text-muted); } .form-note a { font-weight: 700; } .form-status { margin: 0; font-size: 14px; font-weight: 700; } /* Kept rendered while empty, so it stays in the accessibility tree and screen readers announce the text the script adds; taken out of the grid flow so it adds no gap until then. */ .form-status:empty { position: absolute; } /* 404 */ .not-found { min-height: calc(100vh - var(--header-h) - 97px); display: grid; align-items: center; padding: 72px 0; } .not-found > .wrap { width: 100%; } .not-found h1 { max-width: 14ch; } .not-found .code { font: 800 clamp(88px, 16vw, 168px)/0.9 var(--font-heading); letter-spacing: -0.05em; margin: 0 0 28px; color: var(--lime); } /* ---------- Footer ---------- */ .site-footer { padding: 28px 0; border-top: 1px solid var(--color-line); font-size: 14px; } .site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; } .footer-brand { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; } .footer-brand svg { width: 26px; height: auto; flex: none; color: var(--color-mark); } .footer-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; color: var(--color-text-muted); } .footer-meta li + li::before { content: "\00B7"; padding: 0 10px; } .footer-email { color: var(--color-text); font-weight: 700; }