/* Maitrium shared stylesheet. Tokens, base, nav, footer, buttons, and two page utilities. Linked by /solutions/ and by every page built after it. Before adopting it on an existing page, reconcile that page's own :root, .page and .eyebrow with the ones here: the-tax.html is a light page with a different palette and no --wax, so linking this as it stands would turn its background navy and drop its text colour. Token values are the ones in index.html :root. Nav, footer, and button rules are copied from index.html unchanged. */ :root { --ink: #07090C; --ink-2: #11161E; --paper: #0A0E14; --honey: #FFB627; --honey-deep: #D97706; --honey-glow: #FFE9A8; --wax: #F5EBD7; --wax-2: #B8A98A; --wax-3: #6E6757; --spice: #6BFCED; --spice-deep: #07A4A6; --spice-glow: #B7FFF6; } /* base, from index.html */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--ink); color: var(--wax); -webkit-font-smoothing: antialiased; scroll-behavior: smooth; } html { overflow-x: clip; } body { overflow-x: clip; } /* No scrollbar hiding here, on purpose. index.html hides the scrollbar in its own inline style because the homepage is stepped by wheel and keyboard through scroll snap. That stays a homepage convention. Inner pages keep the native scrollbar. To reverse it, copy the three rules from index.html (scrollbar-width on html, -ms-overflow-style on body, ::-webkit-scrollbar on html and body) into this block. */ body { font-family: 'Inter', -apple-system, sans-serif; background-image: radial-gradient(ellipse 800px 600px at 25% 30%, rgba(255, 182, 39, .06) 0%, transparent 60%), radial-gradient(ellipse 700px 500px at 75% 70%, rgba(107, 252, 237, .05) 0%, transparent 60%); background-attachment: fixed; } /* nav, from index.html */ .nav { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 24px 40px; } .brand { display: flex; align-items: center; gap: 12px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px; color: var(--wax); text-decoration: none; letter-spacing: -.01em; } .brand::after { content: "\25B6"; color: var(--spice); font-size: .68em; margin-left: 6px; text-shadow: 0 0 8px rgba(107, 252, 237, .55); transform: translateY(-1px); display: inline-block; } .nav-links { display: flex; gap: 28px; font-size: 13px; } .nav-links a { color: var(--wax-2); text-decoration: none; transition: color .2s; } .nav-links a:hover { color: var(--wax); } .nav-links a:focus-visible { outline: 2px solid var(--spice); outline-offset: 4px; } /* current page. Each page sets and the nav partial sets data-nav on each link. Add one line per page as pages land. */ body[data-page="solutions"] .nav-links a[data-nav="solutions"], body[data-page="product"] .nav-links a[data-nav="product"], body[data-page="how-we-work"] .nav-links a[data-nav="how-we-work"], body[data-page="company"] .nav-links a[data-nav="company"], body[data-page="start"] .nav-links a[data-nav="start"] { color: var(--wax); } /* buttons, from index.html */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 100px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all .2s; } .btn.primary { background: var(--spice); color: var(--ink); box-shadow: 0 0 30px rgba(107, 252, 237, .35); } .btn.primary:hover { background: var(--wax); box-shadow: 0 0 40px rgba(245, 235, 215, .4); } .btn.ghost { color: var(--wax); border: 1px solid rgba(245, 235, 215, .2); } .btn.ghost:hover { border-color: var(--wax); } .btn:focus-visible { outline: 2px solid var(--spice); outline-offset: 3px; } /* footer, from index.html */ .footer { border-top: 1px solid var(--ink-2); padding: 36px 80px 32px; display: flex; flex-direction: column; gap: 18px; font-size: 13px; color: var(--wax-2); position: relative; z-index: 2; } .footer-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .footer-links { display: flex; gap: 20px; } .footer a { color: var(--wax-2); text-decoration: none; } .footer a:hover { color: var(--wax); } .footer-ip { font-size: 11px; color: var(--wax-3); line-height: 1.6; max-width: 1100px; padding-top: 14px; border-top: 1px solid var(--ink-2); } .footer-ip strong { color: var(--wax-2); font-weight: 600; } /* page utilities for inner pages */ .eyebrow { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--wax-3); margin-bottom: 12px; } .page { position: relative; z-index: 2; padding-top: 112px; } .measure { max-width: 1240px; margin: 0 auto; } /* mobile, from index.html */ @media (max-width: 900px) { .nav { padding: 20px 24px; } .nav-links { gap: 18px; } .footer { padding: 24px 32px; } .page { padding-top: 96px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .nav-links a, .btn { transition: none; } } /* PR 1.3: the nav button, "Start with a problem". Small pill, cyan border, defined here from nothing and flagged for Aaron on the local review. Below 900px it is hidden until PR 2 adds the mobile menu (C2). PR 2 appends a later block that re-shows it inside the open menu; nothing here is edited to do that. Every page keeps its own "Start with a problem" button in the body, so the form stays reachable on phones. index.html carries a copy of the first two rules in its inline style until PR 2 links this file. */ .nav-links a.nav-cta { padding: 7px 14px; border: 1px solid var(--spice); border-radius: 100px; color: var(--spice); font-weight: 600; line-height: 1; white-space: nowrap; align-self: center; transition: background .2s, color .2s; } body[data-page="start"] .nav-links a.nav-cta { color: var(--wax); border-color: var(--wax); } .nav-links a.nav-cta:hover { background: var(--spice); color: var(--ink); } /* On /start/ itself the wax rule above outranks the hover rule on colour, so restate it. */ body[data-page="start"] .nav-links a.nav-cta:hover { color: var(--ink); } @media (max-width: 900px) { .nav-links a.nav-cta { display: none; } } @media (prefers-reduced-motion: reduce) { .nav-links a.nav-cta { transition: none; } } /* PR 1.4 Solutions index: numbered rows and chips. Used by /solutions/. Homepage section 06 used them until 2026-09-10. A row is a list item: a number, the content (name, one line, chips), and a slot for the detail-page link, which stays plain text until that page exists. Adding or removing a row is an HTML edit; nothing here counts. */ .rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink-2); } .row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 0 24px; padding: 28px 0; border-bottom: 1px solid var(--ink-2); align-items: baseline; } .row .num { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .14em; line-height: 1.6; color: var(--wax-3); } .row .row-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -.01em; line-height: 1.2; color: var(--wax); margin: 0 0 8px; } .row .row-desc { font-size: 15px; line-height: 1.55; color: var(--wax-2); max-width: 62ch; margin: 0; } .row .row-more { color: var(--wax-3); font-size: 18px; line-height: 1; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .chip { display: inline-block; padding: 5px 12px; border: 1px solid rgba(245, 235, 215, .2); border-radius: 100px; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--wax-2); text-decoration: none; transition: color .2s, border-color .2s; } .chip:hover { color: var(--wax); border-color: var(--wax); } .chip:focus-visible { outline: 2px solid var(--spice); outline-offset: 3px; } @media (max-width: 900px) { .row { grid-template-columns: 1fr; gap: 8px 0; padding: 22px 0; } .row .row-more { display: none; } } @media (prefers-reduced-motion: reduce) { .chip { transition: none; } } /* this PR adds a fifth footer link; five do not fit 390 wide */ .footer-links { flex-wrap: wrap; row-gap: 10px; } /* ── PR 1.5 Product page ─────────────────────────────────────────── Used by /product/. The device frames are reused by homepage section 03 in PR 2. .beats and .snapshot* are /product/ only. .beats / .beat: the four-step "How it works" row. .snapshot*: a drawn Workspace snapshot in the demo shell's visual language (light surface, hairline borders, spice-deep accent, values from solutions/_shared.css). It is a drawing, labelled Illustrative, and a real screenshot replaces it by swapping the block. .devices / .device*: laptop, tablet and phone frames. No motion anywhere. */ .beats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } .beat { border-top: 1px solid rgba(245, 235, 215, .18); padding-top: 18px; } .beat h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--wax); margin: 0 0 10px; } .beat p { font-size: 15px; line-height: 1.55; color: var(--wax-2); margin: 0; } .snapshot { position: relative; max-width: 960px; margin: 0 auto; border-radius: 12px; overflow: hidden; background: #f7f9fc; color: #0f1724; border: 1px solid #dde3ed; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); font-family: 'Inter', sans-serif; } .snapshot-tag { position: absolute; top: 14px; right: 14px; z-index: 1; padding: 5px 12px; border-radius: 100px; background: rgba(15, 23, 36, .85); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .04em; } .snapshot-bar { height: 52px; padding: 0 22px; display: flex; align-items: center; gap: 18px; background: #ffffff; border-bottom: 1px solid #dde3ed; } .snapshot-brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: -.01em; } .snapshot-brand::after { content: " \25B6"; color: var(--spice-deep); font-size: .68em; margin-left: 2px; } .snapshot-crumb { font-size: 13px; color: #6b7a8d; } .snapshot-body { display: grid; grid-template-columns: 5fr 7fr; gap: 20px; padding: 22px; } .snapshot-list, .snapshot-panel { background: #ffffff; border: 1px solid #dde3ed; border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(15, 23, 36, .04); } .snapshot-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6b7a8d; margin: 0 0 12px; } .snapshot-row { display: grid; grid-template-columns: 10px 1fr; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #dde3ed; } .snapshot-label + .snapshot-row { border-top: 0; } .snapshot-row.is-on { background: #DAFAFA; margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 8px; border-top-color: transparent; } .snapshot-dot { width: 10px; height: 10px; border-radius: 50%; background: #c5cdd8; } .snapshot-row.is-on .snapshot-dot { background: var(--honey); box-shadow: 0 0 0 3px rgba(255, 182, 39, .2); } .snapshot-line { display: block; height: 10px; border-radius: 5px; background: #dde3ed; margin: 8px 0; } .snapshot-line.short { width: 55%; } .snapshot-line.dark { background: #c5cdd8; } .snapshot-btn { display: inline-block; width: 128px; height: 34px; border-radius: 8px; background: var(--spice-deep); margin-top: 16px; } .devices { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-end; justify-content: center; margin: 40px 0 32px; } .device { position: relative; flex: none; border: 1px solid rgba(245, 235, 215, .22); background: #0F151D; border-radius: 10px; } .device.laptop { width: 430px; height: 264px; } .device.tablet { width: 186px; height: 248px; } .device.phone { width: 112px; height: 226px; border-radius: 18px; } .device-screen { position: absolute; inset: 10px; border-radius: 6px; background: #f7f9fc; overflow: hidden; } .device-screen::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 18%; background: #ffffff; border-bottom: 1px solid #dde3ed; } .device-screen::after { content: ""; position: absolute; left: 12%; right: 12%; top: 30%; height: 10px; border-radius: 5px; background: #dde3ed; box-shadow: 0 22px 0 #dde3ed, 0 44px 0 #dde3ed; } .device.phone .device-screen { border-radius: 12px; } @media (max-width: 900px) { .beats { grid-template-columns: 1fr; gap: 24px; } .snapshot-body { grid-template-columns: 1fr; gap: 16px; padding: 16px; } .device.laptop { width: 300px; height: 184px; } .device.tablet { width: 150px; height: 200px; } .device.phone { width: 94px; height: 190px; } } /* PR 1.2 Company: the person block. Used by /company/ now and by homepage section 09 in PR 2. The photo is square with fixed width and height here and on the , so a slow or missing image cannot shift the layout. */ .people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .person { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: start; } .person-photo { width: 120px; height: 120px; aspect-ratio: 1 / 1; border-radius: 12px; object-fit: cover; display: block; background: var(--ink-2); } .person-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.01em; color: var(--wax); margin: 0 0 4px; } .person-role { font-size: 13px; color: var(--wax-2); letter-spacing: .04em; margin: 0 0 10px; } .person-bio { font-size: 15px; line-height: 1.55; color: var(--wax-2); max-width: 46ch; margin: 0 0 12px; } .person-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--wax-2); text-decoration: none; transition: color .2s; } .person-link:hover { color: var(--wax); } .person-link:focus-visible { outline: 2px solid var(--spice); outline-offset: 4px; } .person-link svg { width: 16px; height: 16px; fill: currentColor; flex: none; } @media (max-width: 900px) { .people { grid-template-columns: 1fr; gap: 28px; } .person { grid-template-columns: 96px 1fr; gap: 16px; } .person-photo { width: 96px; height: 96px; } } @media (prefers-reduced-motion: reduce) { .person-link { transition: none; } } /* ── PR 2 Homepage: the mobile menu (C2) ──────────────────────────── At 900 and under the five links and the Start button sit behind one button. The button's markup and its script live in _partials/nav.html, so every page that stamps the nav gets the menu with no per-page work. Nothing above is edited: this block is appended last, so where it repeats a selector it wins, which is how it re-shows the .nav-cta pill that PR 1.3 hid at this width. */ .nav-toggle { display: none; } @media (max-width: 900px) { .nav { flex-wrap: wrap; } .nav-toggle { all: unset; box-sizing: border-box; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; cursor: pointer; border-radius: 8px; } .nav-toggle span { display: block; height: 2px; background: var(--wax); border-radius: 2px; } .nav-toggle:focus-visible { outline: 2px solid var(--spice); outline-offset: 2px; } .nav.open { background: var(--ink); } .nav-links { display: none; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 0; margin-top: 12px; padding: 4px 0 12px; border-top: 1px solid var(--ink-2); } .nav.open .nav-links { display: flex; } .nav-links a { display: block; width: 100%; padding: 14px 0; font-size: 15px; } .nav-links a.nav-cta { display: inline-flex; width: auto; align-self: flex-start; align-items: center; justify-content: center; margin-top: 10px; padding: 10px 18px; min-height: 44px; } }