/* ========================================================================= Proxigo — shared stylesheet Implements the Proxigo Branding Kit: charcoal / alpine teal / stone on a warm off-white plate, Poppins SemiBold headings over Inter body copy. LIGHT ONLY, deliberately. Every concept board is built on the warm off-white plate (#FAF8F5) and the hero artwork is baked onto that exact colour, so a dark scheme would leave the art sitting on a visible light rectangle. The `color-scheme: light` declaration below stops browsers auto-darkening form controls and scrollbars. Do not add a prefers-color-scheme block without also producing dark variants of the hero art and the emblem. This file is served under the catch-all `no-cache` header in firebase.json, NOT the immutable asset rule — so it is safe to edit in place. Images and fonts are immutable for a year and must be renamed when their content changes. See README.md. ========================================================================= */ /* Self-hosted faces — the site makes no external network requests. */ @font-face { font-family:'Inter'; src:url(/fonts/inter-latin-var.woff2) format('woff2'); font-weight:400 800; font-style:normal; font-display:swap; } @font-face { font-family:'Poppins'; src:url(/fonts/poppins-latin-500.woff2) format('woff2'); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:'Poppins'; src:url(/fonts/poppins-latin-600.woff2) format('woff2'); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:'Poppins'; src:url(/fonts/poppins-latin-700.woff2) format('woff2'); font-weight:700; font-style:normal; font-display:swap; } :root { color-scheme: light; /* Brand palette — values are from the branding kit swatches. */ --charcoal:#111417; --teal:#0E6B6B; --teal-hi:#12807F; --teal-deep:#0A5252; --stone:#8E9499; /* Surfaces. --paper matches the plate the concept artwork is rendered on, so full-bleed hero images blend edge to edge with no visible seam. */ --paper:#FAF8F5; --paper-2:#F3F0EA; --surface:#FFFFFF; --ink:#111417; --body:#484E54; --muted:#6E757C; --rule:#E4E0D9; --rule-soft:#EFECE5; --band:#111417; --band-ink:#FAF8F5; --band-body:#B6BCC1; --band-rule:rgba(255,255,255,.16); --band-teal:#4FB3AE; --display:'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --wrap:76rem; --radius:.75rem; } * { box-sizing:border-box; } html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } } body { margin:0; background:var(--paper); color:var(--body); font-family:var(--sans); font-size:1.0625rem; line-height:1.65; font-optical-sizing:auto; -webkit-font-smoothing:antialiased; /* Guard against a stray full-bleed element scrolling the page sideways. `clip` rather than `hidden` — `hidden` on breaks position:sticky on the header in several browsers. */ overflow-x:clip; } h1,h2,h3,h4 { font-family:var(--display); color:var(--ink); margin:0; font-weight:600; line-height:1.14; letter-spacing:-.022em; } h1 { font-size:clamp(2.3rem, 1.3rem + 3.7vw, 4.05rem); letter-spacing:-.032em; } h2 { font-size:clamp(1.7rem, 1.15rem + 2vw, 2.5rem); letter-spacing:-.026em; } h3 { font-size:1.22rem; } h4 { font-size:1.02rem; } p { margin:0; } img, svg { max-width:100%; } img { height:auto; } a { color:var(--teal); text-underline-offset:.2em; text-decoration-thickness:1px; } a:hover { color:var(--teal-hi); } :focus-visible { outline:2.5px solid var(--teal); outline-offset:3px; border-radius:3px; } .wrap { max-width:var(--wrap); margin:0 auto; padding:0 1.5rem; } /* The teal full stop that ends every concept headline. */ .dot { color:var(--teal); } .lede { font-size:clamp(1.06rem, .98rem + .4vw, 1.24rem); color:var(--body); max-width:44rem; } /* Small uppercase teal label above a section heading. */ .eyebrow { font-family:var(--display); font-weight:600; font-size:.775rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); margin:0 0 .85rem; } .band .eyebrow { color:var(--band-teal); } .skip { position:absolute; left:-9999px; top:0; background:var(--teal); color:#fff; padding:.7rem 1.1rem; z-index:100; border-radius:0 0 .4rem 0; text-decoration:none; } .skip:focus { left:0; } /* ---------------------------------------------------------------- header -- */ .site-header { position:sticky; top:0; z-index:30; background:var(--paper); background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(12px) saturate(1.3); border-bottom:1px solid var(--rule); } @supports not (backdrop-filter: blur(1px)) { .site-header { background:var(--paper); } } .site-header .wrap { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:.7rem 1.5rem; } .lockup { display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; } .lockup img { width:2.6rem; height:2.6rem; flex:none; display:block; } .lockup .name { font-family:var(--display); font-weight:600; font-size:1.16rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink); display:block; line-height:1.1; } .lockup .tag { font-size:.735rem; color:var(--teal); letter-spacing:.005em; display:block; margin-top:.16rem; } @media (max-width:34rem) { .lockup .tag { display:none; } } .nav-links { display:flex; align-items:center; gap:1.9rem; } .nav-links a { color:var(--body); text-decoration:none; font-size:.95rem; font-weight:500; padding:.35rem 0; border-bottom:2px solid transparent; } .nav-links a:hover { color:var(--ink); } .nav-links a[aria-current="page"] { color:var(--teal); border-bottom-color:var(--teal); } /* No JS on this site, so the small-screen nav becomes a scrollable rail under the lockup rather than a toggle menu. Hiding it outright (as the old single page did) would leave a multi-page site with no mobile navigation at all. */ @media (max-width:58rem) { .site-header .wrap { flex-wrap:wrap; gap:.5rem; padding-bottom:0; } .nav-links { /* flex-basis, not width:100% — the rail is a flex child, and width:100% combined with any horizontal margin would make the header wider than the viewport and scroll the whole page sideways. */ order:3; flex-basis:100%; min-width:0; gap:1.35rem; margin:0; overflow-x:auto; scrollbar-width:none; border-top:1px solid var(--rule-soft); padding:.15rem 0 0; } .nav-links::-webkit-scrollbar { display:none; } .nav-links a { white-space:nowrap; font-size:.9rem; padding:.6rem 0; } } /* --------------------------------------------------------------- buttons -- */ .btn { display:inline-flex; align-items:center; gap:.55rem; font-family:var(--sans); font-weight:600; font-size:.975rem; letter-spacing:-.008em; text-decoration:none; padding:.8rem 1.5rem; border-radius:.45rem; border:1.5px solid transparent; cursor:pointer; transition:background-color .15s ease, color .15s ease, border-color .15s ease; } .btn .arrow { transition:transform .15s ease; } .btn:hover .arrow { transform:translateX(3px); } @media (prefers-reduced-motion: reduce) { .btn, .btn .arrow { transition:none; } } .btn-primary { background:var(--teal); color:#fff; } .btn-primary:hover { background:var(--teal-deep); color:#fff; } .btn-secondary { background:transparent; color:var(--ink); border-color:var(--rule); } .btn-secondary:hover { background:var(--surface); color:var(--ink); border-color:var(--stone); } .band .btn-primary { background:var(--band-ink); color:var(--charcoal); } .band .btn-primary:hover { background:#fff; color:var(--charcoal); } .band .btn-secondary { color:var(--band-ink); border-color:var(--band-rule); } .band .btn-secondary:hover { background:rgba(255,255,255,.08); color:var(--band-ink); border-color:rgba(255,255,255,.32); } /* Tertiary link with a trailing arrow. */ .link-arrow { display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.95rem; text-decoration:none; } .link-arrow:hover { text-decoration:underline; } .link-arrow .arrow { transition:transform .15s ease; } .link-arrow:hover .arrow { transform:translateX(3px); } @media (prefers-reduced-motion: reduce) { .link-arrow .arrow { transition:none; } } /* -------------------------------------------------------------- sections -- */ section { padding:clamp(3.5rem, 2rem + 5vw, 6rem) 0; } .section-alt { background:var(--paper-2); } .section-rule { border-top:1px solid var(--rule); } .sec-head { max-width:44rem; margin-bottom:2.75rem; } .sec-head h2 { margin-bottom:.9rem; } .sec-head .lede { font-size:1.06rem; } .sec-head-row { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem 2rem; flex-wrap:wrap; margin-bottom:2.75rem; } .sec-head-row .sec-head { margin-bottom:0; } /* ------------------------------------------------------------------ hero -- */ .hero { position:relative; overflow:hidden; padding:clamp(3rem,1.5rem + 5vw,5.5rem) 0 clamp(3rem,1.5rem + 5vw,5rem); } .hero-grid { display:grid; gap:2.5rem; align-items:center; } @media (min-width:62rem) { .hero-grid { grid-template-columns:1.02fr .98fr; gap:3rem; } } .hero h1 { max-width:15ch; margin-bottom:1.4rem; } .hero .lede { max-width:38rem; } .hero-cta { display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.2rem; } .hero-art { margin:0; } .hero-art img { display:block; width:100%; } /* Bleed the hero artwork off the right edge of the viewport, as the concept boards do. The pull equals the wrap gutter plus whatever margin sits outside the wrap at this viewport width. .hero has overflow:hidden, so the overhang is clipped rather than scrolling the page. */ @media (min-width:62rem) { .hero-grid > .hero-art { margin-right:calc(-1.5rem - max(0px, (100vw - var(--wrap)) / 2)); } } /* Wide artwork used as a full-width band under a page title. */ .hero-banner { position:relative; } .hero-banner h1 { max-width:26ch; } /* Keep the intro copy clear of the artwork overlaid on the right. */ @media (min-width:62rem) { .hero-banner .lede { max-width:34rem; } } .hero-banner .hero-art { position:absolute; inset:0 0 0 42%; pointer-events:none; z-index:0; } .hero-banner .hero-art img { width:100%; height:100%; object-fit:cover; object-position:left center; } .hero-banner .wrap { position:relative; z-index:1; } @media (max-width:62rem) { .hero-banner .hero-art { position:static; inset:auto; margin-top:2rem; } .hero-banner .hero-art img { height:auto; } } /* ------------------------------------------------------------ icon tiles -- */ .tiles { display:grid; gap:1.1rem; } @media (min-width:44rem) { .tiles { grid-template-columns:repeat(2,1fr); } } @media (min-width:64rem) { .tiles.tiles-3 { grid-template-columns:repeat(3,1fr); } } @media (min-width:64rem) { .tiles.tiles-4 { grid-template-columns:repeat(4,1fr); } } .tile { background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); padding:1.5rem 1.5rem 1.6rem; } .tile .ico { width:2.9rem; height:2.9rem; border-radius:50%; background:var(--paper-2); color:var(--teal); display:grid; place-items:center; margin-bottom:1.05rem; } .tile .ico svg { width:1.45rem; height:1.45rem; display:block; } .tile h3 { font-size:1.06rem; margin-bottom:.45rem; } .tile p { font-size:.965rem; } /* --------------------------------------------------------- numbered work -- */ .numbered { display:grid; gap:2.5rem 2.75rem; } @media (min-width:58rem) { .numbered { grid-template-columns:repeat(3,1fr); } } .numbered article { border-top:2px solid var(--ink); padding-top:1.3rem; } .numbered .num { display:block; font-family:var(--display); font-weight:600; font-size:.8rem; letter-spacing:.12em; color:var(--teal); margin-bottom:.6rem; } .numbered h3 { margin-bottom:.65rem; } .numbered p { font-size:1rem; } .numbered ul { list-style:none; margin:1.15rem 0 0; padding:0; border-top:1px solid var(--rule); font-size:.94rem; } .numbered li { padding:.55rem 0; border-bottom:1px solid var(--rule-soft); } .numbered .link-arrow { margin-top:1.1rem; } /* ------------------------------------------------------------- product -- */ .products { display:grid; gap:1.25rem; } @media (min-width:56rem) { .products.products-3 { grid-template-columns:repeat(3,1fr); } } @media (min-width:52rem) { .products.products-2 { grid-template-columns:repeat(2,1fr); } } /* Full-width rows (the products page). Two columns inside each card: an identity rail on the left, the copy on the right — otherwise the text runs to a ~130-character measure across a 1200px card. */ @media (min-width:52rem) { .products-stack .product { display:grid; grid-template-columns:14.5rem 1fr; gap:2.5rem; align-items:start; } .products-stack .product-top { flex-direction:column; align-items:flex-start; gap:.75rem; margin-bottom:0; } .products-stack .product-top img { width:4.5rem; height:4.5rem; } .products-stack .product-top .pill { margin-top:0; } .products-stack .product-body { display:flex; flex-direction:column; max-width:66ch; } } .product { position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); padding:1.75rem; display:flex; flex-direction:column; } /* Topographic watermark, bottom-right, from the branding kit's graphic motifs. */ .product::after { content:""; position:absolute; right:-2rem; bottom:-3rem; width:18rem; height:11rem; opacity:.5; pointer-events:none; background:url(/img/topo-lines.svg) right bottom / contain no-repeat; } .product > * { position:relative; z-index:1; } .product-top { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.15rem; } .product-top img { width:3.5rem; height:3.5rem; border-radius:.8rem; flex:none; display:block; } .product h3 { margin-bottom:.15rem; } .product .byline { font-size:.875rem; color:var(--teal); font-weight:500; } .product .summary { font-family:var(--display); font-weight:500; font-size:1.06rem; color:var(--ink); margin-bottom:.65rem; line-height:1.4; } .product p { font-size:.99rem; } .product p + p { margin-top:.7rem; } .product .foot { margin-top:auto; padding-top:1.4rem; } .product .note { margin-top:auto; padding-top:1.4rem; font-size:.9rem; color:var(--muted); } .pill { display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; padding:.24rem .6rem; border-radius:1rem; border:1px solid var(--rule); color:var(--muted); margin-top:.5rem; } .pill-live { color:var(--teal); border-color:color-mix(in srgb, var(--teal) 42%, transparent); background:color-mix(in srgb, var(--teal) 7%, transparent); } .feature-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; } .feature-chips span { font-size:.83rem; color:var(--body); border:1px solid var(--rule); border-radius:.35rem; padding:.32rem .65rem; background:var(--paper); } /* ----------------------------------------------------------------- steps -- */ .steps { display:grid; gap:2rem 2.25rem; counter-reset:step; } @media (min-width:50rem) { .steps { grid-template-columns:repeat(2,1fr); } } @media (min-width:68rem) { .steps.steps-4 { grid-template-columns:repeat(4,1fr); } } .step { display:flex; gap:.95rem; align-items:flex-start; } .step .n { flex:none; width:1.85rem; height:1.85rem; border-radius:50%; background:var(--charcoal); color:#fff; font-family:var(--display); font-weight:600; font-size:.85rem; display:grid; place-items:center; margin-top:.1rem; } .step h3 { font-size:1.04rem; margin-bottom:.35rem; } .step p { font-size:.955rem; } /* ------------------------------------------------------------ principles -- */ .principles { display:grid; gap:1.9rem 2.75rem; } @media (min-width:46rem) { .principles { grid-template-columns:1fr 1fr; } } .principles > div { padding-left:1.15rem; border-left:2px solid var(--teal); } .principles h3 { font-size:1.06rem; margin-bottom:.4rem; } .principles p { font-size:.985rem; } /* ----------------------------------------------------------------- split -- */ .split { display:grid; gap:2.5rem; align-items:start; } @media (min-width:58rem) { .split { grid-template-columns:1.4fr 1fr; gap:4rem; } } .prose p + p { margin-top:1.05rem; } .panel { background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); padding:1.65rem 1.7rem; } .panel dl { margin:0; display:grid; gap:1.05rem; } .panel dt { font-size:.755rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .panel dd { margin:.22rem 0 0; color:var(--ink); font-weight:500; } .mono { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing:.02em; } .checks { list-style:none; margin:0; padding:0; display:grid; gap:1.15rem; } .checks li { display:flex; gap:.8rem; align-items:flex-start; } .checks svg { width:1.3rem; height:1.3rem; flex:none; color:var(--teal); margin-top:.16rem; } .checks strong { display:block; color:var(--ink); font-weight:600; font-family:var(--display); font-size:1rem; } .checks p { font-size:.955rem; margin-top:.15rem; } /* ------------------------------------------------------------------ band -- */ .band { background:var(--band); color:var(--band-body); } .band h1, .band h2, .band h3 { color:var(--band-ink); } .band .lede { color:var(--band-body); } .band a { color:var(--band-ink); } .contact-row { display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem; margin-top:2.1rem; } .contact-row .alt { font-size:.95rem; color:var(--band-body); } /* ---------------------------------------------------------------- footer -- */ .site-footer { background:var(--paper-2); border-top:1px solid var(--rule); padding:3rem 0 2rem; font-size:.94rem; } .foot-grid { display:grid; gap:2.25rem; } @media (min-width:52rem) { .foot-grid { grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3rem; } } .foot-brand .lockup { margin-bottom:.9rem; } .foot-brand p { font-size:.93rem; color:var(--muted); max-width:22rem; } .foot-col h4 { font-family:var(--display); font-size:.775rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.85rem; } .foot-col ul { list-style:none; margin:0; padding:0; display:grid; gap:.55rem; } .foot-col a { color:var(--body); text-decoration:none; } .foot-col a:hover { color:var(--teal); } .foot-legal { margin-top:2.75rem; padding-top:1.4rem; border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 2rem; font-size:.88rem; color:var(--muted); } .foot-legal nav { display:flex; flex-wrap:wrap; gap:1.4rem; } .foot-legal a { color:var(--muted); text-decoration:none; } .foot-legal a:hover { color:var(--ink); } /* ------------------------------------------------------- document sheets -- */ /* capability.html / privacy.html / 404.html */ .sheet { max-width:52rem; margin:0 auto; padding:2.25rem 1.5rem 4rem; } .sheet-narrow { max-width:44rem; } .back { display:inline-flex; align-items:center; gap:.45rem; font-size:.92rem; font-weight:600; text-decoration:none; margin-bottom:2.25rem; } .back:hover { text-decoration:underline; } .masthead { display:flex; align-items:flex-start; gap:1.1rem; padding-bottom:1.5rem; border-bottom:2px solid var(--ink); } .masthead img { width:3.2rem; height:3.2rem; flex:none; display:block; } .masthead h1 { font-size:clamp(1.9rem,1.3rem + 2.2vw,2.6rem); } .masthead .sub { font-size:.98rem; color:var(--teal); margin-top:.3rem; } .doc section { padding:1.8rem 0; border-bottom:1px solid var(--rule); } .doc section h2 { font-family:var(--display); font-size:1rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:1.05rem; } .doc h3 { font-size:1.02rem; margin-bottom:.3rem; } .cols { display:grid; gap:1.5rem; } @media (min-width:40rem) { .cols { grid-template-columns:1fr 1fr; gap:1.5rem 2.5rem; } } .cols p { font-size:.96rem; } dl.data { margin:0; display:grid; gap:1.05rem; } @media (min-width:40rem) { dl.data { grid-template-columns:1fr 1fr; gap:1.05rem 2.5rem; } } dl.data dt { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } dl.data dd { margin:.22rem 0 0; color:var(--ink); font-weight:500; } ul.plain { list-style:none; margin:0; padding:0; } ul.plain li { padding:.5rem 0; border-bottom:1px solid var(--rule-soft); font-size:.97rem; } ul.plain li:last-child { border-bottom:0; } .perf { display:grid; gap:1.35rem; } .perf article { padding-left:1.1rem; border-left:2px solid var(--teal); } .perf h3 { margin-bottom:.28rem; } .perf p { font-size:.96rem; } .perf .status { display:inline-block; font-size:.73rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-left:.5rem; border:1px solid var(--rule); border-radius:1rem; padding:.1rem .5rem; vertical-align:.1em; } .doc-foot { padding-top:1.7rem; font-size:.88rem; color:var(--muted); } .doc-foot a { color:var(--muted); } /* Long-form legal copy (privacy). */ .legal h2 { font-size:1.16rem; font-weight:600; margin:2.3rem 0 .6rem; letter-spacing:-.015em; } .legal p { margin:0 0 1rem; } .legal ul { margin:0 0 1rem; padding-left:1.2rem; } .legal li { margin-bottom:.4rem; } /* ----------------------------------------------------------------- print -- */ /* capability.html doubles as the one-page PDF handout. */ @media print { @page { margin:14mm; } :root { --paper:#fff; --paper-2:#fff; --surface:#fff; --ink:#000; --body:#1a1a1a; --muted:#555; --rule:#bbb; --rule-soft:#ddd; --teal:#0E6B6B; } body { font-size:9.6pt; line-height:1.42; background:#fff; } .sheet { max-width:none; padding:0; } .back, .no-print, .site-header, .site-footer { display:none !important; } h1 { font-size:20pt; } .doc section h2 { font-size:8.4pt; margin-bottom:.5rem; } h3 { font-size:9.8pt; } .doc section { padding:.62rem 0; break-inside:avoid; } .masthead { padding-bottom:.6rem; } .masthead img { width:2.3rem; height:2.3rem; } .cols, dl.data { gap:.5rem 1.6rem; } .perf { gap:.55rem; } ul.plain li { padding:.16rem 0; } a { text-decoration:none; color:#000; } .doc-foot { padding-top:.7rem; font-size:8pt; } }