:root { /* brand: taken from the thinAir logo */ --ink: #232325; --cyan: #28abe2; /* accents, rules, highlights only (too light for text) */ --cyan-text: #00759f; /* readable cyan for links/labels */ --blue: #0099d6; /* logo blue, one step deeper so white button text stays legible */ --blue-hover: #0086bd; --blue-tint: #e5f5fc; /* logo blue at ~10%: CTA band + product-shot panels */ --muted: #66666b; --line: #e4e4e0; --bg: #fafaf8; --paper: #ffffff; --dark: #161617; --r: 3px; --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .wrap { width: min(1240px, 100% - 48px); margin-inline: auto; } h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.035em; line-height: 1.04; color: var(--ink); } .eyebrow { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--cyan-text); display: flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--cyan); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 15px 22px; border-radius: var(--r); font-weight: 500; font-size: 15px; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s; cursor: pointer; } /* Zach 1 Oct, option C: exact logo blue with the logo's dark lettering (6.2:1, passes WCAG AA) */ .btn-main { background: var(--cyan); color: var(--ink); } .btn-main:hover { background: #00a2de; } /* hover keeps 5.4:1 */ .btn-line { border-color: var(--ink); color: var(--ink); } .btn-line:hover { background: var(--ink); color: #fff; } .arrow { transition: transform .15s; display: inline-block; } .btn:hover .arrow, .link:hover .arrow { transform: translateX(4px); } .link { color: var(--ink); font-weight: 500; font-size: 15px; display: inline-flex; gap: 8px; border-bottom: 1px solid var(--cyan); padding-bottom: 2px; } /* ---------- header ---------- */ header { position: sticky; top: 0; z-index: 50; background: rgba(250,250,248,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; } .brand img { height: 38px; width: auto; } .menu { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; font-size: 14.5px; } .menu a:hover, .dd > button:hover { color: var(--cyan-text); } .dd { position: relative; } .dd > button { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; display: flex; align-items: center; gap: 5px; padding: 0; } .dd-list { position: absolute; top: calc(100% + 24px); left: -20px; min-width: 220px; background: var(--paper); border: 1px solid var(--line); list-style: none; margin: 0; padding: 8px 0; opacity: 0; visibility: hidden; transition: opacity .12s; } .dd:hover .dd-list, .dd:focus-within .dd-list { opacity: 1; visibility: visible; } .dd-list a { display: block; padding: 9px 20px; } .dd-list a:hover { background: var(--bg); } .login { border: 1px solid var(--ink); padding: 8px 16px; border-radius: var(--r); } .login:hover { background: var(--ink); color: #fff !important; } .burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; } .burger span { display: block; width: 22px; height: 1.5px; background: var(--ink); margin: 6px 0; } /* ---------- hero ---------- */ .hero { padding: 80px 0 0; } .hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 56px; align-items: end; } .hero h1 { font-size: clamp(44px, 5.6vw, 80px); margin: 22px 0 28px; } .hero h1 em { font-style: normal; color: var(--cyan); } .hero .lead { font-size: 19px; color: var(--muted); max-width: 500px; margin: 0 0 36px; line-height: 1.55; } .hero .lead strong { color: var(--ink); font-weight: 500; } .actions { display: flex; flex-wrap: wrap; gap: 12px; } .hero-copy { padding-bottom: 64px; } /* image placeholders — AI imagery to be generated */ .ph { position: relative; background: #e9ebea; overflow: hidden; } .ph::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(35,35,37,.035) 14px 15px); } .ph::after { content: attr(data-label); position: absolute; left: 14px; bottom: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--paper); padding: 5px 9px; max-width: calc(100% - 28px); } .hero .ph { aspect-ratio: 4 / 4.4; } /* ---------- stats band ---------- */ .band { border-block: 1px solid var(--line); background: var(--paper); } .band-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .fig { padding: 38px 28px 34px; border-left: 1px solid var(--line); } .fig:first-child { border-left: 0; padding-left: 0; } .fig .num { font-size: clamp(38px, 4.2vw, 56px); font-weight: 400; letter-spacing: -0.045em; line-height: 1; color: var(--cyan); } .fig .num sup { font-size: .45em; color: var(--cyan); vertical-align: top; position: relative; top: .25em; margin-left: 2px; } .fig .lbl { font-size: 14px; color: var(--muted); margin-top: 12px; max-width: 180px; line-height: 1.4; } .band-note { font-family: var(--mono); font-size: 11px; color: var(--muted); padding: 0 0 18px; letter-spacing: .02em; } section { padding: 120px 0 0; } .sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 56px; } .sec-head h2 { font-size: clamp(34px, 4.2vw, 58px); margin-top: 18px; } .sec-head p { color: var(--muted); font-size: 17px; margin: 0; max-width: 480px; } /* ---------- video stories ---------- */ .stories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .story { background: var(--paper); text-align: left; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; } .thumb { position: relative; aspect-ratio: 4 / 5; background: #d9d9d6 center / cover no-repeat; filter: saturate(.85); transition: filter .25s; } .story:hover .thumb { filter: saturate(1); } .thumb .pbtn { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; background: var(--paper); padding: 8px 14px 8px 10px; font-size: 13px; font-weight: 500; } .thumb .pbtn i { width: 0; height: 0; border-left: 8px solid var(--cyan); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .story-body { padding: 20px 20px 24px; } .story-body strong { display: block; font-weight: 500; font-size: 17px; letter-spacing: -0.01em; line-height: 1.3; } .story-body span { font-size: 14px; color: var(--muted); } .more { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; } .more span { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .04em; } /* ---------- pathways ---------- */ .paths { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); } .path { padding: 34px 32px 38px 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; } .path + .path { padding-left: 32px; } .path:last-child { border-right: 0; } .path .idx { font-family: var(--mono); font-size: 12px; color: var(--cyan-text); } .path h3 { font-size: 26px; letter-spacing: -0.025em; } .path p { margin: 0 0 8px; color: var(--muted); } .path .link { align-self: flex-start; margin-top: auto; } /* ---------- evidence (dark) ---------- */ .dark { background: var(--dark); color: #f3f3f1; margin-top: 120px; padding: 110px 0; } .dark h2, .dark h3 { color: #fff; } .dark .eyebrow { color: var(--cyan); } .dark .sec-head p { color: #a9a9ad; } .ev-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #333336; } .ev-grid .fig { border-left-color: #333336; } .ev-grid .lbl { color: #a9a9ad; } .dark .link { color: #fff; } /* ---------- steps ---------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .step { padding: 0 28px 0 0; } .step + .step { padding-left: 28px; border-left: 1px solid var(--line); } .step .bar { height: 2px; background: var(--line); margin-bottom: 26px; position: relative; } .step .bar::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; background: var(--cyan); } .step:nth-child(1) .bar::after { width: 25%; } .step:nth-child(2) .bar::after { width: 50%; } .step:nth-child(3) .bar::after { width: 75%; } .step:nth-child(4) .bar::after { width: 100%; } .step .n { font-family: var(--mono); font-size: 12px; color: var(--muted); } .step h3 { font-size: 28px; margin: 10px 0 12px; } .step p { margin: 0; color: var(--muted); font-size: 15px; } /* ---------- FAQ ---------- */ .faq-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 80px; align-items: start; } .faq-intro h2 { font-size: clamp(34px, 4.2vw, 58px); margin: 18px 0 20px; } .faq-intro p { color: var(--muted); margin: 0 0 32px; max-width: 380px; } .faq-list { border-top: 1px solid var(--ink); } details { border-bottom: 1px solid var(--line); } summary { list-style: none; cursor: pointer; padding: 24px 48px 24px 0; font-size: 19px; font-weight: 500; letter-spacing: -0.015em; position: relative; } summary::-webkit-details-marker { display: none; } summary::before, summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 1.5px; background: var(--ink); transition: transform .9s cubic-bezier(.45, .05, .25, 1), background-color .6s; } summary::after { transform: rotate(90deg); } /* + turns a soft half-spin into − (and back as soon as closing starts) */ details[open]:not(.closing) summary::before { transform: rotate(180deg); background: var(--cyan-text); } details[open]:not(.closing) summary::after { transform: rotate(180deg); background: var(--cyan-text); } details .ans { padding: 0 48px 26px 0; color: var(--muted); } details .ans p { margin: 0 0 12px; } .qa { display: flex; align-items: center; gap: 18px; margin-top: 28px; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; text-align: left; } .qa .thumb { width: 150px; flex: 0 0 150px; aspect-ratio: 16 / 10; } .qa strong { display: block; font-weight: 500; } .qa span { font-size: 14px; color: var(--muted); } /* ---------- audiences ---------- */ .aud { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .aud a { background: var(--paper); display: flex; flex-direction: column; } .aud .ph { aspect-ratio: 3 / 3.6; } .aud .ph::after { display: none; } .aud div.cap { padding: 16px 18px 18px; display: flex; justify-content: space-between; align-items: center; font-weight: 500; } .aud a:hover .arrow { transform: translateX(4px); color: var(--cyan-text); } /* ---------- CTA ---------- */ .cta { margin-top: 120px; background: var(--blue-tint); } .cta-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: stretch; } .cta-copy { padding: 100px 0; } .cta h2 { font-size: clamp(38px, 5vw, 70px); margin: 20px 0 22px; } .cta p { color: var(--muted); font-size: 18px; margin: 0 0 34px; } .cta .ph { min-height: 100%; } /* ---------- footer ---------- */ footer { background: var(--dark); color: #a9a9ad; padding: 72px 0 32px; font-size: 14.5px; } .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } .foot-grid h4 { margin: 0 0 18px; font-family: var(--mono); font-weight: 400; font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: #75757a; } .foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .foot-grid a:hover { color: #fff; } .foot-brand img { height: 36px; width: auto; margin-bottom: 20px; } .foot-brand p { margin: 0 0 14px; max-width: 290px; } .foot-brand .contact a { color: #fff; } .foot-bottom { margin-top: 64px; padding-top: 24px; border-top: 1px solid #2c2c2f; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 13px; } .foot-bottom nav { display: flex; gap: 24px; } .tagline { color: #fff; } .tagline b { color: var(--cyan); font-weight: 400; } /* ---------- video modal ---------- */ .modal { position: fixed; inset: 0; z-index: 100; background: rgba(10,10,11,.88); display: grid; place-items: center; padding: 20px; } .modal[hidden] { display: none; } .modal-box { width: min(1000px, 100%); position: relative; } .modal-frame { position: relative; aspect-ratio: 16 / 9; background: #000; } .modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .modal-close { position: absolute; top: -44px; right: 0; background: none; border: 0; color: #fff; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; cursor: pointer; } .preview-bar { background: var(--ink); color: #d6d6d8; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-align: center; padding: 7px 12px; } .preview-bar b { color: var(--cyan); font-weight: 500; } /* ---------- responsive ---------- */ @media (max-width: 1024px) { .menu { display: none; } .menu.open { display: flex; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px 24px 24px; } .menu.open > li { border-bottom: 1px solid var(--line); } .menu.open > li > a, .menu.open .dd > button { display: block; padding: 14px 0; width: 100%; text-align: left; } .menu.open .dd-list { position: static; opacity: 1; visibility: visible; border: 0; padding: 0 0 10px 14px; background: none; } .menu.open .dd-list a { padding: 7px 0; } .menu.open > li:last-child { border: 0; padding-top: 16px; } .menu.open .login { text-align: center; } .burger { display: block; } .hero-grid, .sec-head, .faq-grid, .cta-grid { grid-template-columns: 1fr; gap: 28px; } .hero-copy { padding-bottom: 0; } .hero .ph { aspect-ratio: 4 / 3; } .stories { grid-template-columns: repeat(2, 1fr); } .paths { grid-template-columns: 1fr; } .path, .path + .path { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line); } .steps { grid-template-columns: repeat(2, 1fr); row-gap: 44px; } .step:nth-child(3) { padding-left: 0; border-left: 0; } .aud { grid-template-columns: repeat(3, 1fr); } .foot-grid { grid-template-columns: 1fr 1fr; } .cta-copy { padding: 72px 0 0; } .cta .ph { min-height: 280px; } section { padding-top: 88px; } .dark { margin-top: 88px; padding: 80px 0; } } @media (max-width: 640px) { .band-grid, .ev-grid { grid-template-columns: 1fr 1fr; } .fig { padding: 26px 16px 24px; } .fig:nth-child(odd) { border-left: 0; padding-left: 0; } .fig:nth-child(n+3) { border-top: 1px solid var(--line); } .ev-grid .fig:nth-child(n+3) { border-top-color: #333336; } .stories { grid-template-columns: 1fr; } .thumb { aspect-ratio: 4 / 3; } .steps { grid-template-columns: 1fr; } .step, .step + .step { padding: 0; border-left: 0; } .aud { grid-template-columns: 1fr 1fr; } .foot-grid { grid-template-columns: 1fr; } .qa .thumb { width: 110px; flex-basis: 110px; } } /* ========================================================= ARCHITECTURE COMPONENTS (inner pages) ========================================================= */ /* top information bar (RFP §10 — retain) */ .announce { background: var(--paper); border-bottom: 1px solid var(--line); font-size: 13.5px; } .announce .wrap { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 9px 0; position: relative; } .announce i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); display: inline-block; } .announce a { border-bottom: 1px solid var(--cyan); } .announce button { position: absolute; right: 0; background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; padding: 4px; } .announce[hidden] { display: none; } .menu a.active, .dd > button.active { color: var(--cyan-text); } .dd-list a.active { background: var(--bg); } /* breadcrumbs */ .crumbs { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); padding: 22px 0 0; } .crumbs a:hover { color: var(--ink); } .crumbs span { margin: 0 8px; color: #b8b8bb; } /* page hero */ .page-hero { padding: 48px 0 72px; border-bottom: 1px solid var(--line); } .page-hero .grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: end; } .page-hero.no-img .grid { grid-template-columns: 1fr; max-width: 860px; } .page-hero h1 { font-size: clamp(40px, 5vw, 72px); margin: 20px 0 24px; } .page-hero .lead { font-size: 19px; color: var(--muted); max-width: 580px; margin: 0 0 34px; line-height: 1.55; } .page-hero .ph { aspect-ratio: 4 / 4.2; } /* section outline (wireframe blocks — replaced as each page is built) */ .outline { padding: 88px 0 0; } .outline-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; } .outline-head h2 { font-size: clamp(26px, 2.6vw, 36px); margin-top: 14px; } .outline-head p { margin: 0; color: var(--muted); font-size: 14.5px; max-width: 420px; } .blocks { border-top: 1px solid var(--ink); } .block { display: grid; grid-template-columns: 64px 1fr auto; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: start; } .block .idx { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 4px; } .block h3 { font-size: 21px; letter-spacing: -0.02em; margin-bottom: 6px; } .block p { margin: 0; color: var(--muted); font-size: 15px; max-width: 720px; } .tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; padding: 4px 8px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; background: var(--paper); } .tag.cms { border-color: var(--cyan); color: var(--cyan-text); } .tag.flag { border-color: #d9a400; color: #7a5c00; background: #fff8e1; } .tag.form { border-color: var(--ink); color: var(--ink); } /* location cards (CMS collection) */ .loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .loc { background: var(--paper); padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 6px; } .loc .town { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--cyan-text); } .loc h3 { font-size: 21px; letter-spacing: -0.02em; } .loc address { font-style: normal; color: var(--muted); font-size: 14.5px; line-height: 1.5; } .loc .link { align-self: flex-start; margin-top: 12px; } .loc-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding-top: 72px; } .kv { border-top: 1px solid var(--ink); } .kv div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); } .kv dt { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-top: 3px; } .kv dd { margin: 0; } .kv dd a { border-bottom: 1px solid var(--cyan); } .map-ph { aspect-ratio: 4 / 3; } /* site architecture index page */ .arch-table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--paper); } .arch-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 880px; } .arch-table th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 14px 16px; border-bottom: 1px solid var(--ink); background: var(--bg); } .arch-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; } .arch-table td.url a { font-family: var(--mono); font-size: 13px; border-bottom: 1px solid var(--cyan); } .arch-table tr.grp td { background: var(--bg); font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); padding-top: 18px; } .arch-table .old { font-family: var(--mono); font-size: 12.5px; color: var(--muted); } .status { font-family: var(--mono); font-size: 11px; padding: 3px 7px; white-space: nowrap; } .status.built { background: #e3f6ec; color: #17693f; } .status.outline { background: #eef0f3; color: #55585f; } .prose { max-width: 760px; padding-top: 64px; } .prose h2 { font-size: 28px; margin: 40px 0 14px; } .prose p { color: var(--muted); } @media (max-width: 1024px) { .page-hero .grid, .loc-detail { grid-template-columns: 1fr; gap: 32px; } .page-hero .ph { aspect-ratio: 16 / 10; } .loc-grid { grid-template-columns: 1fr 1fr; } .outline { padding-top: 64px; } } @media (max-width: 640px) { .block { grid-template-columns: 40px 1fr; } .block .tags { grid-column: 2; justify-content: flex-start; } .loc-grid { grid-template-columns: 1fr; } .announce .wrap { justify-content: flex-start; padding-right: 28px; } .kv div { grid-template-columns: 1fr; gap: 4px; } } /* ========================================================= BUILT-PAGE COMPONENTS ========================================================= */ /* sign-off note for health wording (RFP §30) */ .signoff { font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; color: #7a5c00; background: #fff8e1; border: 1px solid #ecd48a; padding: 8px 12px; margin-top: 18px; display: inline-block; } /* audience strip */ .who { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .who div { padding: 22px 20px 22px 0; font-weight: 500; display: flex; gap: 12px; align-items: baseline; } .who div + div { padding-left: 20px; border-left: 1px solid var(--line); } .who span { font-family: var(--mono); font-size: 11.5px; color: var(--cyan-text); } /* benefit list: numbered rows, title + intro left, points right */ .benefits { border-top: 1px solid var(--ink); } .benefit { display: grid; grid-template-columns: 64px 1fr 1.25fr; gap: 32px; padding: 34px 0; border-bottom: 1px solid var(--line); } .benefit .idx { font-family: var(--mono); font-size: 12px; color: var(--cyan-text); padding-top: 6px; } .benefit h3 { font-size: 28px; letter-spacing: -0.025em; margin-bottom: 10px; } .benefit .intro { color: var(--muted); margin: 0; } .benefit ul { list-style: none; margin: 0; padding: 0; } .benefit li { padding: 11px 0 11px 22px; border-bottom: 1px solid var(--line); position: relative; font-size: 15.5px; } .benefit li:first-child { padding-top: 4px; } .benefit li:last-child { border-bottom: 0; } .benefit li::before { content: ""; position: absolute; left: 0; top: 20px; width: 10px; height: 1px; background: var(--cyan); } .benefit li:first-child::before { top: 13px; } /* 5-step process */ .steps.five { grid-template-columns: repeat(5, 1fr); } .steps.five .step:nth-child(1) .bar::after { width: 20%; } .steps.five .step:nth-child(2) .bar::after { width: 40%; } .steps.five .step:nth-child(3) .bar::after { width: 60%; } .steps.five .step:nth-child(4) .bar::after { width: 80%; } .steps.five .step:nth-child(5) .bar::after { width: 100%; } .steps.five .step h3 { font-size: 24px; } /* pathway cards (image + text) */ .journeys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .journey { background: var(--paper); display: flex; flex-direction: column; } .journey .ph { aspect-ratio: 4 / 3; } .journey .ph::after { display: none; } .journey-body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .journey h3 { font-size: 22px; letter-spacing: -0.02em; } .journey p { margin: 0 0 10px; color: var(--muted); font-size: 15px; } .journey .link { margin-top: auto; align-self: flex-start; } /* landscape video row */ .stories.three { grid-template-columns: repeat(3, 1fr); } .stories.three .thumb { aspect-ratio: 16 / 10; } @media (max-width: 1024px) { .who { grid-template-columns: 1fr 1fr; } .who div:nth-child(3) { padding-left: 0; border-left: 0; } .who div:nth-child(n+3) { border-top: 1px solid var(--line); } .benefit { grid-template-columns: 48px 1fr; gap: 16px 20px; } .benefit ul { grid-column: 2; } .steps.five { grid-template-columns: repeat(3, 1fr); row-gap: 44px; } .steps.five .step:nth-child(4) { padding-left: 0; border-left: 0; } .journeys { grid-template-columns: 1fr 1fr; } .stories.three { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .who { grid-template-columns: 1fr; } .who div, .who div + div { padding: 16px 0; border-left: 0; } .who div + div { border-top: 1px solid var(--line); } .benefit { grid-template-columns: 1fr; } .benefit ul { grid-column: 1; } .benefit h3 { font-size: 24px; } .steps.five { grid-template-columns: 1fr; } .steps.five .step { padding: 0; border-left: 0; } .journeys, .stories.three { grid-template-columns: 1fr; } } /* steps on the dark band */ .dark .step p { color: #b4b4b8; } .dark .step .n { color: #8c8c91; } .dark .step .bar { background: #333336; } .dark .step + .step { border-left-color: #333336; } /* real photography */ .photo { width: 100%; height: 100%; object-fit: cover; display: block; } .page-hero .photo { aspect-ratio: 4 / 4.2; } .hero .photo { aspect-ratio: 4 / 4.4; } .cta .photo { min-height: 100%; } .journey .photo, .aud .photo { aspect-ratio: 4 / 3; } .aud .photo { aspect-ratio: 3 / 3.6; } @media (max-width: 1024px) { .page-hero .photo, .hero .photo { aspect-ratio: 16 / 10; } .cta .photo { min-height: 280px; max-height: 340px; } } /* contact: routes + form */ .routes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .route { background: var(--paper); padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 8px; } .route .idx { font-family: var(--mono); font-size: 12px; color: var(--cyan-text); } .route h3 { font-size: 20px; letter-spacing: -0.02em; } .route p { margin: 0 0 12px; color: var(--muted); font-size: 15px; } .route .link { margin-top: auto; align-self: flex-start; } .contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 72px; align-items: start; } form.enquiry { display: grid; gap: 18px; } .field { display: grid; gap: 7px; } .field label { font-size: 14px; font-weight: 500; } .field input, .field select, .field textarea { font: inherit; font-size: 15px; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--ink); width: 100%; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--cyan); outline-offset: -1px; border-color: var(--cyan); } .field textarea { min-height: 130px; resize: vertical; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); } .consent input { margin-top: 3px; width: 16px; height: 16px; flex: 0 0 16px; } .form-note { font-family: var(--mono); font-size: 11.5px; color: var(--muted); } .contact-side dl { margin: 0; border-top: 1px solid var(--ink); } .contact-side dt { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding-top: 20px; } .contact-side dd { margin: 4px 0 18px; font-size: 19px; letter-spacing: -0.01em; border-bottom: 1px solid var(--line); padding-bottom: 18px; } .contact-side dd a:hover { color: var(--cyan-text); } @media (max-width: 1024px) { .routes { grid-template-columns: 1fr 1fr; } .contact-grid { grid-template-columns: 1fr; gap: 48px; } } @media (max-width: 640px) { .routes { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } } /* capability grid (3 x 2) */ .caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .cap { background: var(--paper); padding: 28px 26px 30px; } .cap .idx { font-family: var(--mono); font-size: 12px; color: var(--cyan-text); } .cap h3 { font-size: 22px; letter-spacing: -0.02em; margin: 10px 0 8px; } .cap p { margin: 0; color: var(--muted); font-size: 15px; } /* two-column prose / image pair */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; } .two-col h3 { font-size: 26px; letter-spacing: -0.02em; margin-bottom: 14px; } .two-col p { color: var(--muted); margin: 0 0 14px; } .ticks { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); } .ticks li { padding: 12px 0 12px 26px; border-bottom: 1px solid var(--line); position: relative; } .ticks li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 9px; height: 5px; border-left: 1.5px solid var(--cyan-text); border-bottom: 1.5px solid var(--cyan-text); transform: rotate(-45deg); } @media (max-width: 1024px) { .caps { grid-template-columns: 1fr 1fr; } .two-col { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 640px) { .caps { grid-template-columns: 1fr; } } /* composed studio product shots: show the whole machine, don't crop it */ .photo.studio { object-fit: contain; background: linear-gradient(180deg, #f6f9fc 0%, #e9eef5 100%); } /* ========================================================= CONTENT PAGE COMPONENTS ========================================================= */ .stories.one { grid-template-columns: minmax(0, 560px); } .stories.two { grid-template-columns: repeat(2, 1fr); } .stories.two .thumb, .stories.one .thumb { aspect-ratio: 16 / 10; } .story[hidden] { display: none; } /* data tables (blood results, comparisons) */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--paper); } table.data { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; } table.data th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 14px 18px; border-bottom: 1px solid var(--ink); background: var(--bg); } table.data td { padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: top; } table.data tr:last-child td { border-bottom: 0; } table.data td.num { font-variant-numeric: tabular-nums; white-space: nowrap; } table.data .delta { font-weight: 600; } table.data .delta.down { color: #0f7a4f; } table.data .delta.up { color: var(--cyan-text); } table.data td:first-child { font-weight: 500; } table.data tr.hl td { background: #f1f9fd; } .table-note { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 12px; } /* pull quote */ .quote { border-left: 2px solid var(--cyan); padding: 6px 0 6px 28px; max-width: 860px; } .quote p { font-size: clamp(20px, 2vw, 26px); line-height: 1.45; letter-spacing: -0.015em; margin: 0 0 18px; color: var(--ink); } .quote cite { font-style: normal; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } /* prose block */ .copy { max-width: 760px; } .copy p { color: var(--muted); font-size: 17px; margin: 0 0 18px; } .copy p strong { color: var(--ink); font-weight: 500; } .copy h3 { font-size: 26px; letter-spacing: -0.02em; margin: 36px 0 12px; } /* condition / topic list: 3 columns of headed lists */ .cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .cols3 > div { background: var(--paper); padding: 28px 26px; } .cols3 h3 { font-size: 20px; letter-spacing: -0.02em; margin-bottom: 14px; } .cols3 ul { list-style: none; margin: 0; padding: 0; } .cols3 li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; } .cols3 li:last-child { border-bottom: 0; } /* big statement */ .statement { font-size: clamp(30px, 4vw, 54px); letter-spacing: -0.035em; line-height: 1.08; max-width: 980px; margin: 0; } .statement em { font-style: normal; color: var(--cyan); } /* filter pills */ .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; } .filters button { font: inherit; font-size: 14px; padding: 9px 16px; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; cursor: pointer; color: var(--ink); } .filters button.on { background: var(--ink); color: #fff; border-color: var(--ink); } /* tile row (topic tabs on Men's / Women's) */ .tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .tiles.four { grid-template-columns: repeat(4, 1fr); } .tile { background: var(--paper); padding: 22px 20px 24px; } .tile .idx { font-family: var(--mono); font-size: 12px; color: var(--cyan-text); } .tile h3 { font-size: 19px; letter-spacing: -0.02em; margin: 8px 0 6px; } .tile p { margin: 0; color: var(--muted); font-size: 14.5px; } /* long-form topic sections */ .topic { display: grid; grid-template-columns: 64px 1fr; gap: 32px; padding: 44px 0; border-top: 1px solid var(--line); } .topic:first-child { border-top: 1px solid var(--ink); } .topic .idx { font-family: var(--mono); font-size: 12px; color: var(--cyan-text); padding-top: 8px; } .topic h3 { font-size: 30px; letter-spacing: -0.025em; margin-bottom: 6px; } .topic .sub { font-weight: 500; margin: 0 0 16px; } .topic p { color: var(--muted); margin: 0 0 14px; max-width: 780px; } @media (max-width: 1024px) { .cols3 { grid-template-columns: 1fr; } .tiles, .tiles.four { grid-template-columns: 1fr 1fr; } .stories.two { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .tiles, .tiles.four, .stories.two { grid-template-columns: 1fr; } .topic { grid-template-columns: 1fr; gap: 8px; } } /* legal copy */ .copy.legal h3 { font-size: 21px; margin: 34px 0 10px; } .copy.legal p, .copy.legal li { font-size: 15.5px; } /* article cards (Insights) */ .articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .article { background: var(--paper); display: flex; flex-direction: column; } .article .ph, .article .photo { aspect-ratio: 16 / 10; } .article .ph::after { display: none; } .article-body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .article .cat { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--cyan-text); } .article h3 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.2; } .article p { margin: 0 0 10px; color: var(--muted); font-size: 15px; } .article .link { margin-top: auto; align-self: flex-start; } .article-meta { font-family: var(--mono); font-size: 12px; color: var(--muted); display: flex; gap: 18px; margin-bottom: 36px; } @media (max-width: 1024px) { .articles { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .articles { grid-template-columns: 1fr; } } /* 4-step strip */ .steps.four { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .steps.four { grid-template-columns: repeat(2, 1fr); row-gap: 44px; } .steps.four .step:nth-child(3) { padding-left: 0; border-left: 0; } } @media (max-width: 640px) { .steps.four { grid-template-columns: 1fr; } .steps.four .step { padding: 0; border-left: 0; } } /* mechanism flow diagram (Science) */ .flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1.1fr auto 1fr; gap: 14px; align-items: center; } .flow .col { display: grid; gap: 10px; } .flow .node { border: 1px solid var(--line); background: var(--paper); padding: 14px 16px; font-size: 14.5px; line-height: 1.35; } .flow .node b { display: block; font-weight: 600; font-size: 15.5px; } .flow .node small { color: var(--muted); font-size: 13px; } .flow .node.key { border-color: var(--cyan); background: #f1f9fd; text-align: center; padding: 26px 18px; } .flow .node.key b { font-size: 18px; } .flow .arrow-r { font-size: 22px; color: var(--cyan-text); } .flow-effects { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .flow-effects div { background: var(--paper); padding: 16px 18px; font-weight: 500; font-size: 15px; } .flow-effects div span { display: block; font-family: var(--mono); font-size: 11px; color: var(--cyan-text); font-weight: 400; margin-bottom: 4px; } .flow-cap { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 26px 0 10px; } @media (max-width: 1024px) { .flow { grid-template-columns: 1fr; } .flow .arrow-r { transform: rotate(90deg); justify-self: center; } .flow-effects { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .flow-effects { grid-template-columns: 1fr; } } /* scorecard comparison (Longevity stressors) */ .score-wrap { border: 1px solid var(--line); background: var(--paper); overflow-x: auto; } table.score { width: 100%; border-collapse: collapse; min-width: 860px; } table.score th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 16px 20px; border-bottom: 1px solid var(--ink); background: var(--bg); vertical-align: bottom; } table.score th small { display: block; text-transform: none; letter-spacing: 0; font-size: 11px; color: #9a9aa0; margin-top: 3px; } table.score td { padding: 20px; border-bottom: 1px solid var(--line); vertical-align: middle; } table.score tr:last-child td { border-bottom: 0; } table.score td.iv { width: 24%; } table.score td.iv b { display: block; font-weight: 500; font-size: 16px; letter-spacing: -0.01em; } table.score td.iv small { color: var(--muted); font-size: 13px; } .dots { display: flex; gap: 5px; margin-bottom: 7px; } .dots i { width: 10px; height: 10px; border-radius: 50%; background: #e3e3df; } .dots i.on { background: var(--ink); } table.score .lbl { font-size: 13px; color: var(--muted); line-height: 1.35; } table.score tr.us td { background: #f1f9fd; } table.score tr.us td.iv b { color: var(--cyan-text); } table.score tr.us .dots i.on { background: var(--cyan); } table.score tr.us .lbl { color: var(--ink); } .score-key { display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 14px; } .score-key span { display: inline-flex; align-items: center; gap: 8px; } details.full { margin-top: 18px; border: 1px solid var(--line); background: var(--paper); } details.full summary { font-size: 15px; padding: 16px 48px 16px 20px; } details.full .table-wrap { border: 0; border-top: 1px solid var(--line); } /* ========================================================= SCIENCE: versus, precision cards, timeline ========================================================= */ /* thinAir vs HBOT */ .vs { border: 1px solid var(--line); background: var(--paper); } .vs-head, .vs-row { display: grid; grid-template-columns: 1fr 1.25fr 1.25fr; } .vs-head > div { padding: 26px 26px 22px; } .vs-head .us { background: var(--ink); color: #fff; } .vs-head .them { background: #eeeeeb; } .vs-head .vtag { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; opacity: .7; } .vs-head h3 { font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em; margin-top: 6px; color: inherit; } .vs-head .us h3 b { color: var(--cyan); font-weight: 500; } .vs-head .feat { display: flex; align-items: flex-end; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .vs-row { border-top: 1px solid var(--line); } .vs-row > div { padding: 18px 26px; } .vs-row .feat { font-weight: 500; } .vs-row .us { background: #f1f9fd; border-left: 1px solid #d6ecf6; border-right: 1px solid #d6ecf6; } .vs-row .us, .vs-row .them { display: flex; gap: 12px; align-items: flex-start; } .vs-row .them { color: var(--muted); } .vs-row .mark { flex: 0 0 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; margin-top: 1px; } .vs-row .us .mark { background: var(--cyan); color: #fff; } .vs-row .them .mark { background: #e2e2de; color: #7a7a80; } .vs-row small { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.4; } .vs-foot { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); } .vs-foot > div { padding: 30px 28px; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.03em; line-height: 1.15; } .vs-foot .us { background: var(--ink); color: #fff; } .vs-foot .us b { color: var(--cyan); font-weight: 500; } .vs-foot .them { background: #eeeeeb; color: #55555a; } .vs-foot small { display: block; font-size: 14px; letter-spacing: 0; margin-top: 10px; opacity: .75; } @media (max-width: 860px) { .vs-head, .vs-row { grid-template-columns: 1fr 1fr; } .vs-head .feat { display: none; } .vs-row .feat { grid-column: 1 / -1; padding-bottom: 4px; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 400; } .vs-row .us, .vs-row .them { padding-top: 10px; } .vs-foot { grid-template-columns: 1fr; } } @media (max-width: 520px) { .vs-row > div, .vs-head > div { padding-left: 16px; padding-right: 16px; } .vs-row .mark { display: none; } } /* precision longevity: 2x2 on dark */ .precision { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #2c2c2f; border: 1px solid #2c2c2f; } .pcard { background: var(--dark); padding: 38px 34px 40px; } .pcard .big { font-size: 64px; font-weight: 300; letter-spacing: -0.05em; line-height: 1; color: var(--cyan); } .pcard h3 { font-size: 26px; letter-spacing: -0.025em; margin: 18px 0 12px; color: #fff; } .pcard p { color: #b4b4b8; margin: 0 0 18px; font-size: 15.5px; } .pcard .punch { color: #fff; font-weight: 500; margin: 18px 0 0; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chips span { font-size: 13.5px; padding: 7px 13px; border: 1px solid #3a3a3e; border-radius: 999px; color: #e8e8ea; } .chips.no span { text-decoration: line-through; text-decoration-color: var(--cyan); color: #9a9a9f; } .osc { display: grid; gap: 10px; } .osc div { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid #3a3a3e; } .osc b { font-family: var(--mono); font-weight: 400; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--cyan); } .osc span { color: #e8e8ea; font-size: 14.5px; } .wave { height: 36px; margin: 6px 0 16px; background: repeating-linear-gradient(90deg, var(--cyan) 0 22%, transparent 22% 25%, #5b5b60 25% 47%, transparent 47% 50%); opacity: .9; -webkit-mask: linear-gradient(#000 0 0) top / 100% 6px no-repeat, linear-gradient(#000 0 0) bottom / 100% 6px no-repeat; } @media (max-width: 860px) { .precision { grid-template-columns: 1fr; } .osc div { grid-template-columns: 1fr; gap: 4px; } } /* research-to-impact timeline */ .timeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; padding-top: 34px; } .timeline::before { content: ""; position: absolute; top: 8px; left: 8px; right: 8px; height: 2px; background: linear-gradient(90deg, var(--line), var(--cyan)); } .tstep { position: relative; } .tstep::before { content: ""; position: absolute; top: -34px; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 2px solid var(--cyan); } .tstep:last-child::before { background: var(--cyan); } .tstep .n { font-family: var(--mono); font-size: 12px; color: var(--cyan-text); } .tstep h3 { font-size: 24px; letter-spacing: -0.025em; margin: 6px 0 6px; } .tstep p { margin: 0; color: var(--muted); font-size: 15px; } @media (max-width: 860px) { .timeline { grid-template-columns: 1fr; gap: 26px; padding: 0 0 0 34px; } .timeline::before { top: 8px; bottom: 8px; left: 8px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--line), var(--cyan)); } .tstep::before { top: 2px; left: -34px; } } /* versus: roomier rows, cleaner header (29 Sep) */ .vs-row > div { padding: 22px 28px; } .vs-row .us > div, .vs-row .them > div { font-weight: 500; line-height: 1.4; } .vs-row .them > div { font-weight: 400; } .vs-row small { font-weight: 400; margin-top: 5px; } .vs-row .feat { display: flex; align-items: center; color: var(--ink); } .vs-head > div { padding: 30px 28px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 128px; } .vs-head .feat { justify-content: flex-end; } .vs-head .us img { height: 34px; width: auto; margin-bottom: 14px; align-self: flex-start; } .vs-head h3 { margin: 0; } .vs-head .them .vtag, .vs-head .us .vtag { display: none; } .vs-head .them h3 { color: #55555a; } /* Health dropdown: open on hover, stay open while moving to the options */ .dd-top { display: flex; align-items: center; gap: 5px; } .dd-top:hover, .dd-top.active { color: var(--cyan-text); } .dd-list { transition: opacity .12s, visibility 0s linear .18s; } .dd:hover .dd-list, .dd:focus-within .dd-list { transition: opacity .12s, visibility 0s; } .dd-list::before { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 26px; } @media (max-width: 1024px) { .menu.open .dd-top { display: flex; padding: 14px 0; width: 100%; } } /* ========================================================= PERFORMANCE: loop diagram, dashboard, goals ========================================================= */ .loop { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1 / 1; margin: 0 auto; } .loop::before { content: ""; position: absolute; inset: 12%; border: 1.5px dashed #3a3a3e; border-radius: 50%; } .loop .core { position: absolute; inset: 30%; border-radius: 50%; border: 2px solid var(--cyan); display: grid; place-items: center; text-align: center; padding: 10px; background: radial-gradient(circle, rgba(40,171,226,.14), transparent 70%); color: #fff; font-weight: 500; font-size: clamp(14px, 1.5vw, 18px); line-height: 1.2; } .loop .node { position: absolute; transform: translate(-50%, -50%); background: var(--dark); border: 1px solid #3a3a3e; padding: 9px 16px; border-radius: 999px; color: #fff; font-size: 14.5px; font-weight: 500; white-space: nowrap; } .loop .node i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--cyan); margin-right: 7px; } .loop .n1 { left: 50%; top: 12%; } .loop .n2 { left: 81%; top: 31%; } .loop .n3 { left: 81%; top: 69%; } .loop .n4 { left: 50%; top: 88%; } .loop .n5 { left: 19%; top: 69%; } .loop .n6 { left: 19%; top: 31%; } .dash { background: var(--dark); color: #fff; border: 1px solid #2c2c2f; padding: 28px; display: grid; gap: 22px; } .dash-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: #a9a9ad; } .dash-top b { color: #fff; font-weight: 500; font-size: 17px; } .dash-score { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; } .ring { width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: conic-gradient(var(--cyan) 0 87%, #2c2c2f 87% 100%); position: relative; } .ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--dark); } .ring div { position: relative; } .ring b { display: block; font-size: 40px; font-weight: 400; letter-spacing: -0.04em; line-height: 1; } .ring small { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--cyan); } .dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #2c2c2f; } .dash-stats div { background: var(--dark); padding: 12px 14px; } .dash-stats b { display: block; font-size: 24px; font-weight: 400; letter-spacing: -0.03em; } .dash-stats small { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: #8c8c91; } .dash svg { width: 100%; height: 70px; display: block; } .dash .trend-lbl { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #8c8c91; margin-bottom: 6px; } .metrics { border-top: 1px solid var(--ink); } .metric { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: center; } .metric .ico { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--cyan-text); background: var(--paper); } .metric .ico svg { width: 20px; height: 20px; } .metric b { display: block; font-weight: 500; font-size: 17px; } .metric span { color: var(--muted); font-size: 14.5px; } .goals { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .goal { background: var(--paper); padding: 24px 18px 26px; display: flex; flex-direction: column; gap: 10px; } .goal .gi { width: 40px; height: 40px; color: var(--cyan-text); } .goal h3 { font-size: 20px; letter-spacing: -0.02em; } .goal p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.45; } .pillars3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #2c2c2f; border: 1px solid #2c2c2f; margin-top: 8px; } .pillars3 div { background: var(--dark); padding: 22px 22px 24px; color: #e8e8ea; } .pillars3 b { display: block; font-family: var(--mono); font-weight: 400; font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--cyan); margin-bottom: 8px; } .rrr { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: clamp(30px, 4.6vw, 64px); letter-spacing: -0.04em; line-height: 1; font-weight: 500; } .rrr span:nth-child(2) { color: var(--cyan); } @media (max-width: 1024px) { .goals { grid-template-columns: repeat(3, 1fr); } .pillars3 { grid-template-columns: 1fr; } } @media (max-width: 640px) { .goals { grid-template-columns: 1fr 1fr; } .dash-score { grid-template-columns: 1fr; justify-items: start; } .loop .node { font-size: 12.5px; padding: 7px 11px; } } /* internal image library */ .lib-head { border-top: 1px solid var(--ink); padding-top: 18px; margin-bottom: 22px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: baseline; } .lib-head h2 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; } .lib-head h2 em { font-style: normal; font-family: var(--mono); font-size: 13px; color: var(--muted); margin-left: 8px; vertical-align: middle; } .lib-head p { margin: 0; color: var(--muted); max-width: 560px; font-size: 14.5px; } .lib-head.good h2 { color: #0f7a4f; } .lib-head.bad h2 { color: #b3261e; } .lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; } .lib { margin: 0; background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; } .lib img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #eee; } .lib figcaption { padding: 10px 12px 12px; display: grid; gap: 3px; } .lib b { font-weight: 500; font-size: 13.5px; line-height: 1.3; } .lib span { font-size: 12.5px; color: var(--cyan-text); } .lib small { font-family: var(--mono); font-size: 10.5px; color: var(--muted); word-break: break-all; } /* ========================================================= INTERNAL IMAGE GALLERY ========================================================= */ .gal-bar { position: sticky; top: 72px; z-index: 40; background: rgba(250,250,248,.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: 14px 0; } .gal-pills { display: flex; gap: 8px; flex-wrap: wrap; } .gal-pills button { font: inherit; font-size: 14px; padding: 8px 14px; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; cursor: pointer; color: var(--ink); } .gal-pills button em { font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-left: 4px; } .gal-pills button.on { background: var(--ink); color: #fff; border-color: var(--ink); } .gal-pills button.on em { color: #bdbdc2; } .gal-wrap { padding-bottom: 96px; } .gal-group { padding-top: 56px; } .gal-group[hidden] { display: none; } .gal-head { border-top: 1px solid var(--ink); padding-top: 16px; margin-bottom: 20px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: baseline; } .gal-head h2 { font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.02em; } .gal-head h2 em { font-style: normal; font-family: var(--mono); font-size: 13px; color: var(--muted); margin-left: 6px; } .gal-head p { margin: 0; color: var(--muted); max-width: 580px; font-size: 14.5px; } .gal-head.good h2 { color: #0f7a4f; } .gal-head.bad h2 { color: #b3261e; } .gal-grid { columns: 3 320px; column-gap: 16px; } .gal-item { break-inside: avoid; margin: 0 0 16px; background: var(--paper); border: 1px solid var(--line); cursor: zoom-in; transition: box-shadow .15s, transform .15s; } .gal-item:hover { box-shadow: 0 10px 30px rgba(0,0,0,.12); transform: translateY(-2px); } .gal-item img { width: 100%; height: auto; display: block; } .gal-item.alpha img, .lb-img.alpha img { background-color: #fff; background-image: linear-gradient(45deg, #e6e6e6 25%, transparent 25%), linear-gradient(-45deg, #e6e6e6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e6e6e6 75%), linear-gradient(-45deg, transparent 75%, #e6e6e6 75%); background-size: 22px 22px; background-position: 0 0, 0 11px, 11px -11px, -11px 0; } .gal-item.alpha img { padding: 16px; } .gal-item figcaption { padding: 12px 14px 14px; display: grid; gap: 3px; } .gal-item b { font-weight: 500; font-size: 15px; } .gal-item span { font-size: 13px; color: var(--cyan-text); } .lb { position: fixed; inset: 0; z-index: 200; background: rgba(10,10,11,.94); display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; } .lb[hidden] { display: none; } .lb figure { margin: 0; height: 100vh; display: grid; grid-template-rows: 1fr auto; padding: 28px 0 20px; min-width: 0; } .lb-img { display: grid; place-items: center; min-height: 0; } .lb-img img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; } .lb-img.alpha img { padding: 12px; } .lb figcaption { color: #e8e8ea; display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; justify-content: center; padding-top: 16px; text-align: center; } .lb figcaption b { font-weight: 500; font-size: 17px; } .lb figcaption span { color: var(--cyan); font-size: 14px; } .lb figcaption small { font-family: var(--mono); font-size: 11.5px; color: #8c8c91; } .lb figcaption a { color: #fff; font-size: 14px; border-bottom: 1px solid var(--cyan); } .lb-x { position: absolute; top: 14px; right: 18px; background: none; border: 0; color: #fff; font-size: 26px; cursor: pointer; z-index: 2; } .lb-prev, .lb-next { background: none; border: 0; color: #fff; font-size: 54px; line-height: 1; cursor: pointer; height: 100%; opacity: .7; } .lb-prev:hover, .lb-next:hover { opacity: 1; } @media (max-width: 640px) { .lb { grid-template-columns: 36px 1fr 36px; } .lb-prev, .lb-next { font-size: 38px; } .gal-bar { top: 72px; } } /* product shot (cutout on a flat panel): never crop the machine */ .photo.product { object-fit: contain; background: var(--blue-tint); } /* caption under a page-hero photo (Performance: Jaco) */ .hero-fig { margin: 0; } .hero-fig figcaption { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--muted); border-left: 2px solid var(--cyan); padding-left: 14px; } .hero-fig figcaption b { display: block; font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; } /* FAQ "gust": a thin blue breeze sweeps along the line as an answer opens */ summary { background: linear-gradient(90deg, transparent, var(--cyan) 50%, transparent) no-repeat; background-size: 45% 1.5px; background-position: -100% 100%; transition: color .6s, padding-left .9s cubic-bezier(.45, .05, .25, 1); } summary:hover { color: var(--cyan-text); padding-left: 6px; } details.gust > summary { animation: gust 1.6s cubic-bezier(.45, .05, .25, 1); } @keyframes gust { from { background-position: -100% 100%; } to { background-position: 260% 100%; } } @media (prefers-reduced-motion: reduce) { summary, summary::before, summary::after { transition: none; } details.gust > summary { animation: none; } } /* ---------- air layer: softness on top of the clinical base ---------- Zach 30 Sep: "we really need that chilled airy vibe… a bit of softness here and there". Layout, corners and type stay as they are; this only adds light, drift and slower motion. */ :root { --drift: cubic-bezier(.22, .61, .36, 1); --breath: cubic-bezier(.45, .05, .25, 1); } /* breathing light: a soft logo-blue glow that slowly swells behind heroes and dark sections */ .hero, .page-hero, .dark, .cta { position: relative; isolation: isolate; overflow: hidden; } .hero::before, .page-hero::before, .dark::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: min(1100px, 85vw); aspect-ratio: 1; border-radius: 50%; animation: breathe 16s var(--breath) infinite alternate; } .hero::before, .page-hero::before { right: -24%; top: -48%; background: radial-gradient(closest-side, rgba(40,171,226,.15), rgba(40,171,226,.055) 55%, transparent); } .dark::before { left: -30%; bottom: -60%; background: radial-gradient(closest-side, rgba(40,171,226,.20), rgba(40,171,226,.06) 55%, transparent); animation-duration: 20s; } @keyframes breathe { from { transform: translate(0, 0) scale(.9); opacity: .65; } to { transform: translate(-6%, 7%) scale(1.08); opacity: 1; } } /* airflow: faint lines drifting slowly through the "Measure your progress" band */ .cta::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201600%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2090%20C267%2056%20533%20124%20800%2090%20C1067%2056%201333%20124%201600%2090%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%220.95%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M0%20150%20C267%20104%20533%20196%20800%20150%20C1067%20104%201333%20196%201600%20150%22%20fill%3D%22none%22%20stroke%3D%22%2328abe2%22%20stroke-opacity%3D%220.22%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M0%20215%20C267%20187%20533%20243%20800%20215%20C1067%20187%201333%20243%201600%20215%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%220.9%22%20stroke-width%3D%221.4%22/%3E%3Cpath%20d%3D%22M0%20280%20C267%20228%20533%20332%20800%20280%20C1067%20228%201333%20332%201600%20280%22%20fill%3D%22none%22%20stroke%3D%22%2328abe2%22%20stroke-opacity%3D%220.16%22%20stroke-width%3D%221.1%22/%3E%3Cpath%20d%3D%22M0%20335%20C267%20305%20533%20365%20800%20335%20C1067%20305%201333%20365%201600%20335%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%220.8%22%20stroke-width%3D%221.3%22/%3E%3C/svg%3E") repeat-x 0 50% / 1600px 100%; animation: airflow 90s linear infinite; } @keyframes airflow { to { background-position: -1600px 50%; } } /* content floats softly into view (JS adds these classes; with no JS nothing is hidden) */ html.air .reveal { opacity: 0; transform: translateY(22px); filter: blur(6px); } html.air .reveal.in { opacity: 1; transform: none; filter: blur(0); transition: opacity 1.3s var(--drift), transform 1.3s var(--drift), filter 1.3s var(--drift); transition-delay: var(--d, 0ms); } /* slower, softer hovers */ .btn { transition: background .5s var(--drift), color .5s var(--drift), border-color .5s var(--drift), transform .7s var(--drift), box-shadow .7s var(--drift); } .btn-main:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -14px rgba(0,153,214,.75); } .arrow { transition: transform .6s var(--drift); } .aud a .photo, .journey .photo, .article .photo { transition: filter 1.2s var(--drift); } .aud a:hover .photo, .journey:hover .photo, .article:hover .photo { filter: brightness(1.05) saturate(1.1); } @media (prefers-reduced-motion: reduce) { .hero::before, .page-hero::before, .dark::before, .cta::before { animation: none; } html.air .reveal { opacity: 1; transform: none; filter: none; } } /* inflammatory markers (Inflammation page): four big figures in a ruled row */ .markers { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); } .marker { padding: 30px 24px 32px 0; border-bottom: 1px solid var(--line); } .marker + .marker { padding-left: 24px; border-left: 1px solid var(--line); } .m-num { font-size: clamp(46px, 5vw, 72px); font-weight: 400; letter-spacing: -.045em; line-height: 1; color: var(--cyan); } .m-num sup { font-size: .42em; vertical-align: top; position: relative; top: .3em; margin-left: 2px; } .m-word { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--cyan-text); margin: 12px 0 20px; } .m-name { color: var(--muted); font-size: 14.5px; } .m-name b { display: block; font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); margin-bottom: 2px; } @media (max-width: 1024px) { .markers { grid-template-columns: 1fr 1fr; } .marker:nth-child(3) { border-left: 0; padding-left: 0; } } @media (max-width: 640px) { .markers { grid-template-columns: 1fr; } .marker + .marker { border-left: 0; padding-left: 0; } } .sec-head.solo { grid-template-columns: 1fr; } /* ---------- cookie consent (RFP §23): a calm card, bottom left; a bottom sheet on phones ---------- */ .cc { position: fixed; left: 24px; bottom: 24px; z-index: 90; width: min(440px, calc(100% - 32px)); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 28px 60px -28px rgba(35,35,37,.4); padding: 22px 22px 20px; font-size: 14.5px; } .cc[hidden] { display: none; } .cc .eyebrow { margin-bottom: 10px; } .cc p { margin: 0 0 16px; color: var(--muted); line-height: 1.55; } .cc p a { color: var(--ink); border-bottom: 1px solid var(--cyan); } .cc-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .cc .btn { padding: 11px 16px; font-size: 14px; } .cc-more { background: none; border: 0; font: inherit; color: var(--ink); cursor: pointer; padding: 4px 2px; margin-left: 6px; border-bottom: 1px solid var(--cyan); } .cc-opts { display: none; margin: 0 0 16px; border-top: 1px solid var(--line); } .cc.open .cc-opts { display: block; } .cc-opt { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; } .cc-opt b { display: block; font-weight: 500; color: var(--ink); } .cc-opt > span > span { color: var(--muted); font-size: 13.5px; } .cc-opt input { accent-color: var(--blue); width: 18px; height: 18px; margin-top: 3px; flex: none; } .cc .cc-save { display: none; } .cc.open .cc-save { display: inline-flex; } .cc.open .cc-more { display: none; } @media (max-width: 640px) { .cc { left: 12px; right: 12px; bottom: 12px; width: auto; } } @media (prefers-reduced-motion: no-preference) { .cc:not([hidden]) { animation: cc-in 1.1s var(--drift) .5s both; } @keyframes cc-in { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } } } /* the "this video plays from Vimeo" prompt inside the video popup */ .vc { position: absolute; inset: 0; display: grid; align-content: center; padding: clamp(24px, 6vw, 64px); color: #f3f3f1; background: radial-gradient(600px 400px at 80% 10%, rgba(40,171,226,.18), transparent 70%), #161617; } .vc .eyebrow { color: var(--cyan); margin-bottom: 14px; } .vc h3 { color: #fff; font-size: clamp(22px, 3vw, 34px); margin-bottom: 12px; } .vc p { color: #b4b4b8; margin: 0 0 24px; max-width: 520px; } .vc .btn-line { border-color: #f3f3f1; color: #f3f3f1; } /*