/* ============================================================ Basis Inc — lander Three style variants, switched via steel cold graphite, hairline rules, restrained blueprint bone paper, exposed grid, brutalist instrument black instrument panel, mono, signal amber ============================================================ */ /* ---------- tokens: steel (default) ---------- */ :root { --bg: #0b0e11; --bg-canvas: #0b0e11; --panel: #12171c; --ink: #e6eaee; --ink-dim: #8e9aa6; --ink-faint: #4d5a66; --rule: #1e262e; --accent: #6fa8c7; --accent-ink: #0b0e11; --font-sans: "Archivo", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif; --font-mono: "Chivo Mono", ui-monospace, "SF Mono", Menlo, monospace; --lede-size: clamp(1.5rem, 1.05rem + 2.1vw, 2.6rem); --lede-weight: 500; --lede-tracking: -0.022em; --lede-leading: 1.28; --body-size: clamp(1rem, 0.95rem + 0.35vw, 1.175rem); --measure: 30ch; --page-max: 60rem; --rule-weight: 1px; --radius: 0; --logo-w: clamp(190px, 24vw, 300px); } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100svh; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--body-size); line-height: 1.55; font-variation-settings: "wdth" 100; -webkit-font-smoothing: antialiased; transition: background-color .35s ease, color .35s ease; } a { color: inherit; } #bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; } /* ---------- layout ---------- */ .page { position: relative; z-index: 2; max-width: var(--page-max); margin: 0 auto; padding: clamp(2.5rem, 7vh, 6rem) clamp(1.5rem, 6vw, 5rem) 3rem; display: flex; flex-direction: column; min-height: 100svh; gap: clamp(2.5rem, 7vh, 5rem); } /* ---------- masthead ---------- */ .masthead { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; border-bottom: var(--rule-weight) solid #2c3743; padding-bottom: 1.25rem; } .logo { display: block; width: var(--logo-w); height: auto; color: var(--ink); } .masthead .tag { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; padding-bottom: 0.2em; } /* ---------- statement ---------- */ .statement { max-width: 46rem; } .statement p { margin: 0 0 1.15em; } .statement .lede { font-size: var(--lede-size); font-weight: var(--lede-weight); letter-spacing: var(--lede-tracking); line-height: var(--lede-leading); margin-bottom: 1.4rem; text-wrap: balance; } .statement .lede em { font-style: normal; color: var(--accent); } .statement .turn { font-size: calc(var(--body-size) * 1.12); color: var(--ink); margin-bottom: 1.1em; } .statement .detail { color: var(--ink-dim); max-width: 40rem; } /* ---------- rules ---------- */ .rule { border: 0; border-top: var(--rule-weight) solid var(--rule); margin: 0; } /* ---------- products ---------- */ .products { margin-top: auto; } .section-blurb { font-size: var(--body-size); font-weight: 400; color: var(--ink-dim); letter-spacing: 0; margin: 0 0 1.25rem; max-width: 40rem; } .product-list { list-style: none; margin: 0; padding: 0; border-top: var(--rule-weight) solid var(--rule); } .product { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr auto; gap: 0.35rem 1.5rem; align-items: baseline; padding: 1.15rem 0; border-bottom: var(--rule-weight) solid var(--rule); text-decoration: none; color: inherit; } .product:focus-visible { outline: none; } .product .name { font-weight: 600; letter-spacing: 0.01em; font-variation-settings: "wdth" 112; transition: color .2s ease; } .product .what { color: var(--ink-dim); transition: color .2s ease; } .product:hover .what, .product:focus-visible .what { color: var(--ink); } .product .go { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-faint); letter-spacing: 0.1em; white-space: nowrap; transition: color .2s ease, transform .25s cubic-bezier(.2, .7, .2, 1); } .product:hover .go, .product:focus-visible .go { color: var(--accent); transform: translateX(0.35rem); } .product .go svg { height: 1em; width: auto; vertical-align: -0.18em; margin-left: 0.2em; } /* the Propel lockup, rebuilt live from studio/lockup.html */ .plockup { font-size: 1.05em; white-space: nowrap; filter: grayscale(0.85); transition: filter .25s ease; } .product:hover .plockup, .product:focus-visible .plockup { filter: none; } .plockup svg { height: 1.25em; width: auto; vertical-align: -0.26em; margin-right: 0.19em; } .plockup .wm { font-family: "Gothic A1", system-ui, sans-serif; font-weight: 800; letter-spacing: -0.04em; text-transform: uppercase; } @media (max-width: 46rem) { .product { grid-template-columns: 1fr auto; } .product .what { grid-column: 1 / -1; } } /* ---------- footer ---------- */ .foot { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); padding-top: 1.5rem; } .foot .legal { line-height: 1.8; } @media (max-width: 40rem) { /* stacked: contact above the copyright notice, always */ .foot { flex-direction: column; gap: 1rem; } .foot a { order: -1; } } .foot a { text-decoration: none; } .foot a:hover { color: var(--accent); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }